@digigov/ui 0.35.4 → 1.0.0-002c630d

package/src/form/AutoComplete/utils.ts

@@ -0,0 +1,301 @@
+export const keyCodes = {
+  13: 'enter',
+  27: 'escape',
+  32: 'space',
+  38: 'up',
+  40: 'down',
+};
+export function isIosDevice(): boolean | undefined {
+  return (
+    typeof navigator !== 'undefined' &&
+    !!(
+      navigator.userAgent.match(/(iPod|iPhone|iPad)/g) &&
+      navigator.userAgent.match(/AppleWebKit/g)
+    )
+  );
+}
+export function isPrintableKeyCode(keyCode: number): boolean {
+  return (
+    (keyCode > 47 && keyCode < 58) || // number keys
+    keyCode === 32 ||
+    keyCode === 8 || // spacebar or backspace
+    (keyCode > 64 && keyCode < 91) || // letter keys
+    (keyCode > 95 && keyCode < 112) || // numpad keys
+    (keyCode > 185 && keyCode < 193) || // ;=,-./` (in order)
+    (keyCode > 218 && keyCode < 223) // [\]' (in order)
+  );
+}
+
+/* Helper Utils for __stories__ */
+export const results = [
+  'Αφγανιστάν',
+  'Ακρωτήρι',
+  'Αλβανία',
+  'Αλγερία',
+  'Αμερικανική Σαμόα',
+  'Ανδόρα',
+  'Αγκόλα',
+  'Ανγκουίλα',
+  'Ανταρκτική',
+  'Αντίγκουα και Μπαρμπούντα',
+  'Αργεντινή',
+  'Αρμενία',
+  'Αρούμπα',
+  'Νήσοι Άσμορ και Καρτιέ',
+  'Αυστραλία',
+  'Αυστρία',
+  'Αζερμπαϊτζάν',
+  'Μπαχάμες, Οι',
+  'Μπαχρέιν',
+  'Μπαγκλαντές',
+  'Μπαρμπάντος',
+  'Ύφαλος Ινδίας',
+  'Λευκορωσία',
+  'Βέλγιο',
+  'Μπελίζ',
+  'Μπενίν',
+  'Βερμούδες',
+  'Μπουτάν',
+  'Βολιβία',
+  'Βοσνία-Ερζεγοβίνη',
+  'Μποτσουάνα',
+  'Νησί Μπουβέ',
+  'Βραζιλία',
+  'Βρετανικό Έδαφος Ινδικού Ωκεανού',
+  'Βρετανικές Παρθένοι Νήσοι',
+  'Μπρουνέι',
+  'Βουλγαρία',
+  'Μπουρκίνα Φάσο',
+  'Βιρμανία',
+  'Μπουρούντι',
+  'Καμπότζη',
+  'Καμερούν',
+  'Καναδάς',
+  'Πράσινο Ακρωτήριο',
+  'Νήσοι Κέιμαν',
+  'Κεντροαφρικανική Δημοκρατία',
+  'Τσαντ',
+  'Χιλή',
+  'Κίνα',
+  'Νήσος των Χριστουγέννων',
+  'Νήσος Κλίππερτο',
+  'Νησιά Κόκος (Κήλινγκ)',
+  'Κολομβία',
+  'Κομόρες',
+  'Κονγκό',
+  'Νήσοι Κουκ',
+  'Νησιά της Θάλασσας των Κοραλλιών',
+  'Κόστα Ρίκα',
+  'Ακτή Ελεφαντοστού',
+  'Κροατία',
+  'Κούβα',
+  'Κύπρος',
+  'Τσεχική Δημοκρατία',
+  'Δανία',
+  'Δεκέλεια',
+  'Τζιμπουτί',
+  'Δομινίκα',
+  'Δομινικανή Δημοκρατία',
+  'Εκουαδόρ',
+  'Αίγυπτος',
+  'Ελ Σαλβαδόρ',
+  'Ισημερινή Γουινέα',
+  'Ερυθραία',
+  'Εσθονία',
+  'Αιθιοπία',
+  'Νήσος Ευρώπη',
+  'Νήσοι Φόκλαντ',
+  'Νήσοι Φερόες',
+  'Φίτζι',
+  'Φινλανδία',
+  'Γαλλία',
+  'Γαλλική Γουιάνα',
+  'Γαλλική Πολυνησία',
+  ' Γαλλικά Νότια και Ανταρκτικά Εδάφη',
+  'Γκαμπόν',
+  'Γκάμπια',
+  'Λωρίδα της Γάζας',
+  'Γεωργία',
+  'Γερμανία',
+  'Γκάνα',
+  'Γιβραλτάρ',
+  'Ένδοξες Νήσοι',
+  'Ελλάδα',
+  'Γροιλανδία',
+  'Γρενάδα',
+  'Γουαδελούπη',
+  'Γκουάμ',
+  'Γουατεμάλα',
+  'Γκέρνζι',
+  'Γουινέα',
+  'Γουινέα-Μπισσάου',
+  'Γουιάνα',
+  'Αϊτή',
+  'Χερντ Νήσος και ΜακΝτόναλντ Νήσοι',
+  'Αγία Έδρα (Πόλη του Βατικανού)',
+  'Ονδούρα',
+  'Χονγκ Κονγκ',
+  'Ουγγαρία',
+  'Ισλανδία',
+  'Ινδία',
+  'Ινδονησία',
+  'Ιράν',
+  'Ιράκ',
+  'Ιρλανδία',
+  'Νήσος Μαν',
+  'Ισραήλ',
+  'Ιταλία',
+  'Τζαμάικα',
+  'Γιαν Μάγεν',
+  'Ιαπωνία',
+  'Τζέρσεϊ',
+  'Ιορδανία',
+  'Νήσος Χουάν ντε Νόβα',
+  'Καζακστάν',
+  'Κένυα',
+  'Κιριμπάτι',
+  'Βόρεια Κορέα',
+  'Νότια Κορέα',
+  'Κουβέιτ',
+  'Κιργιστάν',
+  'Λάος',
+  'Λετονία',
+  'Λίβανος',
+  'Λεσότο',
+  'Λιβερία',
+  'Λιβύη',
+  'Λιχτενστάιν',
+  'Λιθουανία',
+  'Λουξεμβούργο',
+  'Μακάο',
+  'Μακεδονία',
+  'Μαδαγασκάρη',
+  'Μαλάουι',
+  'Μαλαισία',
+  'Μαλδίβες',
+  'Μάλι',
+  'Μάλτα',
+  'Νήσοι Μάρσαλ',
+  'Μαρτινίκα',
+  'Μαυριτανία',
+  'Μαυρίκιος',
+  'Μαγιότ',
+  'Μεξικό',
+  'Μικρονησία, Ομόσπονδες Πολιτείες',
+  'Μολδαβία',
+  'Μονακό',
+  'Μογγολία',
+  'Μοντσερά',
+  'Μαρόκο',
+  'Μοζαμβίκη',
+  'Ναμίμπια',
+  'Ναουρού',
+  'Νήσος Ναβάσα',
+  'Νεπάλ',
+  'Ολλανδία',
+  'Ολλανδικές Αντίλλες',
+  'Νέα Καληδονία',
+  'Νέα Ζηλανδία',
+  'Νικαράγουα',
+  'Νίγηρας',
+  'Νιγηρία',
+  'Νίουε',
+  'Νήσος Νόρφολκ',
+  'Βόρειες Μαριάνες',
+  'Νορβηγία',
+  'Ομάν',
+  'Πακιστάν',
+  'Παλάου',
+  'Παναμάς',
+  'Παπούα Νέα Γουινέα',
+  'Νησιά Παρασέλ',
+  'Παραγουάη',
+  'Περού',
+  'Φιλιππίνες',
+  'Νήσοι Πίτκαιρν',
+  'Πολωνία',
+  'Πορτογαλία',
+  'Πουέρτο Ρίκο',
+  'Κατάρ',
+  'Ρεϋνιόν',
+  'Ρουμανία',
+  'Ρωσία',
+  'Ρουάντα',
+  'Αγία Ελένη',
+  'Άγιος Χριστόφορος και Νέβις',
+  'Αγία Λουκία',
+  'Σαιν-Πιερ και Μικελόν',
+  'Άγιος Βικέντιος και Γρεναδίνες',
+  'Σαμόα',
+  'Άγιος Μαρίνος',
+  'Σάο Τομέ και Πρίνσιπε',
+  'Σαουδική Αραβία',
+  'Σενεγάλη',
+  'Σερβία και Μαυροβούνιο',
+  'Σεϋχέλλες',
+  'Σιέρα Λεόνε',
+  'Σιγκαπούρη',
+  'Σλοβακία',
+  'Σλοβενία',
+  'Νήσοι Σολομώντος',
+  'Σομαλία',
+  'Νότια Αφρική',
+  'Νότια Γεωργία και Νότιες Σάντουιτς Νήσοι',
+  'Ισπανία',
+  'Nησιά Σπάρτλυ',
+  'Σρι Λάνκα',
+  'Σουδάν',
+  'Σουρινάμ',
+  'Αρχιπέλαγος Σβάλμπαρντ',
+  'Σουαζιλάνδη',
+  'Σουηδία',
+  'Ελβετία',
+  'Συρία',
+  'Ταϊβάν',
+  'Τατζικιστάν',
+  'Τανζανία',
+  'Ταϊλάνδη',
+  'Ανατολικό Τιμόρ',
+  'Τόγκο',
+  'Τοκελάου',
+  'Τόνγκα',
+  'Τρινιντάντ και Τομπάγκο',
+  'Νήσος Τρόμελιν',
+  'Τυνησία',
+  'Τουρκία',
+  'Τουρκμενιστάν',
+  'Νήσοι Τερκς και Κάικος',
+  'Τουβαλού',
+  'Ουγκάντα',
+  'Ουκρανία',
+  'Ηνωμένα Αραβικά Εμιράτα',
+  'Ηνωμένο Βασίλειο',
+  'Ηνωμένες Πολιτείες',
+  'Ουρουγουάη',
+  'Ουζμπεκιστάν',
+  'Βανουάτου',
+  'Βενεζουέλα',
+  'Βιετνάμ',
+  'Παρθένοι Νήσοι',
+  'Νήσος Γουέικ',
+  'Ουώλλις και Φουτούνα',
+  'Δυτική Όχθη',
+  'Δυτική Σαχάρα',
+  'Υεμένη',
+  'Ζάμπια',
+  'Ζιμπάμπουε',
+];
+
+export function suggest(
+  query: string,
+  syncResults: (options: string[]) => void
+): void {
+  syncResults(
+    query
+      ? results.filter(function (result) {
+          return result.toLowerCase().indexOf(query.toLowerCase()) !== -1;
+        })
+      : []
+  );
+}
+/* end Helpers Utils __stories__ */

