@digigov/ui 0.28.3 → 0.29.0

package/src/core/Accordion/index.tsx

@@ -0,0 +1,85 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React from 'react';
+import Accordion from '@digigov/react-core/Accordion';
+import AccordionSection from '@digigov/react-core/AccordionSection';
+import AccordionSectionContent from '@digigov/react-core/AccordionSectionContent';
+import AccordionSectionSummaryHeading from '@digigov/react-core/AccordionSectionSummaryHeading';
+import AccordionSectionSummary from '@digigov/react-core/AccordionSectionSummary';
+import AccordionControls from '@digigov/react-core/AccordionControls';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+import {
+  useTogglableSections,
+  UseTogglableSectionsReturn,
+} from '@digigov/ui/hooks/useTogglableSections';
+
+export const AccordionItemDetails = withDeprecation(AccordionSectionContent, {
+  name: 'AccordionItemDetails',
+  rename: 'AccordionSectionContent',
+});
+
+export const AccordionItemSummary = withDeprecation(
+  ({ children, ...props }) => {
+    return (
+      <AccordionSectionSummary {...props}>
+        <AccordionSectionSummaryHeading>
+          {children}
+        </AccordionSectionSummaryHeading>
+      </AccordionSectionSummary>
+    );
+  },
+  {
+    name: 'AccordionItemSummary',
+    warning:
+      'There is no need to use AccordionSectionHeader components anymore. It will be removed in a later version and impelented using AccordionSectionSummary and AccordionSectionSummaryHeading',
+  }
+);
+
+export const AccordionItem = withDeprecation(
+  React.memo(AccordionSection, (prev, next) => prev.open === next.open),
+  {
+    name: 'AccordionItem',
+    rename: 'AccordionSection',
+  }
+);
+export interface UseAccordionProps {
+  singleOpen?: boolean;
+}
+export interface UseAccordionReturn extends UseTogglableSectionsReturn {}
+const useAccordion = (props: UseAccordionProps): UseAccordionReturn => {
+  const {
+    register,
+    setOpened,
+    opened,
+    registered,
+    ...rest
+  } = useTogglableSections({
+    toggleProperty: 'open',
+    onToggleProperty: 'onToggle',
+    singleOpen: props && !!props.singleOpen,
+  });
+
+  return {
+    register,
+    setOpened,
+    opened,
+    registered,
+    ...rest,
+  };
+};
+export * from '@digigov/react-core/Accordion';
+export * from '@digigov/react-core/AccordionControls';
+export * from '@digigov/react-core/AccordionSection';
+export * from '@digigov/react-core/AccordionSectionHeader';
+export * from '@digigov/react-core/AccordionSectionContent';
+export * from '@digigov/react-core/AccordionSectionSummary';
+export * from '@digigov/react-core/AccordionSectionSummaryHeading';
+export {
+  Accordion,
+  AccordionControls,
+  AccordionSection,
+  AccordionSectionContent,
+  AccordionSectionSummary,
+  AccordionSectionSummaryHeading,
+  useAccordion,
+};
+export default Accordion;

package/src/core/BackLink/BackLink.stories.js

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

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

@@ -0,0 +1,21 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-core-backlink--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>a"
+              }
+            }
+          ],
+          "id": "a_FlKpwUM63r",
+          "title": "Click link"
+        }
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { BackLink } from '@digigov/ui/core/Button/BackLink';
+
+export const Default = () => <BackLink href="#">Back</BackLink>;
+
+export default Default;

package/src/core/BackLink/index.mdx

@@ -0,0 +1,20 @@
+---
+id: back-link
+title: Back Link
+---
+
+# Back Link
+
+Use the back link component to help users go back to the previous page in a multi-page transaction.
+
+```bash
+import BackLink from "@digigov/ui/core/BackLink";
+```
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/BackLink" story="Default.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="BackLink" />

package/src/core/BackLink/index.tsx

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

package/src/core/Base/index.tsx

@@ -0,0 +1,4 @@
+import Base from '@digigov/react-core/Base';
+
+export default Base;
+export { Base };

package/src/core/Blockquote/Blockquote.stories.js

