@digigov/ui 1.2.0-dcbd7ded → 2.0.0-0edebf87

package/src/layouts/Basic/__stories__/MultipleRowsLayout.tsx

@@ -4,6 +4,7 @@ import { Aside } from '@digigov/ui/layouts/Basic/Aside';
 import { Container } from '@digigov/ui/layouts/Basic/Container';
 import { Main } from '@digigov/ui/layouts/Basic/Main';
 import { Heading, Paragraph } from '@digigov/ui/typography';
+
 export const MultipleRowsLayout = () => (
   <Layout>
     <Container>

package/src/layouts/Basic/__stories__/WithBasicLayout.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Aside } from '@digigov/ui/layouts/Basic/Aside';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+import BasicLayout from '@digigov/ui/layouts/Basic';
+import { Top } from '@digigov/ui/layouts/Basic/Top';
+import { Bottom } from '@digigov/ui/layouts/Basic/Bottom';
+
+export const WithBasicLayout = () => (
+  <BasicLayout>
+    <Top>Header content</Top>
+    <Container>
+      <Main>Main content</Main>
+      <Aside>Side content</Aside>
+    </Container>
+    <Bottom>Bottom content</Bottom>
+  </BasicLayout>
+);
+
+export default WithBasicLayout;

package/src/layouts/Basic/index.mdx

@@ -1,40 +1,42 @@
 ---
 id: basic
 title: Basic Layout
-parent: docs/ui/components
 ---
 
-# BasicLayout
+# Layout
 
-Use the BasicLayout component to create a basic page layout.
+The Layout component is used in combination with the Top, Side, Main,
+Content and Bottom components.
 
-```jsx live path=layouts/Basic/index.tsx
-import BasicLayout, { Top, Aside, Main , Container, Bottom } from '@digigov/ui/layouts/Basic';
-function CustomLayout (props){
- return (
-    <BasicLayout>
-      <Top>Header content</Top>
-      <Container>
-        <Main>Main content</Main>
-        <Aside>Side content</Aside>
-      </Container>
-      <Bottom>Bottom content</Bottom>
-    </BasicLayout>
- )
-}
-export CustomLayout
+## How to use
 
-```
+### Default layout
 
-<br />
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Basic"
+  story="Default.tsx"
+/>
 
-## How it works
+### Two thirds one third columns layout
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Basic"
+  story="TwoThirdsOneThirdColumns.tsx"
+/>
 
-The BasicLayout component is used in combination with the Top, Side, Main,
-Content and Bottom components.
+  ### Multiple rows lyout
+
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Basic"
+  story="MultipleRowsLayout.tsx"
+/>
 
 ## API
 
-### Properties
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Layout"]} /> 
+
 
-<br />

