@digigov/ui 2.0.0-rc.21 → 2.0.0-rc.23

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

@@ -0,0 +1,9 @@
+import SearchContainer from '@digigov/ui/form/SearchContainer';
+export default {
+  title: 'Digigov UI/form/SearchContainer',
+  description:
+    'The SearchContainer component encapsulates the TextInput and SearchButton, providing a comprehensive search functionality.',
+  component: SearchContainer,
+  displayName: 'SearchContainer',
+};
+export { Default } from '@digigov/ui/form/SearchContainer/__stories__/Default';

package/src/form/SearchContainer/__stories__/Default.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SearchContainer } from '@digigov/ui/form/SearchContainer';
+import { SearchButton } from '@digigov/ui/form/SearchContainer';
+import { TextInput } from '@digigov/ui/form/TextInput';
+
+export const Default = () => (
+  <SearchContainer>
+    <TextInput />
+    <SearchButton />
+  </SearchContainer>
+);
+
+export default Default;

package/src/form/SearchContainer/doc.mdx

@@ -0,0 +1,16 @@
+---
+id: search-container
+title: SearchContainer
+---
+
+# SearchContainer
+
+## How to use
+
+<code src="@digigov/ui/form/SearchContainer/__stories__/Default.tsx" />
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["SearchContainer","SearchButton"]} /> 

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

@@ -0,0 +1,20 @@
+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/SearchContainer/__stories__/Default';
+
+test('renders the All SearchContainer variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

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

@@ -5,37 +5,21 @@ title: SelectContainer
 
 # SelectContainer
 
-```bash
-import SelectContainer from '@digigov/ui/form/SelectContainer';
-```
-
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SelectContainer"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/form/SelectContainer/__stories__/Default.tsx" />
 
 ### SelectContainer with hints
 
 You can add hints to select items to provide additional information about the options.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SelectContainer"
-  story="WithHint.tsx"
-/>
+<code src="@digigov/ui/form/SelectContainer/__stories__/WithHint.tsx" />
 
 ### Disabled input
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SelectContainer"
-  story="DisabledInput.tsx"
-/>
+<code src="@digigov/ui/form/SelectContainer/__stories__/DisabledInput.tsx" />
 
 ## Accessibility
 

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

@@ -7,21 +7,13 @@ title: SingleCharacterInputs
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SingleCharacterInputs"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/form/SingleCharacterInputs/__stories__/Default.tsx" />
 
 ### Error message
 
-If you’re highlighting the whole date, style all the fields like this:
+If you’re highlighting all the digits of the password, style the fields like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SingleCharacterInputs"
-  story="WithDefaultError.tsx"
-/>
+<code src="@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError.tsx" />
 
 ## API
 

package/src/form/TextArea/doc.mdx

@@ -0,0 +1,48 @@
+---
+id: text-area
+title: TextArea
+---
+
+# TextArea
+
+## How to use
+
+<code src="@digigov/ui/form/TextArea/__stories__/Default.tsx" />
+
+### Use appropriately-sized textarea inputs
+
+<code src="@digigov/ui/form/TextArea/__stories__/WithDeclaredRows.tsx" />
+
+### For multiple questions
+
+If you’re asking more than one question on the page, you can display directly the question's title without using the component `LabelTitle`.
+
+<code src="@digigov/ui/form/TextArea/__stories__/MultipleQuestions.tsx" />
+
+### Limiting the number of characters
+
+If there’s a good reason to limit the number of characters users can enter, you can use the character count component.
+
+<code src="@digigov/ui/form/TextArea/__stories__/LimitedCharacters.tsx" />
+
+### Hint text
+
+Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.
+
+<code src="@digigov/ui/form/TextArea/__stories__/WithHint.tsx" />
+
+### Error message
+
+Error messages should be styled like this:
+
+<code src="@digigov/ui/form/TextArea/__stories__/WithErrorMessage.tsx" />
+
+### Disabled input
+
+<code src="@digigov/ui/form/TextArea/__stories__/DisabledInput.tsx" />
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["TextArea"]} /> 

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

@@ -7,19 +7,13 @@ title: TextInput
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/form/TextInput/__stories__/Default.tsx" />
 
-### If you’re asking more than one question on the page
+### For multiple questions
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="MultipleQuestions.tsx"
-/>
+If you’re asking more than one question on the page, you can display directly the question's title without using the component `LabelTitle`.
+
+<code src="@digigov/ui/form/TextInput/__stories__/MultipleQuestions.tsx" />
 
 ### Fixed width inputs
 
@@ -29,59 +23,33 @@ The widths are designed for specific character lengths and to be consistent acro
 
 On fixed width inputs, the width will remain fixed on all screens unless it is wider than the viewport, in which case it will shrink to fit.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="FixedWidths.tsx"
-/>
+<code src="@digigov/ui/form/TextInput/__stories__/FixedWidths.tsx" />
 
 ### Fluid width inputs
 
 Fluid width inputs will resize with the viewport.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="FluidWidths.tsx"
-/>
+<code src="@digigov/ui/form/TextInput/__stories__/FluidWidths.tsx" />
 
 ### Hint text
 
 Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="WithHint.tsx"
-/>
-
-## Numbers
+<code src="@digigov/ui/form/TextInput/__stories__/WithHint.tsx" />
 
-### Asking for whole numbers
+### Asking for numbers
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="AskingForNumbers.tsx"
-/>
+<code src="@digigov/ui/form/TextInput/__stories__/AskingForNumbers.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="WithErrorMessage.tsx"
-/>
+<code src="@digigov/ui/form/TextInput/__stories__/WithErrorMessage.tsx" />
 
 ### Disabled input
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="DisabledInput.tsx"
-/>
+<code src="@digigov/ui/form/TextInput/__stories__/DisabledInput.tsx" />
 
 ## API