@digigov/ui 2.0.0-rc.1 → 2.0.0-rc.3

package/app/Footer/index.mdx

@@ -3,10 +3,6 @@ id: footer
 title: Footer
 ---
 
-```bash
-import Footer from '@digigov/ui/app/Footer';
-```
-
 ## How to use
 
 ### Default footer
@@ -47,4 +43,21 @@ import Footer from '@digigov/ui/app/Footer';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Footer" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Footer",
+  "FooterContainer",
+  "FooterNavigation",
+  "FooterNavigationSection",
+  "FooterHeading",
+  "FooterList",
+  "FooterListItem",
+  "FooterLink",
+  "FooterInfo",
+  "FooterInfoSection",
+  "FooterContent",
+  "FooterContentLogos",
+  "FooterImage",
+  "CopyrightContainer"]} 
+/> 

package/app/Header/index.mdx

@@ -3,10 +3,6 @@ id: header
 title: Header
 ---
 
-```bash
-import Header from '@digigov/ui/app/Header';
-```
-
 ## How to use
 
 ### Default header
@@ -44,4 +40,10 @@ import Header from '@digigov/ui/app/Header';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Header" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Header",
+  "HeaderContent",
+  "HeaderSection",]} 
+/> 

package/app/Masthead/index.mdx

@@ -5,9 +5,7 @@ title: Masthead
 
 # Masthead
 
-```bash
-import Masthead from '@digigov/ui/app/Masthead';
-```
+The Masthead component is a set of features or layout that marks the page and delivers identifying information to web users.
 
 ## How to use
 
@@ -15,4 +13,11 @@ import Masthead from '@digigov/ui/app/Masthead';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Masthead" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Masthead",
+  "MastheadBody",
+  "MastheadLogo",
+]} 
+/> 

package/app/Modal/index.mdx

@@ -3,9 +3,7 @@ id: modal
 title: Modal
 ---
 
-```bash
-import Modal, {ModalHeading, ModalContent, ModalAction} from "@digigov/ui/app/Modal";
-```
+Modal is a dialog box/popup window which contains information or an action and it is displayed on top of the current page:
 
 ## How to use
 
@@ -30,4 +28,13 @@ implementation in the ARIA Authoring Practices Guide (APG) at
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Modal" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "ModalContainer",
+  "Modal",
+  "ModalHeading",
+  "ModalContent",
+  "ModalAction"]} 
+/> 
+

package/app/NotFound/index.mdx

@@ -13,4 +13,6 @@ import NotFound from '@digigov/ui/app/NotFound';
 
 ## API
 
+See below for a complete reference to all of the props  available to the components mentioned here.
+
 There are no available prop types for this component.

package/app/Panel/index.mdx

@@ -3,9 +3,8 @@ id: panel
 title: Panel
 ---
 
-```bash
-import Panel from '@digigov/ui/app/Panel';
-```
+Panels are bordered boxes where you can place texts, lists, tables and other content. 
+Panels are similar to cards, but they don't include media.
 
 ## How to use
 
@@ -13,4 +12,10 @@ import Panel from '@digigov/ui/app/Panel';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Panel" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Panel", 
+  "PanelTitle", 
+  "PanelBody"]} 
+/> 

package/app/PhaseBannerHeader/index.mdx

@@ -3,9 +3,7 @@ id: phase-banner-header
 title: PhaseBannerHeader
 ---
 
-```bash
-import PhaseBannerHeader from '@digigov/ui/app/PhaseBannerHeader';
-```
+Phase banner lets users know the service is still being worked on, and encourages the user to provide feedback to help improve it.
 
 ## How to use
 
@@ -17,4 +15,6 @@ import PhaseBannerHeader from '@digigov/ui/app/PhaseBannerHeader';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="PhaseBannerHeader" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["PhaseBannerHeaderContainer"]} />

package/app/QrCodeViewer/index.mdx