package/src/form/Button/Button.stories.js

@@ -0,0 +1,22 @@
+/* eslint-disable digigov/no-relative-imports */
+import Button from '@digigov/ui/form/Button';
+
+export default {
+  title: 'Digigov UI/form/Button',
+  description: 'Use the button component to help users carry out an action',
+  link: 'https://guide.services.gov.gr/docs/components/button',
+  component: Button,
+  displayName: 'Button',
+};
+
+export * from './__stories__/Primary';
+export * from './__stories__/Secondary';
+export * from './__stories__/Warning';
+export * from './__stories__/GroupingButtons';
+export * from './__stories__/GroupingButtonsAndLinks';
+export * from './__stories__/CallToActionButton';
+export * from './__stories__/Disabled';
+export * from './__stories__/ButtonLinkButton';
+export * from './__stories__/Back';
+export * from './__stories__/WithVariantLink';
+export * from './__stories__/ThemeToggle';

package/src/form/Button/__stories__/Back.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BackButton } from '@digigov/ui/form/Button/BackButton';
+
+export const Back = () => (
+  <BackButton href="#" role="button" aria-label="Πίσω στην προηγούμενη σελίδα">
+    Πίσω
+  </BackButton>
+);
+export default BackButton;

package/src/form/Button/__stories__/ButtonLinkButton.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ButtonLink } from '@digigov/ui/form/Button/ButtonLink';
+
+/**
+ * My primary descrition is the best description that was described
+ */
+export const ButtonLinkButton = () => (
+  <ButtonLink
+    href="#"
+    role="button"
+    aria-label="Συνεχίστε στην επόμενη σελίδα"
+    tabIndex={0}
+  >
+    Συνέχεια
+  </ButtonLink>
+);
+export default ButtonLinkButton;

