Skip to content

Commit

Permalink
feat!: remove Grid and Section from exports (#1876)
Browse files Browse the repository at this point in the history
- 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
  • Loading branch information
booc0mtaco authored Mar 5, 2024
1 parent 13fbc18 commit a0ec79a
Show file tree
Hide file tree
Showing 23 changed files with 191 additions and 24 deletions.
3 changes: 2 additions & 1 deletion .storybook/components/DesignTokens/Tier1/Animation.jsx
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
3 changes: 2 additions & 1 deletion .storybook/components/DesignTokens/Tier1/Borders.jsx
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
2 changes: 1 addition & 1 deletion .storybook/components/DesignTokens/Tier1/Colors.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
3 changes: 2 additions & 1 deletion .storybook/components/DesignTokens/Tier1/FontFamilies.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
3 changes: 2 additions & 1 deletion .storybook/components/DesignTokens/Tier1/FontSizes.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
3 changes: 2 additions & 1 deletion .storybook/components/DesignTokens/Tier1/FontWeights.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
3 changes: 2 additions & 1 deletion .storybook/components/DesignTokens/Tier1/Layout.jsx
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
3 changes: 2 additions & 1 deletion .storybook/components/DesignTokens/Tier1/Shadows.jsx
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
3 changes: 2 additions & 1 deletion .storybook/components/DesignTokens/Tier1/Sizes.jsx
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
3 changes: 2 additions & 1 deletion .storybook/components/DesignTokens/Tier2/Borders.stories.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
3 changes: 2 additions & 1 deletion .storybook/components/DesignTokens/Tier2/Forms.stories.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
3 changes: 2 additions & 1 deletion .storybook/components/DesignTokens/Tier3/Sizes.stories.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
33 changes: 33 additions & 0 deletions src/components/PopoverContainer/PopoverContainer.stories.tsx
Original file line number Diff line number Diff line change
@@ -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) => <div className="p-8">{Story()}</div>],
} as Meta<Args>;

type Args = React.ComponentProps<typeof PopoverContainer>;

export const Default: StoryObj<Args> = {
args: {
children: 'Default container',
},
};

export const WithRows: StoryObj<Args> = {
render: () => (
<PopoverContainer>
<PopoverListItem icon="arrow-downward">test 1</PopoverListItem>
<PopoverListItem icon="arrow-narrow-left">test 2</PopoverListItem>
<PopoverListItem icon="arrow-upward">test 3</PopoverListItem>
<PopoverListItem icon="arrow-narrow-right">test 4</PopoverListItem>
</PopoverContainer>
),
};
7 changes: 7 additions & 0 deletions src/components/PopoverContainer/PopoverContainer.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { generateSnapshots } from '@chanzuckerberg/story-utils';
import type { StoryFile } from '@storybook/testing-react';
import * as stories from './PopoverContainer.stories';

describe('<PopoverContainer />', () => {
generateSnapshots(stories as StoryFile);
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<PopoverContainer /> Default story renders snapshot 1`] = `
<div
class="p-8"
>
<div
class="popover-container"
>
Default container
</div>
</div>
`;

exports[`<PopoverContainer /> WithRows story renders snapshot 1`] = `
<div
class="p-8"
>
<div
class="popover-container"
>
<div
class="popover-list-item"
>
<div
class="popover-list-item__icon"
>
<svg
aria-hidden="true"
class="icon"
fill="currentColor"
height="1.5rem"
style="--icon-size: 1.5rem;"
viewBox="0 0 24 24"
width="1.5rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 5v11.17l-4.88-4.88c-.39-.39-1.03-.39-1.42 0-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L13 16.17V5c0-.55-.45-1-1-1s-1 .45-1 1z"
/>
</svg>
</div>
test 1
</div>
<div
class="popover-list-item"
>
<div
class="popover-list-item__icon"
>
<svg
aria-hidden="true"
class="icon"
fill="currentColor"
height="1.5rem"
style="--icon-size: 1.5rem;"
viewBox="0 0 24 24"
width="1.5rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.7,18.3L9.7,18.3c0.39-0.39,0.39-1.02,0-1.41L5.83,13H21c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H5.83l3.88-3.88 c0.39-0.39,0.39-1.02,0-1.41l0,0c-0.39-0.39-1.02-0.39-1.41,0L2.7,11.3c-0.39,0.39-0.39,1.02,0,1.41l5.59,5.59 C8.68,18.68,9.32,18.68,9.7,18.3z"
/>
</svg>
</div>
test 2
</div>
<div
class="popover-list-item"
>
<div
class="popover-list-item__icon"
>
<svg
aria-hidden="true"
class="icon"
fill="currentColor"
height="1.5rem"
style="--icon-size: 1.5rem;"
viewBox="0 0 24 24"
width="1.5rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13 19V7.83l4.88 4.88c.39.39 1.03.39 1.42 0 .39-.39.39-1.02 0-1.41l-6.59-6.59c-.39-.39-1.02-.39-1.41 0l-6.6 6.58c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L11 7.83V19c0 .55.45 1 1 1s1-.45 1-1z"
/>
</svg>
</div>
test 3
</div>
<div
class="popover-list-item"
>
<div
class="popover-list-item__icon"
>
<svg
aria-hidden="true"
class="icon"
fill="currentColor"
height="1.5rem"
style="--icon-size: 1.5rem;"
viewBox="0 0 24 24"
width="1.5rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.29,5.71L14.29,5.71c-0.39,0.39-0.39,1.02,0,1.41L18.17,11H3c-0.55,0-1,0.45-1,1v0c0,0.55,0.45,1,1,1h15.18l-3.88,3.88 c-0.39,0.39-0.39,1.02,0,1.41l0,0c0.39,0.39,1.02,0.39,1.41,0l5.59-5.59c0.39-0.39,0.39-1.02,0-1.41L15.7,5.71 C15.32,5.32,14.68,5.32,14.29,5.71z"
/>
</svg>
</div>
test 4
</div>
</div>
</div>
`;
6 changes: 2 additions & 4 deletions src/components/Section/Section.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ export interface Props {
overline?: ReactNode;
/**
* "as" prop, passed to Heading Component
*
* **Default is `"h2"`.
*/
headingAs?: HeadingElement;
/**
Expand All @@ -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,
Expand Down
2 changes: 0 additions & 2 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand Down

0 comments on commit a0ec79a

Please sign in to comment.