@@ -3,9 +3,7 @@ id: qr-code-viewer
 title: QrCodeViewer
 ---
 
-```bash
-import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
-```
+QR codes are frequently used to track information and allow the users to access this information instantly.
 
 ## How to use
 
@@ -27,4 +25,6 @@ import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="QrCodeViewer" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+There are no available prop types for this component.

package/cjs/app/Footer/index.mdx

@@ -3,10 +3,6 @@ id: footer
 title: Footer
 ---
 
-```bash
-import Footer from '@digigov/ui/app/Footer';
-```
-
 ## How to use
 
 ### Default footer
@@ -47,4 +43,21 @@ import Footer from '@digigov/ui/app/Footer';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Footer" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Footer",
+  "FooterContainer",
+  "FooterNavigation",
+  "FooterNavigationSection",
+  "FooterHeading",
+  "FooterList",
+  "FooterListItem",
+  "FooterLink",
+  "FooterInfo",
+  "FooterInfoSection",
+  "FooterContent",
+  "FooterContentLogos",
+  "FooterImage",
+  "CopyrightContainer"]} 
+/> 

package/cjs/app/Header/index.mdx

@@ -3,10 +3,6 @@ id: header
 title: Header
 ---
 
-```bash
-import Header from '@digigov/ui/app/Header';
-```
-
 ## How to use
 
 ### Default header
@@ -44,4 +40,10 @@ import Header from '@digigov/ui/app/Header';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Header" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Header",
+  "HeaderContent",
+  "HeaderSection",]} 
+/> 

package/cjs/app/Masthead/index.mdx

@@ -5,9 +5,7 @@ title: Masthead
 
 # Masthead
 
-```bash
-import Masthead from '@digigov/ui/app/Masthead';
-```
+The Masthead component is a set of features or layout that marks the page and delivers identifying information to web users.
 
 ## How to use
 
@@ -15,4 +13,11 @@ import Masthead from '@digigov/ui/app/Masthead';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Masthead" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Masthead",
+  "MastheadBody",
+  "MastheadLogo",
+]} 
+/> 

package/cjs/app/Modal/index.mdx

@@ -3,9 +3,7 @@ id: modal
 title: Modal
 ---
 
-```bash
-import Modal, {ModalHeading, ModalContent, ModalAction} from "@digigov/ui/app/Modal";
-```
+Modal is a dialog box/popup window which contains information or an action and it is displayed on top of the current page:
 
 ## How to use
 
@@ -30,4 +28,13 @@ implementation in the ARIA Authoring Practices Guide (APG) at
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Modal" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "ModalContainer",
+  "Modal",
+  "ModalHeading",
+  "ModalContent",
+  "ModalAction"]} 
+/> 
+

package/cjs/app/NotFound/index.mdx

@@ -13,4 +13,6 @@ import NotFound from '@digigov/ui/app/NotFound';
 
 ## API
 
+See below for a complete reference to all of the props  available to the components mentioned here.
+
 There are no available prop types for this component.

package/cjs/app/Panel/index.mdx

@@ -3,9 +3,8 @@ id: panel
 title: Panel
 ---
 
-```bash
-import Panel from '@digigov/ui/app/Panel';
-```
+Panels are bordered boxes where you can place texts, lists, tables and other content. 
+Panels are similar to cards, but they don't include media.
 
 ## How to use
 
@@ -13,4 +12,10 @@ import Panel from '@digigov/ui/app/Panel';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Panel" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Panel", 
+  "PanelTitle", 
+  "PanelBody"]} 
+/> 

package/cjs/app/PhaseBannerHeader/index.mdx

@@ -3,9 +3,7 @@ id: phase-banner-header
 title: PhaseBannerHeader
 ---
 
-```bash
-import PhaseBannerHeader from '@digigov/ui/app/PhaseBannerHeader';
-```
+Phase banner lets users know the service is still being worked on, and encourages the user to provide feedback to help improve it.
 
 ## How to use
 
