@digigov/ui 0.28.3 → 0.29.0

package/src/core/Masthead/Masthead.stories.js

@@ -0,0 +1,11 @@
+import Masthead from '@digigov/ui/core/Masthead';
+export default {
+  title: 'Digigov UI/core/Masthead',
+  description:
+    'You can use the masthead at the top of the first page of a GOV.GR service, not at internal pages.',
+  link: 'https://guide.services.gov.gr/docs/components/masthead',
+  defaultWidth: 'l',
+  component: Masthead,
+  displayName: 'Masthead',
+};
+export * from '@digigov/ui/core/Masthead/__stories__/Default';

package/src/core/Masthead/Masthead.stories.playwright.json

@@ -0,0 +1,21 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-core-masthead--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "hover",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div>div>main>a"
+              }
+            }
+          ],
+          "id": "RjiejhT6-wyP",
+          "title": "Hover"
+        }
+      ]
+    }
+  }
+}

package/src/core/Masthead/__stories__/Default.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { Masthead, MastheadBody } from '@digigov/ui/layouts/Basic/Masthead';
+
+import { CallToAction } from '@digigov/ui/core/Button/CallToAction';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Heading } from '@digigov/ui/typography/Heading';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+
+export const Default = () => (
+  <Masthead>
+    <Container>
+      <Main>
+        <Heading>Σχεδιάστε την υπηρεσία σας, με το στυλ του GOV.GR</Heading>
+        <MastheadBody>
+          Χρησιμοποιείστε αυτόν τον οδηγό ώστε να φτιάξετε μια υπηρεσία συνεπή
+          στα πρότυπα του GOV.GR. Αποκτήστε γνώση από την έρευνα και την
+          εμπειρία άλλων ομάδων και αποφύγετε την επανάληψη εργασιών που έχουν
+          ήδη γίνει.
+        </MastheadBody>
+        <CallToAction href="#">Ξεκινήστε εδώ</CallToAction>
+      </Main>
+    </Container>
+  </Masthead>
+);
+
+export default Default;

package/src/core/Masthead/index.tsx

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

package/src/core/Masthead/masthead.mdx

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

package/src/core/NavList/NavHorizontal.tsx

@@ -0,0 +1,4 @@
+import NavHorizontal from '@digigov/react-core/NavHorizontal';
+
+export { NavHorizontal };
+export default NavHorizontal;

package/src/core/NavList/NavHorizontalList.tsx

@@ -0,0 +1,4 @@
+import NavHorizontalList from '@digigov/react-core/NavHorizontalList';
+
+export { NavHorizontalList };
+export default NavHorizontalList;

package/src/core/NavList/NavHorizontalListItem.tsx

@@ -0,0 +1,4 @@
+import NavHorizontalListItem from '@digigov/react-core/NavHorizontalListItem';
+
+export { NavHorizontalListItem };
+export default NavHorizontalListItem;

package/src/core/NavList/NavHorizontalListItemButton.tsx

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

package/src/core/NavList/NavHorizontalListItemLink.tsx

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

package/src/core/NavList/NavList.stories.js

@@ -0,0 +1,11 @@
+import NavList from '@digigov/ui/core/NavList';
+export default {
+  title: 'Digigov UI/core/NavList',
+  description:
+    'Use the navigation list component only when you need to show more options in one page.',
+  link: 'https://guide.services.gov.gr/docs/components/navigation-list',
+  component: NavList,
+  displayName: 'NavList',
+};
+export * from '@digigov/ui/core/NavList/__stories__/Default';
+export * from '@digigov/ui/core/NavList/__stories__/NavHorizontalLayout';

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

@@ -0,0 +1,33 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-core-navlist--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "hover",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(2)>div:nth-child(1)>a>span:nth-child(1)"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(2)>div:nth-child(1)>a>span:nth-child(1)"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            }
+          ],
+          "id": "WMfgyO3E_9S_",
+          "title": "Hover and click"
+        }
+      ]
+    }
+  }
+}

package/src/core/NavList/NavList.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { NavListProvider } from '@digigov/ui/core/NavList/NavListContext';
+import { NavListBase } from '@digigov/ui/core/NavList/NavListBase';
+import { NavListProps } from '@digigov/ui/core/NavList/types';
+
+export const NavList: React.FC<NavListProps> = ({
+  horizontal,
+  openSubMenus = false,
+  links = [],
+  role,
+  ...props
+}) => {
+  return (
+    <NavListProvider
+      openSubMenus={openSubMenus}
+      horizontal={horizontal}
+      links={links}
+    >
+      <NavListBase horizontal={horizontal} role={role} {...props} />
+    </NavListProvider>
+  );
+};
+
+export default NavList;

