@digigov/ui 0.28.3 → 0.29.0

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
+import { LabelTitle } from '@digigov/ui/core/LabelContainer';
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+import { TextArea } from '@digigov/ui/core/TextArea';
+
+export const WithErrorMessage = () => (
+  <FieldContainer error>
+    <LabelContainer>
+      <LabelTitle size="m">
+        Μπορείτε να δώσετε περισσότερες πληροφορίες;
+      </LabelTitle>
+      <Hint>
+        Στις πληροφορίες μην προσθέσετε προσωπικά ή οικονομικά δεδομένα, όπως το
+        ΑΜΑ ή δεδομένα πιστωτικής κάρτας.
+      </Hint>
+      <ErrorMessage>Εισάγετε περιεχόμενο.</ErrorMessage>
+      <TextArea name="textarea" error></TextArea>
+    </LabelContainer>
+  </FieldContainer>
+);
+
+export default WithErrorMessage;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
+import { LabelTitle } from '@digigov/ui/core/LabelContainer';
+import { TextArea } from '@digigov/ui/core/TextArea';
+
+export const WithHint = () => (
+  <FieldContainer>
+    <LabelContainer>
+      <LabelTitle size="m">
+        Μπορείτε να δώσετε περισσότερες πληροφορίες;
+      </LabelTitle>
+      <Hint>
+        Στις πληροφορίες μην προσθέσετε προσωπικά ή οικονομικά δεδομένα, όπως το
+        ΑΜΑ ή δεδομένα πιστωτικής κάρτας.
+      </Hint>
+      <TextArea name="textarea"></TextArea>
+    </LabelContainer>
+  </FieldContainer>
+);
+
+export default WithHint;

package/src/core/TextArea/index.mdx

@@ -0,0 +1,72 @@
+---
+id: text-area
+title: TextArea
+---
+
+# TextArea
+
+```bash
+import TextArea from '@digigov/ui/core/TextArea';
+```
+
+## How to use
+
+<Story
+  packageName="@digigov/ui"
+  component="core/TextArea"
+  story="Default.tsx"
+/>
+
+### Use appropriately-sized textareas
+
+<Story
+  packageName="@digigov/ui"
+  component="core/TextArea"
+  story="WithDeclaredRows.tsx"
+/>
+
+### If you’re asking more than one question on the page
+
+<Story
+  packageName="@digigov/ui"
+  component="core/TextArea"
+  story="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.
+
+<Story
+  packageName="@digigov/ui"
+  component="core/TextArea"
+  story="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.
+
+<Story
+  packageName="@digigov/ui"
+  component="core/TextArea"
+  story="WithHint.tsx"
+/>
+
+### Error message
+
+Error messages should be styled like this:
+
+<Story
+  packageName="@digigov/ui"
+  component="core/TextArea"
+  story="WithErrorMessage.tsx"
+/>
+
+### Disabled input
+
+<Story packageName="@digigov/ui" component="core/TextArea" story="DisabledInput.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="TextArea" />

package/src/core/TextArea/index.tsx

@@ -0,0 +1,3 @@
+export * from '@digigov/react-core/TextArea';
+import TextArea from '@digigov/react-core/TextArea';
+export default TextArea;

package/src/core/TextInput/TextInput.stories.js

@@ -0,0 +1,17 @@
+import TextInput from '@digigov/ui/core/TextInput';
+export default {
+  title: 'Digigov UI/core/TextInput',
+  description:
+    'Use the text input component when you need to let users enter text that’s no longer than a single line.',
+  link: 'https://guide.services.gov.gr/docs/components/TextInput',
+  component: TextInput,
+  displayName: 'TextInput',
+};
+export * from '@digigov/ui/core/TextInput/__stories__/Default';
+export * from '@digigov/ui/core/TextInput/__stories__/MultipleQuestions';
+export * from '@digigov/ui/core/TextInput/__stories__/FixedWidths';
+export * from '@digigov/ui/core/TextInput/__stories__/FluidWidths';
+export * from '@digigov/ui/core/TextInput/__stories__/WithHint';
+export * from '@digigov/ui/core/TextInput/__stories__/AskingForNumbers';
+export * from '@digigov/ui/core/TextInput/__stories__/WithErrorMessage';
+export * from '@digigov/ui/core/TextInput/__stories__/DisabledInput';

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

