@digigov/ui 0.35.4 → 1.0.0-rc

package/es/feedback/CopyToClipboard/__stories__/Default.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { CopyToClipboard } from '@digigov/ui/feedback/CopyToClipboard';
+import { Button } from '@digigov/ui/form/Button';
+
+var _ref = /*#__PURE__*/React.createElement(CopyToClipboard, {
+  text: "copied-text",
+  variant: "tooltip-left",
+  message: "text successfuly copied!",
+  id: "copy-to-clipboard"
+}, /*#__PURE__*/React.createElement(Button, {
+  color: "secondary",
+  "aria-describedby": "copy-to-clipboard"
+}, "Copy"));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/es/feedback/CopyToClipboard/index.js

@@ -0,0 +1,49 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState, useEffect } from 'react';
+import CopyToClipboardContainer from '@digigov/react-core/CopyToClipboardContainer';
+import CopyToClipboardMessage from '@digigov/react-core/CopyToClipboardMessage';
+import { useTranslation } from '@digigov/ui/i18n';
+import NormalText from '@digigov/ui/typography/NormalText';
+export var CopyToClipboard = /*#__PURE__*/React.forwardRef(function CopyToClipboard(_ref, ref) {
+  var text = _ref.text,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'tooltip-right' : _ref$variant,
+      message = _ref.message,
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 3000 : _ref$timeout,
+      children = _ref.children;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      enabled = _useState2[0],
+      setEnabled = _useState2[1];
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  useEffect(function () {
+    var timeoutInstance = setTimeout(function () {
+      if (enabled) setEnabled(false);
+    }, timeout);
+    return function () {
+      return clearTimeout(timeoutInstance);
+    };
+  }, [enabled]);
+
+  function copyToClipboard() {
+    navigator.clipboard.writeText(text);
+    setEnabled(true);
+  }
+
+  return /*#__PURE__*/React.createElement(CopyToClipboardContainer, {
+    onClick: copyToClipboard,
+    variant: variant,
+    ref: ref
+  }, children, enabled && /*#__PURE__*/React.createElement(CopyToClipboardMessage, {
+    variant: variant,
+    enabled: enabled,
+    role: "tooltip"
+  }, /*#__PURE__*/React.createElement(NormalText, null, message || t('copy-to-clipboard.message'))));
+});
+export default CopyToClipboard;
+export { CopyToClipboardContainer, CopyToClipboardMessage };

package/es/feedback/CopyToClipboard/index.mdx

@@ -0,0 +1,30 @@
+---
+id: copy-to-clipboard
+title: CopyToClipboard
+---
+
+```bash
+import CopyToClipboard from '@digigov/ui/feedback/CopyToClipboard';
+```
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/ui"
+  component="feedback/CopyToClipboard"
+  story="Default.tsx"
+/>
+
+### Banner
+
+<Story
+  packageName="@digigov/ui"
+  component="feedback/CopyToClipboard"
+  story="Banner.tsx"
+/>
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="CopyToClipboard" />

package/es/feedback/ErrorSummary/ErrorSummary.stories.js

@@ -0,0 +1,12 @@
+import ErrorSummary from '@digigov/ui/feedback/ErrorSummary';
+export default {
+  title: 'Digigov UI/feedback/ErrorSummary',
+  description: 'Use this component at the top of a page to summarise any errors a user has made.',
+  link: 'https://guide.services.gov.gr/docs/components/error-summary',
+  component: ErrorSummary,
+  displayName: 'ErrorSummary'
+};
+export * from '@digigov/ui/feedback/ErrorSummary/__stories__/Default';
+export * from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToInput';
+export * from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToField';
+export * from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox';

package/es/feedback/ErrorSummary/ErrorSummary.stories.playwright.json

@@ -0,0 +1,27 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-feedback-errorsummary--linked-to-checkbox": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Enter"
+              }
+            }
+          ],
+          "id": "lFKC342tG4hT",
+          "title": "Go to checkbox"
+        }
+      ]
+    }
+  }
+}

