@digigov/ui 0.32.0 → 0.32.2

package/esm/admin/CopyToClipboard/index.mdx

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

package/esm/admin/Dropdown/Dropdown.stories.playwright.json

@@ -0,0 +1,53 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-admin-dropdown--align-right": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>details>summary"
+              }
+            }
+          ],
+          "id": "lWuaZaRFFDje",
+          "title": "Align right action"
+        }
+      ]
+    },
+    "digigov-ui-admin-dropdown--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>details>summary"
+              }
+            }
+          ],
+          "id": "jCwDDNP3O4e8",
+          "title": "Open dropdown action"
+        }
+      ]
+    },
+    "digigov-ui-admin-dropdown--placement-top": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>details>summary"
+              }
+            }
+          ],
+          "id": "w6MaGKfzgKOG",
+          "title": "Placement top action"
+        }
+      ]
+    }
+  }
+}

package/esm/admin/Dropdown/__stories__/AlignRight.js

@@ -10,8 +10,7 @@ import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
 import { Button } from '@digigov/ui/core/Button';
 
 var _ref = /*#__PURE__*/React.createElement(Dropdown, {
-  align: "right",
-  open: true
+  align: "right"
 }, /*#__PURE__*/React.createElement(DropdownButton, {
   role: "button",
   "aria-haspopup": "true",

package/esm/admin/Dropdown/__stories__/Default.js

@@ -9,9 +9,7 @@ import { TextInput } from '@digigov/ui/core/TextInput';
 import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
 import { Button } from '@digigov/ui/core/Button';
 
-var _ref = /*#__PURE__*/React.createElement(Dropdown, {
-  open: true
-}, /*#__PURE__*/React.createElement(DropdownButton, {
+var _ref = /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(DropdownButton, {
   role: "button",
   "aria-haspopup": "true",
   "aria-controls": "menu2",

package/esm/admin/Dropdown/__stories__/PlacementTop.js

@@ -10,8 +10,7 @@ import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
 import { Button } from '@digigov/ui/core/Button';
 
 var _ref = /*#__PURE__*/React.createElement(Dropdown, {
-  placement: "top",
-  open: true
+  placement: "top"
 }, /*#__PURE__*/React.createElement(DropdownButton, {
   role: "button",
   "aria-haspopup": "true",

package/esm/admin/Dropdown/index.mdx

@@ -11,31 +11,19 @@ import Dropdown from '@digigov/ui/admin/Dropdown';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/Dropdown"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="admin/Dropdown" story="Default.tsx" />
 
 ### Dropdown with align right
 
 You can display the dropdown menu to the right side of the `Dropdown` button.
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/Dropdown"
-  story="AlignRight.tsx"
-/>
+<Story packageName="@digigov/ui" component="admin/Dropdown" story="AlignRight.tsx" />
 
 ### Dropdown with placement top
 
 You can display the dropdown menu to the top of the `Dropdown` button.
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/Dropdown"
-  story="PlacementTop.tsx"
-/>
+<Story packageName="@digigov/ui" component="admin/Dropdown" story="PlacementTop.tsx" />
 
 You can read more about the accessibility patterns used in our Dropdown
 implementation in the ARIA Authoring Practices Guide (APG) at 

package/esm/admin/Modal/Modal.stories.playwright.json

@@ -0,0 +1,37 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-admin-modal--alert-dialog": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>button"
+              }
+            }
+          ],
+          "id": "Dk4oIFwRzm6e",
+          "title": "Alert dialog action"
+        }
+      ]
+    },
+    "digigov-ui-admin-modal--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>button"
+              }
+            }
+          ],
+          "id": "YyIZkcmdBlRP",
+          "title": "Open modal action"
+        }
+      ]
+    }
+  }
+}

package/esm/admin/Modal/__stories__/AlertDialog.js

@@ -1,22 +1,39 @@
-import React from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
 import { Modal, ModalHeading, ModalContent, ModalAction } from '@digigov/ui/admin/Modal';
 import { Button } from '@digigov/ui/core/Button';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
-var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Modal, {
-  open: true,
-  role: "alertdialog",
-  "aria-labelledby": "modal-label",
-  "aria-describedby": "modal-content"
-}, /*#__PURE__*/React.createElement(ModalHeading, {
+var _ref = /*#__PURE__*/React.createElement(ModalHeading, {
   id: "modal-label"
-}, "\u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7"), /*#__PURE__*/React.createElement(ModalContent, {
+}, "\u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7");
+
+var _ref2 = /*#__PURE__*/React.createElement(ModalContent, {
   id: "modal-content"
-}, /*#__PURE__*/React.createElement(Paragraph, null, "\u0395\u03AF\u03C3\u03C4\u03B5 \u03C3\u03AF\u03B3\u03BF\u03C5\u03C1\u03BF\u03B9 \u03CC\u03C4\u03B9 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B9\u03B1\u03B3\u03C1\u03AC\u03C8\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B5\u03B3\u03B3\u03C1\u03B1\u03C6\u03AE;")), /*#__PURE__*/React.createElement(ModalAction, null, /*#__PURE__*/React.createElement(Button, null, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE"), /*#__PURE__*/React.createElement(Button, {
-  variant: "link"
-}, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))));
+}, /*#__PURE__*/React.createElement(Paragraph, null, "\u0395\u03AF\u03C3\u03C4\u03B5 \u03C3\u03AF\u03B3\u03BF\u03C5\u03C1\u03BF\u03B9 \u03CC\u03C4\u03B9 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B9\u03B1\u03B3\u03C1\u03AC\u03C8\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B5\u03B3\u03B3\u03C1\u03B1\u03C6\u03AE;"));
+
+var _ref3 = /*#__PURE__*/React.createElement(Button, null, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE");
 
 export var AlertDialog = function AlertDialog() {
-  return _ref;
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      setOpen(!open);
+    }
+  }, "\u0386\u03BD\u03BF\u03B9\u03BE\u03B5 Modal"), /*#__PURE__*/React.createElement(Modal, {
+    open: open,
+    role: "alertdialog",
+    "aria-labelledby": "modal-label",
+    "aria-describedby": "modal-content"
+  }, _ref, _ref2, /*#__PURE__*/React.createElement(ModalAction, null, _ref3, /*#__PURE__*/React.createElement(Button, {
+    variant: "link",
+    onClick: function onClick() {
+      setOpen(!open);
+    }
+  }, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))));
 };
 export default AlertDialog;

package/esm/admin/Modal/__stories__/Default.js

@@ -1,23 +1,40 @@
-import React from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
 import { Modal, ModalHeading, ModalContent, ModalAction } from '@digigov/ui/admin/Modal';
 import { Button } from '@digigov/ui/core/Button';
 import { TextInput } from '@digigov/ui/core/TextInput';
 import { FieldContainer } from '@digigov/ui/core/FieldContainer';
 import { LabelContainer } from '@digigov/ui/core/LabelContainer';
 
-var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Modal, {
-  open: true,
-  "aria-labelledby": "modal-label"
-}, /*#__PURE__*/React.createElement(ModalHeading, {
+var _ref = /*#__PURE__*/React.createElement(ModalHeading, {
   id: "modal-label"
-}, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, "\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2", /*#__PURE__*/React.createElement(TextInput, {
+}, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5");
+
+var _ref2 = /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, "\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03C4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2", /*#__PURE__*/React.createElement(TextInput, {
   name: "inputext",
   characterWidth: 10
-})))), /*#__PURE__*/React.createElement(ModalAction, null, /*#__PURE__*/React.createElement(Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE"), /*#__PURE__*/React.createElement(Button, {
-  variant: "link"
-}, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))));
+}))));
+
+var _ref3 = /*#__PURE__*/React.createElement(Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE");
 
 export var Default = function Default() {
-  return _ref;
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      setOpen(!open);
+    }
+  }, "\u0386\u03BD\u03BF\u03B9\u03BE\u03B5 Modal"), /*#__PURE__*/React.createElement(Modal, {
+    open: open,
+    "aria-labelledby": "modal-label"
+  }, _ref, _ref2, /*#__PURE__*/React.createElement(ModalAction, null, _ref3, /*#__PURE__*/React.createElement(Button, {
+    variant: "link",
+    onClick: function onClick() {
+      setOpen(!open);
+    }
+  }, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))));
 };
 export default Default;

package/esm/admin/Modal/index.mdx

@@ -15,11 +15,7 @@ import Modal, {ModalHeading, ModalContent, ModalAction} from "@digigov/ui/admin/
 
 ### As an Alert Dialog
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/Modal"
-  story="AlertDialog.tsx"
-/>
+<Story packageName="@digigov/ui" component="admin/Modal" story="AlertDialog.tsx" />
 
 ## Accessibility
 

package/esm/app/Footer/Footer.mdx

@@ -15,26 +15,15 @@ import Footer from '@digigov/ui/app/Footer';
 
 ### Footer with logos
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Footer"
-  story="FooterWithLogo.tsx"
-/>
+<Story packageName="@digigov/ui" component="app/Footer" story="FooterWithLogo.tsx" />
 
 ### Footer with secondary navigation
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Footer"
-  story="FooterWithSecondaryNavigation.tsx"
-/>
+<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"
+<Story packageName="@digigov/ui" component="app/Footer" story="FooterWithLink.tsx"
 />
 
 ### All inclusive footer

package/esm/app/Header/index.mdx

@@ -11,28 +11,15 @@ import Header from '@digigov/ui/app/Header';
 
 ### Default header
 
-<Story
-  title="### Default"
-  packageName="@digigov/ui"
-  component="app/Header"
-  story="Default.tsx"
-/>
+<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"
-/>
+<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"
-/>
+<Story packageName="@digigov/ui" component="app/Header" story="WithServiceNameAndLogo.tsx" />
 
 ### Default header with navigation
 

package/esm/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/esm/core/Accordion/index.js

@@ -1,14 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"],
-    _excluded2 = ["register", "setOpened", "opened", "registered"];
+    _excluded2 = ["children"],
+    _excluded3 = ["register", "setOpened", "opened", "registered"];
 
 /* eslint-disable react-hooks/exhaustive-deps */
-import React from 'react';
+import React, { useState } 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 AccordionSectionSummaryHeadingBase from '@digigov/react-core/AccordionSectionSummaryHeading';
 import AccordionSectionSummary from '@digigov/react-core/AccordionSectionSummary';
 import AccordionControls from '@digigov/react-core/AccordionControls';
 import withDeprecation from '@digigov/ui/utils/withDeprecation';
@@ -17,11 +19,43 @@ export var AccordionItemDetails = withDeprecation(AccordionSectionContent, {
   name: 'AccordionItemDetails',
   rename: 'AccordionSectionContent'
 });
-export var AccordionItemSummary = withDeprecation(function (_ref) {
+var AccordionSectionSummaryHeading = /*#__PURE__*/React.forwardRef(function AccordionSectionSummaryHeading(_ref, ref) {
   var children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(AccordionSectionSummary, props, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, null, children));
+  var toggleExpanded = function toggleExpanded() {
+    setExpanded(!isExpanded);
+  };
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isExpanded = _useState2[0],
+      setExpanded = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(AccordionSectionSummaryHeadingBase, _extends({
+    ref: ref
+  }, props, {
+    onClick: toggleExpanded,
+    "aria-expanded": isExpanded
+  }), children);
+});
+export var AccordionItemSummary = withDeprecation(function (_ref2) {
+  var children = _ref2.children,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  var toggleExpanded = function toggleExpanded() {
+    setExpanded(!isExpanded);
+  };
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isExpanded = _useState4[0],
+      setExpanded = _useState4[1];
+
+  return /*#__PURE__*/React.createElement(AccordionSectionSummary, props, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeadingBase, {
+    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'
@@ -43,7 +77,7 @@ var useAccordion = function useAccordion(props) {
       setOpened = _useTogglableTab.setOpened,
       opened = _useTogglableTab.opened,
       registered = _useTogglableTab.registered,
-      rest = _objectWithoutProperties(_useTogglableTab, _excluded2);
+      rest = _objectWithoutProperties(_useTogglableTab, _excluded3);
 
   return _extends({
     register: register,

package/esm/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/esm/core/Button/__stories__/GroupingButtons.js

@@ -10,4 +10,5 @@ var _ref = /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/Reac
 
 export var GroupingButtons = function GroupingButtons() {
   return _ref;
-};
+};
+export default GroupingButtons;

package/esm/core/Button/__stories__/GroupingButtonsAndLinks.js

@@ -11,4 +11,5 @@ var _ref = /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/Reac
 
 export var GroupingButtonsAndLinks = function GroupingButtonsAndLinks() {
   return _ref;
-};
+};
+export default GroupingButtonsAndLinks;

package/esm/core/Button/__stories__/Warning.js

@@ -8,4 +8,5 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 
 export var Warning = function Warning() {
   return _ref;
-};
+};
+export default Warning;

package/esm/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/esm/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.