@digigov/ui 0.28.2 → 0.29.0

package/src/core/{Radios → RadioContainer}/__stories__/WithErrorMessage.tsx

@@ -1,12 +1,19 @@
 import React from 'react';
-import Radios, { RadioItem } from '@digigov/ui/core/Radios';
-import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
-import ErrorMessage from '@digigov/ui/core/ErrorMessage';
-import Hint from '@digigov/ui/typography/Hint';
-import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
+
+import { RadioContainer, RadioItem } from '@digigov/ui/core/RadioContainer';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/core/FieldContainer';
+
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
 
 export const WithErrorMessage = () => (
-  <Field error>
+  <FieldContainer error>
     <Fieldset aria-describedby="travel-hint travel-error">
       <FieldsetLegend>
         Θα ταξιδέψετε σε κάποια από αυτές τις χώρες;
@@ -16,16 +23,16 @@ export const WithErrorMessage = () => (
         <VisuallyHidden>Λάθος:</VisuallyHidden> Πρέπει να επιλέξετε μια
         απάντηση.
       </ErrorMessage>
-      <Radios>
+      <RadioContainer>
         <RadioItem name="cold" value="cold">
           Αγγλία
         </RadioItem>
         <RadioItem name="fever" value="fever">
           Γαλλία
         </RadioItem>
-      </Radios>
+      </RadioContainer>
     </Fieldset>
-  </Field>
+  </FieldContainer>
 );
 
 export default WithErrorMessage;

package/src/core/{Radios → RadioContainer}/__stories__/WithHints.tsx

@@ -1,31 +1,44 @@
 import React from 'react';
-import Radios, { RadioItem } from '@digigov/ui/core/Radios';
-import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
-import Hint from '@digigov/ui/typography/Hint';
+
+import { RadioContainer, RadioItem } from '@digigov/ui/core/RadioContainer';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/core/FieldContainer';
+
+import { Hint } from '@digigov/ui/typography/Hint';
 
 export const WithHints = () => (
-  <Field>
+  <FieldContainer>
     <Fieldset aria-describedby="login-hint">
       <FieldsetLegend size="m">Πώς θέλετε να συνδεθείτε;</FieldsetLegend>
       <Hint id="login-hint">
         Θα χρειαστείτε έναν λογαριασμό με τον οποίο θα αποδείξετε την ταύτοτητα
         σας ώστε να προχωρήσετε.
       </Hint>
-      <Radios>
+      <RadioContainer>
         <RadioItem name="login" value="gsis" aria-describedby="gsis-hint">
           Σύνδεση με Taxisnet
-          <Hint id="gsis-hint">Θα πρέπει να έχετε τους κωδικούς Taxisnet για να συνθείτε</Hint>
+          <Hint id="gsis-hint">
+            Θα πρέπει να έχετε τους κωδικούς Taxisnet για να συνθείτε
+          </Hint>
         </RadioItem>
-        <RadioItem name="login" value="ebanking" aria-describedby="ebanking-hint">
+        <RadioItem
+          name="login"
+          value="ebanking"
+          aria-describedby="ebanking-hint"
+        >
           Σύνδεση με λογαρισμό e-banking
           <Hint id="ebanking-hint">
             Θα πρέπει να έχετε τους κωδικούς του e-banking της τράπεζας για να
             συνδεθείτε.
           </Hint>
         </RadioItem>
-      </Radios>
+      </RadioContainer>
     </Fieldset>
-  </Field>
+  </FieldContainer>
 );
 
 export default WithHints;

package/src/core/RadioContainer/index.mdx

@@ -0,0 +1,90 @@
+---
+id: radios
+title: RadioContainer
+---
+
+# RadioContainer
+
+```bash
+import RadioContainer from '@digigov/ui/core/RadioContainer';
+```
+
+## How to use
+
+<Story
+  packageName="@digigov/ui"
+  component="core/RadioContainer"
+  story="Default.tsx"
+/>
+
+### If you’re asking more than one question on the page
+
+<Story
+  packageName="@digigov/ui"
+  component="core/RadioContainer"
+  story="MultipleQuestions.tsx"
+/>
+
+### Inline radios
+
+<Story
+  packageName="@digigov/ui"
+  component="core/RadioContainer"
+  story="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="core/RadioContainer"
+  story="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="core/RadioContainer"
+  story="NoneAnswer.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="core/RadioContainer"
+  story="ConditionalReveal.tsx"
+/>
+
+### Error messages
+
+Error messages should be styled like this:
+
+<Story packageName="@digigov/ui" component="core/RadioContainer" story="WithErrorMessage.tsx" />
+
+
+
+
+## API
+
+### RadioContainer
+
+<PropTypes packageName="@digigov/ui" component="RadioContainer" />
+
+### RadioConditional
+
+<PropTypes packageName="@digigov/ui" component="RadioConditional" />
+
+### RadioItem
+
+<PropTypes packageName="@digigov/ui" component="RadioItem" />

package/src/core/RadioContainer/index.tsx

@@ -0,0 +1,5 @@
+export * from '@digigov/react-core/RadioContainer';
+export * from '@digigov/react-core/RadioItem';
+export * from '@digigov/react-core/RadioConditional';
+import RadioContainer from '@digigov/react-core/RadioContainer';
+export default RadioContainer;

package/src/core/SelectContainer/Select.stories.js

@@ -0,0 +1,12 @@
+import SelectContainer from '@digigov/ui/core/SelectContainer';
+export default {
+  title: 'Digigov UI/core/SelectContainer',
+  description:
+    'The select component should only be used as a last resort in public-facing services because research shows that some users find selects very difficult to use.',
+  link: 'https://guide.services.gov.gr/docs/components/select',
+  component: SelectContainer,
+  displayName: 'SelectContainer',
+};
+export * from '@digigov/ui/core/SelectContainer/__stories__/Default';
+export * from '@digigov/ui/core/SelectContainer/__stories__/DisabledInput';
+export * from '@digigov/ui/core/SelectContainer/__stories__/WithHint';

package/src/core/SelectContainer/Select.stories.playwright.json

@@ -0,0 +1,21 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-core-select--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>label>select"
+              }
+            }
+          ],
+          "id": "r12umQc21tgb",
+          "title": "SelectContainer with mouse"
+        }
+      ]
+    }
+  }
+}

