@digigov/ui 2.0.0-87b6232d → 2.0.0-8bbad051

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

@@ -36,7 +36,7 @@ const data = {
   ],
 };
 
-export const DefinedWidth = () => {
+export const DefinedWidth = (_: any) => {
   return (
     <TableContainer>
       <Table>

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

@@ -98,7 +98,7 @@ const data = [
   },
 ];
 
-export const Dense = () => {
+export const Dense = (_: any) => {
   return (
     <TableContainer border>
       <Table dense>

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

@@ -72,7 +72,7 @@ const data = {
   ],
 };
 
-export const Full = () => {
+export const Full = (_: any) => {
   return (
     <TableContainer>
       <Table

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

@@ -57,7 +57,7 @@ const data = {
   ],
 };
 
-export const MultipleProps = () => {
+export const MultipleProps = (_: any) => {
   return (
     <TableContainer>
       <Table variant="zebra" headerVariant="dark" verticalBorders>

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

@@ -11,7 +11,7 @@ import {
   TableNoDataRow,
 } from '@digigov/ui/content/Table';
 
-export const NoData = () => {
+export const NoData = (_: any) => {
   return (
     <TableContainer>
       <Table>

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

@@ -50,7 +50,7 @@ const data = {
   ],
 };
 
-export const NumericDataType = () => {
+export const NumericDataType = (_: any) => {
   return (
     <TableContainer>
       <Table>

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

@@ -53,7 +53,7 @@ const data = {
   ],
 };
 
-export const RowColors = () => {
+export const RowColors = (_: any) => {
   return (
     <TableContainer>
       <Table variant="default">

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

@@ -36,7 +36,7 @@ const data = {
   ],
 };
 
-export const Stacked = () => {
+export const Stacked = (_: any) => {
   return (
     <TableContainer>
       <Table stacked="always">

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { TableContainer, Table, TableCaption } from '@digigov/ui/content/Table';
 
-export const TableCaptions = () => {
+export const TableCaptions = (_: any) => {
   return (
     <TableContainer>
       <Table>

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/__stories__/VerticalBorders.tsx

@@ -41,7 +41,7 @@ const data = {
   ],
 };
 
-export const VerticalBorders = () => {
+export const VerticalBorders = (_: any) => {
   return (
     <TableContainer>
       <Table verticalBorders>

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

@@ -36,7 +36,7 @@ const data = {
   ],
 };
 
-export const VerticalHeaders = () => {
+export const VerticalHeaders = (_: any) => {
   return (
     <TableContainer>
       <Table>

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

@@ -53,7 +53,7 @@ const data = new Array(20).fill({
   last_login_agent: 'Firefox',
 });
 
-export const WithFloatingScroll = () => {
+export const WithFloatingScroll = (_: any) => {
   return (
     <>
       <TableFloatingScroll>

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

@@ -41,7 +41,7 @@ const data = {
   ],
 };
 
-export const WithLoader = () => {
+export const WithLoader = (_: any) => {
   const [tableData, setTableData] = useState<any | null>();
   const [loading, setLoading] = useState(false);
   setTimeout(() => {

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

@@ -101,7 +101,7 @@ const data = [
   },
 ];
 
-export const WithSortFilters = () => {
+export const WithSortFilters = (_: any) => {
   const { sortedData, setSortedField, field, direction } = useSort(data);
 
   return (

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

@@ -41,7 +41,7 @@ const data = {
   ],
 };
 
-export const ZebraProp = () => {
+export const ZebraProp = (_: any) => {
   return (
     <TableContainer>
       <Table variant="zebra">

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/TaskList.stories.js

@@ -1,9 +1,12 @@
 import TaskList from '@digigov/ui/content/TaskList';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov UI/content/TaskList',
   description:
     'Only use a task list page for longer transactions involving multiple tasks that users may need to complete over a number of sessions.',
   component: TaskList,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'TaskList',
 };
 export { Default } from '@digigov/ui/content/TaskList/__stories__/Default';

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

@@ -66,7 +66,7 @@ const fields = [
   },
 ];
 
-export const Default = () => (
+export const Default = (_: any) => (
   <div>
     <TaskList>
       {fields &&

package/src/content/TaskList/__stories__/Dense.tsx

@@ -66,7 +66,7 @@ const fields = [
   },
 ];
 
-export const Dense = () => (
+export const Dense = (_: any) => (
   <div>
     <TaskList dense>
       {fields &&

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/Timeline.stories.js

@@ -1,9 +1,12 @@
 import Timeline from '@digigov/ui/content/Timeline';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov UI/content/Timeline',
   description:
     'Use this pattern to show a list of entries in the order they happened.',
   component: Timeline,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'Timeline',
 };
 export { Default } from '@digigov/ui/content/Timeline/__stories__/Default';

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

@@ -127,7 +127,7 @@ const data = [
   },
 ];
 
-export const Default = () => (
+export const Default = (_: any) => (
   <Timeline>
     {data &&
       data.map((field, index) => {

package/src/content/Timeline/__stories__/Dense.tsx

@@ -127,7 +127,7 @@ const data = [
   },
 ];
 
-export const Dense = () => (
+export const Dense = (_: any) => (
   <Timeline dense>
     {data &&
       data.map((field, index) => {

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/CopyToClipboard.stories.jsx

@@ -1,10 +1,13 @@
 import React from 'react';
+import doc from './doc.mdx?raw';
 import { CopyToClipboard } from '@digigov/ui/feedback/CopyToClipboard';
 import { Button } from '@digigov/ui/form/Button';
 
 export default {
   title: 'Digigov UI/feedback/CopyToClipboard',
   component: CopyToClipboard,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'CopyToClipboard',
 };
 

package/src/feedback/CopyToClipboard/__stories__/Banner.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { CopyToClipboard } from '@digigov/ui/feedback/CopyToClipboard';
 import { Button } from '@digigov/ui/form/Button';
 
-export const Banner = () => {
+export const Banner = (_: any) => {
   return (
     <CopyToClipboard
       text="copied-text"

package/src/feedback/CopyToClipboard/__stories__/Default.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { CopyToClipboard } from '@digigov/ui/feedback/CopyToClipboard';
 import { Button } from '@digigov/ui/form/Button';
 
-export const Default = () => {
+export const Default = (_: any) => {
   return (
     <CopyToClipboard
       text="copied-text"

package/src/feedback/CopyToClipboard/__stories__/Dense.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { CopyToClipboard } from '@digigov/ui/feedback/CopyToClipboard';
 import { Button } from '@digigov/ui/form/Button';
 
-export const Dense = () => {
+export const Dense = (_: any) => {
   return (
     <CopyToClipboard
       text="copied-text"

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/ErrorSummary.stories.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import doc from './doc.mdx?raw';
 import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
 import { Link } from '@digigov/ui/navigation/Link';
 import { Heading } from '@digigov/ui/typography/Heading';
@@ -10,6 +11,8 @@ export default {
     'Use this component at the top of a page to summarise any errors a user has made.',
   link: 'https://guide.services.gov.gr/docs/components/error-summary',
   component: ErrorSummary,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'ErrorSummary',
 };
 

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/__stories__/Default.tsx

@@ -3,7 +3,7 @@ import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
 import { Link } from '@digigov/ui/navigation/Link';
 import { Heading } from '@digigov/ui/typography/Heading';
 
-export const Default = () => (
+export const Default = (_: any) => (
   <ErrorSummary>
     <Heading size="sm">Υπήρξε κάποιο πρόβλημα</Heading>
     <Link>Πρέπει να συμπληρώσετε το έτος</Link>

package/src/feedback/ErrorSummary/__stories__/Dense.tsx

@@ -3,7 +3,7 @@ import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
 import { Link } from '@digigov/ui/navigation/Link';
 import { Heading } from '@digigov/ui/typography/Heading';
 
-export const Dense = () => (
+export const Dense = (_: any) => (
   <ErrorSummary dense>
     <Heading size="sm">Υπήρξε κάποιο πρόβλημα</Heading>
     <Link>Πρέπει να συμπληρώσετε το έτος</Link>

package/src/feedback/ErrorSummary/__stories__/ErrorGroupLinkedToInput.tsx

@@ -8,7 +8,7 @@ import { Link } from '@digigov/ui/navigation/Link';
 import { Heading } from '@digigov/ui/typography/Heading';
 import { Hint } from '@digigov/ui/typography/Hint';
 
-export const ErrorGroupLinkedToInput = () => (
+export const ErrorGroupLinkedToInput = (_: any) => (
   <div>
     <ErrorSummary variant="error-group">
       <Heading size="md">Τα παρακάτω πεδία της φόρμας ειναι λάθος.</Heading>

package/src/feedback/ErrorSummary/__stories__/LinkedToCheckbox.tsx

@@ -12,7 +12,7 @@ import { Heading } from '@digigov/ui/typography/Heading';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
-export const LinkedToCheckbox = () => (
+export const LinkedToCheckbox = (_: any) => (
   <div>
     <ErrorSummary>
       <Heading size="sm">Υπήρξε κάποιο πρόβλημα</Heading>

package/src/feedback/ErrorSummary/__stories__/LinkedToField.tsx

@@ -15,7 +15,7 @@ import { Heading } from '@digigov/ui/typography/Heading';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
-export const LinkedToField = () => (
+export const LinkedToField = (_: any) => (
   <div>
     <ErrorSummary>
       <Heading size="sm">Υπήρξε κάποιο πρόβλημα</Heading>

package/src/feedback/ErrorSummary/__stories__/LinkedToInput.tsx

@@ -9,7 +9,7 @@ import { Heading } from '@digigov/ui/typography/Heading';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
-export const LinkedToInput = () => (
+export const LinkedToInput = (_: any) => (
   <div>
     <ErrorSummary>
       <Heading size="sm">Υπήρξε κάποιο πρόβλημα</Heading>

package/src/feedback/ErrorSummary/__stories__/WithBackLinkAndButton.tsx

@@ -17,7 +17,7 @@ import { Heading } from '@digigov/ui/typography/Heading';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
-export const WithBackLinkAndButton = () => (
+export const WithBackLinkAndButton = (_: any) => (
   <div>
     <BackLink href="/">Πίσω</BackLink>
     <ErrorSummary>

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

@@ -1,28 +1,37 @@
 import NotificationBanner from '@digigov/ui/feedback/NotificationBanner';
+import doc from './doc.mdx?raw';
 
 export default {
   title: 'Digigov UI/feedback/NotificationBanner',
-  tags: ['Experimental'],
+  tags: ['Experimental', 'autodocs'],
   description:
     '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.',
   link: 'https://guide.services.gov.gr/docs/components/Notification-Banner',
 
   component: NotificationBanner,
+  markdown: doc,
   displayName: 'NotificationBanner',
 };
 
 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' },
     },
@@ -32,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'] },
@@ -48,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__/Default.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { NotificationBanner } from '@digigov/ui/feedback/NotificationBanner';
 
-export const Default = () => (
+export const Default = (_: any) => (
   <NotificationBanner
     title="Ειδοποίηση"
     link={{

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { NotificationBanner } from '@digigov/ui/feedback/NotificationBanner';
 
-export const Dense = () => (
+export const Dense = (_: any) => (
   <NotificationBanner
     title="Ειδοποίηση"
     link={{