@digigov/ui 0.21.3 → 0.22.0

package/app/CopyToClipboard/__stories__/MultipleCopies.js

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.MultipleCopies = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CopyToClipboard = _interopRequireDefault(require("@digigov/ui/app/CopyToClipboard"));
+
+var _admin = require("@digigov/react-extensions/admin");
+
+var _reactCore = require("@digigov/react-core");
+
+var _Accordion = require("@digigov/ui/core/Accordion");
+
+var _ui = require("@digigov/ui");
+
+var _Title = _interopRequireDefault(require("@digigov/ui/typography/Title"));
+
+var _Paragraph = _interopRequireDefault(require("@digigov/ui/typography/Paragraph"));
+
+var _Footer = _interopRequireDefault(require("@digigov/ui/govgr/Footer"));
+
+var _Logo = _interopRequireDefault(require("@digigov/ui/govgr/Logo"));
+
+var _Grid = _interopRequireDefault(require("@digigov/ui/layouts/Grid"));
+
+var fields = [{
+  name: 'Θέμα',
+  value: 'Αίτηση Ληξιαρχικής Πράξης Γάμου'
+}, {
+  name: 'Ημερομηνία',
+  value: '09/03/2002 14:54:36'
+}, {
+  name: 'Κωδικός επαλήθευσης',
+  value: 'NdH-EYREW1yd1LUhEOssx4A',
+  actions: ['Προβολή', 'Αντιγραφή συνδέσμου']
+}, {
+  name: 'Κατάσταση',
+  value: 'Εισερχόμενη',
+  actions: ['Αλλάγή']
+}, {
+  name: 'Χειριστής',
+  value: 'Δεν έχει οριστεί χειριστής',
+  actions: ['Ανάθεση']
+}];
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_admin.AdminHeader, null, /*#__PURE__*/_react["default"].createElement(_admin.AdminHeaderSection, null, /*#__PURE__*/_react["default"].createElement(_ui.HeaderContent, null, /*#__PURE__*/_react["default"].createElement(_Logo["default"], null), /*#__PURE__*/_react["default"].createElement(_ui.HeaderTitle, null, "\u0398\u03C5\u03C1\u03AF\u03B4\u03B5\u03C2")), /*#__PURE__*/_react["default"].createElement(_ui.HeaderSubtitle, null, /*#__PURE__*/_react["default"].createElement(_admin.Dropdown, {
+  align: "right"
+}, /*#__PURE__*/_react["default"].createElement(_admin.DropdownButton, {
+  variant: "link"
+}, "\u0388\u03C7\u03B5\u03C4\u03B5 \u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF \u03C9\u03C2 \u039A\u03B1\u03BB\u03BB\u03B9\u03CC\u03C0\u03B7 \u03A0\u03B1\u03C0\u03B1\u03B4\u03BF\u03C0\u03BF\u03CD\u03BB\u03BF\u03C5", /*#__PURE__*/_react["default"].createElement(_reactCore.MoreVertIcon, null)), /*#__PURE__*/_react["default"].createElement(_admin.DropdownContent, null, /*#__PURE__*/_react["default"].createElement(_reactCore.NavVertical, null, /*#__PURE__*/_react["default"].createElement(_reactCore.NavVerticalItem, {
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_reactCore.NavVerticalItem, {
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_reactCore.NavVerticalItem, {
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")))))));
+
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+  item: true,
+  md: 3,
+  lg: 2
+}, /*#__PURE__*/_react["default"].createElement(_admin.AdminAside, null, /*#__PURE__*/_react["default"].createElement(_admin.AdminTopSection, null, /*#__PURE__*/_react["default"].createElement(_ui.BackButton, null, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE \u03B8\u03C5\u03C1\u03AF\u03B4\u03B1\u03C2"), /*#__PURE__*/_react["default"].createElement(_Title["default"], {
+  size: "sm"
+}, "\u039A\u0395\u03A0/\u0396\u0391\u039A\u03A5\u039D\u0398\u039F\u03A5 [\u0396\u0391\u039A\u03A5\u039D\u0398\u0399\u03A9\u039D]"), /*#__PURE__*/_react["default"].createElement(_Paragraph["default"], null, "\u039A\u0395\u03A0/\u0396\u0391\u039A\u03A5\u039D\u0398\u039F\u03A5 [\u0396\u0391\u039A\u03A5\u039D\u0398\u0399\u03A9\u039D]")), /*#__PURE__*/_react["default"].createElement(_ui.SectionBreak, {
+  visible: true,
+  size: "m"
+}), /*#__PURE__*/_react["default"].createElement(_ui.Button, null, "\u039D\u03AD\u03B1 \u03C5\u03C0\u03CC\u03B8\u03B5\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_Accordion.Accordion, null, /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionItem, null, /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionSectionSummary, null, /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionSectionSummaryHeading, null, "\u03A5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2"))), /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionItem, null, /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionSectionSummary, null, /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionSectionSummaryHeading, null, "\u0394\u03B9\u03B1\u03C7\u03B5\u03AF\u03C1\u03B9\u03C3\u03B7")), /*#__PURE__*/_react["default"].createElement(_reactCore.NavVertical, null, /*#__PURE__*/_react["default"].createElement(_reactCore.NavVerticalItem, null, "\u03A7\u03C1\u03AE\u03C3\u03C4\u03B5\u03C2"), /*#__PURE__*/_react["default"].createElement(_reactCore.NavVerticalItem, null, "\u0391\u03B9\u03C4\u03AE\u03BC\u03B1\u03C4\u03B1"))))));
+
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_Title["default"], {
+  size: "xl"
+}, "# \u03A5\u03C0\u03CC\u03B8\u03B5\u03C3\u03B7 4");
+
+var _ref4 = /*#__PURE__*/_react["default"].createElement(_ui.ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_CopyToClipboard["default"], {
+  text: "AAABBBFFFLLL",
+  variant: "tooltip",
+  message: "text successfuly copied!"
+}, /*#__PURE__*/_react["default"].createElement(_ui.Button, null, "\u0391\u03C0\u03AC\u03BD\u03C4\u03B7\u03C3\u03B7")), /*#__PURE__*/_react["default"].createElement(_ui.Button, {
+  color: "secondary"
+}, "\u0391\u03C0\u03BF\u03C3\u03C4\u03BF\u03BB\u03AE"), /*#__PURE__*/_react["default"].createElement(_ui.Button, {
+  color: "secondary"
+}, "\u0391\u03C0\u03BF\u03B8\u03AE\u03BA\u03B5\u03C5\u03C3\u03B7"));
+
+var _ref5 = /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+  item: true,
+  xs: 12
+}, /*#__PURE__*/_react["default"].createElement(_CopyToClipboard["default"], {
+  text: "AAABBBFFFLLL",
+  variant: "banner",
+  message: "text successfuly copied!"
+}, /*#__PURE__*/_react["default"].createElement(_ui.Button, {
+  color: "secondary"
+}, "Banner example")));
+
+var _ref6 = /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+  item: true,
+  xs: 12
+}, /*#__PURE__*/_react["default"].createElement(_CopyToClipboard["default"], {
+  text: "AAABBBFFFLLL",
+  variant: "tooltip",
+  message: "text successfuly copied!"
+}, /*#__PURE__*/_react["default"].createElement(_ui.Button, {
+  color: "secondary"
+}, "Tooltip example")));
+
+var _ref7 = /*#__PURE__*/_react["default"].createElement(_Footer["default"], null);
+
+var MultipleCopies = function MultipleCopies() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_admin.AdminLayout, null, _ref, /*#__PURE__*/_react["default"].createElement(_admin.AdminContainer, null, _ref2, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+    item: true,
+    md: 9,
+    lg: 10
+  }, /*#__PURE__*/_react["default"].createElement(_admin.AdminMain, null, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+    container: true,
+    spacing: 4
+  }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+    item: true,
+    xs: 12
+  }, _ref3, _ref4, /*#__PURE__*/_react["default"].createElement(_ui.SummaryList, null, fields && fields.map(function (field, index) {
+    return /*#__PURE__*/_react["default"].createElement(_ui.SummaryListItem, {
+      key: index
+    }, /*#__PURE__*/_react["default"].createElement(_ui.SummaryListItemKey, null, field.name), /*#__PURE__*/_react["default"].createElement(_ui.SummaryListItemValue, null, field.value), /*#__PURE__*/_react["default"].createElement(_ui.SummaryListItemAction, null, /*#__PURE__*/_react["default"].createElement(_ui.ButtonGroup, null, field.actions && field.actions.map(function (action, subIndex) {
+      return /*#__PURE__*/_react["default"].createElement(_CopyToClipboard["default"], {
+        text: "MMMNNNKKKO",
+        variant: "tooltip",
+        key: subIndex
+      }, /*#__PURE__*/_react["default"].createElement(_ui.Button, {
+        key: subIndex,
+        variant: "link"
+      }, action));
+    }))));
+  }))), _ref5, _ref6)))), _ref7));
+};
+
+exports.MultipleCopies = MultipleCopies;
+var _default = MultipleCopies;
+exports["default"] = _default;

