@digigov/ui 0.28.1 → 0.28.3

package/es/admin/TaskList/__stories__/Default.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from '@digigov/react-core';
+import LinkBase from '@digigov/react-core/LinkBase';
 import SummaryList, { SummaryListItem, SummaryListItemAction, SummaryListItemKey } from '@digigov/ui/core/SummaryList';
 import { TaskList, TaskListItem, TaskListItemHeading, TaskListItemContent, TaskListItemTag } from '@digigov/ui/admin';
 var fields = [{
@@ -65,7 +65,7 @@ export var Default = function Default() {
 
       return /*#__PURE__*/React.createElement(SummaryListItem, {
         key: key
-      }, /*#__PURE__*/React.createElement(SummaryListItemKey, null, /*#__PURE__*/React.createElement(Link, null, task.text)), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(TaskListItemTag, {
+      }, /*#__PURE__*/React.createElement(SummaryListItemKey, null, /*#__PURE__*/React.createElement(LinkBase, null, task.text)), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(TaskListItemTag, {
         status: tagColor
       }, task.status)));
     }))));

package/es/admin/Timeline/Timeline.stories.js

@@ -1,6 +1,8 @@
 import Timeline from "@digigov/ui/admin/Timeline";
 export default {
   title: 'Digigov UI/admin/Timeline',
-  component: Timeline
+  description: 'Use this pattern to show a list of entries in the order they happened.',
+  component: Timeline,
+  displayName: 'Timeline'
 };
 export * from './__stories__/Default';

