@digigov/ui 0.35.4 → 1.0.0-rc

package/esm/app/Loader/index.js

@@ -0,0 +1,5 @@
+export * from '@digigov/react-core/LoaderContainer';
+export * from '@digigov/react-core/CircularProgress';
+export * from '@digigov/react-core/FullPageBackground';
+import LoaderContainer from '@digigov/react-core/LoaderContainer';
+export default LoaderContainer;

package/esm/app/Masthead/Masthead.stories.js

@@ -0,0 +1,10 @@
+import Masthead from '@digigov/ui/app/Masthead';
+export default {
+  title: 'Digigov UI/app/Masthead',
+  description: 'You can use the masthead at the top of the first page of a GOV.GR service, not at internal pages.',
+  link: 'https://guide.services.gov.gr/docs/components/masthead',
+  defaultWidth: 'lg',
+  component: Masthead,
+  displayName: 'Masthead'
+};
+export * from '@digigov/ui/app/Masthead/__stories__/Default';

package/esm/app/Masthead/Masthead.stories.playwright.json

@@ -0,0 +1,21 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-app-masthead--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "hover",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div>div>main>a"
+              }
+            }
+          ],
+          "id": "RjiejhT6-wyP",
+          "title": "Hover"
+        }
+      ]
+    }
+  }
+}

package/esm/app/Masthead/__stories__/Default.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CallToAction } from '@digigov/ui/form/Button/CallToAction';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Masthead, MastheadBody } from '@digigov/ui/layouts/Basic/Masthead';
+import { Heading } from '@digigov/ui/typography/Heading';
+
+var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Main, null, /*#__PURE__*/React.createElement(Heading, null, "\u03A3\u03C7\u03B5\u03B4\u03B9\u03AC\u03C3\u03C4\u03B5 \u03C4\u03B7\u03BD \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u03C3\u03B1\u03C2, \u03BC\u03B5 \u03C4\u03BF \u03C3\u03C4\u03C5\u03BB \u03C4\u03BF\u03C5 GOV.GR"), /*#__PURE__*/React.createElement(MastheadBody, null, "\u03A7\u03C1\u03B7\u03C3\u03B9\u03BC\u03BF\u03C0\u03BF\u03B9\u03B5\u03AF\u03C3\u03C4\u03B5 \u03B1\u03C5\u03C4\u03CC\u03BD \u03C4\u03BF\u03BD \u03BF\u03B4\u03B7\u03B3\u03CC \u03CE\u03C3\u03C4\u03B5 \u03BD\u03B1 \u03C6\u03C4\u03B9\u03AC\u03BE\u03B5\u03C4\u03B5 \u03BC\u03B9\u03B1 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u03C3\u03C5\u03BD\u03B5\u03C0\u03AE \u03C3\u03C4\u03B1 \u03C0\u03C1\u03CC\u03C4\u03C5\u03C0\u03B1 \u03C4\u03BF\u03C5 GOV.GR. \u0391\u03C0\u03BF\u03BA\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B3\u03BD\u03CE\u03C3\u03B7 \u03B1\u03C0\u03CC \u03C4\u03B7\u03BD \u03AD\u03C1\u03B5\u03C5\u03BD\u03B1 \u03BA\u03B1\u03B9 \u03C4\u03B7\u03BD \u03B5\u03BC\u03C0\u03B5\u03B9\u03C1\u03AF\u03B1 \u03AC\u03BB\u03BB\u03C9\u03BD \u03BF\u03BC\u03AC\u03B4\u03C9\u03BD \u03BA\u03B1\u03B9 \u03B1\u03C0\u03BF\u03C6\u03CD\u03B3\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B5\u03C0\u03B1\u03BD\u03AC\u03BB\u03B7\u03C8\u03B7 \u03B5\u03C1\u03B3\u03B1\u03C3\u03B9\u03CE\u03BD \u03C0\u03BF\u03C5 \u03AD\u03C7\u03BF\u03C5\u03BD \u03AE\u03B4\u03B7 \u03B3\u03AF\u03BD\u03B5\u03B9."), /*#__PURE__*/React.createElement(CallToAction, {
+  href: "#"
+}, "\u039E\u03B5\u03BA\u03B9\u03BD\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE"))));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/esm/app/Masthead/index.js

@@ -0,0 +1,5 @@
+export * from '@digigov/react-core/Masthead';
+export * from '@digigov/react-core/MastheadBody';
+export * from '@digigov/react-core/MastheadLogo';
+import Masthead from '@digigov/react-core/Masthead';
+export default Masthead;

package/esm/app/Masthead/index.mdx