package/src/form/Button/__stories__/CallToActionButton.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { CallToAction } from '@digigov/ui/form/Button/CallToAction';
+
+/**
+ * My primary descrition is the best description that was described
+ */
+export const CallToActionButton = () => (
+  <CallToAction
+    href="#"
+    role="button"
+    aria-label="Είσοδος στην υπηρεσία"
+    tabIndex={0}
+  >
+    Είσοδος
+  </CallToAction>
+);
+export default CallToActionButton;

package/src/form/Button/__stories__/Disabled.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Button } from '@digigov/ui/form/Button';
+
+export const Disabled = () => (
+  <Button disabled role="button" aria-label="Αποθήκευση αρχείου">
+    Αποθήκευση
+  </Button>
+);
+
+export default Disabled;

package/src/form/Button/__stories__/GroupingButtons.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Button, ButtonGroup } from '@digigov/ui/form/Button';
+
+/**
+ * My deescrition is the best description that was described
+ */
+export const GroupingButtons = () => (
+  <ButtonGroup>
+    <Button>Οριστική υποβολή</Button>
+    <Button color="secondary">Αποθήκευση</Button>
+  </ButtonGroup>
+);
+export default GroupingButtons;

package/src/form/Button/__stories__/GroupingButtonsAndLinks.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Button, ButtonGroup } from '@digigov/ui/form/Button';
+
+import { Link } from '@digigov/ui/navigation/Link';
+
+/**
+ * My deescrition is the best description that was described
+ */
+export const GroupingButtonsAndLinks = () => (
+  <ButtonGroup>
+    <Button aria-label="Συνεχίστε στην επόμενη σελίδα">Συνέχεια</Button>
+    <Link>Ακύρωση</Link>
+  </ButtonGroup>
+);
+export default GroupingButtonsAndLinks;