@@ -17,4 +15,6 @@ import PhaseBannerHeader from '@digigov/ui/app/PhaseBannerHeader';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="PhaseBannerHeader" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["PhaseBannerHeaderContainer"]} />

package/cjs/app/QrCodeViewer/index.mdx

@@ -3,9 +3,7 @@ id: qr-code-viewer
 title: QrCodeViewer
 ---
 
-```bash
-import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
-```
+QR codes are frequently used to track information and allow the users to access this information instantly.
 
 ## How to use
 
@@ -27,4 +25,6 @@ import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="QrCodeViewer" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+There are no available prop types for this component.

package/cjs/content/Accordion/__stories__/Auto/index.js

@@ -6,15 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Auto = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Accordion = require("@digigov/ui/content/Accordion/");
+var _Accordion = require("@digigov/ui/content/Accordion");
 var _List = require("@digigov/ui/content/List/List");
 var _ListItem = require("@digigov/ui/content/List/ListItem");
 var _Link = require("@digigov/ui/navigation/Link");
 var _Hint = require("@digigov/ui/typography/Hint");
 var _Paragraph = require("@digigov/ui/typography/Paragraph");
 var _ref = /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionAuto, {
-  defaultOpen: '1',
-  singleOpen: true
+  defaultOpen: '1'
 }, /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionControls, null, /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionOpenAllButtonAuto, null, "Open all"), /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionCloseAllButtonAuto, null, "Close all")), /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionSectionAuto, {
   id: "0"
 }, /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionSectionSummary, null, /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionSectionSummaryHeading, {

package/cjs/content/Accordion/hooks/index.js

@@ -97,7 +97,6 @@ var useAccordion = exports.useAccordion = function useAccordion() {
       } else {
         var _e$target3;
         setCurrentOpen((0, _extends4["default"])({}, current, (0, _defineProperty2["default"])({}, id, (_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.open)));
-        console.log('current2 is', current);
       }
     };
     var onKeyDown = function onKeyDown(e) {

package/cjs/content/Accordion/index.mdx

@@ -3,18 +3,19 @@ id: accordion
 title: Accordion
 ---
 
+ 
 # 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.
 
 The accordion component lets users show and hide sections of related content on a page.
 
-```bash
-import Accordion from '@digigov/ui/content/Accordion';
-```
-
 ## How to use
 
+### Default Accordion
+
 <Story
   packageName="@digigov/ui"
   component="content/Accordion"
@@ -38,4 +39,7 @@ implementation in the [ARIA Authoring Practices Guide (APG)](https://www.w3.org/
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Accordion" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Accordion", "AccordionSection","AccordionSectionSummary","AccordionSectionSummaryHeading","AccordionSectionContent"]} />
+

package/cjs/content/Blockquote/index.mdx

@@ -9,10 +9,6 @@ This component is currently experimental because adding a summary line with more
 
 The Blockquote component lets users show and hide sections of related content on a page.
 
-```bash
-import Blockquote from '@digigov/ui/content/Blockquote';
-```
-
 ## How to use
 
 <Story
@@ -23,4 +19,6 @@ import Blockquote from '@digigov/ui/content/Blockquote';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Blockquote" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Blockquote"]} />

package/cjs/content/Card/index.mdx

@@ -8,10 +8,6 @@ title: Card
 Cards can be used to divide and organise interface content for better understandability and readability.
 When used correctly, Cards can help users to scan through vast amounts of information quicker.
 
-```bash
-import Card from '@digigov/ui/content/Card';
-```
-
 ## How to use
 
 <Story packageName="@digigov/ui" component="content/Card" story="Default.tsx" />
@@ -102,4 +98,6 @@ Cards also provides styles for actionable elements such as Buttons or Links.
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Card" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Card", "CardHeading", "CardContent", "CardAction"]} /> 

package/cjs/content/Chip/index.mdx

