@digigov/ui 1.2.0-a7ffb5dc → 2.0.0-462194bf

package/src/content/Chip/index.mdx

@@ -9,10 +9,6 @@ Chips allow users to enter information, make selections, filter content, or trig
 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" />
@@ -51,4 +47,7 @@ import Chip from '@digigov/ui/content/Chip';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Chip" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Chip"]} />
+

package/src/content/Details/index.mdx

@@ -7,10 +7,6 @@ title: Details
 
 The details component is a short link that shows more detailed help text when a user clicks on it.
 
-```bash
-import Details from '@digigov/ui/content/Details';
-```
-
 ## How to use
 
 <Story
@@ -26,4 +22,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Disclosure](https
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Details" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Details", "DetailsSummary", "DetailsContent"]} />

package/src/content/List/__stories__/Default.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
 import { List } from '@digigov/ui/content/List/List';
 import { ListItem } from '@digigov/ui/content/List/ListItem';
-import { Link } from '@digigov/ui/navigation/Link';
 
 export const Default = () => (
   <List>
     <ListItem>
-      <Link>Αποτελέσματα διαγνωστικών εργαστηριακών εξετάσεων</Link>
+      Αποτελέσματα διαγνωστικών εργαστηριακών εξετάσεων
     </ListItem>
     <ListItem>
-      <Link>Πτυχία τριτοβάθμιας εκπαίδευσης</Link>
+      Πτυχία τριτοβάθμιας εκπαίδευσης
     </ListItem>
     <ListItem>
-      <Link>Υπεύθυνη Δήλωση / Εξουσιοδότηση / Γνήσιο Υπογραφής</Link>
+      Υπεύθυνη Δήλωση / Εξουσιοδότηση / Γνήσιο Υπογραφής
     </ListItem>
   </List>
 );

package/src/content/List/index.mdx

@@ -3,10 +3,6 @@ id: list
 title: List
 ---
 
-```bash
-import List from '@digigov/ui/content/List';
-```
-
 ## How to use
 
 ### Default
@@ -39,4 +35,6 @@ import List from '@digigov/ui/content/List';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="List" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["List", "ListItem"]} />

package/src/content/SafeHTML/index.tsx