@@ -0,0 +1,43 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-core-textinput--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>label>input"
+              }
+            },
+            {
+              "name": "keyboard.insertText",
+              "args": {
+                "text": "όνομα"
+              }
+            }
+          ],
+          "id": "cLpUm-R6HTXB",
+          "title": "Click and write"
+        }
+      ]
+    },
+    "digigov-ui-core-textinput--with-error-message": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            }
+          ],
+          "id": "rPCFq3lcF987",
+          "title": "Keyboard navigation"
+        }
+      ]
+    }
+  }
+}

package/src/core/TextInput/__stories__/AskingForNumbers.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TextInput } from '@digigov/ui/core/TextInput';
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
+import { LabelTitle } from '@digigov/ui/core/LabelContainer';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const AskingForNumbers = () => (
+  <FieldContainer>
+    <LabelContainer>
+      <LabelTitle size="m">ΑΦΜ πελάτη</LabelTitle>
+      <Hint>Πρέπει να είναι 9 ψηφία.</Hint>
+      <TextInput
+        name="inputext"
+        pattern="[0-9]*"
+        inputMode="numeric"
+      ></TextInput>
+    </LabelContainer>
+  </FieldContainer>
+);
+
+export default AskingForNumbers;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TextInput } from '@digigov/ui/core/TextInput';
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
+import { LabelTitle } from '@digigov/ui/core/LabelContainer';
+
+export const Default = () => (
+  <FieldContainer>
+    <LabelContainer>
+      <LabelTitle size="m">Όνομα επιχείρησης</LabelTitle>
+      <TextInput name="inputext"></TextInput>
+    </LabelContainer>
+  </FieldContainer>
+);
+
+export default Default;

package/src/core/TextInput/__stories__/DisabledInput.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TextInput } from '@digigov/ui/core/TextInput';
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
+import { LabelTitle } from '@digigov/ui/core/LabelContainer';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const DisabledInput = () => (
+  <FieldContainer>
+    <LabelContainer>
+      <LabelTitle size="m">Όνομα επιχείρησης</LabelTitle>
+      <Hint>Πρέπει να συμπληρώσετε το πεδίο.</Hint>
+      <TextInput name="inputext" disabled></TextInput>
+    </LabelContainer>
+  </FieldContainer>
+);
+
+export default DisabledInput;

package/src/core/TextInput/__stories__/FixedWidths.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { TextInput } from '@digigov/ui/core/TextInput';
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
+import { LabelTitle } from '@digigov/ui/core/LabelContainer';
+
+export const FixedWidths = () => (
+  <>
+    <FieldContainer>
+      <LabelContainer>
+        <LabelTitle size="s">20 character width</LabelTitle>
+        <TextInput name="inputext" characterWidth={20}></TextInput>
+      </LabelContainer>
+    </FieldContainer>
+    <FieldContainer>
+      <LabelContainer>
+        <LabelTitle size="s">10 character width</LabelTitle>
+        <TextInput name="inputext" characterWidth={10}></TextInput>
+      </LabelContainer>
+    </FieldContainer>
+    <FieldContainer>
+      <LabelContainer>
+        <LabelTitle size="s">5 character width</LabelTitle>
+        <TextInput name="inputext" characterWidth={5}></TextInput>
+      </LabelContainer>
+    </FieldContainer>
+    <FieldContainer>
+      <LabelContainer>
+        <LabelTitle size="s">4 character width</LabelTitle>
+        <TextInput name="inputext" characterWidth={4}></TextInput>
+      </LabelContainer>
+    </FieldContainer>
+    <FieldContainer>
+      <LabelContainer>
+        <LabelTitle size="s">3 character width</LabelTitle>
+        <TextInput name="inputext" characterWidth={3}></TextInput>
+      </LabelContainer>
+    </FieldContainer>
+    <FieldContainer>
+      <LabelContainer>
+        <LabelTitle size="s">2 character width</LabelTitle>
+        <TextInput name="inputext" characterWidth={2}></TextInput>
+      </LabelContainer>
+    </FieldContainer>
+  </>
+);
+
+export default FixedWidths;

