@digigov/ui 2.0.0-daaf7bdf → 2.0.0-eaf330f5

package/src/content/Table/interaction.test.tsx

@@ -4,29 +4,41 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import { WithLoader } from '@digigov/ui/content/Table/__stories__/WithLoader';
 import { WithSortFilters } from '@digigov/ui/content/Table/__stories__/WithSortFilters';
 const SCREENSHOT_DELAY = 2_000;
-const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
 test('renders the WithLoader Toggle Loading', async ({ mount, page }) => {
-  await mount(
-    <WithLoader />
-  )
+  await mount(<WithLoader />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await delay(SCREENSHOT_DELAY);
- await page.locator("#root>button").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.locator('#root>button').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
-
 
-test('renders the WithSortFilters Click on header cell', async ({ mount, page }) => {
-  await mount(
-    <WithSortFilters />
-  )
+test('renders the WithSortFilters Click on header cell', async ({
+  mount,
+  page,
+}) => {
+  await mount(<WithSortFilters />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await delay(SCREENSHOT_DELAY);
- await page.locator("#root>div>table>thead>tr>th:nth-child(1)>details>summary").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page
+    .locator('#root>div>table>thead>tr>th:nth-child(1)>details>summary')
+    .click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/content/TaskList/{index.mdx → doc.mdx}

@@ -9,13 +9,11 @@ TaskList is a component that displays number of steps required to complete a pro
 
 ## How to use
 
-### Default
+<code src="@digigov/ui/content/TaskList/__stories__/Default.tsx" />
 
-<Story
-  packageName="@digigov/ui"
-  component="content/TaskList"
-  story="Default.tsx"
-/>
+## With dense style
+
+<code src="@digigov/ui/content/TaskList/__stories__/Dense.tsx" />
 
 ## API
 

package/src/content/TaskList/index.test.tsx

@@ -18,6 +18,10 @@ test('renders the All TaskList variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/content/Timeline/{index.mdx → doc.mdx}

@@ -11,13 +11,11 @@ User can better understand what has happened and also understand what the next s
 
 ## How to use
 
-### Default
+<code src="@digigov/ui/content/Timeline/__stories__/Default.tsx" />
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Timeline"
-  story="Default.tsx"
-/>
+## With dense style
+
+<code src="@digigov/ui/content/Timeline/__stories__/Dense.tsx" />
 
 ## API
 

package/src/content/Timeline/index.test.tsx

@@ -18,6 +18,10 @@ test('renders the All Timeline variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/doc.mdx

@@ -0,0 +1,49 @@
+---
+id: Introduction
+---
+
+---
+
+# Digigov UI
+
+Digigov UI is a collection of reusable, accessible, and design-consistent React components for building web applications.
+It is designed to work seamlessly with the [GOV.GR design system](https://guide.services.gov.gr) and other [Digigov libraries](learn/overview).
+
+## Before We Start
+
+User interfaces play a crucial role in web applications, influencing both usability and accessibility.
+With `@digigov/ui`, we provide a structured and efficient way to build scalable and accessible UI components.
+
+The `@digigov/ui` library offers structure and flexibility, enabling developers to build cohesive and accessible interfaces with ease.
+Whether you're designing a simple form or a complex application, `@digigov/ui` components provide a solid foundation that enhances development
+efficiency while supporting customization and scalability."
+
+## Overview
+
+The `@digigov/ui` package offers a collection of reusable, accessible, and design-consistent React components tailored for `GOV.GR` services. The library ensures seamless integration with `@digigov/css`, providing predefined styles that adhere to the [GOV.GR design guidelines](https://guide.services.gov.gr).
+
+### 📦 Installation
+
+```sh
+yarn add @digigov/ui
+
+```
+
+Or using npm:
+
+```sh
+npm install i @digigov/ui
+
+```
+
+### Key Features
+
+✅ **Prebuilt Components**: Includes **Buttons**, **Modals**, **Tables**, **Inputs**, **Paragraphs**, **Headers**, **Tabs**, **Accordions** and more, and more—ready to use with minimal configuration.
+
+🎨 **Customizability** – Built-in theming, **modify colors**, **typography**, and **spacing** using CSS variables make it easy to adapt components to different project needs.
+
+♿ **Accessibility by Design**: Components follow WCAG standards to ensure usability for all users.
+
+🔌 **Integration-Friendly**: Works seamlessly with `@digigov/form`, `@digigov/css`, and other Digigov libraries.
+
+In the following sections, we will walk you through the concepts of `@digigov/ui` components, including usage examples, and best practices.

package/src/feedback/CopyToClipboard/CopyToClipboard.stories.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { CopyToClipboard } from '@digigov/ui/feedback/CopyToClipboard';
+import { Button } from '@digigov/ui/form/Button';
+
+export default {
+  title: 'Digigov UI/feedback/CopyToClipboard',
+  component: CopyToClipboard,
+  displayName: 'CopyToClipboard',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <CopyToClipboard
+        text={args.text}
+        variant={args.variant}
+        tooltipAlign={args.tooltipAlign}
+        dense={args.dense}
+        message={args.message}
+        id={args.id}
+        onCopy={() => {
+          console.log('content copied!');
+        }}
+      >
+        <Button color="secondary" aria-describedby="copy-to-clipboard">
+          Αντιγραφή
+        </Button>
+      </CopyToClipboard>
+    );
+  },
+  args: {
+    text: 'copied-text',
+    variant: 'tooltip',
+    tooltipAlign: 'left',
+    dense: false,
+    message: 'Αντιγράφηκε στο πρόχειρο',
+    id: 'copy-to-clipboard',
+  },
+  argTypes: {
+    text: {
+      control: { type: 'text' },
+    },
+    variant: {
+      options: ['tooltip', 'banner'],
+      control: { type: 'select' },
+    },
+    tooltipAlign: {
+      options: ['left', 'right'],
+      control: { type: 'select' },
+      if: { arg: 'variant', eq: 'tooltip' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+      if: { arg: 'variant', eq: 'tooltip' },
+    },
+    message: {
+      control: { type: 'text' },
+    },
+    id: {
+      control: { type: 'text' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['timeout', 'ref'] },
+  },
+};
+
+export { Default } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Default';
+export { Banner } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Banner';
+export { Dense } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Dense';

package/src/feedback/CopyToClipboard/__stories__/Default.tsx

@@ -11,7 +11,7 @@ export const Default = () => {
       message="Αντιγράφηκε στο πρόχειρο"
       id="copy-to-clipboard"
       onCopy={() => {
-        console.log('yess copied');
+        console.log('content copied!');
       }}
     >
       <Button color="secondary" aria-describedby="copy-to-clipboard">

package/src/feedback/CopyToClipboard/doc.mdx

@@ -0,0 +1,24 @@
+---
+id: copy-to-clipboard
+title: CopyToClipboard
+---
+
+# CopyToClipboard
+
+## How to use
+
+<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Default.tsx" />
+
+### As banner
+
+<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Banner.tsx" />
+
+### With dense style
+
+<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Dense.tsx" />
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps componentName={['CopyToClipboardContainer']} />{' '}

package/src/feedback/CopyToClipboard/index.test.tsx

@@ -22,6 +22,10 @@ test('renders the All CopyToClipboard variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/feedback/CopyToClipboard/index.tsx

@@ -41,7 +41,7 @@ export const CopyToClipboard = React.forwardRef<
   }, [enabled]);
 
   function copyToClipboard() {
-    onCopy && onCopy();
+    if (onCopy) onCopy();
     navigator.clipboard.writeText(text);
     setEnabled(true);
   }

package/src/feedback/CopyToClipboard/interaction.test.tsx

@@ -6,36 +6,46 @@ import { Default } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Defaul
 import { Dense } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Dense';
 
 test('renders the Banner Click button', async ({ mount, page }) => {
-  await mount(
-    <Banner />
-  )
+  await mount(<Banner />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>div>button").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  await page.locator('#root>div>div>button').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
-
 
 test('renders the Default Click button', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>div>button").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  await page.locator('#root>div>div>button').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
-
 
 test('renders the Dense Click button', async ({ mount, page }) => {
-  await mount(
-    <Dense />
-  )
+  await mount(<Dense />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>div>button").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  await page.locator('#root>div>div>button').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/feedback/ErrorSummary/ErrorSummary.stories.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Heading } from '@digigov/ui/typography/Heading';
+import { List, ListItem } from '@digigov/ui/content/List';
+
+export default {
+  title: 'Digigov UI/feedback/ErrorSummary',
+  description:
+    'Use this component at the top of a page to summarise any errors a user has made.',
+  link: 'https://guide.services.gov.gr/docs/components/error-summary',
+  component: ErrorSummary,
+  displayName: 'ErrorSummary',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <ErrorSummary dense={args.dense}>
+        <Heading size="sm">{args.heading}</Heading>
+        <List listStyle="none">
+          {args.links.map((link, index) => (
+            <ListItem key={index}>
+              <Link href={link.href}>{link.label}</Link>
+            </ListItem>
+          ))}
+        </List>
+      </ErrorSummary>
+    );
+  },
+  parameters: {
+    controls: { exclude: ['variant', 'ref'] },
+  },
+  args: {
+    dense: false,
+    heading: 'Υπήρξε κάποιο πρόβλημα',
+    links: [
+      {
+        href: '#',
+        label: 'Πρέπει να συμπληρώσετε το έτος',
+      },
+      {
+        href: '#',
+        label: 'Πρέπει να συμπληρώσετε το μήνα',
+      },
+    ],
+  },
+  argTypes: {
+    dense: {
+      control: { type: 'boolean' },
+    },
+    heading: {
+      control: { type: 'text' },
+    },
+    links: {
+      control: { type: 'object' },
+    },
+  },
+};
+
+export { Default } from '@digigov/ui/feedback/ErrorSummary/__stories__/Default';
+export { Dense } from '@digigov/ui/feedback/ErrorSummary/__stories__/Dense';
+export { LinkedToInput } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToInput';
+export { LinkedToField } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToField';
+export { LinkedToCheckbox } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox';
+export { ErrorGroupLinkedToInput } from '@digigov/ui/feedback/ErrorSummary/__stories__/ErrorGroupLinkedToInput';
+export { WithBackLinkAndButton } from '@digigov/ui/feedback/ErrorSummary/__stories__/WithBackLinkAndButton';

package/src/feedback/ErrorSummary/__snapshots__/index.spec.tsx.snap

@@ -1,7 +1,7 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the ErrorSummary with sample data 1`] = `
-<ForwardRef(ErrorSummary)>
+<ForwardRef(ErrorSummary2)>
   this is some random warning text
-</ForwardRef(ErrorSummary)>
+</ForwardRef(ErrorSummary2)>
 `;

package/src/feedback/ErrorSummary/__stories__/ErrorGroupLinkedToInput.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { List, ListItem } from '@digigov/ui/content/List';
+import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { TextInput } from '@digigov/ui/form/TextInput';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Heading } from '@digigov/ui/typography/Heading';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const ErrorGroupLinkedToInput = () => (
+  <div>
+    <ErrorSummary variant="error-group">
+      <Heading size="md">Τα παρακάτω πεδία της φόρμας ειναι λάθος.</Heading>
+      <List listStyle="bullet">
+        <ListItem>
+          <b>Όνομα επιχείρησης:</b>{' '}
+          <Link href="#business-name">
+            Πρέπει να συμπληρώσετε το όνομα της επιχείρησης
+          </Link>
+        </ListItem>
+        <ListItem>
+          <b>Διεύθυνση επιχείρησης:</b>{' '}
+          <Link href="#address-name">
+            Πρέπει να συμπληρώσετε τη διεύθυνση της επιχείρησης
+          </Link>
+        </ListItem>
+      </List>
+    </ErrorSummary>
+    <FieldContainer error>
+      <LabelContainer>
+        <LabelTitle size="md">Όνομα επιχείρησης</LabelTitle>
+        <Hint>Ποιο είναι το όνομα της επιχείρησης;</Hint>
+        <TextInput error name="inputext" id="business-name"></TextInput>
+      </LabelContainer>
+    </FieldContainer>
+    <FieldContainer error>
+      <LabelContainer>
+        <LabelTitle size="md">Διεύθυνση επιχείρησης</LabelTitle>
+        <Hint>Ποια είναι η διεύθυνση της επιχείρησης;</Hint>
+        <TextInput error name="inputext" id="business-address"></TextInput>
+      </LabelContainer>
+    </FieldContainer>
+  </div>
+);
+
+export default ErrorGroupLinkedToInput;

package/src/feedback/ErrorSummary/__stories__/LinkedToInput.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
 import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { Link } from '@digigov/ui/navigation/Link';
 import { Heading } from '@digigov/ui/typography/Heading';

package/src/feedback/ErrorSummary/{index.mdx → doc.mdx}

@@ -5,17 +5,13 @@ title: ErrorSummary
 
 # ErrorSummary
 
-Use this component at the top of a page to summarise any errors a user has made.
+Use this component at the top of a page to summarize any errors a user has made.
 
 When a user makes an error, you must show both an error summary and an error message next to each answer that contains an error.
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/feedback/ErrorSummary/__stories__/Default.tsx" />
 
 ### Linking from the error summary to each answer
 
@@ -23,32 +19,20 @@ You must link the errors in the error summary to the answer they relate to.
 
 For questions that require a user to answer using a single field, like a file upload, select, textarea, text input or character count, link to the field.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="LinkedToInput.tsx"
-/>
+<code src="@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToInput.tsx" />
 
 When a user has to enter their answer into multiple fields, such as the day, month and year fields in the date input component, link to the first field that contains an error.
 
 If you do not know which field contains an error, link to the first field.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="LinkedToField.tsx"
-/>
+<code src="@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToField.tsx" />
 
 For questions that require a user to select one or more options from a list using radios or checkboxes, link to the first radio or checkbox.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="LinkedToCheckbox.tsx"
-/>
+<code src="@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox.tsx" />
 
 ## API
 
 See below for a complete reference to all of the props  available to the components mentioned here.
 
-<ComponentProps componentName={["ErrorSummary"]} /> 
+{/* <ComponentProps componentName={["ErrorSummary"]} />  */}

package/src/feedback/ErrorSummary/index.test.tsx

@@ -3,6 +3,7 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/ui/feedback/ErrorSummary/__stories__/Default';
 import { Dense } from '@digigov/ui/feedback/ErrorSummary/__stories__/Dense';
+import { ErrorGroupLinkedToInput } from '@digigov/ui/feedback/ErrorSummary/__stories__/ErrorGroupLinkedToInput';
 import { LinkedToCheckbox } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox';
 import { LinkedToField } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToField';
 import { LinkedToInput } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToInput';
@@ -18,6 +19,9 @@ test('renders the All ErrorSummary variants', async ({ mount, page }) => {
     <TestVariant title="Dense">
       <Dense />
     </TestVariant>
+    <TestVariant title="ErrorGroupLinkedToInput">
+      <ErrorGroupLinkedToInput />
+    </TestVariant>
     <TestVariant title="LinkedToCheckbox">
       <LinkedToCheckbox />
     </TestVariant>
@@ -34,6 +38,10 @@ test('renders the All ErrorSummary variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/feedback/ErrorSummary/interaction.test.tsx

@@ -4,14 +4,18 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import { LinkedToCheckbox } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox';
 
 test('renders the LinkedToCheckbox Go to checkbox', async ({ mount, page }) => {
-  await mount(
-    <LinkedToCheckbox />
-  )
+  await mount(<LinkedToCheckbox />);
   await page.evaluate(() => document.fonts.ready);
- await page.keyboard.press("Tab");
- await page.keyboard.press("Enter");
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  await page.keyboard.press('Tab');
+  await page.keyboard.press('Enter');
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/feedback/NotificationBanner/NotificationBanner.stories.js

@@ -1,4 +1,5 @@
 import NotificationBanner from '@digigov/ui/feedback/NotificationBanner';
+
 export default {
   title: 'Digigov UI/feedback/NotificationBanner',
   tags: ['Experimental'],
@@ -9,6 +10,41 @@ export default {
   component: NotificationBanner,
   displayName: 'NotificationBanner',
 };
+
+export const WithControls = {
+  args: {
+    title: 'Ειδοποίηση',
+    children: ' Σε 7 ημέρες θα μπορείτε να υποβάλετε την αίτηση.',
+    link: {
+      label: 'Προβολή αίτησης',
+      href: '#',
+    },
+    variant: 'info',
+    dense: false,
+  },
+  argTypes: {
+    title: {
+      control: { type: 'text' },
+    },
+    children: {
+      control: { type: 'text' },
+    },
+    link: {
+      control: { type: 'object' },
+    },
+    variant: {
+      options: ['info', 'success', 'error'],
+      control: { type: 'select' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+
 export { Default } from '@digigov/ui/feedback/NotificationBanner/__stories__/Default';
 export { Success } from '@digigov/ui/feedback/NotificationBanner/__stories__/Success';
 export { Dense } from '@digigov/ui/feedback/NotificationBanner/__stories__/Dense';