@@ -0,0 +1,10 @@
+import Blockquote from '@digigov/ui/core/Blockquote';
+export default {
+  title: 'Digigov UI/core/Blockquote',
+  description:
+    'Use the inset text component to differentiate a block of text from the content that surrounds it',
+  link: 'https://guide.services.gov.gr/docs/components/blockquote',
+  component: Blockquote,
+  displayName: 'Blockquote',
+};
+export * from '@digigov/ui/core/Blockquote/__stories__/Default';

package/src/core/Blockquote/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Blockquote with sample data 1`] = `
+<withDeprecationComponent>
+  <ForwardRef(Blockquote)>
+    <blockquote
+      className="govgr-blockquote"
+    >
+      this is some random data
+    </blockquote>
+  </ForwardRef(Blockquote)>
+</withDeprecationComponent>
+`;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Blockquote } from '@digigov/ui/core/Blockquote';
+
+export const Default = () => (
+  <Blockquote>
+    Η διαδικασία έκδοσης του διαβατηρίου σας μπορεί να διαρκέσει εώς 10 μέρες,
+    εφόσον η αίτηση σας δεν έχει λάθη.
+  </Blockquote>
+);
+
+export default Default;

package/src/core/Blockquote/index.mdx

@@ -0,0 +1,23 @@
+---
+id: blockquote
+title: Blockquote
+---
+
+# Blockquote
+
+This component is currently experimental because adding a summary line with more than a few short words will likely make the button text too long, particularly for users of screen readers.
+
+The Blockquote component lets users show and hide sections of related content on a page.
+
+```bash
+import Blockquote from '@digigov/ui/core/Blockquote';
+```
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Blockquote" story="Default.tsx" />
+
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Blockquote" />

package/src/core/Blockquote/index.spec.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+
+import Component from '@digigov/ui/core/Blockquote';
+
+it('renders the Blockquote with sample data', () => {
+  expect(
+    mount(<Component>this is some random data</Component>)
+  ).toMatchSnapshot();
+});

package/src/core/Blockquote/index.tsx

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

package/src/core/Breadcrumbs/Breadcrumbs.stories.js

@@ -0,0 +1,10 @@
+import Breadcrumbs from '@digigov/ui/core/Breadcrumbs';
+export default {
+  title: 'Digigov UI/core/Breadcrumbs',
+  description:
+    'Use the breadcrumbs component when you need to help users understand and move between the multiple levels of a website',
+  link: 'https://guide.services.gov.gr/docs/components/breadcrumbs',
+  component: Breadcrumbs,
+  displayName: 'Breadcrumbs',
+};
+export * from '@digigov/ui/core/Breadcrumbs/__stories__/Default';

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

@@ -0,0 +1,33 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-core-breadcrumbs--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "hover",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>nav>ol>li:nth-child(1)>a"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>nav>ol>li:nth-child(1)>a"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            }
+          ],
+          "id": "e5Uhj3zx5pff",
+          "title": "Hover and click"
+        }
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import {
+  Breadcrumbs,
+  BreadcrumbsList,
+  BreadcrumbsListItem,
+} from '@digigov/ui/core/Breadcrumbs';
+
+export const Default = () => (
+  <Breadcrumbs role="navigation" aria-label="Breadcrumb">
+    <BreadcrumbsList>
+      <BreadcrumbsListItem href="#">Αρχική</BreadcrumbsListItem>
+      <BreadcrumbsListItem href="#">Υγεία και πρόνοια</BreadcrumbsListItem>
+      <BreadcrumbsListItem href="#">Φάκελος υγείας</BreadcrumbsListItem>
+      <BreadcrumbsListItem href="#" aria-current="page">
+        Άυλη συνταγογράφηση
+      </BreadcrumbsListItem>
+    </BreadcrumbsList>
+  </Breadcrumbs>
+);
+
+export default Default;

package/src/core/Breadcrumbs/breadcrumbs.mdx

@@ -0,0 +1,22 @@
+---
+id: breadcrumbs
+title: Breadcrumbs
+---
+
+# Breadcrumbs
+
+This component is currently experimental because adding a summary line with more than a few short words will likely make the button text too long, particularly for users of screen readers.
+
+The Breadcrumbs component lets users show and hide sections of related content on a page.
+
+```bash
+import Breadcrumbs from '@digigov/ui/core/Breadcrumbs';
+```
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Breadcrumbs" story="Default.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Breadcrumbs" />

package/src/core/Breadcrumbs/index.tsx

@@ -0,0 +1,5 @@
+export * from '@digigov/react-core/Breadcrumbs';
+export * from '@digigov/react-core/BreadcrumbsList';
+export * from '@digigov/react-core/BreadcrumbsListItem';
+import Breadcrumbs from '@digigov/react-core/Breadcrumbs';
+export default Breadcrumbs;

package/src/core/Button/BackButton.tsx

@@ -0,0 +1,23 @@
+import BackLink from '@digigov/react-core/BackLink';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+
+export const BackButton = withDeprecation(BackLink, {
+  name: 'BackButton',
+  rename: 'BackLink',
+  props: {
+    variant: {
+      error: true,
+    },
+    size: {
+      error: true,
+    },
+    xsFullWidth: {
+      error: true,
+    },
+    startIcon: {
+      error: true,
+    },
+  },
+});
+
+export default BackButton;

package/src/core/Button/BackLink.tsx

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

package/src/core/Button/Button.stories.js

@@ -0,0 +1,22 @@
+/* eslint-disable digigov/no-relative-imports */
+import Button from '@digigov/ui/core/Button';
+
+export default {
+  title: 'Digigov UI/core/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/core/Button/Button.stories.playwright.json

@@ -0,0 +1,115 @@
+{
+  "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/core/Button/ButtonLink.tsx

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

package/src/core/Button/CallToAction.tsx

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

package/src/core/Button/Icon.tsx

@@ -0,0 +1,9 @@
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export const ButtonIcon = withDeprecation(() => {}, {
+  name: 'ButtonIcon',
+  error: true,
+});
+
+export default ButtonIcon;

package/src/core/Button/ThemeToggleButton.tsx

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react';
+import Button from '@digigov/react-core/Button';
+
+export const ThemeToggleButton = () => {
+  const [theme, setTheme] = useState(() => {
+    const currentTheme = localStorage.getItem('theme');
+    const prefersScheme = window.matchMedia('(prefers-color-scheme: dark)')
+      .matches
+      ? 'dark'
+      : 'light';
+    return currentTheme || prefersScheme || 'light';
+  });
+
+  function toggleTheme() {
+    if (theme === 'light') {
+      setTheme('dark');
+    } else {
+      setTheme('light');
+    }
+  }
+  useEffect(() => {
+    localStorage.setItem('theme', theme);
+    document.documentElement.className = theme;
+  }, [theme]);
+  useEffect(() => {
+    const beforePrintListener = () => {
+      document.documentElement.className = 'light';
+    };
+    const afterPrintListener = () => {
+      document.documentElement.className =
+        localStorage.getItem('theme') || theme;
+    };
+    window.addEventListener('beforeprint', beforePrintListener);
+    window.addEventListener('afterprint', afterPrintListener);
+    return () => {
+      window.removeEventListener('beforeprint', beforePrintListener);
+      window.removeEventListener('afterprint', afterPrintListener);
+    };
+  }, []);
+
+  return (
+    <Button
+      onClick={toggleTheme}
+      variant="link"
+      role="button"
+      aria-label="Αντιστροφή χρωμάτων"
+    >
+      Αντιστροφή χρωμάτων
+    </Button>
+  );
+};
+export default ThemeToggleButton;

package/src/core/Button/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the button 1`] = `
+<withDeprecationComponent>
+  <ForwardRef(Button)>
+    <button
+      className="govgr-btn-primary govgr-btn"
+    >
+      hello
+    </button>
+  </ForwardRef(Button)>
+</withDeprecationComponent>
+`;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BackButton } from '@digigov/ui/core/Button/BackButton';
+
+export const Back = () => (
+  <BackButton href="#" role="button" aria-label="Συνεχίστε στην επόμενη σελίδα">
+    Συνέχεια
+  </BackButton>
+);
+export default BackButton;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ButtonLink } from '@digigov/ui/core/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/core/Button/__stories__/CallToActionButton.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { CallToAction } from '@digigov/ui/core/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/core/Button/__stories__/Disabled.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Button } from '@digigov/ui/core/Button';
+
+/**
+ * My primary descrition is the best description that was described
+ */
+export const Disabled = () => <Button disabled>Συνέχεια</Button>;
+export default Disabled;

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

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