@digigov/ui 1.0.0-002c630d → 1.0.0-290a96e2

package/feedback/CopyToClipboard/index.d.ts

@@ -1,13 +1,11 @@
 import React from 'react';
-import CopyToClipboardContainer from '@digigov/react-core/CopyToClipboardContainer';
+import CopyToClipboardContainer, { CopyToClipboardContainerProps } from '@digigov/react-core/CopyToClipboardContainer';
 import CopyToClipboardMessage from '@digigov/react-core/CopyToClipboardMessage';
-declare type DivElementAttributes = JSX.IntrinsicElements['div'];
-export interface CopyToClipboardProps extends DivElementAttributes {
+export interface CopyToClipboardProps extends CopyToClipboardContainerProps {
     text: string;
-    variant?: 'tooltip-right' | 'tooltip-left' | 'banner';
     message?: string;
     timeout?: number;
 }
-export declare const CopyToClipboard: React.ForwardRefExoticComponent<Pick<CopyToClipboardProps, "children" | "slot" | "style" | "title" | "text" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "variant" | "message" | "timeout"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CopyToClipboard: React.ForwardRefExoticComponent<Pick<CopyToClipboardProps, "children" | "slot" | "style" | "title" | "text" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "variant" | "tooltipAlign" | "message" | "timeout"> & React.RefAttributes<HTMLDivElement>>;
 export default CopyToClipboard;
 export { CopyToClipboardContainer, CopyToClipboardMessage };

package/feedback/CopyToClipboard/index.js

@@ -41,7 +41,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var CopyToClipboard = /*#__PURE__*/_react["default"].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,
@@ -72,9 +74,9 @@ var CopyToClipboard = /*#__PURE__*/_react["default"].forwardRef(function CopyToC
   return /*#__PURE__*/_react["default"].createElement(_CopyToClipboardContainer["default"], {
     onClick: copyToClipboard,
     variant: variant,
+    tooltipAlign: tooltipAlign,
     ref: ref
   }, children, enabled && /*#__PURE__*/_react["default"].createElement(_CopyToClipboardMessage["default"], {
-    variant: variant,
     enabled: enabled,
     role: "tooltip"
   }, /*#__PURE__*/_react["default"].createElement(_NormalText["default"], null, message || t('copy-to-clipboard.message'))));

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

@@ -13,12 +13,12 @@ var _NotificationBanner = require("@digigov/ui/feedback/NotificationBanner");
 
 var Default = function Default() {
   return /*#__PURE__*/_react["default"].createElement(_NotificationBanner.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.");
 };
 
 exports.Default = Default;

package/feedback/NotificationBanner/index.d.ts

@@ -5,7 +5,7 @@ import NotificationBannerHeader from '@digigov/react-core/NotificationBannerHead
 import NotificationBannerHeading from '@digigov/react-core/NotificationBannerHeading';
 import NotificationBannerLink from '@digigov/react-core/NotificationBannerLink';
 export interface NotificationBannerProps extends NotificationBannerContainerProps {
-    variant?: 'important' | 'success';
+    variant?: 'info' | 'success' | 'error';
     title?: string;
     link?: {
         href: string;

package/feedback/NotificationBanner/index.js

@@ -59,17 +59,14 @@ var _excluded = ["variant", "title", "link", "children"];
 var _ref2 = /*#__PURE__*/_react["default"].createElement("br", null);
 
 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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var success = variant === 'success';
-  title = title ? title : success ? 'Success' : 'Important';
   return /*#__PURE__*/_react["default"].createElement(_NotificationBannerContainer["default"], (0, _extends2["default"])({
-    success: success
-  }, props), /*#__PURE__*/_react["default"].createElement(_NotificationBannerHeader["default"], null, title), /*#__PURE__*/_react["default"].createElement(_NotificationBannerContent["default"], null, /*#__PURE__*/_react["default"].createElement(_NotificationBannerHeading["default"], null, children, _ref2, link && /*#__PURE__*/_react["default"].createElement(_NotificationBannerLink["default"], {
+    variant: variant
+  }, props), title && /*#__PURE__*/_react["default"].createElement(_NotificationBannerHeader["default"], null, title), /*#__PURE__*/_react["default"].createElement(_NotificationBannerContent["default"], null, /*#__PURE__*/_react["default"].createElement(_NotificationBannerHeading["default"], null, children, _ref2, link && /*#__PURE__*/_react["default"].createElement(_NotificationBannerLink["default"], {
     href: link.href
   }, link.label))));
 };

package/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/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/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/feedback/WarningText/WarningText.stories.d.ts

@@ -7,4 +7,5 @@ declare namespace _default {
 }
 export default _default;
 export * from "@digigov/ui/feedback/WarningText/__stories__/Default";
+export * from "@digigov/ui/feedback/WarningText/__stories__/AssistiveText";
 import WarningText from "@digigov/ui/feedback/WarningText";

package/feedback/WarningText/WarningText.stories.js

@@ -23,6 +23,20 @@ Object.keys(_Default).forEach(function (key) {
     }
   });
 });
+
+var _AssistiveText = require("@digigov/ui/feedback/WarningText/__stories__/AssistiveText");
+
+Object.keys(_AssistiveText).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AssistiveText[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AssistiveText[key];
+    }
+  });
+});
 var _default = {
   title: 'Digigov UI/feedback/WarningText',
   description: '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.',

package/feedback/WarningText/__stories__/AssistiveText.d.ts

@@ -0,0 +1,2 @@
+export declare const AssistiveText: () => JSX.Element;
+export default AssistiveText;

package/feedback/WarningText/__stories__/AssistiveText.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.AssistiveText = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _WarningText = require("@digigov/ui/feedback/WarningText");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_WarningText.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.");
+
+var AssistiveText = function AssistiveText() {
+  return _ref;
+};
+
+exports.AssistiveText = AssistiveText;
+var _default = AssistiveText;
+exports["default"] = _default;

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

@@ -19,7 +19,7 @@ var _FieldContainer = require("@digigov/ui/form/FieldContainer");
 
 var _ref = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_AutoComplete.AutoComplete, {
   source: _utils.suggest,
-  cellWidth: "one-third",
+  width: "33.3%",
   id: "govgr"
 })), /*#__PURE__*/_react["default"].createElement(_Button.Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE"));
 

package/form/AutoComplete/index.d.ts

@@ -19,7 +19,7 @@ export interface AutoCompleteProps {
         suggestion?: (value: any) => any;
         inputValue?: (value: any) => string;
     };
-    cellWidth?: 'one-third' | 'one-quarter' | 'one-half' | 'two-thirds' | 'three-quarters' | 'full';
+    width?: '25%' | '33.3%' | '50%' | '66.6%' | '75%' | '100%' | 'full';
     autoselect?: boolean;
     defaultValue?: string;
     displayMenu?: 'overlay' | 'inline';
@@ -49,7 +49,7 @@ export declare type NewQueryProps = {
 };
 export default class AutoComplete extends Component<AutoCompleteProps, State> {
     static defaultProps: {
-        cellWidth: string;
+        width: string;
         autoselect: boolean;
         defaultValue: string;
         displayMenu: string;
@@ -63,7 +63,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
         required: boolean;
         tNoResults: () => string;
         tAssistiveHint: () => string;
-        dropdownArrow: React.ElementType<any>;
+        dropdownArrow: (props: any) => JSX.Element;
     };
     elementReferences: {};
     $pollInput: any;

package/form/AutoComplete/index.js

@@ -74,12 +74,12 @@ var _AutoCompleteResultListItem = _interopRequireDefault(require("@digigov/react
 
 var _AutoCompleteWrapper = _interopRequireDefault(require("@digigov/react-core/AutoCompleteWrapper"));
 
-var _DropdownArrowDown = _interopRequireDefault(require("@digigov/react-core/DropdownArrowDown"));
-
 var _Status = _interopRequireDefault(require("@digigov/ui/form/AutoComplete/Status"));
 
 var _utils = require("@digigov/ui/form/AutoComplete/utils");
 
+var _CaretIcon = require("@digigov/react-icons/CaretIcon");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -542,7 +542,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,
@@ -584,7 +584,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
       } : null;
       return /*#__PURE__*/_react["default"].createElement(_AutoCompleteWrapper["default"], {
         onKeyDown: this.handleKeyDown,
-        cellWidth: cellWidth
+        width: width
       }, /*#__PURE__*/_react["default"].createElement(_Status["default"], {
         id: id,
         length: options.length,
@@ -687,7 +687,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
 
 exports.AutoComplete = exports["default"] = AutoComplete;
 AutoComplete.defaultProps = {
-  cellWidth: 'one-third',
+  width: '33.3%',
   autoselect: false,
   defaultValue: '',
   displayMenu: 'overlay',
@@ -707,5 +707,10 @@ 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["default"]
+  dropdownArrow: function dropdownArrow(props) {
+    return /*#__PURE__*/_react["default"].createElement(_CaretIcon.CaretIcon, (0, _extends2["default"])({
+      direction: "down",
+      size: "sm"
+    }, props));
+  }
 };

package/form/AutoComplete/index.mdx

@@ -16,61 +16,33 @@ import AutoComplete from '@digigov/ui/form/AutoComplete';
 
 ### AutoComplete
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="Default.tsx" />
 
 ### AutoComplete with auto select
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithAutoSelect.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="WithAutoSelect.tsx" />
 
 ### AutoComplete with inline style
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithInLine.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="WithInLine.tsx" />
 
 ### AutoComplete with default value
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithDefaultValue.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="WithDefaultValue.tsx" />
 
 ### AutoComplete with placeholder
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithPlaceHolder.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="WithPlaceHolder.tsx" />
 
 ### AutoComplete with all option's values
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithShowAllValues.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete"story="WithShowAllValues.tsx" />
 
 ### AutoComplete with min length
 
 This is the minimum number of characters that should be entered before the autocomplete will attempt to suggest options(in above example is 2)
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithMinLength.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="WithMinLength.tsx" />
 
 ## API
 

package/form/Button/index.mdx

@@ -24,21 +24,13 @@ Use a default button for the main call to action on a page.
 
 Use a start button for the main call to action on your service’s start page. Start buttons do not submit form data, so they use a link tag rather than a button tag.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Button"
-  story="CallToActionButton.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Button" story="CallToActionButton.tsx" />
 
 ### Secondary buttons
 
 Use secondary buttons for secondary calls to action on a page.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Button"
-  story="Secondary.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Button" story="Secondary.tsx" />
 
 ### Warning buttons
 
@@ -56,22 +48,14 @@ Disabled buttons have poor contrast and can confuse some users, so avoid them if
 
 Use a button group when two or more buttons are placed together.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Button"
-  story="GroupingButtons.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Button" story="GroupingButtons.tsx" />
 
 Any links within a button group will automatically align with the buttons.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Button"
-  story="GroupingButtonsAndLinks.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Button" story="GroupingButtonsAndLinks.tsx" />
 
 Write button text in sentence case, describing the action it performs. For
-example:'
+example:
 
 - `Start now` at the [start of the service](https://guide.services.gov.gr/docs/start-pages)
 - `Sign in` to an account a user has already created
@@ -101,12 +85,12 @@ to do next.
 
 ## API Docs
 
-Read more about [how to use the React types](/docs/api/Button)
+Read more about [how to use the React types](/docs/api/Button).
 
 ## Accessibility
 
-You can read more about the accessibility patterns used in our Select
-implementation in the ARIA Authoring Practices Guide (APG) at
+You can read more about the accessibility patterns used in our Button
+implementation in the ARIA Authoring Practices Guide (APG) at [button](https://www.w3.org/WAI/ARIA/apg/patterns/button/) section.
 
 ## API
 

package/form/Checkbox/Checkbox.stories.d.ts

@@ -7,6 +7,8 @@ declare namespace _default {
 }
 export default _default;
 export * from "@digigov/ui/form/Checkbox/__stories__/Default";
+export * from "@digigov/ui/form/Checkbox/__stories__/Inline";
+export * from "@digigov/ui/form/Checkbox/__stories__/InlineWithDivider";
 export * from "@digigov/ui/form/Checkbox/__stories__/MultipleQuestions";
 export * from "@digigov/ui/form/Checkbox/__stories__/WithHint";
 export * from "@digigov/ui/form/Checkbox/__stories__/NoneAnswer";

package/form/Checkbox/Checkbox.stories.js

@@ -24,6 +24,34 @@ Object.keys(_Default).forEach(function (key) {
   });
 });
 
+var _Inline = require("@digigov/ui/form/Checkbox/__stories__/Inline");
+
+Object.keys(_Inline).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Inline[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Inline[key];
+    }
+  });
+});
+
+var _InlineWithDivider = require("@digigov/ui/form/Checkbox/__stories__/InlineWithDivider");
+
+Object.keys(_InlineWithDivider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _InlineWithDivider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _InlineWithDivider[key];
+    }
+  });
+});
+
 var _MultipleQuestions = require("@digigov/ui/form/Checkbox/__stories__/MultipleQuestions");
 
 Object.keys(_MultipleQuestions).forEach(function (key) {

package/form/Checkbox/__stories__/ConditionalReveal.js

@@ -27,7 +27,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
   value: "email"
 }, "Email"), /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxConditional, null, "Email address", /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "email-address",
-  cellWidth: "one-third"
+  width: "33.3%"
 })), /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
   name: "email",
   value: "phone"

package/form/Checkbox/__stories__/Inline.d.ts

@@ -0,0 +1,2 @@
+export declare const Inline: () => JSX.Element;
+export default Inline;