package/src/core/TextInput/__stories__/FluidWidths.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { TextInput } from '@digigov/ui/core/TextInput';
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
+import { LabelTitle } from '@digigov/ui/core/LabelContainer';
+
+export const FluidWidths = () => (
+  <>
+    <FieldContainer>
+      <LabelContainer>
+        <LabelTitle size="s">Full width</LabelTitle>
+        <TextInput name="inputext" cellWidth="full"></TextInput>
+      </LabelContainer>
+    </FieldContainer>
+    <FieldContainer>
+      <LabelContainer>
+        <LabelTitle size="s">Three-quarters width</LabelTitle>
+        <TextInput name="inputext" cellWidth="three-quarters"></TextInput>
+      </LabelContainer>
+    </FieldContainer>
+    <FieldContainer>
+      <LabelContainer>
+        <LabelTitle size="s">Two-thirds width</LabelTitle>
+        <TextInput name="inputext" cellWidth="two-thirds"></TextInput>
+      </LabelContainer>
+    </FieldContainer>
+    <FieldContainer>
+      <LabelContainer>
+        <LabelTitle size="s">One-half width</LabelTitle>
+        <TextInput name="inputext" cellWidth="one-half"></TextInput>
+      </LabelContainer>
+    </FieldContainer>
+    <FieldContainer>
+      <LabelContainer>
+        <LabelTitle size="s">One-third width</LabelTitle>
+        <TextInput name="inputext" cellWidth="one-third"></TextInput>
+      </LabelContainer>
+    </FieldContainer>
+    <FieldContainer>
+      <LabelContainer>
+        <LabelTitle size="s">One-quarter width</LabelTitle>
+        <TextInput name="inputext" cellWidth="one-quarter"></TextInput>
+      </LabelContainer>
+    </FieldContainer>
+  </>
+);
+
+export default FluidWidths;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TextInput } from '@digigov/ui/core/TextInput';
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
+
+export const MultipleQuestions = () => (
+  <FieldContainer>
+    <LabelContainer>
+      Όνομα επιχείρησης
+      <TextInput name="inputext"></TextInput>
+    </LabelContainer>
+  </FieldContainer>
+);
+
+export default MultipleQuestions;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TextInput } from '@digigov/ui/core/TextInput';
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
+import { LabelTitle } from '@digigov/ui/core/LabelContainer';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+
+export const WithErrorMessage = () => (
+  <FieldContainer error>
+    <LabelContainer>
+      <LabelTitle size="m">Όνομα επιχείρησης</LabelTitle>
+      <Hint>Ποιο είναι το όνομα της επιχείρησης;</Hint>
+      <ErrorMessage>Πρέπει να συμπληρώσετε το πεδίο.</ErrorMessage>
+      <TextInput error name="inputext"></TextInput>
+    </LabelContainer>
+  </FieldContainer>
+);
+
+export default WithErrorMessage;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TextInput } from '@digigov/ui/core/TextInput';
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
+import { LabelTitle } from '@digigov/ui/core/LabelContainer';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const WithHint = () => (
+  <FieldContainer>
+    <LabelContainer>
+      <LabelTitle size="m">Όνομα επιχείρησης</LabelTitle>
+      <Hint>Πρέπει να συμπληρώσετε το πεδίο.</Hint>
+      <TextInput name="inputext"></TextInput>
+    </LabelContainer>
+  </FieldContainer>
+);
+
+export default WithHint;

package/src/core/TextInput/index.mdx

