@digigov/ui 0.28.2 → 0.29.0

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { NotificationBanner } from '@digigov/ui/core/NotificationBanner';
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(NotificationBanner, {
+    title: "Warning",
+    link: {
+      label: 'Προβολή αίτησης',
+      href: '#'
+    }
+  }, "\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/core/NotificationBanner/__stories__/Success.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { NotificationBanner } from '@digigov/ui/core/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: '#'
+    }
+  }, "\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/core/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 NotificationBannerHeader from '@digigov/react-core/NotificationBannerHeader';
+import NotificationBannerHeading from '@digigov/react-core/NotificationBannerHeading';
+import NotificationBannerContent from '@digigov/react-core/NotificationBannerContent';
+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/core/NotificationBanner/index.mdx

@@ -0,0 +1,34 @@
+---
+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/core/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="core/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="core/NotificationBanner" story="Success.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="NotificationBanner" />

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import NotificationBanner from '@digigov/ui/core/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/core/PhaseBanner/PhaseBanner.stories.js

@@ -0,0 +1,10 @@
+import PhaseBanner from '@digigov/ui/core/PhaseBanner';
+export default {
+  title: 'Digigov UI/core/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/core/PhaseBanner/__stories__/Default';
+export * from '@digigov/ui/core/PhaseBanner/__stories__/Underlined';

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

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PhaseBanner, PhaseBannerTag, PhaseBannerText } from '@digigov/ui/core/PhaseBanner';
+import { Link } from '@digigov/ui/core/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/core/PhaseBanner/__stories__/Underlined.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PhaseBanner, PhaseBannerTag, PhaseBannerText } from '@digigov/ui/core/PhaseBanner';
+import { Link } from '@digigov/ui/core/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/core/PhaseBanner/index.js

@@ -0,0 +1,6 @@
+export * from '@digigov/react-core/PhaseBanner';
+export * from '@digigov/react-core/PhaseBannerHeaderContainer';
+export * from '@digigov/react-core/PhaseBannerTag';
+export * from '@digigov/react-core/PhaseBannerText';
+import PhaseBanner from '@digigov/react-core/PhaseBanner';
+export default PhaseBanner;

package/es/core/PhaseBanner/index.mdx

