From a0ec79a017bacb70f8c9043c3dcb72eb4da2ec31 Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Tue, 5 Mar 2024 10:18:37 -0600 Subject: [PATCH] feat!: remove Grid and Section from exports (#1876) - these two are marked as deprecated so remove them - they are, however, still used in the documentation pages - redo the imports in those story pages to allow for this - update snapshots for PopoverContainer --- .../DesignTokens/Tier1/Animation.jsx | 3 +- .../components/DesignTokens/Tier1/Borders.jsx | 3 +- .../components/DesignTokens/Tier1/Colors.tsx | 2 +- .../DesignTokens/Tier1/FontFamilies.tsx | 3 +- .../DesignTokens/Tier1/FontSizes.tsx | 3 +- .../DesignTokens/Tier1/FontWeights.tsx | 3 +- .../components/DesignTokens/Tier1/Layout.jsx | 3 +- .../components/DesignTokens/Tier1/Shadows.jsx | 3 +- .../components/DesignTokens/Tier1/Sizes.jsx | 3 +- .../DesignTokens/Tier1/TypographyPresets.jsx | 3 +- .../DesignTokens/Tier1/TypographyTokens.jsx | 3 +- .../DesignTokens/Tier2/Borders.stories.tsx | 3 +- .../DesignTokens/Tier2/Colors.stories.tsx | 2 +- .../DesignTokens/Tier2/Forms.stories.tsx | 3 +- .../Tier2/TypographyUsage.stories.tsx | 3 +- .../DesignTokens/Tier3/Colors.stories.tsx | 2 +- .../DesignTokens/Tier3/Sizes.stories.tsx | 3 +- .../Tier3/TypographyComponents.stories.tsx | 3 +- .../PopoverContainer.stories.tsx | 33 +++++ .../PopoverContainer/PopoverContainer.test.ts | 7 ++ .../PopoverContainer.test.ts.snap | 116 ++++++++++++++++++ src/components/Section/Section.tsx | 6 +- src/index.ts | 2 - 23 files changed, 191 insertions(+), 24 deletions(-) create mode 100644 src/components/PopoverContainer/PopoverContainer.stories.tsx create mode 100644 src/components/PopoverContainer/PopoverContainer.test.ts create mode 100644 src/components/PopoverContainer/__snapshots__/PopoverContainer.test.ts.snap diff --git a/.storybook/components/DesignTokens/Tier1/Animation.jsx b/.storybook/components/DesignTokens/Tier1/Animation.jsx index 284199215..849c935de 100755 --- a/.storybook/components/DesignTokens/Tier1/Animation.jsx +++ b/.storybook/components/DesignTokens/Tier1/Animation.jsx @@ -1,5 +1,6 @@ import React, { Component } from 'react'; -import { Grid, Section } from '../../../../src'; +import Grid from '../../../../src/components/Grid'; +import Section from '../../../../src/components/Section'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; diff --git a/.storybook/components/DesignTokens/Tier1/Borders.jsx b/.storybook/components/DesignTokens/Tier1/Borders.jsx index 44583e23a..0de5059e9 100755 --- a/.storybook/components/DesignTokens/Tier1/Borders.jsx +++ b/.storybook/components/DesignTokens/Tier1/Borders.jsx @@ -1,5 +1,6 @@ import React, { Component } from 'react'; -import { Grid, Section } from '../../../../src'; +import Grid from '../../../../src/components/Grid'; +import Section from '../../../../src/components/Section'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; diff --git a/.storybook/components/DesignTokens/Tier1/Colors.tsx b/.storybook/components/DesignTokens/Tier1/Colors.tsx index 3621486b0..4c0d2c808 100755 --- a/.storybook/components/DesignTokens/Tier1/Colors.tsx +++ b/.storybook/components/DesignTokens/Tier1/Colors.tsx @@ -1,6 +1,6 @@ import React from 'react'; import '../DesignTokens.css'; -import { Section } from '../../../../src'; +import Section from '../../../../src/components/Section'; import filterTokens from '../../../util/filterTokens'; import { ColorList } from '../../ColorList/ColorList'; diff --git a/.storybook/components/DesignTokens/Tier1/FontFamilies.tsx b/.storybook/components/DesignTokens/Tier1/FontFamilies.tsx index 8c7e30e2e..65d040c8f 100644 --- a/.storybook/components/DesignTokens/Tier1/FontFamilies.tsx +++ b/.storybook/components/DesignTokens/Tier1/FontFamilies.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { Grid, Section } from '../../../../src'; +import Grid from '../../../../src/components/Grid'; +import Section from '../../../../src/components/Section'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; diff --git a/.storybook/components/DesignTokens/Tier1/FontSizes.tsx b/.storybook/components/DesignTokens/Tier1/FontSizes.tsx index 5cc6e57f3..ead010d23 100644 --- a/.storybook/components/DesignTokens/Tier1/FontSizes.tsx +++ b/.storybook/components/DesignTokens/Tier1/FontSizes.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { Grid, Section } from '../../../../src'; +import Grid from '../../../../src/components/Grid'; +import Section from '../../../../src/components/Section'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; diff --git a/.storybook/components/DesignTokens/Tier1/FontWeights.tsx b/.storybook/components/DesignTokens/Tier1/FontWeights.tsx index f9d48bb27..f1e86e0db 100644 --- a/.storybook/components/DesignTokens/Tier1/FontWeights.tsx +++ b/.storybook/components/DesignTokens/Tier1/FontWeights.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { Grid, Section } from '../../../../src'; +import Grid from '../../../../src/components/Grid'; +import Section from '../../../../src/components/Section'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; diff --git a/.storybook/components/DesignTokens/Tier1/Layout.jsx b/.storybook/components/DesignTokens/Tier1/Layout.jsx index fcca01f3e..f93e9b36a 100755 --- a/.storybook/components/DesignTokens/Tier1/Layout.jsx +++ b/.storybook/components/DesignTokens/Tier1/Layout.jsx @@ -1,5 +1,6 @@ import React, { Component } from 'react'; -import { Grid, Section } from '../../../../src'; +import Grid from '../../../../src/components/Grid'; +import Section from '../../../../src/components/Section'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; diff --git a/.storybook/components/DesignTokens/Tier1/Shadows.jsx b/.storybook/components/DesignTokens/Tier1/Shadows.jsx index 54a10d70b..46aba822f 100755 --- a/.storybook/components/DesignTokens/Tier1/Shadows.jsx +++ b/.storybook/components/DesignTokens/Tier1/Shadows.jsx @@ -1,5 +1,6 @@ import React, { Component } from 'react'; -import { Grid, Section } from '../../../../src'; +import Grid from '../../../../src/components/Grid'; +import Section from '../../../../src/components/Section'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; diff --git a/.storybook/components/DesignTokens/Tier1/Sizes.jsx b/.storybook/components/DesignTokens/Tier1/Sizes.jsx index fffb98f2f..46d0e4b0c 100755 --- a/.storybook/components/DesignTokens/Tier1/Sizes.jsx +++ b/.storybook/components/DesignTokens/Tier1/Sizes.jsx @@ -1,5 +1,6 @@ import React, { Component } from 'react'; -import { Grid, Section } from '../../../../src'; +import Grid from '../../../../src/components/Grid'; +import Section from '../../../../src/components/Section'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; diff --git a/.storybook/components/DesignTokens/Tier1/TypographyPresets.jsx b/.storybook/components/DesignTokens/Tier1/TypographyPresets.jsx index 13f0cc8b8..5f918a955 100755 --- a/.storybook/components/DesignTokens/Tier1/TypographyPresets.jsx +++ b/.storybook/components/DesignTokens/Tier1/TypographyPresets.jsx @@ -1,7 +1,8 @@ import { at, forEach } from 'lodash'; import React, { Component } from 'react'; -import { Grid, Section } from '../../../../src'; +import Grid from '../../../../src/components/Grid'; +import Section from '../../../../src/components/Section'; import presets from '../../../../src/design-tokens/tier-1-definitions/typography.json'; import flatten from '../../../util/flattenToken'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; diff --git a/.storybook/components/DesignTokens/Tier1/TypographyTokens.jsx b/.storybook/components/DesignTokens/Tier1/TypographyTokens.jsx index 15557cb20..fbfefa33d 100755 --- a/.storybook/components/DesignTokens/Tier1/TypographyTokens.jsx +++ b/.storybook/components/DesignTokens/Tier1/TypographyTokens.jsx @@ -1,5 +1,6 @@ import React, { Component } from 'react'; -import { Grid, Section } from '../../../../src'; +import Grid from '../../../../src/components/Grid'; +import Section from '../../../../src/components/Section'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; diff --git a/.storybook/components/DesignTokens/Tier2/Borders.stories.tsx b/.storybook/components/DesignTokens/Tier2/Borders.stories.tsx index d5c66c268..6003c6099 100755 --- a/.storybook/components/DesignTokens/Tier2/Borders.stories.tsx +++ b/.storybook/components/DesignTokens/Tier2/Borders.stories.tsx @@ -1,6 +1,7 @@ import type { StoryObj } from '@storybook/react'; import React from 'react'; -import { Grid, Section } from '../../../../src'; +import Grid from '../../../../src/components/Grid'; +import Section from '../../../../src/components/Section'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; diff --git a/.storybook/components/DesignTokens/Tier2/Colors.stories.tsx b/.storybook/components/DesignTokens/Tier2/Colors.stories.tsx index d59c20571..013603b6f 100755 --- a/.storybook/components/DesignTokens/Tier2/Colors.stories.tsx +++ b/.storybook/components/DesignTokens/Tier2/Colors.stories.tsx @@ -1,6 +1,6 @@ import type { StoryObj } from '@storybook/react'; import React from 'react'; -import { Section } from '../../../../src'; +import Section from '../../../../src/components/Section'; import filterTokens from '../../../util/filterTokens'; import { ColorList } from '../../ColorList/ColorList'; diff --git a/.storybook/components/DesignTokens/Tier2/Forms.stories.tsx b/.storybook/components/DesignTokens/Tier2/Forms.stories.tsx index 779a80c16..8b9f995a4 100755 --- a/.storybook/components/DesignTokens/Tier2/Forms.stories.tsx +++ b/.storybook/components/DesignTokens/Tier2/Forms.stories.tsx @@ -1,6 +1,7 @@ import type { StoryObj } from '@storybook/react'; import React from 'react'; -import { Grid, Section } from '../../../../src'; +import Grid from '../../../../src/components/Grid'; +import Section from '../../../../src/components/Section'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; diff --git a/.storybook/components/DesignTokens/Tier2/TypographyUsage.stories.tsx b/.storybook/components/DesignTokens/Tier2/TypographyUsage.stories.tsx index 7c8b3607f..93fa52d5a 100755 --- a/.storybook/components/DesignTokens/Tier2/TypographyUsage.stories.tsx +++ b/.storybook/components/DesignTokens/Tier2/TypographyUsage.stories.tsx @@ -2,7 +2,8 @@ import type { StoryObj } from '@storybook/react'; import { at, capitalize, forEach } from 'lodash'; import React from 'react'; -import { Grid, Section } from '../../../../src'; +import Grid from '../../../../src/components/Grid'; +import Section from '../../../../src/components/Section'; import usages from '../../../../src/design-tokens/tier-2-usage/typography.json'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore importing of a legacy utility file results in some 'any's, which is acceptable for this docs page diff --git a/.storybook/components/DesignTokens/Tier3/Colors.stories.tsx b/.storybook/components/DesignTokens/Tier3/Colors.stories.tsx index af986646c..186ef24fa 100755 --- a/.storybook/components/DesignTokens/Tier3/Colors.stories.tsx +++ b/.storybook/components/DesignTokens/Tier3/Colors.stories.tsx @@ -1,6 +1,6 @@ import type { StoryObj } from '@storybook/react'; import React from 'react'; -import { Section } from '../../../../src'; +import Section from '../../../../src/components/Section'; import filterTokens from '../../../util/filterTokens'; import { ColorList } from '../../ColorList/ColorList'; diff --git a/.storybook/components/DesignTokens/Tier3/Sizes.stories.tsx b/.storybook/components/DesignTokens/Tier3/Sizes.stories.tsx index 46413aaf2..672017d7b 100644 --- a/.storybook/components/DesignTokens/Tier3/Sizes.stories.tsx +++ b/.storybook/components/DesignTokens/Tier3/Sizes.stories.tsx @@ -1,6 +1,7 @@ import type { StoryObj } from '@storybook/react'; import React from 'react'; -import { Section, Grid } from '../../../../src'; +import Grid from '../../../../src/components/Grid'; +import Section from '../../../../src/components/Section'; import filterTokens from '../../../util/filterTokens'; import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen'; diff --git a/.storybook/components/DesignTokens/Tier3/TypographyComponents.stories.tsx b/.storybook/components/DesignTokens/Tier3/TypographyComponents.stories.tsx index fb7c55956..42daeee6d 100755 --- a/.storybook/components/DesignTokens/Tier3/TypographyComponents.stories.tsx +++ b/.storybook/components/DesignTokens/Tier3/TypographyComponents.stories.tsx @@ -2,7 +2,8 @@ import type { StoryObj } from '@storybook/react'; import { at, capitalize, forEach, merge } from 'lodash'; import React from 'react'; -import { Grid, Section } from '../../../../src'; +import Grid from '../../../../src/components/Grid'; +import Section from '../../../../src/components/Section'; import breadcrumb from '../../../../src/design-tokens/tier-3-component/breadcrumb-typography.json'; import button from '../../../../src/design-tokens/tier-3-component/buttons-typography.json'; import form from '../../../../src/design-tokens/tier-3-component/forms-typography.json'; diff --git a/src/components/PopoverContainer/PopoverContainer.stories.tsx b/src/components/PopoverContainer/PopoverContainer.stories.tsx new file mode 100644 index 000000000..d2baa7b48 --- /dev/null +++ b/src/components/PopoverContainer/PopoverContainer.stories.tsx @@ -0,0 +1,33 @@ +import type { StoryObj, Meta } from '@storybook/react'; +import React from 'react'; + +import { PopoverContainer } from './PopoverContainer'; +import PopoverListItem from '../PopoverListItem'; + +export default { + title: 'Components/PopoverContainer', + component: PopoverContainer, + parameters: { + badges: ['1.2'], + }, + decorators: [(Story) =>
{Story()}
], +} as Meta; + +type Args = React.ComponentProps; + +export const Default: StoryObj = { + args: { + children: 'Default container', + }, +}; + +export const WithRows: StoryObj = { + render: () => ( + + test 1 + test 2 + test 3 + test 4 + + ), +}; diff --git a/src/components/PopoverContainer/PopoverContainer.test.ts b/src/components/PopoverContainer/PopoverContainer.test.ts new file mode 100644 index 000000000..666ac66f8 --- /dev/null +++ b/src/components/PopoverContainer/PopoverContainer.test.ts @@ -0,0 +1,7 @@ +import { generateSnapshots } from '@chanzuckerberg/story-utils'; +import type { StoryFile } from '@storybook/testing-react'; +import * as stories from './PopoverContainer.stories'; + +describe('', () => { + generateSnapshots(stories as StoryFile); +}); diff --git a/src/components/PopoverContainer/__snapshots__/PopoverContainer.test.ts.snap b/src/components/PopoverContainer/__snapshots__/PopoverContainer.test.ts.snap new file mode 100644 index 000000000..f86f3172a --- /dev/null +++ b/src/components/PopoverContainer/__snapshots__/PopoverContainer.test.ts.snap @@ -0,0 +1,116 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` Default story renders snapshot 1`] = ` +
+
+ Default container +
+
+`; + +exports[` WithRows story renders snapshot 1`] = ` +
+
+
+
+ +
+ test 1 +
+
+
+ +
+ test 2 +
+
+
+ +
+ test 3 +
+
+
+ +
+ test 4 +
+
+
+`; diff --git a/src/components/Section/Section.tsx b/src/components/Section/Section.tsx index ca0b8c8a9..223cc69da 100644 --- a/src/components/Section/Section.tsx +++ b/src/components/Section/Section.tsx @@ -28,6 +28,8 @@ export interface Props { overline?: ReactNode; /** * "as" prop, passed to Heading Component + * + * **Default is `"h2"`. */ headingAs?: HeadingElement; /** @@ -52,10 +54,6 @@ export interface Props { * `import {Section} from "@chanzuckerberg/eds";` * * Section component contains a section header and body. - * - * The Heading component requires a value for "size", so this headingAs prop is provided - * a default value of "h2" to allow it to remain optional on Section component. - * @deprecated */ export const Section = ({ align, diff --git a/src/index.ts b/src/index.ts index 926b3316a..ea100a993 100644 --- a/src/index.ts +++ b/src/index.ts @@ -12,7 +12,6 @@ export { default as Checkbox } from './components/Checkbox'; export { default as ClickableStyle } from './components/ClickableStyle'; export { default as FieldNote } from './components/FieldNote'; export { default as Fieldset } from './components/Fieldset'; -export { default as Grid } from './components/Grid'; export { default as Heading } from './components/Heading'; export { default as HorizontalStepper } from './components/HorizontalStepper'; export { default as Hr } from './components/Hr'; @@ -31,7 +30,6 @@ export { default as PopoverListItem } from './components/PopoverListItem'; export { default as ProgressBar } from './components/ProgressBar'; export { default as Radio } from './components/Radio'; export { default as SearchBar } from './components/SearchBar'; -export { default as Section } from './components/Section'; export { default as Select } from './components/Select'; export { default as Skeleton } from './components/Skeleton'; export { default as Slider } from './components/Slider';