@digigov/ui 2.0.0-85c27c19 → 2.0.0-aefd0709

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

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

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,22 @@
+---
+id: copy-to-clipboard
+title: 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

@@ -1,28 +1,29 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Banner } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Banner';
 import { Default } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Default';
 import { Dense } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Dense';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All CopyToClipboard variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Banner">
-      <Banner />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="Dense">
-      <Dense />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Banner">
+        <Banner />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="Dense">
+        <Dense />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  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,34 @@ 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' });
+  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' });
+  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' });
+  await page.locator('#root>div>div>button').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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__/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

@@ -1,40 +1,41 @@
 import React from 'react';
 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 { 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';
 import { WithBackLinkAndButton } from '@digigov/ui/feedback/ErrorSummary/__stories__/WithBackLinkAndButton';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All ErrorSummary variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="Dense">
-      <Dense />
-    </TestVariant>
-    <TestVariant title="LinkedToCheckbox">
-      <LinkedToCheckbox />
-    </TestVariant>
-    <TestVariant title="LinkedToField">
-      <LinkedToField />
-    </TestVariant>
-    <TestVariant title="LinkedToInput">
-      <LinkedToInput />
-    </TestVariant>
-    <TestVariant title="WithBackLinkAndButton">
-      <WithBackLinkAndButton />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="Dense">
+        <Dense />
+      </TestVariant>
+      <TestVariant title="LinkedToCheckbox">
+        <LinkedToCheckbox />
+      </TestVariant>
+      <TestVariant title="LinkedToField">
+        <LinkedToField />
+      </TestVariant>
+      <TestVariant title="LinkedToInput">
+        <LinkedToInput />
+      </TestVariant>
+      <TestVariant title="WithBackLinkAndButton">
+        <WithBackLinkAndButton />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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

@@ -0,0 +1,17 @@
+import React from 'react';
+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 page.evaluate(() => document.fonts.ready);
+  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/__snapshots__/index.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the notification banner 1`] = `
 <NotificationBanner

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

@@ -17,28 +17,17 @@ Use a ‘neutral’ notification banner if the user needs to know about somethin
 
 ## How to use
 
-### Default NotificationBanner
-<Story
-  packageName="@digigov/ui"
-  component="feedback/NotificationBanner"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/feedback/NotificationBanner/__stories__/Default.tsx" />
 
 You can also use a notification banner to tell the user about the outcome of something they’ve just done - but they have not finished using the service, so it does not make sense to use a confirmation page.
 
-### Success NotificationBanner
-<Story
-  packageName="@digigov/ui"
-  component="feedback/NotificationBanner"
-  story="Success.tsx"
-/>
-
-### Dense NotificationBanner
-<Story
-  packageName="@digigov/ui"
-  component="feedback/NotificationBanner"
-  story="Dense.tsx"
-/>
+### With success style
+
+<code src="@digigov/ui/feedback/NotificationBanner/__stories__/Success.tsx" />
+
+### With dense style
+
+<code src="@digigov/ui/feedback/NotificationBanner/__stories__/Dense.tsx" />
 
 ## API
 

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

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

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

@@ -5,28 +5,27 @@ import { Default } from '@digigov/ui/feedback/NotificationBanner/__stories__/Def
 import { Success } from '@digigov/ui/feedback/NotificationBanner/__stories__/Success';
 
 test('renders the Default Hover and click', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>div:nth-child(2)>h3>a").hover();
- await page.locator("#root>div>div:nth-child(2)>h3>a").click();
+  await page.locator('#root>div>div:nth-child(2)>h3>a').hover();
+  await page.locator('#root>div>div:nth-child(2)>h3>a').click();
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
-
 
 test('renders the Success Hover and click', async ({ mount, page }) => {
-  await mount(
-    <Success />
-  )
+  await mount(<Success />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>div:nth-child(2)>h3>a").hover();
- await page.locator("#root>div>div:nth-child(2)>h3>a").click();
+  await page.locator('#root>div>div:nth-child(2)>h3>a').hover();
+  await page.locator('#root>div>div:nth-child(2)>h3>a').click();
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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

@@ -11,21 +11,11 @@ Use the phase banner component to show users your service is still being worked
 
 Your banner must be directly under the blue GOV.GR header and colour bar.
 
-### Default
-
-<Story
-  packageName="@digigov/ui"
-  component="feedback/PhaseBanner"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/feedback/PhaseBanner/__stories__/Default.tsx" />
 
 ### Underlined
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/PhaseBanner"
-  story="Underlined.tsx"
-/>
+<code src="@digigov/ui/feedback/PhaseBanner/__stories__/Underlined.tsx" />
 
 ## API
 

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

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

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

@@ -4,12 +4,12 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import { Default } from '@digigov/ui/feedback/PhaseBanner/__stories__/Default';
 
 test('renders the Default pressing Tab', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.keyboard.press("Tab");
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.keyboard.press('Tab');
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/feedback/WarningText/__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 WarningText with sample data 1`] = `
-<ForwardRef(WarningText)>
+<ForwardRef(WarningText2)>
   this is some random warning text
-</ForwardRef(WarningText)>
+</ForwardRef(WarningText2)>
 `;

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

@@ -10,13 +10,15 @@ title: WarningText
 You might need to rewrite the hidden text ("Προσοχή" in the example) to make it appropriate for your context.
 This will be used by screen-readers.
 
-### Default
+<code src="@digigov/ui/feedback/WarningText/__stories__/Default.tsx" />
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/WarningText"
-  story="Default.tsx"
-/>
+### With dense style
+
+<code src="@digigov/ui/feedback/WarningText/__stories__/Dense.tsx" />
+
+### With assistive text
+
+<code src="@digigov/ui/feedback/WarningText/__stories__/AssistiveText.tsx" />
 
 ## API