@@ -0,0 +1,30 @@
+---
+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/core/PhaseBanner';
+```
+
+## How to use
+
+Your banner must be directly under the blue GOV.GR header and colour bar.
+
+<Story
+  packageName="@digigov/ui"
+  component="core/PhaseBanner"
+  story="Default.tsx"
+/>
+
+### Underlined
+
+<Story packageName="@digigov/ui" component="core/PhaseBanner" story="Underlined.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="PhaseBanner" />

package/es/core/RadioContainer/RadioContainer.stories.js

@@ -0,0 +1,15 @@
+import RadioContainer from '@digigov/ui/core/RadioContainer';
+export default {
+  title: 'Digigov UI/core/RadioContainer',
+  description: 'Use the radios component when users can only select one option from a list.',
+  link: 'https://guide.services.gov.gr/docs/components/radio',
+  component: RadioContainer,
+  displayName: 'RadioContainer'
+};
+export * from '@digigov/ui/core/RadioContainer/__stories__/Default';
+export * from '@digigov/ui/core/RadioContainer/__stories__/MultipleQuestions';
+export * from '@digigov/ui/core/RadioContainer/__stories__/Inline';
+export * from '@digigov/ui/core/RadioContainer/__stories__/WithHints';
+export * from '@digigov/ui/core/RadioContainer/__stories__/NoneAnswer';
+export * from '@digigov/ui/core/RadioContainer/__stories__/WithErrorMessage';
+export * from '@digigov/ui/core/RadioContainer/__stories__/ConditionalReveal';

package/es/core/RadioContainer/RadioContainer.stories.playwright.json

@@ -0,0 +1,49 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-core-RadioContainer--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Space"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "ArrowDown"
+              }
+            }
+          ],
+          "id": "ihfl6FqwhAee",
+          "title": "Navigate with keyboard"
+        }
+      ]
+    },
+    "digigov-ui-core-RadioContainer--with-hints": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>fieldset>div>div:nth-child(1)>label>input"
+              }
+            }
+          ],
+          "id": "FgKax2U7F5gE",
+          "title": "Click first"
+        }
+      ]
+    }
+  }
+}

package/es/core/RadioContainer/__stories__/ConditionalReveal.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { RadioContainer, RadioItem, RadioConditional } from '@digigov/ui/core/RadioContainer';
+import { TextInput } from '@digigov/ui/core/TextInput';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "contact-hint"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03C9\u03C2 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AE\u03C3\u03BF\u03C5\u03BC\u03B5 \u03BC\u03B1\u03B6\u03AF \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "contact-hint"
+}, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9 \u03C3\u03C4\u03B7\u03BD \u03C0\u03B5\u03C1\u03AF\u03C0\u03C4\u03C9\u03C3\u03B7 \u03C3\u03B1\u03C2."), /*#__PURE__*/React.createElement(RadioContainer, null, /*#__PURE__*/React.createElement(RadioItem, {
+  defaultChecked: true,
+  name: "contact",
+  value: "email"
+}, "Email"), /*#__PURE__*/React.createElement(RadioConditional, null, "Email address", /*#__PURE__*/React.createElement(TextInput, {
+  name: "email",
+  cellWidth: "one-third"
+})), /*#__PURE__*/React.createElement(RadioItem, {
+  name: "contact",
+  value: "phone"
+}, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF"))));
+
+export var ConditionalReveal = function ConditionalReveal() {
+  return _ref;
+};
+export default ConditionalReveal;

package/es/core/RadioContainer/__stories__/Default.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { RadioContainer, RadioItem } from '@digigov/ui/core/RadioContainer';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03BF\u03B9\u03B1 \u03B5\u03B9\u03BD\u03B1\u03B9 \u03B7 \u03C7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u03B4\u03B9\u03B1\u03BC\u03BF\u03BD\u03AE\u03C2 \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(RadioContainer, null, /*#__PURE__*/React.createElement(RadioItem, {
+  name: "country",
+  value: "greece"
+}, "\u0395\u03BB\u03BB\u03AC\u03B4\u03B1"), /*#__PURE__*/React.createElement(RadioItem, {
+  name: "country",
+  value: "cyprus"
+}, "\u039A\u03CD\u03C0\u03C1\u03BF\u03C2"), /*#__PURE__*/React.createElement(RadioItem, {
+  name: "country",
+  value: "eu"
+}, "\u03A7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u0395\u03C5\u03C1\u03C9\u03C0\u03B1\u03CA\u03BA\u03AE\u03C2 \u0388\u03BD\u03C9\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(RadioItem, {
+  name: "country",
+  value: "usa"
+}, "H\u03BD\u03C9\u03BC\u03AD\u03BD\u03B5\u03C2 \u03A0\u03BF\u03BB\u03B9\u03C4\u03B5\u03AF\u03B5\u03C2 \u03C4\u03B7\u03C2 \u0391\u03BC\u03B5\u03C1\u03B9\u03BA\u03AE\u03C2"))));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/es/core/RadioContainer/__stories__/Inline.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { RadioContainer, RadioItem } from '@digigov/ui/core/RadioContainer';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "name-hint"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u0388\u03C7\u03B5\u03C4\u03B5 \u03B1\u03BB\u03BB\u03AC\u03BE\u03B5\u03B9 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "name-hint"
+}, "\u03A3\u03C5\u03BC\u03C0\u03B5\u03C1\u03B9\u03BB\u03B1\u03BC\u03B2\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AE \u03C4\u03BF\u03C5 \u03B5\u03C0\u03AF\u03B8\u03B5\u03C4\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03AE \u03B1\u03BB\u03BB\u03B1\u03B3\u03AE \u03C4\u03BF\u03C5 \u03C4\u03C1\u03CC\u03C0\u03BF\u03C5 \u03C0\u03BF\u03C5 \u03B3\u03C1\u03AC\u03C6\u03B5\u03C4\u03B5 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03C3\u03B1\u03C2."), /*#__PURE__*/React.createElement(RadioContainer, {
+  inline: true
+}, /*#__PURE__*/React.createElement(RadioItem, {
+  name: "changed_name",
+  value: "yes"
+}, "\u039D\u03B1\u03B9"), /*#__PURE__*/React.createElement(RadioItem, {
+  name: "changed_name",
+  value: "no"
+}, "\u038C\u03C7\u03B9"))));
+
+export var Inline = function Inline() {
+  return _ref;
+};
+export default Inline;

package/es/core/RadioContainer/__stories__/MultipleQuestions.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { RadioContainer, RadioItem } from '@digigov/ui/core/RadioContainer';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "country-hint"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, {
+  size: "s"
+}, "\u03A0\u03BF\u03B9\u03B1 \u03B5\u03B9\u03BD\u03B1\u03B9 \u03B7 \u03C7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u03B4\u03B9\u03B1\u03BC\u03BF\u03BD\u03AE\u03C2 \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "country-hint"
+}, "\u03A0\u03B5\u03AF\u03C4\u03B5 \u03BC\u03B1\u03C2 \u03C3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B5\u03C2 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AD\u03C2. \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(RadioContainer, null, /*#__PURE__*/React.createElement(RadioItem, {
+  name: "country",
+  value: "greece"
+}, "\u0395\u03BB\u03BB\u03AC\u03B4\u03B1"), /*#__PURE__*/React.createElement(RadioItem, {
+  name: "country",
+  value: "cyprus"
+}, "\u039A\u03CD\u03C0\u03C1\u03BF\u03C2"), /*#__PURE__*/React.createElement(RadioItem, {
+  name: "country",
+  value: "eu"
+}, "\u03A7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u0395\u03C5\u03C1\u03C9\u03C0\u03B1\u03CA\u03BA\u03AE\u03C2 \u0388\u03BD\u03C9\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(RadioItem, {
+  name: "country",
+  value: "usa"
+}, "H\u03BD\u03C9\u03BC\u03AD\u03BD\u03B5\u03C2 \u03A0\u03BF\u03BB\u03B9\u03C4\u03B5\u03AF\u03B5\u03C2 \u03C4\u03B7\u03C2 \u0391\u03BC\u03B5\u03C1\u03B9\u03BA\u03AE\u03C2"))));
+
+export var MultipleQuestions = function MultipleQuestions() {
+  return _ref;
+};
+export default MultipleQuestions;

package/es/core/RadioContainer/__stories__/NoneAnswer.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { RadioContainer, RadioItem } from '@digigov/ui/core/RadioContainer';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03CC\u03C3\u03B1 \u03C0\u03B1\u03B9\u03B4\u03B9\u03AC \u03AD\u03C7\u03B5\u03C4\u03B5;"), /*#__PURE__*/React.createElement(RadioContainer, null, /*#__PURE__*/React.createElement(RadioItem, {
+  name: "cold",
+  value: "cold"
+}, "1-2 \u03C0\u03B1\u03B9\u03B4\u03B9\u03AC"), /*#__PURE__*/React.createElement(RadioItem, {
+  name: "fever",
+  value: "fever"
+}, "3 \u03AE \u03C0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03C0\u03B1\u03B9\u03B4\u03B9\u03AC"), /*#__PURE__*/React.createElement("div", {
+  className: "govgr-radios__divider"
+}, "\u03AE"), /*#__PURE__*/React.createElement(RadioItem, {
+  name: "fatigue",
+  value: "fatigue"
+}, "\u039A\u03B1\u03BD\u03AD\u03BD\u03B1 \u03C0\u03B1\u03B9\u03B4\u03AF"))));
+
+export var NoneAnswer = function NoneAnswer() {
+  return _ref;
+};
+export default NoneAnswer;

package/es/core/RadioContainer/__stories__/WithErrorMessage.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { RadioContainer, RadioItem } from '@digigov/ui/core/RadioContainer';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, {
+  error: true
+}, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "travel-hint travel-error"
+}, /*#__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, {
+  id: "travel-hint"
+}, "\u039C\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03B5\u03C4\u03B5 \u03BC\u03CC\u03BD\u03BF \u03BC\u03AF\u03B1 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE."), /*#__PURE__*/React.createElement(ErrorMessage, {
+  id: "travel-error"
+}, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03B5\u03C4\u03B5 \u03BC\u03B9\u03B1 \u03B1\u03C0\u03AC\u03BD\u03C4\u03B7\u03C3\u03B7."), /*#__PURE__*/React.createElement(RadioContainer, null, /*#__PURE__*/React.createElement(RadioItem, {
+  name: "cold",
+  value: "cold"
+}, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/React.createElement(RadioItem, {
+  name: "fever",
+  value: "fever"
+}, "\u0393\u03B1\u03BB\u03BB\u03AF\u03B1"))));
+
+export var WithErrorMessage = function WithErrorMessage() {
+  return _ref;
+};
+export default WithErrorMessage;

package/es/core/RadioContainer/__stories__/WithHints.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { RadioContainer, RadioItem } from '@digigov/ui/core/RadioContainer';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "login-hint"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, {
+  size: "m"
+}, "\u03A0\u03CE\u03C2 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF\u03C4\u03B5;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "login-hint"
+}, "\u0398\u03B1 \u03C7\u03C1\u03B5\u03B9\u03B1\u03C3\u03C4\u03B5\u03AF\u03C4\u03B5 \u03AD\u03BD\u03B1\u03BD \u03BB\u03BF\u03B3\u03B1\u03C1\u03B9\u03B1\u03C3\u03BC\u03CC \u03BC\u03B5 \u03C4\u03BF\u03BD \u03BF\u03C0\u03BF\u03AF\u03BF \u03B8\u03B1 \u03B1\u03C0\u03BF\u03B4\u03B5\u03AF\u03BE\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03C4\u03B1\u03CD\u03C4\u03BF\u03C4\u03B7\u03C4\u03B1 \u03C3\u03B1\u03C2 \u03CE\u03C3\u03C4\u03B5 \u03BD\u03B1 \u03C0\u03C1\u03BF\u03C7\u03C9\u03C1\u03AE\u03C3\u03B5\u03C4\u03B5."), /*#__PURE__*/React.createElement(RadioContainer, null, /*#__PURE__*/React.createElement(RadioItem, {
+  name: "login",
+  value: "gsis",
+  "aria-describedby": "gsis-hint"
+}, "\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7 \u03BC\u03B5 Taxisnet", /*#__PURE__*/React.createElement(Hint, {
+  id: "gsis-hint"
+}, "\u0398\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03BF\u03C5\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03BF\u03CD\u03C2 Taxisnet \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03C3\u03C5\u03BD\u03B8\u03B5\u03AF\u03C4\u03B5")), /*#__PURE__*/React.createElement(RadioItem, {
+  name: "login",
+  value: "ebanking",
+  "aria-describedby": "ebanking-hint"
+}, "\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7 \u03BC\u03B5 \u03BB\u03BF\u03B3\u03B1\u03C1\u03B9\u03C3\u03BC\u03CC e-banking", /*#__PURE__*/React.createElement(Hint, {
+  id: "ebanking-hint"
+}, "\u0398\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03BF\u03C5\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03BF\u03CD\u03C2 \u03C4\u03BF\u03C5 e-banking \u03C4\u03B7\u03C2 \u03C4\u03C1\u03AC\u03C0\u03B5\u03B6\u03B1\u03C2 \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF\u03C4\u03B5.")))));
+
+export var WithHints = function WithHints() {
+  return _ref;
+};
+export default WithHints;

package/{src/core/Radios/index.tsx → es/core/RadioContainer/index.js}

@@ -1,5 +1,5 @@
 export * from '@digigov/react-core/RadioContainer';
 export * from '@digigov/react-core/RadioItem';
 export * from '@digigov/react-core/RadioConditional';
-import Radios from '@digigov/react-core/RadioContainer';
-export default Radios;
+import RadioContainer from '@digigov/react-core/RadioContainer';
+export default RadioContainer;

package/es/core/RadioContainer/index.mdx

@@ -0,0 +1,90 @@
+---
+id: radios
+title: RadioContainer
+---
+
+# RadioContainer
+
+```bash
+import RadioContainer from '@digigov/ui/core/RadioContainer';
+```
+
+## How to use
+
+<Story
+  packageName="@digigov/ui"
+  component="core/RadioContainer"
+  story="Default.tsx"
+/>
+
+### If you’re asking more than one question on the page
+
+<Story
+  packageName="@digigov/ui"
+  component="core/RadioContainer"
+  story="MultipleQuestions.tsx"
+/>
+
+### Inline radios
+
+<Story
+  packageName="@digigov/ui"
+  component="core/RadioContainer"
+  story="Inline.tsx"
+/>
+
+### Checkbox items with hints
+
+You can add hints to checkbox items to provide additional information about the options.
+
+<Story
+  packageName="@digigov/ui"
+  component="core/RadioContainer"
+  story="WithHints.tsx"
+/>
+
+### RadioContainer items with a text divider
+
+If one or more of your radio options is different from the others, it can help users if you separate them using a text divider.
+The text is usually the word ‘or’.
+
+<Story
+  packageName="@digigov/ui"
+  component="core/RadioContainer"
+  story="NoneAnswer.tsx"
+/>
+
+## Conditionally revealing a related question
+
+You can ask the user a related question when they select a particular checkbox, so they only see the question when it’s relevant to them.
+
+This might make 2 related questions easier to answer by grouping them on the same page. For example, you could reveal a phone number input when the user selects the ‘Contact me by phone’ option.
+
+<Story
+  packageName="@digigov/ui"
+  component="core/RadioContainer"
+  story="ConditionalReveal.tsx"
+/>
+
+### Error messages
+
+Error messages should be styled like this:
+
+<Story packageName="@digigov/ui" component="core/RadioContainer" story="WithErrorMessage.tsx" />
+
+
+
+
+## API
+
+### RadioContainer
+
+<PropTypes packageName="@digigov/ui" component="RadioContainer" />
+
+### RadioConditional
+
+<PropTypes packageName="@digigov/ui" component="RadioConditional" />
+
+### RadioItem
+
+<PropTypes packageName="@digigov/ui" component="RadioItem" />

package/es/core/SectionBreak/index.js

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

package/es/core/SelectContainer/Select.stories.js

@@ -0,0 +1,11 @@
+import SelectContainer from '@digigov/ui/core/SelectContainer';
+export default {
+  title: 'Digigov UI/core/SelectContainer',
+  description: 'The select component should only be used as a last resort in public-facing services because research shows that some users find selects very difficult to use.',
+  link: 'https://guide.services.gov.gr/docs/components/select',
+  component: SelectContainer,
+  displayName: 'SelectContainer'
+};
+export * from '@digigov/ui/core/SelectContainer/__stories__/Default';
+export * from '@digigov/ui/core/SelectContainer/__stories__/DisabledInput';
+export * from '@digigov/ui/core/SelectContainer/__stories__/WithHint';

package/es/core/SelectContainer/Select.stories.playwright.json

@@ -0,0 +1,21 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-core-select--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>label>select"
+              }
+            }
+          ],
+          "id": "r12umQc21tgb",
+          "title": "SelectContainer with mouse"
+        }
+      ]
+    }
+  }
+}

package/es/core/SelectContainer/__stories__/Default.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { SelectContainer, SelectOption } from '@digigov/ui/core/SelectContainer';
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7", /*#__PURE__*/React.createElement(SelectContainer, {
+  name: "select-list",
+  "aria-label": "\u03C4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7"
+}, /*#__PURE__*/React.createElement(SelectOption, {
+  value: "dim"
+}, "\u0394\u03B7\u03BC\u03BF\u03C6\u03B9\u03BB\u03AE"), /*#__PURE__*/React.createElement(SelectOption, {
+  value: "kat"
+}, "\u03A0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B1"), /*#__PURE__*/React.createElement(SelectOption, {
+  value: "kat"
+}, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03C0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AD\u03C2"), /*#__PURE__*/React.createElement(SelectOption, {
+  value: "kat"
+}, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03C3\u03C7\u03CC\u03BB\u03B9\u03B1"))));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;