@digigov/ui 1.0.0-002c630d → 1.0.0-6b93ebf2

package/src/app/Panel/__stories__/Default.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import {
+  Panel,
+  PanelTitle,
+  PanelBody,
+} from '@digigov/ui/app/Panel';
+
+export const Default = () => (
+  <Panel>
+    <PanelTitle>Η φόρμα υποβλήθηκε επιτυχώς</PanelTitle>
+    <PanelBody>
+      Ο κωδικός εγγράφου <br />
+      <strong>HDJ2123F</strong>
+    </PanelBody>
+  </Panel>
+);
+
+export default Default;

package/src/app/Panel/index.mdx

@@ -0,0 +1,20 @@
+---
+id: panel
+title: Panel
+---
+
+```bash
+import Panel from '@digigov/ui/app/Panel';
+```
+
+## How to use
+
+<Story
+  packageName="@digigov/ui"
+  component="app/Panel"
+  story="Default.tsx"
+/>
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Panel" />

package/src/app/Panel/index.tsx

@@ -0,0 +1,6 @@
+export * from '@digigov/react-core/Panel';
+export * from '@digigov/react-core/PanelBody';
+export * from '@digigov/react-core/PanelTitle';
+
+import Panel from '@digigov/react-core/Panel';
+export default Panel;

package/src/app/ThemeOptions/index.tsx

@@ -170,7 +170,7 @@ export const ThemeOptions = React.forwardRef<
         <FieldContainer marginBottom={4}>
           <Fieldset>
             <FieldsetLegend size="sm">Μέγεθος γραμμάτων</FieldsetLegend>
-            <RadioContainer inline>
+            <RadioContainer layout='horizontal'>
               <RadioItem
                 name="font-size"
                 value="no"
@@ -197,7 +197,7 @@ export const ThemeOptions = React.forwardRef<
         <FieldContainer marginBottom={4}>
           <Fieldset>
             <FieldsetLegend size="sm">Ύψος γραμμής κειμένων</FieldsetLegend>
-            <RadioContainer inline>
+            <RadioContainer layout='horizontal'>
               <RadioItem
                 name="line-height"
                 value="no"
@@ -224,7 +224,7 @@ export const ThemeOptions = React.forwardRef<
         <FieldContainer marginBottom={4}>
           <Fieldset>
             <FieldsetLegend size="sm">Απόσταση γραμμάτων</FieldsetLegend>
-            <RadioContainer inline>
+            <RadioContainer layout='horizontal'>
               <RadioItem
                 name="letter-spacing"
                 value="no"
@@ -251,7 +251,7 @@ export const ThemeOptions = React.forwardRef<
         <FieldContainer marginBottom={4}>
           <Fieldset>
             <FieldsetLegend size="sm">Έντονη εμφάνιση συνδέσμων</FieldsetLegend>
-            <RadioContainer inline>
+            <RadioContainer layout='horizontal'>
               <RadioItem
                 name="highlight-links"
                 value="no"

package/src/app/index.ts

@@ -2,7 +2,7 @@ export * from '@digigov/ui/app/App';
 export * from '@digigov/ui/app/AccessibilityMenu';
 export * from '@digigov/ui/app/BannerContainer';
 export * from '@digigov/ui/app/BottomInfo';
-export * from '@digigov/ui/app/Confirmation';
+export * from '@digigov/ui/app/Panel';
 export * from '@digigov/ui/app/FilterSection';
 export * from '@digigov/ui/app/Footer';
 export * from '@digigov/ui/app/Header';

package/src/content/Table/Table.stories.js

@@ -22,6 +22,7 @@ export * from './__stories__/DarkVariantWithVerticalHeaders';
 export * from './__stories__/WithLoader';
 export * from './__stories__/DefinedWidth';
 export * from './__stories__/Densed';
