add variant and size for blockquote (#922)

Author: jindaljyoti

docs/app/docs/components/blockquote/docs/colorCodeUsage.js

@@ -0,0 +1,9 @@
+import { getSourceCodeFromPath } from '@/utils/parseSourceCode';
+
+const blockQuoteColorSourceCode = await getSourceCodeFromPath('docs/app/docs/components/blockquote/examples/BlockQuoteColor.tsx');
+
+export const code = {
+    javascript: {
+        code: blockQuoteColorSourceCode
+    }
+};

docs/app/docs/components/blockquote/docs/sizeCodeUsage.js

@@ -0,0 +1,9 @@
+import { getSourceCodeFromPath } from '@/utils/parseSourceCode';
+
+const blockQuoteSizesSourceCode = await getSourceCodeFromPath('docs/app/docs/components/blockquote/examples/BlockQuoteSizes.tsx');
+
+export const code = {
+    javascript: {
+        code: blockQuoteSizesSourceCode
+    }
+};

docs/app/docs/components/blockquote/docs/variantCodeUsage.js

@@ -0,0 +1,9 @@
+import { getSourceCodeFromPath } from '@/utils/parseSourceCode';
+
+const blockQuoteVariantsSourceCode = await getSourceCodeFromPath('docs/app/docs/components/blockquote/examples/BlockQuoteVariants.tsx');
+
+export const code = {
+    javascript: {
+        code: blockQuoteVariantsSourceCode
+    }
+};

docs/app/docs/components/blockquote/examples/BlockQuoteColor.tsx

@@ -0,0 +1,15 @@
+import BlockQuote from '@radui/ui/BlockQuote';
+
+
+const BlockQuoteColor = () => {
+    const sizes = ['small', 'medium', 'large', 'x-large'];
+    return <div className='flex flex-col gap-4'>
+                {sizes.map((size, index) => {
+                    return <BlockQuote key={index} size={size} color='pink'>
+                         "Behind every great man is a woman rolling her eyes." — Jim Carrey
+                    </BlockQuote>
+                })}
+            </div>
+}
+
+export default BlockQuoteColor;

docs/app/docs/components/blockquote/examples/BlockQuoteSizes.tsx

@@ -0,0 +1,17 @@
+import BlockQuote from '@radui/ui/BlockQuote';
+
+const BlockQuoteSizes = () => {
+    const sizes = ['small', 'medium', 'large', 'x-large'];
+
+    return <div className='flex flex-col gap-4'>
+         
+                {sizes.map((size, index) => {
+                    return <BlockQuote key={index} size={size} >
+                        <span>"Behind every great man is a woman rolling her eyes." — Jim Carrey</span>
+                        </BlockQuote>
+                })}
+            </div>
+    
+}
+
+export default BlockQuoteSizes;

docs/app/docs/components/blockquote/examples/BlockQuoteVariants.tsx

@@ -0,0 +1,9 @@
+
+const BlockQuoteVariants = () => {
+     return <div>
+         
+     </div>
+    
+};
+
+export default BlockQuoteVariants;

docs/app/docs/components/blockquote/page.mdx

@@ -1,6 +1,12 @@
 import Documentation from "@/components/layout/Documentation/Documentation"
 import codeUsage, { BlockQuoteTable } from "./docs/codeUsage"
 import BlockQuote from "@radui/ui/BlockQuote"
+import { code as variantCodeUsage } from './docs/variantCodeUsage';
+import { code as sizeCodeUsage } from './docs/sizeCodeUsage';
+import { code as colorCodeUsage } from './docs/colorCodeUsage';
+import BlockQuoteVariants from './examples/BlockQuoteVariants';
+import BlockQuoteSizes from './examples/BlockQuoteSizes';
+import BlockQuoteColor from './examples/BlockQuoteColor';
 
 <Documentation title={`BlockQuote`} description={`
             BlockQuote is used to display a quote.
@@ -11,12 +17,21 @@ import BlockQuote from "@radui/ui/BlockQuote"
                         "Behind every great man is a woman rolling her eyes." — Jim Carrey
                     </BlockQuote>
 
-
-              
             </Documentation.ComponentHero>
 
-            
-                <Documentation.Table columns={BlockQuoteTable.columns} data={BlockQuoteTable.data} />
-           
+            <Documentation.Table columns={BlockQuoteTable.columns} data={BlockQuoteTable.data} />
+
+            <Documentation.ComponentHero title='Variants' codeUsage={variantCodeUsage}>
+                <BlockQuoteVariants />
+            </Documentation.ComponentHero>
+  
+
+            <Documentation.ComponentHero title='Sizes' codeUsage={sizeCodeUsage}>
+                <BlockQuoteSizes />
+            </Documentation.ComponentHero>
+
+            <Documentation.ComponentHero title='Color' codeUsage={colorCodeUsage}>
+                <BlockQuoteColor />
+            </Documentation.ComponentHero>
 
         </Documentation>

src/components/ui/BlockQuote/BlockQuote.tsx

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

src/components/ui/BlockQuote/stories/BlockQuote.stories.tsx

@@ -11,6 +11,9 @@ const BLOCKQUOTE_TEXT = `Avian carriers can provide high delay, low throughput,
  avoidance system, which increases availability.`;
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const Variants = []; // TODO
+const Sizes = ['small', 'medium', 'large', 'x-large'];
+
 export default {
     title: 'Components/BlockQuote',
     component: BlockQuote,
@@ -39,3 +42,38 @@ export const Color = {
         color: 'blue'
     }
 };
+
+export const Size = () => {
+    return <SandboxEditor>
+        <div className='mt-4 mb-2'>
+            <p className='text-gray-950'>BlockQuote Size</p>
+        </div>
+        <div>
+
+                <div className='mb-10'>
+                    <span className="flex flex-col gap-3">
+                        {Sizes.map((size, index) => {
+                            return <BlockQuote key={index} size={size} >
+                                <div>{BLOCKQUOTE_TEXT} </div>
+                            </BlockQuote>;
+                        })}
+                    </span>
+                </div>
+
+        </div>
+    </SandboxEditor>;
+};
+
+export const Variant = () => {
+    return <SandboxEditor>
+        <div className='mt-4 mb-2'>
+            <p className='text-gray-950'>BlockQuote Variant</p>
+        </div>
+        <div className='flex flex-col gap-3'>
+            {/* TODO */}
+            <BlockQuote>
+                <div>{BLOCKQUOTE_TEXT}</div>
+            </BlockQuote>
+       </div>
+    </SandboxEditor>;
+};

styles/themes/components/blockquote.scss

@@ -2,4 +2,33 @@
     border-color: var(--rad-ui-color-accent-600);
     border-left-width: 0.5rem;
     padding-left: 0.75rem; // Assuming 1rem = 16px
+
+    // BlockQuote Variants - TODO
+      
+    /** BlockQuote Sizes */
+    &[data-block-quote-size="small"]{
+        font-size: small;
+        padding: 4px 10px;
+      
+    }
+
+    &[data-block-quote-size="medium"]{
+        font-size: medium;
+        padding: 4px 10px;
+    
+    }
+
+    &[data-block-quote-size="large"]{
+        font-size: large;
+        padding: 4px 10px;
+    
+    }
+
+    &[data-block-quote-size="x-large"]{
+        font-size: x-large;
+        padding: 4px 10px;
+       
+    }
 }
+
+