package/src/core/NavList/NavListBase.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core/styles';
+import { NavListProps } from '@digigov/ui/core/NavList/types';
+
+export const useNavListStyles = makeStyles(
+  (theme) => ({
+    root: {
+      padding: theme.spacing(0),
+      margin: theme.spacing(0),
+      display: 'flex',
+      '&$vertical': {
+        flexDirection: 'column',
+      },
+    },
+    subMenu: {
+      marginLeft: theme.spacing(3),
+    },
+    floating: {
+      left: 0,
+      zIndex: 99,
+      position: 'absolute',
+      background: theme.palette.grey['100'],
+      borderTop: `1px solid ${theme.palette.grey['500']}`,
+      borderRight: `1px solid ${theme.palette.grey['500']}`,
+      borderLeft: `1px solid ${theme.palette.grey['500']}`,
+      margin: theme.spacing(1.5, 0, 0, 0),
+      boxShadow: theme.shadows[3],
+      '& > li': {
+        width: '100%',
+        borderBottom: `1px solid ${theme.palette.grey['500']}`,
+        margin: 0,
+      },
+    },
+    vertical: {},
+    floatClear: {
+      clear: 'both',
+    },
+  }),
+  { name: 'MuiNavList' }
+);
+
+export const NavListBase: React.FC<NavListProps> = ({
+  className,
+  children,
+  floating,
+  horizontal,
+  subMenu,
+  role,
+  ...props
+}) => {
+  const classes = useNavListStyles();
+  return (
+    <nav>
+      <ul
+        style={props.style}
+        role={role}
+        className={clsx(
+          className,
+          classes.root,
+          subMenu && classes.subMenu,
+          floating && classes.floating,
+          !horizontal && classes.vertical
+        )}
+      >
+        {children}
+      </ul>
+      <div className={classes.floatClear} />
+    </nav>
+  );
+};

package/src/core/NavList/NavListContext.tsx

@@ -0,0 +1,85 @@
+import React, { createContext, useEffect, useState } from 'react';
+
+export interface NavLinkInterface {
+  name?: string;
+  label?: string;
+  href?: string;
+  children?: React.ReactNode;
+  subMenu?: NavLinkInterface[];
+}
+
+export interface NavListContextInterface {
+  openSubMenus?: boolean;
+  horizontal?: boolean;
+  showDividers?: boolean;
+  links: NavLinkInterface[];
+  activeLink?: NavLinkInterface;
+  activeSubMenu?: NavLinkInterface[];
+  onSubMenuActive?: (name: string) => void;
+}
+
+export const NavListContext = createContext<NavListContextInterface>({
+  horizontal: false,
+  openSubMenus: false,
+  links: [],
+  activeLink: {},
+  activeSubMenu: [],
+});
+
+const TRAILING_SLASH = /\/$/gm;
+export const NavListProvider: React.FC<NavListContextInterface> = ({
+  children,
+  openSubMenus = false,
+  horizontal = false,
+  showDividers = false,
+  links = [],
+}) => {
+  const [activeSubMenu, setActiveSubMenu] = useState<NavLinkInterface[]>([]);
+  const [activeLink, setActiveLink] = useState<NavLinkInterface>({});
+  useEffect(() => {
+    const currentActiveLink = links.find((link) => {
+      if (link.subMenu?.length) {
+        return !!~link.subMenu.findIndex(
+          (subMenuLink) =>
+            window?.location.pathname.replace(TRAILING_SLASH, '') ===
+            subMenuLink.href?.replace(TRAILING_SLASH, '')
+        );
+      } else {
+        return (
+          window?.location.pathname.replace(TRAILING_SLASH, '') ===
+            link.href?.replace(TRAILING_SLASH, '') || false
+        );
+      }
+    }) || { label: '', href: '' };
+    setActiveLink(currentActiveLink);
+  }, [links]);
+  const onSubMenuActive = (href: string): void => {
+    if (href === null) {
+      setActiveSubMenu([]);
+    }
+    const link = links.find(
+      (link) => link.href === href && link.subMenu && link.subMenu.length
+    );
+    if (link && link.subMenu) {
+      setActiveSubMenu(link.subMenu);
+    }
+  };
+
+  return (
+    <NavListContext.Provider
+      value={{
+        openSubMenus,
+        horizontal,
+        showDividers,
+        links,
+        activeLink,
+        activeSubMenu,
+        onSubMenuActive,
+      }}
+    >
+      {children}
+    </NavListContext.Provider>
+  );
+};
+
+export default NavListContext;

package/src/core/NavList/NavListItem.tsx

