@digigov/ui 0.32.0 → 0.32.2

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

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

@@ -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/es/typography/HeadingCaption/index.mdx

@@ -9,11 +9,7 @@ import HeadingCaption from '@digigov/ui/typography/HeadingCaption';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/HeadingCaption"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/HeadingCaption" story="Default.tsx" />
 
 ### Nested caption to title
 

package/es/typography/Hint/index.mdx

@@ -9,11 +9,7 @@ import Hint from '@digigov/ui/typography/Hint';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Hint"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Hint" story="Default.tsx" />
 
 ### Font sizes
 

package/es/typography/NormalText/index.mdx

@@ -9,29 +9,17 @@ import NormalText from '@digigov/ui/typography/NormalText';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/NormalText"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/NormalText" story="Default.tsx" />
 
 ### Variants
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/NormalText"
-  story="Variants.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/NormalText" story="Variants.tsx" />
 
 ## Font override classes
 
 ### Font size
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/NormalText"
-  story="FontSizes.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/NormalText" story="FontSizes.tsx" />
 
 ### Font weight
 

package/es/typography/Paragraph/index.mdx

@@ -17,29 +17,17 @@ import Paragraph from '@digigov/ui/typography/Paragraph';
 
 ### Lead paragraph
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="LeadVariant.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="LeadVariant.tsx" />
 
 ### Small paragraph
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="SmallVariant.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="SmallVariant.tsx" />
 
 ## Font override classes
 
 ### Font size
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="FontSizes.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="FontSizes.tsx" />
 
 ### Font weight
 

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