npm - @digigov/ui - Versions diffs - 2.0.0-85c27c19 → 2.0.0-87b6232d - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1438) hide show

package/src/form/Button/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -1,17 +1,13 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the button 1`] = `
-<ForwardRef(Button)>
-  <ForwardRef(Base)
-    as="button"
-    className="ds-btn-primary ds-btn"
-    printHidden={true}
-  >
+<body>
+  <div>
     <button
-      className="ds-btn-primary ds-btn ds-print-hidden"
+      class="ds-print-hidden ds-btn ds-btn-primary"
     >
       hello
     </button>
-  </ForwardRef(Base)>
-</ForwardRef(Button)>
+  </div>
+</body>
 `;

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

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

@@ -14,57 +14,41 @@ application or saving their information.
 Use a default button for the main call to action on a page.
-<Story packageName="@digigov/ui" component="form/Button" story="Primary.tsx" />
+<code src="@digigov/ui/form/Button/__stories__/Primary.tsx" />
 ### Start buttons
 Use a start button for the main call to action on your service’s start page. Start buttons do not submit form data, so they use a link tag rather than a button tag.
-<Story
-  packageName="@digigov/ui"
-  component="form/Button"
-  story="CallToActionButton.tsx"
-/>
+<code src="@digigov/ui/form/Button/__stories__/CallToActionButton.tsx" />
 ### Secondary buttons
 Use secondary buttons for secondary calls to action on a page.
-<Story
-  packageName="@digigov/ui"
-  component="form/Button"
-  story="Secondary.tsx"
-/>
+<code src="@digigov/ui/form/Button/__stories__/Secondary.tsx" />
 ### Warning buttons
 Warning buttons are designed to make users think carefully before they use them. They only work if used very sparingly. Most services should not need one.
-<Story packageName="@digigov/ui" component="form/Button" story="Warning.tsx" />
+<code src="@digigov/ui/form/Button/__stories__/Warning.tsx" />
 ### Disable buttons
 Disabled buttons have poor contrast and can confuse some users, so avoid them if possible.
-<Story packageName="@digigov/ui" component="form/Button" story="Disabled.tsx" />
+<code src="@digigov/ui/form/Button/__stories__/Disabled.tsx" />
 ### Grouping buttons
 Use a button group when two or more buttons are placed together.
-<Story
-  packageName="@digigov/ui"
-  component="form/Button"
-  story="GroupingButtons.tsx"
-/>
+<code src="@digigov/ui/form/Button/__stories__/GroupingButtons.tsx" />
 Any links within a button group will automatically align with the buttons.
-<Story
-  packageName="@digigov/ui"
-  component="form/Button"
-  story="GroupingButtonsAndLinks.tsx"
-/>
+<code src="@digigov/ui/form/Button/__stories__/GroupingButtonsAndLinks.tsx" />
 Write button text in sentence case, describing the action it performs. For
 example:
@@ -91,14 +75,12 @@ Align the primary action button to the left edge of your form.
 Use a default button for the main call to action on a page.
+<code src="@digigov/ui/form/Button/__stories__/Primary.tsx" />
 Avoid using multiple default buttons on a single page. Having more than on main
 call to action reduces their impact, and makes it harder for users to know what
 to do next.
-## API Docs
-Read more about [how to use the React types](/docs/api/Button).
 ## Accessibility
 You can read more about the accessibility patterns used in our Button
@@ -106,6 +88,9 @@ implementation in the ARIA Authoring Practices Guide (APG) at [button](https://w
 ## API
+Read more about [how to use the React types](/docs/api/Button).
 See below for a complete reference to all of the props  available to the components mentioned here.
 <ComponentProps componentName={["Button","ButtonLink","CallToAction","ButtonGroup"]} />

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

@@ -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 CHANGED Viewed

@@ -1,60 +1,94 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
+import { GroupingButtonsAndLinks } from '@digigov/ui/form/Button/__stories__/GroupingButtonsAndLinks';
 import { Primary } from '@digigov/ui/form/Button/__stories__/Primary';
 import { Secondary } from '@digigov/ui/form/Button/__stories__/Secondary';
 import { ThemeToggle } from '@digigov/ui/form/Button/__stories__/ThemeToggle';
 import { Warning } from '@digigov/ui/form/Button/__stories__/Warning';
-test('renders the Primary Hover and click', async ({ mount, page }) => {
-  await mount(
-    <Primary />
-  )
+test('renders the GroupingButtonsAndLinks Keyboard navigation', async ({
+  mount,
+  page,
+}) => {
+  await mount(<GroupingButtonsAndLinks />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>button").hover();
- await page.locator("#root>button").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.keyboard.press('Tab');
+  await page.keyboard.press('Tab');
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
+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();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});
 test('renders the Secondary Hover and click', async ({ mount, page }) => {
-  await mount(
-    <Secondary />
-  )
+  await mount(<Secondary />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>button").hover();
- await page.locator("#root>button").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>button').hover();
+  await page.locator('#root>button').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
 test('renders the ThemeToggle change theme', async ({ mount, page }) => {
-  await mount(
-    <ThemeToggle />
-  )
+  await mount(<ThemeToggle />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>button").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>button').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
 test('renders the Warning Hover and click', async ({ mount, page }) => {
-  await mount(
-    <Warning />
-  )
+  await mount(<Warning />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>button").hover();
- await page.locator("#root>button").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>button').hover();
+  await page.locator('#root>button').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });

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

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

@@ -7,57 +7,35 @@ title: Checkbox
 ## How to use
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/form/Checkbox/__stories__/Default.tsx" />
-### If you’re asking more than one question on the page
+### For multiple questions
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  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/Checkbox/__stories__/MultipleQuestions.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/Checkbox"
-  story="WithHint.tsx"
-/>
+<code src="@digigov/ui/form/Checkbox/__stories__/WithHint.tsx" />
 ### Add an option for ‘none’
 When ‘none’ would be a valid answer, give users the option to check a box to say none of the other options apply to them — without this option, users would have to leave all of the boxes unchecked. Giving users this option also makes sure they do not skip the question by accident.
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="NoneAnswer.tsx"
-/>
+<code src="@digigov/ui/form/Checkbox/__stories__/NoneAnswer.tsx" />
 If JavaScript is unavailable, and a user selects both the ‘none’ checkbox and another checkbox, display an error message.
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="NoneAnswerWithError.tsx"
-/>
+<code src="@digigov/ui/form/Checkbox/__stories__/NoneAnswerWithError.tsx" />
 ### Error messages
 Error messages should be styled like this:
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="WithErrorMessage.tsx"
-/>
+<code src="@digigov/ui/form/Checkbox/__stories__/WithErrorMessage.tsx" />
 ## Conditionally revealing a related question
@@ -65,11 +43,7 @@ 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/Checkbox"
-  story="ConditionalReveal.tsx"
-/>
+<code src="@digigov/ui/form/Checkbox/__stories__/ConditionalReveal.tsx" />
 ## Accessibility

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

@@ -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/index.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 export * from '@digigov/react-core/Checkbox';
 export * from '@digigov/react-core/CheckboxItem';
+export * from '@digigov/react-core/CheckboxItemInput';
 export * from '@digigov/react-core/CheckboxConditional';
 import Checkbox from '@digigov/react-core/Checkbox';
 export default Checkbox;

package/src/form/Checkbox/interaction.test.tsx CHANGED Viewed

@@ -4,29 +4,45 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import { MultipleQuestions } from '@digigov/ui/form/Checkbox/__stories__/MultipleQuestions';
 import { WithHint } from '@digigov/ui/form/Checkbox/__stories__/WithHint';
-test('renders the MultipleQuestions check first box', async ({ mount, page }) => {
-  await mount(
-    <MultipleQuestions />
-  )
+test('renders the MultipleQuestions check first box', async ({
+  mount,
+  page,
+}) => {
+  await mount(<MultipleQuestions />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>fieldset>div>div:nth-child(1)>label>input").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>fieldset>div>div:nth-child(1)>label>input')
+    .click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
 test('renders the WithHint click first option', async ({ mount, page }) => {
-  await mount(
-    <WithHint />
-  )
+  await mount(<WithHint />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>fieldset>div>div:nth-child(1)>label>input").click();
- await page.locator("#root>div>fieldset>div>div:nth-child(2)>label>input").click();
- await page.keyboard.press("Tab");
- await page.keyboard.press("Space");
-  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
+    .locator('#root>div>fieldset>div>div:nth-child(2)>label>input')
+    .click();
+  await page.keyboard.press('Tab');
+  await page.keyboard.press('Space');
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });