@digigov/ui 0.32.0 → 0.32.2

package/core/RadioContainer/index.mdx

@@ -11,48 +11,28 @@ import RadioContainer from '@digigov/ui/core/RadioContainer';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="core/RadioContainer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/RadioContainer" story="Default.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="core/RadioContainer"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/RadioContainer" story="MultipleQuestions.tsx" />
 
 ### Inline radios
 
-<Story
-  packageName="@digigov/ui"
-  component="core/RadioContainer"
-  story="Inline.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/RadioContainer" story="Inline.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/RadioContainer"
-  story="WithHints.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/RadioContainer" story="WithHints.tsx" />
 
 ### RadioContainer items with a text divider
 
 If one or more of your radio options is different from the others, it can help users if you separate them using a text divider.
 The text is usually the word ‘or’.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/RadioContainer"
-  story="NoneAnswer.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/RadioContainer" story="NoneAnswer.tsx" />
 
 ## Conditionally revealing a related question
 
@@ -60,11 +40,7 @@ You can ask the user a related question when they select a particular checkbox,
 
 This might make 2 related questions easier to answer by grouping them on the same page. For example, you could reveal a phone number input when the user selects the ‘Contact me by phone’ option.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/RadioContainer"
-  story="ConditionalReveal.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/RadioContainer" story="ConditionalReveal.tsx" />
 
 ### Error messages
 

package/core/SelectContainer/index.mdx

@@ -11,31 +11,19 @@ import SelectContainer from '@digigov/ui/core/SelectContainer';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="core/SelectContainer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/SelectContainer" story="Default.tsx" />
 
 ### SelectContainer with hints
 
 You can add hints to select items to provide additional information about the options.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/SelectContainer"
-  story="WithHint.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/SelectContainer" story="WithHint.tsx" />
 
 ### Disabled input
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="core/SelectContainer"
-  story="DisabledInput.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/SelectContainer" story="DisabledInput.tsx" />
 
 You can read more about the accessibility patterns used in our SelectContainer
 implementation in the ARIA Authoring Practices Guide (APG) at

package/core/SingleCharacterInputContainer/index.mdx

@@ -11,19 +11,16 @@ import SingleCharacterInputContainer from '@digigov/ui/core/SingleCharacterInput
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="core/SingleCharacterInputContainer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/SingleCharacterInputContainer" story="Default.tsx" />
 
 
 ### Error message
 
 If you’re highlighting the whole date, style all the fields like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="core/SingleCharacterInputContainer"
-  story="WithDefaultError.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/SingleCharacterInputContainer" story="WithDefaultError.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="SingleCharacterInputContainer" />
+<PropTypes packageName="@digigov/ui" component="SingleCharacterInputItem" />

package/core/SummaryList/index.mdx

@@ -13,11 +13,7 @@ import SummaryList from '@digigov/ui/core/SummaryList';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="core/SummaryList"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/SummaryList" story="Default.tsx" />
 
 ### Summary list with actions
 
@@ -25,11 +21,7 @@ Assistive technology users, like those who use a screen reader, may hear the lin
 To give more context, add visually hidden text to the links.
 This means a screen reader user will hear a meaningful action, like ‘Αλλαγή ονόματος’ or ‘Αλλαγή ημερομηνίας γέννησης’.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/SummaryList"
-  story="WithActions.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/SummaryList" story="WithActions.tsx" />
 
 ### Summary list without borders
 

package/core/Table/index.mdx

@@ -24,29 +24,17 @@ import {
 
 ### Table with dark header
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Table"
-  story="DarkVariant.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Table" story="DarkVariant.tsx" />
 
 ### Table captions
 
 Use the `<TableCaption>` element to describe a table in the same way you would use a heading. A caption helps users find, navigate and understand tables.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Table"
-  story="TableCaptions.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Table" story="TableCaptions.tsx" />
 
 ### Numbers in a table
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Table"
-  story="NumericDataType.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Table" story="NumericDataType.tsx" />
 
 ### Zebra rows
 
@@ -54,11 +42,7 @@ Use the `<TableCaption>` element to describe a table in the same way you would u
 
 ### Vertical lines
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Table"
-  story="VerticalBorders.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Table" story="VerticalBorders.tsx" />
 
 ### Dense tables
 
@@ -66,11 +50,7 @@ Use the `<TableCaption>` element to describe a table in the same way you would u
 
 ### Custom column widths
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Table"
-  story="DefinedWidth.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Table" story="DefinedWidth.tsx" />
 
 ### No data
 
@@ -78,11 +58,7 @@ Use the `<TableCaption>` element to describe a table in the same way you would u
 
 ### Using loader
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Table"
-  story="WithLoader.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Table" story="WithLoader.tsx" />
 
 ## Accessibility
 

package/core/TextArea/index.mdx

@@ -11,57 +11,33 @@ import TextArea from '@digigov/ui/core/TextArea';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="core/TextArea"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/TextArea" story="Default.tsx" />
 
 ### Use appropriately-sized textareas
 
-<Story
-  packageName="@digigov/ui"
-  component="core/TextArea"
-  story="WithDeclaredRows.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/TextArea" story="WithDeclaredRows.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="core/TextArea"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/TextArea" story="MultipleQuestions.tsx" />
 
 ### Limiting the number of characters
 
 If there’s a good reason to limit the number of characters users can enter, you can use the character count component.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/TextArea"
-  story="LimitedCharacters.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/TextArea" story="LimitedCharacters.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/TextArea"
-  story="WithHint.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/TextArea" story="WithHint.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="core/TextArea"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/TextArea" story="WithErrorMessage.tsx" />
 
 ### Disabled input
 

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/AccessibilityMenu/index.js

@@ -1,3 +1,52 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import AccessibilityMenuOptionButtonBase from '@digigov/react-extensions/admin/AccessibilityMenuOptionButton';
+import AccessibilityMenuSteps from '@digigov/react-extensions/admin/AccessibilityMenuSteps';
+import React, { useState } from 'react';
+export var AccessibilityMenuOptionButton = /*#__PURE__*/React.forwardRef(function AccessibilityMenuOptionButton(_ref, ref) {
+  var _ref$steps = _ref.steps,
+      steps = _ref$steps === void 0 ? 0 : _ref$steps,
+      children = _ref.children;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      activeStep = _useState4[0],
+      setActiveStep = _useState4[1];
+
+  var handleClick = function handleClick() {
+    if (!selected) {
+      setSelected(true);
+
+      if (steps > 0) {
+        setActiveStep(activeStep + 1);
+      }
+    } else {
+      if (steps > 0) {
+        if (steps > activeStep) {
+          setActiveStep(activeStep + 1);
+        } else {
+          setActiveStep(0);
+          setSelected(false);
+        }
+      } else {
+        setSelected(false);
+      }
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(AccessibilityMenuOptionButtonBase, {
+    onClick: handleClick,
+    ref: ref,
+    selected: selected
+  }, children, /*#__PURE__*/React.createElement(AccessibilityMenuSteps, {
+    steps: steps,
+    activeStep: activeStep
+  }));
+});
 export * from '@digigov/react-extensions/admin/AccessibilityMenu';
 export * from '@digigov/react-extensions/admin/AccessibilityMenuButton';
 export * from '@digigov/react-extensions/admin/AccessibilityMenuContent';

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