@digigov/ui 0.32.0 → 0.32.2

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

@@ -1,4 +1,4 @@
-/** @license Digigov v0.32.0
+/** @license Digigov v0.32.2
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.

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