package/es/feedback/ErrorSummary/__stories__/Default.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Heading } from '@digigov/ui/typography/Heading';
+
+var _ref = /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Heading, {
+  size: "sm"
+}, "\u03A5\u03C0\u03AE\u03C1\u03BE\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03BF \u03C0\u03C1\u03CC\u03B2\u03BB\u03B7\u03BC\u03B1"), /*#__PURE__*/React.createElement(Link, null, "\u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C4\u03BF \u03AD\u03C4\u03BF\u03C2"));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/es/feedback/ErrorSummary/__stories__/LinkedToCheckbox.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
+import { Checkbox, CheckboxItem } from '@digigov/ui/form/Checkbox';
+import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/form/FieldContainer';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Heading } from '@digigov/ui/typography/Heading';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Heading, {
+  size: "sm"
+}, "\u03A5\u03C0\u03AE\u03C1\u03BE\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03BF \u03C0\u03C1\u03CC\u03B2\u03BB\u03B7\u03BC\u03B1"), /*#__PURE__*/React.createElement(Link, {
+  href: "#england"
+}, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03AE \u03C0\u03B1\u03C1\u03B1\u03C0\u03AC\u03BD\u03C9 \u03C7\u03CE\u03C1\u03B5\u03C2.")), /*#__PURE__*/React.createElement(FieldContainer, {
+  error: true
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/React.createElement(Hint, null, "\u0391\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C0\u03BF\u03BB\u03BB\u03B1\u03C0\u03BB\u03AE \u03C5\u03C0\u03B7\u03BA\u03BF\u03CC\u03C4\u03B7\u03C4\u03B1, \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03AE \u03C0\u03B1\u03C1\u03B1\u03C0\u03AC\u03BD\u03C9 \u03C7\u03CE\u03C1\u03B5\u03C2."), /*#__PURE__*/React.createElement(Checkbox, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "england",
+  value: "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1",
+  id: "england"
+}, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "france",
+  value: "\u0393\u03B1\u03BB\u03BB\u03AF\u03B1",
+  id: "france"
+}, "\u0393\u03B1\u03BB\u03BB\u03AF\u03B1")))));
+
+export var LinkedToCheckbox = function LinkedToCheckbox() {
+  return _ref;
+};
+export default LinkedToCheckbox;

package/es/feedback/ErrorSummary/__stories__/LinkedToField.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
+import { DateInputContainer, DateInputItem } from '@digigov/ui/form/DateInputContainer';
+import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/form/FieldContainer';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Heading } from '@digigov/ui/typography/Heading';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Heading, {
+  size: "sm"
+}, "\u03A5\u03C0\u03AE\u03C1\u03BE\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03BF \u03C0\u03C1\u03CC\u03B2\u03BB\u03B7\u03BC\u03B1"), /*#__PURE__*/React.createElement(Link, {
+  href: "#passport-date"
+}, "\u0397 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03AD\u03BA\u03B4\u03BF\u03C3\u03B7\u03C2 \u03C4\u03BF\u03C5 \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03B7\u03C1\u03AF\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03B8\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C3\u03C4\u03BF \u03C0\u03B1\u03C1\u03B5\u03BB\u03B8\u03CC\u03BD.")), /*#__PURE__*/React.createElement(FieldContainer, {
+  error: true,
+  id: "passport-date"
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03BF \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Hint, null, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u0397 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03AD\u03BA\u03B4\u03BF\u03C3\u03B7\u03C2 \u03C4\u03BF\u03C5 \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03B7\u03C1\u03AF\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03B8\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C3\u03C4\u03BF \u03C0\u03B1\u03C1\u03B5\u03BB\u03B8\u03CC\u03BD."), /*#__PURE__*/React.createElement(DateInputContainer, null, /*#__PURE__*/React.createElement(DateInputItem, {
+  name: "day"
+}, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/React.createElement(DateInputItem, {
+  name: "month"
+}, "\u039C\u03AE\u03BD\u03B1\u03C2"), /*#__PURE__*/React.createElement(DateInputItem, {
+  error: true,
+  width: 4,
+  name: "year"
+}, "\u03A7\u03C1\u03CC\u03BD\u03BF\u03C2")))));
+
+export var LinkedToField = function LinkedToField() {
+  return _ref;
+};
+export default LinkedToField;