package/app/CopyToClipboard/index.mdx

@@ -0,0 +1,22 @@
+---
+id: copy-to-clipboard
+title: CopyToClipboard
+---
+
+```bash
+import CopyToClipboard from '@digigov/ui/app/CopyToClipboard';
+``` 
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="app/CopyToClipboard" story="default.tsx" />
+
+### Banner
+
+<Story packageName="@digigov/ui" component="app/CopyToClipboard" story="banner.tsx" />
+
+### Layout example
+
+<Story packageName="@digigov/ui" component="app/CopyToClipboard" story="MultipleCopies.tsx" />

package/app/Footer/Footer.mdx

@@ -1,3 +1,30 @@
 ---
+id: footer
 title: Footer
 ---
+
+```bash
+import Footer from '@digigov/ui/app/Footer';
+``` 
+
+## How to use
+
+### Default footer
+
+<Story packageName="@digigov/ui" component="app/Footer" story="Default.tsx" />
+
+### Footer with logos
+
+<Story packageName="@digigov/ui" component="app/Footer" story="FooterWithLogo.tsx" />
+
+### Footer with secondary navigation
+
+<Story packageName="@digigov/ui" component="app/Footer" story="FooterWithSecondaryNavigation.tsx" />
+
+### Footer with links to meta information
+
+<Story packageName="@digigov/ui" component="app/Footer" story="FooterWithLink.tsx" />
+
+### All inclusive footer
+
+<Story packageName="@digigov/ui" component="app/Footer" story="FooterAllInclusive.tsx" />

