@digigov/ui 0.32.0 → 0.32.2

package/app/QrCodeViewer/index.mdx

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

package/core/Accordion/index.d.ts

@@ -2,11 +2,15 @@ import React from 'react';
 import Accordion from '@digigov/react-core/Accordion';
 import AccordionSection from '@digigov/react-core/AccordionSection';
 import AccordionSectionContent from '@digigov/react-core/AccordionSectionContent';
-import AccordionSectionSummaryHeading from '@digigov/react-core/AccordionSectionSummaryHeading';
+import { AccordionSectionSummaryHeadingProps as AccordionSectionSummaryHeadingBaseProps } from '@digigov/react-core/AccordionSectionSummaryHeading';
 import AccordionSectionSummary from '@digigov/react-core/AccordionSectionSummary';
 import AccordionControls from '@digigov/react-core/AccordionControls';
 import { UseTogglableTabReturn } from '@digigov/ui/hooks/useTogglableTab';
 export declare const AccordionItemDetails: React.ForwardRefExoticComponent<Pick<import("@digigov/react-core/AccordionSectionContent").AccordionSectionContentProps, "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden"> & React.RefAttributes<HTMLDivElement>>;
+export interface AccordionSectionSummaryHeadingProps extends AccordionSectionSummaryHeadingBaseProps {
+    children: React.ReactNode;
+}
+declare const AccordionSectionSummaryHeading: React.ForwardRefExoticComponent<Pick<AccordionSectionSummaryHeadingProps, "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden"> & React.RefAttributes<HTMLHeadingElement>>;
 export declare const AccordionItemSummary: ({ children, ...props }: {
     [x: string]: any;
     children: any;

package/core/Accordion/index.js

@@ -11,11 +11,11 @@ var _exportNames = {
   AccordionItemDetails: true,
   AccordionItemSummary: true,
   AccordionItem: true,
+  AccordionSectionSummaryHeading: true,
   useAccordion: true,
   Accordion: true,
   AccordionSection: true,
   AccordionSectionContent: true,
-  AccordionSectionSummaryHeading: true,
   AccordionSectionSummary: true,
   AccordionControls: true
 };
@@ -50,19 +50,15 @@ Object.defineProperty(exports, "AccordionSectionSummary", {
     return _AccordionSectionSummary["default"];
   }
 });
-Object.defineProperty(exports, "AccordionSectionSummaryHeading", {
-  enumerable: true,
-  get: function get() {
-    return _AccordionSectionSummaryHeading["default"];
-  }
-});
-exports.useAccordion = exports["default"] = void 0;
+exports.useAccordion = exports["default"] = exports.AccordionSectionSummaryHeading = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Accordion = _interopRequireWildcard(require("@digigov/react-core/Accordion"));
 
@@ -166,7 +162,8 @@ Object.keys(_AccordionSectionHeader).forEach(function (key) {
   });
 });
 var _excluded = ["children"],
-    _excluded2 = ["register", "setOpened", "opened", "registered"];
+    _excluded2 = ["children"],
+    _excluded3 = ["register", "setOpened", "opened", "registered"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -177,10 +174,46 @@ var AccordionItemDetails = (0, _withDeprecation["default"])(_AccordionSectionCon
   rename: 'AccordionSectionContent'
 });
 exports.AccordionItemDetails = AccordionItemDetails;