package/es/feedback/ErrorSummary/__stories__/LinkedToInput.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
+import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer } from '@digigov/ui/form/LabelContainer';
+import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { TextInput } from '@digigov/ui/form/TextInput';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Heading } from '@digigov/ui/typography/Heading';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Heading, {
+  size: "sm"
+}, "\u03A5\u03C0\u03AE\u03C1\u03BE\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03BF \u03C0\u03C1\u03CC\u03B2\u03BB\u03B7\u03BC\u03B1"), /*#__PURE__*/React.createElement(Link, {
+  href: "#business-name"
+}, "\u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03B5\u03C0\u03B9\u03C7\u03B5\u03AF\u03C1\u03B7\u03C3\u03B7\u03C2")), /*#__PURE__*/React.createElement(FieldContainer, {
+  error: true
+}, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
+  size: "md"
+}, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03B5\u03C0\u03B9\u03C7\u03B5\u03AF\u03C1\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(Hint, null, "\u03A0\u03BF\u03B9\u03BF \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03C4\u03B7\u03C2 \u03B5\u03C0\u03B9\u03C7\u03B5\u03AF\u03C1\u03B7\u03C3\u03B7\u03C2;"), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C4\u03BF \u03C0\u03B5\u03B4\u03AF\u03BF."), /*#__PURE__*/React.createElement(TextInput, {
+  error: true,
+  name: "inputext",
+  id: "business-name"
+}))));
+
+export var LinkedToInput = function LinkedToInput() {
+  return _ref;
+};
+export default LinkedToInput;

package/es/feedback/ErrorSummary/index.mdx

@@ -0,0 +1,56 @@
+---
+id: error-summary
+title: ErrorSummary
+---
+
+# ErrorSummary
+
+Use this component at the top of a page to summarise any errors a user has made.
+
+When a user makes an error, you must show both an error summary and an error message next to each answer that contains an error.
+
+```bash
+import ErrorSummary from '@digigov/ui/feedback/ErrorSummary';
+```
+
+## How to use
+
+<Story
+  packageName="@digigov/ui"
+  component="feedback/ErrorSummary"
+  story="Default.tsx"
+/>
+
+### Linking from the error summary to each answer
+
+You must link the errors in the error summary to the answer they relate to.
+
+For questions that require a user to answer using a single field, like a file upload, select, textarea, text input or character count, link to the field.
+
+<Story
+  packageName="@digigov/ui"
+  component="feedback/ErrorSummary"
+  story="LinkedToInput.tsx"
+/>
+
+When a user has to enter their answer into multiple fields, such as the day, month and year fields in the date input component, link to the first field that contains an error.
+
+If you do not know which field contains an error, link to the first field.
+
+<Story
+  packageName="@digigov/ui"
+  component="feedback/ErrorSummary"
+  story="LinkedToField.tsx"
+/>
+
+For questions that require a user to select one or more options from a list using radios or checkboxes, link to the first radio or checkbox.
+
+<Story
+  packageName="@digigov/ui"
+  component="feedback/ErrorSummary"
+  story="LinkedToCheckbox.tsx"
+/>
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="ErrorSummary" />

package/es/feedback/ErrorSummary/index.spec.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import Component from '@digigov/ui/feedback/ErrorSummary';
+
+var _ref = /*#__PURE__*/React.createElement(Component, null, "this is some random warning text");
+
+it('renders the ErrorSummary with sample data', function () {
+  expect(_ref).toMatchSnapshot();
+});

