@digigov/ui 2.0.0-2445d5cb → 2.0.0-298cfc51

package/src/feedback/CopyToClipboard/doc.mdx

@@ -0,0 +1,22 @@
+---
+id: copy-to-clipboard
+title: CopyToClipboard
+---
+
+## How to use
+
+<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Default.tsx" />
+
+### As banner
+
+<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Banner.tsx" />
+
+### With dense style
+
+<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Dense.tsx" />
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["CopyToClipboardContainer"]} /> 

package/src/feedback/ErrorSummary/__snapshots__/index.spec.tsx.snap

@@ -1,7 +1,7 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the ErrorSummary with sample data 1`] = `
-<ForwardRef(ErrorSummary)>
+<ForwardRef(ErrorSummary2)>
   this is some random warning text
-</ForwardRef(ErrorSummary)>
+</ForwardRef(ErrorSummary2)>
 `;

package/src/feedback/ErrorSummary/{index.mdx → doc.mdx}

@@ -5,17 +5,13 @@ title: ErrorSummary
 
 # ErrorSummary
 
-Use this component at the top of a page to summarise any errors a user has made.
+Use this component at the top of a page to summarize any errors a user has made.
 
 When a user makes an error, you must show both an error summary and an error message next to each answer that contains an error.
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/feedback/ErrorSummary/__stories__/Default.tsx" />
 
 ### Linking from the error summary to each answer
 
@@ -23,32 +19,20 @@ You must link the errors in the error summary to the answer they relate to.
 
 For questions that require a user to answer using a single field, like a file upload, select, textarea, text input or character count, link to the field.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="LinkedToInput.tsx"
-/>
+<code src="@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToInput.tsx" />
 
 When a user has to enter their answer into multiple fields, such as the day, month and year fields in the date input component, link to the first field that contains an error.
 
 If you do not know which field contains an error, link to the first field.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="LinkedToField.tsx"
-/>
+<code src="@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToField.tsx" />
 
 For questions that require a user to select one or more options from a list using radios or checkboxes, link to the first radio or checkbox.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="LinkedToCheckbox.tsx"
-/>
+<code src="@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox.tsx" />
 
 ## API
 
 See below for a complete reference to all of the props  available to the components mentioned here.
 
-<ComponentProps componentName={["ErrorSummary"]} /> 
+{/* <ComponentProps componentName={["ErrorSummary"]} />  */}

package/src/feedback/ErrorSummary/interaction.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { LinkedToCheckbox } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox';
+
+test('renders the LinkedToCheckbox Go to checkbox', async ({ mount, page }) => {
+  await mount(
+    <LinkedToCheckbox />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.keyboard.press("Tab");
+ await page.keyboard.press("Enter");
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/feedback/NotificationBanner/__snapshots__/index.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the notification banner 1`] = `
 <NotificationBanner

package/src/feedback/NotificationBanner/{index.mdx → doc.mdx}

@@ -17,28 +17,17 @@ Use a ‘neutral’ notification banner if the user needs to know about somethin
 
 ## How to use
 
-### Default NotificationBanner
-<Story
-  packageName="@digigov/ui"
-  component="feedback/NotificationBanner"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/feedback/NotificationBanner/__stories__/Default.tsx" />
 
 You can also use a notification banner to tell the user about the outcome of something they’ve just done - but they have not finished using the service, so it does not make sense to use a confirmation page.
 
-### Success NotificationBanner
-<Story
-  packageName="@digigov/ui"
-  component="feedback/NotificationBanner"
-  story="Success.tsx"
-/>
-
-### Dense NotificationBanner
-<Story
-  packageName="@digigov/ui"
-  component="feedback/NotificationBanner"
-  story="Dense.tsx"
-/>
+### With success style
+
+<code src="@digigov/ui/feedback/NotificationBanner/__stories__/Success.tsx" />
+
+### With dense style
+
+<code src="@digigov/ui/feedback/NotificationBanner/__stories__/Dense.tsx" />
 
 ## API
 

package/src/feedback/PhaseBanner/{index.mdx → doc.mdx}

@@ -11,21 +11,11 @@ Use the phase banner component to show users your service is still being worked
 
 Your banner must be directly under the blue GOV.GR header and colour bar.
 
-### Default
-
-<Story
-  packageName="@digigov/ui"
-  component="feedback/PhaseBanner"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/feedback/PhaseBanner/__stories__/Default.tsx" />
 
 ### Underlined
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/PhaseBanner"
-  story="Underlined.tsx"
-/>
+<code src="@digigov/ui/feedback/PhaseBanner/__stories__/Underlined.tsx" />
 
 ## API
 

package/src/feedback/WarningText/__snapshots__/index.spec.tsx.snap

@@ -1,7 +1,7 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the WarningText with sample data 1`] = `
-<ForwardRef(WarningText)>
+<ForwardRef(WarningText2)>
   this is some random warning text
-</ForwardRef(WarningText)>
+</ForwardRef(WarningText2)>
 `;

package/src/feedback/WarningText/{index.mdx → doc.mdx}

@@ -10,13 +10,15 @@ title: WarningText
 You might need to rewrite the hidden text ("Προσοχή" in the example) to make it appropriate for your context.
 This will be used by screen-readers.
 