@@ -26,7 +26,7 @@ const elementClassNameMapping = {
 };
 
 if (typeof window !== 'undefined') {
-  DomPurify.addHook('afterSanitizeAttributes', function (node) {
+  DomPurify.addHook('afterSanitizeAttributes', function(node) {
     if (node.tagName.toLowerCase() in elementClassNameMapping) {
       node.setAttribute(
         'class',
@@ -73,7 +73,7 @@ export const SafeHTML = ({
   content,
   tags,
   Tag = 'span',
-  style = {},
+  ...props
 }: SafeHTMLProps) => {
   if (tags) {
     tags.push(...defaultTags);
@@ -89,11 +89,10 @@ export const SafeHTML = ({
   return (
     <Tag
       // @ts-ignore
-      style={{ whiteSpace: 'break-spaces', ...style }}
-      className="ds-body"
       dangerouslySetInnerHTML={{
         __html: parsedHTML,
       }}
+      {...props}
     />
   );
 };

package/src/content/StepNav/index.mdx

@@ -7,10 +7,6 @@ title: 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
@@ -21,10 +17,37 @@ import StepNav from '@digigov/ui/content/StepNav';
   story="Default.tsx"
 />
 
-### With hints
+### StepNav with hints
 
 <Story
   packageName="@digigov/ui"
   component="content/StepNav"
   story="WithHints.tsx"
 />
+
+### StepNav with dense
+
+<Story
+  packageName="@digigov/ui"
+  component="content/StepNav"
+  story="Dense.tsx"
+/>
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  [
+    "StepNav",
+    "StepNavControls", 
+    "StepNavList",
+    "StepNavListItem",
+    "StepNavAccordion",
+    "StepNavAccordionSummary",
+    "StepNavAccordionSummaryHeading",
+    "StepNavCircleNumber",
+    "StepNavAccordionHeadingTitle",
+    "StepNavAccordionHeadingText",
+    "StepNavAccordionContent"
+  ]} />

package/src/content/SummaryList/index.mdx

@@ -7,10 +7,6 @@ title: SummaryList
 
 Use the summary list to summarise information, for example, a user’s responses at the end of a form.
 
-```bash
-import SummaryList from '@digigov/ui/content/SummaryList';
-```
-
 ## How to use
 
 <Story
@@ -43,4 +39,13 @@ If you do not include actions in your summary list and it would be better for yo
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="SummaryList" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  ["SummaryList",
+  "SummaryListItem",
+  "SummaryListItemAction",
+  "SummaryListItemKey",
+  "SummaryListItemValue"
+  ]
+} />

package/src/content/Table/index.mdx

@@ -5,19 +5,6 @@ title: Table
 
 # Table
 
-```bash
-import {
-  TableContainer,
-  Table,
-  TableCaption,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableHeadCell,
-  TableDataCell,
-} from '@digigov/ui/content/Table';
-```
-
 ## How to use
 
 <Story
@@ -109,4 +96,16 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Table](https://ww
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Table" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "TableContainer",
+  "Table",
+  "TableCaption",
+  "TableHead",
+  "TableRow",
+  "TableBody",
+  "TableHeadCell",
+  "TableDataCell"
+  ]
+} />

package/src/content/Table/index.tsx

@@ -48,12 +48,12 @@ export const TableSortLabel = React.forwardRef<
           <CaretIcon
             direction={'up'}
             size="sm"
-            variant={direction === 1 ? 'dark' : 'gray'}
+            color={direction === 1 ? 'dark' : 'gray'}
           />
           <CaretIcon
             direction={'down'}
             size="sm"
-            variant={direction === -1 ? 'dark' : 'gray'}
+            color={direction === -1 ? 'dark' : 'gray'}
           />
         </TableSortIconContainer>
       </DropdownButton>

package/src/content/TaskList/index.mdx

@@ -7,10 +7,6 @@ title: 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
@@ -23,4 +19,12 @@ import TaskList from '@digigov/ui/content/TaskList';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="TaskList" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "TaskList",
+  "TaskListItem",
+  "TaskListItemHeading",
+  "TaskListItemContent",
+  "TaskListItemTag"
+  ]} /> 

package/src/content/Timeline/index.mdx

@@ -9,10 +9,6 @@ A timeline is a useful way to display a whole range of information and/or data p
 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
@@ -25,4 +21,13 @@ import Timeline from '@digigov/ui/content/Timeline';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Timeline" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Timeline",
+  "TimelineItem",
+  "TimelineHeading",
+  "TimelineContent",
+  "TimelineActions",
+  ]} /> 
+

package/src/feedback/CopyToClipboard/index.mdx

@@ -3,10 +3,6 @@ id: copy-to-clipboard
 title: CopyToClipboard
 ---
 
-```bash
-import CopyToClipboard from '@digigov/ui/feedback/CopyToClipboard';
-```
-
 ## How to use
 
 ### Default
@@ -27,4 +23,6 @@ import CopyToClipboard from '@digigov/ui/feedback/CopyToClipboard';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="CopyToClipboard" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["CopyToClipboardContainer"]} /> 

package/src/feedback/ErrorSummary/index.mdx

@@ -9,10 +9,6 @@ Use this component at the top of a page to summarise any errors a user has made.
 
 When a user makes an error, you must show both an error summary and an error message next to each answer that contains an error.
 
-```bash
-import ErrorSummary from '@digigov/ui/feedback/ErrorSummary';
-```
-
 ## How to use
 
 <Story
@@ -53,4 +49,6 @@ For questions that require a user to select one or more options from a list usin
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="ErrorSummary" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["ErrorSummary"]} /> 

package/src/feedback/NotificationBanner/index.mdx

@@ -9,16 +9,15 @@ This component is currently experimental because more research is needed to vali
 
 Use a notification banner to tell the user about something they need to know about, but that’s not directly related to the page content.
 
-```bash
-import NotificationBanner from '@digigov/ui/feedback/NotificationBanner';
-```
-
 ## How to use
 
 Use a ‘neutral’ blue notification banner if the user needs to know about a problem with the service as a whole.
 
 Use a ‘neutral’ notification banner if the user needs to know about something that’s happening elsewhere in the service.
 
+## How to use
+
+### Default NotificationBanner
 <Story
   packageName="@digigov/ui"
   component="feedback/NotificationBanner"
@@ -27,12 +26,22 @@ Use a ‘neutral’ notification banner if the user needs to know about somethin
 
 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.
 
