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

package/src/form/DateInputContainer/DateInputContainer.stories.jsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import {
+  DateInputContainer,
+  DateInputItem,
+} from '@digigov/ui/form/DateInputContainer';
+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/DateInputContainer',
+  description:
+    'Use the date input component to help users enter a memorable date or one they can easily look up.',
+  link: 'https://guide.services.gov.gr/docs/components/date-input',
+  component: DateInputContainer,
+  displayName: 'DateInputContainer',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <FieldContainer error={args.error}>
+        <Fieldset aria-describedby={[`${args.hintId} ${args.errorId}`]}>
+          <FieldsetLegend
+            heading={args.singleQuestionInPage}
+            size={args.singleQuestionInPage ? 'sm' : 'lg'}
+          >
+            {args.legend}
+          </FieldsetLegend>
+          {args.hint && <Hint id={args.hintId}>{args.hintMessage}</Hint>}
+          {args.error && (
+            <ErrorMessage id={args.errorId}>
+              <VisuallyHidden>Λάθος:</VisuallyHidden>
+              {args.errorMessage}
+            </ErrorMessage>
+          )}
+          <DateInputContainer aria-describedby={args.id} dense={args.dense}>
+            <DateInputItem name="day">{args.day}</DateInputItem>
+            <DateInputItem name="month">{args.month}</DateInputItem>
+            <DateInputItem width={4} name="year" error={args.error}>
+              {args.year}
+            </DateInputItem>
+          </DateInputContainer>
+        </Fieldset>
+      </FieldContainer>
+    );
+  },
+  args: {
+    singleQuestionInPage: true,
+    legend: 'Πότε εκδόθηκε το διαβατήριό σας;',
+    hint: true,
+    hintMessage: 'Για παράδειγμα, 05 11 2020',
+    hintId: 'passport-hint',
+    day: 'Ημέρα',
+    month: 'Μήνας',
+    year: 'Έτος',
+    error: false,
+    errorMessage: 'Παρακαλώ εισάγετε μια έγκυρη ημερομηνία',
+    errorId: 'passport-error',
+    dense: false,
+  },
+  argTypes: {
+    singleQuestionInPage: {
+      control: { type: 'boolean' },
+    },
+    legend: {
+      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 },
+    },
+    day: {
+      control: { type: 'text' },
+    },
+    month: {
+      control: { type: 'text' },
+    },
+    year: {
+      control: { type: 'text' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
+    error: {
+      control: { type: 'boolean' },
+    },
+    errorMessage: {
+      control: { type: 'text' },
+      if: { arg: 'error', eq: true },
+    },
+    errorId: {
+      control: { type: 'text' },
+      if: { arg: 'error', eq: true },
+    },
+  },
+};
+
+export { Default } from '@digigov/ui/form/DateInputContainer/__stories__/Default';
+export { MultipleQuestions } from '@digigov/ui/form/DateInputContainer/__stories__/MultipleQuestions';
+export { WithErrorMessage } from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessage';
+export { WithErrorMessageForSingleField } from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessageForSingleField';
+export { Dense } from '@digigov/ui/form/DateInputContainer/__stories__/Dense';

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

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

@@ -7,6 +7,10 @@ import { WithErrorMessageForSingleField } from '@digigov/ui/form/DateInputContai
 test('renders the Default Actions with mouse', 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>fieldset>div>div:nth-child(1)>label>input')
     .click();
@@ -25,6 +29,10 @@ test('renders the WithErrorMessageForSingleField Actions with keyboard', async (
 }) => {
   await mount(<WithErrorMessageForSingleField />);
   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');
   await page.keyboard.press('Tab');

package/src/form/ErrorMessage/ErrorMessage.stories.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import ErrorMessage from '@digigov/ui/form/ErrorMessage';
+import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+
+export default {
+  title: 'Digigov UI/form/ErrorMessage',
+  description:
+    'Show an error message next to the field and in the error summary when there is a validation error.',
+  link: 'https://guide.services.gov.gr/docs/components/error-message',
+  component: ErrorMessage,
+  displayName: 'ErrorMessage',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <ErrorMessage id={args.id}>
+        <VisuallyHidden>{args.visuallyHiddenMessage}</VisuallyHidden>
+        {args.errorMessage}
+      </ErrorMessage>
+    );
+  },
+  args: {
+    id: 'date-of-birth-error',
+    errorMessage: 'H ημερομηνία γέννησης πρέπει να είναι στο παρελθόν.',
+    visuallyHiddenMessage: 'Λάθος:',
+  },
+  argTypes: {
+    id: {
+      control: { type: 'text' },
+    },
+    errorMessage: {
+      control: { type: 'text' },
+    },
+    visuallyHiddenMessage: {
+      control: { type: 'text' },
+    },
+  },
+};
+export { Default } from '@digigov/ui/form/ErrorMessage/__stories__/Default';
+export { DateInputError } from '@digigov/ui/form/ErrorMessage/__stories__/DateInputError';
+export { ErrorMessageOnly } from '@digigov/ui/form/ErrorMessage/__stories__/ErrorMessageOnly';

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

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

@@ -18,6 +18,10 @@ test('renders the All FileUpload 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/RadioContainer/RadioContainer.stories.jsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import { RadioContainer, RadioItem } from '@digigov/ui/form/RadioContainer';
+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/RadioContainer',
+  description:
+    'Use the radios component when users can only select one option from a list.',
+  link: 'https://guide.services.gov.gr/docs/components/radio',
+  component: RadioContainer,
+  displayName: 'RadioContainer',
+};
+
+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>
+          )}
+          <RadioContainer dense={args.dense} layout={args.layout}>
+            {args.items &&
+              args.items.map((item) => (
+                <RadioItem
+                  key={item.value}
+                  name={args.fieldsetName}
+                  value={item}
+                  dividerText={item.dividerText}
+                  aria-describedby={item.hintId}
+                >
+                  {item.label}
+                  {item.hint && (
+                    <Hint id={item.hintId}>{item.hintMessage}</Hint>
+                  )}
+                </RadioItem>
+              ))}
+          </RadioContainer>
+        </Fieldset>
+      </FieldContainer>
+    );
+  },
+  args: {
+    legend: 'Πώς θέλετε να συνδεθείτε;',
+    legendSize: 'lg',
+    singleQuestionInPage: true,
+    fieldsetName: 'login-method',
+    hint: true,
+    hintMessage:
+      'Θα χρειαστείτε έναν λογαριασμό με τον οποίο θα αποδείξετε την ταυτότητά σας ώστε να προχωρήσετε.',
+    hintId: 'hint-id',
+    error: false,
+    errorMessage: 'Παρακαλώ επιλέξτε μία από τις παρακάτω επιλογές.',
+    errorId: 'error-id',
+    layout: 'vertical',
+    dense: false,
+    items: [
+      {
+        value: 'taxis',
+        label: 'Σύνδεση με Taxisnet',
+        hint: true,
+        hintMessage:
+          'Θα πρέπει να έχετε τους κωδικούς Taxisnet για να συνθείτε.',
+        hintId: 'hint-id-1',
+        dividerText: '',
+      },
+      {
+        value: 'banking',
+        label: 'Σύνδεση με λογαρισμό e-banking',
+        hint: true,
+        hintMessage:
+          'Θα πρέπει να έχετε τους κωδικούς του e-banking της τράπεζας για να συνδεθείτε.',
+        hintId: 'hint-id-2',
+      },
+      {
+        value: 'none',
+        label: 'Χωρίς σύνδεση',
+        dividerText: 'ή',
+      },
+    ],
+  },
+  argTypes: {
+    legend: {
+      control: { type: 'text' },
+    },
+    legendSize: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+    },
+    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: {
+      control: { type: 'inline-radio' },
+      options: ['vertical', 'horizontal'],
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
+    items: {
+      control: { type: 'object' },
+    },
+  },
+};
+
+export { Default } from '@digigov/ui/form/RadioContainer/__stories__/Default';
+export { WithMediumLegend } from '@digigov/ui/form/RadioContainer/__stories__/WithMediumLegend';
+export { MultipleQuestions } from '@digigov/ui/form/RadioContainer/__stories__/MultipleQuestions';
+export { Inline } from '@digigov/ui/form/RadioContainer/__stories__/Inline';
+export { WithHints } from '@digigov/ui/form/RadioContainer/__stories__/WithHints';
+export { NoneAnswer } from '@digigov/ui/form/RadioContainer/__stories__/NoneAnswer';
+export { WithErrorMessage } from '@digigov/ui/form/RadioContainer/__stories__/WithErrorMessage';
+export { ConditionalReveal } from '@digigov/ui/form/RadioContainer/__stories__/ConditionalReveal';
+export { InlineWithDivider } from '@digigov/ui/form/RadioContainer/__stories__/InlineWithDivider';
+export { Dense } from '@digigov/ui/form/RadioContainer/__stories__/Dense';

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

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

