@digigov/ui 1.0.0-8ae63a77 → 1.0.0-eb2842b4

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

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

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

@@ -11,3 +11,4 @@ export default {
 };
 export * from '@digigov/ui/feedback/NotificationBanner/__stories__/Default';
 export * from '@digigov/ui/feedback/NotificationBanner/__stories__/Success';
+export * from '@digigov/ui/feedback/NotificationBanner/__stories__/Dense';

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

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

package/src/feedback/NotificationBanner/index.tsx

@@ -19,11 +19,12 @@ export const NotificationBanner: React.FC<NotificationBannerProps> = ({
   variant,
   title,
   link,
+  dense,
   children,
   ...props
 }) => {
   return (
-    <NotificationBannerContainer variant={variant} {...props}>
+    <NotificationBannerContainer variant={variant} dense={dense} {...props}>
       {title && (
         <NotificationBannerHeader>{title}</NotificationBannerHeader>
       )}

package/src/feedback/WarningText/WarningText.stories.js

@@ -9,3 +9,4 @@ export default {
 };
 export * from '@digigov/ui/feedback/WarningText/__stories__/Default';
 export * from '@digigov/ui/feedback/WarningText/__stories__/AssistiveText';
+export * from '@digigov/ui/feedback/WarningText/__stories__/Dense';

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { WarningText } from '@digigov/ui/feedback/WarningText';
+
+export const Dense = () => (
+  <WarningText dense>
+    Μπορεί να σας επιβληθεί πρόστιμο έως και 5.000 ευρώ εάν δεν εγγραφείτε.
+  </WarningText>
+);
+
+export default Dense;

package/src/form/Button/Button.stories.js

@@ -16,6 +16,7 @@ export * from './__stories__/GroupingButtons';
 export * from './__stories__/GroupingButtonsAndLinks';
 export * from './__stories__/CallToActionButton';
 export * from './__stories__/Disabled';
+export * from './__stories__/Dense';
 export * from './__stories__/ButtonLinkButton';
 export * from './__stories__/Back';
 export * from './__stories__/WithVariantLink';

package/src/form/Button/__stories__/Dense.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import { Button } from '@digigov/ui/form/Button';
+
+export const Dense = () => (
+  <Button dense aria-label="Προβολή αρχείου">Προβολή αρχείου</Button>
+);
+export default Dense;

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

@@ -16,3 +16,4 @@ export * from '@digigov/ui/form/Checkbox/__stories__/NoneAnswer';
 export * from '@digigov/ui/form/Checkbox/__stories__/NoneAnswerWithError';
 export * from '@digigov/ui/form/Checkbox/__stories__/WithErrorMessage';
 export * from '@digigov/ui/form/Checkbox/__stories__/ConditionalReveal';
+export * from '@digigov/ui/form/Checkbox/__stories__/Dense';

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

@@ -0,0 +1,35 @@
+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 Dense = () => (
+  <FieldContainer>
+    <Fieldset aria-describedby="feeling-hint">
+      <FieldsetLegend>Πώς αισθάνεται αυτή τη στιγμή;</FieldsetLegend>
+      <Hint id="feeling-hint">
+        Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.
+      </Hint>
+      <Checkbox dense>
+        <CheckboxItem name="feeling" value="cold">
+          Έχω συνάχι
+        </CheckboxItem>
+        <CheckboxItem name="feeling" value="fever">
+          Έχω πυρετό
+        </CheckboxItem>
+        <CheckboxItem name="feeling" value="fatigue">
+          Αισθάνομαι κούραση
+        </CheckboxItem>
+      </Checkbox>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default Dense;

package/src/form/DateInputContainer/DateInputContainer.stories.js

@@ -11,3 +11,4 @@ export * from '@digigov/ui/form/DateInputContainer/__stories__/Default';
 export * from '@digigov/ui/form/DateInputContainer/__stories__/MultipleQuestions';
 export * from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessage';
 export * from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessageForSingleField';
+export * from '@digigov/ui/form/DateInputContainer/__stories__/Dense';

package/src/form/DateInputContainer/__stories__/Dense.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import {
+  DateInputContainer,
+  DateInputItem,
+} from '@digigov/ui/form/DateInputContainer';
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/form/FieldContainer';
+
+
+export const Dense = () => (
+  <FieldContainer aria-describedby='passport-hint'>
+    <Fieldset>
+      <FieldsetLegend size="md">
+        Πότε εκδόθηκε το διαβατήριό σας;
+      </FieldsetLegend>
+      <DateInputContainer dense>
+        <DateInputItem name="day">Ημέρα</DateInputItem>
+        <DateInputItem name="month">Μήνας</DateInputItem>
+        <DateInputItem width={4} name="year">
+          Έτος
+        </DateInputItem>
+      </DateInputContainer>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default Dense;

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

@@ -16,3 +16,4 @@ 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';
+export * from '@digigov/ui/form/RadioContainer/__stories__/Dense';

package/src/form/RadioContainer/__stories__/Dense.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 Dense = () => (
+  <FieldContainer>
+    <Fieldset>
+      <FieldsetLegend>Ποιά είναι η χώρα της διαμονής σας;</FieldsetLegend>
+      <RadioContainer dense>
+        <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 Dense;

package/src/form/SelectContainer/SelectContainer.stories.js

@@ -10,3 +10,4 @@ export default {
 export * from '@digigov/ui/form/SelectContainer/__stories__/Default';
 export * from '@digigov/ui/form/SelectContainer/__stories__/DisabledInput';
 export * from '@digigov/ui/form/SelectContainer/__stories__/WithHint';
+export * from '@digigov/ui/form/SelectContainer/__stories__/Dense';

package/src/form/SelectContainer/__stories__/Dense.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer } from '@digigov/ui/form/LabelContainer';
+import {
+  SelectContainer,
+  SelectOption,
+} from '@digigov/ui/form/SelectContainer';
+
+export const Dense = () => (
+  <FieldContainer>
+    <LabelContainer>
+      Ταξινόμηση
+      <SelectContainer dense name="select-list" aria-label="ταξινόμηση">
+        <SelectOption value="popular">Δημοφιλή</SelectOption>
+        <SelectOption value="recent">Πρόσφατα</SelectOption>
+        <SelectOption value="views">Περισσότερες προβολές</SelectOption>
+        <SelectOption value="comments">Περισσότερα σχόλια</SelectOption>
+      </SelectContainer>
+    </LabelContainer>
+  </FieldContainer>
+);
+
+export default Dense;

package/src/form/TextArea/TextArea.stories.js

@@ -14,3 +14,4 @@ export * from '@digigov/ui/form/TextArea/__stories__/MultipleQuestions';
 export * from '@digigov/ui/form/TextArea/__stories__/LimitedCharacters';
 export * from '@digigov/ui/form/TextArea/__stories__/WithErrorMessage';
 export * from '@digigov/ui/form/TextArea/__stories__/DisabledInput';
+export * from '@digigov/ui/form/TextArea/__stories__/Dense';

package/src/form/TextArea/__stories__/Dense.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer } from '@digigov/ui/form/LabelContainer';
+import { TextArea } from '@digigov/ui/form/TextArea';
+
+export const Dense = () => (
+  <FieldContainer>
+    <LabelContainer>
+        Μπορείτε να δώσετε περισσότερες πληροφορίες;
+      <TextArea dense name="textarea"></TextArea>
+    </LabelContainer>
+  </FieldContainer>
+);
+
+export default Dense;

package/src/form/TextInput/TextInput.stories.js

@@ -15,3 +15,4 @@ export * from '@digigov/ui/form/TextInput/__stories__/WithHint';
 export * from '@digigov/ui/form/TextInput/__stories__/AskingForNumbers';
 export * from '@digigov/ui/form/TextInput/__stories__/WithErrorMessage';
 export * from '@digigov/ui/form/TextInput/__stories__/DisabledInput';
+export * from '@digigov/ui/form/TextInput/__stories__/Dense';

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer } from '@digigov/ui/form/LabelContainer';
+import { TextInput } from '@digigov/ui/form/TextInput';
+
+export const Dense = () => (
+  <FieldContainer>
+    <LabelContainer>
+      Όνομα επιχείρησης
+       <TextInput dense name="inputext"></TextInput>
+    </LabelContainer>
+  </FieldContainer>
+);
+
+export default Dense;

package/src/navigation/Link/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import LinkBase, { LinkBaseProps } from '@digigov/react-core/LinkBase';
 
 export interface LinkComponentContextProps {

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

@@ -8,8 +8,10 @@ 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';
+export * from '@digigov/ui/navigation/NavList/__stories__/Vertical';
+export * from '@digigov/ui/navigation/NavList/__stories__/NavListWithoutNav';
+export * from '@digigov/ui/navigation/NavList/__stories__/HorizontalWithoutDrawer';
+export * from '@digigov/ui/navigation/NavList/__stories__/VerticalWithoutDrawer';
+export * from '@digigov/ui/navigation/NavList/__stories__/UsingNavListAuto';
+export * from '@digigov/ui/navigation/NavList/__stories__/HorizontalWithDrawer';
+export * from '@digigov/ui/navigation/NavList/__stories__/UsingHeaderButton';

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

@@ -7,14 +7,34 @@
           "actions": [
             {
               "name": "hover",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(1)>a"
+              }
+            }
+          ],
+          "id": "dHQxEQCIJ4bJ",
+          "title": "Hover item"
+        }
+      ]
+    },
+    "digigov-ui-navigation-navlist--horizontal-with-submenu": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
               "args": {
                 "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(2)>button"
               }
             }
           ],