package/src/layouts/Basic/index.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/layouts/Basic/__stories__/Default';
+import { MultipleRowsLayout } from '@digigov/ui/layouts/Basic/__stories__/MultipleRowsLayout';
+import { TwoThirdsOneThirdColumns } from '@digigov/ui/layouts/Basic/__stories__/TwoThirdsOneThirdColumns';
+import { WithBasicLayout } from '@digigov/ui/layouts/Basic/__stories__/WithBasicLayout';
+
+test('renders the All Basic variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="MultipleRowsLayout">
+      <MultipleRowsLayout />
+    </TestVariant>
+    <TestVariant title="TwoThirdsOneThirdColumns">
+      <TwoThirdsOneThirdColumns />
+    </TestVariant>
+    <TestVariant title="WithBasicLayout">
+      <WithBasicLayout />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/layouts/Grid/index.mdx

@@ -0,0 +1,39 @@
+---
+id: grid
+title: Grid
+---
+
+## How to use
+
+Grid compoment is a  layout system that allows you to design complex web page layouts with rows and columns.
+
+
+### Default Grid
+
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Grid"
+  story="Default.tsx"
+/>
+
+### Responsive spacing Grid
+
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Grid"
+  story="ResponsiveSpacing.tsx"
+/>
+
+### Inline Grid
+
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Grid"
+  story="Inline.tsx"
+/>
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Grid"]} /> 

package/src/layouts/Grid/index.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/layouts/Grid/__stories__/Default';
+import { Inline } from '@digigov/ui/layouts/Grid/__stories__/Inline';
+import { ResponsiveSpacing } from '@digigov/ui/layouts/Grid/__stories__/ResponsiveSpacing';
+
+test('renders the All Grid variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Inline">
+      <Inline />
+    </TestVariant>
+    <TestVariant title="ResponsiveSpacing">
+      <ResponsiveSpacing />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/layouts/Screen/index.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/layouts/Screen/__stories__/Default';
+import { ScreenDown } from '@digigov/ui/layouts/Screen/__stories__/ScreenDown';
+import { ScreenUp } from '@digigov/ui/layouts/Screen/__stories__/ScreenUp';
+import { SpecificScreenSize } from '@digigov/ui/layouts/Screen/__stories__/SpecificScreenSize';
+
+test('renders the All Screen variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="ScreenDown">
+      <ScreenDown />
+    </TestVariant>
+    <TestVariant title="ScreenUp">
+      <ScreenUp />
+    </TestVariant>
+    <TestVariant title="SpecificScreenSize">
+      <SpecificScreenSize />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/layouts/Stack/index.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { AlignItems } from '@digigov/ui/layouts/Stack/__stories__/AlignItems';
+import { Default } from '@digigov/ui/layouts/Stack/__stories__/Default';
+import { JustifyContent } from '@digigov/ui/layouts/Stack/__stories__/JustifyContent';
+import { NoWrap } from '@digigov/ui/layouts/Stack/__stories__/NoWrap';
+import { Row } from '@digigov/ui/layouts/Stack/__stories__/Row';
+import { Spacing } from '@digigov/ui/layouts/Stack/__stories__/Spacing';
+
+test('renders the All Stack variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="AlignItems">
+      <AlignItems />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="JustifyContent">
+      <JustifyContent />
+    </TestVariant>
+    <TestVariant title="NoWrap">
+      <NoWrap />
+    </TestVariant>
+    <TestVariant title="Row">
+      <Row />
+    </TestVariant>
+    <TestVariant title="Spacing">
+      <Spacing />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/lazy.js

@@ -67,6 +67,7 @@ export default {
   'QrCodeViewer': lazy(() => import('@digigov/ui/app/QrCodeViewer').then((module)=> ({default: module['QrCodeViewer']}))),
   'ThemeOptions': lazy(() => import('@digigov/ui/app/ThemeOptions').then((module)=> ({default: module['ThemeOptions']}))),
   'MARGIN_SIZE': lazy(() => import('@digigov/ui/app/QrCodeViewer/utils').then((module)=> ({default: module['MARGIN_SIZE']}))),
+  'Skeleton': lazy(() => import('@digigov/ui/app/Skeleton').then((module)=> ({default: module['Skeleton']}))),
   'AccordionAuto': lazy(() => import('@digigov/ui/content/Accordion/auto').then((module)=> ({default: module['AccordionAuto']}))),
   'AccordionCloseAllButtonAuto': lazy(() => import('@digigov/ui/content/Accordion/auto').then((module)=> ({default: module['AccordionCloseAllButtonAuto']}))),
   'AccordionOpenAllButtonAuto': lazy(() => import('@digigov/ui/content/Accordion/auto').then((module)=> ({default: module['AccordionOpenAllButtonAuto']}))),
@@ -155,13 +156,15 @@ export default {
   'WarningText': lazy(() => import('@digigov/ui/feedback/WarningText').then((module)=> ({default: module['WarningText']}))),
   'AutoComplete': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoComplete']}))),
   'AutoCompleteAssistiveHint': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteAssistiveHint']}))),
+  'AutoCompleteContainer': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteContainer']}))),
   'AutoCompleteInput': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteInput']}))),
   'AutoCompleteInputTypeahead': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteInputTypeahead']}))),
+  'AutoCompleteMultipleInput': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteMultipleInput']}))),
+  'AutoCompleteMultipleInputContainer': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteMultipleInputContainer']}))),
   'AutoCompleteResultList': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteResultList']}))),
   'AutoCompleteResultListItem': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteResultListItem']}))),
-  'AutoCompleteWrapper': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteWrapper']}))),
   'AutoCompleteStatus': lazy(() => import('@digigov/ui/form/AutoComplete/Status').then((module)=> ({default: module['AutoCompleteStatus']}))),
-  'AutoCompleteStatusWrapper': lazy(() => import('@digigov/ui/form/AutoComplete/Status').then((module)=> ({default: module['AutoCompleteStatusWrapper']}))),
+  'AutoCompleteStatusContainer': lazy(() => import('@digigov/ui/form/AutoComplete/Status').then((module)=> ({default: module['AutoCompleteStatusContainer']}))),
   'ButtonLink': lazy(() => import('@digigov/ui/form/Button/ButtonLink').then((module)=> ({default: module['ButtonLink']}))),
   'CallToAction': lazy(() => import('@digigov/ui/form/Button/CallToAction').then((module)=> ({default: module['CallToAction']}))),
   'ContinueButton': lazy(() => import('@digigov/ui/form/Button').then((module)=> ({default: module['ContinueButton']}))),
@@ -215,6 +218,18 @@ export default {
   'CloseIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['CloseIcon']}))),
   'GlobeIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['GlobeIcon']}))),
   'MoreVertIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['MoreVertIcon']}))),
+  'CancelIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['CancelIcon']}))),
+  'LockIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['LockIcon']}))),
+  'DownloadIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['DownloadIcon']}))),
+  'PdfFileIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['PdfFileIcon']}))),
+  'PlusIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['PlusIcon']}))),
+  'MinusIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['MinusIcon']}))),
+  'LoginIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['LoginIcon']}))),
+  'RestoreIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['RestoreIcon']}))),
+  'ReplyIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['ReplyIcon']}))),
+  'ChatIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['ChatIcon']}))),
+  'ExclamationIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['ExclamationIcon']}))),
+  'PrintIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['PrintIcon']}))),
   'ImageLogo': lazy(() => import('@digigov/ui/icons/ImageLogo').then((module)=> ({default: module['ImageLogo']}))),
   'ImageLogoSet': lazy(() => import('@digigov/ui/icons/ImageLogoSet').then((module)=> ({default: module['ImageLogoSet']}))),
   'AdminLayout': lazy(() => import('@digigov/ui/layouts/Admin').then((module)=> ({default: module['AdminLayout']}))),
@@ -294,6 +309,7 @@ export default {
   'Paragraph': lazy(() => import('@digigov/ui/typography/Paragraph').then((module)=> ({default: module['Paragraph']}))),
   'NormalText': lazy(() => import('@digigov/ui/typography/NormalText').then((module)=> ({default: module['NormalText']}))),
   'Hint': lazy(() => import('@digigov/ui/typography/Hint').then((module)=> ({default: module['Hint']}))),
+  'Typography': lazy(() => import('@digigov/ui/typography/Typography').then((module)=> ({default: module['Typography']}))),
   'Base': lazy(() => import('@digigov/ui/utils/Base').then((module)=> ({default: module['Base']}))),
   'SvgIcon': lazy(() => import('@digigov/ui/utils/SvgIcon').then((module)=> ({default: module['SvgIcon']}))),
   'VisuallyHidden': lazy(() => import('@digigov/ui/utils/VisuallyHidden').then((module)=> ({default: module['VisuallyHidden']}))),
@@ -305,6 +321,6 @@ export default {
   'BackToTopLimit': lazy(() => import('@digigov/ui/navigation/BackToTopLink').then((module)=> ({default: module['BackToTopLimit']}))),
   'Code': lazy(() => import('@digigov/ui/typography/Code').then((module)=> ({default: module['Code']}))),
   'CodeBlock': lazy(() => import('@digigov/ui/typography/CodeBlock').then((module)=> ({default: module['CodeBlock']}))),
-  'Typography': lazy(() => import('@digigov/ui/utils/Typography').then((module)=> ({default: module['Typography']}))),
+  'TestVariant': lazy(() => import('@digigov/ui/utils/TestVariant').then((module)=> ({default: module['TestVariant']}))),
 
 }

package/src/navigation/BackLink/index.mdx

@@ -7,10 +7,6 @@ title: Back Link
 
 Use the back link component to help users go back to the previous page in a multi-page transaction.
 
-```bash
-import BackLink from "@digigov/ui/navigation/BackLink";
-```
-
 ## How to use
 
 <Story
@@ -21,4 +17,7 @@ import BackLink from "@digigov/ui/navigation/BackLink";
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="BackLink" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["BackLink"]} />
+

package/src/navigation/BackLink/index.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/navigation/BackLink/__stories__/Default';
+
+test('renders the All BackLink variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/navigation/BackLink/interaction.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { Default } from '@digigov/ui/navigation/BackLink/__stories__/Default';
+
+test('renders the Default Click link', async ({ mount, page }) => {
+  await mount(
+    <Default />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>a").click();
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/navigation/BackToTopLink/index.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/navigation/BackToTopLink/__stories__/Default';
+import { InMain } from '@digigov/ui/navigation/BackToTopLink/__stories__/InMain';
+
+test('renders the All BackToTopLink variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="InMain">
+      <InMain />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/navigation/Breadcrumbs/index.mdx

@@ -9,10 +9,6 @@ This component is currently experimental because adding a summary line with more
 
 The Breadcrumbs component lets users show and hide sections of related content on a page.
 
-```bash
-import Breadcrumbs from '@digigov/ui/navigation/Breadcrumbs';
-```
-
 ## How to use
 
 <Story
@@ -28,4 +24,9 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Breadcrumbs](http
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Breadcrumbs" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Breadcrumbs",
+  "BreadcrumbsList",
+  "BreadcrumbsListItem"]} />

package/src/navigation/Breadcrumbs/index.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/navigation/Breadcrumbs/__stories__/Default';
+
+test('renders the All Breadcrumbs variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/navigation/Breadcrumbs/interaction.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { Default } from '@digigov/ui/navigation/Breadcrumbs/__stories__/Default';
+
+test('renders the Default Hover and click', async ({ mount, page }) => {
+  await mount(
+    <Default />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>nav>ol>li:nth-child(1)>a").hover();
+ await page.locator("#root>nav>ol>li:nth-child(1)>a").click();
+ await page.keyboard.press("Tab");
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/navigation/Drawer/auto.tsx

@@ -48,14 +48,14 @@ export const DrawerAuto = React.forwardRef<HTMLDivElement, DrawerAutoProps>(
     direction = 'left',
     upRelative = 'never',
     ...props
-  }) {
+  }, ref) {
     const context = useDrawerContext();
     if (!context) {
       throw new Error('DrawerAuto must be used within an DrawerProvider');
     }
     const { registerDrawer } = context;
     return (
-      <Drawer {...registerDrawer(id, { upRelative, direction })} {...props}>
+      <Drawer {...registerDrawer(id, { upRelative, direction })} {...props} ref={ref}>
         {props.children}
       </Drawer>
     );

package/src/navigation/Drawer/index.mdx

@@ -3,18 +3,12 @@ id: drawer
 title: Drawer
 ---
 
-```bash
-import Drawer from '@digigov/ui/app/Drawer';
-```
-
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Drawer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Drawer" story="Default.tsx" />
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Drawer" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Drawer", "DrawerHeading",]} />

package/src/navigation/Drawer/index.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Auto } from '@digigov/ui/navigation/Drawer/__stories__/Auto';
+import { Default } from '@digigov/ui/navigation/Drawer/__stories__/Default';
+import { WithHook } from '@digigov/ui/navigation/Drawer/__stories__/WithHook';
+
+test('renders the All Drawer variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Auto">
+      <Auto />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="WithHook">
+      <WithHook />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/navigation/Dropdown/Dropdown.stories.js

@@ -17,4 +17,5 @@ export * from '@digigov/ui/navigation/Dropdown/__stories__/AlignRight';
 export * from '@digigov/ui/navigation/Dropdown/__stories__/PlacementTop';
 export * from '@digigov/ui/navigation/Dropdown/__stories__/WithIcons';
 export * from '@digigov/ui/navigation/Dropdown/__stories__/ContentPosition';
+export * from '@digigov/ui/navigation/Dropdown/__stories__/ScrollableContent';
 export * from '@digigov/ui/navigation/Dropdown/__stories__/Dense';

package/src/navigation/Dropdown/Dropdown.stories.playwright.json

@@ -64,6 +64,22 @@
           "title": "Open dropdown action"
         }
       ]
+    },
+    "digigov-ui-navigation-dropdown--scrollable-content": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>details>summary"
+              }
+            }
+          ],
+          "id": "rZUYM--IzpfW",
+          "title": "open content"
+        }
+      ]
     }
   }
 }