@@ -9,10 +9,6 @@ Chips allow users to enter information, make selections, filter content, or trig
 While buttons are expected to appear consistently and with familiar calls to action,
 chips should appear dynamically as a group of multiple interactive elements.
 
-```bash
-import Chip from '@digigov/ui/content/Chip';
-```
-
 ## How to use
 
 <Story packageName="@digigov/ui" component="content/Chip" story="Default.tsx" />
@@ -51,4 +47,7 @@ import Chip from '@digigov/ui/content/Chip';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Chip" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Chip"]} />
+

package/cjs/content/Details/index.mdx

@@ -7,10 +7,6 @@ title: Details
 
 The details component is a short link that shows more detailed help text when a user clicks on it.
 
-```bash
-import Details from '@digigov/ui/content/Details';
-```
-
 ## How to use
 
 <Story
@@ -26,4 +22,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Disclosure](https
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Details" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Details", "DetailsSummary", "DetailsContent"]} />

package/cjs/content/List/__stories__/Default/index.js

@@ -8,8 +8,7 @@ exports["default"] = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _List = require("@digigov/ui/content/List/List");
 var _ListItem = require("@digigov/ui/content/List/ListItem");
-var _Link = require("@digigov/ui/navigation/Link");
-var _ref = /*#__PURE__*/_react["default"].createElement(_List.List, null, /*#__PURE__*/_react["default"].createElement(_ListItem.ListItem, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, null, "\u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B4\u03B9\u03B1\u03B3\u03BD\u03C9\u03C3\u03C4\u03B9\u03BA\u03CE\u03BD \u03B5\u03C1\u03B3\u03B1\u03C3\u03C4\u03B7\u03C1\u03B9\u03B1\u03BA\u03CE\u03BD \u03B5\u03BE\u03B5\u03C4\u03AC\u03C3\u03B5\u03C9\u03BD")), /*#__PURE__*/_react["default"].createElement(_ListItem.ListItem, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, null, "\u03A0\u03C4\u03C5\u03C7\u03AF\u03B1 \u03C4\u03C1\u03B9\u03C4\u03BF\u03B2\u03AC\u03B8\u03BC\u03B9\u03B1\u03C2 \u03B5\u03BA\u03C0\u03B1\u03AF\u03B4\u03B5\u03C5\u03C3\u03B7\u03C2")), /*#__PURE__*/_react["default"].createElement(_ListItem.ListItem, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, null, "\u03A5\u03C0\u03B5\u03CD\u03B8\u03C5\u03BD\u03B7 \u0394\u03AE\u03BB\u03C9\u03C3\u03B7 / \u0395\u03BE\u03BF\u03C5\u03C3\u03B9\u03BF\u03B4\u03CC\u03C4\u03B7\u03C3\u03B7 / \u0393\u03BD\u03AE\u03C3\u03B9\u03BF \u03A5\u03C0\u03BF\u03B3\u03C1\u03B1\u03C6\u03AE\u03C2")));
+var _ref = /*#__PURE__*/_react["default"].createElement(_List.List, null, /*#__PURE__*/_react["default"].createElement(_ListItem.ListItem, null, "\u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B4\u03B9\u03B1\u03B3\u03BD\u03C9\u03C3\u03C4\u03B9\u03BA\u03CE\u03BD \u03B5\u03C1\u03B3\u03B1\u03C3\u03C4\u03B7\u03C1\u03B9\u03B1\u03BA\u03CE\u03BD \u03B5\u03BE\u03B5\u03C4\u03AC\u03C3\u03B5\u03C9\u03BD"), /*#__PURE__*/_react["default"].createElement(_ListItem.ListItem, null, "\u03A0\u03C4\u03C5\u03C7\u03AF\u03B1 \u03C4\u03C1\u03B9\u03C4\u03BF\u03B2\u03AC\u03B8\u03BC\u03B9\u03B1\u03C2 \u03B5\u03BA\u03C0\u03B1\u03AF\u03B4\u03B5\u03C5\u03C3\u03B7\u03C2"), /*#__PURE__*/_react["default"].createElement(_ListItem.ListItem, null, "\u03A5\u03C0\u03B5\u03CD\u03B8\u03C5\u03BD\u03B7 \u0394\u03AE\u03BB\u03C9\u03C3\u03B7 / \u0395\u03BE\u03BF\u03C5\u03C3\u03B9\u03BF\u03B4\u03CC\u03C4\u03B7\u03C3\u03B7 / \u0393\u03BD\u03AE\u03C3\u03B9\u03BF \u03A5\u03C0\u03BF\u03B3\u03C1\u03B1\u03C6\u03AE\u03C2"));
 var Default = exports.Default = function Default() {
   return _ref;
 };

