Merge pull request #2506 from teamleadercrm/FRONT-354-fix-Grid-Item

[FRONT-354] Fix GridItem
teamleadercrm · Jan 2, 2023 · 10cd92f · 10cd92f
2 parents f7f0b66 + 9eecf62
commit 10cd92f
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ### Added
 
+- `Flex`: Allow class names
+- `Grid`: Allow class names
+
 ### Changed
 
 ### Deprecated
@@ -10,6 +13,8 @@
 
 ### Fixed
 
+- `Grid`: Export `GridItem` through the `Grid` component
+
 ### Dependency updates
 
 ## [18.3.0] - 2022-12-19

diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx
@@ -14,13 +14,19 @@ export type FlexProps = Partial<{
   // The library can be fixed with template literal types.
   alignItems: 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
   justifyContent: 'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly';
+  className: string;
 }>;
 
 const Flex: GenericComponent<FlexProps> = forwardRef<HTMLDivElement, FlexProps>(
-  ({ children, direction = 'row', gap = 0, alignItems, justifyContent }, ref) => {
-    const classNames = cx(theme['flex'], theme[`${direction}`], {
-      [theme[`gap-${gap}`]]: gap > 0,
-    });
+  ({ children, direction = 'row', gap = 0, alignItems, justifyContent, className }, ref) => {
+    const classNames = cx(
+      theme['flex'],
+      theme[`${direction}`],
+      {
+        [theme[`gap-${gap}`]]: gap > 0,
+      },
+      className,
+    );
 
     const flexStyles = { alignItems, justifyContent };
 

diff --git a/src/components/grid/Grid.tsx b/src/components/grid/Grid.tsx
@@ -1,7 +1,8 @@
 import cx from 'classnames';
-import React, { ForwardedRef, forwardRef, ReactNode } from 'react';
+import React, { forwardRef, ReactNode } from 'react';
 
 import { GenericComponent } from '../../@types/types';
+import GridItem, { GridItemProps } from './GridItem';
 import theme from './theme.css';
 
 type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
@@ -14,16 +15,24 @@ export type GridProps = Partial<{
   gap: Gap;
   columnGap: Gap;
   rowGap: Gap;
-  ref: ForwardedRef<HTMLDivElement>;
+  className: string;
 }>;
 
+export interface GridWithSubcomponentProps extends GenericComponent<GridProps> {
+  Item: GenericComponent<GridItemProps>;
+}
+
 const Grid: GenericComponent<GridProps> = forwardRef<HTMLDivElement, GridProps>(
-  ({ children, areas, rows, columns, gap = 0, columnGap = 0, rowGap = 0 }, ref) => {
-    const classNames = cx(theme['grid'], {
-      [theme[`gap-${gap}`]]: gap > 0,
-      [theme[`column-gap-${columnGap}`]]: columnGap > 0,
-      [theme[`row-gap-${rowGap}`]]: rowGap > 0,
-    });
+  ({ children, areas, rows, columns, gap = 0, columnGap = 0, rowGap = 0, className }, ref) => {
+    const classNames = cx(
+      theme['grid'],
+      {
+        [theme[`gap-${gap}`]]: gap > 0,
+        [theme[`column-gap-${columnGap}`]]: columnGap > 0,
+        [theme[`row-gap-${rowGap}`]]: rowGap > 0,
+      },
+      className,
+    );
 
     const gridStyles = {
       gridTemplateAreas: areas?.map((area) => `"${area}"`).join(' '),
@@ -41,4 +50,7 @@ const Grid: GenericComponent<GridProps> = forwardRef<HTMLDivElement, GridProps>(
 
 Grid.displayName = 'Grid';
 
-export default Grid;
+const GridWithSubComponents = Grid as GridWithSubcomponentProps;
+GridWithSubComponents.Item = GridItem;
+
+export default GridWithSubComponents;
diff --git a/src/components/grid/grid.stories.tsx b/src/components/grid/grid.stories.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils';
 import { Grid, Box } from '../../index';
 import { Heading3 } from '../typography';
-import GridItem from './GridItem';
 
 export default {
   component: Grid,
@@ -15,7 +14,7 @@ export const basic: ComponentStory<typeof Grid> = (args) => (
     <Heading3>Grid Box</Heading3>
     <Box borderColor="neutral" borderWidth={1} borderRadius="rounded" backgroundColor="neutral" backgroundTint="light">
       <Grid {...args}>
-        <GridItem area="header">
+        <Grid.Item area="header">
           <Box
             backgroundColor="mint"
             backgroundTint="lightest"
@@ -27,8 +26,8 @@ export const basic: ComponentStory<typeof Grid> = (args) => (
               height: '100%',
             }}
           />
-        </GridItem>
-        <GridItem area="sidebar">
+        </Grid.Item>
+        <Grid.Item area="sidebar">
           <Box
             backgroundColor="teal"
             backgroundTint="lightest"
@@ -40,8 +39,8 @@ export const basic: ComponentStory<typeof Grid> = (args) => (
               height: '200px',
             }}
           />
-        </GridItem>
-        <GridItem area="content">
+        </Grid.Item>
+        <Grid.Item area="content">
           <Box
             backgroundColor="gold"
             backgroundTint="lightest"
@@ -53,8 +52,8 @@ export const basic: ComponentStory<typeof Grid> = (args) => (
               height: '100%',
             }}
           />
-        </GridItem>
-        <GridItem area="footer">
+        </Grid.Item>
+        <Grid.Item area="footer">
           <Box
             backgroundColor="ruby"
             backgroundTint="lightest"
@@ -66,7 +65,7 @@ export const basic: ComponentStory<typeof Grid> = (args) => (
               height: '100%',
             }}
           />
-        </GridItem>
+        </Grid.Item>
       </Grid>
     </Box>
   </Box>