@digigov/ui 0.28.1 → 0.28.3

package/esm/core/Blockquote/Blockquote.stories.js

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

package/esm/core/Blockquote/index.mdx

@@ -21,3 +21,7 @@ import Blockquote from '@digigov/ui/core/Blockquote';
 
 <Story packageName="@digigov/ui" component="core/Blockquote" story="Default.tsx" />
 
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Blockquote" />

package/esm/core/Breadcrumbs/Breadcrumbs.stories.js

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

package/esm/core/Breadcrumbs/breadcrumbs.mdx

@@ -20,3 +20,7 @@ import Breadcrumbs from '@digigov/ui/core/Breadcrumbs';
 ## How to use
 
 <Story packageName="@digigov/ui" component="core/Breadcrumbs" story="Default.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Breadcrumbs" />

package/esm/core/Button/Button.stories.js

@@ -1,8 +1,11 @@
 /* eslint-disable digigov/no-relative-imports */
 import Button from '@digigov/ui/core/Button';
 export default {
-  title: 'Digigov UI/Core/Button',
-  component: Button
+  title: 'Digigov UI/core/Button',
+  description: 'Use the button component to help users carry out an action',
+  link: 'https://guide.services.gov.gr/docs/components/button',
+  component: Button,
+  displayName: 'Button'
 };
 export * from './__stories__/Primary';
 export * from './__stories__/Secondary';

package/esm/core/Button/index.mdx

@@ -94,4 +94,7 @@ Read more about [how to use the React types](/docs/api/Button)
 
 You can read more about the accessibility patterns used in our Select
 implementation in the ARIA Authoring Practices Guide (APG) at 
