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

package/esm/typography/NormalText/__stories__/FontSizes.js

@@ -3,7 +3,7 @@ import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 import { NormalText } from '@digigov/ui/typography/NormalText';
 
 var _ref = /*#__PURE__*/React.createElement(NormalText, {
-  fontSize: "14"
+  fontSize: 14
 }, " govgr-!-font-size-14 ");
 
 var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, {
@@ -11,7 +11,7 @@ var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, {
 });
 
 var _ref3 = /*#__PURE__*/React.createElement(NormalText, {
-  fontSize: "16"
+  fontSize: 16
 }, " govgr-!-font-size-16 ");
 
 var _ref4 = /*#__PURE__*/React.createElement(SectionBreak, {
@@ -19,7 +19,7 @@ var _ref4 = /*#__PURE__*/React.createElement(SectionBreak, {
 });
 
 var _ref5 = /*#__PURE__*/React.createElement(NormalText, {
-  fontSize: "19"
+  fontSize: 19
 }, " govgr-!-font-size-19 ");
 
 var _ref6 = /*#__PURE__*/React.createElement(SectionBreak, {
@@ -27,7 +27,7 @@ var _ref6 = /*#__PURE__*/React.createElement(SectionBreak, {
 });
 
 var _ref7 = /*#__PURE__*/React.createElement(NormalText, {
-  fontSize: "24"
+  fontSize: 24
 }, " govgr-!-font-size-24 ");
 
 var _ref8 = /*#__PURE__*/React.createElement(SectionBreak, {
@@ -35,7 +35,7 @@ var _ref8 = /*#__PURE__*/React.createElement(SectionBreak, {
 });
 
 var _ref9 = /*#__PURE__*/React.createElement(NormalText, {
-  fontSize: "30"
+  fontSize: 30
 }, " govgr-!-font-size-30 ");
 
 var _ref10 = /*#__PURE__*/React.createElement(SectionBreak, {
@@ -43,7 +43,7 @@ var _ref10 = /*#__PURE__*/React.createElement(SectionBreak, {
 });
 
 var _ref11 = /*#__PURE__*/React.createElement(NormalText, {
-  fontSize: "48"
+  fontSize: 48
 }, " govgr-!-font-size-48 ");
 
 var _ref12 = /*#__PURE__*/React.createElement(SectionBreak, {
@@ -51,7 +51,7 @@ var _ref12 = /*#__PURE__*/React.createElement(SectionBreak, {
 });
 
 var _ref13 = /*#__PURE__*/React.createElement(NormalText, {
-  fontSize: "72"
+  fontSize: 72
 }, " govgr-!-font-size-72 ");
 
 export var FontSizes = function FontSizes() {

package/esm/typography/NormalText/__stories__/Variants.js

@@ -3,16 +3,16 @@ import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 import { NormalText } from '@digigov/ui/typography/NormalText';
 
 var _ref = /*#__PURE__*/React.createElement(NormalText, {
-  variant: 'sm'
-}, " govgr-variant-small ");
+  size: 'sm'
+}, " govgr-size-small ");
 
 var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, {
   visible: false
 });
 
 var _ref3 = /*#__PURE__*/React.createElement(NormalText, {
-  variant: 'lg'
-}, " govgr-variant-lead ");
+  size: 'lg'
+}, " govgr-size-large ");
 
 export var Variants = function Variants() {
   return /*#__PURE__*/React.createElement(React.Fragment, null, _ref, _ref2, _ref3);

package/esm/typography/NormalText/index.mdx

@@ -9,32 +9,22 @@ import NormalText from '@digigov/ui/typography/NormalText';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/NormalText"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/NormalText" story="Default.tsx" />
 
 ### Variants
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/NormalText"
-  story="Variants.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/NormalText" story="Variants.tsx" />
 
 ## Font override classes
 
 ### Font size
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/NormalText"
-  story="FontSizes.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/NormalText" story="FontSizes.tsx" />
 
 ### Font weight
 
+<Story packageName="@digigov/ui" component="typography/NormalText" story="FontWeight.tsx" />
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="NormalText" />

package/esm/typography/Paragraph/__stories__/FontSizes.js

@@ -2,31 +2,31 @@ import React from 'react';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 var _ref = /*#__PURE__*/React.createElement(Paragraph, {
-  fontSize: "14"
+  fontSize: 14
 }, " govgr-!-font-size-14 ");
 
 var _ref2 = /*#__PURE__*/React.createElement(Paragraph, {
-  fontSize: "16"
+  fontSize: 16
 }, " govgr-!-font-size-16 ");
 
 var _ref3 = /*#__PURE__*/React.createElement(Paragraph, {
-  fontSize: "19"
+  fontSize: 19
 }, " govgr-!-font-size-19 ");
 
 var _ref4 = /*#__PURE__*/React.createElement(Paragraph, {
-  fontSize: "24"
+  fontSize: 24
 }, " govgr-!-font-size-24 ");
 
 var _ref5 = /*#__PURE__*/React.createElement(Paragraph, {
-  fontSize: "30"
+  fontSize: 30
 }, " govgr-!-font-size-30 ");
 
 var _ref6 = /*#__PURE__*/React.createElement(Paragraph, {
-  fontSize: "48"
+  fontSize: 48
 }, " govgr-!-font-size-48 ");
 
 var _ref7 = /*#__PURE__*/React.createElement(Paragraph, {
-  fontSize: "72"
+  fontSize: 72
 }, " govgr-!-font-size-72 ");
 
 export var FontSizes = function FontSizes() {

package/esm/typography/Paragraph/__stories__/LeadVariant.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 var _ref = /*#__PURE__*/React.createElement(Paragraph, {
-  variant: 'lg'
+  size: 'lg'
 }, "govgr-body");
 
 export var LeadVariant = function LeadVariant() {

package/esm/typography/Paragraph/__stories__/SmallVariant.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 var _ref = /*#__PURE__*/React.createElement(Paragraph, {
-  variant: 'sm'
+  size: 'sm'
 }, "govgr-body");
 
 export var SmallVariant = function SmallVariant() {

package/esm/typography/Paragraph/index.mdx

@@ -9,40 +9,25 @@ import Paragraph from '@digigov/ui/typography/Paragraph';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="Default.tsx" />
 
 ### Lead paragraph
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="LeadVariant.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph"story="LeadVariant.tsx" />
 
 ### Small paragraph
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="SmallVariant.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="SmallVariant.tsx" />
 
 ## Font override classes
 
 ### Font size
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="FontSizes.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="FontSizes.tsx" />
 
 ### Font weight
 
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="FontWeight.tsx" />
 ## API
 
 <PropTypes packageName="@digigov/ui" component="Paragraph" />

package/esm/utils/Kitchensink/KitchensinkDashboard.js

@@ -4,7 +4,7 @@ import Paragraph from '@digigov/react-core/Paragraph';
 import { KitchensinkByCategory } from '@digigov/ui/utils/Kitchensink/KitchensinkByCategory';
 
 var _ref2 = /*#__PURE__*/React.createElement(Paragraph, {
-  fontSize: "72",
+  fontSize: 72,
   fontWeight: "bold"
 }, "Components");
 

package/feedback/CopyToClipboard/__stories__/Default.js

@@ -15,7 +15,8 @@ var _Button = require("@digigov/ui/form/Button");
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_CopyToClipboard.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["default"].createElement(_Button.Button, {

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;