+### Success NotificationBanner
 <Story
   packageName="@digigov/ui"
   component="feedback/NotificationBanner"
   story="Success.tsx"
 />
 
+### Dense NotificationBanner
+<Story
+  packageName="@digigov/ui"
+  component="feedback/NotificationBanner"
+  story="Dense.tsx"
+/>
+
 ## API
 
-<PropTypes packageName="@digigov/ui" component="NotificationBanner" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["NotificationBannerContainer","NotificationBannerContent","NotificationBannerHeader","NotificationBannerHeading","NotificationBannerLink"]} /> 

package/src/feedback/PhaseBanner/index.mdx

@@ -7,14 +7,12 @@ title: PhaseBanner
 
 Use the phase banner component to show users your service is still being worked on.
 
-```bash
-import PhaseBanner from '@digigov/ui/feedback/PhaseBanner';
-```
-
 ## How to use
 
 Your banner must be directly under the blue GOV.GR header and colour bar.
 
+### Default
+
 <Story
   packageName="@digigov/ui"
   component="feedback/PhaseBanner"
@@ -31,4 +29,9 @@ Your banner must be directly under the blue GOV.GR header and colour bar.
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="PhaseBanner" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "PhaseBanner",
+  "PhaseBannerTag",
+  "PhaseBannerText"]} /> 

package/src/feedback/WarningText/index.mdx

@@ -5,15 +5,13 @@ title: WarningText
 
 # WarningText
 
-```bash
-import WarningText from '@digigov/ui/feedback/WarningText';
-```
-
 ## How to use
 
 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.
 
+### Default
+
 <Story
   packageName="@digigov/ui"
   component="feedback/WarningText"
@@ -22,4 +20,6 @@ This will be used by screen-readers.
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="WarningText" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["WarningText"]} /> 

package/src/form/AutoComplete/AutoComplete.stories.js

@@ -5,8 +5,11 @@ export default {
   displayName: 'AutoComplete',
 };
 export * from '@digigov/ui/form/AutoComplete/__stories__/Default';
+export * from '@digigov/ui/form/AutoComplete/__stories__/Multiple';
+export * from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithDefaultValues';
+export * from '@digigov/ui/form/AutoComplete/__stories__/MultipleShowingTwoSelected';
+export * from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithMinLength';
 export * from '@digigov/ui/form/AutoComplete/__stories__/WithAutoSelect';
-export * from '@digigov/ui/form/AutoComplete/__stories__/WithInLine';
 export * from '@digigov/ui/form/AutoComplete/__stories__/WithDefaultValue';
 export * from '@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder';
 export * from '@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues';

package/src/form/AutoComplete/AutoComplete.stories.playwright.json

@@ -0,0 +1,33 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-form-autocomplete--multiple": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div>fieldset>div>div:nth-child(2)>button"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div>fieldset>div>div:nth-child(2)>ul:nth-child(4)>div>li:nth-child(3)"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div>fieldset>div>div:nth-child(2)>button"
+              }
+            }
+          ],
+          "id": "SP0dXbHKOZl7",
+          "title": "show chip"
+        }
+      ]
+    }
+  }
+}

package/src/form/AutoComplete/Status/index.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import AutoCompleteStatus from '@digigov/react-core/AutoCompleteStatus';
-import AutoCompleteStatusWrapper from '@digigov/react-core/AutoCompleteStatusWrapper';
+import AutoCompleteStatusContainer from '@digigov/react-core/AutoCompleteStatusContainer';
 
 const debounce = function (
   func: () => void,
@@ -21,6 +21,7 @@ const debounce = function (
     clearTimeout(timeout);
     timeout = setTimeout(later, wait);
     if (callNow) func.apply(context, args);
+    return timeout;
   };
 };
 const statusDebounceMillis = 1400;
@@ -72,7 +73,10 @@ export default class Status extends Component<StatusProps, StateProps> {
     silenced: false,
   };
   debounceStatusUpdate: () => void;