package/app/Header/index.mdx

@@ -3,7 +3,25 @@ id: header
 title: Header
 ---
 
+
+```bash
+import Header from '@digigov/ui/app/Header';
+``` 
+
+## How to use
+
+### Default header
+
 <Story title="### Default" packageName="@digigov/ui" component="app/Header" story="Default.tsx" />
+
+### Header with service name
+
 <Story packageName="@digigov/ui" component="app/Header" story="WithServiceName.tsx" />
+
+### Header with service logo and service name
+
 <Story packageName="@digigov/ui" component="app/Header" story="WithServiceNameAndLogo.tsx" />
+
+### Default header with navigation
+
 <Story packageName="@digigov/ui" component="app/Header" story="WithNavigation.tsx" />

package/app/I18nText.js

@@ -17,17 +17,17 @@ var _react = _interopRequireDefault(require("react"));
 
 var _i18n = require("@digigov/ui/app/i18n");
 
-var _app = require("@digigov/ui/app");
-
 var isObject = function isObject(value) {
   return !!(value && (0, _typeof2["default"])(value) === 'object' && !Array.isArray(value));
 };
 
 var resultTranslate = function resultTranslate(translation, children) {
-  var parser = new DOMParser();
-  var childrenCloned = (0, _toConsumableArray2["default"])(children);
-  var doc1 = parser.parseFromString("<div>".concat(translation.replace(/<([0-9])>/g, '<t$1>').replace(/<\/([0-9])>/g, '</t$1>'), "</div>"), 'application/xml');
-  return recursiveReplace(childrenCloned, doc1.children[0].childNodes);
+  if (typeof DOMParser !== 'undefined') {
+    var parser = new DOMParser();
+    var childrenCloned = (0, _toConsumableArray2["default"])(children);
+    var doc1 = parser.parseFromString("<div>".concat(translation.replace(/<([0-9])>/g, '<t$1>').replace(/<\/([0-9])>/g, '</t$1>'), "</div>"), 'application/xml');
+    return recursiveReplace(childrenCloned, doc1.children[0].childNodes);
+  }
 };
 
 var recursiveReplace = function recursiveReplace(original, translation) {
@@ -75,7 +75,7 @@ var I18nText = function I18nText(_ref) {
   var translation = (0, _i18n.defaultTranslate)(i18nKey);
   var result = resultTranslate(translation, children);
 
-  var _useTranslation = (0, _app.useTranslation)(),
+  var _useTranslation = (0, _i18n.useTranslation)(),
       Trans = _useTranslation.Trans;
 
   if (Trans) {

package/app/NotFound/index.mdx

@@ -0,0 +1,12 @@
+---
+id: not-found
+title: NotFound
+---
+
+```bash
+import NotFound from '@digigov/ui/app/NotFound';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="app/NotFound" story="Default.tsx" />

package/app/PhaseBannerHeader/index.mdx

@@ -0,0 +1,12 @@
+---
+id: phase-banner-header
+title: PhaseBannerHeader
+---
+
+```bash
+import PhaseBannerHeader from '@digigov/ui/app/PhaseBannerHeader';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="app/PhaseBannerHeader" story="Default.tsx" />

package/core/Accordion/index.mdx

@@ -1,101 +1,28 @@
 ---
+id: accordion
 title: Accordion
-parent: docs/ui/components
 ---
 
-import {
-  Accordion,
-  AccordionItem,
-  AccordionItemDetails,
-  AccordionItemSummary,
-} from '@digigov/ui/core/Accordion';
 
-## Example
+# Accordion
 
-<Accordion>
-  <AccordionItem>
-    <AccordionItemSummary>Βασικες Ρυθμισεις</AccordionItemSummary>
-    <AccordionItemDetails>Περιεχομενο Βασικων Ρυθμισεων</AccordionItemDetails>
-  </AccordionItem>
-  <AccordionItem>
-    <AccordionItemSummary>Υπολοιπες Ρυθμισεις</AccordionItemSummary>
-    <AccordionItemDetails>Περιεχομενο Υπολοιπων Ρυθμισεων</AccordionItemDetails>
-  </AccordionItem>
-</Accordion>
+This component is currently experimental because adding a summary line with more than a few short words will likely make the button text too long, particularly for users of screen readers.
 
-## How to use
-
-```jsx live path=core/Accordion/index.tsx
-import {
-  Accordion,
-  AccordionItem,
-  AccordionItemDetails,
-  AccordionItemSummary,
-} from 'govgr/components/Accordion';
-
-function CustomAccordion() {
-  return (
-    <Accordion>
-      <AccordionItem>
-        <AccordionItemSummary>Βασικες Ρυθμισεις</AccordionItemSummary>
-        <AccordionItemDetails>
-          Περιεχομενο Βασικων Ρυθμισεων
-        </AccordionItemDetails>
-      </AccordionItem>
-      <AccordionItem>
-        <AccordionItemSummary>Υπολοιπες Ρυθμισεις</AccordionItemSummary>
-        <AccordionItemDetails>
-          Περιεχομενο Υπολοιπων Ρυθμισεων
-        </AccordionItemDetails>
-      </AccordionItem>
-    </Accordion>
-  );
-}
-```
-
-## When to use this component
-
-Only use an accordion if there’s evidence it’s helpful for users to:
-
-- see an overview of multiple, related sections of content
-- show and hide those sections as needed
+The accordion component lets users show and hide sections of related content on a page.
 
-Accordions can work well for people who use a service regularly, for example users of caseworking systems who need to perform familiar tasks quickly.
+ 
 
-## When not to use this component
 
-Accordions hide content from users and not everyone will notice them or understand how they work. For this reason do not use an accordion for content which is essential to all users.
+```bash
+import Accordion from '@digigov/ui/core/Accordion';
+``` 
 
-Test your content without an accordion first. Consider if it’s better to:
-
-- simplify and reduce the amount of content
-- split the content across multiple pages
-- keep the content on a single page, separated by headings
-- use a list of links to let users navigate quickly to specific sections of content
-
-Do not use the accordion component if the amount of content it would need to contain will make the page slow to load.
-
-Accordions work best for simple content and links. Do not use accordions to split up a series of questions into sections. Use separate pages instead.
-
-## API
+## How to use
 
-### Properties
+<Story packageName="@digigov/ui" component="core/Accordion" story="Default.tsx" />
 
-<PropsDoc data={Accordion.__doc__} />
-<br />
-<PropsDoc data={AccordionItem.__doc__} />
-<br />
-<PropsDoc data={AccordionItemSummary.__doc__} />
-<br />
-<PropsDoc data={AccordionItemDetails.__doc__} />
+### Accordion with Hints
 
-### Styles
+Accordions hide content, so the labels need to be clear. If necessary, you can add a summary line to help users understand what is in the section.
 
-<StylesDoc data={Accordion.__doc__} />
-<br />
-<StylesDoc data={AccordionItem.__doc__} />
-<br />
-<StylesDoc data={AccordionItemSummary.__doc__} />
-<br />
-<StylesDoc data={AccordionItemDetails.__doc__} />
-<br />
+<Story packageName="@digigov/ui" component="core/Accordion" story="WithHints.tsx" />

package/core/BackLink/index.mdx

@@ -0,0 +1,16 @@
+---
+id: back-link
+title: Back Link
+---
+
+# Back Link
+
+Use the back link component to help users go back to the previous page in a multi-page transaction.
+
+```bash
+import BackLink from "@digigov/ui/core/BackLink";
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/BackLink" story="Default.tsx" />

package/core/Blockquote/index.mdx

@@ -1,8 +1,23 @@
 ---
-parent: docs/ui/components
+id: blockquote
 title: Blockquote
 ---
 
+
+# Blockquote
+
+This component is currently experimental because adding a summary line with more than a few short words will likely make the button text too long, particularly for users of screen readers.
+
+The Blockquote component lets users show and hide sections of related content on a page.
+
+ 
+
+
+```bash
 import Blockquote from '@digigov/ui/core/Blockquote';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Blockquote" story="Default.tsx" />
 
-## Example

package/core/Breadcrumbs/__stories__/Default.js

@@ -17,7 +17,15 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Breadcrumbs["default"], null, /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.BreadcrumbsList, null, /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.BreadcrumbsListItem, null, "\u0391\u03C1\u03C7\u03B9\u03BA\u03AE"), /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.BreadcrumbsListItem, null, "\u03A5\u03B3\u03B5\u03AF\u03B1 \u03BA\u03B1\u03B9 \u03C0\u03C1\u03CC\u03BD\u03BF\u03B9\u03B1"), /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.BreadcrumbsListItem, null, "\u03A6\u03AC\u03BA\u03B5\u03BB\u03BF\u03C2 \u03C5\u03B3\u03B5\u03AF\u03B1\u03C2"), /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.BreadcrumbsListItem, null, "\u0386\u03C5\u03BB\u03B7 \u03C3\u03C5\u03BD\u03C4\u03B1\u03B3\u03BF\u03B3\u03C1\u03AC\u03C6\u03B7\u03C3\u03B7")));
+var _ref = /*#__PURE__*/_react["default"].createElement(_Breadcrumbs["default"], null, /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.BreadcrumbsList, null, /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.BreadcrumbsListItem, {
+  href: "#"
+}, "\u0391\u03C1\u03C7\u03B9\u03BA\u03AE"), /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.BreadcrumbsListItem, {
+  href: "#"
+}, "\u03A5\u03B3\u03B5\u03AF\u03B1 \u03BA\u03B1\u03B9 \u03C0\u03C1\u03CC\u03BD\u03BF\u03B9\u03B1"), /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.BreadcrumbsListItem, {
+  href: "#"
+}, "\u03A6\u03AC\u03BA\u03B5\u03BB\u03BF\u03C2 \u03C5\u03B3\u03B5\u03AF\u03B1\u03C2"), /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.BreadcrumbsListItem, {
+  href: "#"
+}, "\u0386\u03C5\u03BB\u03B7 \u03C3\u03C5\u03BD\u03C4\u03B1\u03B3\u03BF\u03B3\u03C1\u03AC\u03C6\u03B7\u03C3\u03B7")));
 
 var Default = function Default() {
   return _ref;

package/core/Breadcrumbs/breadcrumbs.mdx

@@ -0,0 +1,22 @@
+---
+id: breadcrumbs
+title: Breadcrumbs
+---
+
+
+# Breadcrumbs
+
+This component is currently experimental because adding a summary line with more than a few short words will likely make the button text too long, particularly for users of screen readers.
+
+The Breadcrumbs component lets users show and hide sections of related content on a page.
+
+ 
+
+
+```bash
+import Breadcrumbs from '@digigov/ui/core/Breadcrumbs';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Breadcrumbs" story="Default.tsx" />

package/core/Button/Button.mdx

@@ -9,18 +9,53 @@ Use the button component to help users carry out an action like starting an
 application or saving their information.
 
  
-## How to import
+
 
 ```bash
 import Button from '@digigov/ui/core/Button';
 ``` 
 
-## Usage
+## How to use
+
+### Default buttons
+
+Use a default button for the main call to action on a page.
 
 <Story packageName="@digigov/ui" component="core/Button" story="Primary.tsx" />
 
+
+### Start buttons
+Use a start button for the main call to action on your service’s start page. Start buttons do not submit form data, so they use a link tag rather than a button tag.
+
+<Story packageName="@digigov/ui" component="core/Button" story="CallToActionButton.tsx" />
+
+### Secondary buttons
+Use secondary buttons for secondary calls to action on a page.
+
 <Story packageName="@digigov/ui" component="core/Button" story="Secondary.tsx" />
 
+### Warning buttons
+Warning buttons are designed to make users think carefully before they use them. They only work if used very sparingly. Most services should not need one.
+
+<Story packageName="@digigov/ui" component="core/Button" story="Warning.tsx" />
+
+### Disable buttons
+Disabled buttons have poor contrast and can confuse some users, so avoid them if possible.
+
+<Story packageName="@digigov/ui" component="core/Button" story="Disabled.tsx" />
+
+
+### Grouping buttons
+Use a button group when two or more buttons are placed together.
+
+<Story packageName="@digigov/ui" component="core/Button" story="GroupingButtons.tsx" />
+
+Any links within a button group will automatically align with the buttons.
+
+<Story packageName="@digigov/ui" component="core/Button" story="GroupingButtonsAndLinks.tsx" />
+
+
+
 Write button text in sentence case, describing the action it performs. For
 example:'
 

package/core/Button/Button.stories.d.ts

@@ -9,3 +9,5 @@ export * from './__stories__/Secondary';
 export * from './__stories__/Warning';
 export * from './__stories__/GroupingButtons';
 export * from './__stories__/GroupingButtonsAndLinks';
+export * from './__stories__/CallToActionButton';
+export * from './__stories__/Disabled';

package/core/Button/Button.stories.js

@@ -79,6 +79,34 @@ Object.keys(_GroupingButtonsAndLinks).forEach(function (key) {
     }
   });
 });
+
+var _CallToActionButton = require("./__stories__/CallToActionButton");
+
+Object.keys(_CallToActionButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CallToActionButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _CallToActionButton[key];
+    }
+  });
+});
+
+var _Disabled = require("./__stories__/Disabled");
+
+Object.keys(_Disabled).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Disabled[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Disabled[key];
+    }
+  });
+});
 var _default = {
   title: 'Digigov UI/Core/Button',
   component: _Button["default"]

package/core/Button/__stories__/CallToActionButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const CallToActionButton: () => JSX.Element;
+export default CallToActionButton;

package/core/Button/__stories__/CallToActionButton.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.CallToActionButton = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = require("@digigov/ui/core/Button");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Button.CallToAction, null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var CallToActionButton = function CallToActionButton() {
+  return _ref;
+};
+
+exports.CallToActionButton = CallToActionButton;
+var _default = CallToActionButton;
+exports["default"] = _default;

package/core/Button/__stories__/Disabled.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/**
+ * My primary descrition is the best description that was described
+ */
+export declare const Disabled: () => JSX.Element;
+export default Disabled;

package/core/Button/__stories__/Disabled.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Disabled = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  disabled: true
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+/**
+ * My primary descrition is the best description that was described
+ */
+var Disabled = function Disabled() {
+  return _ref;
+};
+
+exports.Disabled = Disabled;
+var _default = Disabled;
+exports["default"] = _default;

package/core/Button/__stories__/Warning.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
 export declare const Warning: () => JSX.Element;
+export default Warning;