package/src/core/{Select → SelectContainer}/__stories__/Default.tsx

@@ -1,20 +1,25 @@
 import React from 'react';
-import Select, { SelectOption } from '@digigov/ui/core/Select';
-import Field from '@digigov/ui/core/Field';
-import LabelContainer from '@digigov/react-core/LabelContainer';
+
+import {
+  SelectContainer,
+  SelectOption,
+} from '@digigov/ui/core/SelectContainer';
+
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
 
 export const Default = () => (
-  <Field>
+  <FieldContainer>
     <LabelContainer>
       Ταξινόμηση
-      <Select name="select-list" aria-label="ταξινόμηση">
+      <SelectContainer name="select-list" aria-label="ταξινόμηση">
         <SelectOption value="dim">Δημοφιλή</SelectOption>
         <SelectOption value="kat">Πρόσφατα</SelectOption>
         <SelectOption value="kat">Περισσότερες προβολές</SelectOption>
         <SelectOption value="kat">Περισσότερα σχόλια</SelectOption>
-      </Select>
+      </SelectContainer>
     </LabelContainer>
-  </Field>
+  </FieldContainer>
 );
 
 export default Default;

package/src/core/{Select → SelectContainer}/__stories__/DisabledInput.tsx

@@ -1,13 +1,18 @@
 import React from 'react';
