@digigov/ui 1.2.0-dcbd7ded → 2.0.0-462194bf

package/cjs/app/Skeleton/__stories__/TextSizes/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TextSizes = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Skeleton = require("@digigov/ui/app/Skeleton");
+var _ref = /*#__PURE__*/_react["default"].createElement(_Skeleton.Skeleton, {
+  mb: 2,
+  fontSize: "xs"
+});
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_Skeleton.Skeleton, {
+  mb: 2,
+  fontSize: "sm"
+});
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_Skeleton.Skeleton, {
+  mb: 2,
+  fontSize: "md"
+});
+var _ref4 = /*#__PURE__*/_react["default"].createElement(_Skeleton.Skeleton, {
+  mb: 2,
+  fontSize: "lg"
+});
+var _ref5 = /*#__PURE__*/_react["default"].createElement(_Skeleton.Skeleton, {
+  mb: 2,
+  fontSize: "xl"
+});
+var TextSizes = exports.TextSizes = function TextSizes() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _ref, _ref2, _ref3, _ref4, _ref5);
+};
+var _default = exports["default"] = TextSizes;

package/cjs/app/Skeleton/__stories__/UnderTypography/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.UnderTypography = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Skeleton = require("@digigov/ui/app/Skeleton");
+var _Heading = _interopRequireDefault(require("@digigov/ui/typography/Heading"));
+var _Paragraph = require("@digigov/ui/typography/Paragraph");
+var _ref = /*#__PURE__*/_react["default"].createElement(_Heading["default"], null, /*#__PURE__*/_react["default"].createElement(_Skeleton.Skeleton, null));
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_Paragraph.Paragraph, null, /*#__PURE__*/_react["default"].createElement(_Skeleton.Skeleton, null));
+var UnderTypography = exports.UnderTypography = function UnderTypography() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _ref, _ref2);
+};
+var _default = exports["default"] = UnderTypography;

package/cjs/app/Skeleton/__stories__/WithChildren/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithChildren = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Skeleton = require("@digigov/ui/app/Skeleton");
+var _NormalText = require("@digigov/ui/typography/NormalText");
+var _ref = /*#__PURE__*/_react["default"].createElement(_Skeleton.Skeleton, null, /*#__PURE__*/_react["default"].createElement(_NormalText.NormalText, null, "\u039A\u03B5\u03AF\u03BC\u03B5\u03BD\u03BF"));
+var WithChildren = exports.WithChildren = function WithChildren() {
+  return _ref;
+};
+var _default = exports["default"] = WithChildren;

package/cjs/app/Skeleton/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+var _Skeleton = _interopRequireWildcard(require("@digigov/react-core/cjs/Skeleton"));
+Object.keys(_Skeleton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Skeleton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Skeleton[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var _default = exports["default"] = _Skeleton["default"];

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

@@ -7,8 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getClosingTags = exports["default"] = exports.SafeHTML = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _dompurify = _interopRequireDefault(require("dompurify"));
+var _excluded = ["content", "tags", "Tag"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
@@ -76,8 +78,7 @@ var SafeHTML = exports.SafeHTML = function SafeHTML(_ref) {
     tags = _ref.tags,
     _ref$Tag = _ref.Tag,
     Tag = _ref$Tag === void 0 ? 'span' : _ref$Tag,
-    _ref$style = _ref.style,
-    style = _ref$style === void 0 ? {} : _ref$style;
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   if (tags) {
     var _tags;
     (_tags = tags).push.apply(_tags, defaultTags);
@@ -92,14 +93,10 @@ var SafeHTML = exports.SafeHTML = function SafeHTML(_ref) {
   }, [content]);
   return /*#__PURE__*/_react["default"].createElement(Tag
   // @ts-ignore
-  , {
-    style: (0, _extends2["default"])({
-      whiteSpace: 'break-spaces'
-    }, style),
-    className: "ds-body",
+  , (0, _extends2["default"])({
     dangerouslySetInnerHTML: {
       __html: parsedHTML
     }
-  });
+  }, props));
 };
 var _default = exports["default"] = SafeHTML;

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"
+  ]
+} />

package/cjs/content/Table/index.js

@@ -213,11 +213,11 @@ var TableSortLabel = exports.TableSortLabel = /*#__PURE__*/_react["default"].for
   }, /*#__PURE__*/_react["default"].createElement(_icons.CaretIcon, {
     direction: 'up',
     size: "sm",
-    variant: direction === 1 ? 'dark' : 'gray'
+    color: direction === 1 ? 'dark' : 'gray'
   }), /*#__PURE__*/_react["default"].createElement(_icons.CaretIcon, {
     direction: 'down',
     size: "sm",
-    variant: direction === -1 ? 'dark' : 'gray'
+    color: direction === -1 ? 'dark' : 'gray'
   }))), /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownContent, null, /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
     layout: "vertical"
   }, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {

package/cjs/content/Table/index.mdx

@@ -5,19 +5,6 @@ title: Table
 
 # Table
 
-```bash
-import {
-  TableContainer,
-  Table,
-  TableCaption,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableHeadCell,
-  TableDataCell,
-} from '@digigov/ui/content/Table';
-```
-
 ## How to use
 
 <Story
@@ -109,4 +96,16 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Table](https://ww
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Table" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "TableContainer",
+  "Table",
+  "TableCaption",
+  "TableHead",
+  "TableRow",
+  "TableBody",
+  "TableHeadCell",
+  "TableDataCell"
+  ]
+} />