@@ -0,0 +1,88 @@
+---
+id: text-input
+title: TextInput
+---
+
+# TextInput
+
+```bash
+import TextInput from '@digigov/ui/core/TextInput';
+```
+
+## How to use
+
+<Story
+  packageName="@digigov/ui"
+  component="core/TextInput"
+  story="Default.tsx"
+/>
+
+### If you’re asking more than one question on the page
+
+<Story
+  packageName="@digigov/ui"
+  component="core/TextInput"
+  story="MultipleQuestions.tsx"
+/>
+
+### Fixed width inputs
+
+Use fixed width inputs for content that has a specific, known length. Postcode inputs should be postcode-sized, telephone number inputs should be telephone number-sized.
+
+The widths are designed for specific character lengths and to be consistent across a range of browsers. They include extra padding to fit icons that some browsers might insert into the input (for example to show or generate a password).
+
+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="core/TextInput"
+  story="FixedWidths.tsx"
+/>
+
+### Fluid width inputs
+
+Fluid width inputs will resize with the viewport.
+
+<Story
+  packageName="@digigov/ui"
+  component="core/TextInput"
+  story="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="core/TextInput"
+  story="WithHint.tsx"
+/>
+
+## Numbers
+
+### Asking for whole numbers
+
+<Story
+  packageName="@digigov/ui"
+  component="core/TextInput"
+  story="AskingForNumbers.tsx"
+/>
+
+### Error message
+
+Error messages should be styled like this:
+
+<Story
+  packageName="@digigov/ui"
+  component="core/TextInput"
+  story="WithErrorMessage.tsx"
+/>
+
+### Disabled input
+
+<Story packageName="@digigov/ui" component="core/TextInput" story="DisabledInput.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="TextInput" />

package/src/core/TextInput/index.tsx

@@ -0,0 +1,3 @@
+export * from '@digigov/react-core/TextInput';
+import TextInput from '@digigov/react-core/TextInput';
+export default TextInput;

package/src/core/VisuallyHidden/VisuallyHidden.stories.js

@@ -0,0 +1,7 @@
+import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
+export default {
+  title: 'Digigov UI/core/VisuallyHidden',
+  component: VisuallyHidden,
+  displayName: 'VisuallyHidden',
+};
+export * from '@digigov/ui/core/VisuallyHidden/__stories__/Default';

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+
+import { Button, ButtonGroup } from '@digigov/ui/core/Button';
+
+import { Link } from '@digigov/ui/core/Link';
+
+export const Default = () => (
+  <>
+    <Paragraph>
+      Some element below is visually hidden. It's only accessible for screen
+      readers and any tools parsing the DOM.
+    </Paragraph>
+    <ButtonGroup>
+      <Button> Δοκιμή</Button>
+      <Link href="#">
+        Αλλαγή<VisuallyHidden> Διεύθυνσης</VisuallyHidden>
+      </Link>
+    </ButtonGroup>
+  </>
+);
+
+export default Default;

package/src/core/VisuallyHidden/index.mdx

@@ -0,0 +1,20 @@
+---
+id: visually-hidden
+title: VisuallyHidden
+---
+
+Use this component to convey meaning to people using screen readers, helping
+them access information and context.
+
+VisuallyHidden is a web accessibility technique used to hide content from the visual client, but keep it readable for screen readers.
+
+```bash
+import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
+```
+
+## How to use
+
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="VisuallyHidden" />

package/src/core/VisuallyHidden/index.tsx

@@ -0,0 +1,3 @@
+export * from '@digigov/react-core/VisuallyHidden';
+import VisuallyHidden from '@digigov/react-core/VisuallyHidden';
+export default VisuallyHidden;

package/src/core/WarningText/WarningText.stories.js

@@ -0,0 +1,10 @@
+import WarningText from '@digigov/ui/core/WarningText';
+export default {
+  title: 'Digigov UI/core/WarningText',
+  description:
+    'Use the warning text component when you need to warn users about something important, such as legal consequences of an action, or lack of action, that they might take.',
+  link: 'https://guide.services.gov.gr/docs/components/Warning-Text',
+  component: WarningText,
+  displayName: 'WarningText',
+};
+export * from '@digigov/ui/core/WarningText/__stories__/Default';