@digigov/ui 0.28.3 → 0.29.0

package/src/core/Checkbox/__stories__/ConditionalReveal.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import {
+  Checkbox,
+  CheckboxItem,
+  CheckboxConditional,
+} from '@digigov/ui/core/Checkbox';
+
+import { TextInput } from '@digigov/ui/core/TextInput';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/core/FieldContainer';
+
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const ConditionalReveal = () => (
+  <FieldContainer>
+    <Fieldset aria-describedby="contact-hint">
+      <FieldsetLegend>Πως θέλετε να επικοινωνήσουμε μαζί σας;</FieldsetLegend>
+      <Hint id="contact-hint">Επιλέξτε ό,τι ισχύει στην περίπτωση σας.</Hint>
+      <Checkbox>
+        <CheckboxItem defaultChecked name="email" value="email">
+          Email
+        </CheckboxItem>
+        <CheckboxConditional>
+          Email address
+          <TextInput name="email" cellWidth="one-third" />
+        </CheckboxConditional>
+        <CheckboxItem name="phone" value="phone">
+          Τηλέφωνο
+        </CheckboxItem>
+      </Checkbox>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default ConditionalReveal;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { Checkbox, CheckboxItem } from '@digigov/ui/core/Checkbox';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/core/FieldContainer';
+
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const Default = () => (
+  <FieldContainer>
+    <Fieldset aria-describedby="feeling-hint">
+      <FieldsetLegend>Πώς αισθάνεται αυτή τη στιγμή;</FieldsetLegend>
+      <Hint id="feeling-hint">
+        Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.
+      </Hint>
+      <Checkbox>
+        <CheckboxItem name="cold" value="cold">
+          Έχω συνάχι
+        </CheckboxItem>
+        <CheckboxItem name="fever" value="fever">
+          Έχω πυρετό
+        </CheckboxItem>
+        <CheckboxItem name="fatigue" value="fatigue">
+          Αισθάνομαι κούραση
+        </CheckboxItem>
+      </Checkbox>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default Default;

package/src/core/Checkbox/__stories__/MultipleQuestions.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { Checkbox, CheckboxItem } from '@digigov/ui/core/Checkbox';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/core/FieldContainer';
+
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const MultipleQuestions = () => (
+  <FieldContainer>
+    <Fieldset aria-describedby="feeling-hint">
+      <FieldsetLegend size="s">Πώς αισθάνεται αυτή τη στιγμή;</FieldsetLegend>
+      <Hint id="feeling-hint">
+        Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.
+      </Hint>
+      <Checkbox>
+        <CheckboxItem name="cold" value="cold">
+          Έχω συνάχι
+        </CheckboxItem>
+        <CheckboxItem name="fever" value="fever">
+          Έχω πυρετό
+        </CheckboxItem>
+        <CheckboxItem name="fatigue" value="fatigue">
+          Αισθάνομαι κούραση
+        </CheckboxItem>
+      </Checkbox>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default MultipleQuestions;

package/src/core/Checkbox/__stories__/NoneAnswer.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { Checkbox, CheckboxItem } from '@digigov/ui/core/Checkbox';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/core/FieldContainer';
+
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const NoneAnswer = () => (
+  <FieldContainer>
+    <Fieldset aria-describedby="travel-hint">
+      <FieldsetLegend>
+        Θα ταξιδέψετε σε κάποια από αυτές τις χώρες;
+      </FieldsetLegend>
+      <Hint id="travel-hint">
+        Αν έχετε πολλαπλή υπηκοότητα, επιλέξτε ό,τι ισχύει.
+      </Hint>
+      <Checkbox>
+        <CheckboxItem name="cold" value="cold">
+          Αγγλία
+        </CheckboxItem>
+        <CheckboxItem name="fever" value="fever">
+          Γαλλία
+        </CheckboxItem>
+        <div className="govgr-checkboxes__divider">ή</div>
+        <CheckboxItem name="fatigue" value="fatigue">
+          Όχι, δεν θα ταξιδέψω σε καμία από αυτές τις χώρες
+        </CheckboxItem>
+      </Checkbox>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default NoneAnswer;

package/src/core/Checkbox/__stories__/NoneAnswerWithError.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { Checkbox, CheckboxItem } from '@digigov/ui/core/Checkbox';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/core/FieldContainer';
+
+import { Hint } from '@digigov/ui/typography/Hint';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+
+export const NoneAnswerWithError = () => (
+  <FieldContainer error>
+    <Fieldset aria-describedby="travel-hint travel-error">
+      <FieldsetLegend>
+        Θα ταξιδέψετε σε κάποια από αυτές τις χώρες;
+      </FieldsetLegend>
+      <Hint id="travel-hint">
+        Αν έχετε πολλαπλή υπηκοότητα, επιλέξτε ό,τι ισχύει.
+      </Hint>
+      <ErrorMessage id="travel-error">
+        <VisuallyHidden>Λάθος:</VisuallyHidden>
+        Επιλέξτε τις χώρες στις οποίες θα ταξιδέψετε, ή επιλέξτε «Όχι, δεν θα
+        ταξιδέψω σε καμία από αυτές τις χώρες».
+      </ErrorMessage>
+      <Checkbox>
+        <CheckboxItem defaultChecked name="en" value="en">
+          Αγγλία
+        </CheckboxItem>
+        <CheckboxItem name="fr" value="fever">
+          Γαλλία
+        </CheckboxItem>
+        <div className="govgr-checkboxes__divider">ή</div>
+        <CheckboxItem defaultChecked name="none" value="none">
+          Όχι, δεν θα ταξιδέψω σε καμία από αυτές τις χώρες
+        </CheckboxItem>
+      </Checkbox>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default NoneAnswerWithError;

package/src/core/Checkbox/__stories__/WithErrorMessage.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { Checkbox, CheckboxItem } from '@digigov/ui/core/Checkbox';
+
+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 = () => (
+  <FieldContainer error>
+    <Fieldset aria-describedby="nationality-hint nationality-error">
+      <FieldsetLegend>
+        Θα ταξιδέψετε σε κάποια από αυτές τις χώρες;
+      </FieldsetLegend>
+      <Hint id="nationality-hint">
+        Αν έχετε πολλαπλή υπηκοότητα, επιλέξτε ό,τι ισχύει.
+      </Hint>
+      <ErrorMessage id="nationality-error">
+        <VisuallyHidden>Λάθος:</VisuallyHidden> Επιλέξτε μία ή παραπάνω χώρες.
+      </ErrorMessage>
+      <Checkbox>
+        <CheckboxItem name="cold" value="cold">
+          Αγγλία
+        </CheckboxItem>
+        <CheckboxItem name="fever" value="fever">
+          Γαλλία
+        </CheckboxItem>
+      </Checkbox>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default WithErrorMessage;

package/src/core/Checkbox/__stories__/WithHint.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { Checkbox, CheckboxItem } from '@digigov/ui/core/Checkbox';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/core/FieldContainer';
+
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const WithHint = () => (
+  <FieldContainer>
+    <Fieldset aria-describedby="nationality-hint">
+      <FieldsetLegend>Ποια είναι η εθνικότητα σας;</FieldsetLegend>
+      <Hint id="nationality-hint">
+        Αν έχετε πολλαπλή υπηκοότητα, επιλέξτε ό,τι ισχύει.
+      </Hint>
+      <Checkbox>
+        <CheckboxItem name="cold" value="cold">
+          Ελληνική
+          <Hint>συμπεριλαμβανομένων απόδημων πολιτών</Hint>
+        </CheckboxItem>
+        <CheckboxItem name="fever" value="fever">
+          Κυπριακή
+        </CheckboxItem>
+        <CheckboxItem name="fatigue" value="fatigue">
+          Άλλη χώρα
+        </CheckboxItem>
+      </Checkbox>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default WithHint;

package/src/core/Checkbox/checkbox.mdx

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

package/src/core/Checkbox/index.tsx

@@ -0,0 +1,5 @@
+export * from '@digigov/react-core/Checkbox';
+export * from '@digigov/react-core/CheckboxItem';
+export * from '@digigov/react-core/CheckboxConditional';
+import Checkbox from '@digigov/react-core/Checkbox';
+export default Checkbox;

package/src/core/DateInputContainer/DateInputContainer.stories.js

@@ -0,0 +1,13 @@
+import DateInputContainer from '@digigov/ui/core/DateInputContainer';
+export default {
+  title: 'Digigov UI/core/DateInputContainer',
+  description:
+    'Use the date input component to help users enter a memorable date or one they can easily look up.',
+  link: 'https://guide.services.gov.gr/docs/components/date-input',
+  component: DateInputContainer,
+  displayName: 'DateInputContainer',
+};
+export * from '@digigov/ui/core/DateInputContainer/__stories__/Default';
+export * from '@digigov/ui/core/DateInputContainer/__stories__/MultipleQuestions';
+export * from '@digigov/ui/core/DateInputContainer/__stories__/WithErrorMessage';
+export * from '@digigov/ui/core/DateInputContainer/__stories__/WithErrorMessageForSingleField';

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

@@ -0,0 +1,61 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-core-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-core-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/core/DateInputContainer/__stories__/Default.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {
+  DateInputContainer,
+  DateInputItem,
+} from '@digigov/ui/core/DateInputContainer';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/core/FieldContainer';
+
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const Default = () => (
+  <FieldContainer>
+    <Fieldset>
+      <FieldsetLegend heading>Πότε εκδόθηκε το διαβατήριο σας;</FieldsetLegend>
+      <Hint>Για παράδειγμα, 05 11 2020</Hint>
+      <DateInputContainer>
+        <DateInputItem name="day">Ημέρα</DateInputItem>
+        <DateInputItem name="month">Μήνας</DateInputItem>
+        <DateInputItem width={4} name="year">
+          Χρόνος
+        </DateInputItem>
+      </DateInputContainer>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default Default;

package/src/core/DateInputContainer/__stories__/MultipleQuestions.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {
+  DateInputContainer,
+  DateInputItem,
+} from '@digigov/ui/core/DateInputContainer';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/core/FieldContainer';
+
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const MultipleQuestions = () => (
+  <FieldContainer>
+    <Fieldset>
+      <FieldsetLegend size="m">Πότε εκδόθηκε το διαβατήριο σας;</FieldsetLegend>
+      <Hint>Για παράδειγμα, 05 11 2020</Hint>
+      <DateInputContainer>
+        <DateInputItem name="day">Ημέρα</DateInputItem>
+        <DateInputItem name="month">Μήνας</DateInputItem>
+        <DateInputItem width={4} name="year">
+          Χρόνος
+        </DateInputItem>
+      </DateInputContainer>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default MultipleQuestions;

package/src/core/DateInputContainer/__stories__/WithErrorMessage.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import {
+  DateInputContainer,
+  DateInputItem,
+} from '@digigov/ui/core/DateInputContainer';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/core/FieldContainer';
+
+import { Hint } from '@digigov/ui/typography/Hint';
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+
+export const WithErrorMessage = () => (
+  <FieldContainer error>
+    <Fieldset>
+      <FieldsetLegend>Πότε εκδόθηκε το διαβατήριο σας;</FieldsetLegend>
+      <Hint>Για παράδειγμα, 05 11 2020</Hint>
+      <ErrorMessage>
+        <VisuallyHidden>Λάθος:</VisuallyHidden> Η ημερομηνία έκδοσης του
+        διαβατηρίου σας θα πρέπει να είναι στο παρελθόν.
+      </ErrorMessage>
+      <DateInputContainer>
+        <DateInputItem error name="day">
+          Ημέρα
+        </DateInputItem>
+        <DateInputItem error name="month">
+          Μήνας
+        </DateInputItem>
+        <DateInputItem error width={4} name="year">
+          Χρόνος
+        </DateInputItem>
+      </DateInputContainer>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default WithErrorMessage;

package/src/core/DateInputContainer/__stories__/WithErrorMessageForSingleField.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import {
+  DateInputContainer,
+  DateInputItem,
+} from '@digigov/ui/core/DateInputContainer';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/core/FieldContainer';
+
+import { Hint } from '@digigov/ui/typography/Hint';
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+
+export const WithErrorMessageForSingleField = () => (
+  <FieldContainer error>
+    <Fieldset>
+      <FieldsetLegend>Πότε εκδόθηκε το διαβατήριο σας;</FieldsetLegend>
+      <Hint>Για παράδειγμα, 05 11 2020</Hint>
+      <ErrorMessage>
+        <VisuallyHidden>Λάθος:</VisuallyHidden> Η ημερομηνία έκδοσης του
+        διαβατηρίου σας θα πρέπει να είναι στο παρελθόν.
+      </ErrorMessage>
+      <DateInputContainer>
+        <DateInputItem name="day">Ημέρα</DateInputItem>
+        <DateInputItem name="month">Μήνας</DateInputItem>
+        <DateInputItem error width={4} name="year">
+          Χρόνος
+        </DateInputItem>
+      </DateInputContainer>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default WithErrorMessageForSingleField;

package/src/core/DateInputContainer/index.mdx

@@ -0,0 +1,44 @@
+---
+id: date-input
+title: DateInputContainer
+---
+
+# DateInputContainer
+
+```bash
+import DateInputContainer from '@digigov/ui/core/DateInputContainer';
+```
+
+## How to use
+
+<Story
+  packageName="@digigov/ui"
+  component="core/DateInputContainer"
+  story="Default.tsx"
+/>
+
+### If you’re asking more than one question on the page
+
+<Story
+  packageName="@digigov/ui"
+  component="core/DateInputContainer"
+  story="MultipleQuestions.tsx"
+/>
+
+### Error message
+
+If you’re highlighting the whole date, style all the fields like this:
+
+<Story
+  packageName="@digigov/ui"
+  component="core/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="core/DateInputContainer"
+  story="WithErrorMessageForSingleField.tsx"
+/>

package/src/core/DateInputContainer/index.tsx

@@ -0,0 +1,4 @@
+export * from '@digigov/react-core/DateInputContainer';
+export * from '@digigov/react-core/DateInputItem';
+import DateInputContainer from '@digigov/react-core/DateInputContainer';
+export default DateInputContainer;

package/src/core/Details/Details.stories.js

@@ -0,0 +1,10 @@
+import Details from '@digigov/ui/core/Details';
+export default {
+  title: 'Digigov UI/core/Details',
+  description:
+    'Make a page easier to scan by letting users reveal more detailed information only if they need it.',
+  link: 'https://guide.services.gov.gr/docs/components/details',
+  component: Details,
+  displayName: 'Details',
+};
+export * from '@digigov/ui/core/Details/__stories__/Default';

package/src/core/Details/Details.stories.playwright.json

@@ -0,0 +1,27 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-core-details--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>details>summary"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html"
+              }
+            }
+          ],
+          "id": "Vmcdm2eBOyC1",
+          "title": "Open Details"
+        }
+      ]
+    }
+  }
+}