@digigov/ui 0.21.3 → 0.22.0

package/esm/core/Select/__stories__/WithHint.js

@@ -0,0 +1,22 @@
+import React from "react";
+import Select, { SelectOption } from "@digigov/ui/core/Select";
+import Field from '@digigov/ui/core/Field';
+import Label from '@digigov/react-core/Label';
+import { Hint } from "@digigov/ui/typography"; // import LabelTitle from '@digigov/react-core/LabelTitle';
+
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7", /*#__PURE__*/React.createElement(Hint, null, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03C4\u03B7\u03BD \u03C4\u03B1\u03BE\u03B9\u03BC\u03CC\u03BD\u03B7\u03C3\u03B7 \u03C0\u03BF\u03C5 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5."), /*#__PURE__*/React.createElement(Select, {
+  name: "select-list"
+}, /*#__PURE__*/React.createElement(SelectOption, {
+  value: "dim"
+}, "\u0394\u03B7\u03BC\u03BF\u03C6\u03B9\u03BB\u03AE"), /*#__PURE__*/React.createElement(SelectOption, {
+  value: "kat"
+}, "\u03A0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B1"), /*#__PURE__*/React.createElement(SelectOption, {
+  value: "kat"
+}, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03C0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AD\u03C2"), /*#__PURE__*/React.createElement(SelectOption, {
+  value: "kat"
+}, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03C3\u03C7\u03CC\u03BB\u03B9\u03B1"))));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/esm/core/Select/index.mdx

@@ -0,0 +1,36 @@
+---
+id: select
+title: Select
+---
+
+
+# Select
+
+ 
+
+
+```bash
+import Select from '@digigov/ui/core/Select';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Select" story="Default.tsx" />
+
+
+### Select with hints
+
+You can add hints to select items to provide additional information about the options.
+
+<Story packageName="@digigov/ui" component="core/Select" story="WithHint.tsx" />
+
+
+
+### Disabled input
+
+Error messages should be styled like this:
+
+<Story packageName="@digigov/ui" component="core/Select" story="DisabledInput.tsx" />
+
+
+

package/esm/core/SummaryList/SummaryList.stories.js

@@ -5,5 +5,5 @@ export default {
   component: SummaryList
 };
 export * from './__stories__/Default';
-export * from './__stories__/SummaryListWithActions';
-export * from './__stories__/SummaryListWithoutBorders';
+export * from './__stories__/WithActions';
+export * from './__stories__/WithoutBorders';

package/esm/core/SummaryList/__stories__/Default.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import SummaryList, { SummaryListItem, SummaryListItemAction, SummaryListItemKey, SummaryListItemValue } from '@digigov/ui/core/SummaryList';
 
-var _ref = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u039A\u03B1\u03C4\u03B5\u03C1\u03AF\u03BD\u03B1")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u03A4\u03AC\u03B4\u03B5 20, \u03A0\u03B1\u03C4\u03AE\u03C3\u03B9\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemAction, null)), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "699876543")));
+var _ref = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u03A4\u03AC\u03B4\u03B5 20, \u03A0\u03B1\u03C4\u03AE\u03C3\u03B9\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemAction, null)), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567")));
 
 export var Default = function Default() {
   return /*#__PURE__*/React.createElement(React.Fragment, null, _ref);

package/esm/core/SummaryList/__stories__/WithActions.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import SummaryList, { SummaryListItem, SummaryListItemAction, SummaryListItemKey, SummaryListItemValue } from '@digigov/ui/core/SummaryList';
+import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
+import Link from '@digigov/ui/core/Link';
+import { ButtonGroup, Button } from '@digigov/ui/core';
+
+var _ref = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, " \u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, {
+  href: "#"
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039F\u03BD\u03CC\u03BC\u03B1\u03C4\u03BF\u03C2")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u03A4\u03AC\u03B4\u03B5 20, \u03A0\u03B1\u03C4\u03AE\u03C3\u03B9\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, {
+  href: "#"
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7\u03C2")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
+  variant: "link"
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5")), /*#__PURE__*/React.createElement(Button, {
+  variant: "link"
+}, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"))))));
+
+export var WithActions = function WithActions() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref);
+};
+export default WithActions;

package/esm/core/SummaryList/__stories__/WithoutBorders.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import SummaryList, { SummaryListItem, SummaryListItemAction, SummaryListItemKey, SummaryListItemValue } from '@digigov/ui/core/SummaryList';
+
+var _ref = /*#__PURE__*/React.createElement(SummaryList, {
+  border: false
+}, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u03A4\u03AC\u03B4\u03B5 20, \u03A0\u03B1\u03C4\u03AE\u03C3\u03B9\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemAction, null)), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567")));
+
+export var WithoutBorders = function WithoutBorders() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref);
+};
+export default WithoutBorders;

package/esm/core/SummaryList/index.mdx

@@ -1,80 +1,32 @@
 ---
-title: Summary List
-parent: docs/ui/components
+id: summary-list
+title: SummaryList
 ---
 
-import {
-  SummaryList,
-  SummaryListItem,
-  SummaryListItemKey,
-  SummaryListItemValue,
-  SummaryListItemAction,
-} from '@digigov/ui/core/SummaryList';
+# SummaryList
 
-## Example
+Use the summary list to summarise information, for example, a user’s responses at the end of a form.
+ 
 
-```jsx live path=core/SummaryList/index.tsx
-<SummaryList>
-  <SummaryListItem>
-    <SummaryListItemKey>Όνομα</SummaryListItemKey>
-    <SummaryListItemValue> Μάριος</SummaryListItemValue>
-    <SummaryListItemAction> Αλλαγή</SummaryListItemAction>
-  </SummaryListItem>
-  <SummaryListItem>
-    <SummaryListItemKey>Επώνυμο</SummaryListItemKey>
-    <SummaryListItemValue>Μενεξές</SummaryListItemValue>
-  </SummaryListItem>
-</SummaryList>
-```
 
-<br />
+```bash
+import SummaryList from '@digigov/ui/core/SummaryList';
+``` 
 
-## When to use this component
+## How to use
 
-Use the SummaryList component to present pairs of related information, known
-as key-value pairs, in a list.
-
-> The key is a description or label of a piece of
-> information, like `Name`, and the value is the piece of information itself,
-> like `John Smith`.
-
-## When not to use this component
-
-Only use it to present information that has a key and at least one value.
-
-Do not use it for tabular data or a simple list of information or tasks, like
-a task list.
-
-## How it works
+<Story packageName="@digigov/ui" component="core/SummaryList" story="Default.tsx" />
 
 ### Summary list with actions
 
-You can add actions to a summary list, like a ‘Change’ link to let users go
-back and edit their answer.
-
-For sighted users, the actions get their context from the other content in the
-row they appear in.
-
-Assistive technology users, like those who use a screen reader, may hear the
-links out of context and not know what they do. To give more context, add
-visually hidden text to the links. This means a screen reader user will hear
-a meaningful action, like `Change name` or `Change date of birth`.
-
-## API
+Assistive technology users, like those who use a screen reader, may hear the links out of context and not know what they do. 
+To give more context, add visually hidden text to the links. 
+This means a screen reader user will hear a meaningful action, like ‘Αλλαγή ονόματος’ or ‘Αλλαγή ημερομηνίας γέννησης’.
 
-### Properties
+<Story packageName="@digigov/ui" component="core/SummaryList" story="WithActions.tsx" />
 
-<PropsDoc data={SummaryList.__doc__} />
-<PropsDoc data={SummaryListItem.__doc__} />
-<PropsDoc data={SummaryListItemKey.__doc__} />
-<PropsDoc data={SummaryListItemValue.__doc__} />
-<PropsDoc data={SummaryListItemAction.__doc__} />
-<br />
+### Summary list without borders
 
-### Styles
+If you do not include actions in your summary list and it would be better for your design to remove the separating borders, use the `border={false}` prop.
 
-<StylesDoc data={SummaryList.__doc__} />
-<StylesDoc data={SummaryListItem.__doc__} />
-<StylesDoc data={SummaryListItemKey.__doc__} />
-<StylesDoc data={SummaryListItemValue.__doc__} />
-<StylesDoc data={SummaryListItemAction.__doc__} />
+<Story packageName="@digigov/ui" component="core/SummaryList" story="WithoutBorders.tsx" />

package/esm/core/Table/Table.stories.js

@@ -5,6 +5,7 @@ export default {
   component: Table
 };
 export * from './__stories__/Default';
+export * from './__stories__/TableCaptions';
 export * from './__stories__/NoData';
 export * from './__stories__/VerticalHeaders';
 export * from './__stories__/ZebraProp';

package/esm/core/Table/__stories__/DarkVariant.js

@@ -3,7 +3,7 @@ import { TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, Ta
 
 var _ref = /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, {
   variant: "dark"
-}, /*#__PURE__*/React.createElement(TableCaption, null, "Table with dark variant"), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")))));
+}, /*#__PURE__*/React.createElement(TableCaption, null, "\u03A0\u03B5\u03C1\u03AF\u03BF\u03B4\u03BF\u03C2 \u03BA\u03B1\u03B9 \u03C0\u03BF\u03C3\u03AC"), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "\u03A0\u03B5\u03C1\u03AF\u03BF\u03B4\u03BF\u03C2"), /*#__PURE__*/React.createElement(TableHeadCell, null, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03CC \u03C0\u03BF\u03C3\u03CC"), /*#__PURE__*/React.createElement(TableHeadCell, null, "\u039C\u03B5\u03B9\u03C9\u03BC\u03AD\u03BD\u03BF \u03C0\u03BF\u03C3\u03CC"))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "\u03A0\u03C1\u03CE\u03C4\u03B5\u03C2 6 \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B5\u03C2 "), /*#__PURE__*/React.createElement(TableDataCell, null, " \u20AC109.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1"), /*#__PURE__*/React.createElement(TableDataCell, null, " \u20AC69.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03B5\u03C2 33 \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B5\u03C2"), /*#__PURE__*/React.createElement(TableDataCell, null, " \u20AC99.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1"), /*#__PURE__*/React.createElement(TableDataCell, null, " \u20AC64.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "\u03A3\u03C5\u03BD\u03BF\u03BB\u03B9\u03BA\u03CC \u03C0\u03BF\u03C3\u03CC "), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC4.282,20 "), /*#__PURE__*/React.createElement(TableDataCell, null, " \u20AC3.282,20")))));
 
 export var DarkVariant = function DarkVariant() {
   return _ref;

package/esm/core/Table/__stories__/Default.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell } from '@digigov/react-core';
 
-var _ref = /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableCaption, null, "Table no props"), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "First 6 weeks"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC109.80")))));
+var _ref = /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableCaption, null, "\u03A0\u03B5\u03C1\u03AF\u03BF\u03B4\u03BF\u03C2 \u03BA\u03B1\u03B9 \u03C0\u03BF\u03C3\u03AC"), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "\u03A0\u03B5\u03C1\u03AF\u03BF\u03B4\u03BF\u03C2"), /*#__PURE__*/React.createElement(TableHeadCell, null, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03CC \u03C0\u03BF\u03C3\u03CC"), /*#__PURE__*/React.createElement(TableHeadCell, null, "\u039C\u03B5\u03B9\u03C9\u03BC\u03AD\u03BD\u03BF \u03C0\u03BF\u03C3\u03CC"))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "\u03A0\u03C1\u03CE\u03C4\u03B5\u03C2 6 \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B5\u03C2 "), /*#__PURE__*/React.createElement(TableDataCell, null, " \u20AC109.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1"), /*#__PURE__*/React.createElement(TableDataCell, null, " \u20AC69.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03B5\u03C2 33 \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B5\u03C2"), /*#__PURE__*/React.createElement(TableDataCell, null, " \u20AC99.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1"), /*#__PURE__*/React.createElement(TableDataCell, null, " \u20AC64.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "\u03A3\u03C5\u03BD\u03BF\u03BB\u03B9\u03BA\u03CC \u03C0\u03BF\u03C3\u03CC "), /*#__PURE__*/React.createElement(TableDataCell, null, "\u20AC4.282,20 "), /*#__PURE__*/React.createElement(TableDataCell, null, " \u20AC3.282,20")))));
 
 export var Default = function Default() {
   return _ref;

package/esm/core/Table/__stories__/TableCaptions.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TableContainer, Table, TableCaption } from '@digigov/react-core';
+
+var _ref = /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableCaption, {
+  size: "xl"
+}, "Table Caption Extra Large"), /*#__PURE__*/React.createElement(TableCaption, {
+  size: "l"
+}, "Table Caption Large"), /*#__PURE__*/React.createElement(TableCaption, {
+  size: "m"
+}, "Table Caption Medium"), /*#__PURE__*/React.createElement(TableCaption, {
+  size: "s"
+}, "Table Caption Small")));
+
+export var TableCaptions = function TableCaptions() {
+  return _ref;
+};
+export default TableCaptions;

package/esm/core/Table/index.mdx

@@ -0,0 +1,52 @@
+---
+id: table
+title: Table
+---
+
+# Table
+
+```bash
+import Table from '@digigov/ui/core/Table';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Table" story="Default.tsx" />
+
+### Table with dark header
+
+<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" />
+
+### Numbers in a table
+
+<Story packageName="@digigov/ui" component="core/Table" story="NumericDataType.tsx" />
+
+### Zebra rows
+
+<Story packageName="@digigov/ui" component="core/Table" story="ZebraProp.tsx" />
+
+### Vertical lines
+
+<Story packageName="@digigov/ui" component="core/Table" story="VerticalBorders.tsx" />
+
+### Dense tables
+
+<Story packageName="@digigov/ui" component="core/Table" story="Densed.tsx" />
+
+### Custom column widths
+
+<Story packageName="@digigov/ui" component="core/Table" story="DefinedWidth.tsx" />
+
+### No data
+
+<Story packageName="@digigov/ui" component="core/Table" story="NoData.tsx" />
+
+### Using loader
+
+<Story packageName="@digigov/ui" component="core/Table" story="WithLoader.tsx" />

package/esm/core/Tabs/__stories__/Default.js

@@ -3,7 +3,7 @@ import { Tabs, TabsList, TabsListItem, TabsPanel, useTabs } from '@digigov/ui/co
 import Title from '@digigov/ui/typography/Title';
 import VisuallyHidden from '@digigov/react-core/VisuallyHidden';
 import SummaryList, { SummaryListItem, SummaryListItemKey, SummaryListItemValue, SummaryListItemAction } from '@digigov/ui/core/SummaryList';
-import Link from '../../Link';
+import Link from '@digigov/ui/core/Link';
 
 var _ref = /*#__PURE__*/React.createElement(Title, {
   size: "md",
@@ -25,4 +25,5 @@ export function Default() {
       panel = _useTabs.panel;
 
   return /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(TabsList, null, /*#__PURE__*/React.createElement(TabsListItem, register('a'), "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7"), /*#__PURE__*/React.createElement(TabsListItem, register('b'), "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(TabsPanel, panel('a'), _ref, _ref2), /*#__PURE__*/React.createElement(TabsPanel, panel('b'), _ref3, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03C9\u03BD"));
-}
+}
+export default Default;

package/esm/core/Tabs/index.mdx

@@ -1,8 +1,16 @@
 ---
+id: tabs
 title: Tabs
-parent: docs/ui/components
 ---
 
+# Tabs
+ 
+
+
+```bash
 import Tabs from '@digigov/ui/core/Tabs';
+``` 
+
+## How to use
 
-## Examples
+<Story packageName="@digigov/ui" component="core/Tabs" story="Default.tsx" />

package/esm/core/TextArea/index.mdx

@@ -0,0 +1,50 @@
+---
+id: text-area
+title: TextArea
+---
+
+
+# TextArea
+ 
+
+
+```bash
+import TextArea from '@digigov/ui/core/TextArea';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/TextArea" story="Default.tsx" />
+
+### Use appropriately-sized textareas
+
+<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" />
+
+### 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" />
+
+
+### 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" />
+
+
+### Error message
+
+Error messages should be styled like this:
+
+<Story packageName="@digigov/ui" component="core/TextArea" story="WithErrorMessage.tsx" />
+
+### Disabled input
+
+<Story packageName="@digigov/ui" component="core/TextArea" story="DisabledInput.tsx" />

package/esm/core/TextInput/index.mdx

@@ -0,0 +1,59 @@
+---
+id: text-input
+title: TextInput
+---
+
+
+# TextInput
+ 
+
+
+```bash
+import TextInput from '@digigov/ui/core/TextInput';
+``` 
+
+## How to use
+
+<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" />
+
+### Fixed width inputs
+
+Use fixed width inputs for content that has a specific, known length. Postcode inputs should be postcode-sized, telephone number inputs should be telephone number-sized.
+
+The widths are designed for specific character lengths and to be consistent across a range of browsers. They include extra padding to fit icons that some browsers might insert into the input (for example to show or generate a password).
+
+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" />
+
+### Fluid width inputs
+
+Fluid width inputs will resize with the viewport.
+
+<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" />
+
+## Numbers
+
+### Asking for whole numbers
+
+<Story packageName="@digigov/ui" component="core/TextInput" story="AskingForNumbers.tsx" />
+
+### Error message
+
+Error messages should be styled like this:
+
+<Story packageName="@digigov/ui" component="core/TextInput" story="WithErrorMessage.tsx" />
+
+### Disabled input
+
+<Story packageName="@digigov/ui" component="core/TextInput" story="DisabledInput.tsx" />

package/esm/core/VisuallyHidden/__stories__/Default.js

@@ -1,10 +1,14 @@
-import React from "react";
-import VisuallyHidden from "@digigov/ui/core/VisuallyHidden";
-import { Paragraph } from "@digigov/ui/typography";
+import React from 'react';
+import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
+import { Paragraph } from '@digigov/ui/typography';
+import Button, { ButtonGroup } from '@digigov/ui/core/Button';
+import Link from '@digigov/ui/core/Link';
 
-var _ref = /*#__PURE__*/React.createElement(Paragraph, null, "The below element is visually hidden.");
+var _ref = /*#__PURE__*/React.createElement(Paragraph, null, "Some element below is visually hidden. It's only accessible for screen readers and any tools parsing the DOM.");
 
-var _ref2 = /*#__PURE__*/React.createElement(VisuallyHidden, null, "This is a VisuallyHidden");
+var _ref2 = /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, null, " \u0394\u03BF\u03BA\u03B9\u03BC\u03AE"), /*#__PURE__*/React.createElement(Link, {
+  href: "#"
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7\u03C2")));
 
 export var Default = function Default() {
   return /*#__PURE__*/React.createElement(React.Fragment, null, _ref, _ref2);

package/esm/core/VisuallyHidden/index.mdx

@@ -0,0 +1,17 @@
+---
+id: visually-hidden
+title: VisuallyHidden
+---
+
+Use this component to convey meaning to people using screen readers, helping
+them access information and context.
+
+VisuallyHidden is a web accessibility technique used to hide content from the visual client, but keep it readable for screen readers.
+
+```bash
+import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/VisuallyHidden" story="Default.tsx" />

package/esm/core/WarningText/index.mdx

@@ -1,44 +1,19 @@
 ---
-title: Warning Text
-parent: docs/ui/components
+id: warning-text
+title: WarningText
 ---
 
-# Warning Text
+# WarningText
+ 
 
-import WarningText from '@digigov/ui/core/WarningText';
 
-```jsx live path=core/WarningText/index.tsx
+```bash
 import WarningText from '@digigov/ui/core/WarningText';
-import Paragraph from '@digigov/ui/typography/Paragraph';
-function CustomWarning (props){
- return (
-  <WarningText><Paragraph>Action Label</Paragraph></WarningText>
- )
-}
-export CustomWarningText
-
-```
-
-<br />
-
-## When to use this component
-
-Use the warning text component when you need to warn users about something
-important, such as legal consequences of an action, or lack of action that
-they might take.
-
-## How it works
-
-Write a descriptive message for the users that warns them about the possible
-complications of the current action.
-
-## API
-
-### Properties
+``` 
 
-<PropsDoc data={WarningText.__doc__} />
-<br />
+## How to use
 
-### Styles
+You might need to rewrite the hidden text ("Προσοχή" in the example) to make it appropriate for your context. 
+This will be used by screen-readers.
 
-<StylesDoc data={WarningText.__doc__} />
+<Story packageName="@digigov/ui" component="core/WarningText" story="Default.tsx" />

package/esm/govgr/Footer/index.mdx

@@ -5,7 +5,7 @@ parent: docs/ui/components
 
 ## Default Footer
 
-### How to import
+#
 
 ```jsx
 import Bottom from '@digigov/ui/layouts/Basic';
@@ -22,7 +22,7 @@ import GovGRFooter from '@digigov/ui/govgr/Footer';
 
 ## Customizable Footer
 
-### How to import
+#
 
 ```jsx
 import Copyright from '@digigov/ui/govgr/Footer/Copyright';
@@ -45,7 +45,7 @@ import LicenseCCSA from '@digigov/ui/govgr/Footer/LicenseCCSA';
 
 ## Using custom grid
 
-### How to import
+#
 
 ```jsx
 import Grid from '@material-ui/core/Grid';
@@ -72,7 +72,7 @@ import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo'
 
 ## Asking users for feedback
 
-### How to import
+#
 
 ```jsx
 import { Feedback } from '@digigov/ui/govgr/Footer';

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v0.21.3
+/** @license Digigov v0.22.0
  *
  * 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/introduction.md

@@ -5,4 +5,7 @@ sidebar_label: Introduction
 slug: /
 ---
 
-TBD
+This section lists any React components & features implemented in `@digigov/ui`
+NPM package.
+
+Find what you need in the sidebar menu on the left.

package/esm/layouts/Grid/Grid.stories.js

@@ -3,4 +3,5 @@ export default {
   title: 'Digigov UI/layouts/Grid',
   component: Grid
 };
-export * from './__stories__/Default';
+export * from './__stories__/Default';
+export * from './__stories__/Inline';