@digigov/ui 2.0.0-13876dba → 2.0.0-16fbe090

package/src/layouts/Grid/Grid.stories.jsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import Grid from '@digigov/ui/layouts/Grid';
+import doc from './doc.mdx?raw';
+
+export default {
+  title: 'Digigov UI/layouts/Grid',
+  component: Grid,
+  tags: ['autodocs'],
+  markdown: doc,
+  displayName: 'Grid',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Grid
+        role="grid"
+        aria-label="grid-example"
+        container
+        spacing={args.spacing}
+        inline={args.inline}
+      >
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.1
+        </Grid>
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.2
+        </Grid>
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.3
+        </Grid>
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.4
+        </Grid>
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.5
+        </Grid>
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.6
+        </Grid>
+      </Grid>
+    );
+  },
+  args: {
+    inline: false,
+    spacing: 4,
+    xs: 12,
+    sm: 6,
+    md: 4,
+    lg: 3,
+    xl: 2,
+  },
+  argsTypes: {
+    inline: {
+      control: 'boolean',
+    },
+    spacing: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    xs: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    sm: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    md: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    lg: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    xl: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+
+export { Default } from '@digigov/ui/layouts/Grid/__stories__/Default';
+export { ResponsiveSpacing } from '@digigov/ui/layouts/Grid/__stories__/ResponsiveSpacing';
+export { Inline } from '@digigov/ui/layouts/Grid/__stories__/Inline';

package/src/layouts/Grid/doc.mdx

@@ -9,18 +9,18 @@ title: Grid
 
 Grid component is a  layout system that allows you to design complex web page layouts with rows and columns.
 
-<code src="@digigov/ui/layouts/Grid/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/layouts/Grid/__stories__/Default.tsx" />
 
 ### Responsive spacing Grid
 
-<code src="@digigov/ui/layouts/Grid/__stories__/ResponsiveSpacing.tsx" />
+<code src="@digigov/ui/src/layouts/Grid/__stories__/ResponsiveSpacing.tsx" />
 
 ### Inline Grid
 
-<code src="@digigov/ui/layouts/Grid/__stories__/Inline.tsx" />
+<code src="@digigov/ui/src/layouts/Grid/__stories__/Inline.tsx" />
 
 ## API
 
 See below for a complete reference to all of the props  available to the components mentioned here.
 
-<ComponentProps componentName={["Grid"]} /> 
+<ComponentProps componentName={["Grid"]} /> 

package/src/layouts/Hidden/Hidden.stories.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import Hidden from '@digigov/ui/layouts/Hidden';
+
+export default {
+  title: 'Digigov UI/layouts/Hidden',
+  component: Hidden,
+  displayName: 'Hidden',
+};
+
+export const WithControls = {
+  args: {
+    children: 'Περιεχόμενο μέσα σε Hidden.',
+    xsUpHidden: false,
+    smUpHidden: false,
+    mdUpHidden: false,
+    lgUpHidden: false,
+    xlUpHidden: false,
+    xsHidden: false,
+    smHidden: false,
+    mdHidden: false,
+    lgHidden: false,
+    xlHidden: false,
+  },
+  argTypes: {
+    children: {
+      control: { type: 'text' },
+    },
+    xsUpHidden: {
+      control: { type: 'boolean' },
+    },
+    smUpHidden: {
+      control: { type: 'boolean' },
+    },
+    mdUpHidden: {
+      control: { type: 'boolean' },
+    },
+    lgUpHidden: {
+      control: { type: 'boolean' },
+    },
+    xlUpHidden: {
+      control: { type: 'boolean' },
+    },
+    xsHidden: {
+      control: { type: 'boolean' },
+    },
+    smHidden: {
+      control: { type: 'boolean' },
+    },
+    mdHidden: {
+      control: { type: 'boolean' },
+    },
+    lgHidden: {
+      control: { type: 'boolean' },
+    },
+    xlHidden: {
+      control: { type: 'boolean' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};

package/src/layouts/Hidden/index.tsx

@@ -1 +1,4 @@
 export * from '@digigov/react-core/Hidden';
+import Hidden from '@digigov/react-core/Hidden';
+
+export default Hidden;

package/src/layouts/Stack/Stack.stories.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import Stack from '@digigov/ui/layouts/Stack';
+import Card from '@digigov/ui/content/Card';
+import doc from './doc.mdx?raw';
+
+export default {
+  title: 'Digigov UI/layouts/Stack',
+  component: Stack,
+  tags: ['autodocs'],
+  markdown: doc,
+  displayName: 'Stack',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Stack
+        spacing={args.spacing}
+        alignItems={args.alignItems}
+        direction={args.direction}
+        justifyContent={args.justifyContent}
+        alignContent={args.alignContent}
+        flexWrap={args.flexWrap}
+      >
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+        <Card variant="border"> Item 5 </Card>
+        <Card variant="border"> Item 6 </Card>
+      </Stack>
+    );
+  },
+  args: {
+    spacing: 4,
+    direction: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    alignContent: 'center',
+    flexWrap: 'nowrap',
+  },
+  argsTypes: {
+    spacing: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    direction: {
+      control: {
+        type: 'select',
+      },
+      options: ['row', 'row-reverse', 'column', 'column-reverse'],
+    },
+    justifyContent: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ],
+    },
+    alignItems: {
+      control: {
+        type: 'select',
+      },
+      options: ['stretch', 'flex-start', 'flex-end', 'center', 'baseline'],
+    },
+    alignContent: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'stretch',
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+      ],
+    },
+    flexWrap: {
+      control: {
+        type: 'select',
+      },
+      options: ['nowrap', 'wrap'],
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+
+export { Default } from '@digigov/ui/layouts/Stack/__stories__/Default';
+export { Spacing } from '@digigov/ui/layouts/Stack/__stories__/Spacing';
+export { Row } from '@digigov/ui/layouts/Stack/__stories__/Row';
+export { NoWrap } from '@digigov/ui/layouts/Stack/__stories__/NoWrap';
+export { JustifyContent } from '@digigov/ui/layouts/Stack/__stories__/JustifyContent';
+export { AlignItems } from '@digigov/ui/layouts/Stack/__stories__/AlignItems';

package/src/layouts/Stack/doc.mdx

@@ -9,27 +9,27 @@ Use the Stack component in order to arrange elements vertically or horizontally.
 
 ## How to use
 
-<code src="@digigov/ui/layouts/Stack/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/layouts/Stack/__stories__/Default.tsx" />
 
 ### With align items
 
-<code src="@digigov/ui/layouts/Stack/__stories__/AlignItems.tsx" />
+<code src="@digigov/ui/src/layouts/Stack/__stories__/AlignItems.tsx" />
 
 ### With justify content
 
-<code src="@digigov/ui/layouts/Stack/__stories__/JustifyContent.tsx" />
+<code src="@digigov/ui/src/layouts/Stack/__stories__/JustifyContent.tsx" />
 
 ### With no wrap
 
-<code src="@digigov/ui/layouts/Stack/__stories__/NoWrap.tsx" />
+<code src="@digigov/ui/src/layouts/Stack/__stories__/NoWrap.tsx" />
 
 ### In row
 
-<code src="@digigov/ui/layouts/Stack/__stories__/Row.tsx" />
+<code src="@digigov/ui/src/layouts/Stack/__stories__/Row.tsx" />
 
 ### With spacing
 
-<code src="@digigov/ui/layouts/Stack/__stories__/Spacing.tsx" />
+<code src="@digigov/ui/src/layouts/Stack/__stories__/Spacing.tsx" />
 
 ## API
 

package/src/{lazy.js → lazy.ts}

@@ -44,6 +44,7 @@ export default {
   'LoaderContainer': lazy(() => import('@digigov/ui/app/Loader').then((module) => ({ default: module['LoaderContainer'] }))),
   'FullPageBackground': lazy(() => import('@digigov/ui/app/Loader').then((module) => ({ default: module['FullPageBackground'] }))),
   'CircularProgress': lazy(() => import('@digigov/ui/app/Loader/index.web').then((module) => ({ default: module['CircularProgress'] }))),
+  'CircularProgressBase': lazy(() => import('@digigov/ui/app/Loader/index.web').then((module) => ({ default: module['CircularProgressBase'] }))),
   'Masthead': lazy(() => import('@digigov/ui/app/Masthead').then((module) => ({ default: module['Masthead'] }))),
   'MastheadBody': lazy(() => import('@digigov/ui/app/Masthead').then((module) => ({ default: module['MastheadBody'] }))),
   'MastheadLogo': lazy(() => import('@digigov/ui/app/Masthead').then((module) => ({ default: module['MastheadLogo'] }))),
@@ -140,7 +141,6 @@ 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'] }))),
   'AutoCompleteInputBase': lazy(() => import('@digigov/ui/form/AutoComplete').then((module) => ({ default: module['AutoCompleteInputBase'] }))),
-  'AutoCompleteInputTypeahead': lazy(() => import('@digigov/ui/form/AutoComplete').then((module) => ({ default: module['AutoCompleteInputTypeahead'] }))),
   'AutoCompleteResultList': lazy(() => import('@digigov/ui/form/AutoComplete').then((module) => ({ default: module['AutoCompleteResultList'] }))),
   'AutoCompleteResultListItem': lazy(() => import('@digigov/ui/form/AutoComplete').then((module) => ({ default: module['AutoCompleteResultListItem'] }))),
   'AutoCompleteContainer': lazy(() => import('@digigov/ui/form/AutoComplete').then((module) => ({ default: module['AutoCompleteContainer'] }))),
@@ -189,8 +189,6 @@ export default {
   'LicenseCCSA': lazy(() => import('@digigov/ui/govgr/Footer/LicenseCCSA').then((module) => ({ default: module['LicenseCCSA'] }))),
   'GovGRLogo': lazy(() => import('@digigov/ui/govgr/GovGRLogo').then((module) => ({ default: module['GovGRLogo'] }))),
   'GovGRLogoBase': lazy(() => import('@digigov/ui/govgr/GovGRLogo').then((module) => ({ default: module['GovGRLogoBase'] }))),
-  'I18NContext': lazy(() => import('@digigov/ui/i18n').then((module) => ({ default: module['I18NContext'] }))),
-  'I18NProvider': lazy(() => import('@digigov/ui/i18n').then((module) => ({ default: module['I18NProvider'] }))),
   'ArrowIcon': lazy(() => import('@digigov/ui/icons/Icon').then((module) => ({ default: module['ArrowIcon'] }))),
   'CaretIcon': lazy(() => import('@digigov/ui/icons/Icon').then((module) => ({ default: module['CaretIcon'] }))),
   'ChevronIcon': lazy(() => import('@digigov/ui/icons/Icon').then((module) => ({ default: module['ChevronIcon'] }))),
@@ -289,14 +287,12 @@ export default {
   'Typography': lazy(() => import('@digigov/ui/utils/Typography').then((module) => ({ default: module['Typography'] }))),
   'Base': lazy(() => import('@digigov/ui/utils/Base').then((module) => ({ default: module['Base'] }))),
   'VisuallyHidden': lazy(() => import('@digigov/ui/utils/VisuallyHidden').then((module) => ({ default: module['VisuallyHidden'] }))),
-  'I18nText': lazy(() => import('@digigov/ui/i18n/I18nText').then((module) => ({ default: module['I18nText'] }))),
   'CloseButton': lazy(() => import('@digigov/ui/app/CloseButton').then((module) => ({ default: module['CloseButton'] }))),
   'ModalContext': lazy(() => import('@digigov/ui/app/Modal/auto').then((module) => ({ default: module['ModalContext'] }))),
   'ModalProvider': lazy(() => import('@digigov/ui/app/Modal/auto').then((module) => ({ default: module['ModalProvider'] }))),
   'ModalAuto': lazy(() => import('@digigov/ui/app/Modal/auto').then((module) => ({ default: module['ModalAuto'] }))),
   'ModalButtonAuto': lazy(() => import('@digigov/ui/app/Modal/auto').then((module) => ({ default: module['ModalButtonAuto'] }))),
   'Skeleton': lazy(() => import('@digigov/ui/app/Skeleton').then((module) => ({ default: module['Skeleton'] }))),
-  'MARGIN_SIZE': lazy(() => import('@digigov/ui/app/QrCodeViewer/utils').then((module) => ({ default: module['MARGIN_SIZE'] }))),
   'AccordionAuto': lazy(() => import('@digigov/ui/content/Accordion/auto').then((module) => ({ default: module['AccordionAuto'] }))),
   'AccordionSectionAuto': lazy(() => import('@digigov/ui/content/Accordion/auto').then((module) => ({ default: module['AccordionSectionAuto'] }))),
   'AccordionOpenAllButtonAuto': lazy(() => import('@digigov/ui/content/Accordion/auto').then((module) => ({ default: module['AccordionOpenAllButtonAuto'] }))),

package/src/navigation/BackLink/doc.mdx

@@ -9,7 +9,7 @@ Use the back link component to help users go back to the previous page in a mult
 
 ## How to use
 
-<code src="@digigov/ui/navigation/BackLink/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/navigation/BackLink/__stories__/Default.tsx" />
 
 ## API
 

package/src/navigation/BackToTopLink/BackToTopLink.stories.js

@@ -1,8 +1,12 @@
 import BackToTopLink from '@digigov/ui/navigation/BackToTopLink';
+import doc from './doc.mdx?raw';
+
 export default {
   title: 'Digigov UI/navigation/BackToTopLink',
   component: BackToTopLink,
   displayName: 'BackToTopLink',
+  tags: ['autodocs'],
+  markdown: doc,
 };
 export { Default } from '@digigov/ui/navigation/BackToTopLink/__stories__/Default';
 export { InMain } from '@digigov/ui/navigation/BackToTopLink/__stories__/InMain';

package/src/navigation/BackToTopLink/doc.mdx

@@ -0,0 +1,22 @@
+---
+id: back-to-top
+title: BackToTop
+---
+
+# BackToTop
+
+Use the BackToTopLink component to allow users to quickly navigate to the top of the page.
+
+## How to use
+
+<code src="@digigov/ui/src/navigation/BackToTopLink/__stories__/Default.tsx" />
+
+### Display in main content
+
+<code src="@digigov/ui/src/navigation/BackToTopLink/__stories__/InMain.tsx" />
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps componentName={["BackToTopLink", "BackToTopContainer"]} /> 

package/src/navigation/Breadcrumbs/doc.mdx

@@ -11,11 +11,15 @@ The Breadcrumbs component lets users show and hide sections of related content o
 
 ## How to use
 
-<code src="@digigov/ui/navigation/Breadcrumbs/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/navigation/Breadcrumbs/__stories__/Default.tsx" />
 
 ### Without current page
 
-<code src="@digigov/ui/navigation/Breadcrumbs/__stories__/WithoutCurrentPage.tsx" />
+<code src="@digigov/ui/src/navigation/Breadcrumbs/__stories__/WithoutCurrentPage.tsx" />
+
+### With hook
+
+<code src="@digigov/ui/src/navigation/Breadcrumbs/__stories__/WithHook.tsx" />
 
 ## Accessibility
 

package/src/navigation/Drawer/doc.mdx

@@ -9,7 +9,7 @@ import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
 
 ## How to use
 
-<code src="@digigov/ui/navigation/Drawer/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/navigation/Drawer/__stories__/Default.tsx" />
 
 ## API
 

package/src/navigation/Drawer/hooks.ts

@@ -28,12 +28,12 @@ export interface UseDrawerReturn {
 
 export const useDrawer = (): UseDrawerReturn => {
   const [currentOpen, setCurrentOpen] = useState<DrawerId | null>(null);
-  const drawersRef = useRef<Map<DrawerId, React.RefObject<HTMLDivElement>>>(
-    new Map()
-  );
-  const buttonsRef = useRef<Map<DrawerId, React.RefObject<HTMLButtonElement>>>(
-    new Map()
-  );
+  const drawersRef = useRef<
+    Map<DrawerId, React.RefObject<HTMLDivElement | null>>
+  >(new Map());
+  const buttonsRef = useRef<
+    Map<DrawerId, React.RefObject<HTMLButtonElement | null>>
+  >(new Map());
 
   const open = useCallback((id: DrawerId) => {
     setCurrentOpen(id);

package/src/navigation/Dropdown/Dropdown.stories.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
+import {
+  Dropdown,
+  DropdownButton,
+  DropdownContent,
+} from '@digigov/ui/navigation/Dropdown';
+import { NavListItemAction, NavList } from '@digigov/ui/navigation/NavList';
+
+import doc from './doc.mdx?raw';
+export default {
+  title: 'Digigov UI/navigation/Dropdown',
+  description:
+    'Use the dropdown component to provide more options to users in cases where there is not enough space such as tables, navbars, etc.',
+  link: 'https://guide.services.gov.gr/docs/patterns/admin-pages/components/dropdown',
+  component: Dropdown,
+  tags: ['autodocs'],
+  markdown: doc,
+  displayName: 'Dropdown',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Dropdown
+        align={args.align}
+        disabled={args.disabled}
+        dense={args.dense}
+        placement={args.placement}
+        closeBehaviour={args.closeBehaviour}
+        float={args.float}
+      >
+        <DropdownButton
+          role="button"
+          aria-haspopup="true"
+          aria-controls="menu2"
+          arrow
+        >
+          Ενέργειες
+        </DropdownButton>
+        <DropdownContent role="menu" id="menu2" scrollable={args.scrollable}>
+          <NavList layout="vertical">
+            <NavListItemAction role="menuitem" href="#">
+              Επεξεργασία
+            </NavListItemAction>
+            <NavListItemAction role="menuitem" href="#">
+              Μετακίνηση
+            </NavListItemAction>
+            <NavListItemAction role="menuitem" href="#">
+              Οριστική διαγραφή
+            </NavListItemAction>
+          </NavList>
+        </DropdownContent>
+      </Dropdown>
+    );
+  },
+  args: {
+    align: 'right',
+    placement: 'bottom',
+    disabled: false,
+    dense: false,
+    closeBehaviour: 'clickButton',
+    float: false,
+    scrollable: false,
+  },
+  argsTypes: {
+    align: {
+      control: {
+        type: 'select',
+      },
+      options: ['left', 'right'],
+    },
+    placement: {
+      control: {
+        type: 'select',
+      },
+      options: ['top', 'bottom'],
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    dense: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    closeBehaviour: {
+      control: {
+        type: 'select',
+      },
+      options: ['clickButton', 'clickOutside'],
+    },
+    float: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    scrollable: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+export { Default } from '@digigov/ui/navigation/Dropdown/__stories__/Default';
+export { Secondary } from '@digigov/ui/navigation/Dropdown/__stories__/Secondary';
+export { Warning } from '@digigov/ui/navigation/Dropdown/__stories__/Warning';
+export { Disabled } from '@digigov/ui/navigation/Dropdown/__stories__/Disabled';
+export { VariantLink } from '@digigov/ui/navigation/Dropdown/__stories__/VariantLink';
+export { AlignRight } from '@digigov/ui/navigation/Dropdown/__stories__/AlignRight';
+export { PlacementTop } from '@digigov/ui/navigation/Dropdown/__stories__/PlacementTop';
+export { WithIcons } from '@digigov/ui/navigation/Dropdown/__stories__/WithIcons';
+export { ContentPosition } from '@digigov/ui/navigation/Dropdown/__stories__/ContentPosition';
+export { ScrollableContent } from '@digigov/ui/navigation/Dropdown/__stories__/ScrollableContent';
+export { Dense } from '@digigov/ui/navigation/Dropdown/__stories__/Dense';

package/src/navigation/Dropdown/doc.mdx

@@ -8,21 +8,43 @@ title: Dropdown
 ## How to use
 
 <div className="dropdown-docs">
-  <code src="@digigov/ui/navigation/Dropdown/__stories__/Default.tsx" />
+  <code src="@digigov/ui/src/navigation/Dropdown/__stories__/Default.tsx" />
 </div>
-### Dropdown with align right
+
+### With align right
 
 You can display the dropdown menu to the right side of the `Dropdown` button.
 
 <div className="dropdown-docs">
-  <code src="@digigov/ui/navigation/Dropdown/__stories__/AlignRight.tsx" />
+  <code src="@digigov/ui/src/navigation/Dropdown/__stories__/AlignRight.tsx" />
 </div>
-### Dropdown with placement top
+
+### With placement top
 
 You can display the dropdown menu to the top of the `Dropdown` button.
 
 <div className="dropdown-docs">
-  <code src="@digigov/ui/navigation/Dropdown/__stories__/PlacementTop.tsx" />
+  <code src="@digigov/ui/src/navigation/Dropdown/__stories__/PlacementTop.tsx" />
+</div>
+
+### With icons
+
+<div className="dropdown-docs">
+  <code src="@digigov/ui/src/navigation/Dropdown/__stories__/WithIcons.tsx" />
+</div>
+
+### With scrollable content
+
+Use this when the content  of the dropdown menu is too long to fit on the screen.
+
+<div className="dropdown-docs">
+  <code src="@digigov/ui/src/navigation/Dropdown/__stories__/ScrollableContent.tsx" />
+</div>
+
+### Dense
+
+<div className="dropdown-docs">
+  <code src="@digigov/ui/src/navigation/Dropdown/__stories__/Dense.tsx" />
 </div>
 
 ## API