-import Select, { SelectOption } from '@digigov/ui/core/Select';
-import Field from '@digigov/ui/core/Field';
-import LabelContainer from '@digigov/react-core/LabelContainer';
+
+import {
+  SelectContainer,
+  SelectOption,
+} from '@digigov/ui/core/SelectContainer';
+
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
 
 export const DisabledInput = () => (
-  <Field>
+  <FieldContainer>
     <LabelContainer>
       Ταξινόμηση
-      <Select
+      <SelectContainer
         name="select-list"
         disabled
         aria-disabled="true"
@@ -17,9 +22,9 @@ export const DisabledInput = () => (
         <SelectOption value="kat">Πρόσφατα</SelectOption>
         <SelectOption value="kat">Περισσότερες προβολές</SelectOption>
         <SelectOption value="kat">Περισσότερα σχόλια</SelectOption>
-      </Select>
+      </SelectContainer>
     </LabelContainer>
-  </Field>
+  </FieldContainer>
 );
 
 export default DisabledInput;

package/src/core/{Select → SelectContainer}/__stories__/WithHint.tsx

@@ -1,22 +1,27 @@
 import React from 'react';
-import Select, { SelectOption } from '@digigov/ui/core/Select';
-import Field from '@digigov/ui/core/Field';
-import LabelContainer from '@digigov/react-core/LabelContainer';
+
+import {
+  SelectContainer,
+  SelectOption,
+} from '@digigov/ui/core/SelectContainer';
+
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
 import { Hint } from '@digigov/ui/typography';
 
 export const WithHint = () => (
-  <Field>
+  <FieldContainer>
     <LabelContainer>
       Ταξινόμηση
       <Hint>Επιλέξτε την ταξιμόνηση που θέλετε.</Hint>
-      <Select name="select-list" aria-label="ταξινόμηση">
+      <SelectContainer name="select-list" aria-label="ταξινόμηση">
         <SelectOption value="dim">Δημοφιλή</SelectOption>
         <SelectOption value="kat">Πρόσφατα</SelectOption>
         <SelectOption value="kat">Περισσότερες προβολές</SelectOption>
         <SelectOption value="kat">Περισσότερα σχόλια</SelectOption>
-      </Select>
+      </SelectContainer>
     </LabelContainer>
-  </Field>
+  </FieldContainer>
 );
 
 export default WithHint;

package/src/core/SelectContainer/index.mdx

@@ -0,0 +1,42 @@
+---
+id: select
+title: SelectContainer
+---
+
+# SelectContainer
+
+```bash
+import SelectContainer from '@digigov/ui/core/SelectContainer';
+```
+
+## How to use
+
+<Story
+  packageName="@digigov/ui"
+  component="core/SelectContainer"
+  story="Default.tsx"
+/>
+
+### SelectContainer with hints
+
+You can add hints to select items to provide additional information about the options.
+
+<Story
+  packageName="@digigov/ui"
+  component="core/SelectContainer"
+  story="WithHint.tsx"
+/>
+
+### Disabled input
+
+Error messages should be styled like this:
+
+<Story
+  packageName="@digigov/ui"
+  component="core/SelectContainer"
+  story="DisabledInput.tsx"
+/>
+
+You can read more about the accessibility patterns used in our SelectContainer
+implementation in the ARIA Authoring Practices Guide (APG) at
+[Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) section.

package/src/core/SelectContainer/index.tsx

@@ -0,0 +1,5 @@
+export * from '@digigov/react-core/SelectContainer';
+export * from '@digigov/react-core/SelectOption';
+
+import SelectContainer from '@digigov/react-core/SelectContainer';
+export default SelectContainer;

package/src/core/ServiceBadge/index.mdx

@@ -5,7 +5,7 @@ title: ServiceBadge
 
 import ServiceBadge from '@digigov/ui/core/ServiceBadge';
 import Header, { HeaderTitle } from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/Logo';
+import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
 
 ## Example
 

package/src/core/SummaryList/SummaryList.stories.js

@@ -1,9 +1,12 @@
 /* eslint-disable digigov/no-relative-imports */
 
-import SummaryList from '@digigov/ui/core';
+import SummaryList from '@digigov/ui/core/SummaryList';
 export default {
   title: 'Digigov UI/core/SummaryList',
+  description: 'Use the summary list to summarise information.',
+  link: 'https://guide.services.gov.gr/docs/components/summary-list',
   component: SummaryList,
+  displayName: 'SummaryList',
 };
 export * from './__stories__/Default';
 export * from './__stories__/WithActions';

package/src/core/SummaryList/__stories__/Default.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
-import SummaryList, {
+
+import {
+  SummaryList,
   SummaryListItem,
   SummaryListItemAction,
   SummaryListItemKey,
   SummaryListItemValue,
 } from '@digigov/ui/core/SummaryList';
-import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
-import Link from '@digigov/ui/core/Link';
+
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+import { Link } from '@digigov/ui/core/Link';
 export const Default = () => (
   <>
     <SummaryList>

package/src/core/SummaryList/__stories__/RowVariations.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
-import SummaryList, {
+
+import {
+  SummaryList,
   SummaryListItem,
   SummaryListItemAction,
   SummaryListItemKey,
   SummaryListItemValue,
 } from '@digigov/ui/core/SummaryList';
-import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
-import Link from '@digigov/ui/core/Link';
+
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+import { Link } from '@digigov/ui/core/Link';
 export const RowVariations = () => (
   <>
     <SummaryList>

package/src/core/SummaryList/__stories__/WithActions.tsx

@@ -1,13 +1,17 @@
 import React from 'react';
-import SummaryList, {
+
+import {
+  SummaryList,
   SummaryListItem,
   SummaryListItemAction,
   SummaryListItemKey,
   SummaryListItemValue,
 } from '@digigov/ui/core/SummaryList';
-import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
-import Link from '@digigov/ui/core/Link';
-import { ButtonGroup, Button } from '@digigov/ui/core';
+
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+import { Link } from '@digigov/ui/core/Link';
+
+import { ButtonGroup, Button } from '@digigov/ui/core/Button';
 
 export const WithActions = () => {
   return (
@@ -15,7 +19,7 @@ export const WithActions = () => {
       <SummaryList>
         <SummaryListItem>
           <SummaryListItemKey>Όνομα</SummaryListItemKey>
-          <SummaryListItemValue>	Γιώργος Παπαδόπουλος</SummaryListItemValue>
+          <SummaryListItemValue> Γιώργος Παπαδόπουλος</SummaryListItemValue>
           <SummaryListItemAction>
             <Link href="#">
               Αλλαγή<VisuallyHidden>Ονόματος</VisuallyHidden>
@@ -45,7 +49,6 @@ export const WithActions = () => {
             </ButtonGroup>
           </SummaryListItemAction>
         </SummaryListItem>
-        
       </SummaryList>
     </>
   );

package/src/core/SummaryList/__stories__/WithKeyAndAction.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
-import SummaryList, {
+
+import {
+  SummaryList,
   SummaryListItem,
   SummaryListItemAction,
   SummaryListItemKey,
 } from '@digigov/ui/core/SummaryList';
-import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
-import Link from '@digigov/ui/core/Link';
-import { ButtonGroup, Button } from '@digigov/ui/core';
+
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+import { Link } from '@digigov/ui/core/Link';
+
+import { ButtonGroup, Button } from '@digigov/ui/core/Button';
 
 export const WithKeyAndAction = () => {
   return (

package/src/core/SummaryList/__stories__/WithoutBorders.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import SummaryList, {
+
+import {
+  SummaryList,
   SummaryListItem,
   SummaryListItemAction,
   SummaryListItemKey,

package/src/core/SummaryList/index.mdx

@@ -6,27 +6,37 @@ title: SummaryList
 # SummaryList
 
 Use the summary list to summarise information, for example, a user’s responses at the end of a form.
- 
-
 
 ```bash
 import SummaryList from '@digigov/ui/core/SummaryList';
-``` 
+```
 
 ## How to use
 
-<Story packageName="@digigov/ui" component="core/SummaryList" story="Default.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="core/SummaryList"
+  story="Default.tsx"
+/>
 
 ### Summary list with actions
 
-Assistive technology users, like those who use a screen reader, may hear the links out of context and not know what they do. 
-To give more context, add visually hidden text to the links. 
+Assistive technology users, like those who use a screen reader, may hear the links out of context and not know what they do.
+To give more context, add visually hidden text to the links.
 This means a screen reader user will hear a meaningful action, like ‘Αλλαγή ονόματος’ or ‘Αλλαγή ημερομηνίας γέννησης’.
 
-<Story packageName="@digigov/ui" component="core/SummaryList" story="WithActions.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="core/SummaryList"
+  story="WithActions.tsx"
+/>
 
 ### Summary list without borders
 
 If you do not include actions in your summary list and it would be better for your design to remove the separating borders, use the `border={false}` prop.
 
 <Story packageName="@digigov/ui" component="core/SummaryList" story="WithoutBorders.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="SummaryList" />

package/src/core/Table/Table.stories.js

@@ -1,9 +1,13 @@
 /* eslint-disable digigov/no-relative-imports */
 
-import Table from '@digigov/ui/core';
+import Table from '@digigov/ui/core/Table';
 export default {
   title: 'Digigov UI/core/Table',
+  description:
+    'Use the table component to make information easier to compare and scan for users.',
+  link: 'https://guide.services.gov.gr/docs/components/table',
   component: Table,
+  displayName: 'Table',
 };
 export * from './__stories__/Default';
 export * from './__stories__/TableCaptions';

package/src/core/Table/__stories__/Densed.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {
   TableContainer,
   Table,

package/src/core/Table/__stories__/MultipleProps.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {
   TableContainer,
   Table,