@digigov/ui 1.0.0-6b93ebf2 → 1.0.0-88820b1e

package/es/content/Card/index.mdx

@@ -22,19 +22,11 @@ You can set the color of the Card's border. You can choose between `dark` and `g
 
 #### Card with gray border color
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Card"
-  story="WithGrayBorder.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Card" story="WithGrayBorder.tsx" />
 
 #### Card with dark border color
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Card"
-  story="WithDarkBorder.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Card" story="WithDarkBorder.tsx" />
 
 ### Card with top border
 
@@ -42,27 +34,15 @@ You can set the color of the Card's top border. You can choose between dark and
 
 #### Card with grey top border
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Card"
-  story="WithGrayTopBorder.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Card" story="WithGrayTopBorder.tsx" />
 
 #### Card with dark top border
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Card"
-  story="WithDarkTopBorder.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Card" story="WithDarkTopBorder.tsx" />
 
 ### Card with divider
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Card"
-  story="WithDivider.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Card" story="WithDivider.tsx" />
 
 ### Card with actions
 
@@ -70,21 +50,13 @@ You can set the color of the Card's top border. You can choose between dark and
 
 Cards can be used without an action button, but with a clickable title.
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Card"
-  story="WithClickableLink.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Card" story="WithClickableLink.tsx" />
 
 #### Card with clickable content
 
 You can expand the clickable area of the link to fill Card's content.
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Card"
-  story="WithClickableContent.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Card" story="WithClickableContent.tsx" />
 
 Cards also provides styles for actionable elements such as Buttons or Links.
 
@@ -94,11 +66,7 @@ Cards also provides styles for actionable elements such as Buttons or Links.
 
 #### Card with a group of actions
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Card"
-  story="WithGroupButton.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Card" story="WithGroupButton.tsx" />
 
 ## API
 

package/es/content/Chip/__stories__/GroupOfChips.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import Chip, { ChipSection } from '@digigov/ui/content/Chip';
+import Chip, { ChipContainer } from '@digigov/ui/content/Chip';
 