package/es/feedback/NotificationBanner/NotificationBanner.stories.js

@@ -0,0 +1,11 @@
+import NotificationBanner from '@digigov/ui/feedback/NotificationBanner';
+export default {
+  title: 'Digigov UI/feedback/NotificationBanner',
+  tags: ['Experimental'],
+  description: 'Use a notification banner to tell the user about something they need to know about, but that’s not directly related to the page content.',
+  link: 'https://guide.services.gov.gr/docs/components/Notification-Banner',
+  component: NotificationBanner,
+  displayName: 'NotificationBanner'
+};
+export * from '@digigov/ui/feedback/NotificationBanner/__stories__/Default';
+export * from '@digigov/ui/feedback/NotificationBanner/__stories__/Success';

package/es/feedback/NotificationBanner/NotificationBanner.stories.playwright.json

@@ -0,0 +1,49 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-feedback-notificationbanner--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "hover",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div:nth-child(2)>h3>a"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div:nth-child(2)>h3>a"
+              }
+            }
+          ],
+          "id": "dYDf1Q2XBX7X",
+          "title": "Hover and click"
+        }
+      ]
+    },
+    "digigov-ui-feedback-notificationbanner--success": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "hover",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div:nth-child(2)>h3>a"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div:nth-child(2)>h3>a"
+              }
+            }
+          ],
+          "id": "ez4xB9-sspYz",
+          "title": "Hover and click"
+        }
+      ]
+    }
+  }
+}

package/es/feedback/NotificationBanner/__stories__/Default.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { NotificationBanner } from '@digigov/ui/feedback/NotificationBanner';
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(NotificationBanner, {
+    title: "Warning",
+    link: {
+      label: 'Προβολή αίτησης',
+      href: '#link?name=NotificationBannerDefault'
+    }
+  }, "\u0388\u03C7\u03B5\u03C4\u03B5 7 \u03B7\u03BC\u03AD\u03C1\u03B5\u03C2 \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03C5\u03C0\u03BF\u03B2\u03AC\u03BB\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B1\u03AF\u03C4\u03B7\u03C3\u03B7.");
+};
+export default Default;

package/es/feedback/NotificationBanner/__stories__/Success.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { NotificationBanner } from '@digigov/ui/feedback/NotificationBanner';
+export var Success = function Success() {
+  return /*#__PURE__*/React.createElement(NotificationBanner, {
+    title: "\u0395\u03C0\u03B9\u03C4\u03C5\u03C7\u03AE\u03C2 \u03C5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE",
+    variant: "success",
+    link: {
+      label: 'Προβολή αίτησης',
+      href: '#link?name=NotificationBannerSuccess'
+    }
+  }, "\u0397 \u03B1\u03AF\u03C4\u03B7\u03C3\u03AE \u03C3\u03B1\u03C2 \u03C5\u03C0\u03BF\u03B2\u03BB\u03AE\u03B8\u03B7\u03BA\u03B5");
+};
+export default Success;

package/es/feedback/NotificationBanner/index.js

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["variant", "title", "link", "children"];
+import React from 'react';
+import NotificationBannerContainer from '@digigov/react-core/NotificationBannerContainer';
+import NotificationBannerContent from '@digigov/react-core/NotificationBannerContent';
+import NotificationBannerHeader from '@digigov/react-core/NotificationBannerHeader';
+import NotificationBannerHeading from '@digigov/react-core/NotificationBannerHeading';
+import NotificationBannerLink from '@digigov/react-core/NotificationBannerLink';
+
+var _ref2 = /*#__PURE__*/React.createElement("br", null);
+
+export var NotificationBanner = function NotificationBanner(_ref) {
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'important' : _ref$variant,
+      title = _ref.title,
+      link = _ref.link,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var success = variant === 'success';
+  title = title ? title : success ? 'Success' : 'Important';
+  return /*#__PURE__*/React.createElement(NotificationBannerContainer, _extends({
+    success: success
+  }, props), /*#__PURE__*/React.createElement(NotificationBannerHeader, null, title), /*#__PURE__*/React.createElement(NotificationBannerContent, null, /*#__PURE__*/React.createElement(NotificationBannerHeading, null, children, _ref2, link && /*#__PURE__*/React.createElement(NotificationBannerLink, {
+    href: link.href
+  }, link.label))));
+};
+export { NotificationBannerContainer, NotificationBannerHeader, NotificationBannerContent, NotificationBannerHeading, NotificationBannerLink };
+export default NotificationBanner;

