@digigov/ui 1.2.0-dcbd7ded → 2.0.0-061795a7

package/src/form/AutoComplete/index.mdx

@@ -1,77 +0,0 @@
----
-id: auto-complete
-title: 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.
-
-## Usage
-
-### How to import
-
-```bash
-import AutoComplete from '@digigov/ui/form/AutoComplete';
-```
-
-### AutoComplete
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="Default.tsx"
-/>
-
-### AutoComplete with auto select
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithAutoSelect.tsx"
-/>
-
-### AutoComplete with inline style
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithInLine.tsx"
-/>
-
-### AutoComplete with default value
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithDefaultValue.tsx"
-/>
-
-### AutoComplete with placeholder
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithPlaceHolder.tsx"
-/>
-
-### AutoComplete with all option's values
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithShowAllValues.tsx"
-/>
-
-### AutoComplete 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)
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithMinLength.tsx"
-/>
-
-## API
-
-<PropTypes packageName="@digigov/ui" component="AutoComplete" />

package/src/form/Button/Button.stories.playwright.json

@@ -1,115 +0,0 @@
-{
-  "version": "4",
-  "stories": {
-    "digigov-ui-core-button--primary": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "hover",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>button"
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>button"
-              }
-            }
-          ],
-          "id": "cxND_XOGkFHP",
-          "title": "Hover and click"
-        }
-      ]
-    },
-    "digigov-ui-core-button--secondary": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "hover",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>button"
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>button"
-              }
-            }
-          ],
-          "id": "7b4sRaZez9gb",
-          "title": "Hover and click"
-        }
-      ]
-    },
-    "digigov-ui-core-button--warning": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "hover",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>button"
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>button"
-              }
-            }
-          ],
-          "id": "-dtZHnNLRC7t",
-          "title": "Hover and click"
-        }
-      ]
-    },
-    "digigov-ui-core-button--grouping-buttons-and-links": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            }
-          ],
-          "id": "laasT0Qg9kvq",
-          "title": "Keyboard navigation"
-        }
-      ]
-    },
-    "digigov-ui-core-button--theme-toggle": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>button"
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html"
-              }
-            }
-          ],
-          "id": "wPoD1odPNvOc",
-          "title": "change theme"
-        }
-      ]
-    }
-  }
-}

package/src/form/Button/index.mdx

@@ -1,113 +0,0 @@
----
-id: button
-title: Button
----
-
-# Button
-
-Use the button component to help users carry out an action like starting an
-application or saving their information.
-
-```bash
-import Button from '@digigov/ui/form/Button';
-```
-
-## How to use
-
-### Default buttons
-
-Use a default button for the main call to action on a page.
-
-<Story packageName="@digigov/ui" component="form/Button" story="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"
-/>
-
-### Secondary buttons
-
-Use secondary buttons for secondary calls to action on a page.
-
-<Story
-  packageName="@digigov/ui"
-  component="form/Button"
-  story="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" />
-
-### 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" />
-
-### Grouping buttons
-
-Use a button group when two or more buttons are placed together.
-
-<Story
-  packageName="@digigov/ui"
-  component="form/Button"
-  story="GroupingButtons.tsx"
-/>
-
-Any links within a button group will automatically align with the buttons.
-
-<Story
-  packageName="@digigov/ui"
-  component="form/Button"
-  story="GroupingButtonsAndLinks.tsx"
-/>
-
-Write button text in sentence case, describing the action it performs. For
-example:
-
-- `Start now` at the [start of the service](https://guide.services.gov.gr/docs/start-pages)
-- `Sign in` to an account a user has already created
-- `Continue` when the service does not save a user's information
-- `Save and continue` when the service does save a user's information
-- `Save and come back later` when a user can save their information and come back later
-- `Add another` to add another item to a list or group
-- `Pay` to make a payment
-- `Confirm and send` on a check answers page that does not have any legal
-  content a user must agree to
-- `Accept and send` on a check answers page that has legal content a user
-  must agree to
-- `Sign out` when a user is signed in to an account
-
-You may need to include more or different words to better describe the action.
-For example, `Add another address` and `Accept and claim a tax refund`.
-
-Align the primary action button to the left edge of your form.
-
-## Default buttons
-
-Use a default button for the main call to action on a page.
-
-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
-implementation in the ARIA Authoring Practices Guide (APG) at [button](https://www.w3.org/WAI/ARIA/apg/patterns/button/) section.
-
-## API
-
-<PropTypes packageName="@digigov/ui" component="Button" />

package/src/form/Checkbox/Checkbox.stories.playwright.json

@@ -1,55 +0,0 @@
-{
-  "version": "4",
-  "stories": {
-    "digigov-ui-form-checkbox--multiple-questions": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>div>fieldset>div>div:nth-child(1)>label>input"
-              }
-            }
-          ],
-          "id": "nEKElVkTn9rV",
-          "title": "check first box"
-        }
-      ]
-    },
-    "digigov-ui-form-checkbox--with-hint": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>div>fieldset>div>div:nth-child(1)>label>input"
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>div>fieldset>div>div:nth-child(2)>label>input"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Space"
-              }
-            }
-          ],
-          "id": "tlp6twL--N_s",
-          "title": "click first option"
-        }
-      ]
-    }
-  }
-}

