@digigov/ui 1.0.0-290a96e2 → 1.0.0-3bfc7d37

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

@@ -9,8 +9,8 @@ import { RadioContainer, RadioItem } from '@digigov/ui/form/RadioContainer';
 
 export const NoneAnswer = () => (
   <FieldContainer>
-    <Fieldset>
-      <FieldsetLegend>Πόσα παιδιά έχετε;</FieldsetLegend>
+    <Fieldset aria-describedby="name-hint">
+      <FieldsetLegend size='md'>Πόσα παιδιά έχετε;</FieldsetLegend>
       <RadioContainer>
         <RadioItem name="children" value="onetwo">
           1-2 παιδιά
@@ -18,7 +18,7 @@ export const NoneAnswer = () => (
         <RadioItem name="children" value="threefour">
           3 ή περισσότερα παιδιά
         </RadioItem>
-        <RadioItem divider="ή" name="children" value="none">
+        <RadioItem dividerText="ή" name="children" value="none">
           Κανένα παιδί
         </RadioItem>
       </RadioContainer>

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

@@ -14,7 +14,7 @@ import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 export const WithErrorMessage = () => (
   <FieldContainer error>
     <Fieldset aria-describedby="travel-hint travel-error">
-      <FieldsetLegend>
+      <FieldsetLegend size='md'>
         Θα ταξιδέψετε σε κάποια από αυτές τις χώρες;
       </FieldsetLegend>
       <Hint id="travel-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</Hint>

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

@@ -14,7 +14,7 @@ export const WithHints = () => (
     <Fieldset aria-describedby="login-hint">
       <FieldsetLegend size="md">Πώς θέλετε να συνδεθείτε;</FieldsetLegend>
       <Hint id="login-hint">
-        Θα χρειαστείτε έναν λογαριασμό με τον οποίο θα αποδείξετε την ταύτοτητα
+        Θα χρειαστείτε έναν λογαριασμό με τον οποίο θα αποδείξετε την ταυτότητά
         σας ώστε να προχωρήσετε.
       </Hint>
       <RadioContainer>

package/src/form/RadioContainer/__stories__/WithMediumLegend.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';
+
+export const WithMediumLegend = () => (
+  <FieldContainer>
+    <Fieldset>
+      <FieldsetLegend size="md">Ποιά είναι η χώρα της διαμονής σας;</FieldsetLegend>
+      <RadioContainer>
+        <RadioItem name="country" value="greece">
+          Ελλάδα
+        </RadioItem>
+        <RadioItem name="country" value="cyprus">
+          Κύπρος
+        </RadioItem>
+        <RadioItem name="country" value="eu">
+          Χώρα της Ευρωπαϊκής Ένωσης
+        </RadioItem>
+        <RadioItem name="country" value="us">
+          Hνωμένες Πολιτείες της Αμερικής
+        </RadioItem>
+      </RadioContainer>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default WithMediumLegend;

package/src/form/TextInput/__stories__/FixedWidths.tsx

@@ -5,44 +5,44 @@ import { LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 
 export const FixedWidths = () => (
-  <>
+  <div>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 20 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" maxWidth={'20-char'}></TextInput>
+        <TextInput name="inputext" maxWidth={'20-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 10 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" maxWidth={'10-char'}></TextInput>
+        <TextInput name="inputext" maxWidth={'10-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 5 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" maxWidth={'5-char'}></TextInput>
+        <TextInput name="inputext" maxWidth={'5-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 4 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" maxWidth={'4-char'}></TextInput>
+        <TextInput name="inputext" maxWidth={'4-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 3 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" maxWidth={'3-char'}></TextInput>
+        <TextInput name="inputext" maxWidth={'3-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 2 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" maxWidth={'2-char'}></TextInput>
+        <TextInput name="inputext" maxWidth={'2-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
-  </>
+  </div>
 );
 
 export default FixedWidths;

package/src/form/TextInput/__stories__/FluidWidths.tsx

@@ -5,7 +5,7 @@ import { LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 
 export const FluidWidths = () => (
-  <>
+  <div>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Μέγιστο πλάτος</LabelTitle>
@@ -42,7 +42,7 @@ export const FluidWidths = () => (
         <TextInput name="inputext" width='25%'></TextInput>
       </LabelContainer>
     </FieldContainer>
-  </>
+  </div>
 );
 
 export default FluidWidths;

package/src/govgr/Footer/Copyright.tsx

@@ -23,13 +23,13 @@ export const Copyright: React.FC<CopyrightProps> = ({
   const { t } = useTranslation();
   const copyrightInfo = minDigitalCopyright
     ? {
-        url: 'https://mindigital.gr',
-        label: t('footer.mindigital'),
-      }
+      url: 'https://mindigital.gr',
+      label: t('footer.mindigital'),
+    }
     : {
-        url: 'https://grnet.gr',
-        label: t('footer.grnet'),
-      };
+      url: 'https://grnet.gr',
+      label: t('footer.grnet'),
+    };
 
   return (
     <CopyrightContainer {...props}>
@@ -40,23 +40,23 @@ export const Copyright: React.FC<CopyrightProps> = ({
           {copyright}
           {createdBy || (
             <>
-              {t('footer.created_by')}{' '}
+              {`${t('footer.created_by')} `}
               <Link
                 href={copyrightInfo.url}
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                {copyrightInfo.label}
-              </Link>{' '}
+                {`${copyrightInfo.label}`}
+              </Link>
               {!minDigitalCopyright && (
                 <>
-                  {t('footer.created_for')}{' '}
+                  {` ${t('footer.created_for')} `}
                   <Link
                     href="https://mindigital.gr"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
-                    {t('footer.mindigital')}
+                    {`${t('footer.mindigital')}`}
                   </Link>
                 </>
               )}

package/src/icons/ImageLogo/index.tsx

@@ -0,0 +1,5 @@
+
+import ImageLogo from '@digigov/react-core/ImageLogo';
+export * from '@digigov/react-core/ImageLogo';
+
+export default ImageLogo;

package/src/icons/ImageLogoSet/index.tsx

@@ -0,0 +1,4 @@
+import ImageLogoSet from '@digigov/react-core/ImageLogoSet';
+export * from '@digigov/react-core/ImageLogoSet';
+
+export default ImageLogoSet;

package/src/navigation/NavList/NavList.stories.js

@@ -8,4 +8,8 @@ export default {
   displayName: 'NavList',
 };
 export * from '@digigov/ui/navigation/NavList/__stories__/Default';
+export * from '@digigov/ui/navigation/NavList/__stories__/NavVertical';
+export * from '@digigov/ui/navigation/NavList/__stories__/NavVerticalWithTitle';
+export * from '@digigov/ui/navigation/NavList/__stories__/WithSubMenu';
 export * from '@digigov/ui/navigation/NavList/__stories__/NavVerticalLayout';
+export * from '@digigov/ui/navigation/NavList/__stories__/WithBurgerIcon';

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

@@ -1,7 +1,7 @@
 {
   "version": "4",
   "stories": {
-    "digigov-ui-navigation-navlist--default": {
+    "digigov-ui-navigation-navlist--with-sub-menu": {
       "actionSets": [
         {
           "actions": [
@@ -12,8 +12,8 @@
               }
             }
           ],
-          "id": "dHQxEQCIJ4bJ",
-          "title": "Hover item"
+          "id": "FO0jt9D4koTE",
+          "title": "Hover Item"
         },
         {
           "actions": [
@@ -24,8 +24,8 @@
               }
             }
           ],
-          "id": "WMfgyO3E_9S_",
-          "title": "Open sub menu"
+          "id": "pSAeXNWiklxX",
+          "title": "Open submenu"
         }
       ]
     }

package/src/navigation/NavList/__stories__/Default.tsx

@@ -1,97 +1,33 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import {
   Nav,
   NavList,
   NavListItemAction,
-  NavMenuContainer,
-  NavMenuContent,
-  NavMenuContentList,
-  NavMenuContentListItem,
-  NavMenuTitle,
   useNavList
 } from '@digigov/ui/navigation/NavList';
-import { Link } from '@digigov/ui/navigation/Link';
 
 const links = [
-  { name: 'home', href: '#home', label: 'Αρχική' },
-  {
-    name: 'educational',
-    label: 'Εκπαιδευτικό υλικό',
-    subMenu: [
-      {
-        name: 'elearning',
-        href: '#elearning',
-        label: 'Εκπαιδευτική πλατφόρμα',
-      },
-      {
-        name: 'videos',
-        href: '#videos',
-        label: 'Βίντεο',
-      },
-      {
-        name: 'presentations',
-        href: '#presentations',
-        label: 'Παρουσιάσεις',
-      },
-      {
-        name: 'promoting',
-        href: '#promoting',
-        label: 'Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά',
-      },
-      {
-        name: 'other-texts',
-        href: '#other-texts',
-        label: 'Άλλα κείμενα',
-      },
-    ],
-  },
+  { name: 'home', href: '#home', label: 'Αρχική', active: true },
+  { name: 'new_form', href: '#new_form', label: 'Καταχώριση φόρμας' },
   { name: 'news', href: '#news', label: 'Νέα' },
+  { name: 'contact', href: '#contact', label: 'Επικοινωνία' },
 ];
 
-
 export const Default = () => {
-  const layout = 'horizontal';
-  const border = false;
-  const { registerNavItemMenu, registerNavItem } = useNavList();
+  const { registerNavItem } = useNavList();
+
   return (
-    <Nav open={true} border={border} aria-orientation={layout}>
-      <NavList layout={layout}>
+    <Nav
+      role="menubar"
+      aria-orientation="horizontal"
+      aria-label="Nav list"
+      fixed={false}
+    >
+      <NavList>
         {links.map((item, key) => (
-          <Fragment key={key}>
-            <NavListItemAction {...registerNavItem(item)} >
-              {item.label}
-            </NavListItemAction>
-            {item.subMenu &&
-              <NavMenuContainer
-                layout={layout}
-                {...registerNavItemMenu(item.name)}
-              >
-                <NavMenuTitle>{item.label}</NavMenuTitle>
-                <NavMenuContent>
-                  <NavMenuContentList role="menu">
-                    {item.subMenu?.map((subMenu, menuIndex) => {
-                      return (
-                        subMenu?.href && (
-                          <NavMenuContentListItem
-                            key={menuIndex}
-                            role="presentation"
-                          >
-                            <Link
-                              role="menuitem"
-                              id={subMenu.name}
-                              href={subMenu.href}
-                            >
-                              {subMenu.label}
-                            </Link>
-                          </NavMenuContentListItem>
-                        )
-                      );
-                    })}
-                  </NavMenuContentList>
-                </NavMenuContent>
-              </NavMenuContainer>
-            }
-          </Fragment>
+          <NavListItemAction key={key} {...registerNavItem(item)} active={item?.active}>
+            {item.label}
+          </NavListItemAction>
         ))}
       </NavList>
     </Nav>

package/src/navigation/NavList/__stories__/NavVertical.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+  Nav,
+  NavList,
+  NavListItemAction,
+  useNavList
+} from '@digigov/ui/navigation/NavList';
+
+const links = [
+  { name: 'link_1', href: '#link_1', label: 'Σύνδεσμος 1', active: true },
+  { name: 'link_2', href: '#link_2', label: 'Σύνδεσμος 2' },
+  { name: 'link_3', href: '#link_3', label: 'Σύνδεσμος 3' },
+];
+
+export const NavVertical = () => {
+  const { registerNavItem } = useNavList();
+
+  return (
+    <Nav
+      aria-orientation="vertical"
+      aria-label="Nav list"
+      fixed={false}
+      border={false}
+    >
+      <NavList layout="vertical">
+        {links.map((item, key) => (
+          <NavListItemAction key={key} {...registerNavItem(item)} active={item?.active} >
+            {item.label}
+          </NavListItemAction>
+        ))}
+      </NavList>
+    </Nav>
+  );
+};
+
+export default NavVertical;

package/src/navigation/NavList/__stories__/NavVerticalWithTitle.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {
+  Nav,
+  NavList,
+  NavListItemAction,
+  useNavList
+} from '@digigov/ui/navigation/NavList';
+import { Heading } from '@digigov/ui/typography/Heading';
+
+const links = [
+  { name: 'link_1', href: '#link_1', label: 'Σύνδεσμος 1', active: true },
+  { name: 'link_2', href: '#link_2', label: 'Σύνδεσμος 2' },
+  { name: 'link_3', href: '#link_3', label: 'Σύνδεσμος 3' },
+];
+
+export const NavVerticalWithTitle = () => {
+  const { registerNavItem } = useNavList();
+
+  return (
+    <div>
+      <Heading size='sm'>Σχετικοί Σύνδεσμοι</Heading>
+      <Nav
+        aria-orientation="vertical"
+        aria-label="Nav list"
+        fixed={false}
+        border={false}
+      >
+        <NavList layout="vertical">
+          {links.map((item, key) => (
+            <NavListItemAction key={key} {...registerNavItem(item)} active={item?.active} >
+              {item.label}
+            </NavListItemAction>
+          ))}
+        </NavList>
+      </Nav>
+    </div>
+  );
+};
+
+export default NavVerticalWithTitle;

package/src/navigation/NavList/__stories__/WithBurgerIcon.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import NavList from '@digigov/ui/navigation/NavList/NavList';
+import { BurgerIcon } from '@digigov/ui/icons';
+import {
+  Nav, NavListItemAction,
+} from '@digigov/ui/navigation/NavList';
+import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
+
+const links = [
+  { name: 'home', href: '#home', label: 'Αρχική', active: true },
+  { name: 'new_form', href: '#new_form', label: 'Καταχώριση φόρμας' },
+  { name: 'news', href: '#news', label: 'Νέα' },
+  { name: 'contact', href: '#contact', label: 'Επικοινωνία' },
+];
+
+export const WithBurgerIcon = () => {
+  const { registerNavItem } = useNavList();
+  const [open, setOpen] = useState<boolean>(true);
+
+  return (
+    <div>
+      <BurgerIcon
+        mdUpHidden
+        size="lg"
+        onClick={() => {
+          setOpen(!open)
+        }}
+      />
+      <Nav
+        role="menubar"
+        aria-orientation="horizontal"
+        aria-label="Nav list"
+        fixed={false}
+        border={false}
+        open={open}
+      >
+        <NavList>
+          {links.map((item, key) => (
+            <NavListItemAction key={key} {...registerNavItem(item)} active={item?.active} >
+              {item.label}
+            </NavListItemAction>
+          ))}
+        </NavList>
+      </Nav>
+    </div>
+  );
+};
+
+export default WithBurgerIcon;

package/src/navigation/NavList/__stories__/WithSubMenu.tsx

@@ -0,0 +1,101 @@
+import React, { Fragment } from 'react';
+import {
+  Nav,
+  NavList,
+  NavListItemAction,
+  NavMenuContainer,
+  NavMenuContent,
+  NavMenuContentList,
+  NavMenuContentListItem,
+  NavMenuTitle,
+  useNavList
+} from '@digigov/ui/navigation/NavList';
+import { Link } from '@digigov/ui/navigation/Link';
+
+const links = [
+  { name: 'home', href: '#home', label: 'Αρχική' },
+  {
+    name: 'educational',
+    label: 'Εκπαιδευτικό υλικό',
+    subMenu: [
+      {
+        name: 'elearning',
+        href: '#elearning',
+        label: 'Εκπαιδευτική πλατφόρμα',
+      },
+      {
+        name: 'videos',
+        href: '#videos',
+        label: 'Βίντεο',
+      },
+      {
+        name: 'presentations',
+        href: '#presentations',
+        label: 'Παρουσιάσεις',
+      },
+      {
+        name: 'promoting',
+        href: '#promoting',
+        label: 'Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά',
+      },
+      {
+        name: 'other-texts',
+        href: '#other-texts',
+        label: 'Άλλα κείμενα',
+      },
+    ],
+  },
+  { name: 'news', href: '#news', label: 'Νέα' },
+];
+
+
+export const WithSubMenu = () => {
+  const layout = 'horizontal';
+  const border = false;
+  const { registerNavItemMenu, registerNavItem } = useNavList();
+  return (
+    <Nav open={true} border={border} aria-orientation={layout}>
+      <NavList layout={layout}>
+        {links.map((item, key) => (
+          <Fragment key={key}>
+            <NavListItemAction {...registerNavItem(item)} >
+              {item.label}
+            </NavListItemAction>
+            {item.subMenu &&
+              <NavMenuContainer
+                layout={layout}
+                {...registerNavItemMenu(item.name)}
+              >
+                <NavMenuTitle>{item.label}</NavMenuTitle>
+                <NavMenuContent>
+                  <NavMenuContentList role="menu">
+                    {item.subMenu?.map((subMenu, menuIndex) => {
+                      return (
+                        subMenu?.href && (
+                          <NavMenuContentListItem
+                            key={menuIndex}
+                            role="presentation"
+                          >
+                            <Link
+                              role="menuitem"
+                              id={subMenu.name}
+                              href={subMenu.href}
+                            >
+                              {subMenu.label}
+                            </Link>
+                          </NavMenuContentListItem>
+                        )
+                      );
+                    })}
+                  </NavMenuContentList>
+                </NavMenuContent>
+              </NavMenuContainer>
+            }
+          </Fragment>
+        ))}
+      </NavList>
+    </Nav>
+  );
+};
+
+export default WithSubMenu;

package/src/navigation/Tabs/__stories__/Default.tsx

@@ -21,15 +21,17 @@ import { Heading } from '@digigov/ui/typography/Heading';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
 export function Default() {
-  const { register, panel } = useTabs();
+  const { register, opened, panel } = useTabs();
+
   return (
     <Tabs>
       <TabsHeading size='md'>Περιεχόμενα</TabsHeading>
       <TabsList>
-        <TabsListItem {...register('a')}>Στοιχεία πολίτη</TabsListItem>
-        <TabsListItem {...register('b')}>Yποθέσεις</TabsListItem>
+        <TabsListItem {...register('citizen')} open={Object.keys(opened).length === 0 || opened['citizen']}>Στοιχεία πολίτη</TabsListItem>
+        <TabsListItem {...register('cases')}>Οι υποθέσεις τους</TabsListItem>
+        <TabsListItem {...register('history')}>Ιστορικό</TabsListItem>
       </TabsList>
-      <TabsPanel {...panel('a')}>
+      <TabsPanel {...panel('citizen')} active={Object.keys(opened).length === 0 || opened['citizen']}>
         <Heading size="md" element="h3">
           Στοιχεία πολίτη
         </Heading>
@@ -38,7 +40,6 @@ export function Default() {
             <SummaryListItemKey>Όνομα</SummaryListItemKey>
             <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
             <SummaryListItemAction>
-              {' '}
               <Link href="#">
                 Αλλαγή <VisuallyHidden> ονόματος </VisuallyHidden>
               </Link>
@@ -52,21 +53,25 @@ export function Default() {
             <SummaryListItemKey>Τηλέφωνο επικοινωνίας</SummaryListItemKey>
             <SummaryListItemValue>6941234567</SummaryListItemValue>
             <SummaryListItemAction>
-              {' '}
               <Link>
-                {' '}
                 Αλλαγή <VisuallyHidden> τηλεφώνου </VisuallyHidden>
               </Link>
             </SummaryListItemAction>
           </SummaryListItem>
         </SummaryList>
       </TabsPanel>
-      <TabsPanel {...panel('b')}>
+      <TabsPanel {...panel('cases')}>
         <Heading size="md" element="h3">
-          Yποθέσεις
+          Οι υποθέσεις τους
         </Heading>
         Περιεχόμενα υποθέσεων
       </TabsPanel>
+      <TabsPanel {...panel('history')}>
+        <Heading size="md" element="h3">
+          Ιστορικό
+        </Heading>
+        Περιεχόμενο ιστορικού
+      </TabsPanel>
     </Tabs>
   );
 }