@digigov/ui 2.0.0-13876dba → 2.0.0-16fbe090

package/src/content/Table/__stories__/UsingHighlights.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell,
+} from '@digigov/ui/content/Table';
+
+const data = {
+  title: 'Χρήστες',
+  labels: {
+    name: 'Ονοματεπώνυμο',
+    role: 'Ρόλος',
+    email: 'Email',
+  },
+  content: [
+    {
+      name: 'Μάριος Μενεξές',
+      role: 'Χειριστής',
+      email: 'marios@mail.com',
+    },
+    {
+      name: 'Καλλιόπη Παπαδοπούλου',
+      role: 'Χειριστής',
+      email: 'kalliopi@mail.com',
+    },
+    {
+      name: 'Μαρία Φλούπη',
+      role: 'Διαχειριστής',
+      email: 'maria@mail.com',
+    },
+  ],
+};
+
+export const UsingHighlights = (_: any) => {
+  return (
+    <TableContainer>
+      <Table stacked="sm">
+        {data && (
+          <>
+            <TableCaption>{data.title}</TableCaption>
+            <TableHead>
+              <TableRow>
+                {data.labels &&
+                  Object.keys(data.labels).map((key) => (
+                    <TableHeadCell key={key}>{data.labels[key]}</TableHeadCell>
+                  ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {data.content &&
+                data.content.map((item, index) => (
+                  <TableRow key={index}>
+                    <TableDataCell
+                      data-label={data.labels.name}
+                      highlight={index === 2 ? 'error' : undefined}
+                    >
+                      {item.name}
+                    </TableDataCell>
+                    <TableDataCell
+                      data-label={data.labels.role}
+                      highlight={index === 1 ? 'warning' : undefined}
+                    >
+                      {item.role}
+                    </TableDataCell>
+                    <TableDataCell data-label={data.labels.email}>
+                      {item.email}
+                    </TableDataCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </>
+        )}
+      </Table>
+    </TableContainer>
+  );
+};
+export default UsingHighlights;

package/src/content/Table/doc.mdx

@@ -7,57 +7,57 @@ title: Table
 
 ## How to use
 
-<code src="@digigov/ui/content/Table/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/Default.tsx" />
 
 ### With dark header
 
-<code src="@digigov/ui/content/Table/__stories__/DarkVariant.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/DarkVariant.tsx" />
 
 ### With captions
 
 Use the `<TableCaption>` element to describe a table in the same way you would use a heading. A caption helps users find, navigate and understand tables.
 
-<code src="@digigov/ui/content/Table/__stories__/TableCaptions.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/TableCaptions.tsx" />
 
 ### With numeric values
 
-<code src="@digigov/ui/content/Table/__stories__/NumericDataType.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/NumericDataType.tsx" />
 
 ### With zebra rows
 
-<code src="@digigov/ui/content/Table/__stories__/ZebraProp.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/ZebraProp.tsx" />
 
 ### With primary or secondary colored rows
 
 The prop `color='primary'` or `color='secondary'` is only functional when Table component has `variant='default'`.
 
-<code src="@digigov/ui/content/Table/__stories__/RowColors.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/RowColors.tsx" />
 
 ### With vertical lines
 
-<code src="@digigov/ui/content/Table/__stories__/VerticalBorders.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/VerticalBorders.tsx" />
 
 ### With dense style
 
-<code src="@digigov/ui/content/Table/__stories__/Dense.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/Dense.tsx" />
 
 ### Custom column widths
 
-<code src="@digigov/ui/content/Table/__stories__/DefinedWidth.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/DefinedWidth.tsx" />
 
 ### Without data (empty table)
 
-<code src="@digigov/ui/content/Table/__stories__/NoData.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/NoData.tsx" />
 
 ### With loader
 
-<code src="@digigov/ui/content/Table/__stories__/WithLoader.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/WithLoader.tsx" />
 
 ### With stack style
 
 Use this prop when you want to display a more user friendly table for small screens.
 
-<code src="@digigov/ui/content/Table/__stories__/Stacked.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/Stacked.tsx" />
 
 ## Accessibility
 

package/src/content/Table/index.test.tsx

@@ -13,6 +13,7 @@ import { NumericDataType } from '@digigov/ui/content/Table/__stories__/NumericDa
 import { RowColors } from '@digigov/ui/content/Table/__stories__/RowColors';
 import { Stacked } from '@digigov/ui/content/Table/__stories__/Stacked';
 import { TableCaptions } from '@digigov/ui/content/Table/__stories__/TableCaptions';
+import { UsingHighlights } from '@digigov/ui/content/Table/__stories__/UsingHighlights';
 import { VerticalBorders } from '@digigov/ui/content/Table/__stories__/VerticalBorders';
 import { VerticalHeaders } from '@digigov/ui/content/Table/__stories__/VerticalHeaders';
 import { WithFloatingScroll } from '@digigov/ui/content/Table/__stories__/WithFloatingScroll';
@@ -62,6 +63,9 @@ test('renders the All Table variants', async ({ mount, page }) => {
     <TestVariant title="TableCaptions">
       <TableCaptions />
     </TestVariant>
+    <TestVariant title="UsingHighlights">
+      <UsingHighlights />
+    </TestVariant>
     <TestVariant title="VerticalBorders">
       <VerticalBorders />
     </TestVariant>

package/src/content/TaskList/doc.mdx

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

package/src/content/Timeline/doc.mdx

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

package/src/feedback/CopyToClipboard/doc.mdx

@@ -7,18 +7,18 @@ title: CopyToClipboard
 
 ## How to use
 
-<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/feedback/CopyToClipboard/__stories__/Default.tsx" />
 
 ### As banner
 
-<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Banner.tsx" />
+<code src="@digigov/ui/src/feedback/CopyToClipboard/__stories__/Banner.tsx" />
 
 ### With dense style
 
-<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Dense.tsx" />
+<code src="@digigov/ui/src/feedback/CopyToClipboard/__stories__/Dense.tsx" />
 
 ## API
 
 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

@@ -11,7 +11,7 @@ When a user makes an error, you must show both an error summary and an error mes
 
 ## How to use
 
-<code src="@digigov/ui/feedback/ErrorSummary/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/feedback/ErrorSummary/__stories__/Default.tsx" />
 
 ### Linking from the error summary to each answer
 
@@ -19,20 +19,20 @@ 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.
 
-<code src="@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToInput.tsx" />
+<code src="@digigov/ui/src/feedback/ErrorSummary/__stories__/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.
 
-<code src="@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToField.tsx" />
+<code src="@digigov/ui/src/feedback/ErrorSummary/__stories__/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.
 
-<code src="@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox.tsx" />
+<code src="@digigov/ui/src/feedback/ErrorSummary/__stories__/LinkedToCheckbox.tsx" />
 
 ## API
 
 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,24 +13,33 @@ 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" />
+<code src="@digigov/ui/src/feedback/NotificationBanner/__stories__/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.
 
 ### With success style
 
-<code src="@digigov/ui/feedback/NotificationBanner/__stories__/Success.tsx" />
+<code src="@digigov/ui/src/feedback/NotificationBanner/__stories__/Success.tsx" />
 
 ### With dense style
 
-<code src="@digigov/ui/feedback/NotificationBanner/__stories__/Dense.tsx" />
+<code src="@digigov/ui/src/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/src/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/PhaseBanner/doc.mdx

@@ -11,11 +11,11 @@ Use the phase banner component to show users your service is still being worked
 
 Your banner must be directly under the blue GOV.GR header and colour bar.
 
-<code src="@digigov/ui/feedback/PhaseBanner/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/feedback/PhaseBanner/__stories__/Default.tsx" />
 
 ### Underlined
 
-<code src="@digigov/ui/feedback/PhaseBanner/__stories__/Underlined.tsx" />
+<code src="@digigov/ui/src/feedback/PhaseBanner/__stories__/Underlined.tsx" />
 
 ## API
 

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/feedback/WarningText/doc.mdx

@@ -10,15 +10,15 @@ title: 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.
 
-<code src="@digigov/ui/feedback/WarningText/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/feedback/WarningText/__stories__/Default.tsx" />
 
 ### With dense style
 
-<code src="@digigov/ui/feedback/WarningText/__stories__/Dense.tsx" />
+<code src="@digigov/ui/src/feedback/WarningText/__stories__/Dense.tsx" />
 
 ### With assistive text
 
-<code src="@digigov/ui/feedback/WarningText/__stories__/AssistiveText.tsx" />
+<code src="@digigov/ui/src/feedback/WarningText/__stories__/AssistiveText.tsx" />
 
 ## API
 

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>