-### Default
+<code src="@digigov/ui/feedback/WarningText/__stories__/Default.tsx" />
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/WarningText"
-  story="Default.tsx"
-/>
+### With dense style
+
+<code src="@digigov/ui/feedback/WarningText/__stories__/Dense.tsx" />
+
+### With assistive text
+
+<code src="@digigov/ui/feedback/WarningText/__stories__/AssistiveText.tsx" />
 
 ## API
 

package/src/feedback/WarningText/index.tsx

@@ -1,3 +1,4 @@
 export * from '@digigov/react-core/WarningText';
 import WarningText from '@digigov/react-core/WarningText';
+export { WarningTextAssistive } from '@digigov/react-core/WarningTextAssistive';
 export default WarningText;

package/src/form/AutoComplete/doc.mdx

@@ -0,0 +1,50 @@
+---
+id: auto-complete
+title: AutoComplete
+---
+
+# AutoComplete
+
+Autocomplete is a feature in which an input field suggests a word based on user input. This allows users to quickly search
+through, select from large collections of options and help services get more consistent data.
+
+## How to use
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/Default.tsx" />
+
+### With auto select
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/WithAutoSelect.tsx" />
+
+### With default value
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/WithDefaultValue.tsx" />
+
+### With placeholder
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder.tsx" />
+
+### With all option's values
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues.tsx" />
+
+### With min length
+
+This is the minimum number of characters that should be entered before the AutoComplete will attempt to suggest options(in above example is 2)
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/WithMinLength.tsx" />
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  ["AutoCompleteWrapper",
+  "AutoCompleteStatus",
+  "AutoCompleteStatusWrapper",
+  "AutoCompleteInputTypeahead",
+  "AutoCompleteInput",
+  "AutoCompleteResultList",
+  "AutoCompleteResultListItem",
+  "AutoCompleteAssistiveHint"
+  ]} /> 

package/src/form/AutoComplete/index.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Component } from 'react';
-import AutoCompleteAssistiveHint from '@digigov/react-core/AutoCompleteAssistiveHint';
-import AutoCompleteInput from '@digigov/react-core/AutoCompleteInput';
-import AutoCompleteInputTypeahead from '@digigov/react-core/AutoCompleteInputTypeahead';
-import AutoCompleteResultList from '@digigov/react-core/AutoCompleteResultList';
-import AutoCompleteResultListItem from '@digigov/react-core/AutoCompleteResultListItem';
-import AutoCompleteContainer from '@digigov/react-core/AutoCompleteContainer';
-import AutoCompleteMultipleInputContainer from '@digigov/react-core/AutoCompleteMultipleInputContainer';
-import AutoCompleteMultipleInput from '@digigov/react-core/AutoCompleteMultipleInput';
-
+import { AutoCompleteAssistiveHint } from '@digigov/react-core/AutoCompleteAssistiveHint';
+import { AutoCompleteInputBase } from '@digigov/react-core/AutoCompleteInputBase';
+import { AutoCompleteInputTypeahead } from '@digigov/react-core/AutoCompleteInputTypeahead';
+import { AutoCompleteResultList } from '@digigov/react-core/AutoCompleteResultList';
+import { AutoCompleteResultListItem } from '@digigov/react-core/AutoCompleteResultListItem';
+import { AutoCompleteContainer } from '@digigov/react-core/AutoCompleteContainer';
+import { AutoCompleteMultipleInputContainer } from '@digigov/react-core/AutoCompleteMultipleInputContainer';
+import { AutoCompleteMultipleInput } from '@digigov/react-core/AutoCompleteMultipleInput';
+import { Base } from '@digigov/react-core/Base';
 import { CaretIcon } from '@digigov/react-icons/CaretIcon';
 import Status from '@digigov/ui/form/AutoComplete/Status';
 import {
@@ -558,7 +558,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
           const showFocused =
             focused === -1 ? selected === index : focused === index;
           const iosPosinsetHtml = isIosDevice() ? (
-            <span
+            <Base as='span'
               id={`${id}__option-suffix--${index}`}
               style={{
                 border: '0',
@@ -574,7 +574,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
               }}
             >
               {index + 1} από {options.length}
-            </span>
+            </Base>
           ) : (
             ''
           );
@@ -755,7 +755,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
           </AutoCompleteMultipleInputContainer>
         ) : (
           <>
-            <AutoCompleteInput
+            <AutoCompleteInputBase
               aria-expanded={menuOpen ? 'true' : 'false'}
               aria-activedescendant={
                 optionFocused ? `${id}__option--${focused}` : ''
@@ -806,7 +806,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
 
 export {
   AutoComplete,
-  AutoCompleteInput,
+  AutoCompleteInputBase,
   AutoCompleteInputTypeahead,
   AutoCompleteResultList,
   AutoCompleteResultListItem,

package/src/form/AutoComplete/utils.ts

@@ -10,8 +10,8 @@ export function isIosDevice(): boolean | undefined {
   return (
     typeof navigator !== 'undefined' &&
     !!(
-      navigator.userAgent.match(/(iPod|iPhone|iPad)/g) &&
-      navigator.userAgent.match(/AppleWebKit/g)
+      navigator.userAgent?.match(/(iPod|iPhone|iPad)/g) &&
+      navigator.userAgent?.match(/AppleWebKit/g)
     )
   );
 }

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

@@ -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/{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/interaction.test.tsx

@@ -1,11 +1,26 @@
 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 GroupingButtonsAndLinks Keyboard navigation', async ({ mount, page }) => {
+  await mount(
+    <GroupingButtonsAndLinks />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ 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 />

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.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/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