+export * from './__stories__/RowColors';
 export * from './__stories__/MultipleProps';
 export * from './__stories__/WithSortFilters';
 export * from './__stories__/WithFloatingScroll';

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

@@ -44,7 +44,7 @@ const data = {
 export const DarkVariant = () => {
   return (
     <TableContainer>
-      <Table variant="dark">
+      <Table headerVariant="dark">
         {data && (
           <>
             <TableCaption>{data.title}</TableCaption>

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

@@ -44,7 +44,7 @@ const data = {
 export const DarkVariantWithVerticalHeaders = () => {
   return (
     <TableContainer>
-      <Table variant="dark">
+      <Table headerVariant="dark">
         {data && (
           <>
             <TableCaption>{data.title}</TableCaption>

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

@@ -75,7 +75,7 @@ const data = {
 export const Full = () => {
   return (
     <TableContainer>
-      <Table zebra variant="dark" verticalBorders dense stacked='sm'>
+      <Table variant='zebra' headerVariant="dark" verticalBorders dense stacked='sm'>
         {data && (
           <>
             <TableCaption>{data.title}</TableCaption>

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

@@ -60,7 +60,7 @@ const data = {
 export const MultipleProps = () => {
   return (
     <TableContainer>
-      <Table zebra variant="dark" verticalBorders>
+      <Table variant='zebra' headerVariant="dark" verticalBorders>
         {data && (
           <>
             <TableCaption>{data.title}</TableCaption>

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

@@ -0,0 +1,96 @@
+import React from 'react';
+
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell,
+} from '@digigov/ui/content/Table';
+import Link from '@digigov/ui/navigation/Link';
+
+const data = {
+  title: 'Ειδοποιήσεις',
+  labels: {
+    date: 'Ημερομηνία',
+    title: 'Τίτλος',
+    actions: 'Ενέργειες',
+  },
+  content: [
+    {
+      date: '24-07-23 16:34',
+      title: 'Ειδοποίηση',
+      actions: 'λεπτομέρειες',
+      new: true,
+    },
+    {
+      date: '24-07-23 12:41',
+      title: 'Μήνυμα υπηρεσίας',
+      actions: 'λεπτομέρειες',
+      new: true,
+    },
+    {
+      date: '24-07-23 12:40',
+      title: 'Μήνυμα από τον διαχειριστή',
+      actions: 'λεπτομέρειες',
+      new: false,
+    },
+    {
+      date: '23-07-23 15:14',
+      title: 'Έχετε συνδεθεί',
+      actions: 'λεπτομέρειες',
+      new: false,
+    },
+    {
+      date: '23-07-23 13:25',
+      title: 'Ο κωδικός άλλαξε',
+      actions: 'λεπτομέρειες',
+      new: false,
+    },
+  ],
+};
+
+export const RowColors = () => {
+  return (
+    <TableContainer>
+      <Table variant="default">
+        {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}
+                    color={item.new ? 'primary' : 'secondary'}
+                  >
+                    <TableDataCell data-label={data.labels.date}>
+                      {item.date}
+                    </TableDataCell>
+                    <TableDataCell data-label={data.labels.title}>
+                      {item.title}
+                    </TableDataCell>
+                    <TableDataCell data-label={data.labels.actions}>
+                      <Link href="#">{item.actions}</Link>
+                    </TableDataCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </>
+        )}
+      </Table>
+    </TableContainer>
+  );
+};
+export default RowColors;

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

@@ -44,7 +44,7 @@ const data = {
 export const ZebraProp = () => {
   return (
     <TableContainer>
-      <Table zebra>
+      <Table variant='zebra'>
         {data && (
           <>
             <TableCaption>{data.title}</TableCaption>

package/src/content/Table/index.mdx

@@ -20,53 +20,35 @@ import {
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Table" story="Default.tsx"/>
 
 ### Table with dark header
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="DarkVariant.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Table" story="DarkVariant.tsx"/>
 
 ### Table 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.
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="TableCaptions.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Table" story="TableCaptions.tsx"/>
 
 ### Numbers in a table
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="NumericDataType.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Table" story="NumericDataType.tsx"/>
 
 ### Zebra rows
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="ZebraProp.tsx"
-/>
+<Story  packageName="@digigov/ui" component="content/Table" story="ZebraProp.tsx"/>
+
+### Rows with primary or secondary color
+
+The prop `color='primary'` or `color='secondary'` is only functional when Table component has `variant='default'`.
+
+<Story packageName="@digigov/ui" component="content/Table"  story="RowColors.tsx"/>
 
 ### Vertical lines
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="VerticalBorders.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Table" story="VerticalBorders.tsx" />
 
 ### Dense tables
 
@@ -74,11 +56,7 @@ Use the `<TableCaption>` element to describe a table in the same way you would u
 
 ### Custom column widths
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="DefinedWidth.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Table" story="DefinedWidth.tsx"/>
 
 ### No data
 
@@ -86,11 +64,7 @@ Use the `<TableCaption>` element to describe a table in the same way you would u
 
 ### Using loader
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="WithLoader.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/Table" story="WithLoader.tsx"/>
 
 ## Accessibility
 

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

@@ -6,7 +6,8 @@ export const Default = () => {
   return (
     <CopyToClipboard
       text="copied-text"
-      variant="tooltip-left"
+      variant="tooltip"
+      tooltipAlign="left"
       message="Αντιγράφηκε στο πρόχειρο"
       id="copy-to-clipboard"
     >

package/src/feedback/CopyToClipboard/index.tsx

@@ -1,13 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import CopyToClipboardContainer from '@digigov/react-core/CopyToClipboardContainer';
+import CopyToClipboardContainer, { CopyToClipboardContainerProps } from '@digigov/react-core/CopyToClipboardContainer';
 import CopyToClipboardMessage from '@digigov/react-core/CopyToClipboardMessage';
 import { useTranslation } from '@digigov/ui/i18n';
 import NormalText from '@digigov/ui/typography/NormalText';
 
-type DivElementAttributes = JSX.IntrinsicElements['div'];
-export interface CopyToClipboardProps extends DivElementAttributes {
+export interface CopyToClipboardProps extends CopyToClipboardContainerProps {
   text: string;
-  variant?: 'tooltip-right' | 'tooltip-left' | 'banner';
   message?: string;
   timeout?: number;
 }
@@ -16,7 +14,7 @@ export const CopyToClipboard = React.forwardRef<
   HTMLDivElement,
   CopyToClipboardProps
 >(function CopyToClipboard(
-  { text, variant = 'tooltip-right', message, timeout = 3000, children },
+  { text, variant = 'tooltip', tooltipAlign = 'right', message, timeout = 3000, children },
   ref
 ) {
   const [enabled, setEnabled] = useState(false);
@@ -39,12 +37,12 @@ export const CopyToClipboard = React.forwardRef<
     <CopyToClipboardContainer
       onClick={copyToClipboard}
       variant={variant}
+      tooltipAlign={tooltipAlign}
       ref={ref}
     >
       {children}
       {enabled && (
         <CopyToClipboardMessage
-          variant={variant}
           enabled={enabled}
           role="tooltip"
         >

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

@@ -3,13 +3,13 @@ import { NotificationBanner } from '@digigov/ui/feedback/NotificationBanner';
 
 export const Default = () => (
   <NotificationBanner
-    title="Προειδοποίηση"
+    title="Ειδοποίηση"
     link={{
       label: 'Προβολή αίτησης',
       href: '#link?name=NotificationBannerDefault',
     }}
   >
-    Έχετε 7 ημέρες για να υποβάλετε την αίτηση.
+    Σε 7 ημέρες θα μπορείτε να υποβάλετε την αίτηση.
   </NotificationBanner>
 );
 

package/src/feedback/NotificationBanner/index.tsx

@@ -9,24 +9,24 @@ import NotificationBannerLink from '@digigov/react-core/NotificationBannerLink';
 
 export interface NotificationBannerProps
   extends NotificationBannerContainerProps {
-  variant?: 'important' | 'success';
+  variant?: 'info' | 'success' | 'error';
   title?: string;
   link?: { href: string; label: string };
   ref?: React.Ref<HTMLDivElement>;
 }
 
 export const NotificationBanner: React.FC<NotificationBannerProps> = ({
-  variant = 'important',
+  variant,
   title,
   link,
   children,
   ...props
 }) => {
-  const success = variant === 'success';
-  title = title ? title : success ? 'Success' : 'Important';
   return (
-    <NotificationBannerContainer success={success} {...props}>
-      <NotificationBannerHeader>{title}</NotificationBannerHeader>
+    <NotificationBannerContainer variant={variant} {...props}>
+      {title && (
+        <NotificationBannerHeader>{title}</NotificationBannerHeader>
+      )}
       <NotificationBannerContent>
         <NotificationBannerHeading>
           {children}

package/src/form/Checkbox/Checkbox.stories.js

@@ -8,6 +8,8 @@ export default {
   displayName: 'Checkbox',
 };
 export * from '@digigov/ui/form/Checkbox/__stories__/Default';
+export * from '@digigov/ui/form/Checkbox/__stories__/Inline';
+export * from '@digigov/ui/form/Checkbox/__stories__/InlineWithDivider';
 export * from '@digigov/ui/form/Checkbox/__stories__/MultipleQuestions';
 export * from '@digigov/ui/form/Checkbox/__stories__/WithHint';
 export * from '@digigov/ui/form/Checkbox/__stories__/NoneAnswer';

package/src/form/Checkbox/__stories__/Inline.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Checkbox, CheckboxItem } from '@digigov/ui/form/Checkbox';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/form/FieldContainer';
+
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const Inline = () => (
+  <FieldContainer>
+    <Fieldset aria-describedby="feeling-hint">
+      <FieldsetLegend>Πώς αισθάνεται αυτή τη στιγμή;</FieldsetLegend>
+      <Hint id="feeling-hint">
+        Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.
+      </Hint>
+      <Checkbox layout='horizontal'>
+        <CheckboxItem name="feeling" value="cold">
+          Έχω συνάχι
+        </CheckboxItem>
+        <CheckboxItem name="feeling" value="fever">
+          Έχω πυρετό
+        </CheckboxItem>
+      </Checkbox>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default Inline;

package/src/form/Checkbox/__stories__/InlineWithDivider.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Checkbox, CheckboxItem } from '@digigov/ui/form/Checkbox';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/form/FieldContainer';
+
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const InlineWithDivider = () => (
+  <FieldContainer>
+    <Fieldset aria-describedby="feeling-hint">
+      <FieldsetLegend>Πώς αισθάνεται αυτή τη στιγμή;</FieldsetLegend>
+      <Hint id="feeling-hint">
+        Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.
+      </Hint>
+      <Checkbox layout='horizontal'>
+        <CheckboxItem name="feeling" value="cold">
+          Έχω συνάχι
+        </CheckboxItem>
+        <CheckboxItem name="feeling" value="fever" dividerText='ή'>
+          Έχω πυρετό
+        </CheckboxItem>
+      </Checkbox>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default InlineWithDivider;

package/src/form/Checkbox/__stories__/NoneAnswer.tsx

@@ -19,7 +19,7 @@ export const NoneAnswer = () => (
         <CheckboxItem name="fever" value="fever">
           Γαλλία
         </CheckboxItem>
-        <CheckboxItem name="fatigue" value="fatigue" divider="ή">
+        <CheckboxItem name="fatigue" value="fatigue" dividerText="ή">
           Όχι, δεν θα ταξιδέψω σε καμία από αυτές τις χώρες
         </CheckboxItem>
       </Checkbox>

package/src/form/Checkbox/__stories__/NoneAnswerWithError.tsx

@@ -26,7 +26,7 @@ export const NoneAnswerWithError = () => (
         <CheckboxItem name="country" value="fr">
           Γαλλία
         </CheckboxItem>
-        <CheckboxItem divider="ή" name="country" value="none">
+        <CheckboxItem dividerText="ή" name="country" value="none">
           Όχι, δεν θα ταξιδέψω σε καμία από αυτές τις χώρες
         </CheckboxItem>
       </Checkbox>

package/src/form/RadioContainer/RadioContainer.stories.js

@@ -14,3 +14,4 @@ export * from '@digigov/ui/form/RadioContainer/__stories__/WithHints';
 export * from '@digigov/ui/form/RadioContainer/__stories__/NoneAnswer';
 export * from '@digigov/ui/form/RadioContainer/__stories__/WithErrorMessage';
 export * from '@digigov/ui/form/RadioContainer/__stories__/ConditionalReveal';
+export * from '@digigov/ui/form/RadioContainer/__stories__/InlineWithDivider';

package/src/form/RadioContainer/__stories__/Inline.tsx

@@ -17,7 +17,7 @@ export const Inline = () => (
         Συμπεριλαμβάνεται αλλαγή του επίθετου σας ή αλλαγή του τρόπου που
         γράφετε το όνομα σας.
       </Hint>
-      <RadioContainer inline>
+      <RadioContainer layout='horizontal'>
         <RadioItem name="changed_name" value="yes">
           Ναι
         </RadioItem>

package/src/form/RadioContainer/__stories__/InlineWithDivider.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/form/FieldContainer';
+import { RadioContainer, RadioItem } from '@digigov/ui/form/RadioContainer';
+
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const InlineWithDivider = () => (
+  <FieldContainer>
+    <Fieldset aria-describedby="name-hint">
+      <FieldsetLegend>Έχετε αλλάξει το όνομα σας;</FieldsetLegend>
+      <Hint id="name-hint">
+        Συμπεριλαμβάνεται αλλαγή του επίθετου σας ή αλλαγή του τρόπου που
+        γράφετε το όνομα σας.
+      </Hint>
+      <RadioContainer layout='horizontal'>
+        <RadioItem name="changed_name" value="yes">
+          Ναι
+        </RadioItem>
+        <RadioItem name="changed_name" value="no" divider='ή'>
+          Όχι
+        </RadioItem>
+      </RadioContainer>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default InlineWithDivider;

package/src/layouts/Basic/__snapshots__/index.spec.tsx.snap

@@ -25,10 +25,10 @@ exports[`renders the BasicLayout with Top, Content, Bottom, Main and Side childr
         <ForwardRef(Container)>
           <ForwardRef(Base)
             as="div"
-            className="govgr-width-container"
+            className="govgr-container"
           >
             <div
-              className="govgr-width-container"
+              className="govgr-container"
             >
               <ForwardRef(Base)
                 as="div"

package/src/layouts/Divider/index.tsx

@@ -2,7 +2,7 @@ import CoreSectionBreak, {
   SectionBreakProps as CoreSectionBreakProps,
 } from '@digigov/react-core/SectionBreak';
 import withDeprecation from '@digigov/ui/utils/withDeprecation';
-export * from '@digigov/react-core/ChoiceDivider';
+export * from '@digigov/react-core/ChoiceDividerText';
 
 export type DividerProps = CoreSectionBreakProps;
 

package/src/navigation/Link/Link.stories.playwright.json

@@ -46,13 +46,13 @@
             {
               "name": "hover",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>a"
+                "selector": "html>body>div:nth-child(5)>section>a"
               }
             },
             {
               "name": "click",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>a"
+                "selector": "html>body>div:nth-child(5)>section>a"
               }
             }
           ],