@digigov/ui 1.0.0-002c630d → 1.0.0-079f34f3d

package/src/form/TextInput/index.mdx

@@ -11,19 +11,11 @@ import TextInput from '@digigov/ui/form/TextInput';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="Default.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="MultipleQuestions.tsx" />
 
 ### Fixed width inputs
 
@@ -33,59 +25,35 @@ The widths are designed for specific character lengths and to be consistent acro
 
 On fixed width inputs, the width will remain fixed on all screens unless it is wider than the viewport, in which case it will shrink to fit.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="FixedWidths.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="FixedWidths.tsx" />
 
 ### Fluid width inputs
 
 Fluid width inputs will resize with the viewport.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="FluidWidths.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="FluidWidths.tsx" />
 
 ### Hint text
 
 Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="WithHint.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="WithHint.tsx" />
 
 ## Numbers
 
 ### Asking for whole numbers
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="AskingForNumbers.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="AskingForNumbers.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="WithErrorMessage.tsx" />
 
 ### Disabled input
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="DisabledInput.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="DisabledInput.tsx" />
 
 ## API
 

package/src/form/index.ts

@@ -8,8 +8,8 @@ export * from '@digigov/ui/form/FileUpload';
 export * from '@digigov/ui/form/Form';
 export * from '@digigov/ui/form/LabelContainer';
 export * from '@digigov/ui/form/RadioContainer';
-export * from '@digigov/ui/form/SearchSection';
+export * from '@digigov/ui/form/SearchContainer';
 export * from '@digigov/ui/form/SelectContainer';
-export * from '@digigov/ui/form/SingleCharacterInputContainer';
+export * from '@digigov/ui/form/SingleCharacterInputs';
 export * from '@digigov/ui/form/TextArea';
 export * from '@digigov/ui/form/TextInput';

package/src/govgr/Footer/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import Footer, { FooterProps } from '@digigov/react-core/Footer';
 import FooterContainer from '@digigov/react-core/FooterContainer';
-import FooterMeta from '@digigov/react-core/FooterMeta';
-import FooterMetaItem from '@digigov/react-core/FooterMetaItem';
+import FooterInfo from '@digigov/react-core/FooterInfo';
+import FooterInfoSection from '@digigov/react-core/FooterInfoSection';
 import Copyright from '@digigov/ui/govgr/Footer/Copyright';
 import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
 