package/es/feedback/NotificationBanner/index.mdx

@@ -0,0 +1,38 @@
+---
+id: notification-banner
+title: NotificationBanner
+---
+
+# NotificationBanner
+
+This component is currently experimental because more research is needed to validate it.
+
+Use a notification banner to tell the user about something they need to know about, but that’s not directly related to the page content.
+
+```bash
+import NotificationBanner from '@digigov/ui/feedback/NotificationBanner';
+```
+
+## How to use
+
+Use a ‘neutral’ blue notification banner if the user needs to know about a problem with the service as a whole.
+
+Use a ‘neutral’ notification banner if the user needs to know about something that’s happening elsewhere in the service.
+
+<Story
+  packageName="@digigov/ui"
+  component="feedback/NotificationBanner"
+  story="Default.tsx"
+/>
+
+You can also use a notification banner to tell the user about the outcome of something they’ve just done - but they have not finished using the service, so it does not make sense to use a confirmation page.
+
+<Story
+  packageName="@digigov/ui"
+  component="feedback/NotificationBanner"
+  story="Success.tsx"
+/>
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="NotificationBanner" />

package/es/feedback/NotificationBanner/index.spec.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import NotificationBanner from '@digigov/ui/feedback/NotificationBanner';
+
+var _ref = /*#__PURE__*/React.createElement(NotificationBanner, {
+  title: "Notification Banner Example"
+}, "this is a notification");
+
+it('renders the notification banner', function () {
+  expect(_ref).toMatchSnapshot();
+});
+it('renders the notification banner with title and link', function () {
+  expect( /*#__PURE__*/React.createElement(NotificationBanner, {
+    title: "Notification Banner Example",
+    link: {
+      href: '/',
+      label: 'This is a label'
+    }
+  }, "this is a notification")).toMatchSnapshot();
+});

package/es/feedback/PhaseBanner/PhaseBanner.stories.js

@@ -0,0 +1,10 @@
+import PhaseBanner from '@digigov/ui/feedback/PhaseBanner';
+export default {
+  title: 'Digigov UI/feedback/PhaseBanner',
+  description: 'Use the phase banner component to show users your service is still being worked on.',
+  link: 'https://guide.services.gov.gr/docs/components/phase-banner',
+  component: PhaseBanner,
+  displayName: 'PhaseBanner'
+};
+export * from '@digigov/ui/feedback/PhaseBanner/__stories__/Default';
+export * from '@digigov/ui/feedback/PhaseBanner/__stories__/Underlined';

package/es/feedback/PhaseBanner/PhaseBanner.stories.playwright.json

@@ -0,0 +1,21 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-feedback-phasebanner--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            }
+          ],
+          "id": "b1ldT3RjaFfg",
+          "title": "pressing Tab"
+        }
+      ]
+    }
+  }
+}

