@digigov/ui 2.0.0-85c27c19 → 2.0.0-aefd0709

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

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Back } from '@digigov/ui/form/Button/__stories__/Back';
 import { ButtonLinkButton } from '@digigov/ui/form/Button/__stories__/ButtonLinkButton';
 import { CallToActionButton } from '@digigov/ui/form/Button/__stories__/CallToActionButton';
@@ -13,52 +12,54 @@ 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';
 import { WithVariantLink } from '@digigov/ui/form/Button/__stories__/WithVariantLink';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Button variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Back">
-      <Back />
-    </TestVariant>
-    <TestVariant title="ButtonLinkButton">
-      <ButtonLinkButton />
-    </TestVariant>
-    <TestVariant title="CallToActionButton">
-      <CallToActionButton />
-    </TestVariant>
-    <TestVariant title="Dense">
-      <Dense />
-    </TestVariant>
-    <TestVariant title="Disabled">
-      <Disabled />
-    </TestVariant>
-    <TestVariant title="GroupingButtons">
-      <GroupingButtons />
-    </TestVariant>
-    <TestVariant title="GroupingButtonsAndLinks">
-      <GroupingButtonsAndLinks />
-    </TestVariant>
-    <TestVariant title="Primary">
-      <Primary />
-    </TestVariant>
-    <TestVariant title="Secondary">
-      <Secondary />
-    </TestVariant>
-    <TestVariant title="ThemeToggle">
-      <ThemeToggle />
-    </TestVariant>
-    <TestVariant title="Warning">
-      <Warning />
-    </TestVariant>
-    <TestVariant title="WithVariantLink">
-      <WithVariantLink />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Back">
+        <Back />
+      </TestVariant>
+      <TestVariant title="ButtonLinkButton">
+        <ButtonLinkButton />
+      </TestVariant>
+      <TestVariant title="CallToActionButton">
+        <CallToActionButton />
+      </TestVariant>
+      <TestVariant title="Dense">
+        <Dense />
+      </TestVariant>
+      <TestVariant title="Disabled">
+        <Disabled />
+      </TestVariant>
+      <TestVariant title="GroupingButtons">
+        <GroupingButtons />
+      </TestVariant>
+      <TestVariant title="GroupingButtonsAndLinks">
+        <GroupingButtonsAndLinks />
+      </TestVariant>
+      <TestVariant title="Primary">
+        <Primary />
+      </TestVariant>
+      <TestVariant title="Secondary">
+        <Secondary />
+      </TestVariant>
+      <TestVariant title="ThemeToggle">
+        <ThemeToggle />
+      </TestVariant>
+      <TestVariant title="Warning">
+        <Warning />
+      </TestVariant>
+      <TestVariant title="WithVariantLink">
+        <WithVariantLink />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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

@@ -1,60 +1,74 @@
 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();
+  await page.keyboard.press('Tab');
+  await page.keyboard.press('Tab');
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  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);
+  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();
+  await page.locator('#root>button').hover();
+  await page.locator('#root>button').click();
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  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' });
+  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();
+  await page.locator('#root>button').hover();
+  await page.locator('#root>button').click();
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { ConditionalReveal } from '@digigov/ui/form/Checkbox/__stories__/ConditionalReveal';
 import { Default } from '@digigov/ui/form/Checkbox/__stories__/Default';
 import { Dense } from '@digigov/ui/form/Checkbox/__stories__/Dense';
@@ -11,46 +10,48 @@ import { NoneAnswer } from '@digigov/ui/form/Checkbox/__stories__/NoneAnswer';
 import { NoneAnswerWithError } from '@digigov/ui/form/Checkbox/__stories__/NoneAnswerWithError';
 import { WithErrorMessage } from '@digigov/ui/form/Checkbox/__stories__/WithErrorMessage';
 import { WithHint } from '@digigov/ui/form/Checkbox/__stories__/WithHint';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Checkbox variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="ConditionalReveal">
-      <ConditionalReveal />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="Dense">
-      <Dense />
-    </TestVariant>
-    <TestVariant title="Inline">
-      <Inline />
-    </TestVariant>
-    <TestVariant title="InlineWithDivider">
-      <InlineWithDivider />
-    </TestVariant>
-    <TestVariant title="MultipleQuestions">
-      <MultipleQuestions />
-    </TestVariant>
-    <TestVariant title="NoneAnswer">
-      <NoneAnswer />
-    </TestVariant>
-    <TestVariant title="NoneAnswerWithError">
-      <NoneAnswerWithError />
-    </TestVariant>
-    <TestVariant title="WithErrorMessage">
-      <WithErrorMessage />
-    </TestVariant>
-    <TestVariant title="WithHint">
-      <WithHint />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="ConditionalReveal">
+        <ConditionalReveal />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="Dense">
+        <Dense />
+      </TestVariant>
+      <TestVariant title="Inline">
+        <Inline />
+      </TestVariant>
+      <TestVariant title="InlineWithDivider">
+        <InlineWithDivider />
+      </TestVariant>
+      <TestVariant title="MultipleQuestions">
+        <MultipleQuestions />
+      </TestVariant>
+      <TestVariant title="NoneAnswer">
+        <NoneAnswer />
+      </TestVariant>
+      <TestVariant title="NoneAnswerWithError">
+        <NoneAnswerWithError />
+      </TestVariant>
+      <TestVariant title="WithErrorMessage">
+        <WithErrorMessage />
+      </TestVariant>
+      <TestVariant title="WithHint">
+        <WithHint />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/form/Checkbox/index.tsx

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

@@ -4,29 +4,37 @@ 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' });
+  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");
+  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' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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

@@ -1,36 +1,37 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/ui/form/DateInputContainer/__stories__/Default';
 import { Dense } from '@digigov/ui/form/DateInputContainer/__stories__/Dense';
 import { MultipleQuestions } from '@digigov/ui/form/DateInputContainer/__stories__/MultipleQuestions';
 import { WithErrorMessage } from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessage';
 import { WithErrorMessageForSingleField } from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessageForSingleField';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All DateInputContainer variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="Dense">
-      <Dense />
-    </TestVariant>
-    <TestVariant title="MultipleQuestions">
-      <MultipleQuestions />
-    </TestVariant>
-    <TestVariant title="WithErrorMessage">
-      <WithErrorMessage />
-    </TestVariant>
-    <TestVariant title="WithErrorMessageForSingleField">
-      <WithErrorMessageForSingleField />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="Dense">
+        <Dense />
+      </TestVariant>
+      <TestVariant title="MultipleQuestions">
+        <MultipleQuestions />
+      </TestVariant>
+      <TestVariant title="WithErrorMessage">
+        <WithErrorMessage />
+      </TestVariant>
+      <TestVariant title="WithErrorMessageForSingleField">
+        <WithErrorMessageForSingleField />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-