@digigov/ui 2.0.0-85c27c19 → 2.0.0-87b6232d

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/__stories__/MultipleQuestions.tsx

@@ -16,7 +16,7 @@ import { Hint } from '@digigov/ui/typography/Hint';
 export const MultipleQuestions = () => (
   <FieldContainer aria-describedby="passport-hint">
     <Fieldset>
-      <FieldsetLegend size="md">
+      <FieldsetLegend size="sm">
         Πότε εκδόθηκε το διαβατήριό σας;
       </FieldsetLegend>
       <Hint id="passport-hint">Για παράδειγμα, 05 11 2020</Hint>

package/src/form/DateInputContainer/{index.mdx → doc.mdx}

@@ -7,37 +7,23 @@ title: DateInputContainer
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/DateInputContainer"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/form/DateInputContainer/__stories__/Default.tsx" />
 
-### If you’re asking more than one question on the page
+### For multiple questions
 
-<Story
-  packageName="@digigov/ui"
-  component="form/DateInputContainer"
-  story="MultipleQuestions.tsx"
-/>
+If you’re asking more than one question on the page, you can display the question's title using `<FieldsetLegend size="sm">`.
+
+<code src="@digigov/ui/form/DateInputContainer/__stories__/MultipleQuestions.tsx" />
 
 ### Error message
 
 If you’re highlighting the whole date, style all the fields like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/DateInputContainer"
-  story="WithErrorMessage.tsx"
-/>
+<code src="@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessage.tsx" />
 
 If you’re highlighting just one field - either the day, month or year - only style the field that has an error. The error message must say which field has an error, like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/DateInputContainer"
-  story="WithErrorMessageForSingleField.tsx"
-/>
+<code src="@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessageForSingleField.tsx" />
 
 ## API
 

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

@@ -2,16 +2,45 @@ import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 
 import { Default } from '@digigov/ui/form/DateInputContainer/__stories__/Default';
+import { WithErrorMessageForSingleField } from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessageForSingleField';
 
 test('renders the Default Actions with mouse', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>fieldset>div>div:nth-child(1)>label>input").click();
- await page.keyboard.insertText("undefined");
 
-  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>fieldset>div>div:nth-child(1)>label>input')
+    .click();
+  await page.keyboard.insertText('11');
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});
+
+test('renders the WithErrorMessageForSingleField Actions with keyboard', async ({
+  mount,
+  page,
+}) => {
+  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');
+  await page.keyboard.insertText('2022');
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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.mdx → doc.mdx}

@@ -10,11 +10,7 @@ In the error message explain what went wrong and how to fix it.
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/ErrorMessage"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/form/ErrorMessage/__stories__/Default.tsx" />
 
 ## API
 

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/FileUpload.stories.js

@@ -7,3 +7,4 @@ export default {
 };
 export { Default } from '@digigov/ui/form/FileUpload/__stories__/Default';
 export { WithErrorMessage } from '@digigov/ui/form/FileUpload/__stories__/WithErrorMessage';
+export { WithVariantLink } from '@digigov/ui/form/FileUpload/__stories__/WithVariantLink';

package/src/form/FileUpload/__stories__/WithVariantLink.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/form/FieldContainer';
+
+import { FileUpload } from '@digigov/ui/form/FileUpload';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const WithVariantLink = () => (
+  <FieldContainer>
+    <Fieldset>
+      <FieldsetLegend size="md">Λογότυπο επιχείρησης</FieldsetLegend>
+      <Hint id="file-hint">Το αρχείο μπορεί να είναι png ή jpeg.</Hint>
+      <FileUpload aria-describedby="file-hint" variant="link">
+        Επιλογή αρχείου
+      </FileUpload>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default WithVariantLink;

package/src/form/FileUpload/{index.mdx → doc.mdx}

@@ -7,21 +7,13 @@ title: FileUpload
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/FileUpload"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/form/FileUpload/__stories__/Default.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/FileUpload"
-  story="WithErrorMessage.tsx"
-/>
+<code src="@digigov/ui/form/FileUpload/__stories__/WithErrorMessage.tsx" />
 
 ## API
 

package/src/form/FileUpload/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/form/FileUpload/__stories__/Default';
 import { WithErrorMessage } from '@digigov/ui/form/FileUpload/__stories__/WithErrorMessage';
+import { WithVariantLink } from '@digigov/ui/form/FileUpload/__stories__/WithVariantLink';
 
 test('renders the All FileUpload variants', async ({ mount, page }) => {
   await mount(
@@ -14,10 +15,17 @@ test('renders the All FileUpload variants', async ({ mount, page }) => {
     <TestVariant title="WithErrorMessage">
       <WithErrorMessage />
     </TestVariant>
+    <TestVariant title="WithVariantLink">
+      <WithVariantLink />
+    </TestVariant>
   </div>
   )
   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.mdx → doc.mdx}

@@ -7,48 +7,30 @@ title: RadioContainer
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/form/RadioContainer/__stories__/Default.tsx" />
 
-### If you’re asking more than one question on the page
+### For multiple questions
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="MultipleQuestions.tsx"
-/>
+If you’re asking more than one question on the page, you can display the question's title using `<FieldsetLegend size="sm">`.
+
+<code src="@digigov/ui/form/RadioContainer/__stories__/MultipleQuestions.tsx" />
 
 ### Inline radios
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="Inline.tsx"
-/>
+<code src="@digigov/ui/form/RadioContainer/__stories__/Inline.tsx" />
 
 ### Checkbox items with hints
 
 You can add hints to checkbox items to provide additional information about the options.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="WithHints.tsx"
-/>
+<code src="@digigov/ui/form/RadioContainer/__stories__/WithHints.tsx" />
 
 ### RadioContainer items with a text divider
 
 If one or more of your radio options is different from the others, it can help users if you separate them using a text divider.
 The text is usually the word ‘or’.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="NoneAnswer.tsx"
-/>
+<code src="@digigov/ui/form/RadioContainer/__stories__/NoneAnswer.tsx" />
 
 ## Conditionally revealing a related question
 
@@ -56,21 +38,13 @@ You can ask the user a related question when they select a particular checkbox,
 
 This might make 2 related questions easier to answer by grouping them on the same page. For example, you could reveal a phone number input when the user selects the ‘Contact me by phone’ option.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="ConditionalReveal.tsx"
-/>
+<code src="@digigov/ui/form/RadioContainer/__stories__/ConditionalReveal.tsx" />
 
 ### Error messages
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="WithErrorMessage.tsx"
-/>
+<code src="@digigov/ui/form/RadioContainer/__stories__/WithErrorMessage.tsx" />
 
 ## Accessibility
 

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