@@ -0,0 +1,18 @@
+---
+id: masthead
+title: Masthead
+---
+
+# Masthead
+
+```bash
+import Masthead from '@digigov/ui/app/Masthead';
+```
+
+## How to use
+
+<Story packageName="@digigov/ui" component="app/Masthead" story="Default.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Masthead" />

package/esm/app/Modal/Modal.stories.js

@@ -0,0 +1,10 @@
+import Modal from '@digigov/ui/app/Modal';
+export default {
+  title: 'Digigov UI/app/Modal',
+  description: 'Use the modal component with caution when you need to provide critical information or ask for a decision.',
+  link: 'https://guide.services.gov.gr/docs/patterns/admin-pages/components/modal',
+  component: Modal,
+  displayName: 'Modal'
+};
+export * from '@digigov/ui/app/Modal/__stories__/Default';
+export * from '@digigov/ui/app/Modal/__stories__/AlertDialog';

package/esm/app/Modal/__stories__/AlertDialog.js

@@ -0,0 +1,39 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import { Modal, ModalHeading, ModalContent, ModalAction } from '@digigov/ui/app/Modal';
+import { Button } from '@digigov/ui/form/Button';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+
+var _ref = /*#__PURE__*/React.createElement(ModalHeading, {
+  id: "modal-label"
+}, "\u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7");
+
+var _ref2 = /*#__PURE__*/React.createElement(ModalContent, {
+  id: "modal-content"
+}, /*#__PURE__*/React.createElement(Paragraph, null, "\u0395\u03AF\u03C3\u03C4\u03B5 \u03C3\u03AF\u03B3\u03BF\u03C5\u03C1\u03BF\u03B9 \u03CC\u03C4\u03B9 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B9\u03B1\u03B3\u03C1\u03AC\u03C8\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B5\u03B3\u03B3\u03C1\u03B1\u03C6\u03AE;"));
+
+var _ref3 = /*#__PURE__*/React.createElement(Button, null, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE");
+
+export var AlertDialog = function AlertDialog() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      setOpen(!open);
+    }
+  }, "\u0386\u03BD\u03BF\u03B9\u03BE\u03B5 Modal"), /*#__PURE__*/React.createElement(Modal, {
+    open: open,
+    role: "alertdialog",
+    "aria-labelledby": "modal-label",
+    "aria-describedby": "modal-content"
+  }, _ref, _ref2, /*#__PURE__*/React.createElement(ModalAction, null, _ref3, /*#__PURE__*/React.createElement(Button, {
+    variant: "link",
+    onClick: function onClick() {
+      setOpen(!open);
+    }
+  }, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))));
+};
+export default AlertDialog;

package/esm/app/Modal/__stories__/Default.js

@@ -0,0 +1,40 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import { Modal, ModalHeading, ModalContent, ModalAction } from '@digigov/ui/app/Modal';
+import { Button } from '@digigov/ui/form/Button';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer } from '@digigov/ui/form/LabelContainer';
+import { TextInput } from '@digigov/ui/form/TextInput';
+
+var _ref = /*#__PURE__*/React.createElement(ModalHeading, {
+  id: "modal-label"
+}, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5");
+
+var _ref2 = /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, "\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2", /*#__PURE__*/React.createElement(TextInput, {
+  name: "inputext",
+  characterWidth: 10
+}))));
+
+var _ref3 = /*#__PURE__*/React.createElement(Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE");
+
+export var Default = function Default() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      setOpen(!open);
+    }
+  }, "\u0386\u03BD\u03BF\u03B9\u03BE\u03B5 Modal"), /*#__PURE__*/React.createElement(Modal, {
+    open: open,
+    "aria-labelledby": "modal-label"
+  }, _ref, _ref2, /*#__PURE__*/React.createElement(ModalAction, null, _ref3, /*#__PURE__*/React.createElement(Button, {
+    variant: "link",
+    onClick: function onClick() {
+      setOpen(!open);
+    }
+  }, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))));
+};
+export default Default;

package/esm/app/Modal/index.js

