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

.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';
 

.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';
 

.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';
 

.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';
 

.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';
 

.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';
 

.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';
 

.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';
 

.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';
 

.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';

.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';
 

.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';
 

.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';
 

.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';
 

.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

.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';
 

.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';
 

.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';

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) => <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>
+ ),
+};

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('<PopoverContainer />', () => {
+ generateSnapshots(stories as StoryFile);
+});

src/components/PopoverContainer/__snapshots__/PopoverContainer.test.ts.snap

@@ -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>
+`;

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,

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';