@digigov/ui 2.0.0-76ec20a0 → 2.0.0-7d765d3c

package/src/content/Accordion/Accordion.stories.jsx

@@ -31,7 +31,10 @@ export const WithControls = {
       >
         <AccordionSection open>
           <AccordionSectionSummary>
-            <AccordionSectionSummaryHeading aria-controls="content1">
+            <AccordionSectionSummaryHeading
+              aria-controls="content1"
+              variant={args.variant}
+            >
               {args.title}
             </AccordionSectionSummaryHeading>
             {args.hint > 0 && <Hint>{args.hintMessage}</Hint>}
@@ -45,6 +48,7 @@ export const WithControls = {
   },
   args: {
     title: 'Διαφορές με το δημόσιο',
+    variant: 'default',
     hint: true,
     hintMessage:
       'Δικαστικές και εξωδικαστικές διαφορές με το Δημόσιο, εκκαθάριση δικαστικών δαπανών κ.ά.',
@@ -58,6 +62,10 @@ export const WithControls = {
     title: {
       control: { type: 'text' },
     },
+    variant: {
+      options: ['default', 'arrows'],
+      control: { type: 'select' },
+    },
     hint: {
       control: { type: 'boolean' },
     },

package/src/content/Accordion/doc.mdx

@@ -11,11 +11,10 @@ The accordion component lets users show and hide sections of related content on
 
 ## How to use
 
-### Default Accordion
 
 <code src="@digigov/ui/content/Accordion/__stories__/Default.tsx" />
 
-### Accordion with Hints
+### With Hints
 
 Accordions hide content, so the labels need to be clear. If necessary, you can add a summary line to help users understand what is in the section.
 

package/src/content/Accordion/hooks.ts

@@ -34,7 +34,7 @@ export const useAccordion = ({
   singleOpen = false,
 }: UseAccordionProps = {}): UseAccordionReturn => {
   const sectionsRef = useRef<
-    Map<AccordionItemId, React.RefObject<HTMLDetailsElement>>
+    Map<AccordionItemId, React.RefObject<HTMLDetailsElement | null>>
   >(new Map());
   const [current, setCurrentOpen] = useState(
     defaultOpen ? { [defaultOpen]: true } : {}

package/src/content/Card/doc.mdx

@@ -12,55 +12,55 @@ When used correctly, Cards can help users to scan through vast amounts of inform
 
 <code src="@digigov/ui/content/Card/__stories__/Default.tsx" />
 
-#### Card with gray border color
+### With gray border color
 
 <code src="@digigov/ui/content/Card/__stories__/WithGrayBorder.tsx" />
 
-#### Card with dark border color
+### With dark border color
 
 <code src="@digigov/ui/content/Card/__stories__/WithDarkBorder.tsx" />
 
-### Card with top border
+### With top border
 
 You can set the color of the Card's top border. You can choose between dark and grey color respectively. By default the top border color is grey.
 
 <code src="@digigov/ui/content/Card/__stories__/WithDarkBorder.tsx" />
 
-#### Card with grey top border
+### With grey top border
 
 <code src="@digigov/ui/content/Card/__stories__/WithGrayTopBorder.tsx" />
 
-#### Card with dark top border
+### With dark top border
 
 <code src="@digigov/ui/content/Card/__stories__/WithDarkTopBorder.tsx" />
 
-### Card with divider
+### With divider
 
 <code src="@digigov/ui/content/Card/__stories__/WithDivider.tsx" />
 
-### Card with actions
+### With actions
 
 <code src="@digigov/ui/content/Card/__stories__/WithGroupButton.tsx" />
 
-#### Card with title link
+### With title link
 
 Cards can be used without an action button, but with a clickable title.
 
 <code src="@digigov/ui/content/Card/__stories__/WithLink.tsx" />
 
-#### Card with clickable content
+### With clickable content
 
 You can expand the clickable area of the link to fill Card's content.
 
 <code src="@digigov/ui/content/Card/__stories__/WithClickableContent.tsx" />
 
-#### Card with button or link
+### With button or link
 
 Cards also provides styles for actionable elements such as Buttons or Links.
 
 <code src="@digigov/ui/content/Card/__stories__/WithClickableLink.tsx" />
 
-#### Card with a group of actions
+### With a group of actions
 
 <code src="@digigov/ui/content/Card/__stories__/WithGroupButton.tsx" />
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import Chip from '@digigov/ui/content/Chip';
 
-export const Default = () => <Chip>Αθήνα</Chip>;
+export const Default = (_: any) => <Chip>Αθήνα</Chip>;
 
 export default Default;

package/src/content/Chip/doc.mdx

@@ -11,19 +11,19 @@ The Chip component can be used to represent small blocks of information.
 
 <code src="@digigov/ui/content/Chip/__stories__/Default.tsx" />
 
-### ClickableChip
+### Clickable Chip
 
 <code src="@digigov/ui/content/Chip/__stories__/ClickableChip.tsx" />
 
-### ClickableDeletableChip
+### Clickable and Deletable
 
 <code src="@digigov/ui/content/Chip/__stories__/ClickableDeletableChip.tsx" />
 
-### DeletableChip
+### Deletable Chip
 
 <code src="@digigov/ui/content/Chip/__stories__/DeletableChip.tsx" />
 
-### GroupOfChips
+### Group of Chips
 
 <code src="@digigov/ui/content/Chip/__stories__/GroupOfChips.tsx" />
 

package/src/content/List/__snapshots__/index.spec.tsx.snap

@@ -1,7 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the ErrorSummary with sample data 1`] = `
-<ForwardRef(List2)>
-  this is some random warning text
-</ForwardRef(List2)>
+Object {
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": Object {},
+  "key": null,
+  "props": Object {
+    "children": "this is some random warning text",
+  },
+  "type": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
+}
 `;

package/src/content/List/doc.mdx

@@ -9,15 +9,15 @@ title: List
 
 <code src="@digigov/ui/content/List/__stories__/Default.tsx" />
 
-### List with bullets
+### With bullets
 
 <code src="@digigov/ui/content/List/__stories__/BulletList.tsx" />
 
-### List with numbers
+### With numbers
 
 <code src="@digigov/ui/content/List/__stories__/NumberedList.tsx" />
 
-### List with extra space
+### With extra space
 
 <code src="@digigov/ui/content/List/__stories__/WithExtraSpace.tsx" />
 

package/src/content/SummaryList/SummaryList.stories.js

@@ -10,7 +10,7 @@ export default {
 import { SummaryListExample } from '@digigov/ui/content/SummaryList/__stories__/SummaryListExample';
 import doc from './doc.mdx?raw';
 
-export const Default = {
+export const WithControls = {
   args: {
     sm: 5,
     md: 4,
@@ -23,3 +23,7 @@ export const Default = {
     showActions: true,
   },
 };
+
+export { Default } from '@digigov/ui/content/SummaryList/__stories__/Default';
+export { WithActions } from '@digigov/ui/content/SummaryList/__stories__/WithActions';
+export { WithoutBorders } from '@digigov/ui/content/SummaryList/__stories__/WithoutBorders';

package/src/content/TaskList/doc.mdx

@@ -11,7 +11,7 @@ TaskList is a component that displays number of steps required to complete a pro
 
 <code src="@digigov/ui/content/TaskList/__stories__/Default.tsx" />
 
-## With dense style
+### With dense style
 
 <code src="@digigov/ui/content/TaskList/__stories__/Dense.tsx" />
 

package/src/content/Timeline/doc.mdx

@@ -13,7 +13,7 @@ User can better understand what has happened and also understand what the next s
 
 <code src="@digigov/ui/content/Timeline/__stories__/Default.tsx" />
 
-## With dense style
+### With dense style
 
 <code src="@digigov/ui/content/Timeline/__stories__/Dense.tsx" />
 

package/src/feedback/CopyToClipboard/doc.mdx

@@ -21,4 +21,4 @@ title: CopyToClipboard
 
 See below for a complete reference to all of the props available to the components mentioned here.
 
-<ComponentProps componentName={['CopyToClipboardContainer']} />{' '}
+<ComponentProps componentName={['CopyToClipboardContainer']} />

package/src/feedback/ErrorSummary/__snapshots__/index.spec.tsx.snap

@@ -1,7 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the ErrorSummary with sample data 1`] = `
-<ForwardRef(ErrorSummary2)>
-  this is some random warning text
-</ForwardRef(ErrorSummary2)>
+Object {
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": Object {},
+  "key": null,
+  "props": Object {
+    "children": "this is some random warning text",
+  },
+  "type": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
+}
 `;

package/src/feedback/ErrorSummary/doc.mdx

@@ -35,4 +35,4 @@ For questions that require a user to select one or more options from a list usin
 
 See below for a complete reference to all of the props  available to the components mentioned here.
 
-{/* <ComponentProps componentName={["ErrorSummary"]} />  */}
+<ComponentProps componentName={["ErrorSummary"]} /> 

package/src/feedback/NotificationBanner/NotificationBanner.stories.js

@@ -15,16 +15,23 @@ export default {
 
 export const WithControls = {
   args: {
+    variant: 'info',
+    dense: false,
     title: 'Ειδοποίηση',
     children: ' Σε 7 ημέρες θα μπορείτε να υποβάλετε την αίτηση.',
     link: {
       label: 'Προβολή αίτησης',
       href: '#',
     },
-    variant: 'info',
-    dense: false,
   },
   argTypes: {
+    variant: {
+      options: ['info', 'success', 'error'],
+      control: { type: 'select' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
     title: {
       control: { type: 'text' },
     },
@@ -34,13 +41,6 @@ export const WithControls = {
     link: {
       control: { type: 'object' },
     },
-    variant: {
-      options: ['info', 'success', 'error'],
-      control: { type: 'select' },
-    },
-    dense: {
-      control: { type: 'boolean' },
-    },
   },
   parameters: {
     controls: { exclude: ['ref'] },
@@ -50,3 +50,4 @@ export const WithControls = {
 export { Default } from '@digigov/ui/feedback/NotificationBanner/__stories__/Default';
 export { Success } from '@digigov/ui/feedback/NotificationBanner/__stories__/Success';
 export { Dense } from '@digigov/ui/feedback/NotificationBanner/__stories__/Dense';
+export { Expanded } from '@digigov/ui/feedback/NotificationBanner/__stories__/Expanded';

package/src/feedback/NotificationBanner/__snapshots__/index.spec.tsx.snap

@@ -1,23 +1,33 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the notification banner 1`] = `
-<NotificationBanner
-  title="Notification Banner Example"
->
-  this is a notification
-</NotificationBanner>
+Object {
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": Object {},
+  "key": null,
+  "props": Object {
+    "children": "this is a notification",
+    "title": "Notification Banner Example",
+  },
+  "type": [Function],
+}
 `;
 
 exports[`renders the notification banner with title and link 1`] = `
-<NotificationBanner
-  link={
-    Object {
+Object {
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": Object {},
+  "key": null,
+  "props": Object {
+    "children": "this is a notification",
+    "link": Object {
       "href": "/",
       "label": "This is a label",
-    }
-  }
-  title="Notification Banner Example"
->
-  this is a notification
-</NotificationBanner>
+    },
+    "title": "Notification Banner Example",
+  },
+  "type": [Function],
+}
 `;

package/src/feedback/NotificationBanner/__stories__/Expanded.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {
+  NotificationBannerContainer,
+  NotificationBannerHeader,
+  NotificationBannerContent,
+  NotificationBannerHeading,
+  NotificationBannerLink,
+} from '@digigov/ui/feedback/NotificationBanner';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+
+export const Expanded = (_: any) => (
+  <NotificationBannerContainer>
+    <NotificationBannerHeader>Ειδοποίηση</NotificationBannerHeader>
+    <NotificationBannerContent>
+      <NotificationBannerHeading>
+        Μπορείτε να συμβάλλετε στη βελτίωση των δημοσίων υπηρεσιών.
+      </NotificationBannerHeading>
+      <Paragraph>
+        Συμπληρώστε έως 24/5 το ερωτηματολόγιο στο{' '}
+        <NotificationBannerLink> axiologisi.ypes.gov.gr</NotificationBannerLink>
+        .
+      </Paragraph>
+    </NotificationBannerContent>
+  </NotificationBannerContainer>
+);
+
+export default Expanded;

package/src/feedback/NotificationBanner/doc.mdx

@@ -13,9 +13,6 @@ Use a notification banner to tell the user about something they need to know abo
 
 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
 
 <code src="@digigov/ui/feedback/NotificationBanner/__stories__/Default.tsx" />
 
@@ -29,8 +26,20 @@ You can also use a notification banner to tell the user about the outcome of som
 
 <code src="@digigov/ui/feedback/NotificationBanner/__stories__/Dense.tsx" />
 
-## API
+### Expanded
 
-See below for a complete reference to all of the props  available to the components mentioned here.
+<code src="@digigov/ui/feedback/NotificationBanner/__stories__/Expanded.tsx" />
+
+## API
 
-<ComponentProps componentName={["NotificationBannerContainer","NotificationBannerContent","NotificationBannerHeader","NotificationBannerHeading","NotificationBannerLink"]} /> 
+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/NotificationBanner/index.test.tsx

@@ -3,6 +3,7 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/ui/feedback/NotificationBanner/__stories__/Default';
 import { Dense } from '@digigov/ui/feedback/NotificationBanner/__stories__/Dense';
+import { Expanded } from '@digigov/ui/feedback/NotificationBanner/__stories__/Expanded';
 import { Success } from '@digigov/ui/feedback/NotificationBanner/__stories__/Success';
 
 test('renders the All NotificationBanner variants', async ({ mount, page }) => {
@@ -15,6 +16,9 @@ test('renders the All NotificationBanner variants', async ({ mount, page }) => {
     <TestVariant title="Dense">
       <Dense />
     </TestVariant>
+    <TestVariant title="Expanded">
+      <Expanded />
+    </TestVariant>
     <TestVariant title="Success">
       <Success />
     </TestVariant>

package/src/feedback/PhaseBanner/PhaseBanner.stories.jsx

@@ -31,8 +31,8 @@ export const WithControls = {
     );
   },
   args: {
-    tag: 'ALPHA',
     underline: true,
+    tag: 'ALPHA',
   },
   argTypes: {
     underline: {

package/src/feedback/WarningText/__snapshots__/index.spec.tsx.snap

@@ -1,7 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the WarningText with sample data 1`] = `
-<ForwardRef(WarningText2)>
-  this is some random warning text
-</ForwardRef(WarningText2)>
+Object {
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": Object {},
+  "key": null,
+  "props": Object {
+    "children": "this is some random warning text",
+  },
+  "type": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
+}
 `;

package/src/form/AutoComplete/AutoComplete.stories.jsx

@@ -15,11 +15,14 @@ export const WithControls = {
   render: (args) => {
     return (
       <AutoComplete
+        defaultValue={args.defaultValue}
         key={args.multiple ? 'multiple' : 'single'}
         id={args.id}
         width={args.width}
         multiple={args.multiple}
         autoselect={args.autoselect}
+        placeholder={args.placeholder}
+        hint={args.hint}
         minLength={args.minLength}
         source={suggest}
       />
@@ -28,8 +31,10 @@ export const WithControls = {
   args: {
     width: 'full',
     id: 'autocomplete-id',
-    multiple: false,
     autoselect: false,
+    multiple: false,
+    hint: false,
+    placeholder: '',
     minLength: 2,
     numberOfSelected: 2,
     defaultValue: '',
@@ -44,12 +49,21 @@ export const WithControls = {
     id: {
       control: { type: 'text' },
     },
+    autoselect: {
+      control: { type: 'boolean' },
+      if: { arg: 'multiple', eq: false },
+    },
     multiple: {
       control: { type: 'boolean' },
+      if: { arg: 'autoselect', eq: false },
     },
-    autoselect: {
+    hint: {
       control: { type: 'boolean' },
     },
+    placeholder: {
+      control: { type: 'text' },
+      if: { arg: 'hint', eq: false },
+    },
     minLength: {
       control: { type: 'number' },
     },
@@ -58,7 +72,7 @@ export const WithControls = {
       if: { arg: 'multiple', eq: true },
     },
     defaultValue: {
-      control: { type: 'string' },
+      control: { type: 'text' },
     },
   },
   parameters: {
@@ -72,7 +86,6 @@ export const WithControls = {
         'tAssistiveHint',
         'templates',
         'name',
-        'placeholder',
         'onConfirm',
         'confirmOnBlur',
         'required',
@@ -89,6 +102,8 @@ export { MultipleShowingTwoSelected } from '@digigov/ui/form/AutoComplete/__stor
 export { MultipleWithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithMinLength';
 export { WithAutoSelect } from '@digigov/ui/form/AutoComplete/__stories__/WithAutoSelect';
 export { WithDefaultValue } from '@digigov/ui/form/AutoComplete/__stories__/WithDefaultValue';
+export { WithCustomValue } from '@digigov/ui/form/AutoComplete/__stories__/WithCustomValue';
+export { WithHint } from '@digigov/ui/form/AutoComplete/__stories__/WithHint';
 export { WithPlaceHolder } from '@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder';
 export { WithShowAllValues } from '@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues';
 export { WithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/WithMinLength';

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, type JSX } from 'react';
 import AutoCompleteStatus from '@digigov/react-core/AutoCompleteStatus';
 import AutoCompleteStatusContainer from '@digigov/react-core/AutoCompleteStatusContainer';
 

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

@@ -7,23 +7,7 @@ import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 export const WithAutoSelect = (_: any) => (
   <div>
     <FieldContainer>
-      <AutoComplete
-        source={suggest}
-        autoselect={true}
-        id="govgr"
-        // tStatusResults={(x, y) => {
-        //   return `Results x: ${x} y: ${y}`;
-        // }}
-        templates={{
-          suggestion: (value) => {
-            return '--> ' + value;
-          },
-          inputValue: (value) => {
-            return value ? 'Χώρα: ' + value : '';
-          },
-        }}
-        tNoResults={() => 'Δεν υπάρχουν αποτελέσματα'}
-      />
+      <AutoComplete source={suggest} autoselect={true} id="govgr" />
     </FieldContainer>
     <Button>Υποβολή</Button>
   </div>

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

@@ -0,0 +1,28 @@
+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 WithCustomValue = () => (
+  <div>
+    <FieldContainer>
+      <AutoComplete
+        source={suggest}
+        id="govgr"
+        templates={{
+          suggestion: (value) => {
+            return '--> ' + value;
+          },
+          inputValue: (value) => {
+            return value ? 'Χώρα: ' + value : '';
+          },
+        }}
+        tNoResults={() => 'Δεν υπάρχουν αποτελέσματα'}
+      />
+    </FieldContainer>
+    <Button>Υποβολή</Button>
+  </div>
+);
+
+export default WithCustomValue;

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

@@ -7,12 +7,7 @@ import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 export const WithDefaultValue = (_: any) => (
   <div>
     <FieldContainer>
-      <AutoComplete
-        source={suggest}
-        autoselect={true}
-        defaultValue="Γερμανία"
-        id="govgr"
-      />
+      <AutoComplete source={suggest} defaultValue="Γερμανία" id="govgr" />
     </FieldContainer>
     <Button>Υποβολή</Button>
   </div>

package/src/form/AutoComplete/__stories__/WithHint.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 WithHint = () => (
+  <div>
+    <FieldContainer>
+      <AutoComplete source={suggest} id="govgr" hint={true} />
+    </FieldContainer>
+    <Button>Υποβολή</Button>
+  </div>
+);
+
+export default WithHint;