@@ -0,0 +1,93 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["open", "children", "onEscape"];
+export * from '@digigov/react-core/ModalContainer';
+export * from '@digigov/react-core/ModalHeading';
+export * from '@digigov/react-core/ModalContent';
+export * from '@digigov/react-core/ModalAction';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import ModalContainer from '@digigov/react-core/ModalContainer';
+import useKeypress from '@digigov/ui/utils/hooks/useKeypress';
+export var useModal = function useModal() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      modalData = _useState4[0],
+      setModalData = _useState4[1];
+
+  function toggleModal(data) {
+    setOpen(!open);
+
+    if (data) {
+      setModalData(data);
+    }
+  }
+
+  var closeModal = useCallback(function closeModal() {
+    setOpen(false);
+  }, []);
+  return {
+    toggleModal: toggleModal,
+    closeModal: closeModal,
+    modalData: modalData,
+    modalProps: {
+      onEscape: closeModal,
+      open: open,
+      role: 'dialog',
+      'aria-modal': 'true'
+    }
+  };
+};
+export var Modal = /*#__PURE__*/React.forwardRef(function Modal(_ref, ref) {
+  var props = _extends({}, _ref);
+
+  if (props.open) {
+    return /*#__PURE__*/React.createElement(ModalBase, _extends({
+      ref: ref
+    }, props));
+  } else {
+    return null;
+  }
+});
+export var ModalBase = /*#__PURE__*/React.forwardRef(function ModalBase(_ref2, ref) {
+  var open = _ref2.open,
+      children = _ref2.children,
+      onEscape = _ref2.onEscape,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  var firstModalElement = useRef();
+  var lastModalElement = useRef();
+  var handleFocus = useCallback(function () {
+    firstModalElement.current.focus();
+  }, []);
+  useKeypress('Escape', onEscape);
+  useEffect(function () {
+    handleFocus();
+    lastModalElement.current.addEventListener('focus', handleFocus);
+    return function () {
+      lastModalElement.current.removeEventListener('focus', handleFocus);
+    };
+  }, [open]);
+  return /*#__PURE__*/React.createElement(ModalContainer, _extends({
+    open: open,
+    role: "dialog",
+    ref: ref
+  }, props, {
+    "aria-hidden": "false",
+    "aria-modal": "true"
+  }), /*#__PURE__*/React.createElement("span", {
+    tabIndex: -1,
+    ref: firstModalElement,
+    "aria-hidden": "true"
+  }), open && children, /*#__PURE__*/React.createElement("span", {
+    tabIndex: 0,
+    ref: lastModalElement,
+    "aria-hidden": "true"
+  }));
+});
+export default Modal;

package/esm/app/Modal/index.mdx

@@ -0,0 +1,33 @@
+---
+id: modal
+title: Modal
+---
+
+```bash
+import Modal, {ModalHeading, ModalContent, ModalAction} from "@digigov/ui/app/Modal";
+```
+
+## How to use
+
+### As a Dialog
+
+<Story packageName="@digigov/ui" component="app/Modal" story="Default.tsx" />
+
+### As an Alert Dialog
+
+<Story
+  packageName="@digigov/ui"
+  component="app/Modal"
+  story="AlertDialog.tsx"
+/>
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Modal
+implementation in the ARIA Authoring Practices Guide (APG) at
+[Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/) and
+[Alert Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/) sections.
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Modal" />

package/esm/app/NotFound/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PageTitle from '@digigov/react-core/PageTitle';
 import PageTitleHeading from '@digigov/react-core/PageTitleHeading';
 import Paragraph from '@digigov/react-core/Paragraph';
