From 0171ebf38098c62ef1e9f03022142eb8956a96c5 Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Wed, 19 Jul 2023 16:07:12 -0500 Subject: [PATCH] feat(Grid)!: remove top-level sub-component(s) --- .../DesignTokens/Tier1/Animation.jsx | 14 +-- .../components/DesignTokens/Tier1/Borders.jsx | 10 +- .../DesignTokens/Tier1/FontFamilies.tsx | 6 +- .../DesignTokens/Tier1/FontSizes.tsx | 6 +- .../DesignTokens/Tier1/FontWeights.tsx | 6 +- .../components/DesignTokens/Tier1/Layout.jsx | 6 +- .../components/DesignTokens/Tier1/Shadows.jsx | 6 +- .../components/DesignTokens/Tier1/Sizes.jsx | 10 +- .../DesignTokens/Tier1/TypographyTokens.jsx | 14 +-- .../components/DesignTokens/Tier2/Borders.jsx | 6 +- .../components/DesignTokens/Tier2/Colors.jsx | 22 ++--- .../components/DesignTokens/Tier2/Forms.jsx | 66 ++++++------- .../components/DesignTokens/Tier3/Colors.jsx | 10 +- .../components/DesignTokens/Tier3/Sizes.jsx | 6 +- .../Docs/Guidelines/Components.stories.mdx | 2 +- .../Docs/Guidelines/Layout.stories.mdx | 10 +- .../CoursePlannerEdit/CoursePlannerEdit.tsx | 9 +- .../pages/ProjectOverview/ProjectOverview.tsx | 33 +++---- src/components/Grid/Grid.module.css | 97 +++++++++++++++++++ src/components/Grid/Grid.stories.tsx | 3 +- src/components/Grid/Grid.tsx | 41 ++++++-- src/components/GridItem/GridItem.module.css | 96 ------------------ src/components/GridItem/GridItem.tsx | 30 ------ src/components/GridItem/index.ts | 1 - src/index.ts | 1 - 25 files changed, 247 insertions(+), 264 deletions(-) delete mode 100755 src/components/GridItem/GridItem.module.css delete mode 100644 src/components/GridItem/GridItem.tsx delete mode 100644 src/components/GridItem/index.ts diff --git a/.storybook/components/DesignTokens/Tier1/Animation.jsx b/.storybook/components/DesignTokens/Tier1/Animation.jsx index f8fb0f18bc..2841992154 100755 --- a/.storybook/components/DesignTokens/Tier1/Animation.jsx +++ b/.storybook/components/DesignTokens/Tier1/Animation.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Grid, GridItem, Section } from '../../../../src'; +import { Grid, Section } from '../../../../src'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; @@ -11,7 +11,7 @@ export class Tier1Animation extends Component { {filterTokens(`eds-anim-fade`).map(function (listItem) { return ( - + - + ); })} @@ -30,7 +30,7 @@ export class Tier1Animation extends Component { {filterTokens(`eds-anim-move`).map(function (listItem) { return ( - + - + ); })} @@ -49,7 +49,7 @@ export class Tier1Animation extends Component { {filterTokens(`eds-anim-ease`).map(function (listItem) { return ( - + - + ); })} diff --git a/.storybook/components/DesignTokens/Tier1/Borders.jsx b/.storybook/components/DesignTokens/Tier1/Borders.jsx index b954b13954..44583e23a1 100755 --- a/.storybook/components/DesignTokens/Tier1/Borders.jsx +++ b/.storybook/components/DesignTokens/Tier1/Borders.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Grid, GridItem, Section } from '../../../../src'; +import { Grid, Section } from '../../../../src'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; @@ -11,7 +11,7 @@ export class Tier1Borders extends Component { {filterTokens(`eds-border-width`).map(function (listItem) { return ( - + - + ); })} @@ -32,7 +32,7 @@ export class Tier1Borders extends Component { {filterTokens(`eds-border-radius`).map(function (listItem) { return ( - + - + ); })} diff --git a/.storybook/components/DesignTokens/Tier1/FontFamilies.tsx b/.storybook/components/DesignTokens/Tier1/FontFamilies.tsx index df195bb5b0..8c7e30e2e9 100644 --- a/.storybook/components/DesignTokens/Tier1/FontFamilies.tsx +++ b/.storybook/components/DesignTokens/Tier1/FontFamilies.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Grid, GridItem, Section } from '../../../../src'; +import { Grid, Section } from '../../../../src'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; @@ -8,7 +8,7 @@ export const FontFamilies = () => ( {filterTokens(`eds-font-family`).map(function (listItem) { return ( - + ( value={listItem.value} variant="typography-title" /> - + ); })} diff --git a/.storybook/components/DesignTokens/Tier1/FontSizes.tsx b/.storybook/components/DesignTokens/Tier1/FontSizes.tsx index af3b659c4b..5cc6e57f30 100644 --- a/.storybook/components/DesignTokens/Tier1/FontSizes.tsx +++ b/.storybook/components/DesignTokens/Tier1/FontSizes.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Grid, GridItem, Section } from '../../../../src'; +import { Grid, Section } from '../../../../src'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; @@ -8,7 +8,7 @@ export const FontSizes = () => ( {filterTokens(`eds-font-size`).map(function (listItem) { return ( - + ( value={listItem.value} variant="typography-title" /> - + ); })} diff --git a/.storybook/components/DesignTokens/Tier1/FontWeights.tsx b/.storybook/components/DesignTokens/Tier1/FontWeights.tsx index cb346ba041..f9d48bb273 100644 --- a/.storybook/components/DesignTokens/Tier1/FontWeights.tsx +++ b/.storybook/components/DesignTokens/Tier1/FontWeights.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Grid, GridItem, Section } from '../../../../src'; +import { Grid, Section } from '../../../../src'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; @@ -8,7 +8,7 @@ export const FontWeights = () => ( {filterTokens(`eds-font-weight`).map(function (listItem) { return ( - + ( value={listItem.value} variant="typography-title" /> - + ); })} diff --git a/.storybook/components/DesignTokens/Tier1/Layout.jsx b/.storybook/components/DesignTokens/Tier1/Layout.jsx index dc4b58b0f1..fcca01f3e3 100755 --- a/.storybook/components/DesignTokens/Tier1/Layout.jsx +++ b/.storybook/components/DesignTokens/Tier1/Layout.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Grid, GridItem, Section } from '../../../../src'; +import { Grid, Section } from '../../../../src'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; @@ -11,7 +11,7 @@ export class Tier1Layout extends Component { {filterTokens(`eds-l-`).map(function (listItem) { return ( - + - + ); })} diff --git a/.storybook/components/DesignTokens/Tier1/Shadows.jsx b/.storybook/components/DesignTokens/Tier1/Shadows.jsx index 618ce97550..54a10d70b0 100755 --- a/.storybook/components/DesignTokens/Tier1/Shadows.jsx +++ b/.storybook/components/DesignTokens/Tier1/Shadows.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Grid, GridItem, Section } from '../../../../src'; +import { Grid, Section } from '../../../../src'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; @@ -11,7 +11,7 @@ export class Tier1Shadows extends Component { {filterTokens(`eds-box-shadow-`).map(function (listItem) { return ( - + - + ); })} diff --git a/.storybook/components/DesignTokens/Tier1/Sizes.jsx b/.storybook/components/DesignTokens/Tier1/Sizes.jsx index 51aaa4247f..1d0a85cfd7 100755 --- a/.storybook/components/DesignTokens/Tier1/Sizes.jsx +++ b/.storybook/components/DesignTokens/Tier1/Sizes.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Grid, GridItem, Section } from '../../../../src'; +import { Grid, Section } from '../../../../src'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; @@ -10,7 +10,7 @@ export class Tier1Sizes extends Component {
{filterTokens('eds-size-base').map((listItem) => ( - + - + ))}
@@ -31,7 +31,7 @@ export class Tier1Sizes extends Component { .filter((listItem) => !listItem.name.endsWith('base-unit')) .map(function (listItem) { return ( - + - + ); })} diff --git a/.storybook/components/DesignTokens/Tier1/TypographyTokens.jsx b/.storybook/components/DesignTokens/Tier1/TypographyTokens.jsx index 664b816096..15557cb205 100755 --- a/.storybook/components/DesignTokens/Tier1/TypographyTokens.jsx +++ b/.storybook/components/DesignTokens/Tier1/TypographyTokens.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Grid, GridItem, Section } from '../../../../src'; +import { Grid, Section } from '../../../../src'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; @@ -11,7 +11,7 @@ export class Tier1TypographyTokens extends Component { {filterTokens(`eds-font-family`).map(function (listItem) { return ( - + - + ); })} @@ -30,7 +30,7 @@ export class Tier1TypographyTokens extends Component { {filterTokens(`eds-font-size`).map(function (listItem) { return ( - + - + ); })} @@ -49,7 +49,7 @@ export class Tier1TypographyTokens extends Component { {filterTokens(`eds-font-weight`).map(function (listItem) { return ( - + - + ); })} diff --git a/.storybook/components/DesignTokens/Tier2/Borders.jsx b/.storybook/components/DesignTokens/Tier2/Borders.jsx index 6fd23c0c3a..0e3f28e76e 100755 --- a/.storybook/components/DesignTokens/Tier2/Borders.jsx +++ b/.storybook/components/DesignTokens/Tier2/Borders.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Grid, GridItem, Section } from '../../../../src'; +import { Grid, Section } from '../../../../src'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; @@ -11,7 +11,7 @@ export class Tier2Borders extends Component { {filterTokens(`eds-theme-border-width`).map(function (listItem) { return ( - + - + ); })} diff --git a/.storybook/components/DesignTokens/Tier2/Colors.jsx b/.storybook/components/DesignTokens/Tier2/Colors.jsx index 7c8e143891..bd59f1e345 100755 --- a/.storybook/components/DesignTokens/Tier2/Colors.jsx +++ b/.storybook/components/DesignTokens/Tier2/Colors.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Section, Grid, GridItem, Heading } from '../../../../src'; +import { Section, Grid, Heading } from '../../../../src'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; @@ -90,7 +90,7 @@ export class Tier2Colors extends Component { listItem, ) { return ( - + - + ); })} @@ -111,7 +111,7 @@ export class Tier2Colors extends Component { listItem, ) { return ( - + - + ); })} @@ -135,7 +135,7 @@ export class Tier2Colors extends Component { listItem, ) { return ( - + - + ); })} @@ -157,7 +157,7 @@ export class Tier2Colors extends Component { {filterTokens(`eds-theme-color-focus`).map(function (listItem) { return ( - + - + ); })} @@ -180,7 +180,7 @@ export class Tier2Colors extends Component { listItem, ) { return ( - + - + ); })} diff --git a/.storybook/components/DesignTokens/Tier2/Forms.jsx b/.storybook/components/DesignTokens/Tier2/Forms.jsx index b200f2d976..a9cf1f778f 100755 --- a/.storybook/components/DesignTokens/Tier2/Forms.jsx +++ b/.storybook/components/DesignTokens/Tier2/Forms.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Grid, GridItem, Section } from '../../../../src'; +import { Grid, Section } from '../../../../src'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; @@ -8,42 +8,36 @@ export class Tier2Forms extends Component { return (
- {filterTokens(`eds-theme-form-border-width`).map(function (listItem) { - return ( - - - - ); - })} + {filterTokens(`eds-theme-form-border-width`).map((listItem) => ( + + + + ))} - {filterTokens(`eds-theme-form-border-radius`).map(function ( - listItem, - ) { - return ( - - - - ); - })} + {filterTokens(`eds-theme-form-border-radius`).map((listItem) => ( + + + + ))}
); diff --git a/.storybook/components/DesignTokens/Tier3/Colors.jsx b/.storybook/components/DesignTokens/Tier3/Colors.jsx index a6774f94c9..4d2b63e412 100755 --- a/.storybook/components/DesignTokens/Tier3/Colors.jsx +++ b/.storybook/components/DesignTokens/Tier3/Colors.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Section, Grid, GridItem, Heading } from '../../../../src'; +import { Section, Grid, Heading } from '../../../../src'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; @@ -76,7 +76,7 @@ export class Tier3Colors extends Component { listItem, ) { return ( - + - + ); })} @@ -98,7 +98,7 @@ export class Tier3Colors extends Component { listItem, ) { return ( - + - + ); })} diff --git a/.storybook/components/DesignTokens/Tier3/Sizes.jsx b/.storybook/components/DesignTokens/Tier3/Sizes.jsx index 837aa18336..e291961f21 100644 --- a/.storybook/components/DesignTokens/Tier3/Sizes.jsx +++ b/.storybook/components/DesignTokens/Tier3/Sizes.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Section, Grid, GridItem } from '../../../../src'; +import { Section, Grid } from '../../../../src'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; @@ -11,7 +11,7 @@ export class Tier3Sizes extends Component { {filterTokens(`eds-theme-size`).map(function (listItem) { return ( - + - + ); })} diff --git a/.storybook/components/Docs/Guidelines/Components.stories.mdx b/.storybook/components/Docs/Guidelines/Components.stories.mdx index a8db2467b6..bae1e6bc14 100644 --- a/.storybook/components/Docs/Guidelines/Components.stories.mdx +++ b/.storybook/components/Docs/Guidelines/Components.stories.mdx @@ -27,7 +27,7 @@ yarn add @chanzuckerberg/eds Next, import any needed components from the EDS component library into your application like so: ```js -import { Button, Grid, GridItem } from '@chanzuckerberg/eds'; +import { Button, Grid } from '@chanzuckerberg/eds'; ``` From there, call EDS components in your React application and pass in the desired values into each component's API: diff --git a/.storybook/components/Docs/Guidelines/Layout.stories.mdx b/.storybook/components/Docs/Guidelines/Layout.stories.mdx index b787b24959..9999308b40 100644 --- a/.storybook/components/Docs/Guidelines/Layout.stories.mdx +++ b/.storybook/components/Docs/Guidelines/Layout.stories.mdx @@ -40,14 +40,14 @@ View the `Layout` component in Storybook to view all available variants. ### Grid -The `Grid` component (together with the `GridItem` subcomponent) arranges content in specific configurations and controls the responsive behavior for content inside grid items. +The `Grid` component (together with its `Grid.Item` subcomponent) arranges content in specific configurations and controls the responsive behavior for content inside grid items. For instance, `` will render grid items that always occupy 50% of their container regardless of the viewport size: ```jsx - - + + ``` @@ -55,8 +55,8 @@ Whereas `` will render grid items that stack on small viewpo ```jsx - - + + ``` diff --git a/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx b/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx index fbce552bd9..e4d00973b6 100644 --- a/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx +++ b/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx @@ -11,7 +11,6 @@ import { DataBar, DragDrop, Grid, - GridItem, Heading, HorizontalStepper, Icon, @@ -645,22 +644,22 @@ export const CoursePlannerEdit = () => { - + - - + + - + diff --git a/.storybook/pages/ProjectOverview/ProjectOverview.tsx b/.storybook/pages/ProjectOverview/ProjectOverview.tsx index 29797bfa52..33414e5924 100644 --- a/.storybook/pages/ProjectOverview/ProjectOverview.tsx +++ b/.storybook/pages/ProjectOverview/ProjectOverview.tsx @@ -5,7 +5,6 @@ import { Button, Card, Grid, - GridItem, Heading, Hr, Icon, @@ -274,30 +273,30 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => { - + This is a link This is a stacked block description - - + + This is a link This is a stacked block description - - + + This is a link This is a stacked block description - - + + This is a link This is a stacked block description - + { - + This is a link This is a stacked block description - - + + This is a link This is a stacked block description - - + + This is a link This is a stacked block description - - + + This is a link This is a stacked block description - +
diff --git a/src/components/Grid/Grid.module.css b/src/components/Grid/Grid.module.css index 2ace9c2e7c..cfe1e114a9 100755 --- a/src/components/Grid/Grid.module.css +++ b/src/components/Grid/Grid.module.css @@ -198,3 +198,100 @@ } } } + +/*------------------------------------*\ + # GRID ITEM +\*------------------------------------*/ +/** + * Direct child of grid + */ + .grid__item { + .grid & { + padding: var(--eds-size-1-and-half); + width: 100%; + + @supports (display: grid) { + padding: 0; + } + } + + /** + * Grid item that span 2 columns + */ + &.grid__item.grid__item--span-2 { + width: 100%; + + @supports (display: grid) { + grid-column: 1 / -1; + } + } + + .grid--1-3up & { + margin: 0 -1.5rem; + + @media all and (min-width: $eds-bp-lg) { + width: 33.33%; + } + + @supports (display: grid) { + width: 100%; + margin: 0; + } + } + + .grid--2up & { + @media all and (min-width: $eds-bp-md) { + width: 50%; + } + + @supports (display: grid) { + width: 100%; + } + } + + .grid--3up & { + @media all and (min-width: $eds-bp-md) { + width: 50%; + } + + @media all and (min-width: $eds-bp-lg) { + width: 33.33%; + } + + @supports (display: grid) { + width: 100%; + } + } + + .grid--3up-alt & { + @media all and (min-width: $eds-bp-md) { + width: 50%; + } + + @media all and (min-width: $eds-bp-lg) { + width: 33.33%; + } + + @supports (display: grid) { + width: 100%; + } + } + + .grid--4up & { + @media all and (min-width: $eds-bp-md) { + width: 50%; + } + + @media all and (min-width: $eds-bp-lg) { + width: 33.33%; + } + + @media all and (min-width: $eds-bp-xl) { + width: 25%; + } + + @supports (display: grid) { + width: 100%; + } + } +} diff --git a/src/components/Grid/Grid.stories.tsx b/src/components/Grid/Grid.stories.tsx index fa7db452cd..9ee740af79 100644 --- a/src/components/Grid/Grid.stories.tsx +++ b/src/components/Grid/Grid.stories.tsx @@ -2,7 +2,6 @@ import type { StoryObj, Meta } from '@storybook/react'; import React from 'react'; import { Grid } from './Grid'; -import GridItem from '../GridItem'; export default { title: 'Components/Grid', @@ -41,7 +40,7 @@ export default { badges: ['1.0'], }, component: Grid, - subcomponents: { GridItem }, + subcomponents: { GridItem: Grid.Item }, } as Meta; type Args = React.ComponentProps; diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx index 7e1c543003..0d7f399c8b 100644 --- a/src/components/Grid/Grid.tsx +++ b/src/components/Grid/Grid.tsx @@ -1,7 +1,6 @@ import clsx from 'clsx'; import type { ReactNode } from 'react'; import React from 'react'; -import GridItem from '../GridItem'; import styles from './Grid.module.css'; export interface Props { @@ -20,13 +19,13 @@ export interface Props { gap?: 'sm'; /** * Stylistic variations of the GridL - * - **1up** yields a Grid whose GridItems span the entire width of the container - * - **1-3up** yields a Grid whose GridItems are stacked on small screens and expand to fit 3 across when enough screen real estate becomes available to display them comfortably side-by-side - * - **2up** yields a Grid whose GridItems are stacked on small screens but display side-by-side when enough screen real estate is available to do so - * - **3up** yields a Grid whose GridItems are stacked on small screens, transforms to a 2-across pattern and then transforms again to a 3-across pattern - * - **4up** yields a Grid whose GridItems are stacked on small screens, transforms to a 2-across pattern, transforms again to a 3-across pattern, and ultimately transforms to a 4-across pattern - * - **1-2-4up** yields a Grid whose GridItems are stacked on small screens, transforms to a 2-across pattern, and ultimately transforms to a 4-across pattern - * - **side-by-side** yields a Grid whose GridItems are always displayed side-by-side + * - **1up** yields a Grid whose Grid items span the entire width of the container + * - **1-3up** yields a Grid whose Grid items are stacked on small screens and expand to fit 3 across when enough screen real estate becomes available to display them comfortably side-by-side + * - **2up** yields a Grid whose Grid items are stacked on small screens but display side-by-side when enough screen real estate is available to do so + * - **3up** yields a Grid whose Grid items are stacked on small screens, transforms to a 2-across pattern and then transforms again to a 3-across pattern + * - **4up** yields a Grid whose Grid items are stacked on small screens, transforms to a 2-across pattern, transforms again to a 3-across pattern, and ultimately transforms to a 4-across pattern + * - **1-2-4up** yields a Grid whose Grid items are stacked on small screens, transforms to a 2-across pattern, and ultimately transforms to a 4-across pattern + * - **side-by-side** yields a Grid whose Grid items are always displayed side-by-side */ variant?: | '2up' @@ -38,10 +37,21 @@ export interface Props { | '1-2-1up'; } +export interface GridItemProps { + /** + * Child node(s) that can be nested inside component + */ + children?: ReactNode; + /** + * CSS class names that can be appended to the component. + */ + className?: string; +} + /** * `import {Grid} from "@chanzuckerberg/eds";` * - * Grid component used to layout GridItem components into a grid pattern. This is flexible component + * Grid component used to layout Grid item components into a grid pattern. This is flexible component * allowing for a variety of responsive layout components. */ export const Grid = ({ @@ -65,4 +75,17 @@ export const Grid = ({ ); }; +/** + * Single grid item to be used in the Grid component. + */ +export const GridItem = ({ children, className, ...other }: GridItemProps) => { + const componentClassName = clsx(styles['grid__item'], className); + + return ( +
+ {children} +
+ ); +}; + Grid.Item = GridItem; diff --git a/src/components/GridItem/GridItem.module.css b/src/components/GridItem/GridItem.module.css deleted file mode 100755 index c3b3092133..0000000000 --- a/src/components/GridItem/GridItem.module.css +++ /dev/null @@ -1,96 +0,0 @@ -/*------------------------------------*\ - # GRID ITEM -\*------------------------------------*/ -/** - * Direct child of grid - */ -.grid__item { - .grid & { - padding: var(--eds-size-1-and-half); - width: 100%; - - @supports (display: grid) { - padding: 0; - } - } - - /** - * Grid item that span 2 columns - */ - &.grid__item.grid__item--span-2 { - width: 100%; - - @supports (display: grid) { - grid-column: 1 / -1; - } - } - - .grid--1-3up & { - margin: 0 -1.5rem; - - @media all and (min-width: $eds-bp-lg) { - width: 33.33%; - } - - @supports (display: grid) { - width: 100%; - margin: 0; - } - } - - .grid--2up & { - @media all and (min-width: $eds-bp-md) { - width: 50%; - } - - @supports (display: grid) { - width: 100%; - } - } - - .grid--3up & { - @media all and (min-width: $eds-bp-md) { - width: 50%; - } - - @media all and (min-width: $eds-bp-lg) { - width: 33.33%; - } - - @supports (display: grid) { - width: 100%; - } - } - - .grid--3up-alt & { - @media all and (min-width: $eds-bp-md) { - width: 50%; - } - - @media all and (min-width: $eds-bp-lg) { - width: 33.33%; - } - - @supports (display: grid) { - width: 100%; - } - } - - .grid--4up & { - @media all and (min-width: $eds-bp-md) { - width: 50%; - } - - @media all and (min-width: $eds-bp-lg) { - width: 33.33%; - } - - @media all and (min-width: $eds-bp-xl) { - width: 25%; - } - - @supports (display: grid) { - width: 100%; - } - } -} diff --git a/src/components/GridItem/GridItem.tsx b/src/components/GridItem/GridItem.tsx deleted file mode 100644 index 87af5564ea..0000000000 --- a/src/components/GridItem/GridItem.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import clsx from 'clsx'; -import type { ReactNode } from 'react'; -import React from 'react'; -import styles from './GridItem.module.css'; - -export interface Props { - /** - * Child node(s) that can be nested inside component - */ - children?: ReactNode; - /** - * CSS class names that can be appended to the component. - */ - className?: string; -} - -/** - * `import {GridItem} from "@chanzuckerberg/eds";` - * - * Single grid item to be used in the Grid component. - */ -export const GridItem = ({ children, className, ...other }: Props) => { - const componentClassName = clsx(styles['grid__item'], className); - - return ( -
- {children} -
- ); -}; diff --git a/src/components/GridItem/index.ts b/src/components/GridItem/index.ts deleted file mode 100644 index 183c43f75a..0000000000 --- a/src/components/GridItem/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { GridItem as default } from './GridItem'; diff --git a/src/index.ts b/src/index.ts index a7e1246925..3585747c45 100644 --- a/src/index.ts +++ b/src/index.ts @@ -26,7 +26,6 @@ export { default as FiltersCheckboxField } from './components/FiltersCheckboxFie export { default as FiltersDrawer } from './components/FiltersDrawer'; export { default as FiltersPopover } from './components/FiltersPopover'; export { default as Grid } from './components/Grid'; -export { default as GridItem } from './components/GridItem'; export { default as Heading } from './components/Heading'; export { default as HorizontalStepper } from './components/HorizontalStepper'; export { default as Hr } from './components/Hr';