@@ -25,8 +25,8 @@ export const GovGRFooter: React.FC<GovGRFooterProps> = ({
     <Footer>
       <FooterContainer>
         {children || (
-          <FooterMeta>
-            <FooterMetaItem>
+          <FooterInfo>
+            <FooterInfoSection>
               {copyright ? (
                 copyright
               ) : (
@@ -35,11 +35,11 @@ export const GovGRFooter: React.FC<GovGRFooterProps> = ({
                   minDigitalCopyright={minDigitalCopyright}
                 />
               )}
-            </FooterMetaItem>
-            <FooterMetaItem>
+            </FooterInfoSection>
+            <FooterInfoSection>
               <HellenicRepublicLogo />
-            </FooterMetaItem>
-          </FooterMeta>
+            </FooterInfoSection>
+          </FooterInfo>
         )}
       </FooterContainer>
     </Footer>

package/src/layouts/Admin/index.tsx

@@ -4,7 +4,7 @@ export * from '@digigov/react-core/AdminMain';
 export * from '@digigov/react-core/AdminAside';
 export * from '@digigov/react-core/AdminTopSection';
 export * from '@digigov/react-core/AdminHeader';
-export * from '@digigov/react-core/AdminHeaderSection';
+export * from '@digigov/react-core/AdminHeaderContent';
 
 import AdminLayout from '@digigov/react-core/AdminLayout';
 export default AdminLayout;

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

@@ -4,10 +4,10 @@ exports[`renders the BasicLayout with Top, Content, Bottom, Main and Side childr
 <ForwardRef(Layout)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-layout-wrapper__full-height govgr-layout-wrapper"
+    className="govgr-layout--full-height govgr-layout"
   >
     <div
-      className="govgr-layout-wrapper__full-height govgr-layout-wrapper"
+      className="govgr-layout--full-height govgr-layout"
     >
       <ForwardRef(Top)>
         <ForwardRef(Base)
@@ -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/layouts/Section/index.tsx

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

package/src/layouts/Stack/Stack.stories.js

@@ -0,0 +1,12 @@
+import Stack from '@digigov/ui/layouts/Stack';
+export default {
+  title: 'Digigov UI/layouts/Stack',
+  component: Stack,
+  displayName: 'Stack',
+};
+export * from '@digigov/ui/layouts/Stack/__stories__/Default';
+export * from '@digigov/ui/layouts/Stack/__stories__/Spacing';
+export * from '@digigov/ui/layouts/Stack/__stories__/Row';
+export * from '@digigov/ui/layouts/Stack/__stories__/NoWrap';
+export * from '@digigov/ui/layouts/Stack/__stories__/JustifyContent';
+export * from '@digigov/ui/layouts/Stack/__stories__/AlignItems';

package/src/layouts/Stack/__stories__/AlignItems.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+export const AlignItems = () => {
+  return (
+    <Stack spacing={4}>
+      <Stack direction="row" spacing={2} alignItems='flex-start'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border" padding={8}> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+      </Stack>
+      <Stack direction="row" spacing={2} alignItems='center'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border" padding={8}> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+      </Stack>
+      <Stack direction="row" spacing={2} alignItems='flex-end'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border" padding={8}> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+      </Stack>
+      <Stack direction="row" spacing={2} alignItems='baseline'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border" padding={8}> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+      </Stack>
+      <Stack direction="row" spacing={2} alignItems='stretch'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border" padding={8}> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+      </Stack>
+    </Stack>
+  );
+};
+export default AlignItems;

package/src/layouts/Stack/__stories__/Default.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+export const Default = () => {
+  return (
+    <Stack spacing={2}>
+      <Card variant="border"> Item 1 </Card>
+      <Card variant="border"> Item 2 </Card>
+      <Card variant="border"> Item 3 </Card>
+      <Card variant="border"> Item 4 </Card>
+      <Card variant="border"> Item 5 </Card>
+      <Card variant="border"> Item 6 </Card>
+    </Stack>
+  );
+};
+export default Default;

package/src/layouts/Stack/__stories__/JustifyContent.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+export const JustifyContent = () => {
+  return (
+    <Stack spacing={4}>
+      <Stack direction="row" spacing={2} justifyContent='flex-start'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+      </Stack>
+      <Stack direction="row" spacing={2} justifyContent='center'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+      </Stack>
+      <Stack direction="row" spacing={2} justifyContent='flex-end'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+      </Stack>
+      <Stack direction="row" spacing={2} justifyContent='space-between'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+      </Stack>
+      <Stack direction="row" spacing={2} justifyContent='space-around'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+      </Stack>
+      <Stack direction="row" spacing={2} justifyContent='space-evenly'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+      </Stack>
+    </Stack>
+  );
+};
+export default JustifyContent;

package/src/layouts/Stack/__stories__/NoWrap.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+export const NoWrap = () => {
+  return (
+    <Stack spacing={4} direction='row' flexWrap='nowrap'>
+      <Card variant="border"> Longer Item 1 </Card>
+      <Card variant="border"> Longer Item 2 </Card>
+      <Card variant="border"> Longer Item 3 </Card>
+      <Card variant="border"> Longer Item 4 </Card>
+      <Card variant="border"> Longer Item 5 </Card>
+      <Card variant="border"> Longer Item 6 </Card>
+    </Stack>
+  );
+};
+export default NoWrap;

package/src/layouts/Stack/__stories__/Row.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+export const Row = () => {
+  return (
+    <Stack spacing={2} direction='row'>
+      <Card variant="border"> Item 1 </Card>
+      <Card variant="border"> Item 2 </Card>
+      <Card variant="border"> Item 3 </Card>
+      <Card variant="border"> Item 4 </Card>
+      <Card variant="border"> Item 5 </Card>
+      <Card variant="border"> Item 6 </Card>
+    </Stack>
+  );
+};
+export default Row;

package/src/layouts/Stack/__stories__/Spacing.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+export const Spacing = () => {
+  return (
+    <Stack spacing={6}>
+      <Stack direction="row">
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+      </Stack>
+      <Stack direction="row" spacing={4}>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+      </Stack>
+      <Stack direction="row" spacing={8}>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+      </Stack>
+      <Stack direction="row" spacing={12}>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+      </Stack>
+    </Stack>
+  );
+};
+export default Spacing;

package/src/layouts/Stack/index.tsx

@@ -0,0 +1,3 @@
+import Stack from '@digigov/react-core/Stack';
+
+export default Stack;

package/src/layouts/index.ts

@@ -2,6 +2,7 @@ export * from '@digigov/ui/layouts/Admin';
 export * from '@digigov/ui/layouts/Basic';
 export * from '@digigov/ui/layouts/Divider';
 export * from '@digigov/ui/layouts/Grid';
+export * from '@digigov/ui/layouts/Stack';
 export * from '@digigov/ui/layouts/Hidden';
 export * from '@digigov/ui/layouts/SectionBreak';
 export { default as AdminLayout } from '@digigov/ui/layouts/Admin';
@@ -9,3 +10,4 @@ export { default as BasicLayout } from '@digigov/ui/layouts/Basic';
 export { default as Divider } from '@digigov/ui/layouts/Divider';
 export { default as SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 export { default as Grid } from '@digigov/ui/layouts/Grid';
+export { default as Stack } from '@digigov/ui/layouts/Stack';

package/src/navigation/BackLink/index.mdx

@@ -13,11 +13,7 @@ import BackLink from "@digigov/ui/navigation/BackLink";
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/BackLink"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/BackLink" story="Default.tsx" />
 
 ## API
 

package/src/navigation/Breadcrumbs/index.mdx

@@ -15,11 +15,12 @@ import Breadcrumbs from '@digigov/ui/navigation/Breadcrumbs';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Breadcrumbs"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Breadcrumbs" story="Default.tsx" />
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Breadcrumbs
+implementation in the ARIA Authoring Practices Guide (APG) at [Breadcrumbs](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) section.
 
 ## API
 

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

@@ -1,19 +1,9 @@
 import React, { useState } from 'react';
 import { Drawer } from '@digigov/ui/navigation/Drawer';
 import { DrawerHeading } from '@digigov/ui/navigation/Drawer';
-import { Link } from '@digigov/ui/navigation/Link';
 import {
-  isNavListItemLinkInterface,
   NavListAuto,
-  NavListItem,
-  NavMenu,
-  NavMenuContainer,
-  NavMenuContainerContent,
-  NavMenuContainerContentList,
-  NavMenuContainerContentListItem,
-  NavMenuContainerTitle,
 } from '@digigov/ui/navigation/NavList';
-import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
 import { Title } from '@digigov/ui/typography/Title';
 
 function useDrawer(): [boolean, () => void] {
@@ -29,33 +19,35 @@ const links = [
   {
     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: 'Άλλα κείμενα',
-      },
-    ],
+    menu: {
+      links: [
+        {
+          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: 'Νέα' },
 ];
@@ -63,13 +55,7 @@ const links = [
 export const Default = () => {
   const [open, toggleDrawer] = useDrawer();
 
-  const { container, registerButton, registerLink } = useNavList();
-  const setRegisterButton = (name: string) => {
-    return { ...registerButton(name) };
-  };
-  const setRegisterLink = (name: string) => {
-    return { ...registerLink(name) };
-  };
+
 
   const layout = 'vertical';
   const border = false;
@@ -87,46 +73,7 @@ export const Default = () => {
         fixed={fixed}
         aria-label="Nav list"
       >
-        {links.map((item, key) => (
-          <React.Fragment key={key}>
-            <NavListItem
-              link={item}
-              setRegisterButton={setRegisterButton}
-              setRegisterLink={setRegisterLink}
-            />
-            <NavMenu layout={layout} {...container(item.name)}>
-              <NavMenuContainer
-                layout={layout}
-                paddingLeft={5}
-                paddingRight={5}
-              >
-                <NavMenuContainerTitle>{item.label}</NavMenuContainerTitle>
-                <NavMenuContainerContent>
-                  <NavMenuContainerContentList role="menu">
-                    {item.subMenu?.map((subMenu, menuIndex) => {
-                      return (
-                        isNavListItemLinkInterface(subMenu) && (
-                          <NavMenuContainerContentListItem
-                            key={menuIndex}
-                            role="presentation"
-                          >
-                            <Link
-                              role="menuitem"
-                              id={subMenu.name}
-                              href={subMenu.href}
-                            >
-                              {subMenu.label}
-                            </Link>
-                          </NavMenuContainerContentListItem>
-                        )
-                      );
-                    })}
-                  </NavMenuContainerContentList>
-                </NavMenuContainerContent>
-              </NavMenuContainer>
-            </NavMenu>
-          </React.Fragment>
-        ))}
+
       </NavListAuto>
     </Drawer>
   );

package/src/navigation/Drawer/index.mdx

@@ -9,11 +9,7 @@ import Drawer from '@digigov/ui/app/Drawer';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Drawer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Drawer" story="Default.tsx" />
 
 ## API
 

package/src/navigation/Dropdown/__stories__/AlignRight.tsx

@@ -12,8 +12,7 @@ import {
   DropdownButton,
   DropdownContent,
 } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import { NavList, NavListItemAction } from '@digigov/ui/navigation/NavList';
 
 export const AlignRight = () => (
   <div
@@ -39,20 +38,22 @@ export const AlignRight = () => (
             <TextInput name="input-name" />
           </LabelContainer>
         </FieldContainer>
-        <SectionBreak role="separator" />
-        <NavVertical role="menu">
-          <NavVerticalItem role="menuitem" href="#">
+        <SectionBreak role="separator" paddingBottom={0} paddingTop={0} />
+        <NavList layout="vertical">
+          <NavListItemAction role="menuitem" href="#">
             Επεξεργασία
-          </NavVerticalItem>
-          <NavVerticalItem role="menuitem" href="#">
+          </NavListItemAction>
+          <NavListItemAction role="menuitem" href="#">
             Μετακίνηση
-          </NavVerticalItem>
-          <NavVerticalItem role="menuitem" href="#">
+          </NavListItemAction>
+          <NavListItemAction role="menuitem" href="#">
             Οριστική διαγραφή
-          </NavVerticalItem>
-        </NavVertical>
+          </NavListItemAction>
+        </NavList>
         <SectionBreak role="separator" />
-        <Button role="menuitem" color='secondary'>Ενέργεια</Button>
+        <Button role="menuitem" color="secondary">
+          Ενέργεια
+        </Button>
       </DropdownContent>
     </Dropdown>
   </div>