package/es/admin/Timeline/__stories__/Default.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Button, Hint, Link, Paragraph } from '@digigov/react-core';
+import { Button, Hint, Paragraph } from '@digigov/react-core';
+import LinkBase from '@digigov/react-core/LinkBase';
 import { Timeline, TimelineItem, TimelineHeading, TimelineContent, TimelineActions } from '@digigov/ui/admin';
 import Details, { DetailsSummary, DetailsContent } from '@digigov/ui/core/Details';
 var data = [{
@@ -54,7 +55,7 @@ export var Default = function Default() {
         color: button.color || 'secondary'
       }, button.text);
     }), field.links && field.links.map(function (link, index) {
-      return /*#__PURE__*/React.createElement(Link, {
+      return /*#__PURE__*/React.createElement(LinkBase, {
         key: index,
         href: link.href
       }, link.text);

package/es/app/Confirmation/Confirmation.mdx

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

package/es/app/Confirmation/Confirmation.stories.js

@@ -1,6 +1,9 @@
-import Confirmation from "@digigov/ui/app";
+import Confirmation from '@digigov/ui/app/Confirmation';
 export default {
   title: 'Digigov UI/app/Confirmation',
-  component: Confirmation
+  description: 'You should use it in a confirmation page at the end of a transaction.',
+  link: 'https://guide.services.gov.gr/docs/components/confirmation-message',
+  component: Confirmation,
+  displayName: 'Confirmation'
 };
-export * from './__stories__/Default';
+export * from '@digigov/ui/app/Confirmation/__stories__/Default';

package/es/app/Confirmation/index.js

@@ -1,5 +1,5 @@
+export * from '@digigov/react-core/Confirmation';
+export * from '@digigov/react-core/ConfirmationBody';
+export * from '@digigov/react-core/ConfirmationTitle';
 import Confirmation from '@digigov/react-core/Confirmation';
-import ConfirmationBody from '@digigov/react-core/ConfirmationBody';
-import ConfirmationTitle from '@digigov/react-core/ConfirmationTitle';
-export default Confirmation;
-export { ConfirmationBody, ConfirmationTitle };
+export default Confirmation;

package/es/app/Footer/Footer.mdx

@@ -28,3 +28,7 @@ import Footer from '@digigov/ui/app/Footer';
 ### All inclusive footer
 
 <Story packageName="@digigov/ui" component="app/Footer" story="FooterAllInclusive.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Footer" />

package/es/app/Footer/Footer.stories.js

@@ -1,8 +1,12 @@
 /* eslint-disable digigov/no-relative-imports */
-import Footer from '@digigov/ui/app';
+import Footer from '@digigov/ui/app/Footer';
 export default {
   title: 'Digigov UI/app/Footer',
-  component: Footer
+  description: 'The footer provides copyright, licensing and other information about your service and department.',
+  link: 'https://guide.services.gov.gr/docs/components/footer',
+  defaultWidth: 'l',
+  component: Footer,
+  displayName: 'Footer'
 };
 export * from './__stories__/Default';
 export * from './__stories__/FooterWithLogo';

package/es/app/Footer/index.js

@@ -12,4 +12,6 @@ export * from '@digigov/react-core/FooterListItem';
 export * from '@digigov/react-core/FooterMeta';
 export * from '@digigov/react-core/FooterMetaItem';
 export * from '@digigov/react-core/FooterNavigation';
-export * from '@digigov/react-core/FooterSection';
+export * from '@digigov/react-core/FooterSection';
+import Footer from '@digigov/react-core/Footer';
+export default Footer;

package/es/app/Header/Header.stories.js

@@ -2,6 +2,10 @@ import Header from '@digigov/ui/app/Header';
 export default {
   title: 'Digigov UI/app/Header',
   component: Header,
+  displayName: 'Header',
+  description: 'You must use the GOV.GR header at the top of every page if your service is being listed in the GOV.GR service catalog.',
+  link: 'https://guide.services.gov.gr/docs/components/header',
+  defaultWidth: 'l',
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen'

package/es/app/Header/index.mdx

@@ -25,3 +25,7 @@ import Header from '@digigov/ui/app/Header';
 ### Default header with navigation
 
 <Story packageName="@digigov/ui" component="app/Header" story="WithNavigation.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Header" />

package/es/app/I18nText.js

@@ -51,6 +51,7 @@ var recursiveReplace = function recursiveReplace(original, translation) {
 
     if (isObject(element)) {
       original[i] = /*#__PURE__*/React.cloneElement(original[i], _extends({}, original[i].props, {
+        key: i,
         children: recursiveReplace(original[i].props.children, translation[i].childNodes)
       }));
     }

package/es/app/NotFound/NotFound.stories.js

@@ -1,6 +1,7 @@
 import NotFound from '@digigov/ui/app/NotFound';
 export default {
   title: 'Digigov UI/app/NotFound',
-  component: NotFound
+  component: NotFound,
+  displayName: 'NotFound'
 };
 export * from '@digigov/ui/app/NotFound/__stories__/Default';

package/es/app/NotFound/index.mdx

@@ -10,3 +10,7 @@ import NotFound from '@digigov/ui/app/NotFound';
 ## How to use
 
 <Story packageName="@digigov/ui" component="app/NotFound" story="Default.tsx" />
+
+## API
+
+There are no available prop types for this component.

package/es/app/PageTitle.js

@@ -1,57 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["component", "children"];
-import React from 'react';
-import Caption from '@digigov/ui/typography/Caption';
-import Title from '@digigov/ui/typography/Title';
-import withDeprecation from '@digigov/ui/utils/withDeprecation';
-export var PageTitle = withDeprecation(function (_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-}, {
-  name: 'PageTitle',
-  warning: 'There is no need to use PageTitle components anymore. It will be removed in a later version'
-});
-export default PageTitle;
-export var PageTitleSection = withDeprecation(function (_ref2) {
-  var children = _ref2.children;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-}, {
-  name: 'PageTitleSection',
-  warning: 'There is no need to use PageTitleSection components anymore. It will be removed in a later version'
-});
-export var PageTitleCaption = withDeprecation(Caption, {
-  name: 'PageTitleCaption',
-  rename: 'HeadingCaption'
-});
-export var PageTitleHeading = withDeprecation(function (_ref3) {
-  var component = _ref3.component,
-      children = _ref3.children,
-      props = _objectWithoutProperties(_ref3, _excluded);
-
-  return /*#__PURE__*/React.createElement(Title, _extends({
-    size: "xl",
-    element: component
-  }, props), children);
-}, {
-  name: 'PageTitleHeading',
-  props: {
-    dense: {
-      error: true
-    },
-    size: {
-      values: {
-        xs: {
-          error: true
-        }
-      }
-    },
-    component: {
-      values: {
-        h5: {
-          error: true
-        }
-      }
-    }
-  }
-});
+import PageTitle from '@digigov/react-core/PageTitle';
+export * from '@digigov/react-core/PageTitle';
+export * from '@digigov/react-core/PageTitleCaption';
+export * from '@digigov/react-core/PageTitleHeading';
+export * from '@digigov/react-core/PageTitleSection';
+export default PageTitle;

package/es/app/PhaseBannerHeader/PhaseBannerHeader.stories.js

@@ -1,6 +1,7 @@
-import PhaseBannerHeader from "@digigov/ui/app";
+import PhaseBannerHeader from "@digigov/ui/app/PhaseBannerHeader";
 export default {
   title: 'Digigov UI/app/PhaseBannerHeader',
-  component: PhaseBannerHeader
+  component: PhaseBannerHeader,
+  displayName: 'PhaseBannerHeader'
 };
 export * from './__stories__/Default';

package/es/app/PhaseBannerHeader/index.mdx

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

package/es/app/QrCodeScanner/QrCodeScanner.stories.js

@@ -1,6 +1,7 @@
 import QrCodeScanner from '@digigov/ui/app/QrCodeScanner';
 export default {
   title: 'Digigov UI/app/QrCodeScanner',
-  component: QrCodeScanner
+  component: QrCodeScanner,
+  displayName: 'QrCodeScanner'
 };
 export * from '@digigov/ui/app/QrCodeScanner/__stories__/Default';

package/es/app/QrCodeScanner/index.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children", "validate", "onScan", "onError", "dataType", "legacyMode"];
+var _excluded = ["children", "validate", "onScan", "onError", "dataType", "legacyMode"];
 import React from 'react';
 var QrReader = /*#__PURE__*/React.lazy(function () {
-  return import('react-qr-reader');
+  return import('@uides/react-qr-reader');
 });
 
 /**
@@ -24,8 +24,7 @@ var QrReader = /*#__PURE__*/React.lazy(function () {
  *
  */
 export var QrCodeScanner = function QrCodeScanner(_ref) {
-  var className = _ref.className,
-      children = _ref.children,
+  var children = _ref.children,
       validate = _ref.validate,
       onScan = _ref.onScan,
       onError = _ref.onError,
@@ -58,7 +57,6 @@ export var QrCodeScanner = function QrCodeScanner(_ref) {
   };
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(QrReader, _extends({
-    className: className,
     delay: 100,
     onError: onError,
     onScan: handleOnScan,

package/es/app/QrCodeViewer/QRCode.stories.js

@@ -2,7 +2,8 @@
 import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
 export default {
   title: 'Digigov UI/app/QrCodeViewer',
-  component: QrCodeViewer
+  component: QrCodeViewer,
+  displayName: 'QrCodeViewer'
 };
 export * from './__stories__/Default';
 export * from './__stories__/Custom';

package/es/app/QrCodeViewer/index.js

@@ -1,9 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["value", "size", "level", "bgColor", "fgColor", "includeMargin", "style", "imageSettings"],
-    _excluded2 = ["value", "size", "level", "bgColor", "fgColor", "includeMargin", "imageSettings"],
-    _excluded3 = ["renderAs"];
+var _excluded = ["value", "size", "level", "bgColor", "fgColor", "includeMargin", "style", "imageSettings"];
 import React, { useRef, useEffect, useState } from 'react';
 import qrcodegen from '@digigov/ui/app/QrCodeViewer/qrcodegen';
 import { generatePath, excavateModules, getImageSettings, MARGIN_SIZE } from '@digigov/ui/app/QrCodeViewer/utils';
@@ -153,72 +151,7 @@ function QrCodeViewerCanvas(props) {
   }, otherProps)), img);
 }
 
-function QrCodeViewerSVG(props) {
-  var value = props.value,
-      _props$size2 = props.size,
-      size = _props$size2 === void 0 ? DEFAULT_SIZE : _props$size2,
-      _props$level2 = props.level,
-      level = _props$level2 === void 0 ? DEFAULT_LEVEL : _props$level2,
-      _props$bgColor2 = props.bgColor,
-      bgColor = _props$bgColor2 === void 0 ? DEFAULT_BGCOLOR : _props$bgColor2,
-      _props$fgColor2 = props.fgColor,
-      fgColor = _props$fgColor2 === void 0 ? DEFAULT_FGCOLOR : _props$fgColor2,
-      _props$includeMargin2 = props.includeMargin,
-      includeMargin = _props$includeMargin2 === void 0 ? DEFAULT_INCLUDEMARGIN : _props$includeMargin2,
-      imageSettings = props.imageSettings,
-      otherProps = _objectWithoutProperties(props, _excluded2);
-
-  var cells = qrcodegen.QrCode.encodeText(value, ERROR_LEVEL_MAP[level]).getModules();
-  var margin = includeMargin ? MARGIN_SIZE : 0;
-  var numCells = cells.length + margin * 2;
-  var calculatedImageSettings = getImageSettings(cells, size, includeMargin, imageSettings);
-  var image;
-
-  if (imageSettings != null && calculatedImageSettings != null) {
-    if (calculatedImageSettings.excavation != null) {
-      cells = excavateModules(cells, calculatedImageSettings.excavation);
-    }
-
-    image = /*#__PURE__*/React.createElement("image", {
-      xlinkHref: imageSettings.src,
-      height: calculatedImageSettings.h,
-      width: calculatedImageSettings.w,
-      x: calculatedImageSettings.x + margin,
-      y: calculatedImageSettings.y + margin,
-      preserveAspectRatio: "none"
-    });
-  } // Drawing strategy: instead of a rect per module, we're going to create a
-  // single path for the dark modules and layer that on top of a light rect,
-  // for a total of 2 DOM nodes. We pay a bit more in string concat but that's
-  // way faster than DOM ops.
-  // For level 1, 441 nodes -> 2
-  // For level 40, 31329 -> 2
-
-
-  var fgPath = generatePath(cells, margin);
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    height: size,
-    width: size,
-    viewBox: "0 0 ".concat(numCells, " ").concat(numCells)
-  }, otherProps), /*#__PURE__*/React.createElement("path", {
-    fill: bgColor,
-    d: "M0,0 h".concat(numCells, "v").concat(numCells, "H0z"),
-    shapeRendering: "crispEdges"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: fgColor,
-    d: fgPath,
-    shapeRendering: "crispEdges"
-  }), image);
-}
-
 export var QrCodeViewer = function QrCodeViewer(props) {
-  var renderAs = props.renderAs,
-      otherProps = _objectWithoutProperties(props, _excluded3);
-
-  if (renderAs === 'svg') {
-    return /*#__PURE__*/React.createElement(QrCodeViewerSVG, otherProps);
-  }
-
-  return /*#__PURE__*/React.createElement(QrCodeViewerCanvas, otherProps);
+  return /*#__PURE__*/React.createElement(QrCodeViewerCanvas, props);
 };
 export default QrCodeViewer;

package/es/app/QrCodeViewer/index.mdx

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

package/es/app/index.js

@@ -1,4 +1,6 @@
 export * from '@digigov/ui/app/App';
+export * from '@digigov/ui/app/Confirmation';
+export * from '@digigov/ui/app/Footer';
 export * from '@digigov/ui/app/PageTitle';
 export * from '@digigov/ui/app/QrCodeScanner';
 export * from '@digigov/ui/app/QrCodeViewer';

package/es/core/Accordion/Accordion.stories.js

@@ -1,7 +1,11 @@
-import Accordion from "@digigov/ui/core";
+import Accordion from "@digigov/ui/core/Accordion";
 export default {
   title: 'Digigov UI/core/Accordion',
-  component: Accordion
+  tags: ["Experimental"],
+  description: "The accordion component lets users show and hide sections of related content on a page.",
+  link: "https://guide.services.gov.gr/docs/components/accordion",
+  component: Accordion,
+  displayName: 'Accordion'
 };
 export * from './__stories__/Default';
 export * from './__stories__/WithHints';

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

@@ -8,13 +8,7 @@
             {
               "name": "click",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>details:nth-child(2)>summary"
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>div>details:nth-child(2)>div>p"
+                "selector": "text=Δικαστήρια"
               }
             }
           ],

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

@@ -4,7 +4,9 @@ import Paragraph from '@digigov/ui/typography/Paragraph';
 import Link from '@digigov/ui/core/Link';
 import List, { ListItem } from '@digigov/ui/core/List';
 
-var _ref = /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(AccordionSection, null, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, {
+var _ref = /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(AccordionSection, {
+  open: true
+}, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, {
   "aria-controls": "content1"
 }, "\u0394\u03B9\u03B1\u03C6\u03BF\u03C1\u03AD\u03C2 \u03BC\u03B5 \u03C4\u03BF \u03B4\u03B7\u03BC\u03CC\u03C3\u03B9\u03BF")), /*#__PURE__*/React.createElement(AccordionSectionContent, {
   id: "content1"

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

@@ -5,7 +5,9 @@ import Paragraph from '@digigov/ui/typography/Paragraph';
 import Link from '@digigov/ui/core/Link';
 import List, { ListItem } from '@digigov/ui/core/List';
 
-var _ref = /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(AccordionSection, null, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, {
+var _ref = /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(AccordionSection, {
+  open: true
+}, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, {
   "aria-controls": "content1"
 }, "\u0394\u03B9\u03B1\u03C6\u03BF\u03C1\u03AD\u03C2 \u03BC\u03B5 \u03C4\u03BF \u03B4\u03B7\u03BC\u03CC\u03C3\u03B9\u03BF"), /*#__PURE__*/React.createElement(Hint, null, "\u0394\u03B9\u03BA\u03B1\u03C3\u03C4\u03B9\u03BA\u03AD\u03C2 \u03BA\u03B1\u03B9 \u03B5\u03BE\u03C9\u03B4\u03B9\u03BA\u03B1\u03C3\u03C4\u03B9\u03BA\u03AD\u03C2 \u03B4\u03B9\u03B1\u03C6\u03BF\u03C1\u03AD\u03C2 \u03BC\u03B5 \u03C4\u03BF \u0394\u03B7\u03BC\u03CC\u03C3\u03B9\u03BF, \u03B5\u03BA\u03BA\u03B1\u03B8\u03AC\u03C1\u03B9\u03C3\u03B7 \u03B4\u03B9\u03BA\u03B1\u03C3\u03C4\u03B9\u03BA\u03CE\u03BD \u03B4\u03B1\u03C0\u03B1\u03BD\u03CE\u03BD \u03BA.\u03AC.")), /*#__PURE__*/React.createElement(AccordionSectionContent, {
   id: "content1"

package/es/core/Accordion/index.js

@@ -53,6 +53,12 @@ var useAccordion = function useAccordion(props) {
   }, rest);
 };
 
+export * from '@digigov/react-core/Accordion';
+export * from '@digigov/react-core/AccordionControls';
+export * from '@digigov/react-core/AccordionSection';
 export * from '@digigov/react-core/AccordionSectionHeader';
+export * from '@digigov/react-core/AccordionSectionContent';
+export * from '@digigov/react-core/AccordionSectionSummary';
+export * from '@digigov/react-core/AccordionSectionSummaryHeading';
 export { Accordion, AccordionControls, AccordionSection, AccordionSectionContent, AccordionSectionSummary, AccordionSectionSummaryHeading, useAccordion };
 export default Accordion;

package/es/core/Accordion/index.mdx

@@ -31,3 +31,7 @@ Accordions hide content, so the labels need to be clear. If necessary, you can a
 
 You can read more about the accessibility patterns used in our Accordion
 implementation in the [ARIA Authoring Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Accordion" />

package/es/core/BackLink/BackLink.stories.js

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

package/es/core/BackLink/index.mdx

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

package/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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, {