code color prop with test, docs and sb

Author: GoldGroove06

docs/app/docs/components/code/page.js

@@ -7,6 +7,17 @@ const PAGE_NAME = 'CODE_DOCS';
 export const metadata = SEO.getMetadata(PAGE_NAME);
 
 const CodeDocs = () => {
+    const columns = [
+        {name: 'Prop', id: 'prop'},
+        {name: 'Type', id: 'type'},
+        {name: 'Default', id: 'default'},
+        {name: 'Description', id: 'description'},
+    ];
+
+    const data = [
+        {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the code', id: 'color'},
+    ];
+
     return <div>
         <Documentation
             currentPage={PAGE_NAME} title='Code' description={`
@@ -19,6 +30,10 @@ const CodeDocs = () => {
             </Documentation.ComponentHero>
 
         </Documentation>
+
+        <div className="max-w-screen-md">
+                <Documentation.Table columns={columns} data={data} />
+            </div>
     </div>;
 };
 

src/components/ui/Code/Code.tsx

@@ -8,12 +8,19 @@ const COMPONENT_NAME = 'Code';
 export type CodeProps= {
     children: React.ReactNode;
     customRootClass?: string;
+    color?: string;
 }
 
-const Code = ({ children, customRootClass = '' }: CodeProps) => {
+const Code = ({ children, customRootClass = '', color='' }: CodeProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+    
+    const data_attributes: Record<string, string> = {};
 
-    return <code className={clsx(rootClass)}>
+    if (color) {
+        data_attributes['data-accent-color'] = color;
+    }
+
+    return <code className={clsx(rootClass)} {...data_attributes}>
         {children}
     </code>;
 };

src/components/ui/Code/stories/Code.stories.js

@@ -10,11 +10,11 @@ export default {
     render: (args) => <SandboxEditor>
         <div >
             <div className='flex space-x-2'>
-                <Code className='space-x-1'>
+                <Code className='space-x-1' {...args}>
          requestAnimationFrame()
                 </Code>
 
-                <Code className='space-x-1'>
+                <Code className='space-x-1' {...args}>
                     {Code_TEXT}
                 </Code>
 
@@ -30,3 +30,9 @@ export const All = {
         className: ''
     }
 };
+
+export const Color = {
+    args: {
+        color: 'green'
+    }
+}

src/components/ui/Code/tests/Code.test.tsx

@@ -10,4 +10,12 @@ describe('Code Component', () => {
         expect(codeElement).toBeInTheDocument();
         expect(codeElement).toHaveTextContent("console.log('Hello world!');");
     });
+
+    it('renders without crashing', () => {
+        const { container } = render(<Code color='blue'>console.log('Hello world!');</Code>);
+
+        const codeElement = container.querySelector('code');
+        expect(codeElement).toBeInTheDocument();
+        expect(codeElement).toHaveAttribute('data-accent-color', 'blue');
+    });
 })