@@ -7,6 +7,10 @@ import { WithHints } from '@digigov/ui/form/RadioContainer/__stories__/WithHints
 test('renders the Default Navigate with keyboard', 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');
   await page.keyboard.press('Space');
   await page.keyboard.press('ArrowDown');
@@ -21,6 +25,10 @@ test('renders the Default Navigate with keyboard', async ({ mount, page }) => {
 test('renders the WithHints Click first', async ({ mount, page }) => {
   await mount(<WithHints />);
   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();

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

@@ -14,6 +14,10 @@ test('renders the All SearchContainer 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/SelectContainer/SelectContainer.stories.jsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import {
+  SelectContainer,
+  SelectOption,
+} from '@digigov/ui/form/SelectContainer';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer } from '@digigov/ui/form/LabelContainer';
+import { Hint } from '@digigov/ui/typography';
+import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
+
+export default {
+  title: 'Digigov UI/form/SelectContainer',
+  description:
+    'The select component should only be used as a last resort in public-facing services because research shows that some users find selects very difficult to use.',
+  link: 'https://guide.services.gov.gr/docs/components/select',
+  component: SelectContainer,
+  displayName: 'SelectContainer',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <FieldContainer error={args.error}>
+        <LabelContainer>
+          {args.label}
+          {args.hint && <Hint id={args.hintId}>{args.hintMessage}</Hint>}
+          {args.error && (
+            <ErrorMessage id={args.errorId}>{args.errorMessage}</ErrorMessage>
+          )}
+          <SelectContainer
+            dense={args.dense}
+            name={args.selectName}
+            aria-label={args.ariaLabel}
+          >
+            {args.options.map((option) => (
+              <SelectOption key={option.value} value={option.value}>
+                {option.label}
+              </SelectOption>
+            ))}
+          </SelectContainer>
+        </LabelContainer>
+      </FieldContainer>
+    );
+  },
+  args: {
+    label: 'Ταξινόμηση',
+    selectName: 'select-list',
+    ariaLabel: 'ταξινόμηση',
+    hint: false,
+    hintMessage: 'Επιλέξτε τον τρόπο που θα ταξινομηθούν τα αποτελέσματα',
+    hintId: 'hintId',
+    error: false,
+    errorMessage: 'Πρέπει να επιλέξετε μία επιλογή',
+    errorId: 'errorId',
+    dense: false,
+    options: [
+      { label: 'Δημοφιλή', value: 'popular' },
+      { label: 'Πρόσφατα', value: 'recent' },
+      { label: 'Περισσότερες προβολές', value: 'views' },
+      { label: 'Περισσότερα σχόλια', value: 'comments' },
+    ],
+  },
+  argTypes: {
+    label: {
+      control: { type: 'text' },
+    },
+    selectName: {
+      control: { type: 'text' },
+    },
+    ariaLabel: {
+      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 },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
+    options: {
+      control: { type: 'object' },
+    },
+  },
+};
+
+export { Default } from '@digigov/ui/form/SelectContainer/__stories__/Default';
+export { DisabledInput } from '@digigov/ui/form/SelectContainer/__stories__/DisabledInput';
+export { WithHint } from '@digigov/ui/form/SelectContainer/__stories__/WithHint';
+export { Dense } from '@digigov/ui/form/SelectContainer/__stories__/Dense';

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

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

@@ -9,6 +9,10 @@ test('renders the Default SelectContainer with mouse', async ({
 }) => {
   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>label>select').click();
   const screenshot = await page.screenshot({
     fullPage: true,

package/src/form/SingleCharacterInputs/SingleCharacterInput.stories.jsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/form/FieldContainer';
+import {
+  SingleCharacterInputs,
+  SingleCharacterInput,
+} from '@digigov/ui/form/SingleCharacterInputs';
+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/SingleCharacterInputs',
+  description:
+    'Use the One-time password input component to help users enter a memorable digital character for One-time password.',
+  link: 'https://guide.services.gov.gr/docs/patterns/one-time-password',
+  component: SingleCharacterInputs,
+  displayName: 'SingleCharacterInputs',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <FieldContainer error={args.error}>
+        <Fieldset aria-describedby={[`${args.hintId} ${args.errorId}`]}>
+          <FieldsetLegend 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>
+          )}
+          <SingleCharacterInputs>
+            {args.items.map((item) => (
+              <SingleCharacterInput
+                key={item.value}
+                name={item.value}
+                defaultValue={item.defaultValue}
+                error={item.error}
+              />
+            ))}
+          </SingleCharacterInputs>
+        </Fieldset>
+      </FieldContainer>
+    );
+  },
+  args: {
+    singleQuestionInPage: false,
+    legend: 'Κωδικός Επιβεβαίωσης',
+    hint: true,
+    hintMessage:
+      'Εισάγετε τον μοναδικό κωδικό που λάβατε στο ηλεκτρονικό σας ταχυδρομείο.',
+    hintId: 'code-hint',
+    error: false,
+    errorMessage: 'Ο κωδικός που εισάγατε είναι λανθασμένος',
+    errorId: 'code-error',
+    items: [
+      {
+        defaultValue: '',
+        name: 'digit-1',
+        error: false,
+      },
+      {
+        defaultValue: '',
+        name: 'digit-2',
+        error: false,
+      },
+      {
+        defaultValue: '',
+        name: 'digit-3',
+        error: false,
+      },
+      {
+        defaultValue: '',
+        name: 'digit-4',
+        error: false,
+      },
+      {
+        defaultValue: '',
+        name: 'digit-5',
+        error: false,
+      },
+    ],
+  },
+  argTypes: {
+    singleQuestionInPage: {
+      control: { type: 'boolean' },
+    },
+    legend: {
+      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 },
+    },
+    items: {
+      control: { type: 'object' },
+    },
+  },
+  parameters: {
+    controls: {
+      exclude: ['ref'],
+    },
+  },
+};
+
+export { Default } from '@digigov/ui/form/SingleCharacterInputs/__stories__/Default';
+export { WithDefaultError } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError';
+export { WithErrorMessageInvalidCode } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageInvalidCode';
+export { WithErrorMessageLessDigit } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageLessDigit';