@digigov/ui 0.32.0 → 0.32.1

package/core/TextInput/index.mdx

@@ -11,19 +11,11 @@ import TextInput from '@digigov/ui/core/TextInput';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="core/TextInput"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/TextInput" story="Default.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="core/TextInput"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/TextInput" story="MultipleQuestions.tsx" />
 
 ### Fixed width inputs
 
@@ -33,31 +25,19 @@ The widths are designed for specific character lengths and to be consistent acro
 
 On fixed width inputs, the width will remain fixed on all screens unless it is wider than the viewport, in which case it will shrink to fit.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/TextInput"
-  story="FixedWidths.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/TextInput" story="FixedWidths.tsx" />
 
 ### Fluid width inputs
 
 Fluid width inputs will resize with the viewport.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/TextInput"
-  story="FluidWidths.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/TextInput" story="FluidWidths.tsx" />
 
 ### Hint text
 
 Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/TextInput"
-  story="WithHint.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/TextInput" story="WithHint.tsx" />
 
 ## Numbers
 
@@ -73,11 +53,7 @@ Use hint text for help that’s relevant to the majority of users, like how thei
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="core/TextInput"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/TextInput" story="WithErrorMessage.tsx" />
 
 ### Disabled input
 

package/core/index.d.ts

@@ -26,6 +26,7 @@ export * from '@digigov/ui/core/PhaseBanner';
 export * from '@digigov/ui/core/RadioContainer';
 export * from '@digigov/ui/core/SectionBreak';
 export * from '@digigov/ui/core/SelectContainer';
+export * from '@digigov/ui/core/SingleCharacterInputContainer';
 export * from '@digigov/ui/core/SummaryList';
 export * from '@digigov/ui/core/ServiceBadge';
 export * from '@digigov/ui/core/Table';

package/core/index.js

@@ -355,6 +355,19 @@ Object.keys(_SelectContainer).forEach(function (key) {
   });
 });
 
+var _SingleCharacterInputContainer = require("@digigov/ui/core/SingleCharacterInputContainer");
+
+Object.keys(_SingleCharacterInputContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SingleCharacterInputContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SingleCharacterInputContainer[key];
+    }
+  });
+});
+
 var _SummaryList = require("@digigov/ui/core/SummaryList");
 
 Object.keys(_SummaryList).forEach(function (key) {

package/es/admin/AutoComplete/index.mdx

@@ -16,51 +16,29 @@ import AutoComplete from '@digigov/ui/admin/AutoComplete';
 
 ### AutoComplete
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/AutoComplete"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" 
+component="admin/AutoComplete" 
+story="Default.tsx" />
 
 ### AutoComplete with auto select
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/AutoComplete"
-  story="WithAutoSelect.tsx"
-/>
+<Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithAutoSelect.tsx" />
 
 ### AutoComplete with inline style
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/AutoComplete"
-  story="WithInLine.tsx"
-/>
+<Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithInLine.tsx" />
 
 ### AutoComplete with default value
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/AutoComplete"
-  story="WithDefaultValue.tsx"
-/>
+<Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithDefaultValue.tsx" />
 
 ### AutoComplete with placeholder
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/AutoComplete"
-  story="WithPlaceHolder.tsx"
-/>
+<Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithPlaceHolder.tsx" />
 
 ### AutoComplete with all option's values
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/AutoComplete"
-  story="WithShowAllValues.tsx"
-/>
+<Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithShowAllValues.tsx" />
 
 ### AutoComplete with min length
 

package/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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:'