package/src/form/Checkbox/index.mdx

@@ -1,85 +0,0 @@
----
-id: checkbox
-title: Checkbox
----
-
-# Checkbox
-
-```bash
-import Checkbox from '@digigov/ui/form/Checkbox';
-```
-
-## How to use
-
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="Default.tsx"
-/>
-
-### If you’re asking more than one question on the page
-
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="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"
-/>
-
-### 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"
-/>
-
-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"
-/>
-
-### Error messages
-
-Error messages should be styled like this:
-
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="WithErrorMessage.tsx"
-/>
-
-## Conditionally revealing a related question
-
-You can ask the user a related question when they select a particular checkbox, so they only see the question when it’s relevant to them.
-
-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"
-/>
-
-## Accessibility
-
-You can read more about the accessibility patterns used in our Checkbox
-implementation in the ARIA Authoring Practices Guide (APG) at [Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) section.
-
-## API
-
-<PropTypes packageName="@digigov/ui" component="Checkbox" />

package/src/form/DateInputContainer/DateInputContainer.stories.playwright.json

@@ -1,61 +0,0 @@
-{
-  "version": "4",
-  "stories": {
-    "digigov-ui-form-dateinput--default": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>div>fieldset>div>div:nth-child(1)>label>input"
-              }
-            },
-            {
-              "name": "keyboard.insertText",
-              "args": {
-                "text": "11"
-              }
-            }
-          ],
-          "id": "HEWnXMsN0nqw",
-          "title": "Actions with mouse"
-        }
-      ]
-    },
-    "digigov-ui-form-dateinput--with-error-message-for-single-field": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            },
-            {
-              "name": "keyboard.insertText",
-              "args": {
-                "text": "2022"
-              }
-            }
-          ],
-          "id": "5QICoU6J1W8E",
-          "title": "Actions with keyboard"
-        }
-      ]
-    }
-  }
-}

package/src/form/DateInputContainer/index.mdx

@@ -1,48 +0,0 @@
----
-id: date-input-container
-title: DateInputContainer
----
-
-# DateInputContainer
-
-```bash
-import DateInputContainer from '@digigov/ui/form/DateInputContainer';
-```
-
-## How to use
-
-<Story
-  packageName="@digigov/ui"
-  component="form/DateInputContainer"
-  story="Default.tsx"
-/>
-
-### If you’re asking more than one question on the page
-
-<Story
-  packageName="@digigov/ui"
-  component="form/DateInputContainer"
-  story="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"
-/>
-
-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"
-/>
-
-## API
-
-<PropTypes packageName="@digigov/ui" component="DateInputContainer" />

package/src/form/ErrorMessage/index.mdx

@@ -1,25 +0,0 @@
----
-id: error-message
-title: ErrorMessage
----
-
-# ErrorMessage
-
-Follow the validation pattern and show an error message when there is a validation error.
-In the error message explain what went wrong and how to fix it.
-
-```bash
-import ErrorMessage from '@digigov/ui/form/ErrorMessage';
-```
-
-## How to use
-
-<Story
-  packageName="@digigov/ui"
-  component="form/ErrorMessage"
-  story="Default.tsx"
-/>
-
-## API
-
-<PropTypes packageName="@digigov/ui" component="ErrorMessage" />

package/src/form/FileUpload/index.mdx

@@ -1,32 +0,0 @@
----
-id: file-upload
-title: FileUpload
----
-
-# FileUpload
-
-```bash
-import FileUpload from '@digigov/ui/form/FileUpload';
-```
-
-## How to use
-
-<Story
-  packageName="@digigov/ui"
-  component="form/FileUpload"
-  story="Default.tsx"
-/>
-
-### Error message
-
-Error messages should be styled like this:
-
-<Story
-  packageName="@digigov/ui"
-  component="form/FileUpload"
-  story="WithErrorMessage.tsx"
-/>
-
-## API
-
-<PropTypes packageName="@digigov/ui" component="FileUpload" />

package/src/form/RadioContainer/RadioContainer.stories.playwright.json

@@ -1,49 +0,0 @@
-{
-  "version": "4",
-  "stories": {
-    "digigov-ui-form-RadioContainer--default": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Space"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "ArrowDown"
-              }
-            }
-          ],
-          "id": "ihfl6FqwhAee",
-          "title": "Navigate with keyboard"
-        }
-      ]
-    },
-    "digigov-ui-form-RadioContainer--with-hints": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>div>fieldset>div>div:nth-child(1)>label>input"
-              }
-            }
-          ],
-          "id": "FgKax2U7F5gE",
-          "title": "Click first"
-        }
-      ]
-    }
-  }
-}