@shohojdhara/atomix 0.2.3 → 0.2.5

package/src/layouts/Grid/Grid.stories.tsx

@@ -59,10 +59,7 @@ const DemoCard: React.FC<{
         variant === 'secondary' ? 'u-bg-success-subtle' : ''
       } ${variant === 'accent' ? 'u-bg-info-subtle' : ''}`}
     >
-      <div 
-        className="u-d-flex u-flex-column u-h-100"
-        style={{ minHeight: heightStyles[height] }}
-      >
+      <div className="u-d-flex u-flex-column u-h-100" style={{ minHeight: heightStyles[height] }}>
         <div className="u-flex-grow-1 u-d-flex u-align-items-center u-justify-content-center">
           <div className="u-text-center">{children}</div>
         </div>
@@ -170,7 +167,9 @@ export const GettingStarted: Story = {
 export const LayoutPatterns: Story = {
   render: () => (
     <div className="u-mb-8">
-      <h1 className="u-mb-6 u-text-brand-emphasis u-border-bottom u-pb-2">Common Layout Patterns</h1>
+      <h1 className="u-mb-6 u-text-brand-emphasis u-border-bottom u-pb-2">
+        Common Layout Patterns
+      </h1>
 
       {/* Sidebar Layout */}
       <div className="u-mb-8">
@@ -243,9 +242,7 @@ export const LayoutPatterns: Story = {
       {/* Article Layout */}
       <div className="u-mb-8">
         <h2 className="u-mb-4 u-text-brand-emphasis">Article Layout</h2>
-        <p className="u-mb-4 u-text-secondary-emphasis">
-          Centered content with optional sidebar:
-        </p>
+        <p className="u-mb-4 u-text-secondary-emphasis">Centered content with optional sidebar:</p>
 
         <Grid className="u-mb-4">
           <GridCol xs={12} md={8} offsetMd={2}>
@@ -275,9 +272,7 @@ export const ColumnSizing: Story = {
       {/* Fixed Sizes */}
       <div className="u-mb-8">
         <h2 className="u-mb-4 u-text-brand-emphasis">Fixed Column Sizes</h2>
-        <p className="u-mb-4 u-text-secondary-emphasis">
-          Specify exact column widths (1-12):
-        </p>
+        <p className="u-mb-4 u-text-secondary-emphasis">Specify exact column widths (1-12):</p>
 
         <Grid className="u-mb-4">
           <GridCol xs={2}>
@@ -384,9 +379,7 @@ export const ColumnOffsets: Story = {
       {/* Basic Offsets */}
       <div className="u-mb-8">
         <h2 className="u-mb-4 u-text-brand-emphasis">Basic Offsets</h2>
-        <p className="u-mb-4 u-text-secondary-emphasis">
-          Push columns to the right using offsets:
-        </p>
+        <p className="u-mb-4 u-text-secondary-emphasis">Push columns to the right using offsets:</p>
 
         <Grid className="u-mb-4">
           <GridCol xs={4}>
@@ -410,9 +403,7 @@ export const ColumnOffsets: Story = {
       {/* Centering */}
       <div className="u-mb-8">
         <h2 className="u-mb-4 u-text-brand-emphasis">Centering Content</h2>
-        <p className="u-mb-4 u-text-secondary-emphasis">
-          Center columns using equal offsets:
-        </p>
+        <p className="u-mb-4 u-text-secondary-emphasis">Center columns using equal offsets:</p>
 
         <Grid className="u-mb-4">
           <GridCol xs={6} offsetXs={3}>
@@ -484,9 +475,7 @@ export const Containers: Story = {
         <Container type="fluid" className="u-mb-4">
           <DemoCard variant="secondary" height="md">
             <div className="u-fs-lg u-fw-bold">Fluid Container</div>
-            <div className="u-fs-sm u-text-secondary-emphasis u-mt-2">
-              Full viewport width
-            </div>
+            <div className="u-fs-sm u-text-secondary-emphasis u-mt-2">Full viewport width</div>
           </DemoCard>
         </Container>
       </div>
@@ -678,9 +667,7 @@ export const AlignmentAndSpacing: Story = {
       {/* No Gutters */}
       <div className="u-mb-8">
         <h2 className="u-mb-4 u-text-brand-emphasis">No Gutters</h2>
-        <p className="u-mb-4 u-text-secondary-emphasis">
-          Remove spacing between columns:
-        </p>
+        <p className="u-mb-4 u-text-secondary-emphasis">Remove spacing between columns:</p>
 
         <div className="u-mb-6">
           <h3 className="u-mb-3 u-text-secondary-emphasis u-fw-medium">With gutters (default)</h3>

package/src/layouts/Grid/Grid.tsx

@@ -21,6 +21,14 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
    * No gutters between columns
    */
   noGutters?: boolean;
+  /**
+   * Flex direction
+   */
+  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  /**
+   * Wrap behavior
+   */
+  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
 }
 
 /**
@@ -37,7 +45,10 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
  * ```
  */
 export const Grid = forwardRef<HTMLDivElement, GridProps>(
-  ({ children, className = '', justifyContent, alignItems, noGutters, ...props }, ref) => {
+  (
+    { children, className = '', justifyContent, alignItems, noGutters, direction, wrap, ...props },
+    ref
+  ) => {
     const classes = ['o-grid'];
 
     if (justifyContent) {
@@ -52,6 +63,14 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       classes.push('o-grid--no-gutters');
     }
 
+    if (direction) {
+      classes.push(`u-flex-direction-${direction}`);
+    }
+
+    if (wrap) {
+      classes.push(`u-flex-wrap-${wrap}`);
+    }
+
     if (className) {
       classes.push(className);
     }

package/src/layouts/Grid/GridCol.tsx

@@ -12,27 +12,27 @@ export interface GridColProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Number of columns to span at extra small breakpoint (default)
    */
-  xs?: number | 'auto';
+  xs?: number | 'auto' | boolean;
   /**
    * Number of columns to span at small breakpoint
    */
-  sm?: number | 'auto';
+  sm?: number | 'auto' | boolean;
   /**
    * Number of columns to span at medium breakpoint
    */
-  md?: number | 'auto';
+  md?: number | 'auto' | boolean;
   /**
    * Number of columns to span at large breakpoint
    */
-  lg?: number | 'auto';
+  lg?: number | 'auto' | boolean;
   /**
    * Number of columns to span at extra large breakpoint
    */
-  xl?: number | 'auto';
+  xl?: number | 'auto' | boolean;
   /**
    * Number of columns to span at extra extra large breakpoint
    */
-  xxl?: number | 'auto';
+  xxl?: number | 'auto' | boolean;
   /**
    * Offset at extra small breakpoint
    */
@@ -57,6 +57,22 @@ export interface GridColProps extends HTMLAttributes<HTMLDivElement> {
    * Offset at extra extra large breakpoint
    */
   offsetXxl?: number;
+  /**
+   * Flex grow property
+   */
+  grow?: boolean;
+  /**
+   * Flex shrink property
+   */
+  shrink?: boolean;
+  /**
+   * Flex basis property
+   */
+  basis?: string;
+  /**
+   * Alignment of the column
+   */
+  align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
 }
 
 /**
@@ -80,6 +96,10 @@ export const GridCol = forwardRef<HTMLDivElement, GridColProps>(
       offsetLg,
       offsetXl,
       offsetXxl,
+      grow,
+      shrink,
+      basis,
+      align,
       ...props
     },
     ref
@@ -88,56 +108,47 @@ export const GridCol = forwardRef<HTMLDivElement, GridColProps>(
     const isDefaultAuto = !xs && !sm && !md && !lg && !xl && !xxl;
     const classes = isDefaultAuto ? ['o-grid__col', 'o-grid__col--auto'] : ['o-grid__col'];
 
-    // Add column size classes based on the exact SCSS pattern
-    // For xs (default breakpoint), the infix is empty
-    if (xs) {
-      if (xs === 'auto') {
-        classes.push('o-grid__col--auto');
-      } else {
-        classes.push(`o-grid__col--${xs}`);
-      }
-    }
+    // Helper function to process responsive props
+    const processResponsiveProp = (
+      value: number | 'auto' | boolean | undefined,
+      breakpoint: string
+    ) => {
+      if (value === undefined) return;
 
-    // For other breakpoints, the infix includes the dash
-    if (sm) {
-      if (sm === 'auto') {
-        classes.push('o-grid__col--sm-auto');
-      } else {
-        classes.push(`o-grid__col--sm-${sm}`);
+      // Handle boolean values
+      if (value === true) {
+        classes.push(breakpoint === 'xs' ? 'o-grid__col--auto' : `o-grid__col--${breakpoint}-auto`);
+        return;
       }
-    }
 
-    if (md) {
-      if (md === 'auto') {
-        classes.push('o-grid__col--md-auto');
-      } else {
-        classes.push(`o-grid__col--md-${md}`);
+      if (value === false) {
+        // False means don't apply any class for this breakpoint
+        return;
       }
-    }
 
-    if (lg) {
-      if (lg === 'auto') {
-        classes.push('o-grid__col--lg-auto');
+      // Handle string/number values
+      if (breakpoint === 'xs') {
+        if (value === 'auto') {
+          classes.push('o-grid__col--auto');
+        } else {
+          classes.push(`o-grid__col--${value}`);
+        }
       } else {
-        classes.push(`o-grid__col--lg-${lg}`);
+        if (value === 'auto') {
+          classes.push(`o-grid__col--${breakpoint}-auto`);
+        } else {
+          classes.push(`o-grid__col--${breakpoint}-${value}`);
+        }
       }
-    }
+    };
 
-    if (xl) {
-      if (xl === 'auto') {
-        classes.push('o-grid__col--xl-auto');
-      } else {
-        classes.push(`o-grid__col--xl-${xl}`);
-      }
-    }
-
-    if (xxl) {
-      if (xxl === 'auto') {
-        classes.push('o-grid__col--xxl-auto');
-      } else {
-        classes.push(`o-grid__col--xxl-${xxl}`);
-      }
-    }
+    // Add column size classes based on the exact SCSS pattern
+    processResponsiveProp(xs, 'xs');
+    processResponsiveProp(sm, 'sm');
+    processResponsiveProp(md, 'md');
+    processResponsiveProp(lg, 'lg');
+    processResponsiveProp(xl, 'xl');
+    processResponsiveProp(xxl, 'xxl');
 
     // Add offset classes based on the exact SCSS pattern
     if (offsetXs) classes.push(`o-grid__offset--${offsetXs}`);
@@ -147,6 +158,23 @@ export const GridCol = forwardRef<HTMLDivElement, GridColProps>(
     if (offsetXl) classes.push(`o-grid__offset--xl-${offsetXl}`);
     if (offsetXxl) classes.push(`o-grid__offset--xxl-${offsetXxl}`);
 
+    // Add flex properties
+    if (grow !== undefined) {
+      classes.push(grow ? 'u-flex-grow-1' : 'u-flex-grow-0');
+    }
+
+    if (shrink !== undefined) {
+      classes.push(shrink ? 'u-flex-shrink-1' : 'u-flex-shrink-0');
+    }
+
+    if (basis) {
+      classes.push(`u-flex-basis-${basis}`);
+    }
+
+    if (align) {
+      classes.push(`u-align-self-${align}`);
+    }
+
     if (className) classes.push(className);
 
     return (