@digigov/ui 1.0.0-002c630d → 1.0.0-079f34f3d

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

@@ -2,8 +2,7 @@ import React from 'react';
 import { Table, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell } from '@digigov/ui/content/Table';
 import { TableFloatingScroll } from '@digigov/ui/content/Table/TableFloatingScroll';
 import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import NavList, { NavListItemAction } from '@digigov/ui/navigation/NavList';
 var labels = {
   name: 'Ονοματεπώνυμο',
   email: 'Email',
@@ -47,9 +46,11 @@ var _ref2 = /*#__PURE__*/React.createElement(TableDataCell, null, /*#__PURE__*/R
   placement: "bottom"
 }, /*#__PURE__*/React.createElement(DropdownButton, {
   variant: "link"
-}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavVertical, null, /*#__PURE__*/React.createElement(NavVerticalItem, {
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
   href: "#"
-}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavListItemAction, {
   href: "#"
 }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")))));
 

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

@@ -27,7 +27,7 @@ var data = {
 };
 export var ZebraProp = function ZebraProp() {
   return /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, {
-    zebra: true
+    variant: "zebra"
   }, 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 && Object.keys(data.labels).map(function (key) {
     return /*#__PURE__*/React.createElement(TableHeadCell, {
       key: key

package/es/content/Table/index.js

@@ -6,21 +6,20 @@ import Table from '@digigov/react-core/Table';
 import TableSortIconContainer from '@digigov/react-core/TableSortIconContainer';
 import { CaretIcon } from '@digigov/ui/icons';
 import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import { NavList, NavListItemAction } from '@digigov/ui/navigation/NavList';
 
 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,15 +49,18 @@ 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, {
+  }))), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavList, {
+    layout: "vertical"
+  }, /*#__PURE__*/React.createElement(NavListItemAction, {
     active: direction === 1,
     tabIndex: 0,
+    arrow: false,
     onClick: function onClick() {
       onSort(1);
       dropdownRef.current && (dropdownRef.current.open = false);
@@ -69,9 +71,10 @@ export var TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabe
         dropdownRef.current && (dropdownRef.current.open = false);
       }
     }
-  }, _ref2, labels.asc), /*#__PURE__*/React.createElement(NavVerticalItem, {
+  }, _ref2, labels.asc), /*#__PURE__*/React.createElement(NavListItemAction, {
     active: direction === -1,
     tabIndex: 0,
+    arrow: false,
     onClick: function onClick() {
       onSort(-1);
       dropdownRef.current && (dropdownRef.current.open = false);

package/es/content/Table/index.mdx

@@ -20,53 +20,35 @@ import {
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Table" story="Default.tsx"/>
 
 ### Table with dark header
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="DarkVariant.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/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="content/Table"
-  story="TableCaptions.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Table" story="TableCaptions.tsx"/>
 
 ### Numbers in a table
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="NumericDataType.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Table" story="NumericDataType.tsx"/>
 
 ### Zebra rows
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="ZebraProp.tsx"
-/>
+<Story  packageName="@digigov/ui" component="content/Table" story="ZebraProp.tsx"/>
+
+### Rows with primary or secondary color
+
+The prop `color='primary'` or `color='secondary'` is only functional when Table component has `variant='default'`.
+
+<Story packageName="@digigov/ui" component="content/Table"  story="RowColors.tsx"/>
 
 ### Vertical lines
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="VerticalBorders.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Table" story="VerticalBorders.tsx" />
 
 ### Dense tables
 
@@ -74,11 +56,7 @@ Use the `<TableCaption>` element to describe a table in the same way you would u
 
 ### Custom column widths
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="DefinedWidth.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Table" story="DefinedWidth.tsx"/>
 
 ### No data
 
@@ -86,16 +64,12 @@ Use the `<TableCaption>` element to describe a table in the same way you would u
 
 ### Using loader
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="WithLoader.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/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
+implementation in the ARIA Authoring Practices Guide (APG) at [Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) section.
 
 ## API
 

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/__stories__/Default.js

@@ -4,7 +4,8 @@ import { Button } from '@digigov/ui/form/Button';
 
 var _ref = /*#__PURE__*/React.createElement(CopyToClipboard, {
   text: "copied-text",
-  variant: "tooltip-left",
+  variant: "tooltip",
+  tooltipAlign: "left",
   message: "\u0391\u03BD\u03C4\u03B9\u03B3\u03C1\u03AC\u03C6\u03B7\u03BA\u03B5 \u03C3\u03C4\u03BF \u03C0\u03C1\u03CC\u03C7\u03B5\u03B9\u03C1\u03BF",
   id: "copy-to-clipboard"
 }, /*#__PURE__*/React.createElement(Button, {

package/es/feedback/CopyToClipboard/index.js

@@ -7,7 +7,9 @@ import NormalText from '@digigov/ui/typography/NormalText';
 export var CopyToClipboard = /*#__PURE__*/React.forwardRef(function CopyToClipboard(_ref, ref) {
   var text = _ref.text,
       _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'tooltip-right' : _ref$variant,
+      variant = _ref$variant === void 0 ? 'tooltip' : _ref$variant,
+      _ref$tooltipAlign = _ref.tooltipAlign,
+      tooltipAlign = _ref$tooltipAlign === void 0 ? 'right' : _ref$tooltipAlign,
       message = _ref.message,
       _ref$timeout = _ref.timeout,
       timeout = _ref$timeout === void 0 ? 3000 : _ref$timeout,
@@ -38,9 +40,9 @@ export var CopyToClipboard = /*#__PURE__*/React.forwardRef(function CopyToClipbo
   return /*#__PURE__*/React.createElement(CopyToClipboardContainer, {
     onClick: copyToClipboard,
     variant: variant,
+    tooltipAlign: tooltipAlign,
     ref: ref
   }, children, enabled && /*#__PURE__*/React.createElement(CopyToClipboardMessage, {
-    variant: variant,
     enabled: enabled,
     role: "tooltip"
   }, /*#__PURE__*/React.createElement(NormalText, null, message || t('copy-to-clipboard.message'))));

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/__stories__/Default.js

@@ -2,11 +2,11 @@ import React from 'react';
 import { NotificationBanner } from '@digigov/ui/feedback/NotificationBanner';
 export var Default = function Default() {
   return /*#__PURE__*/React.createElement(NotificationBanner, {
-    title: "\u03A0\u03C1\u03BF\u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03AF\u03B7\u03C3\u03B7",
+    title: "\u0395\u03B9\u03B4\u03BF\u03C0\u03BF\u03AF\u03B7\u03C3\u03B7",
     link: {
       label: 'Προβολή αίτησης',
       href: '#link?name=NotificationBannerDefault'
     }
-  }, "\u0388\u03C7\u03B5\u03C4\u03B5 7 \u03B7\u03BC\u03AD\u03C1\u03B5\u03C2 \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03C5\u03C0\u03BF\u03B2\u03AC\u03BB\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B1\u03AF\u03C4\u03B7\u03C3\u03B7.");
+  }, "\u03A3\u03B5 7 \u03B7\u03BC\u03AD\u03C1\u03B5\u03C2 \u03B8\u03B1 \u03BC\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03C5\u03C0\u03BF\u03B2\u03AC\u03BB\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B1\u03AF\u03C4\u03B7\u03C3\u03B7.");
 };
 export default Default;

package/es/feedback/NotificationBanner/index.js

@@ -11,18 +11,15 @@ import NotificationBannerLink from '@digigov/react-core/NotificationBannerLink';
 var _ref2 = /*#__PURE__*/React.createElement("br", null);
 
 export var NotificationBanner = function NotificationBanner(_ref) {
-  var _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'important' : _ref$variant,
+  var variant = _ref.variant,
       title = _ref.title,
       link = _ref.link,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var success = variant === 'success';
-  title = title ? title : success ? 'Success' : 'Important';
   return /*#__PURE__*/React.createElement(NotificationBannerContainer, _extends({
-    success: success
-  }, props), /*#__PURE__*/React.createElement(NotificationBannerHeader, null, title), /*#__PURE__*/React.createElement(NotificationBannerContent, null, /*#__PURE__*/React.createElement(NotificationBannerHeading, null, children, _ref2, link && /*#__PURE__*/React.createElement(NotificationBannerLink, {
+    variant: variant
+  }, props), title && /*#__PURE__*/React.createElement(NotificationBannerHeader, null, title), /*#__PURE__*/React.createElement(NotificationBannerContent, null, /*#__PURE__*/React.createElement(NotificationBannerHeading, null, children, _ref2, link && /*#__PURE__*/React.createElement(NotificationBannerLink, {
     href: link.href
   }, link.label))));
 };

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/ServiceBadge/index.mdx

@@ -5,17 +5,21 @@ parent: docs/ui/component
 ---
 
 import ServiceBadge from '@digigov/ui/feedback/ServiceBadge';
-import Header, { HeaderTitle } from '@digigov/ui/app/Header';
+import Header, { HeaderContent, HeaderSection, HeaderTitle } from '@digigov/ui/app/Header';
 import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
 
 ## Example
 
 <Header>
-  <GovGRLogo />
-  <HeaderTitle>
-    Service Name <ServiceBadge label="ALPHA" />
-  </HeaderTitle>
+  <HeaderContent>
+    <HeaderSection>
+      <GovGRLogo />
+      <HeaderTitle>Service Name </HeaderTitle>
+      <ServiceBadge label="ALPHA" />
+    </HeaderSection>
+  </HeaderContent>
 </Header>
+<br/>
 
 ## How to use
 

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"));
 

package/es/form/AutoComplete/index.js

@@ -18,9 +18,9 @@ import AutoCompleteInputTypeahead from '@digigov/react-core/AutoCompleteInputTyp
 import AutoCompleteResultList from '@digigov/react-core/AutoCompleteResultList';
 import AutoCompleteResultListItem from '@digigov/react-core/AutoCompleteResultListItem';
 import AutoCompleteWrapper from '@digigov/react-core/AutoCompleteWrapper';
-import DropdownArrowDown from '@digigov/react-core/DropdownArrowDown';
 import Status from '@digigov/ui/form/AutoComplete/Status';
 import { isIosDevice, keyCodes, isPrintableKeyCode } from '@digigov/ui/form/AutoComplete/utils';
+import { CaretIcon } from '@digigov/react-icons/CaretIcon';
 
 var AutoComplete = /*#__PURE__*/function (_Component) {
   _inherits(AutoComplete, _Component);
@@ -477,7 +477,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
 
       var _this$props4 = this.props,
           id = _this$props4.id,
-          cellWidth = _this$props4.cellWidth,
+          width = _this$props4.width,
           displayMenu = _this$props4.displayMenu,
           minLength = _this$props4.minLength,
           name = _this$props4.name,
@@ -519,7 +519,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
       } : null;
       return /*#__PURE__*/React.createElement(AutoCompleteWrapper, {
         onKeyDown: this.handleKeyDown,
-        cellWidth: cellWidth
+        width: width
       }, /*#__PURE__*/React.createElement(Status, {
         id: id,
         length: options.length,
@@ -622,7 +622,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
 }(Component);
 
 AutoComplete.defaultProps = {
-  cellWidth: 'one-third',
+  width: '33.3%',
   autoselect: false,
   defaultValue: '',
   displayMenu: 'overlay',
@@ -642,7 +642,12 @@ AutoComplete.defaultProps = {
   tAssistiveHint: function tAssistiveHint() {
     return 'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.';
   },
-  dropdownArrow: DropdownArrowDown
+  dropdownArrow: function dropdownArrow(props) {
+    return /*#__PURE__*/React.createElement(CaretIcon, _extends({
+      direction: "down",
+      size: "sm"
+    }, props));
+  }
 };
 export { AutoComplete as default };
 export { AutoComplete, AutoCompleteInput, AutoCompleteInputTypeahead, AutoCompleteResultList, AutoCompleteResultListItem, AutoCompleteWrapper, AutoCompleteAssistiveHint };