@digigov/ui 2.0.0-b4cd6916 → 2.0.0-c6d0b3b8

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

@@ -22,6 +22,10 @@ test('renders the All NotificationBanner 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/NotificationBanner/interaction.test.tsx

@@ -5,28 +5,35 @@ 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();
 
-  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: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',
+  });
   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();
 
-  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: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',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/feedback/PhaseBanner/PhaseBanner.stories.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import {
+  PhaseBanner,
+  PhaseBannerTag,
+  PhaseBannerText,
+} from '@digigov/ui/feedback/PhaseBanner';
+import { Link } from '@digigov/ui/navigation/Link';
+
+export default {
+  title: 'Digigov UI/feedback/PhaseBanner',
+  description:
+    'Use the phase banner component to show users your service is still being worked on.',
+  link: 'https://guide.services.gov.gr/docs/components/phase-banner',
+  component: PhaseBanner,
+  displayName: 'PhaseBanner',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <PhaseBanner underline={args.underline}>
+        <PhaseBannerTag>{args.tag}</PhaseBannerTag>
+        <PhaseBannerText>
+          Αυτή είναι μία νέα υπηρεσία – τα <Link href="#feedback">σχόλιά</Link>{' '}
+          σας θα μας βοηθήσουν να τη βελτιώσουμε.
+        </PhaseBannerText>
+      </PhaseBanner>
+    );
+  },
+  args: {
+    tag: 'ALPHA',
+    underline: true,
+  },
+  argTypes: {
+    underline: {
+      control: { type: 'boolean' },
+    },
+    tag: {
+      control: { type: 'text' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+export { Default } from '@digigov/ui/feedback/PhaseBanner/__stories__/Default';
+export { Underlined } from '@digigov/ui/feedback/PhaseBanner/__stories__/Underlined';

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

@@ -18,6 +18,10 @@ test('renders the All PhaseBanner 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/PhaseBanner/interaction.test.tsx

@@ -4,12 +4,16 @@ 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' });
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  await page.keyboard.press('Tab');
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/feedback/WarningText/WarningText.stories.js

@@ -7,6 +7,30 @@ export default {
   component: WarningText,
   displayName: 'WarningText',
 };
+
+export const WithControls = {
+  args: {
+    children:
+      'Μπορεί να σας επιβληθεί πρόστιμο έως και 5.000 ευρώ εάν δεν εγγραφείτε.',
+    assistiveText: 'Σημαντικό',
+    dense: false,
+  },
+  argTypes: {
+    children: {
+      control: { type: 'text' },
+    },
+    assistiveText: {
+      control: { type: 'text' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+
 export { Default } from '@digigov/ui/feedback/WarningText/__stories__/Default';
 export { AssistiveText } from '@digigov/ui/feedback/WarningText/__stories__/AssistiveText';
 export { Dense } from '@digigov/ui/feedback/WarningText/__stories__/Dense';

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
 

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

@@ -22,6 +22,10 @@ test('renders the All WarningText 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/form/AutoComplete/AutoComplete.stories.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import AutoComplete from '@digigov/ui/form/AutoComplete';
+import { suggest } from '@digigov/ui/form/AutoComplete/utils';
+
+export default {
+  title: 'Digigov UI/form/AutoComplete',
+  component: AutoComplete,
+  displayName: 'AutoComplete',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <AutoComplete
+        key={args.multiple ? 'multiple' : 'single'}
+        id={args.id}
+        width={args.width}
+        multiple={args.multiple}
+        autoselect={args.autoselect}
+        minLength={args.minLength}
+        source={suggest}
+      />
+    );
+  },
+  args: {
+    width: 'full',
+    id: 'autocomplete-id',
+    multiple: false,
+    autoselect: false,
+    minLength: 2,
+    numberOfSelected: 2,
+    defaultValue: '',
+  },
+  argTypes: {
+    width: {
+      control: {
+        type: 'select',
+        options: ['25%', '33.3%', '50%', '66.6%', '75%', '100%', 'full'],
+      },
+    },
+    id: {
+      control: { type: 'text' },
+    },
+    multiple: {
+      control: { type: 'boolean' },
+    },
+    autoselect: {
+      control: { type: 'boolean' },
+    },
+    minLength: {
+      control: { type: 'number' },
+    },
+    numberOfSelected: {
+      control: { type: 'select', options: [2, 1, 3, 'all', undefined] },
+      if: { arg: 'multiple', eq: true },
+    },
+    defaultValue: {
+      control: { type: 'string' },
+    },
+  },
+  parameters: {
+    controls: {
+      exclude: [
+        'tStatusResults',
+        'tStatusNoResults',
+        'tStatusQueryTooShort',
+        'tStatusSelectedOption',
+        'tNoResults',
+        'tAssistiveHint',
+        'templates',
+        'name',
+        'placeholder',
+        'onConfirm',
+        'confirmOnBlur',
+        'required',
+        'source',
+      ],
+    },
+  },
+};
+
+export { Default } from '@digigov/ui/form/AutoComplete/__stories__/Default';
+export { Multiple } from '@digigov/ui/form/AutoComplete/__stories__/Multiple';
+export { MultipleWithDefaultValues } from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithDefaultValues';
+export { MultipleShowingTwoSelected } from '@digigov/ui/form/AutoComplete/__stories__/MultipleShowingTwoSelected';
+export { MultipleWithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithMinLength';
+export { WithAutoSelect } from '@digigov/ui/form/AutoComplete/__stories__/WithAutoSelect';
+export { WithDefaultValue } from '@digigov/ui/form/AutoComplete/__stories__/WithDefaultValue';
+export { WithPlaceHolder } from '@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder';
+export { WithShowAllValues } from '@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues';
+export { WithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/WithMinLength';

package/src/form/AutoComplete/Status/index.tsx

@@ -26,7 +26,7 @@ const debounce = function (
 };
 const statusDebounceMillis = 1400;
 
-type StatusProps = {
+interface StatusProps {
   id: string;
   length: number;
   queryLength: number;
@@ -39,13 +39,13 @@ type StatusProps = {
   tNoResults?: () => string;
   tSelectedOption: (x: string, y: number, z: number) => string;
   tResults?: (x: number, y: string) => string;
-};
+}
 
-type StateProps = {
+interface StateProps {
   bump: boolean;
   debounced: boolean;
   silenced: boolean;
-};
+}
 
 export default class Status extends Component<StatusProps, StateProps> {
   static defaultProps = {

package/src/form/AutoComplete/__stories__/Multiple.tsx

@@ -8,7 +8,12 @@ export const Multiple = () => (
   <div>
     <FieldContainer>
       <Fieldset marginBottom={4}>
-        <AutoComplete source={suggest} multiple width="50%" id="multiple-select-default" />
+        <AutoComplete
+          source={suggest}
+          multiple
+          width="50%"
+          id="multiple-select-default"
+        />
       </Fieldset>
     </FieldContainer>
     <Button>Υποβολή</Button>

package/src/form/AutoComplete/__stories__/MultipleShowingTwoSelected.tsx

@@ -7,7 +7,13 @@ import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 export const MultipleShowingTwoSelected = () => (
   <div>
     <FieldContainer>
-      <AutoComplete source={suggest} multiple width='75%' id="multiple-showing-two-selected" numberOfSelected={2} />
+      <AutoComplete
+        source={suggest}
+        multiple
+        width="75%"
+        id="multiple-showing-two-selected"
+        numberOfSelected={2}
+      />
     </FieldContainer>
     <Button>Υποβολή</Button>
   </div>

package/src/form/AutoComplete/__stories__/MultipleWithDefaultValues.tsx

@@ -7,7 +7,13 @@ import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 export const MultipleWithDefaultValues = () => (
   <div>
     <FieldContainer>
-      <AutoComplete source={suggest} multiple defaultValue={['Ελλάδα', 'Ιταλία']} width="50%" id="govgr" />
+      <AutoComplete
+        source={suggest}
+        multiple
+        defaultValue={['Ελλάδα', 'Ιταλία']}
+        width="50%"
+        id="govgr"
+      />
     </FieldContainer>
     <Button>Υποβολή</Button>
   </div>

package/src/form/AutoComplete/__stories__/MultipleWithMinLength.tsx

@@ -8,8 +8,8 @@ import Paragraph from '@digigov/ui/typography/Paragraph';
 export const MultipleWithMinLength = () => (
   <div>
     <Paragraph>
-      Εδώ, ο ελάχιστος αριθμός χαρακτήρων που πρέπει να
-      εισαχθεί ώστε να αρχίσει να φιλτράρεται η αναζήτηση είναι 2.
+      Εδώ, ο ελάχιστος αριθμός χαρακτήρων που πρέπει να εισαχθεί ώστε να αρχίσει
+      να φιλτράρεται η αναζήτηση είναι 2.
     </Paragraph>
     <FieldContainer>
       <Fieldset marginBottom={4}>

package/src/form/AutoComplete/__stories__/WithShowAllValues.tsx

@@ -7,11 +7,7 @@ import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 export const WithShowAllValues = () => (
   <div>
     <FieldContainer>
-      <AutoComplete
-        source={suggest}
-        autoselect={true}
-        id="govgr"
-      />
+      <AutoComplete source={suggest} autoselect={true} id="govgr" />
     </FieldContainer>
     <Button>Υποβολή</Button>
   </div>

package/src/form/AutoComplete/doc.mdx

@@ -0,0 +1,50 @@
+---
+id: auto-complete
+title: AutoComplete
+---
+
+# AutoComplete
+
+Autocomplete is a feature in which an input field suggests a word based on user input. This allows users to quickly search
+through, select from large collections of options and help services get more consistent data.
+
+## How to use
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/Default.tsx" />
+
+### With auto select
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/WithAutoSelect.tsx" />
+
+### With default value
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/WithDefaultValue.tsx" />
+
+### With placeholder
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder.tsx" />
+
+### With all option's values
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues.tsx" />
+
+### With min length
+
+This is the minimum number of characters that should be entered before the AutoComplete will attempt to suggest options(in above example is 2)
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/WithMinLength.tsx" />
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  ["AutoCompleteWrapper",
+  "AutoCompleteStatus",
+  "AutoCompleteStatusWrapper",
+  "AutoCompleteInputTypeahead",
+  "AutoCompleteInput",
+  "AutoCompleteResultList",
+  "AutoCompleteResultListItem",
+  "AutoCompleteAssistiveHint"
+  ]} /> 

package/src/form/AutoComplete/index.test.tsx

@@ -50,6 +50,10 @@ test('renders the All AutoComplete 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();
 });