@digigov/ui 2.0.0-8e254888 → 2.0.0-a32ad9b2

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

@@ -7,6 +7,10 @@ import { Success } from '@digigov/ui/feedback/NotificationBanner/__stories__/Suc
 test('renders the Default Hover and click', async ({ mount, page }) => {
   await mount(<Default />);
   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 page.locator('#root>div>div:nth-child(2)>h3>a').hover();
   await page.locator('#root>div>div:nth-child(2)>h3>a').click();
 
@@ -20,6 +24,10 @@ test('renders the Default Hover and click', async ({ mount, page }) => {
 test('renders the Success Hover and click', async ({ mount, page }) => {
   await mount(<Success />);
   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 page.locator('#root>div>div:nth-child(2)>h3>a').hover();
   await page.locator('#root>div>div:nth-child(2)>h3>a').click();
 

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.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

@@ -6,6 +6,10 @@ import { Default } from '@digigov/ui/feedback/PhaseBanner/__stories__/Default';
 test('renders the Default pressing Tab', async ({ mount, page }) => {
   await mount(<Default />);
   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 page.keyboard.press('Tab');
   const screenshot = await page.screenshot({
     fullPage: true,

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,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the WarningText with sample data 1`] = `
-<ForwardRef(WarningText2)>
-  this is some random warning text
-</ForwardRef(WarningText2)>
+Object {
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": Object {},
+  "key": null,
+  "props": Object {
+    "children": "this is some random warning text",
+  },
+  "type": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
+}
 `;

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, type JSX } from 'react';
 import AutoCompleteStatus from '@digigov/react-core/AutoCompleteStatus';
 import AutoCompleteStatusContainer from '@digigov/react-core/AutoCompleteStatusContainer';
 

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();
 });

package/src/form/AutoComplete/index.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, type JSX } from 'react';
 import { AutoCompleteAssistiveHint } from '@digigov/react-core/AutoCompleteAssistiveHint';
 import { AutoCompleteContainer } from '@digigov/react-core/AutoCompleteContainer';
 import { AutoCompleteInputBase } from '@digigov/react-core/AutoCompleteInputBase';

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

@@ -6,6 +6,10 @@ import { Multiple } from '@digigov/ui/form/AutoComplete/__stories__/Multiple';
 test('renders the Multiple show chip', async ({ mount, page }) => {
   await mount(<Multiple />);
   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 page
     .locator('#root>div>div>fieldset>div>div:nth-child(2)>button')
     .click();

package/src/form/Button/Button.stories.js

@@ -1,11 +1,51 @@
-import Button from '@digigov/ui/form/Button';
+import { Button } from '@digigov/ui/form/Button';
 
 export default {
+  displayName: 'Button',
   title: 'Digigov UI/form/Button',
   description: 'Use the button component to help users carry out an action',
   link: 'https://guide.services.gov.gr/docs/components/button',
   component: Button,
-  displayName: 'Button',
+};
+
+export const WithControls = {
+  args: {
+    variant: 'button',
+    color: 'primary',
+    children: 'Συνέχεια',
+    dense: false,
+    printHidden: true,
+    'aria-label': 'Συνεχίστε στην επόμενη σελίδα',
+  },
+  argTypes: {
+    variant: {
+      options: ['button', 'link'],
+      control: { type: 'radio' },
+    },
+    color: {
+      options: ['primary', 'secondary', 'warning'],
+      control: { type: 'select' },
+      if: { arg: 'variant', eq: 'button' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+      if: { arg: 'variant', eq: 'button' },
+    },
+    printHidden: {
+      control: { type: 'boolean' },
+    },
+    children: {
+      control: { type: 'text' },
+    },
+    'aria-label': {
+      control: { type: 'text' },
+    },
+  },
+  parameters: {
+    controls: {
+      exclude: ['ref'],
+    },
+  },
 };
 
 export { Primary } from '@digigov/ui/form/Button/__stories__/Primary';

package/src/form/Button/ButtonLink.tsx

@@ -1,4 +1,20 @@
-import ButtonLink from '@digigov/react-core/ButtonLink';
+export * from '@digigov/react-core/ButtonLinkBase';
+import React from 'react';
+import {
+  ButtonLinkBase,
+  ButtonLinkBaseProps,
+} from '@digigov/react-core/ButtonLinkBase';
+import { Link } from '@digigov/ui/navigation/Link';
 
-export * from '@digigov/react-core/ButtonLink';
+export interface ButtonLinkProps extends ButtonLinkBaseProps {}
+
+export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
+  function ButtonLink({ children, ...props }, ref) {
+    return (
+      <ButtonLinkBase as={Link} ref={ref} {...props}>
+        {children}
+      </ButtonLinkBase>
+    );
+  }
+);
 export default ButtonLink;

package/src/form/Button/CallToAction.tsx

@@ -1,4 +1,22 @@
-import CallToAction from '@digigov/react-core/CallToAction';
+export * from '@digigov/react-core/CallToActionBase';
+import React from 'react';
+import {
+  CallToActionBase,
+  CallToActionBaseProps,
+} from '@digigov/react-core/CallToActionBase';
+import { Link } from '@digigov/ui/navigation/Link';
+
+export interface CallToActionProps extends CallToActionBaseProps {}
+
+export const CallToAction = React.forwardRef<
+  HTMLAnchorElement,
+  CallToActionProps
+>(function CallToAction({ children, ...props }, ref) {
+  return (
+    <CallToActionBase as={Link} ref={ref} {...props}>
+      {children}
+    </CallToActionBase>
+  );
+});
 
-export * from '@digigov/react-core/CallToAction';
 export default CallToAction;

package/src/form/Button/__stories__/Primary.tsx

@@ -2,7 +2,29 @@ import React from 'react';
 
 import { Button } from '@digigov/ui/form/Button';
 
-export const Primary = () => (
-  <Button aria-label="Συνεχίστε στην επόμενη σελίδα">Συνέχεια</Button>
+export const Primary = ({
+  variant = 'button',
+  color = 'primary',
+  children = 'Συνέχεια',
+  dense = false,
+  printHidden = true,
+  'aria-label': ariaLabel = 'Συνεχίστε στην επόμενη σελίδα',
+}: {
+  variant?: 'button' | 'link';
+  color?: 'primary' | 'secondary' | 'warning';
+  children?: React.ReactNode;
+  dense?: boolean;
+  printHidden?: boolean;
+  'aria-label'?: string;
+}) => (
+  <Button
+    variant={variant}
+    color={color}
+    dense={dense}
+    printHidden={printHidden}
+    aria-label={ariaLabel}
+  >
+    {children}
+  </Button>
 );
 export default Primary;

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

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

@@ -13,6 +13,10 @@ test('renders the GroupingButtonsAndLinks Keyboard navigation', async ({
 }) => {
   await mount(<GroupingButtonsAndLinks />);
   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 page.keyboard.press('Tab');
   await page.keyboard.press('Tab');
 
@@ -26,6 +30,10 @@ test('renders the GroupingButtonsAndLinks Keyboard navigation', async ({
 test('renders the Primary Hover and click', async ({ mount, page }) => {
   await mount(<Primary />);
   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 page.locator('#root>button').hover();
   await page.locator('#root>button').click();
 
@@ -39,6 +47,10 @@ test('renders the Primary Hover and click', async ({ mount, page }) => {
 test('renders the Secondary Hover and click', async ({ mount, page }) => {
   await mount(<Secondary />);
   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 page.locator('#root>button').hover();
   await page.locator('#root>button').click();
 
@@ -52,6 +64,10 @@ test('renders the Secondary Hover and click', async ({ mount, page }) => {
 test('renders the ThemeToggle change theme', async ({ mount, page }) => {
   await mount(<ThemeToggle />);
   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 page.locator('#root>button').click();
   const screenshot = await page.screenshot({
     fullPage: true,
@@ -63,6 +79,10 @@ test('renders the ThemeToggle change theme', async ({ mount, page }) => {
 test('renders the Warning Hover and click', async ({ mount, page }) => {
   await mount(<Warning />);
   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 page.locator('#root>button').hover();
   await page.locator('#root>button').click();
 

package/src/form/Checkbox/Checkbox.stories.jsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import { Checkbox, CheckboxItem } from '@digigov/ui/form/Checkbox';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/form/FieldContainer';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
+import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+
+export default {
+  title: 'Digigov UI/form/Checkbox',
+  description:
+    'Let users select one or more options by using the checkboxes component.',
+  link: 'https://guide.services.gov.gr/docs/components/checkboxes',
+  component: Checkbox,
+  displayName: 'Checkbox',
+};
+export const WithControls = {
+  render: (args) => {
+    return (
+      <FieldContainer error={args.error}>
+        <Fieldset aria-describedby={[`${args.hintId} ${args.errorId}`]}>
+          <FieldsetLegend
+            size={args.legendSize}
+            heading={args.singleQuestionInPage}
+          >
+            {args.legend}
+          </FieldsetLegend>
+          {args.hint && <Hint id={args.hintId}>{args.hintMessage}</Hint>}
+          {args.error && (
+            <ErrorMessage id={args.errorId}>
+              <VisuallyHidden>Λάθος:</VisuallyHidden>
+              {args.errorMessage}
+            </ErrorMessage>
+          )}
+          <Checkbox layout={args.layout} dense={args.dense}>
+            {args.items.map((item) => (
+              <CheckboxItem
+                key={item.value}
+                name={args.fieldsetName}
+                value={item.value}
+                dividerText={item.dividerText}
+              >
+                {item.label}
+              </CheckboxItem>
+            ))}
+          </Checkbox>
+        </Fieldset>
+      </FieldContainer>
+    );
+  },
+  args: {
+    legend: 'Πώς αισθάνεται αυτή τη στιγμή;',
+    legendSize: 'lg',
+    singleQuestionInPage: true,
+    fieldsetName: 'feeling',
+    hint: true,
+    hintMessage:
+      'Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.',
+    hintId: 'feeling-hint',
+    error: false,
+    errorMessage: 'Επιλέξτε μία ή παραπάνω επιλογές.',
+    errorId: 'feeling-error',
+    layout: 'vertical',
+    dense: false,
+    items: [
+      {
+        value: 'cold',
+        label: 'Έχω συνάχι',
+        dividerText: undefined,
+      },
+      {
+        value: 'fever',
+        label: 'Έχω πυρετό',
+        dividerText: undefined,
+      },
+      {
+        value: 'good',
+        label: 'Αισθάνομαι καλά',
+        dividerText: 'ή',
+      },
+    ],
+  },
+  argTypes: {
+    legend: {
+      control: { type: 'text' },
+    },
+    legendSize: {
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'radio' },
+    },
+    singleQuestionInPage: {
+      control: { type: 'boolean' },
+    },
+    fieldsetName: {
+      control: { type: 'text' },
+    },
+    hint: {
+      control: { type: 'boolean' },
+    },
+    hintMessage: {
+      control: { type: 'text' },
+      if: { arg: 'hint', eq: true },
+    },
+    hintId: {
+      control: { type: 'text' },
+      if: { arg: 'hint', eq: true },
+    },
+    error: {
+      control: { type: 'boolean' },
+    },
+    errorMessage: {
+      control: { type: 'text' },
+      if: { arg: 'error', eq: true },
+    },
+    errorId: {
+      control: { type: 'text' },
+      if: { arg: 'error', eq: true },
+    },
+    layout: {
+      options: ['horizontal', 'vertical'],
+      control: { type: 'radio' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
+    items: {
+      control: { type: 'array' },
+    },
+  },
+  parameters: {
+    controls: {
+      exclude: ['ref'],
+    },
+  },
+};
+
+export { Default } from '@digigov/ui/form/Checkbox/__stories__/Default';
+export { Inline } from '@digigov/ui/form/Checkbox/__stories__/Inline';
+export { InlineWithDivider } from '@digigov/ui/form/Checkbox/__stories__/InlineWithDivider';
+export { MultipleQuestions } from '@digigov/ui/form/Checkbox/__stories__/MultipleQuestions';
+export { WithHint } from '@digigov/ui/form/Checkbox/__stories__/WithHint';
+export { NoneAnswer } from '@digigov/ui/form/Checkbox/__stories__/NoneAnswer';
+export { NoneAnswerWithError } from '@digigov/ui/form/Checkbox/__stories__/NoneAnswerWithError';
+export { WithErrorMessage } from '@digigov/ui/form/Checkbox/__stories__/WithErrorMessage';
+export { ConditionalReveal } from '@digigov/ui/form/Checkbox/__stories__/ConditionalReveal';
+export { Dense } from '@digigov/ui/form/Checkbox/__stories__/Dense';

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

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

@@ -10,6 +10,10 @@ test('renders the MultipleQuestions check first box', async ({
 }) => {
   await mount(<MultipleQuestions />);
   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 page
     .locator('#root>div>fieldset>div>div:nth-child(1)>label>input')
     .click();
@@ -23,6 +27,10 @@ test('renders the MultipleQuestions check first box', async ({
 test('renders the WithHint click first option', async ({ mount, page }) => {
   await mount(<WithHint />);
   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 page
     .locator('#root>div>fieldset>div>div:nth-child(1)>label>input')
     .click();