add variant and size for component

Author: jindaljyoti

src/components/ui/Callout/Callout.tsx

@@ -9,13 +9,16 @@ export type CalloutProps = {
     children?: React.ReactNode;
     className?: string ;
     color?: string;
+    variant?: string;
+    size?: string;
     customRootClass?: string;
     props?: object[]
 }
 
 const COMPONENT_NAME = 'Callout';
-const Callout = ({ children, className = '', color, customRootClass, ...props }: CalloutProps) => {
-    return (<CalloutRoot customRootClass={customRootClass} className={clsx(className)} color={color ?? undefined} {...props}>
+const Callout = ({ children, className = '', color, variant='', size='', customRootClass, ...props }: CalloutProps) => {
+    return (
+    <CalloutRoot customRootClass={customRootClass} className={clsx(className)} color={color ?? undefined} variant={variant} size={size} {...props}>
         {children}
     </CalloutRoot>);
 };

src/components/ui/Callout/fragments/CalloutRoot.tsx

@@ -7,13 +7,29 @@ type CalloutRootProps = {
     children?: React.ReactNode;
     className?: string | '' ;
     color?: string;
+    variant?: string;
+    size?: string;
     customRootClass?: string;
     props?: Record<any, any>[]
 }
 
-const CalloutRoot = ({ children, className, color, customRootClass, ...props }: CalloutRootProps) => {
+const CalloutRoot = ({ children, className, color, variant='', size='', customRootClass, ...props }: CalloutRootProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-    return <div className={clsx(rootClass, className)} data-accent-color={color ?? undefined} {...props}>
+    const data_attributes: Record<string, string> = {};
+
+    if (variant) {
+        data_attributes['data-callout-variant'] = variant;
+    }
+
+    if (size) {
+        data_attributes['data-callout-size'] = size;
+    }
+
+    if (color) {
+        data_attributes['data-accent-color'] = color;
+    }
+
+    return <div className={clsx(rootClass, className)} data-accent-color={color ?? undefined} {...data_attributes} {...props}>
         {children}
     </div>;
 };

src/components/ui/Callout/stories/Callout.stories.tsx

@@ -6,6 +6,8 @@ import React from 'react';
 const InfoIcon = () => {
     return (<svg width="18" height="18" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>);
 };
+const Variants = ['soft', 'outline'];
+const Sizes = ['small', 'medium', 'large', 'x-large'];
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
@@ -53,3 +55,43 @@ const RedTextTemplate = (args: any) => {
     </SandboxEditor>;
 };
 export const RedText = RedTextTemplate.bind();
+
+export const Size = () => {
+    return <SandboxEditor>
+        <div className='mt-4 mb-2'>
+            <p className='text-gray-950'>Callout Size</p>
+        </div>
+        <div>
+
+            {Variants.map((variant, index) => (
+                <div key={index} className='mb-10'>
+                    <span key={index} className="inline-flex items-start space-x-2">
+                        {Sizes.map((size, index) => {
+                            return <Callout key={index} size={size} variant={variant} >
+                                 <InfoIcon/> <span>This is a Callout</span>
+                            </Callout>;
+                        })}
+                    </span>
+                </div>
+            ))}
+
+        </div>
+    </SandboxEditor>;
+};
+
+export const Variant = () => {
+    return <SandboxEditor>
+        <div className='mt-4 mb-2'>
+            <p className='text-gray-950'>Callout Variant</p>
+        </div>
+        <div className='flex space-x-2'>
+
+                        {Variants.map((variant, index) => {
+                            return <Callout key={index}  variant={variant} >
+                                 <InfoIcon/> <span>This is a Callout</span>
+                            </Callout>;
+                        })}
+
+        </div>
+    </SandboxEditor>;
+};

styles/themes/components/callout.scss

@@ -8,4 +8,51 @@
      font-weight: 300;
      font-size: 14px;
      gap:8px;
- }
+
+     &[data-callout-variant="outline"]{
+        background-color: transparent;
+        color: var(--rad-ui-color-accent-900);
+        border: 1px solid var(--rad-ui-color-accent-900);
+
+       
+    }
+
+    &[data-callout-variant="soft"]{
+        border-top: 1px solid var(--rad-ui-color-accent-600);
+        border-left: 1px solid var(--rad-ui-color-accent-600);
+        border-right: 1px solid var(--rad-ui-color-accent-600);
+        border-bottom: 1px solid var(--rad-ui-color-accent-600);
+        color: var(--rad-ui-color-accent-950);
+        background-color:  var(--rad-ui-color-accent-400);
+
+      
+    }
+
+
+    /** Callout Sizes */
+    &[data-callout-size="small"]{
+        font-size: small;
+        padding: 4px 8px;
+        height: 24px;
+    }
+
+    &[data-callout-size="medium"]{
+        font-size: medium;
+        padding: 4px 12px;
+        height: 32px;
+    }
+
+    &[data-callout-size="large"]{
+        font-size: large;
+        padding: 4px 16px;
+        height: 40px;
+    }
+
+    &[data-callout-size="x-large"]{
+        font-size: x-large;
+        padding: 4px 24px;
+        height: 48px;
+    }
+}
+
+