@digigov/ui 1.2.0-a7ffb5dc → 2.0.0-0edebf87

package/src/feedback/PhaseBanner/index.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/feedback/PhaseBanner/__stories__/Default';
+import { Underlined } from '@digigov/ui/feedback/PhaseBanner/__stories__/Underlined';
+
+test('renders the All PhaseBanner variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Underlined">
+      <Underlined />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/feedback/PhaseBanner/interaction.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { Default } from '@digigov/ui/feedback/PhaseBanner/__stories__/Default';
+
+test('renders the Default pressing Tab', async ({ mount, page }) => {
+  await mount(
+    <Default />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.keyboard.press("Tab");
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

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/feedback/WarningText/index.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { AssistiveText } from '@digigov/ui/feedback/WarningText/__stories__/AssistiveText';
+import { Default } from '@digigov/ui/feedback/WarningText/__stories__/Default';
+import { Dense } from '@digigov/ui/feedback/WarningText/__stories__/Dense';
+
+test('renders the All WarningText variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="AssistiveText">
+      <AssistiveText />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Dense">
+      <Dense />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

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>

package/src/form/AutoComplete/index.mdx

@@ -8,19 +8,9 @@ through, select from large collections of options and help services get more con
 
 ## Usage
 
-### How to import
-
-```bash
-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
 
@@ -30,14 +20,6 @@ import AutoComplete from '@digigov/ui/form/AutoComplete';
   story="WithAutoSelect.tsx"
 />
 
-### AutoComplete with inline style
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithInLine.tsx"
-/>
-
 ### AutoComplete with default value
 
 <Story
@@ -74,4 +56,15 @@ This is the minimum number of characters that should be entered before the autoc
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="AutoComplete" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  ["AutoCompleteWrapper",
+  "AutoCompleteStatus",
+  "AutoCompleteStatusWrapper",
+  "AutoCompleteInputTypeahead",
+  "AutoCompleteInput",
+  "AutoCompleteResultList",
+  "AutoCompleteResultListItem",
+  "AutoCompleteAssistiveHint"
+  ]} /> 

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/form/AutoComplete/__stories__/Default';
+import { Multiple } from '@digigov/ui/form/AutoComplete/__stories__/Multiple';
+import { MultipleShowingTwoSelected } from '@digigov/ui/form/AutoComplete/__stories__/MultipleShowingTwoSelected';
+import { MultipleWithDefaultValues } from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithDefaultValues';
+import { MultipleWithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithMinLength';
+import { WithAutoSelect } from '@digigov/ui/form/AutoComplete/__stories__/WithAutoSelect';
+import { WithDefaultValue } from '@digigov/ui/form/AutoComplete/__stories__/WithDefaultValue';
+import { WithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/WithMinLength';
+import { WithPlaceHolder } from '@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder';
+import { WithShowAllValues } from '@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues';
+
+test('renders the All AutoComplete variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Multiple">
+      <Multiple />
+    </TestVariant>
+    <TestVariant title="MultipleShowingTwoSelected">
+      <MultipleShowingTwoSelected />
+    </TestVariant>
+    <TestVariant title="MultipleWithDefaultValues">
+      <MultipleWithDefaultValues />
+    </TestVariant>
+    <TestVariant title="MultipleWithMinLength">
+      <MultipleWithMinLength />
+    </TestVariant>
+    <TestVariant title="WithAutoSelect">
+      <WithAutoSelect />
+    </TestVariant>
+    <TestVariant title="WithDefaultValue">
+      <WithDefaultValue />
+    </TestVariant>
+    <TestVariant title="WithMinLength">
+      <WithMinLength />
+    </TestVariant>
+    <TestVariant title="WithPlaceHolder">
+      <WithPlaceHolder />
+    </TestVariant>
+    <TestVariant title="WithShowAllValues">
+      <WithShowAllValues />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+