BlockQuote color prop with test, docs and storybook (#797)

Co-authored-by: Pranay Kothapalli <pranaykothapalli@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: 3 people

docs/app/docs/components/blockquote/page.js

@@ -11,6 +11,16 @@ import codeUsage from "./docs/codeUsage"
 
 
 const BlockQuoteDocs = () => {
+    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 quote', id: 'color'},
+    ];
     return <div>
         <Documentation currentPage={PAGE_NAME} title='BlockQuote' description={`
             BlockQuote is used to display a quote.
@@ -33,7 +43,12 @@ const BlockQuoteDocs = () => {
 
                 </div>
             </Documentation.ComponentHero>
-
+            
+            
+            <div className="max-w-screen-md">
+                <Documentation.Table columns={columns} data={data} />
+            </div>
+        
         </Documentation>
     </div>
 }

src/components/ui/BlockQuote/BlockQuote.tsx

@@ -9,12 +9,19 @@ export type BlockQuoteProps = {
     children: React.ReactNode;
     customRootClass?: string;
     className?: string;
+    color?:string;
     props?: Record<string, any>[]
 }
-const BlockQuote = ({ children, customRootClass = '', className = '', ...props }: BlockQuoteProps) => {
+const BlockQuote = ({ children, customRootClass = '', className = '', color = '', ...props }: BlockQuoteProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
-    return <blockquote className={clsx(rootClass, className)} {...props}>{children}</blockquote>;
+    const data_attributes: Record<string, string> = {};
+
+    if (color) {
+        data_attributes['data-accent-color'] = color;
+    }
+
+    return <blockquote className={clsx(rootClass, className)} {...props} {...data_attributes}> {children}</blockquote>;
 };
 
 BlockQuote.displayName = COMPONENT_NAME;

src/components/ui/BlockQuote/stories/BlockQuote.stories.js

@@ -16,7 +16,7 @@ export default {
     render: (args) => <SandboxEditor>
         <div >
             <div className='flex space-x-2'>
-                <BlockQuote className='space-x-1'>
+                <BlockQuote className='space-x-1' {...args}>
                     <div className='text-gray-950'>{BLOCKQUOTE_TEXT} </div>
                 </BlockQuote>
 
@@ -32,3 +32,9 @@ export const All = {
         className: ''
     }
 };
+
+export const Color = {
+    args: {
+        color: 'blue'
+    }
+}

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

@@ -26,4 +26,9 @@ describe('BlockQuote', () => {
         render(<BlockQuote data-testid='block-quote'>BlockQuote</BlockQuote>);
         expect(screen.getByTestId('block-quote')).toBeInTheDocument();
     });
+
+    test('renders BlockQuote component with color', () => {
+        render(<BlockQuote className='mr-2' color='blue'>BlockQuote</BlockQuote>);
+        expect(screen.getByText('BlockQuote')).toHaveAttribute('data-accent-color', 'blue');
+    });
 });