package/cjs/content/List/index.mdx

@@ -3,10 +3,6 @@ id: list
 title: List
 ---
 
-```bash
-import List from '@digigov/ui/content/List';
-```
-
 ## How to use
 
 ### Default
@@ -39,4 +35,6 @@ import List from '@digigov/ui/content/List';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="List" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["List", "ListItem"]} />

package/cjs/content/SafeHTML/index.js

@@ -77,7 +77,9 @@ var SafeHTML = exports.SafeHTML = function SafeHTML(_ref) {
     _ref$Tag = _ref.Tag,
     Tag = _ref$Tag === void 0 ? 'span' : _ref$Tag,
     _ref$style = _ref.style,
-    style = _ref$style === void 0 ? {} : _ref$style;
+    style = _ref$style === void 0 ? {} : _ref$style,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "ds-body" : _ref$className;
   if (tags) {
     var _tags;
     (_tags = tags).push.apply(_tags, defaultTags);
@@ -96,7 +98,7 @@ var SafeHTML = exports.SafeHTML = function SafeHTML(_ref) {
     style: (0, _extends2["default"])({
       whiteSpace: 'break-spaces'
     }, style),
-    className: "ds-body",
+    className: className,
     dangerouslySetInnerHTML: {
       __html: parsedHTML
     }

package/cjs/content/StepNav/index.mdx

@@ -7,10 +7,6 @@ title: StepNav
 
 StepNav is a component that displays number of steps required to complete a process inside your application.
 
-```bash
-import StepNav from '@digigov/ui/content/StepNav';
-```
-
 ## How to use
 
 ### Default
@@ -21,10 +17,37 @@ import StepNav from '@digigov/ui/content/StepNav';
   story="Default.tsx"
 />
 
-### With hints
+### StepNav with hints
 
 <Story
   packageName="@digigov/ui"
   component="content/StepNav"
   story="WithHints.tsx"
 />
+
+### StepNav with dense
+
+<Story
+  packageName="@digigov/ui"
+  component="content/StepNav"
+  story="Dense.tsx"
+/>
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  [
+    "StepNav",
+    "StepNavControls", 
+    "StepNavList",
+    "StepNavListItem",
+    "StepNavAccordion",
+    "StepNavAccordionSummary",
+    "StepNavAccordionSummaryHeading",
+    "StepNavCircleNumber",
+    "StepNavAccordionHeadingTitle",
+    "StepNavAccordionHeadingText",
+    "StepNavAccordionContent"
+  ]} />

package/cjs/content/SummaryList/index.mdx

@@ -7,10 +7,6 @@ title: SummaryList
 
 Use the summary list to summarise information, for example, a user’s responses at the end of a form.
 
-```bash
-import SummaryList from '@digigov/ui/content/SummaryList';
-```
-
 ## How to use
 
 <Story
@@ -43,4 +39,13 @@ If you do not include actions in your summary list and it would be better for yo
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="SummaryList" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  ["SummaryList",
+  "SummaryListItem",
+  "SummaryListItemAction",
+  "SummaryListItemKey",
+  "SummaryListItemValue"
+  ]
+} />