package/cjs/content/TaskList/index.mdx

@@ -7,10 +7,6 @@ title: TaskList
 
 TaskList is a component that displays number of steps required to complete a process inside your application.
 
-```bash
-import TaskList from '@digigov/ui/content/TaskList';
-```
-
 ## How to use
 
 ### Default
@@ -23,4 +19,12 @@ import TaskList from '@digigov/ui/content/TaskList';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="TaskList" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "TaskList",
+  "TaskListItem",
+  "TaskListItemHeading",
+  "TaskListItemContent",
+  "TaskListItemTag"
+  ]} /> 

package/cjs/content/Timeline/index.mdx

@@ -9,10 +9,6 @@ A timeline is a useful way to display a whole range of information and/or data p
 Keeping things organized in logical sequence timeline helps to keep track of what’s happening.
 User can better understand what has happened and also understand what the next steps should be.
 
-```bash
-import Timeline from '@digigov/ui/content/Timeline';
-```
-
 ## How to use
 
 ### Default
@@ -25,4 +21,13 @@ import Timeline from '@digigov/ui/content/Timeline';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Timeline" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Timeline",
+  "TimelineItem",
+  "TimelineHeading",
+  "TimelineContent",
+  "TimelineActions",
+  ]} /> 
+

package/cjs/feedback/CopyToClipboard/index.mdx

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

package/cjs/feedback/ErrorSummary/index.mdx

@@ -9,10 +9,6 @@ Use this component at the top of a page to summarise any errors a user has made.
 
 When a user makes an error, you must show both an error summary and an error message next to each answer that contains an error.
 
-```bash
-import ErrorSummary from '@digigov/ui/feedback/ErrorSummary';
-```
-
 ## How to use
 
 <Story
@@ -53,4 +49,6 @@ For questions that require a user to select one or more options from a list usin
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="ErrorSummary" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["ErrorSummary"]} /> 

package/cjs/feedback/NotificationBanner/index.mdx

@@ -9,16 +9,15 @@ This component is currently experimental because more research is needed to vali
 
 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.
 
-```bash
-import NotificationBanner from '@digigov/ui/feedback/NotificationBanner';
-```
-
 ## How to use
 
 Use a ‘neutral’ blue notification banner if the user needs to know about a problem with the service as a whole.
 
 Use a ‘neutral’ notification banner if the user needs to know about something that’s happening elsewhere in the service.
 
+## How to use
+
+### Default NotificationBanner
 <Story
   packageName="@digigov/ui"
   component="feedback/NotificationBanner"
@@ -27,12 +26,22 @@ 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.
 
+### Success NotificationBanner
 <Story
   packageName="@digigov/ui"
   component="feedback/NotificationBanner"
   story="Success.tsx"
 />
 
+### Dense NotificationBanner
+<Story
+  packageName="@digigov/ui"
+  component="feedback/NotificationBanner"
+  story="Dense.tsx"
+/>
+
 ## API
 
-<PropTypes packageName="@digigov/ui" component="NotificationBanner" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["NotificationBannerContainer","NotificationBannerContent","NotificationBannerHeader","NotificationBannerHeading","NotificationBannerLink"]} /> 

package/cjs/feedback/PhaseBanner/index.mdx

@@ -7,14 +7,12 @@ title: PhaseBanner
 
 Use the phase banner component to show users your service is still being worked on.
 
-```bash
-import PhaseBanner from '@digigov/ui/feedback/PhaseBanner';
-```
-
 ## How to use
 
 Your banner must be directly under the blue GOV.GR header and colour bar.
 
+### Default
+
 <Story
   packageName="@digigov/ui"
   component="feedback/PhaseBanner"
@@ -31,4 +29,9 @@ Your banner must be directly under the blue GOV.GR header and colour bar.
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="PhaseBanner" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "PhaseBanner",
+  "PhaseBannerTag",
+  "PhaseBannerText"]} /> 

package/cjs/feedback/WarningText/index.mdx

@@ -5,15 +5,13 @@ title: WarningText
 
 # WarningText
 
-```bash
-import WarningText from '@digigov/ui/feedback/WarningText';
-```
-
 ## How to use
 
 You might need to rewrite the hidden text ("Προσοχή" in the example) to make it appropriate for your context.
 This will be used by screen-readers.
 
+### Default
+
 <Story
   packageName="@digigov/ui"
   component="feedback/WarningText"
@@ -22,4 +20,6 @@ This will be used by screen-readers.
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="WarningText" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["WarningText"]} />