package/src/form/Button/__stories__/Primary.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Button } from '@digigov/ui/form/Button';
+
+/**
+ * My primary descrition is the best description that was described
+ */
+export const Primary = () => (
+  <Button aria-label="Συνεχίστε στην επόμενη σελίδα">Συνέχεια</Button>
+);
+export default Primary;

package/src/form/Button/__stories__/Secondary.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button } from '@digigov/ui/form/Button';
+
+/**
+ * My primary descrition is the best description that was described
+ */
+export const Secondary = () => (
+  <Button color="secondary" aria-label="Συνεχίστε στην επόμενη σελίδα">
+    Συνέχεια
+  </Button>
+);
+export default Secondary;

package/src/form/Button/__stories__/ThemeToggle.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ThemeToggleButton } from '@digigov/ui/form/Button/ThemeToggleButton';
+
+export const ThemeToggle = () => <ThemeToggleButton />;
+export default ThemeToggle;

package/src/form/Button/__stories__/Warning.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Button } from '@digigov/ui/form/Button';
+
+export const Warning = () => {
+  return (
+    <Button color="warning" aria-label="Διαγραφή αρχείου">
+      Διαγραφή
+    </Button>
+  );
+};
+export default Warning;

package/src/form/Button/__stories__/WithVariantLink.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Button } from '@digigov/ui/form/Button';
+
+/**
+ * My primary descrition is the best description that was described
+ */
+export const WithVariantLink = () => (
+  <Button
+    onClick={() => {
+      console.log('clicked');
+    }}
+    variant="link"
+    aria-label="Συνεχίστε στην επόμενη σελίδα"
+  >
+    Συνέχεια
+  </Button>
+);
+export default WithVariantLink;

package/src/form/Button/index.mdx

@@ -0,0 +1,113 @@
+---
+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 Select
+implementation in the ARIA Authoring Practices Guide (APG) at
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Button" />

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+
+import Component from '@digigov/ui/form/Button';
+
+it('renders the button', () => {
+  expect(mount(<Component>hello</Component>)).toMatchSnapshot();
+});

package/src/form/Button/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import Button, { ButtonProps } from '@digigov/react-core/Button';
+
+export * from '@digigov/react-core/Button';
+export interface ContinueButtonProps extends ButtonProps {
+  label?: string;
+  ref?: React.Ref<HTMLButtonElement>;
+}
+
+export const ContinueButton: React.FC<ContinueButtonProps> = ({
+  label = 'Continue',
+  children,
+  ...props
+}) => {
+  return <Button {...props}>{label || children}</Button>;
+};
+
+export * from '@digigov/ui/form/Button/BackButton';
+export * from '@digigov/ui/form/Button/CallToAction';
+export * from '@digigov/ui/form/Button/ButtonLink';
+export * from '@digigov/ui/form/Button/Icon';
+export * from '@digigov/ui/form/Button/ThemeToggleButton';
+export * from '@digigov/react-core/ButtonGroup';
+export default Button;

package/src/form/Checkbox/Checkbox.stories.js

@@ -0,0 +1,16 @@
+import Checkbox from '@digigov/ui/form/Checkbox';
+export default {
+  title: 'Digigov UI/form/Checkbox',
+  description:
+    'Let users select one or more options by using the checkboxes component.',
+  link: 'https://guide.services.gov.gr/docs/components/checkboxes',
+  component: Checkbox,
+  displayName: 'Checkbox',
+};
+export * from '@digigov/ui/form/Checkbox/__stories__/Default';
+export * from '@digigov/ui/form/Checkbox/__stories__/MultipleQuestions';
+export * from '@digigov/ui/form/Checkbox/__stories__/WithHint';
+export * from '@digigov/ui/form/Checkbox/__stories__/NoneAnswer';
+export * from '@digigov/ui/form/Checkbox/__stories__/NoneAnswerWithError';
+export * from '@digigov/ui/form/Checkbox/__stories__/WithErrorMessage';
+export * from '@digigov/ui/form/Checkbox/__stories__/ConditionalReveal';