-var AccordionItemSummary = (0, _withDeprecation["default"])(function (_ref) {
+
+var AccordionSectionSummaryHeading = /*#__PURE__*/_react["default"].forwardRef(function AccordionSectionSummaryHeading(_ref, ref) {
   var children = _ref.children,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_AccordionSectionSummary["default"], props, /*#__PURE__*/_react["default"].createElement(_AccordionSectionSummaryHeading["default"], null, children));
+
+  var toggleExpanded = function toggleExpanded() {
+    setExpanded(!isExpanded);
+  };
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isExpanded = _useState2[0],
+      setExpanded = _useState2[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_AccordionSectionSummaryHeading["default"], (0, _extends2["default"])({
+    ref: ref
+  }, props, {
+    onClick: toggleExpanded,
+    "aria-expanded": isExpanded
+  }), children);
+});
+
+exports.AccordionSectionSummaryHeading = AccordionSectionSummaryHeading;
+var AccordionItemSummary = (0, _withDeprecation["default"])(function (_ref2) {
+  var children = _ref2.children,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+
+  var toggleExpanded = function toggleExpanded() {
+    setExpanded(!isExpanded);
+  };
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      isExpanded = _useState4[0],
+      setExpanded = _useState4[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_AccordionSectionSummary["default"], props, /*#__PURE__*/_react["default"].createElement(_AccordionSectionSummaryHeading["default"], {
+    onClick: toggleExpanded,
+    "aria-expanded": isExpanded
+  }, children));
 }, {
   name: 'AccordionItemSummary',
   warning: 'There is no need to use AccordionSectionHeader components anymore. It will be removed in a later version and impelented using AccordionSectionSummary and AccordionSectionSummaryHeading'
@@ -204,7 +237,7 @@ var useAccordion = function useAccordion(props) {
       setOpened = _useTogglableTab.setOpened,
       opened = _useTogglableTab.opened,
       registered = _useTogglableTab.registered,
-      rest = (0, _objectWithoutProperties2["default"])(_useTogglableTab, _excluded2);
+      rest = (0, _objectWithoutProperties2["default"])(_useTogglableTab, _excluded3);
 
   return (0, _extends2["default"])({
     register: register,

package/core/Accordion/index.mdx

@@ -15,21 +15,13 @@ import Accordion from '@digigov/ui/core/Accordion';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Accordion"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Accordion" story="Default.tsx" />
 
 ### Accordion with Hints
 
 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.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Accordion"
-  story="WithHints.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Accordion" story="WithHints.tsx" />
 
 ## Accessibility
 

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

@@ -2,3 +2,4 @@
  * My deescrition is the best description that was described
  */
 export declare const GroupingButtons: () => JSX.Element;
+export default GroupingButtons;

package/core/Button/__stories__/GroupingButtons.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GroupingButtons = void 0;
+exports["default"] = exports.GroupingButtons = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -22,4 +22,6 @@ var GroupingButtons = function GroupingButtons() {
   return _ref;
 };
 
-exports.GroupingButtons = GroupingButtons;
+exports.GroupingButtons = GroupingButtons;
+var _default = GroupingButtons;
+exports["default"] = _default;

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

@@ -2,3 +2,4 @@
  * My deescrition is the best description that was described
  */
 export declare const GroupingButtonsAndLinks: () => JSX.Element;
+export default GroupingButtonsAndLinks;

package/core/Button/__stories__/GroupingButtonsAndLinks.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GroupingButtonsAndLinks = void 0;
+exports["default"] = exports.GroupingButtonsAndLinks = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -24,4 +24,6 @@ var GroupingButtonsAndLinks = function GroupingButtonsAndLinks() {
   return _ref;
 };
 
-exports.GroupingButtonsAndLinks = GroupingButtonsAndLinks;
+exports.GroupingButtonsAndLinks = GroupingButtonsAndLinks;
+var _default = GroupingButtonsAndLinks;
+exports["default"] = _default;

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

@@ -1 +1,2 @@
 export declare const Warning: () => JSX.Element;
+export default Warning;

package/core/Button/__stories__/Warning.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Warning = void 0;
+exports["default"] = exports.Warning = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -20,4 +20,6 @@ var Warning = function Warning() {
   return _ref;
 };
 
-exports.Warning = Warning;
+exports.Warning = Warning;
+var _default = Warning;
+exports["default"] = _default;

package/core/Button/index.mdx

@@ -24,21 +24,13 @@ Use a default button for the main call to action on a page.
 
 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"
-/>
+<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"
-/>
+<Story packageName="@digigov/ui" component="core/Button" story="Secondary.tsx" />
 
 ### Warning buttons
 
@@ -56,19 +48,11 @@ Disabled buttons have poor contrast and can confuse some users, so avoid them if
 
 Use a button group when two or more buttons are placed together.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Button"
-  story="GroupingButtons.tsx"
-/>
+<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"
-/>
+<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/Card/card.mdx

@@ -22,19 +22,11 @@ You can set the color of the Card's border. You can choose between `dark` and `g
 
 #### Card with gray border color
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Card"
-  story="WithGrayBorder.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Card" story="WithGrayBorder.tsx" />
 
 #### Card with dark border color
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Card"
-  story="WithDarkBorder.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Card" story="WithDarkBorder.tsx" />
 
 ### Card with top border
 
@@ -42,27 +34,15 @@ You can set the color of the Card's top border. You can choose between dark and
 
 #### Card with grey top border
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Card"
-  story="WithGrayTopBorder.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Card" story="WithGrayTopBorder.tsx" />
 
 #### Card with dark top border
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Card"
-  story="WithDarkTopBorder.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Card" story="WithDarkTopBorder.tsx" />
 
 ### Card with divider
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Card"
-  story="WithDivider.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Card" story="WithDivider.tsx" />
 
 ### Card with actions
 
@@ -70,21 +50,13 @@ You can set the color of the Card's top border. You can choose between dark and
 
 Cards can be used without an action button, but with a clickable title.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Card"
-  story="WithClickableLink.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Card" story="WithClickableLink.tsx" />
 
 #### Card with clickable content
 
 You can expand the clickable area of the link to fill Card's content.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Card"
-  story="WithClickableContent.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Card" story="WithClickableContent.tsx" />
 
 Cards also provides styles for actionable elements such as Buttons or Links.
 

package/core/Checkbox/checkbox.mdx

@@ -11,57 +11,33 @@ import Checkbox from '@digigov/ui/core/Checkbox';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Checkbox"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Checkbox" story="Default.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Checkbox"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Checkbox" story="MultipleQuestions.tsx" />
 
 ### Checkbox items with hints
 
 You can add hints to checkbox items to provide additional information about the options.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Checkbox"
-  story="WithHint.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Checkbox" story="WithHint.tsx" />
 
 ### Add an option for ‘none’
 
 When ‘none’ would be a valid answer, give users the option to check a box to say none of the other options apply to them — without this option, users would have to leave all of the boxes unchecked. Giving users this option also makes sure they do not skip the question by accident.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Checkbox"
-  story="NoneAnswer.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Checkbox" story="NoneAnswer.tsx" />
 
 If JavaScript is unavailable, and a user selects both the ‘none’ checkbox and another checkbox, display an error message.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Checkbox"
-  story="NoneAnswerWithError.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Checkbox" story="NoneAnswerWithError.tsx" />
 
 ### Error messages
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Checkbox"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Checkbox" story="WithErrorMessage.tsx" />
 
 ## Conditionally revealing a related question
 

package/core/DateInputContainer/index.mdx

@@ -11,34 +11,18 @@ import DateInputContainer from '@digigov/ui/core/DateInputContainer';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="core/DateInputContainer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/DateInputContainer" story="Default.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="core/DateInputContainer"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/DateInputContainer" story="MultipleQuestions.tsx" />
 
 ### Error message
 
 If you’re highlighting the whole date, style all the fields like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="core/DateInputContainer"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/DateInputContainer" story="WithErrorMessage.tsx" />
 
 If you’re highlighting just one field - either the day, month or year - only style the field that has an error. The error message must say which field has an error, like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="core/DateInputContainer"
-  story="WithErrorMessageForSingleField.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/DateInputContainer" story="WithErrorMessageForSingleField.tsx" />

package/core/ErrorSummary/index.mdx

@@ -15,11 +15,7 @@ import ErrorSummary from '@digigov/ui/core/ErrorSummary';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="core/ErrorSummary"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/ErrorSummary" story="Default.tsx" />
 
 ### Linking from the error summary to each answer
 
@@ -27,21 +23,13 @@ You must link the errors in the error summary to the answer they relate to.
 
 For questions that require a user to answer using a single field, like a file upload, select, textarea, text input or character count, link to the field.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/ErrorSummary"
-  story="LinkedToInput.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/ErrorSummary" story="LinkedToInput.tsx" />
 
 When a user has to enter their answer into multiple fields, such as the day, month and year fields in the date input component, link to the first field that contains an error.
 
 If you do not know which field contains an error, link to the first field.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/ErrorSummary"
-  story="LinkedToField.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/ErrorSummary" story="LinkedToField.tsx" />
 
 For questions that require a user to select one or more options from a list using radios or checkboxes, link to the first radio or checkbox.
 

package/core/FileUpload/index.mdx

@@ -11,11 +11,7 @@ import FileUpload from '@digigov/ui/core/FileUpload';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="core/FileUpload"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/FileUpload" story="Default.tsx" />
 
 ### Error message
 

package/core/Link/link.mdx

@@ -15,35 +15,19 @@ import Link from '@digigov/ui/core/Link';
 
 ### No Underline
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Link"
-  story="NoUnderline.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Link" story="NoUnderline.tsx" />
 
 ### Opens in a new tab
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Link"
-  story="OpensInNewTab.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Link" story="OpensInNewTab.tsx" />
 
 ### At dark background
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Link"
-  story="DarkBackground.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Link" story="DarkBackground.tsx" />
 
 ### At dark background and no underline
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Link"
-  story="DarkBackgroundNoUnderline.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Link" story="DarkBackgroundNoUnderline.tsx" />
 
 You can read more about the accessibility patterns used in our Link
 implementation in the ARIA Authoring Practices Guide (APG) at

package/core/List/index.mdx

@@ -19,11 +19,7 @@ import List from '@digigov/ui/core/List';
 
 ### List with numbers
 
-<Story
-  packageName="@digigov/ui"
-  component="core/List"
-  story="NumberedList.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/List" story="NumberedList.tsx" />
 
 ### List with extra space
 

package/core/NavList/index.mdx

@@ -15,11 +15,7 @@ import NavList, { NavListItem } from '@digigov/ui/core/NavList';
 
 ### Horizontal NavList
 
-<Story
-  packageName="@digigov/ui"
-  component="core/NavList"
-  story="NavHorizontalLayout.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/NavList" story="NavVerticalLayout.tsx" />
 
 ## Accessibility
 

package/core/NotificationBanner/index.mdx

@@ -19,11 +19,7 @@ Use a ‘neutral’ blue notification banner if the user needs to know about a p
 
 Use a ‘neutral’ notification banner if the user needs to know about something that’s happening elsewhere in the service.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/NotificationBanner"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/NotificationBanner" story="Default.tsx" />
 
 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.
 

package/core/PhaseBanner/index.mdx

@@ -15,10 +15,7 @@ import PhaseBanner from '@digigov/ui/core/PhaseBanner';
 
 Your banner must be directly under the blue GOV.GR header and colour bar.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/PhaseBanner"
-  story="Default.tsx"
+<Story packageName="@digigov/ui" component="core/PhaseBanner" story="Default.tsx"
 />
 
 ### Underlined