@digigov/ui 0.21.2 → 0.23.0

package/es/core/Table/TableFloatingScroll.js

@@ -0,0 +1,85 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useRef, useState } from 'react';
+export function TableFloatingScroll(props) {
+  var ref = useRef(null);
+  var contentRef = useRef(null);
+  var scrollBlockRef = useRef(null);
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      containerWidth = _useState4[0],
+      setContainerWidth = _useState4[1];
+
+  var _useState5 = useState('relative'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      position = _useState6[0],
+      setPosition = _useState6[1];
+
+  useEffect(function () {
+    var _ref$current;
+
+    contentRef.current = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.firstChild; // @ts-ignore
+
+    setContainerWidth(ref.current.offsetWidth);
+    setWidth(contentRef.current.scrollWidth);
+    var elementOffset = contentRef.current.offsetTop + contentRef.current.offsetHeight;
+
+    function onBodyScroll() {
+      var currentScroll = window.pageYOffset + window.innerHeight; // @ts-ignore
+
+      if (currentScroll < elementOffset && currentScroll > contentRef.current.offsetTop) {
+        setPosition('fixed'); // @ts-ignore
+      } else if (currentScroll >= elementOffset || currentScroll <= contentRef.current.offsetTop) {
+        setPosition('relative');
+      }
+    }
+
+    function onBlockScroll() {
+      // @ts-ignore
+      ref.current.scrollLeft = scrollBlockRef.current.scrollLeft;
+    } // @ts-ignore
+
+
+    scrollBlockRef.current.addEventListener('scroll', onBlockScroll);
+    document.addEventListener('scroll', onBodyScroll);
+    window.addEventListener('resize', function () {
+      // @ts-ignore
+      setContainerWidth(ref.current.offsetWidth); // @ts-ignore
+
+      setWidth(contentRef.current.scrollWidth);
+    });
+    return function () {
+      // @ts-ignore
+      scrollBlockRef.current.removeEventListener('scroll', onBlockScroll);
+      document.removeEventListener('scroll', onBodyScroll);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    style: {
+      maxWidth: '100%',
+      overflowX: 'scroll'
+    }
+  }, props.children), /*#__PURE__*/React.createElement("div", {
+    style: {
+      overflow: 'auto',
+      height: '35px',
+      marginTop: '-35px',
+      position: position,
+      maxWidth: "".concat(containerWidth, "px"),
+      bottom: 0
+    },
+    ref: scrollBlockRef
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "".concat(width, "px"),
+      overflow: 'hidden'
+    }
+  })));
+}
+export default TableFloatingScroll;

package/es/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/es/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/es/core/Table/__stories__/NoData.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import { TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, TableHeadCell, TableNoDataRow } from '@digigov/react-core';
 
-var _ref = /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableCaption, null, "Table with no data"), /*#__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(TableNoDataRow, null, "No data"))));
+var _ref = /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableCaption, null, "Table with no data"), /*#__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(TableNoDataRow, {
+  "aria-colspan": 100
+}, "No data"))));
 
 export var NoData = function NoData() {
   return _ref;

package/es/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/es/core/Table/__stories__/WithLoader.js

@@ -1,42 +1,44 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
 import { Button, TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell, TableNoDataRow } from '@digigov/react-core';
-import { LoaderContainer, CircularProgress, TableLoaderBackground } from '@digigov/react-extensions/admin/';
+import TableLoaderBackground from '@digigov/ui/admin/TableLoaderBackground';
+import LoaderContainer from '@digigov/ui/admin/LoaderContainer';
+import CircularProgress from '@digigov/ui/admin/CircularProgress';
 var data = [{
   name: 'Dimitris',
   job: 'carpenter',
   year: '5 years',
-  salary: '10.80$'
+  salary: '10.80€'
 }, {
   name: 'Katerina',
   job: 'engineer',
   year: '6 years',
-  salary: '19.60$'
+  salary: '19.60€'
 }, {
   name: 'Vasilis',
   job: 'taxi driver',
   year: '10 years',
-  salary: '12.83$'
+  salary: '12.83€'
 }, {
   name: 'Giorgos',
   job: 'yoga master',
   year: '15 years',
-  salary: '27.80$'
+  salary: '27.80€'
 }, {
   name: 'Giannis',
   job: 'unemployed',
   year: '5 years',
-  salary: '00.00$'
+  salary: '00.00€'
 }, {
   name: 'Katerina',
   job: 'car driver',
   year: '10 years',
-  salary: '11.80$'
+  salary: '11.80€'
 }, {
   name: 'Thanasis',
   job: 'babysitter',
   year: '5 years',
-  salary: '15.80$'
+  salary: '15.80€'
 }];
 
 var _ref = /*#__PURE__*/React.createElement(LoaderContainer, null, /*#__PURE__*/React.createElement(CircularProgress, null));