@@ -0,0 +1,146 @@
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import Divider from '@digigov/react-core/SectionBreak';
+import { makeStyles } from '@material-ui/core/styles';
+import NavListItemBase from '@digigov/ui/core/NavList/NavListItemBase';
+import NavListSubMenu from '@digigov/ui/core/NavList/NavListSubMenu';
+import NavListContext from '@digigov/ui/core/NavList/NavListContext';
+import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
+
+export interface NavListItemProps {
+  name?: string;
+  label?: string;
+  children?: React.ReactNode;
+  className?: string;
+  href?: string;
+  selected?: boolean;
+  expandOn?: 'hover' | 'click';
+  role?: string;
+}
+
+export const useNavListItemStyles = makeStyles(
+  (theme) => ({
+    root: {},
+    link: {
+      padding: theme.spacing(0.5, 2),
+      textDecoration: 'none',
+      '&:hover': {
+        textDecoration: 'underline',
+      },
+    },
+    selected: {
+      borderStyle: 'solid',
+      borderColor: theme.palette.secondary.main,
+      fontWeight: 'bolder',
+    },
+  }),
+  { name: 'MuiNavListItem' }
+);
+
+export const NavListItem: React.FC<NavListItemProps> = ({
+  name,
+  expandOn = 'click',
+  children,
+  href,
+  className,
+  selected: passSelected,
+  role,
+  ...props
+}) => {
+  const [open, setOpen] = useState(false);
+  const [style, setStyle] = useState<BaseCSSProperties>({});
+  const ref = useRef<HTMLLIElement>(null);
+  const [delayHandler, setDelayHandler] = useState<
+    ReturnType<typeof setTimeout>
+  >();
+  const [selected, setSelected] = useState(passSelected || false);
+  const classes = useNavListItemStyles();
+  const {
+    openSubMenus,
+    horizontal,
+    showDividers,
+    activeLink,
+    links,
+  } = useContext(NavListContext);
+  const { href: contextHref, label, subMenu } =
+    links.find((link) => link.name === name) || {};
+
+  useEffect(() => {
+    if (activeLink?.name && name) {
+      setSelected(activeLink.name === name);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeLink?.name]);
+
+  const toggleOpen = (): void => {
+    setOpen(!open);
+  };
+  const handleOpen = (): void => {
+    if (subMenu && subMenu.length) {
+      setDelayHandler(
+        setTimeout(() => {
+          setOpen(true);
+        }, 300)
+      );
+    }
+  };
+  const handleClose = (): void => {
+    if (subMenu && subMenu.length) {
+      if (delayHandler) clearTimeout(delayHandler);
+      setOpen(false);
+    }
+  };
+  useEffect(() => {
+    if (
+      ref?.current?.clientWidth &&
+      horizontal &&
+      ref.current.clientWidth !== style.width
+    ) {
+      setStyle({
+        top: ref.current.clientHeight - 12,
+        width: ref.current.clientWidth,
+      });
+    }
+  }, [
+    horizontal,
+    style.width,
+    ref.current?.clientWidth,
+    ref.current?.clientHeight,
+  ]);
+
+  const handlerProps =
+    expandOn === 'hover'
+      ? {
+          onMouseEnter: handleOpen,
+          onMouseLeave: handleClose,
+        }
+      : {
+          onClick: toggleOpen,
+        };
+
+  return (
+    <>
+      <NavListItemBase
+        ref={ref}
+        href={contextHref || href}
+        label={label || children}
+        expandOn={expandOn}
+        open={open}
+        selected={selected}
+        isNested={subMenu && subMenu.length > 0}
+        horizontal={horizontal}
+        role={role}
+        className={clsx(className, classes.root)}
+        {...handlerProps}
+        {...props}
+      >
+        {(open || openSubMenus) && subMenu && subMenu.length && (
+          <NavListSubMenu style={style} links={subMenu} />
+        )}
+      </NavListItemBase>
+      {!horizontal && showDividers && <Divider />}
+    </>
+  );
+};
+
+export default NavListItem;

package/src/core/NavList/NavListItemBase.tsx

@@ -0,0 +1,149 @@
+import React, { useState, useEffect } from 'react';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core/styles';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import Link from '@digigov/ui/core/Link';
+import { useRouter } from '@digigov/ui/router';
+
+const TRAILING_SLASH = /\/$/gm;
+export const useNavListItemBaseStyles = makeStyles(
+  (theme) => {
+    const transition = {
+      duration: theme.transitions.duration.shortest,
+    };
+    return {
+      root: {
+        position: 'relative',
+        listStyle: 'none',
+        boxSizing: 'border-box',
+        textAlign: 'left',
+        margin: theme.spacing(0),
+        ...theme.typography.body1,
+        '&$horizontal': {
+          flexDirection: 'column',
+        },
+      },
+      link: {
+        display: 'flex',
+        flexGrow: 1,
+        padding: theme.spacing(1),
+        textDecoration: 'none',
+        '&:hover': {
+          textDecoration: 'underline',
+        },
+      },
+      selected: {
+        fontWeight: 'bolder',
+        '&$horizontal': {
+          borderStyle: 'solid',
+          borderColor: theme.palette.secondary.main,
+          borderTop: 0,
+          borderLeft: 0,
+          borderRight: 0,
+        },
+        '&$vertical': {
+          border: 0,
+        },
+      },
+      // Pseudoclasses - do not remove //
+      horizontal: {},
+      vertical: {},
+      // End Pseudoclasses //
+      label: {
+        display: 'flex',
+        alignItems: 'center',
+        flex: 'auto',
+      },
+      icon: {
+        display: 'flex',
+        alignItems: 'center',
+        transform: 'rotate(0deg)',
+        transition: theme.transitions.create('transform', transition),
+        '&$open': {
+          transform: 'rotate(180deg)',
+        },
+      },
+      submenu: {
+        display: 'flex',
+      },
+      /* Pseudo-class applied to the Expand icon if `open={true}`. */
+      open: {},
+    };
+  },
+  { name: 'MuiNavListItemBase' }
+);
+export interface NavListItemBaseProps {
+  children?: React.ReactNode;
+  href?: string;
+  label?: React.ReactNode;
+  className?: string;
+  expandOn?: 'hover' | 'click';
+  selected?: boolean;
+  isNested?: boolean;
+  horizontal?: boolean;
+  open?: boolean;
+  onClick?: (e: any) => void;
+  role?: string;
+}
+
+export const NavListItemBase = React.forwardRef<
+  HTMLLIElement,
+  NavListItemBaseProps
+>(function NavListItemBase(
+  {
+    href = '#',
+    label,
+    children,
+    className,
+    open = false,
+    horizontal = false,
+    selected = false,
+    isNested,
+    expandOn,
+    onClick,
+    role,
+    ...props
+  },
+  ref
+) {
+  const classes = useNavListItemBaseStyles();
+  const [privateSelected, setPrivateSelected] = useState<boolean>(selected);
+  const { router } = useRouter();
+
+  useEffect(() => {
+    const asPath = router?.asPath.split('?').shift();
+    const isSelected =
+      asPath?.replace(TRAILING_SLASH, '') === href.replace(TRAILING_SLASH, '');
+    if (isSelected !== privateSelected) {
+      setPrivateSelected(isSelected);
+    }
+  }, [href, router?.asPath, selected, privateSelected]);
+  return (
+    <li
+      ref={ref}
+      className={clsx(
+        className,
+        classes.root,
+        horizontal && classes.horizontal
+      )}
+      onClick={onClick}
+      role="none"
+    >
+      <div
+        className={clsx(
+          horizontal ? classes.horizontal : classes.vertical,
+          (selected || privateSelected) && classes.selected
+        )}
+      >
+        <Link href={href} className={classes.link} {...props} role={role}>
+          <span className={classes.label}>{label}</span>
+          <span className={clsx(classes.icon, open && classes.open)}>
+            {isNested && <ExpandMore />}
+          </span>
+        </Link>
+      </div>
+      <div className={classes.submenu}>{children}</div>
+    </li>
+  );
+});
+export default NavListItemBase;

package/src/core/NavList/NavListSubMenu.tsx

@@ -0,0 +1,34 @@
+import React, { useContext } from 'react';
+import { NavListProps } from '@digigov/ui/core/NavList/types';
+import { NavListBase } from '@digigov/ui/core/NavList/NavListBase';
+import NavListItemBase from '@digigov/ui/core/NavList/NavListItemBase';
+import NavListContext, {
+  NavLinkInterface,
+} from '@digigov/ui/core/NavList/NavListContext';
+
+export interface NavListSubMenuProps extends NavListProps {
+  links: NavLinkInterface[];
+}
+
+export const NavListSubMenu: React.FC<NavListSubMenuProps> = ({
+  links,
+  ...props
+}) => {
+  const { horizontal } = useContext(NavListContext);
+  return (
+    <NavListBase subMenu floating={horizontal} {...props}>
+      {links &&
+        links.map((subMenuLink, key) => {
+          return (
+            <NavListItemBase
+              expandOn="hover"
+              key={key}
+              href={subMenuLink.href}
+              label={subMenuLink.label}
+            />
+          );
+        })}
+    </NavListBase>
+  );
+};
+export default NavListSubMenu;

package/src/core/NavList/NavMenu.tsx

@@ -0,0 +1,4 @@
+import NavMenu from '@digigov/react-core/NavMenu';
+
+export { NavMenu };
+export default NavMenu;

package/src/core/NavList/NavMenuContainer.tsx

@@ -0,0 +1,4 @@
+import NavMenuContainer from '@digigov/react-core/NavMenuContainer';
+
+export { NavMenuContainer };
+export default NavMenuContainer;