-var _ref = /*#__PURE__*/React.createElement(ChipSection, null, /*#__PURE__*/React.createElement(Chip, null, "\u0391\u03B8\u03AE\u03BD\u03B1"), /*#__PURE__*/React.createElement(Chip, null, "\u0398\u03B5\u03C3\u03C3\u03B1\u03BB\u03BF\u03BD\u03AF\u03BA\u03B7"), /*#__PURE__*/React.createElement(Chip, null, "\u039A\u03C1\u03AE\u03C4\u03B7"), /*#__PURE__*/React.createElement(Chip, null, "\u03A0\u03AC\u03C4\u03C1\u03B1"));
+var _ref = /*#__PURE__*/React.createElement(ChipContainer, null, /*#__PURE__*/React.createElement(Chip, null, "\u0391\u03B8\u03AE\u03BD\u03B1"), /*#__PURE__*/React.createElement(Chip, null, "\u0398\u03B5\u03C3\u03C3\u03B1\u03BB\u03BF\u03BD\u03AF\u03BA\u03B7"), /*#__PURE__*/React.createElement(Chip, null, "\u039A\u03C1\u03AE\u03C4\u03B7"), /*#__PURE__*/React.createElement(Chip, null, "\u03A0\u03AC\u03C4\u03C1\u03B1"));
 
 export var GroupOfChips = function GroupOfChips() {
   return _ref;

package/es/content/Chip/index.js

@@ -1,7 +1,6 @@
 export * from '@digigov/react-core/Chip';
 export * from '@digigov/react-core/ChipHeading';
-export * from '@digigov/react-core/ChipSection';
-export * from '@digigov/react-core/ChipSectionWrapper';
+export * from '@digigov/react-core/ChipContainer';
 export * from '@digigov/react-core/ChipKeyValue';
 import Chip from '@digigov/react-core/Chip';
 export default Chip;

package/es/content/Chip/index.mdx

@@ -0,0 +1,39 @@
+---
+id: chip
+title: Chip
+---
+
+# Chip
+
+Chips allow users to enter information, make selections, filter content, or trigger actions. 
+While buttons are expected to appear consistently and with familiar calls to action, 
+chips should appear dynamically as a group of multiple interactive elements.
+
+```bash
+import Chip from '@digigov/ui/content/Chip';
+```
+
+## How to use
+
+<Story packageName="@digigov/ui" component="content/Chip" story="Default.tsx" />
+
+
+### Clickable Chip
+
+<Story packageName="@digigov/ui" component="content/Chip" story="ClickableChip.tsx" />
+
+### Chip with close icon
+
+<Story packageName="@digigov/ui" component="content/Chip" story="DeletableChip.tsx" />
+
+### Clickable Chip with close icon
+
+<Story packageName="@digigov/ui" component="content/Chip" story="ClickableDeletableChip.tsx" />
+
+### Group of Chips
+
+<Story packageName="@digigov/ui" component="content/Chip" story="GroupOfChips.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Chip" />

package/es/content/Details/index.mdx

@@ -13,11 +13,7 @@ import Details from '@digigov/ui/content/Details';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Details"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Details" story="Default.tsx" />
 
 ## API
 

package/es/content/List/__stories__/HorizontalList.js

@@ -4,7 +4,7 @@ import { ListItem } from '@digigov/ui/content/List/ListItem';
 import { Link } from '@digigov/ui/navigation/Link';
 
 var _ref = /*#__PURE__*/React.createElement(List, {
-  horizontal: true
+  layout: "horizontal"
 }, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "List Item One")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "List Item Two")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "List Item Three")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "List Item Four")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "List Item Five")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "List Item Six")));
 
 export var HorizontalList = function HorizontalList() {

package/es/content/List/__stories__/WithExtraSpace.js

@@ -3,7 +3,7 @@ import { List } from '@digigov/ui/content/List/List';
 import { ListItem } from '@digigov/ui/content/List/ListItem';
 
 var _ref = /*#__PURE__*/React.createElement(List, {
-  spaced: true
+  dense: false
 }, /*#__PURE__*/React.createElement(ListItem, null, "\u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B4\u03B9\u03B1\u03B3\u03BD\u03C9\u03C3\u03C4\u03B9\u03BA\u03CE\u03BD \u03B5\u03C1\u03B3\u03B1\u03C3\u03C4\u03B7\u03C1\u03B9\u03B1\u03BA\u03CE\u03BD \u03B5\u03BE\u03B5\u03C4\u03AC\u03C3\u03B5\u03C9\u03BD"), /*#__PURE__*/React.createElement(ListItem, null, "\u03A0\u03C4\u03C5\u03C7\u03AF\u03B1 \u03C4\u03C1\u03B9\u03C4\u03BF\u03B2\u03AC\u03B8\u03BC\u03B9\u03B1\u03C2 \u03B5\u03BA\u03C0\u03B1\u03AF\u03B4\u03B5\u03C5\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(ListItem, null, "\u03A5\u03C0\u03B5\u03CD\u03B8\u03C5\u03BD\u03B7 \u0394\u03AE\u03BB\u03C9\u03C3\u03B7 / \u0395\u03BE\u03BF\u03C5\u03C3\u03B9\u03BF\u03B4\u03CC\u03C4\u03B7\u03C3\u03B7 / \u0393\u03BD\u03AE\u03C3\u03B9\u03BF \u03A5\u03C0\u03BF\u03B3\u03C1\u03B1\u03C6\u03AE\u03C2"));
 
 export var WithExtraSpace = function WithExtraSpace() {

package/es/content/List/index.mdx

@@ -15,27 +15,15 @@ import List from '@digigov/ui/content/List';
 
 ### List with bullets
 
-<Story
-  packageName="@digigov/ui"
-  component="content/List"
-  story="BulletList.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/List" story="BulletList.tsx" />
 
 ### List with numbers
 
-<Story
-  packageName="@digigov/ui"
-  component="content/List"
-  story="NumberedList.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/List" story="NumberedList.tsx" />
 
 ### List with extra space
 
-<Story
-  packageName="@digigov/ui"
-  component="content/List"
-  story="WithExtraSpace.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/List" story="WithExtraSpace.tsx" />
 
 ## API
 

package/es/content/StepNav/__stories__/Default.js

@@ -106,7 +106,7 @@ export var Default = function Default() {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
-      SetOpen = _useState2[1];
+      setOpen = _useState2[1];
 
   var _useState3 = useState(Array(data.length).fill(false)),
       _useState4 = _slicedToArray(_useState3, 2),
@@ -137,7 +137,7 @@ export var Default = function Default() {
   }
 
   function openCloseAll() {
-    SetOpen(!open);
+    setOpen(!open);
   }
 
   return /*#__PURE__*/React.createElement(StepNav, null, /*#__PURE__*/React.createElement(StepNavControls, null, /*#__PURE__*/React.createElement(Button, {
@@ -156,9 +156,7 @@ export var Default = function Default() {
       }
     }, /*#__PURE__*/React.createElement(StepNavAccordionSummaryHeading, {
       "aria-controls": "content1"
-    }, _ref, index === 1 ? _ref2 : /*#__PURE__*/React.createElement(StepNavCircleNumber, null, _ref3, index > 1 ? index : index + 1), /*#__PURE__*/React.createElement(StepNavAccordionHeadingTitle, null, /*#__PURE__*/React.createElement(StepNavAccordionHeadingText, {
-      open: openItem[index]
-    }, field.title, field.codename && /*#__PURE__*/React.createElement(React.Fragment, null, ' - ', " ", field.codename))))), /*#__PURE__*/React.createElement(StepNavAccordionContent, {
+    }, _ref, index === 1 ? _ref2 : /*#__PURE__*/React.createElement(StepNavCircleNumber, null, _ref3, index > 1 ? index : index + 1), /*#__PURE__*/React.createElement(StepNavAccordionHeadingTitle, null, /*#__PURE__*/React.createElement(StepNavAccordionHeadingText, null, field.title, field.codename && /*#__PURE__*/React.createElement(React.Fragment, null, ' - ', " ", field.codename))))), /*#__PURE__*/React.createElement(StepNavAccordionContent, {
       id: "content1"
     }, /*#__PURE__*/React.createElement(ButtonGroup, null, (field.actions || []).map(function (action, subIndex) {
       return /*#__PURE__*/React.createElement(Button, {

package/es/content/StepNav/__stories__/WithHints.js

@@ -165,10 +165,8 @@ export var WithHints = function WithHints() {
       }
     }, /*#__PURE__*/React.createElement(StepNavAccordionSummaryHeading, {
       "aria-controls": "content1"
-    }, _ref, index === 1 ? _ref2 : /*#__PURE__*/React.createElement(StepNavCircleNumber, null, _ref3, index > 1 ? index : index + 1), /*#__PURE__*/React.createElement(StepNavAccordionHeadingTitle, null, /*#__PURE__*/React.createElement(StepNavAccordionHeadingText, {
-      open: openItem[index]
-    }, field.title, field.codename && /*#__PURE__*/React.createElement(React.Fragment, null, ' - ', " ", field.codename)), /*#__PURE__*/React.createElement(Hint, {
-      fontSize: "14"
+    }, _ref, index === 1 ? _ref2 : /*#__PURE__*/React.createElement(StepNavCircleNumber, null, _ref3, index > 1 ? index : index + 1), /*#__PURE__*/React.createElement(StepNavAccordionHeadingTitle, null, /*#__PURE__*/React.createElement(StepNavAccordionHeadingText, null, field.title, field.codename && /*#__PURE__*/React.createElement(React.Fragment, null, ' - ', " ", field.codename)), /*#__PURE__*/React.createElement(Hint, {
+      fontSize: 14
     }, field.date)))), /*#__PURE__*/React.createElement(StepNavAccordionContent, {
       id: "content1"
     }, /*#__PURE__*/React.createElement(ButtonGroup, null, (field.actions || []).map(function (action, subIndex) {

package/es/content/StepNav/index.mdx

@@ -0,0 +1,21 @@
+---
+id: step-nav
+title: StepNav
+---
+
+# StepNav
+ StepNav is a component that displays number of steps required to complete a process inside your application.
+
+```bash
+import StepNav from '@digigov/ui/content/StepNav';
+```
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="content/StepNav" story="Default.tsx" />
+
+### With hints
+
+<Story packageName="@digigov/ui" component="content/StepNav" story="WithHints.tsx" />

package/es/content/SummaryList/index.mdx

@@ -13,11 +13,7 @@ import SummaryList from '@digigov/ui/content/SummaryList';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="content/SummaryList"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/SummaryList" story="Default.tsx" />
 
 ### Summary list with actions
 
@@ -25,21 +21,13 @@ 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="content/SummaryList"
-  story="WithActions.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/SummaryList" story="WithActions.tsx" />
 
 ### Summary list without borders
 
 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.
 
-<Story
-  packageName="@digigov/ui"
-  component="content/SummaryList"
-  story="WithoutBorders.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/SummaryList" story="WithoutBorders.tsx" />
 
 ## API
 

package/es/content/Table/__stories__/DefinedWidth.js

@@ -23,11 +23,11 @@ var data = {
 };
 export var DefinedWidth = function DefinedWidth() {
   return /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, null, data && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableCaption, null, data.title), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, data.labels && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableHeadCell, {
-    cellWidth: "one-half"
+    width: "50%"
   }, data.labels.name), /*#__PURE__*/React.createElement(TableHeadCell, {
-    cellWidth: "one-quarter"
+    width: "25%"
   }, data.labels.role), /*#__PURE__*/React.createElement(TableHeadCell, {
-    cellWidth: "one-quarter"
+    width: "25%"
   }, data.labels.email)))), /*#__PURE__*/React.createElement(TableBody, null, data.content && data.content.map(function (item, index) {
     return /*#__PURE__*/React.createElement(TableRow, {
       key: index

package/es/content/Table/index.js

@@ -13,14 +13,14 @@ var _ref2 = /*#__PURE__*/React.createElement(CaretIcon, {
   direction: 'up',
   marginRight: 1,
   marginTop: 1,
-  size: "md"
+  size: "sm"
 });
 
 var _ref3 = /*#__PURE__*/React.createElement(CaretIcon, {
   direction: 'down',
   marginRight: 1,
   marginTop: 1,
-  size: "md"
+  size: "sm"
 });
 
 export var TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabel(_ref, _ref4) {
@@ -50,11 +50,11 @@ export var TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabe
     marginLeft: 1
   }, /*#__PURE__*/React.createElement(CaretIcon, {
     direction: 'up',
-    size: "md",
+    size: "sm",
     variant: direction === 1 ? 'dark' : 'gray'
   }), /*#__PURE__*/React.createElement(CaretIcon, {
     direction: 'down',
-    size: "md",
+    size: "sm",
     variant: direction === -1 ? 'dark' : 'gray'
   }))), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavVertical, null, /*#__PURE__*/React.createElement(NavVerticalItem, {
     active: direction === 1,

package/es/content/TaskList/__stories__/Default.js

@@ -47,26 +47,26 @@ export var Default = function Default() {
 
       switch (task.status) {
         case 'Ολοκληρωθηκε':
-          tagColor = 'completed';
+          tagColor = 'info';
           break;
 
         case 'Σε εξελιξη':
-          tagColor = 'in-progress';
+          tagColor = 'primary';
           break;
 
         case 'Δεν εχει ξεκινησει':
-          tagColor = 'not-started';
+          tagColor = 'secondary';
           break;
 
         case 'Σε αναμονη':
-          tagColor = 'not-started';
+          tagColor = 'secondary';
           break;
       }
 
       return /*#__PURE__*/React.createElement(SummaryListItem, {
         key: key
       }, /*#__PURE__*/React.createElement(SummaryListItemKey, null, /*#__PURE__*/React.createElement(LinkBase, null, task.text)), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(TaskListItemTag, {
-        status: tagColor
+        color: tagColor
       }, task.status)));
     }))));
   })));

package/es/content/TaskList/index.mdx

@@ -0,0 +1,21 @@
+---
+id: task-list
+title: TaskList
+---
+
+# TaskList
+ TaskList is a component that displays number of steps required to complete a process inside your application.
+
+```bash
+import TaskList from '@digigov/ui/content/TaskList';
+```
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="content/TaskList" story="Default.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="TaskList" />

package/es/content/Timeline/__stories__/Default.js

@@ -98,7 +98,7 @@ var _ref2 = /*#__PURE__*/React.createElement(Button, {
 
 export var Default = function Default() {
   return /*#__PURE__*/React.createElement(Timeline, null, data && data.map(function (field, index) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TimelineItem, {
+    return /*#__PURE__*/React.createElement(TimelineItem, {
       key: index,
       marginBottom: 10
     }, /*#__PURE__*/React.createElement(TimelineHeading, {
@@ -118,7 +118,7 @@ export var Default = function Default() {
         key: subIndex,
         variant: "link"
       }, action.label);
-    }), _ref, _ref2))));
+    }), _ref, _ref2)));
   }));
 };
 export default Default;

package/es/content/Timeline/index.mdx

@@ -0,0 +1,23 @@
+---
+id: timeline
+title: Timeline
+---
+
+# Timeline
+A timeline is a useful way to display a whole range of information and/or data points to a user.
+Keeping things organized in logical sequence timeline helps to keep track of what’s happening. 
+User can better understand what has happened and also understand what the next steps should be.
+
+```bash
+import Timeline from '@digigov/ui/content/Timeline';
+```
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="content/Timeline" story="Default.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Timeline" />

package/es/feedback/CopyToClipboard/index.mdx

@@ -11,19 +11,11 @@ import CopyToClipboard from '@digigov/ui/feedback/CopyToClipboard';
 
 ### Default
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/CopyToClipboard"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/CopyToClipboard" story="Default.tsx" />
 
 ### Banner
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/CopyToClipboard"
-  story="Banner.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/CopyToClipboard" story="Banner.tsx" />
 
 ## API
 

package/es/feedback/ErrorSummary/index.mdx

@@ -15,11 +15,7 @@ import ErrorSummary from '@digigov/ui/feedback/ErrorSummary';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/ErrorSummary" story="Default.tsx" />
 
 ### Linking from the error summary to each answer
 
@@ -27,29 +23,17 @@ 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="feedback/ErrorSummary"
-  story="LinkedToInput.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/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="feedback/ErrorSummary"
-  story="LinkedToField.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/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.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="LinkedToCheckbox.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/ErrorSummary" story="LinkedToCheckbox.tsx" />
 
 ## API
 

package/es/feedback/NotificationBanner/index.mdx

@@ -19,19 +19,11 @@ 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="feedback/NotificationBanner"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/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.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/NotificationBanner"
-  story="Success.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/NotificationBanner" story="Success.tsx" />
 
 ## API
 

package/es/feedback/PhaseBanner/index.mdx

@@ -15,19 +15,11 @@ import PhaseBanner from '@digigov/ui/feedback/PhaseBanner';
 
 Your banner must be directly under the blue GOV.GR header and colour bar.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/PhaseBanner"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/PhaseBanner" story="Default.tsx" />
 
 ### Underlined
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/PhaseBanner"
-  story="Underlined.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/PhaseBanner"story="Underlined.tsx" />
 
 ## API
 

package/es/feedback/WarningText/WarningText.stories.js

@@ -6,4 +6,5 @@ export default {
   component: WarningText,
   displayName: 'WarningText'
 };
-export * from '@digigov/ui/feedback/WarningText/__stories__/Default';
+export * from '@digigov/ui/feedback/WarningText/__stories__/Default';
+export * from '@digigov/ui/feedback/WarningText/__stories__/AssistiveText';

package/es/feedback/WarningText/__stories__/AssistiveText.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { WarningText } from '@digigov/ui/feedback/WarningText';
+
+var _ref = /*#__PURE__*/React.createElement(WarningText, {
+  assistiveText: "\u03A3\u03B7\u03BC\u03B1\u03BD\u03C4\u03B9\u03BA\u03CC"
+}, "\u039C\u03C0\u03BF\u03C1\u03B5\u03AF \u03BD\u03B1 \u03C3\u03B1\u03C2 \u03B5\u03C0\u03B9\u03B2\u03BB\u03B7\u03B8\u03B5\u03AF \u03C0\u03C1\u03CC\u03C3\u03C4\u03B9\u03BC\u03BF \u03AD\u03C9\u03C2 \u03BA\u03B1\u03B9 5.000 \u03B5\u03C5\u03C1\u03CE \u03B5\u03AC\u03BD \u03B4\u03B5\u03BD \u03B5\u03B3\u03B3\u03C1\u03B1\u03C6\u03B5\u03AF\u03C4\u03B5.");
+
+export var AssistiveText = function AssistiveText() {
+  return _ref;
+};
+export default AssistiveText;

package/es/feedback/WarningText/index.mdx

@@ -14,11 +14,7 @@ import WarningText from '@digigov/ui/feedback/WarningText';
 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.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/WarningText"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/WarningText" story="Default.tsx" />
 
 ## API
 

package/es/form/AutoComplete/__stories__/Default.js

@@ -6,7 +6,7 @@ import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 
 var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(AutoComplete, {
   source: suggest,
-  cellWidth: "one-third",
+  width: "33.3%",
   id: "govgr"
 })), /*#__PURE__*/React.createElement(Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE"));