-[Button](https://www.w3.org/WAI/ARIA/apg/patterns/button/) section.
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Button" />

package/esm/core/Card/Card.stories.js

@@ -1,7 +1,11 @@
 import Card from '@digigov/ui/core/Card';
 export default {
   title: 'Digigov UI/core/Card',
-  component: Card
+  tags: ["Experimental"],
+  description: 'Cards can be used to divide and organise interface content for better understandability and readability',
+  link: 'https://guide.services.gov.gr/docs/components/card',
+  component: Card,
+  displayName: 'Card'
 };
 export * from '@digigov/ui/core/Card/__stories__/Default';
 export * from '@digigov/ui/core/Card/__stories__/WithGrayBorder';

package/esm/core/Card/__stories__/WithClickableContent.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import Card, { CardHeading, CardText } from '@digigov/ui/core/Card';
-import { Link } from '@digigov/react-core';
+import LinkBase from '@digigov/react-core/LinkBase';
 
 var _ref = /*#__PURE__*/React.createElement(Card, {
   callToAction: true
-}, /*#__PURE__*/React.createElement(CardHeading, null, /*#__PURE__*/React.createElement(Link, {
+}, /*#__PURE__*/React.createElement(CardHeading, null, /*#__PURE__*/React.createElement(LinkBase, {
   href: "#"
 }, "\u0393\u03B5\u03C9\u03C1\u03B3\u03AF\u03B1 \u03BA\u03B1\u03B9 \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03AF\u03B1")), /*#__PURE__*/React.createElement(CardText, null, "\u0394\u03B9\u03B1\u03B4\u03B9\u03BA\u03B1\u03C3\u03AF\u03B5\u03C2, \u03B5\u03C0\u03B9\u03B4\u03BF\u03C4\u03AE\u03C3\u03B5\u03B9\u03C2 \u03BA\u03B1\u03B9 \u03B1\u03C0\u03BF\u03B6\u03B7\u03BC\u03B9\u03CE\u03C3\u03B5\u03B9\u03C2 \u03B3\u03B9\u03B1 \u03C4\u03B7\u03BD \u03B3\u03B5\u03C9\u03C1\u03B3\u03B9\u03BA\u03AE, \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03B9\u03BA\u03AE \u03AE \u03B1\u03BB\u03B9\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C3\u03B1\u03C2 \u03B4\u03C1\u03B1\u03C3\u03C4\u03B7\u03C1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1."));
 

package/esm/core/Card/card.mdx

@@ -76,3 +76,7 @@ Cards also provides styles for actionable elements such as Buttons or Links.
 #### Card with a group of actions
 
 <Story packageName="@digigov/ui" component="core/Card" story="WithGroupButton.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Card" />

package/esm/core/Checkboxes/Checkbox.stories.js

@@ -1,7 +1,10 @@
 import Checkboxes from '@digigov/ui/core/Checkboxes';
 export default {
   title: 'Digigov UI/core/Checkboxes',
-  component: Checkboxes
+  description: 'Let users select one or more options by using the checkboxes component.',
+  link: 'https://guide.services.gov.gr/docs/components/checkboxes',
+  component: Checkboxes,
+  displayName: 'Checkboxes'
 };
 export * from '@digigov/ui/core/Checkboxes/__stories__/Default';
 export * from '@digigov/ui/core/Checkboxes/__stories__/MultipleQuestions';

package/esm/core/Checkboxes/__stories__/ConditionalReveal.js

@@ -9,7 +9,7 @@ var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.crea
 }, /*#__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(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
-  checked: true,
+  defaultChecked: true,
   name: "email",
   value: "email"
 }, "Email"), /*#__PURE__*/React.createElement(CheckboxConditional, null, "Email address", /*#__PURE__*/React.createElement(TextInput, {

package/esm/core/Checkboxes/__stories__/NoneAnswerWithError.js

@@ -14,7 +14,7 @@ var _ref = /*#__PURE__*/React.createElement(Field, {
 }, "\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, {
   id: "travel-error"
 }, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2 \u03C3\u03C4\u03B9\u03C2 \u03BF\u03C0\u03BF\u03AF\u03B5\u03C2 \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5, \u03AE \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \xAB\u038C\u03C7\u03B9, \u03B4\u03B5\u03BD \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03C9 \u03C3\u03B5 \u03BA\u03B1\u03BC\u03AF\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2\xBB."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
-  checked: true,
+  defaultChecked: true,
   name: "en",
   value: "en"
 }, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/React.createElement(CheckboxItem, {
@@ -23,7 +23,7 @@ var _ref = /*#__PURE__*/React.createElement(Field, {
 }, "\u0393\u03B1\u03BB\u03BB\u03AF\u03B1"), /*#__PURE__*/React.createElement("div", {
   className: "govgr-checkboxes__divider"
 }, "\u03AE"), /*#__PURE__*/React.createElement(CheckboxItem, {
-  checked: true,
+  defaultChecked: true,
   name: "none",
   value: "none"
 }, "\u038C\u03C7\u03B9, \u03B4\u03B5\u03BD \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03C9 \u03C3\u03B5 \u03BA\u03B1\u03BC\u03AF\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2"))));

package/esm/core/Checkboxes/checkboxes.mdx

@@ -52,3 +52,7 @@ This might make 2 related questions easier to answer by grouping them on the sam
 <Story packageName="@digigov/ui" component="core/Checkboxes" story="ConditionalReveal.tsx" />
 
 
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Checkbox" />

package/esm/core/DateInput/DateInput.stories.js

@@ -1,7 +1,10 @@
 import DateInput from '@digigov/ui/core/DateInput';
 export default {
   title: 'Digigov UI/core/DateInput',
-  component: DateInput
+  description: "Use the date input component to help users enter a memorable date or one they can easily look up.",
+  link: "https://guide.services.gov.gr/docs/components/date-input",
+  component: DateInput,
+  displayName: 'DateInput'
 };
 export * from '@digigov/ui/core/DateInput/__stories__/Default';
 export * from '@digigov/ui/core/DateInput/__stories__/MultipleQuestions';

package/esm/core/DateInput/index.js

@@ -1,4 +1,4 @@
-export * from '@digigov/react-core/DateInput';
+export * from '@digigov/react-core/DateInputContainer';
 export * from '@digigov/react-core/DateInputItem';
-import DateInput from '@digigov/react-core/DateInput';
+import DateInput from '@digigov/react-core/DateInputContainer';
 export default DateInput;

package/esm/core/DateInput/index.mdx

@@ -32,3 +32,8 @@ If you’re highlighting the whole date, style all the fields like this:
 If you’re highlighting just one field - either the day, month or year - only style the field that has an error. The error message must say which field has an error, like this:
 
 <Story packageName="@digigov/ui" component="core/DateInput" story="WithErrorMessageForSingleField.tsx" />
+
+## API
+ 
+<PropTypes packageName="@digigov/ui" component="DateInputContainer" />
+<PropTypes packageName="@digigov/ui" component="DateInputItem" />

package/esm/core/Details/Details.stories.js

@@ -1,6 +1,9 @@
 import Details from "@digigov/ui/core/Details";
 export default {
   title: 'Digigov UI/core/Details',
-  component: Details
+  description: 'Make a page easier to scan by letting users reveal more detailed information only if they need it.',
+  link: 'https://guide.services.gov.gr/docs/components/details',
+  component: Details,
+  displayName: 'Details'
 };
 export * from './__stories__/Default';

package/esm/core/Details/index.js

@@ -1,5 +1,5 @@
+export * from '@digigov/react-core/Details';
+export * from '@digigov/react-core/DetailsContent';
+export * from '@digigov/react-core/DetailsSummary';
 import Details from '@digigov/react-core/Details';
-import DetailsContent from '@digigov/react-core/DetailsContent';
-import DetailsSummary from '@digigov/react-core/DetailsSummary';
-export { Details, DetailsContent, DetailsSummary };
 export default Details;

package/esm/core/Details/index.mdx

@@ -16,3 +16,7 @@ import Details from '@digigov/ui/core/Details';
 ## How to use
 
 <Story packageName="@digigov/ui" component="core/Details" story="Default.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Details" />

package/esm/core/Divider/Divider.stories.js

@@ -2,6 +2,7 @@
 import Divider from '@digigov/ui/core/Divider';
 export default {
   title: 'Digigov UI/core/Divider',
-  component: Divider
+  component: Divider,
+  displayName: 'Divider'
 };
 export * from './__stories__/Default';

package/esm/core/Divider/index.js

@@ -4,4 +4,5 @@ export var Divider = withDeprecation(CoreSectionBreak, {
   name: 'Divider',
   rename: 'SectionBreak'
 });
+Divider.displayName = "Divider";
 export default Divider;

package/esm/core/ErrorMessage/ErrorMessage.stories.js

@@ -1,6 +1,9 @@
 import ErrorMessage from "@digigov/ui/core/ErrorMessage";
 export default {
   title: 'Digigov UI/core/ErrorMessage',
-  component: ErrorMessage
+  description: 'Show an error message next to the field and in the error summary when there is a validation error.',
+  link: 'https://guide.services.gov.gr/docs/components/error-message',
+  component: ErrorMessage,
+  displayName: 'ErrorMessage'
 };
 export * from './__stories__/Default';

package/esm/core/ErrorMessage/index.mdx

@@ -19,3 +19,7 @@ import ErrorMessage from '@digigov/ui/core/ErrorMessage';
 
 <Story packageName="@digigov/ui" component="core/ErrorMessage" story="Default.tsx" />
 
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="ErrorMessage" />

package/esm/core/ErrorSummary/ErrorSummary.stories.js

@@ -1,7 +1,10 @@
 import ErrorSummary from "@digigov/ui/core/ErrorSummary";
 export default {
   title: 'Digigov UI/core/ErrorSummary',
-  component: 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 './__stories__/Default';
 export * from './__stories__/LinkedToInput';

package/esm/core/ErrorSummary/__stories__/LinkedToInput.js

@@ -2,12 +2,12 @@ import React from 'react';
 import ErrorSummary from '@digigov/ui/core/ErrorSummary';
 import Title from '@digigov/ui/typography/Title';
 import Link from '@digigov/ui/core/Link';
-import TextInput from "@digigov/ui/core/TextInput";
+import TextInput from '@digigov/ui/core/TextInput';
 import Field from '@digigov/ui/core/Field';
-import Label from '@digigov/react-core/Label';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 import LabelTitle from '@digigov/react-core/LabelTitle';
 import Hint from '@digigov/ui/typography/Hint';
-import ErrorMessage from "@digigov/ui/core/ErrorMessage";
+import ErrorMessage from '@digigov/ui/core/ErrorMessage';
 import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
 
 var _ref = /*#__PURE__*/React.createElement("div", {
@@ -18,7 +18,7 @@ var _ref = /*#__PURE__*/React.createElement("div", {
   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(Field, {
   error: true
-}, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(LabelTitle, {
+}, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, {
   size: "m"
 }, "\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,

package/esm/core/ErrorSummary/index.js

@@ -1,3 +1,3 @@
+export * from '@digigov/react-core/ErrorSummary';
 import ErrorSummary from '@digigov/react-core/ErrorSummary';
-export { ErrorSummary };
 export default ErrorSummary;

package/esm/core/ErrorSummary/index.mdx

@@ -40,3 +40,7 @@ For questions that require a user to select one or more options from a list usin
 <Story packageName="@digigov/ui" component="core/ErrorSummary" story="LinkedToCheckbox.tsx" />
 
 
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="ErrorSummary" />

package/esm/core/Field/index.js

@@ -1,5 +1,5 @@
-export * from '@digigov/react-core/Field';
+import Field from '@digigov/react-core/FieldContainer';
+export * from '@digigov/react-core/FieldContainer';
 export * from '@digigov/react-core/Fieldset';
 export * from '@digigov/react-core/FieldsetLegend';
-import Field from '@digigov/react-core/Field';
 export default Field;

package/esm/core/FileUpload/FileUpload.stories.js

@@ -1,7 +1,9 @@
 import FileUpload from '@digigov/ui/core/FileUpload';
 export default {
   title: 'Digigov UI/core/FileUpload',
-  component: FileUpload
+  link: 'https://guide.services.gov.gr/docs/components/file-upload',
+  component: FileUpload,
+  displayName: 'FileUpload'
 };
 export * from '@digigov/ui/core/FileUpload/__stories__/Default';
 export * from '@digigov/ui/core/FileUpload/__stories__/WithErrorMessage';

package/esm/core/FileUpload/index.mdx

@@ -19,4 +19,7 @@ import FileUpload from '@digigov/ui/core/FileUpload';
 
 Error messages should be styled like this:
 
-<Story packageName="@digigov/ui" component="core/FileUpload" story="WithErrorMessage.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="FileUpload" />

package/esm/core/Label/index.js

@@ -1,4 +1,4 @@
-export * from '@digigov/react-core/Label';
+export * from '@digigov/react-core/LabelContainer';
 export * from '@digigov/react-core/LabelTitle';
-import Label from '@digigov/react-core/Label';
+import Label from '@digigov/react-core/LabelContainer';
 export default Label;

package/esm/core/Link/Link.stories.js

@@ -1,7 +1,9 @@
 import Link from '@digigov/ui/core/Link';
 export default {
   title: 'Digigov UI/core/Link',
-  component: Link
+  link: 'https://guide.services.gov.gr/docs/styles/typography#links',
+  component: Link,
+  displayName: 'Link'
 };
 export * from '@digigov/ui/core/Link/__stories__/Default';
 export * from '@digigov/ui/core/Link/__stories__/ExternalLink';

package/esm/core/Link/index.js

@@ -2,17 +2,17 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "href"];
 import * as React from 'react';
-import CoreLink from '@digigov/react-core/Link';
+import LinkBase from '@digigov/react-core/LinkBase';
 export var CommonLink = function CommonLink(props) {
-  return /*#__PURE__*/React.createElement("a", props, props.children);
+  return /*#__PURE__*/React.createElement(LinkBase, props, props.children);
 };
-var LinkComponentContext = /*#__PURE__*/React.createContext(CoreLink);
+var LinkComponentContext = /*#__PURE__*/React.createContext(LinkBase);
 export var LinkProvider = function LinkProvider(props) {
   return /*#__PURE__*/React.createElement(LinkComponentContext.Provider, {
     value: props.component
   }, props.children);
 };
-var Link = /*#__PURE__*/React.forwardRef(function WrappedLink(_ref, ref) {
+var Link = /*#__PURE__*/React.forwardRef(function Link(_ref, ref) {
   var children = _ref.children,
       _ref$href = _ref.href,
       href = _ref$href === void 0 ? '' : _ref$href,
@@ -23,6 +23,8 @@ var Link = /*#__PURE__*/React.forwardRef(function WrappedLink(_ref, ref) {
     ref: ref,
     href: href
   }, props), children);
-});
+}); //@ts-ignore
+
+Link.displayName = "Link";
 export default Link;
-export { Link };
+export { Link, LinkBase };

package/esm/core/Link/link.mdx

@@ -32,3 +32,7 @@ import Link from '@digigov/ui/core/Link';
 You can read more about the accessibility patterns used in our Link
 implementation in the ARIA Authoring Practices Guide (APG) at 
 [Link](https://www.w3.org/WAI/ARIA/apg/patterns/link/) section.
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Link" />

package/esm/core/List/List.js

@@ -1,3 +1,3 @@
+export * from '@digigov/react-core/List';
 import List from '@digigov/react-core/List';
-export { List };
 export default List;

package/esm/core/List/List.stories.js

@@ -1,7 +1,10 @@
-import List from '@digigov/ui/core';
+import List from '@digigov/ui/core/List';
 export default {
   title: 'Digigov UI/core/List',
-  component: List
+  description: 'Use lists to make blocks of text easier to read, and to break information into manageable chunks.',
+  link: 'https://guide.services.gov.gr/docs/styles/typography#lists',
+  component: List,
+  displayName: 'List'
 };
 export * from './__stories__/Default';
 export * from './__stories__/BulletList';

package/esm/core/List/index.mdx

@@ -25,3 +25,7 @@ import List from '@digigov/ui/core/List';
 ### List with extra space
 
 <Story packageName="@digigov/ui" component="core/List" story="WithExtraSpace.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="List" />

package/esm/core/Masthead/Masthead.stories.js

@@ -1,6 +1,10 @@
 import Masthead from '@digigov/ui/core/Masthead';
 export default {
   title: 'Digigov UI/core/Masthead',
-  component: 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: 'l',
+  component: Masthead,
+  displayName: 'Masthead'
 };
 export * from '@digigov/ui/core/Masthead/__stories__/Default';

package/esm/core/Masthead/masthead.mdx

@@ -12,3 +12,7 @@ import Masthead from '@digigov/ui/core/Masthead';
 ## How to use
 
 <Story packageName="@digigov/ui" component="core/Masthead" story="Default.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Masthead" />

package/esm/core/NavList/NavList.stories.js

@@ -1,7 +1,10 @@
 import NavList from '@digigov/ui/core/NavList';
 export default {
   title: 'Digigov UI/core/NavList',
-  component: NavList
+  description: 'Use the navigation list component only when you need to show more options in one page.',
+  link: 'https://guide.services.gov.gr/docs/components/navigation-list',
+  component: NavList,
+  displayName: 'NavList'
 };
 export * from '@digigov/ui/core/NavList/__stories__/Default';
 export * from '@digigov/ui/core/NavList/__stories__/NavHorizontalLayout';

package/esm/core/NavList/index.js

@@ -1,4 +1,3 @@
-export { NavList as default } from '@digigov/ui/core/NavList/NavList';
 export * from '@digigov/ui/core/NavList/NavList';
 export * from '@digigov/ui/core/NavList/NavListItem';
 export * from '@digigov/ui/core/NavList/NavListSubMenu';
@@ -7,4 +6,7 @@ export * from '@digigov/ui/core/NavList/NavHorizontal';
 export * from '@digigov/ui/core/NavList/NavHorizontalList';
 export * from '@digigov/ui/core/NavList/NavHorizontalListItem';
 export * from '@digigov/ui/core/NavList/NavVertical';
-export * from '@digigov/ui/core/NavList/NavVerticalItem';
+export * from '@digigov/ui/core/NavList/NavVerticalItem';
+export * from '@digigov/ui/core/NavList/types';
+import NavList from '@digigov/ui/core/NavList/NavList';
+export default NavList;

package/esm/core/NavList/index.mdx

@@ -23,3 +23,7 @@ import NavList, { NavListItem } from '@digigov/ui/core/NavList';
 You can read more about the accessibility patterns used in our NavList
 implementation in the ARIA Authoring Practices Guide (APG) at
 [Menu or Menu bar](https://www.w3.org/WAI/ARIA/apg/patterns/menu/).
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="NavList" />

package/esm/core/NotificationBanner/NotificationBanner.stories.js

@@ -1,7 +1,11 @@
 import NotificationBanner from '@digigov/ui/core/NotificationBanner';
 export default {
   title: 'Digigov UI/core/NotificationBanner',
-  component: 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/core/NotificationBanner/__stories__/Default';
 export * from '@digigov/ui/core/NotificationBanner/__stories__/Success';

package/esm/core/NotificationBanner/index.js

@@ -2,7 +2,7 @@ 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 CoreNotificationBanner from '@digigov/react-core/NotificationBanner';
+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';
@@ -20,11 +20,11 @@ export var NotificationBanner = function NotificationBanner(_ref) {
 
   var success = variant === 'success';
   title = title ? title : success ? 'Success' : 'Important';
-  return /*#__PURE__*/React.createElement(CoreNotificationBanner, _extends({
+  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 { NotificationBannerHeader, NotificationBannerContent, NotificationBannerHeading, NotificationBannerLink };
+export { NotificationBannerContainer, NotificationBannerHeader, NotificationBannerContent, NotificationBannerHeading, NotificationBannerLink };
 export default NotificationBanner;

package/esm/core/NotificationBanner/index.mdx

@@ -26,3 +26,7 @@ Use a ‘neutral’ notification banner if the user needs to know about somethin
 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/esm/core/PhaseBanner/PhaseBanner.stories.js

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

package/esm/core/PhaseBanner/index.mdx

@@ -22,3 +22,7 @@ Your banner must be directly under the blue GOV.GR header and colour bar.
 ### Underlined
 
 <Story packageName="@digigov/ui" component="core/PhaseBanner" story="Underlined.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="PhaseBanner" />

package/esm/core/Radios/Radios.stories.js

@@ -1,7 +1,10 @@
 import Radios from '@digigov/ui/core/Radios';
 export default {
   title: 'Digigov UI/core/Radios',
-  component: Radios
+  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: Radios,
+  displayName: 'Radios'
 };
 export * from '@digigov/ui/core/Radios/__stories__/Default';
 export * from '@digigov/ui/core/Radios/__stories__/MultipleQuestions';

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

@@ -9,7 +9,7 @@ var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.crea
 }, /*#__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(Radios, null, /*#__PURE__*/React.createElement(RadioItem, {
-  checked: true,
+  defaultChecked: true,
   name: "contact",
   value: "email"
 }, "Email"), /*#__PURE__*/React.createElement(RadioConditional, null, "Email address", /*#__PURE__*/React.createElement(TextInput, {

package/esm/core/Radios/index.js

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