-          "id": "FO0jt9D4koTE",
-          "title": "Hover Item"
-        },
+          "id": "2DykhuHWrXMe",
+          "title": "Open submenu"
+        }
+      ]
+    },
+    "digigov-ui-navigation-navlist--vertical-with-submenu": {
+      "actionSets": [
         {
           "actions": [
             {
@@ -24,7 +44,7 @@
               }
             }
           ],
-          "id": "pSAeXNWiklxX",
+          "id": "yTIrKHLeGZkx",
           "title": "Open submenu"
         }
       ]

package/src/navigation/NavList/NavListAuto/index.tsx

@@ -13,49 +13,51 @@ import NavMenuTitle from '@digigov/react-core/NavMenuTitle';
 
 export const NavListAuto: React.FC<NavListAutoProps> = ({
   layout,
-  border,
-  fixed,
   links = [],
   ...props
 }) => {
   const { registerNavItemMenu, registerNavItem } = useNavList();
+
   return (
-    <Nav open={true} border={border} fixed={fixed} {...props}>
+    <Nav {...props}>
       <NavList layout={layout}>
         {links.map((item, key) => (
           <React.Fragment key={key}>
             <NavListItemAction {...registerNavItem(item)}>
               {item.label}
             </NavListItemAction>
-            {item.menu && (
+            {item.subMenu && (
               <NavMenuContainer
                 layout={layout}
                 {...registerNavItemMenu(item.name)}
               >
-                    {item.menu?.title && <NavMenuTitle>{item.menu?.title}</NavMenuTitle>}
-                    <NavMenuContent>
-                      <NavMenuContentList role="menu">
-                        {item.menu.links?.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>
-                
+                {(item.subMenuHeading || item.label) && (
+                  <NavMenuTitle>
+                    {item.subMenuHeading || 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>
             )}
           </React.Fragment>

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

@@ -1,31 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Nav,
   NavList,
   NavListItemAction,
-  useNavList
+  useNavList,
 } from '@digigov/ui/navigation/NavList';
-
-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: 'Επικοινωνία' },
-];
+import links from './NavLinksOneLevel.json';
 
 export const Default = () => {
   const { registerNavItem } = useNavList();
+  const [useActive, setUseActive] = useState("");
 
   return (
-    <Nav
-      role="menubar"
-      aria-orientation="horizontal"
-      aria-label="Nav list"
-      fixed={false}
-    >
+    <Nav aria-orientation="horizontal" role="menubar" aria-label="navigation list">
       <NavList>
         {links.map((item, key) => (
-          <NavListItemAction key={key} {...registerNavItem(item)} active={item?.active}>
+          <NavListItemAction
+            {...registerNavItem(item)}
+            key={key}
+            active={item.name === useActive}
+            onClick={() => setUseActive(item.name)}
+          >
             {item.label}
           </NavListItemAction>
         ))}

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

@@ -0,0 +1,84 @@
+import React, { Fragment, useState } from 'react';
+import {
+  Nav,
+  NavList,
+  NavListItemAction,
+  NavMenuContainer,
+  NavMenuContent,
+  NavMenuContentList,
+  NavMenuContentListItem,
+  NavMenuTitle,
+  useNavList,
+} from '@digigov/ui/navigation/NavList';
+import { Link } from '@digigov/ui/navigation/Link';
+import links from './NavLinksWithSubmenu.json';
+import { Button } from '@digigov/ui/form/Button';
+import BurgerIcon from '@digigov/react-icons/BurgerIcon';
+import CloseButton from '@digigov/react-core/CloseButton';
+
+export const HorizontalWithDrawer = () => {
+  const layout = 'horizontal';
+  const drawer = 'mdDown';
+  const border = false;
+  const { registerNavItemMenu, registerNavItem } = useNavList();
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button color="secondary" onClick={() => setOpen(!open)} mdUpHidden>
+        Επιλογές <BurgerIcon />
+      </Button>
+      <Nav
+        border={border}
+        aria-orientation={layout || 'horizontal'}
+        aria-label="navigation list"
+        open={open}
+        drawer={drawer}
+      >
+        <CloseButton mdUpHidden onClick={() => setOpen(false)}>
+          Κλείσιμο
+        </CloseButton>
+        <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 HorizontalWithDrawer;

package/src/navigation/NavList/__stories__/{WithSubMenu.tsx → HorizontalWithoutDrawer.tsx}

@@ -8,60 +8,28 @@ import {
   NavMenuContentList,
   NavMenuContentListItem,
   NavMenuTitle,
-  useNavList
+  useNavList,
 } from '@digigov/ui/navigation/NavList';
 import { Link } from '@digigov/ui/navigation/Link';
+import links from './NavLinksWithSubmenu.json';
 
-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 = () => {
+export const HorizontalWithoutDrawer = () => {
   const layout = 'horizontal';
   const border = false;
   const { registerNavItemMenu, registerNavItem } = useNavList();
   return (
-    <Nav open={true} border={border} aria-orientation={layout}>
+    <Nav
+      border={border}
+      aria-orientation={layout || 'horizontal'}
+      aria-label="navigation list"
+    >
       <NavList layout={layout}>
         {links.map((item, key) => (
           <Fragment key={key}>
-            <NavListItemAction {...registerNavItem(item)} >
+            <NavListItemAction {...registerNavItem(item)}>
               {item.label}
             </NavListItemAction>
-            {item.subMenu &&
+            {item.subMenu && (
               <NavMenuContainer
                 layout={layout}
                 {...registerNavItemMenu(item.name)}
@@ -90,7 +58,7 @@ export const WithSubMenu = () => {
                   </NavMenuContentList>
                 </NavMenuContent>
               </NavMenuContainer>
-            }
+            )}
           </Fragment>
         ))}
       </NavList>
@@ -98,4 +66,4 @@ export const WithSubMenu = () => {
   );
 };
 
-export default WithSubMenu;
+export default HorizontalWithoutDrawer;