-
+  lastDebounceCall: any;
+  componentWillUnmount(): void {
+    clearTimeout(this.lastDebounceCall);
+  }
   UNSAFE_componentWillMount() {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const that = this;
@@ -124,19 +128,19 @@ export default class Status extends Component<StatusProps, StateProps> {
       content = tResults?.(length, contentSelectedOption);
     }
 
-    this.debounceStatusUpdate();
+    this.lastDebounceCall = this.debounceStatusUpdate();
 
     return (
-      <AutoCompleteStatusWrapper>
+      <AutoCompleteStatusContainer>
         <AutoCompleteStatus id={id + '__status--A'}>
           {!silenced && debounced && bump ? content : ' '}
         </AutoCompleteStatus>
         <AutoCompleteStatus id={id + '__status--B'}>
           {!silenced && debounced && !bump ? content : ' '}
         </AutoCompleteStatus>
-      </AutoCompleteStatusWrapper>
+      </AutoCompleteStatusContainer>
     );
   }
 }
 
-export { AutoCompleteStatusWrapper, AutoCompleteStatus };
+export { AutoCompleteStatusContainer, AutoCompleteStatus };

package/src/form/AutoComplete/__stories__/Multiple.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { AutoComplete } from '@digigov/ui/form/AutoComplete';
+import { suggest } from '@digigov/ui/form/AutoComplete/utils';
+import { Button } from '@digigov/ui/form/Button';
+import { FieldContainer, Fieldset } from '@digigov/ui/form/FieldContainer';
+
+export const Multiple = () => (
+  <div>
+    <FieldContainer>
+      <Fieldset marginBottom={4}>
+        <AutoComplete source={suggest} multiple width="50%" id="multiple-select-default" />
+      </Fieldset>
+    </FieldContainer>
+    <Button>Υποβολή</Button>
+  </div>
+);
+
+export default Multiple;

package/src/form/AutoComplete/__stories__/{WithInLine.tsx → MultipleShowingTwoSelected.tsx}

@@ -4,18 +4,13 @@ import { suggest } from '@digigov/ui/form/AutoComplete/utils';
 import { Button } from '@digigov/ui/form/Button';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 
-export const WithInLine = () => (
+export const MultipleShowingTwoSelected = () => (
   <div>
     <FieldContainer>
-      <AutoComplete
-        source={suggest}
-        autoselect={true}
-        displayMenu="inline"
-        id="govgr"
-      />
+      <AutoComplete source={suggest} multiple width='75%' id="multiple-showing-two-selected" numberOfSelected={2} />
     </FieldContainer>
     <Button>Υποβολή</Button>
   </div>
 );
 
-export default WithInLine;
+export default MultipleShowingTwoSelected;

package/src/form/AutoComplete/__stories__/MultipleWithDefaultValues.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { AutoComplete } from '@digigov/ui/form/AutoComplete';
+import { suggest } from '@digigov/ui/form/AutoComplete/utils';
+import { Button } from '@digigov/ui/form/Button';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+
+export const MultipleWithDefaultValues = () => (
+  <div>
+    <FieldContainer>
+      <AutoComplete source={suggest} multiple defaultValue={['Ελλάδα', 'Ιταλία']} width="50%" id="govgr" />
+    </FieldContainer>
+    <Button>Υποβολή</Button>
+  </div>
+);
+
+export default MultipleWithDefaultValues;

package/src/form/AutoComplete/__stories__/MultipleWithMinLength.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { AutoComplete } from '@digigov/ui/form/AutoComplete';
+import { suggest } from '@digigov/ui/form/AutoComplete/utils';
+import { Button } from '@digigov/ui/form/Button';
+import { FieldContainer, Fieldset } from '@digigov/ui/form/FieldContainer';
+import Paragraph from '@digigov/ui/typography/Paragraph';
+
+export const MultipleWithMinLength = () => (
+  <div>
+    <Paragraph>
+      Εδώ, ο ελάχιστος αριθμός χαρακτήρων που πρέπει να
+      εισαχθεί ώστε να αρχίσει να φιλτράρεται η αναζήτηση είναι 2.
+    </Paragraph>
+    <FieldContainer>
+      <Fieldset marginBottom={4}>
+        <AutoComplete
+          source={suggest}
+          multiple
+          minLength={2}
+          width="50%"
+          id="multiple-select-default"
+        />
+      </Fieldset>
+    </FieldContainer>
+    <Button>Υποβολή</Button>
+  </div>
+);
+
+export default MultipleWithMinLength;

package/src/form/AutoComplete/__stories__/WithShowAllValues.tsx

@@ -10,7 +10,6 @@ export const WithShowAllValues = () => (
       <AutoComplete
         source={suggest}
         autoselect={true}
-        showAllValues
         id="govgr"
       />
     </FieldContainer>