-import { useTranslation } from '@digigov/ui/app';
+import { useTranslation } from '@digigov/ui/i18n';
 export var NotFound = function NotFound() {
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;

package/esm/app/OutdatedBrowserBanner/hooks/useOutdatedBrowserCheck.js

@@ -0,0 +1,47 @@
+import evaluateBrowserVersion from '@digigov/ui/app/OutdatedBrowserBanner/hooks/evaluateBrowserVersion';
+var DEFAULT_BROWSER_SUPPORT = {
+  Chrome: 57,
+  // Includes Chrome for mobile devices
+  Edge: 39,
+  Safari: 10,
+  'Mobile Safari': 10,
+  Firefox: 50,
+  Opera: 50,
+  IE: false
+};
+var browserUpdateLinks = {
+  Chrome: 'https://www.google.com/chrome/',
+  Edge: 'https://www.microsoft.com/en-us/edge',
+  Safari: 'https://www.apple.com/safari/',
+  'Mobile Safari': 'https://www.apple.com/safari/',
+  Firefox: 'https://www.mozilla.org/en-US/firefox/new/',
+  Opera: 'https://www.opera.com/download'
+};
+var browserNames = Object.keys(DEFAULT_BROWSER_SUPPORT);
+export function useOutdatedBrowserCheck() {
+  var browserSupport = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_BROWSER_SUPPORT;
+  var currentBrowser = evaluateBrowserVersion();
+
+  if (!currentBrowser.version || !currentBrowser.name) {
+    return [true, browserUpdateLinks.Chrome];
+  }
+
+  var currentBrowserVersion = parseInt(currentBrowser.version);
+  var currentBrowserName = currentBrowser.name;
+
+  if (browserNames.indexOf(currentBrowser.name) > -1) {
+    if (browserSupport[currentBrowserName] === false) {
+      return [true, browserUpdateLinks.Chrome];
+    } else {
+      if (currentBrowserVersion >= browserSupport[currentBrowserName]) {
+        //TODO: check if number
+        return [false, ''];
+      } else {
+        return [true, browserUpdateLinks[currentBrowserName]];
+      }
+    }
+  } else {
+    return [true, browserUpdateLinks.Chrome];
+  }
+}
+export default useOutdatedBrowserCheck;

package/esm/app/OutdatedBrowserBanner/index.js

@@ -0,0 +1,25 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from 'react';
+import { isMobile } from '@digigov/ui/app/OutdatedBrowserBanner/hooks/evaluateBrowserVersion';
+import useOutdatedBrowserCheck from '@digigov/ui/app/OutdatedBrowserBanner/hooks/useOutdatedBrowserCheck';
+import { WarningText } from '@digigov/ui/feedback/WarningText';
+import { useTranslation } from '@digigov/ui/i18n';
+import Link from '@digigov/ui/navigation/Link';
+import Paragraph from '@digigov/ui/typography/Paragraph';
+export default function OutdatedBrowserBanner() {
+  var mob = isMobile;
+
+  var _useOutdatedBrowserCh = useOutdatedBrowserCheck(),
+      _useOutdatedBrowserCh2 = _slicedToArray(_useOutdatedBrowserCh, 2),
+      shouldUpdate = _useOutdatedBrowserCh2[0],
+      updateLink = _useOutdatedBrowserCh2[1];
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  return /*#__PURE__*/React.createElement(WarningText, null, shouldUpdate ? /*#__PURE__*/React.createElement(React.Fragment, null, mob.any() ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Paragraph, null, t('outdated.mobile'))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Paragraph, null, t('outdated.web'), /*#__PURE__*/React.createElement(Link, {
+    href: updateLink,
+    target: "_blank"
+  }, updateLink, ' ')))) : /*#__PURE__*/React.createElement(React.Fragment, null));
+}
+export * from '@digigov/ui/app/OutdatedBrowserBanner/hooks/useOutdatedBrowserCheck';

package/esm/app/PhaseBannerHeader/index.js

@@ -4,9 +4,9 @@ var _excluded = ["text", "tag"];
 import React from 'react';
 import HeaderSection from '@digigov/react-core/HeaderSection';
 import PhaseBanner from '@digigov/react-core/PhaseBanner';
+import PhaseBannerHeaderContainer from '@digigov/react-core/PhaseBannerHeaderContainer';
 import PhaseBannerTag from '@digigov/react-core/PhaseBannerTag';
 import PhaseBannerText from '@digigov/react-core/PhaseBannerText';
-import PhaseBannerHeaderContainer from '@digigov/react-core/PhaseBannerHeaderContainer';
 export var PhaseBannerHeader = /*#__PURE__*/React.forwardRef(function PhaseBannerHeader(_ref, ref) {
   var text = _ref.text,
       tag = _ref.tag,

package/esm/app/PhaseBannerHeader/index.mdx

@@ -9,7 +9,11 @@ import PhaseBannerHeader from '@digigov/ui/app/PhaseBannerHeader';
 
 ## How to use
 
-<Story packageName="@digigov/ui" component="app/PhaseBannerHeader" story="Default.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="app/PhaseBannerHeader"
+  story="Default.tsx"
+/>
 
 ## API
 

package/esm/app/QrCodeScanner/__stories__/Default.js

@@ -1,8 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { Suspense, useState } from 'react';
 import { QrCodeScanner } from '@digigov/ui/app/QrCodeScanner';
+import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
 import { Heading } from '@digigov/ui/typography/Heading';
-import { ErrorSummary } from '@digigov/ui/core/ErrorSummary';
 
 var _ref = /*#__PURE__*/React.createElement("div", null, "Loading...");
 
@@ -46,7 +46,7 @@ export var Default = function Default() {
     onScan: handleScan,
     onError: handleError
   }, error.message && /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Heading, {
-    size: "s"
+    size: "sm"
   }, error.message))));
 };
 export default Default;

package/esm/app/QrCodeViewer/index.mdx

@@ -1,5 +1,5 @@
 ---
-id: qr-code
+id: qr-code-viewer
 title: QrCodeViewer
 ---
 
@@ -11,13 +11,19 @@ import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
 
 ### Default QrCodeViewer
 
-<Story packageName="@digigov/ui" component="app/QrCodeViewer" story="Default.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="app/QrCodeViewer"
+  story="Default.tsx"
+/>
 
 ### Custom QrCodeViewer
 
-<Story packageName="@digigov/ui" component="app/QrCodeViewer" story="Custom.tsx" />
-
-
+<Story
+  packageName="@digigov/ui"
+  component="app/QrCodeViewer"
+  story="Custom.tsx"
+/>
 
 ## API