@@ -72,9 +74,9 @@ export var WithLoader = function WithLoader() {
   }) : _ref5))), /*#__PURE__*/React.createElement(Button, {
     onClick: function onClick() {
       setLoading(true);
-      setTimeout(function () {
+      /* setTimeout(() => {
         setLoading(false);
-      }, 7000);
+      }, 7000); */
     }
   }, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03B7\u03BA\u03B7"));
 };

package/es/core/Table/index.js

@@ -6,4 +6,5 @@ export * from '@digigov/react-core/TableDataCell';
 export * from '@digigov/react-core/TableHead';
 export * from '@digigov/react-core/TableHeadCell';
 export * from '@digigov/react-core/TableRow';
-export * from '@digigov/react-core/TableNoDataRow';
+export * from '@digigov/react-core/TableNoDataRow';
+export * from '@digigov/ui/core/Table/TableFloatingScroll';

package/es/core/Table/index.mdx

@@ -0,0 +1,59 @@
+---
+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" />
+
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Table
+implementation in the ARIA Authoring Practices Guide (APG) at 
+[Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) section.

package/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/layouts/Basic/Content/index.mdx

@@ -48,15 +48,3 @@ export Side
 ## How it works
 
 The Content component is used as a wrapper for the Main and Side components.
-
-## API
-
-### Properties
-
-<PropsDoc data={Content.__doc__} />
-
-<br />
-
-### Styles
-
-<StylesDoc data={Content.__doc__} />

package/es/layouts/Basic/Main/index.mdx

@@ -50,13 +50,3 @@ export Main
 
 The Main component is used to include tha main information of the page,
 spanning two-thirds of the page width.
-
-## API
-
-### Properties
-
-<PropsDoc data={Main.__doc__} />
-
-### Styles
-
-<StylesDoc data={Main.__doc__} />

package/es/layouts/Basic/Masthead/index.mdx

@@ -57,15 +57,3 @@ export Masthead
 ## How it works
 
 The Masthead component is a set of features or layout that marks the page and delivers identifying information to web users.
-
-## API
-
-### Properties
-
-<PropsDoc data={Masthead.__doc__} />
-
-<br />
-
-### Styles
-
-<StylesDoc data={Masthead.__doc__} />

package/es/layouts/Basic/Side/index.mdx

@@ -55,15 +55,3 @@ export Side
 
 The Side component covers the right one-third of the page width.
 Note that the Side component is optional, so there could be occasions that Side is empty.
-
-## API
-
-### Properties
-
-<PropsDoc data={Side.__doc__} />
-
-<br />
-
-### Styles
-
-<StylesDoc data={Side.__doc__} />

package/es/layouts/Basic/Top/index.mdx

@@ -58,15 +58,3 @@ export Top
 ## How it works
 
 The Top component is used to group the Header components.
-
-## API
-
-### Properties
-
-<PropsDoc data={Top.__doc__} />
-
-<br />
-
-### Styles
-
-<StylesDoc data={Top.__doc__} />