package/es/feedback/PhaseBanner/__stories__/Default.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PhaseBanner, PhaseBannerTag, PhaseBannerText } from '@digigov/ui/feedback/PhaseBanner';
+import { Link } from '@digigov/ui/navigation/Link';
+
+var _ref = /*#__PURE__*/React.createElement(PhaseBanner, null, /*#__PURE__*/React.createElement(PhaseBannerTag, null, "ALPHA"), /*#__PURE__*/React.createElement(PhaseBannerText, null, "\u0391\u03C5\u03C4\u03AE \u03B5\u03AF\u03BD\u03B1\u03B9 \u03BC\u03AF\u03B1 \u03BD\u03AD\u03B1 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u2013 \u03C4\u03B1 ", /*#__PURE__*/React.createElement(Link, {
+  href: "#feedback"
+}, "\u03C3\u03C7\u03CC\u03BB\u03B9\u03AC"), " \u03C3\u03B1\u03C2 \u03B8\u03B1 \u03BC\u03B1\u03C2 \u03B2\u03BF\u03B7\u03B8\u03AE\u03C3\u03BF\u03C5\u03BD \u03BD\u03B1 \u03C4\u03B7 \u03B2\u03B5\u03BB\u03C4\u03B9\u03CE\u03C3\u03BF\u03C5\u03BC\u03B5."));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/es/feedback/PhaseBanner/__stories__/Underlined.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PhaseBanner, PhaseBannerTag, PhaseBannerText } from '@digigov/ui/feedback/PhaseBanner';
+import { Link } from '@digigov/ui/navigation/Link';
+
+var _ref = /*#__PURE__*/React.createElement(PhaseBanner, {
+  underline: true
+}, /*#__PURE__*/React.createElement(PhaseBannerTag, null, "ALPHA"), /*#__PURE__*/React.createElement(PhaseBannerText, null, "\u0391\u03C5\u03C4\u03AE \u03B5\u03AF\u03BD\u03B1\u03B9 \u03BC\u03AF\u03B1 \u03BD\u03AD\u03B1 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u2013 \u03C4\u03B1 ", /*#__PURE__*/React.createElement(Link, {
+  href: "#feedback"
+}, "\u03C3\u03C7\u03CC\u03BB\u03B9\u03AC"), " \u03C3\u03B1\u03C2 \u03B8\u03B1 \u03BC\u03B1\u03C2 \u03B2\u03BF\u03B7\u03B8\u03AE\u03C3\u03BF\u03C5\u03BD \u03BD\u03B1 \u03C4\u03B7 \u03B2\u03B5\u03BB\u03C4\u03B9\u03CE\u03C3\u03BF\u03C5\u03BC\u03B5."));
+
+export var Underlined = function Underlined() {
+  return _ref;
+};
+export default Underlined;

package/es/feedback/PhaseBanner/index.mdx

@@ -0,0 +1,34 @@
+---
+id: phase-banner
+title: PhaseBanner
+---
+
+# PhaseBanner
+
+Use the phase banner component to show users your service is still being worked on.
+
+```bash
+import PhaseBanner from '@digigov/ui/feedback/PhaseBanner';
+```
+
+## How to use
+
+Your banner must be directly under the blue GOV.GR header and colour bar.
+
+<Story
+  packageName="@digigov/ui"
+  component="feedback/PhaseBanner"
+  story="Default.tsx"
+/>
+
+### Underlined
+
+<Story
+  packageName="@digigov/ui"
+  component="feedback/PhaseBanner"
+  story="Underlined.tsx"
+/>
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="PhaseBanner" />

package/es/feedback/ServiceBadge/index.js

@@ -0,0 +1,19 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["label", "children"];
+import React from 'react';
+import PhaseBanner from '@digigov/react-core/PhaseBanner';
+import PhaseBannerTag from '@digigov/react-core/PhaseBannerTag';
+import PhaseBannerText from '@digigov/react-core/PhaseBannerText';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var ServiceBadge = withDeprecation(function (_ref) {
+  var _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'BETA' : _ref$label,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(PhaseBanner, props, /*#__PURE__*/React.createElement(PhaseBannerTag, null, label), /*#__PURE__*/React.createElement(PhaseBannerText, null, children));
+}, {
+  name: 'ServiceBadge',
+  rename: 'PhaseBanner'
+});
+export default ServiceBadge;