@digigov/ui 2.0.0-76ec20a0 → 2.0.0-7d765d3c

package/src/layouts/Basic/doc.mdx

@@ -10,8 +10,6 @@ Content and Bottom components.
 
 ## How to use
 
-### Default layout
-
 <code src="@digigov/ui/layouts/Basic/__stories__/Default.tsx" />
 
 ### Two thirds one third columns layout

package/src/layouts/Grid/Grid.stories.jsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import Grid from '@digigov/ui/layouts/Grid';
+import doc from './doc.mdx?raw';
+
+export default {
+  title: 'Digigov UI/layouts/Grid',
+  component: Grid,
+  tags: ['autodocs'],
+  markdown: doc,
+  displayName: 'Grid',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Grid
+        role="grid"
+        aria-label="grid-example"
+        container
+        spacing={args.spacing}
+        inline={args.inline}
+      >
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.1
+        </Grid>
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.2
+        </Grid>
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.3
+        </Grid>
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.4
+        </Grid>
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.5
+        </Grid>
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.6
+        </Grid>
+      </Grid>
+    );
+  },
+  args: {
+    inline: false,
+    spacing: 4,
+    xs: 12,
+    sm: 6,
+    md: 4,
+    lg: 3,
+    xl: 2,
+  },
+  argsTypes: {
+    inline: {
+      control: 'boolean',
+    },
+    spacing: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    xs: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    sm: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    md: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    lg: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    xl: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+
+export { Default } from '@digigov/ui/layouts/Grid/__stories__/Default';
+export { ResponsiveSpacing } from '@digigov/ui/layouts/Grid/__stories__/ResponsiveSpacing';
+export { Inline } from '@digigov/ui/layouts/Grid/__stories__/Inline';

package/src/layouts/Hidden/Hidden.stories.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import Hidden from '@digigov/ui/layouts/Hidden';
+
+export default {
+  title: 'Digigov UI/layouts/Hidden',
+  component: Hidden,
+  displayName: 'Hidden',
+};
+
+export const WithControls = {
+  args: {
+    children: 'Περιεχόμενο μέσα σε Hidden.',
+    xsUpHidden: false,
+    smUpHidden: false,
+    mdUpHidden: false,
+    lgUpHidden: false,
+    xlUpHidden: false,
+    xsHidden: false,
+    smHidden: false,
+    mdHidden: false,
+    lgHidden: false,
+    xlHidden: false,
+  },
+  argTypes: {
+    children: {
+      control: { type: 'text' },
+    },
+    xsUpHidden: {
+      control: { type: 'boolean' },
+    },
+    smUpHidden: {
+      control: { type: 'boolean' },
+    },
+    mdUpHidden: {
+      control: { type: 'boolean' },
+    },
+    lgUpHidden: {
+      control: { type: 'boolean' },
+    },
+    xlUpHidden: {
+      control: { type: 'boolean' },
+    },
+    xsHidden: {
+      control: { type: 'boolean' },
+    },
+    smHidden: {
+      control: { type: 'boolean' },
+    },
+    mdHidden: {
+      control: { type: 'boolean' },
+    },
+    lgHidden: {
+      control: { type: 'boolean' },
+    },
+    xlHidden: {
+      control: { type: 'boolean' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};

package/src/layouts/Hidden/index.tsx

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

package/src/layouts/Stack/Stack.stories.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import Stack from '@digigov/ui/layouts/Stack';
+import Card from '@digigov/ui/content/Card';
+import doc from './doc.mdx?raw';
+
+export default {
+  title: 'Digigov UI/layouts/Stack',
+  component: Stack,
+  tags: ['autodocs'],
+  markdown: doc,
+  displayName: 'Stack',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Stack
+        spacing={args.spacing}
+        alignItems={args.alignItems}
+        direction={args.direction}
+        justifyContent={args.justifyContent}
+        alignContent={args.alignContent}
+        flexWrap={args.flexWrap}
+      >
+        <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>
+    );
+  },
+  args: {
+    spacing: 4,
+    direction: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    alignContent: 'center',
+    flexWrap: 'nowrap',
+  },
+  argsTypes: {
+    spacing: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    direction: {
+      control: {
+        type: 'select',
+      },
+      options: ['row', 'row-reverse', 'column', 'column-reverse'],
+    },
+    justifyContent: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ],
+    },
+    alignItems: {
+      control: {
+        type: 'select',
+      },
+      options: ['stretch', 'flex-start', 'flex-end', 'center', 'baseline'],
+    },
+    alignContent: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'stretch',
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+      ],
+    },
+    flexWrap: {
+      control: {
+        type: 'select',
+      },
+      options: ['nowrap', 'wrap'],
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+
+export { Default } from '@digigov/ui/layouts/Stack/__stories__/Default';
+export { Spacing } from '@digigov/ui/layouts/Stack/__stories__/Spacing';
+export { Row } from '@digigov/ui/layouts/Stack/__stories__/Row';
+export { NoWrap } from '@digigov/ui/layouts/Stack/__stories__/NoWrap';
+export { JustifyContent } from '@digigov/ui/layouts/Stack/__stories__/JustifyContent';
+export { AlignItems } from '@digigov/ui/layouts/Stack/__stories__/AlignItems';

package/src/lazy.js

@@ -44,6 +44,7 @@ export default {
   'LoaderContainer': lazy(() => import('@digigov/ui/app/Loader').then((module) => ({ default: module['LoaderContainer'] }))),
   'FullPageBackground': lazy(() => import('@digigov/ui/app/Loader').then((module) => ({ default: module['FullPageBackground'] }))),
   'CircularProgress': lazy(() => import('@digigov/ui/app/Loader/index.web').then((module) => ({ default: module['CircularProgress'] }))),
+  'CircularProgressBase': lazy(() => import('@digigov/ui/app/Loader/index.web').then((module) => ({ default: module['CircularProgressBase'] }))),
   'Masthead': lazy(() => import('@digigov/ui/app/Masthead').then((module) => ({ default: module['Masthead'] }))),
   'MastheadBody': lazy(() => import('@digigov/ui/app/Masthead').then((module) => ({ default: module['MastheadBody'] }))),
   'MastheadLogo': lazy(() => import('@digigov/ui/app/Masthead').then((module) => ({ default: module['MastheadLogo'] }))),
@@ -140,7 +141,6 @@ export default {
   'WarningText': lazy(() => import('@digigov/ui/feedback/WarningText').then((module) => ({ default: module['WarningText'] }))),
   'AutoComplete': lazy(() => import('@digigov/ui/form/AutoComplete').then((module) => ({ default: module['AutoComplete'] }))),
   'AutoCompleteInputBase': lazy(() => import('@digigov/ui/form/AutoComplete').then((module) => ({ default: module['AutoCompleteInputBase'] }))),
-  'AutoCompleteInputTypeahead': lazy(() => import('@digigov/ui/form/AutoComplete').then((module) => ({ default: module['AutoCompleteInputTypeahead'] }))),
   'AutoCompleteResultList': lazy(() => import('@digigov/ui/form/AutoComplete').then((module) => ({ default: module['AutoCompleteResultList'] }))),
   'AutoCompleteResultListItem': lazy(() => import('@digigov/ui/form/AutoComplete').then((module) => ({ default: module['AutoCompleteResultListItem'] }))),
   'AutoCompleteContainer': lazy(() => import('@digigov/ui/form/AutoComplete').then((module) => ({ default: module['AutoCompleteContainer'] }))),

package/src/navigation/BackToTopLink/BackToTopLink.stories.js

@@ -1,8 +1,12 @@
 import BackToTopLink from '@digigov/ui/navigation/BackToTopLink';
+import doc from './doc.mdx?raw';
+
 export default {
   title: 'Digigov UI/navigation/BackToTopLink',
   component: BackToTopLink,
   displayName: 'BackToTopLink',
+  tags: ['autodocs'],
+  markdown: doc,
 };
 export { Default } from '@digigov/ui/navigation/BackToTopLink/__stories__/Default';
 export { InMain } from '@digigov/ui/navigation/BackToTopLink/__stories__/InMain';

package/src/navigation/BackToTopLink/doc.mdx

@@ -0,0 +1,22 @@
+---
+id: back-to-top
+title: BackToTop
+---
+
+# BackToTop
+
+Use the BackToTopLink component to allow users to quickly navigate to the top of the page.
+
+## How to use
+
+<code src="@digigov/ui/navigation/BackToTopLink/__stories__/Default.tsx" />
+
+### Display in main content
+
+<code src="@digigov/ui/navigation/BackToTopLink/__stories__/InMain.tsx" />
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps componentName={["BackToTopLink", "BackToTopContainer"]} /> 

package/src/navigation/Breadcrumbs/doc.mdx

@@ -17,6 +17,10 @@ The Breadcrumbs component lets users show and hide sections of related content o
 
 <code src="@digigov/ui/navigation/Breadcrumbs/__stories__/WithoutCurrentPage.tsx" />
 
+### With hook
+
+<code src="@digigov/ui/navigation/Breadcrumbs/__stories__/WithHook.tsx" />
+
 ## Accessibility
 
 You can read more about the accessibility patterns used in our Breadcrumbs

package/src/navigation/Drawer/hooks.ts

@@ -28,12 +28,12 @@ export interface UseDrawerReturn {
 
 export const useDrawer = (): UseDrawerReturn => {
   const [currentOpen, setCurrentOpen] = useState<DrawerId | null>(null);
-  const drawersRef = useRef<Map<DrawerId, React.RefObject<HTMLDivElement>>>(
-    new Map()
-  );
-  const buttonsRef = useRef<Map<DrawerId, React.RefObject<HTMLButtonElement>>>(
-    new Map()
-  );
+  const drawersRef = useRef<
+    Map<DrawerId, React.RefObject<HTMLDivElement | null>>
+  >(new Map());
+  const buttonsRef = useRef<
+    Map<DrawerId, React.RefObject<HTMLButtonElement | null>>
+  >(new Map());
 
   const open = useCallback((id: DrawerId) => {
     setCurrentOpen(id);

package/src/navigation/Dropdown/Dropdown.stories.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
+import {
+  Dropdown,
+  DropdownButton,
+  DropdownContent,
+} from '@digigov/ui/navigation/Dropdown';
+import { NavListItemAction, NavList } from '@digigov/ui/navigation/NavList';
+
+import doc from './doc.mdx?raw';
+export default {
+  title: 'Digigov UI/navigation/Dropdown',
+  description:
+    'Use the dropdown component to provide more options to users in cases where there is not enough space such as tables, navbars, etc.',
+  link: 'https://guide.services.gov.gr/docs/patterns/admin-pages/components/dropdown',
+  component: Dropdown,
+  tags: ['autodocs'],
+  markdown: doc,
+  displayName: 'Dropdown',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Dropdown
+        align={args.align}
+        disabled={args.disabled}
+        dense={args.dense}
+        placement={args.placement}
+        closeBehaviour={args.closeBehaviour}
+        float={args.float}
+      >
+        <DropdownButton
+          role="button"
+          aria-haspopup="true"
+          aria-controls="menu2"
+          arrow
+        >
+          Ενέργειες
+        </DropdownButton>
+        <DropdownContent role="menu" id="menu2" scrollable={args.scrollable}>
+          <NavList layout="vertical">
+            <NavListItemAction role="menuitem" href="#">
+              Επεξεργασία
+            </NavListItemAction>
+            <NavListItemAction role="menuitem" href="#">
+              Μετακίνηση
+            </NavListItemAction>
+            <NavListItemAction role="menuitem" href="#">
+              Οριστική διαγραφή
+            </NavListItemAction>
+          </NavList>
+        </DropdownContent>
+      </Dropdown>
+    );
+  },
+  args: {
+    align: 'right',
+    placement: 'bottom',
+    disabled: false,
+    dense: false,
+    closeBehaviour: 'clickButton',
+    float: false,
+    scrollable: false,
+  },
+  argsTypes: {
+    align: {
+      control: {
+        type: 'select',
+      },
+      options: ['left', 'right'],
+    },
+    placement: {
+      control: {
+        type: 'select',
+      },
+      options: ['top', 'bottom'],
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    dense: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    closeBehaviour: {
+      control: {
+        type: 'select',
+      },
+      options: ['clickButton', 'clickOutside'],
+    },
+    float: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    scrollable: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+export { Default } from '@digigov/ui/navigation/Dropdown/__stories__/Default';
+export { Secondary } from '@digigov/ui/navigation/Dropdown/__stories__/Secondary';
+export { Warning } from '@digigov/ui/navigation/Dropdown/__stories__/Warning';
+export { Disabled } from '@digigov/ui/navigation/Dropdown/__stories__/Disabled';
+export { VariantLink } from '@digigov/ui/navigation/Dropdown/__stories__/VariantLink';
+export { AlignRight } from '@digigov/ui/navigation/Dropdown/__stories__/AlignRight';
+export { PlacementTop } from '@digigov/ui/navigation/Dropdown/__stories__/PlacementTop';
+export { WithIcons } from '@digigov/ui/navigation/Dropdown/__stories__/WithIcons';
+export { ContentPosition } from '@digigov/ui/navigation/Dropdown/__stories__/ContentPosition';
+export { ScrollableContent } from '@digigov/ui/navigation/Dropdown/__stories__/ScrollableContent';
+export { Dense } from '@digigov/ui/navigation/Dropdown/__stories__/Dense';

package/src/navigation/Dropdown/doc.mdx

@@ -10,14 +10,16 @@ title: Dropdown
 <div className="dropdown-docs">
   <code src="@digigov/ui/navigation/Dropdown/__stories__/Default.tsx" />
 </div>
-### Dropdown with align right
+
+### With align right
 
 You can display the dropdown menu to the right side of the `Dropdown` button.
 
 <div className="dropdown-docs">
   <code src="@digigov/ui/navigation/Dropdown/__stories__/AlignRight.tsx" />
 </div>
-### Dropdown with placement top
+
+### With placement top
 
 You can display the dropdown menu to the top of the `Dropdown` button.
 
@@ -25,6 +27,26 @@ You can display the dropdown menu to the top of the `Dropdown` button.
   <code src="@digigov/ui/navigation/Dropdown/__stories__/PlacementTop.tsx" />
 </div>
 
+### With icons
+
+<div className="dropdown-docs">
+  <code src="@digigov/ui/navigation/Dropdown/__stories__/WithIcons.tsx" />
+</div>
+
+### With scrollable content
+
+Use this when the content  of the dropdown menu is too long to fit on the screen.
+
+<div className="dropdown-docs">
+  <code src="@digigov/ui/navigation/Dropdown/__stories__/ScrollableContent.tsx" />
+</div>
+
+### Dense
+
+<div className="dropdown-docs">
+  <code src="@digigov/ui/navigation/Dropdown/__stories__/Dense.tsx" />
+</div>
+
 ## API
 
 See below for a complete reference to all of the props available to the components mentioned here.

package/src/navigation/NavList/__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(NavList2)>
-  this is some random warning text
-</ForwardRef(NavList2)>
+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/navigation/NavList/doc.mdx

@@ -56,4 +56,4 @@ See below for a complete reference to all of the props available to the componen
     'NavMenuContentListItem',
     'NavMenuTitle',
   ]}
-/>{' '}
+/>

package/src/navigation/Pagination/doc.mdx

@@ -19,6 +19,10 @@ pagination component displays a list of page numbers, and allows the user to nav
 
 <code src="@digigov/ui/navigation/Pagination/__stories__/PaginationWithSmallFont.tsx" />
 
+### Dense 
+
+<code src="@digigov/ui/navigation/Pagination/__stories__/PaginationSmall.tsx" />
+
 ### With results per page
 
 <code src="@digigov/ui/navigation/Pagination/__stories__/WithResultsPerPage.tsx" />
@@ -34,4 +38,4 @@ See below for a complete reference to all of the props available to the componen
     'PaginationList',
     'PaginationListItem',
   ]}
-/>{' '}
+/>

package/src/navigation/Pagination/hooks.ts

@@ -53,8 +53,8 @@ export const usePagination = ({
       ? currentPage * currentResultsPerPage
       : total;
 
-  const labelRef = useRef<React.RefObject<HTMLDivElement>>();
-  const selectLabelRef = useRef<React.RefObject<HTMLLabelElement>>();
+  const labelRef = useRef<React.RefObject<HTMLDivElement>>(undefined);
+  const selectLabelRef = useRef<React.RefObject<HTMLLabelElement>>(undefined);
 
   useEffect(() => {
     setCurrentPage(totalPages < currentPage ? totalPages : currentPage);

package/src/navigation/SkipLink/SkipLink.stories.js

@@ -1,9 +1,13 @@
 import SkipLink from '@digigov/ui/navigation/SkipLink';
+import doc from './doc.mdx?raw';
+
 export default {
   title: 'Digigov UI/navigation/SkipLink',
   description:
     'Use the skip link component to help keyboard-only users skip to the main content on a page.',
   component: SkipLink,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'SkipLink',
 };
 export { Default } from '@digigov/ui/navigation/SkipLink/__stories__/Default';

package/src/navigation/SkipLink/doc.mdx

@@ -0,0 +1,19 @@
+---
+id: skip-link
+title: SkipLink
+---
+
+# SkipLink
+
+SkipLink is a component that allows users to skip to the main content of the page.
+
+## How to use
+
+<code src="@digigov/ui/navigation/SkipLink/__stories__/Default.tsx" />
+
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps componentName={['SkipLink',]}/>