@digigov/ui 0.21.1 → 0.22.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

@@ -8,6 +8,9 @@ import NotificationBannerHeader from '@digigov/react-core/NotificationBannerHead
 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 = withDeprecation(function (_ref) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'important' : _ref$variant,
@@ -20,9 +23,9 @@ export var NotificationBanner = withDeprecation(function (_ref) {
   title = title ? title : success ? 'Success' : 'Important';
   return /*#__PURE__*/React.createElement(CoreNotificationBanner, _extends({
     success: success
-  }, props), /*#__PURE__*/React.createElement(NotificationBannerHeader, null, title), /*#__PURE__*/React.createElement(NotificationBannerContent, null, /*#__PURE__*/React.createElement(NotificationBannerHeading, null, children), link && /*#__PURE__*/React.createElement(NotificationBannerLink, {
-    href: link.url
-  }, link.label)));
+  }, 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))));
 }, {
   name: 'NotificationBanner',
   props: {

package/es/core/NotificationBanner/index.mdx

@@ -1,75 +1,28 @@
 ---
+id: notification-banner
 title: NotificationBanner
-parent: docs/ui/components
 ---
 
 # NotificationBanner
 
-import { NotificationBanner } from '@digigov/ui/core';
+This component is currently experimental because more research is needed to validate it.
 
-### Example for "Important"
+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.
+ 
 
-```jsx live path=layouts/Basic/index.tsx
-import Header, { HeaderTitle } from '@digigov/ui/app/Header';
-import Paragraph from '@digigov/ui/typography/Paragraph';
 
-function NotificationBanner{
- return (
-      <NotificationBanner>
-      This is important !
-     </NotificationBanner>
- )
-}
-export NotificationBanner
+```bash
+import NotificationBanner from '@digigov/ui/core/NotificationBanner';
+``` 
 
-```
+## How to use
 
-<br />
+Use a ‘neutral’ blue notification banner if the user needs to know about a problem with the service as a whole.
 
-### Example for "NotificationBanner"
+Use a ‘neutral’ notification banner if the user needs to know about something that’s happening elsewhere in the service. 
 
-```jsx live path=layouts/Basic/index.tsx
-import Header, { HeaderTitle } from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/Logo';
+<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.
 
-function NotificationBanner{
- return (
-      <NotificationBanner variant="success">
-        Training outcome recorded and trainee withdrawn
-      </NotificationBanner>
- )
-}
-export NotificationBanner
-
-```
-
-<br />
-
-## When to use this component
-
-A notification banner lets you tell the user about something that’s not directly relevant to the thing they’re trying to do on that page of the service. For example:
-
-- telling the user about a problem that’s affecting the service as a whole (for example, delays in processing applications because of an emergency)
-- telling the user about something that affects them in particular (for example, an approaching deadline they need to meet)
-- telling the user about the outcome of something they’ve just done on a previous page (for example, confirming that an email has been sent)
-
-## When not to use this component
-
-Use notification banners sparingly. There’s evidence that people often miss them, and using them too often is likely to make this problem worse.
-
-If the information is directly relevant to the thing the user is doing on that page, put the information in the main page content instead. Use inset text or warning text if it needs to stand out.
-
-Don’t use a notification banner to tell the user about validation errors (use an error message and error summary instead).
-
-### API
-
-### Properties
-
-<PropsDoc data={NotificationBanner.__doc__} />
-
-<br />
-
-### Styles
-
-<StylesDoc data={NotificationBanner.__doc__} />
+<Story packageName="@digigov/ui" component="core/NotificationBanner" story="Success.tsx" />

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

@@ -13,7 +13,7 @@ it('renders the notification banner with title and link', function () {
   expect(mountWithTheme( /*#__PURE__*/React.createElement(NotificationBanner, {
     title: "Notification Banner Example",
     link: {
-      url: '/',
+      href: '/',
       label: 'This is a label'
     }
   }, "this is a notification"))).toMatchSnapshot();

package/es/core/PhaseBanner/PhaseBanner.stories.js

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

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,24 @@
+---
+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" />

package/es/core/Radios/Radios.stories.js

@@ -0,0 +1,12 @@
+import Radios from '@digigov/ui/core/Radios';
+export default {
+  title: 'Digigov UI/core/Radios',
+  component: Radios
+};
+export * from '@digigov/ui/core/Radios/__stories__/Default';
+export * from '@digigov/ui/core/Radios/__stories__/MultipleQuestions';
+export * from '@digigov/ui/core/Radios/__stories__/Inline';
+export * from '@digigov/ui/core/Radios/__stories__/WithHints';
+export * from '@digigov/ui/core/Radios/__stories__/NoneAnswer';
+export * from '@digigov/ui/core/Radios/__stories__/WithErrorMessage';
+export * from '@digigov/ui/core/Radios/__stories__/ConditionalReveal';

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import Radios, { RadioItem, RadioConditional } from '@digigov/ui/core/Radios';
+import TextInput from '@digigov/ui/core/TextInput';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+import Hint from '@digigov/ui/typography/Hint';
+
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__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, null, "\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(Radios, null, /*#__PURE__*/React.createElement(RadioItem, {
+  checked: 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/Radios/__stories__/Default.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Radios, { RadioItem } from '@digigov/ui/core/Radios';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+
+var _ref = /*#__PURE__*/React.createElement(Field, 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(Radios, 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/Radios/__stories__/Inline.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Radios, { RadioItem } from '@digigov/ui/core/Radios';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+import Hint from '@digigov/ui/typography/Hint';
+
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__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, null, "\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(Radios, {
+  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/Radios/__stories__/MultipleQuestions.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Radios, { RadioItem } from '@digigov/ui/core/Radios';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+import Hint from '@digigov/ui/typography/Hint';
+
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__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, null, "\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(Radios, 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/Radios/__stories__/NoneAnswer.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Radios, { RadioItem } from '@digigov/ui/core/Radios';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+
+var _ref = /*#__PURE__*/React.createElement(Field, 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(Radios, 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/Radios/__stories__/WithErrorMessage.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Radios, { RadioItem } from '@digigov/ui/core/Radios';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+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(Field, {
+  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, "\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, null, /*#__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(Radios, 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/Radios/__stories__/WithHints.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Radios, { RadioItem } from '@digigov/ui/core/Radios';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+import Hint from '@digigov/ui/typography/Hint';
+
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__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, null, "\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(Radios, null, /*#__PURE__*/React.createElement(RadioItem, {
+  name: "login",
+  value: "gsis"
+}, "\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7 \u03BC\u03B5 Taxisnet", /*#__PURE__*/React.createElement(Hint, null, "\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: "country",
+  value: "cyprus"
+}, "\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7 \u03BC\u03B5 \u03BB\u03BF\u03B3\u03B1\u03C1\u03B9\u03C3\u03BC\u03CC e-banking", /*#__PURE__*/React.createElement(Hint, null, "\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\u03B8\u03B5\u03AF\u03C4\u03B5")))));
+
+export var WithHints = function WithHints() {
+  return _ref;
+};
+export default WithHints;

package/es/core/Radios/index.js

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

package/es/core/Radios/index.mdx

@@ -0,0 +1,56 @@
+---
+id: radios
+title: Radios
+---
+
+
+# Radios
+
+ 
+
+
+```bash
+import Radios from '@digigov/ui/core/Radios';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Radios" story="Default.tsx" />
+
+### If you’re asking more than one question on the page
+
+<Story packageName="@digigov/ui" component="core/Radios" story="MultipleQuestions.tsx" />
+
+### Inline radios
+
+<Story packageName="@digigov/ui" component="core/Radios" 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/Radios" story="WithHints.tsx" />
+
+### Radio 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/Radios" 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/Radios" story="ConditionalReveal.tsx" />
+
+### Error messages
+
+Error messages should be styled like this:
+
+<Story packageName="@digigov/ui" component="core/Radios" story="WithErrorMessage.tsx" />
+
+
+

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

@@ -0,0 +1,8 @@
+import Select from "@digigov/ui/core/Select";
+export default {
+  title: 'Digigov UI/core/Select',
+  component: Select
+};
+export * from './__stories__/Default';
+export * from './__stories__/DisabledInput';
+export * from './__stories__/WithHint';

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

@@ -0,0 +1,21 @@
+import React from "react";
+import Select, { SelectOption } from "@digigov/ui/core/Select";
+import Field from '@digigov/ui/core/Field';
+import Label from '@digigov/react-core/Label'; // import LabelTitle from '@digigov/react-core/LabelTitle';
+
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7", /*#__PURE__*/React.createElement(Select, {
+  name: "select-list"
+}, /*#__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;

package/es/core/Select/__stories__/DisabledInput.js

@@ -0,0 +1,22 @@
+import React from "react";
+import Select, { SelectOption } from "@digigov/ui/core/Select";
+import Field from '@digigov/ui/core/Field';
+import Label from '@digigov/react-core/Label';
+
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7", /*#__PURE__*/React.createElement(Select, {
+  name: "select-list",
+  disabled: true
+}, /*#__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 DisabledInput = function DisabledInput() {
+  return _ref;
+};
+export default DisabledInput;

package/es/core/Select/__stories__/WithHint.js

@@ -0,0 +1,22 @@
+import React from "react";
+import Select, { SelectOption } from "@digigov/ui/core/Select";
+import Field from '@digigov/ui/core/Field';
+import Label from '@digigov/react-core/Label';
+import { Hint } from "@digigov/ui/typography"; // import LabelTitle from '@digigov/react-core/LabelTitle';
+
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7", /*#__PURE__*/React.createElement(Hint, null, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03C4\u03B7\u03BD \u03C4\u03B1\u03BE\u03B9\u03BC\u03CC\u03BD\u03B7\u03C3\u03B7 \u03C0\u03BF\u03C5 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5."), /*#__PURE__*/React.createElement(Select, {
+  name: "select-list"
+}, /*#__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;

package/es/core/Select/index.js

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

package/es/core/Select/index.mdx

@@ -0,0 +1,36 @@
+---
+id: select
+title: Select
+---
+
+
+# Select
+
+ 
+
+
+```bash
+import Select from '@digigov/ui/core/Select';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Select" story="Default.tsx" />
+
+
+### Select with hints
+
+You can add hints to select items to provide additional information about the options.
+
+<Story packageName="@digigov/ui" component="core/Select" story="WithHint.tsx" />
+
+
+
+### Disabled input
+
+Error messages should be styled like this:
+
+<Story packageName="@digigov/ui" component="core/Select" story="DisabledInput.tsx" />
+
+
+

package/es/core/SummaryList/SummaryList.stories.js

@@ -0,0 +1,9 @@
+/* eslint-disable digigov/no-relative-imports */
+import SummaryList from '@digigov/ui/core';
+export default {
+  title: 'Digigov UI/core/SummaryList',
+  component: SummaryList
+};
+export * from './__stories__/Default';
+export * from './__stories__/WithActions';
+export * from './__stories__/WithoutBorders';

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import SummaryList, { SummaryListItem, SummaryListItemAction, SummaryListItemKey, SummaryListItemValue } from '@digigov/ui/core/SummaryList';
+
+var _ref = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u03A4\u03AC\u03B4\u03B5 20, \u03A0\u03B1\u03C4\u03AE\u03C3\u03B9\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemAction, null)), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567")));
+
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref);
+};
+export default Default;

package/es/core/SummaryList/__stories__/WithActions.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import SummaryList, { SummaryListItem, SummaryListItemAction, SummaryListItemKey, SummaryListItemValue } from '@digigov/ui/core/SummaryList';
+import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
+import Link from '@digigov/ui/core/Link';
+import { ButtonGroup, Button } from '@digigov/ui/core';
+
+var _ref = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, " \u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, {
+  href: "#"
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039F\u03BD\u03CC\u03BC\u03B1\u03C4\u03BF\u03C2")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u03A4\u03AC\u03B4\u03B5 20, \u03A0\u03B1\u03C4\u03AE\u03C3\u03B9\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, {
+  href: "#"
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7\u03C2")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
+  variant: "link"
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5")), /*#__PURE__*/React.createElement(Button, {
+  variant: "link"
+}, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"))))));
+
+export var WithActions = function WithActions() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref);
+};
+export default WithActions;