@digigov/ui 0.12.2 → 0.13.0

package/src/core/NavList/NavList.tsx

@@ -1,103 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import {
-  NavLinkInterface,
-  NavListProvider,
-} from '@digigov/ui/core/NavList/NavListContext';
-import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
-
-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 interface NavListProps {
-  children?: React.ReactNode;
-  className?: string;
-  horizontal?: boolean;
-  openSubMenus?: boolean;
-  floating?: boolean;
-  subMenu?: boolean;
-  links?: NavLinkInterface[];
-  style?: BaseCSSProperties;
-}
-
-export const NavListBase: React.FC<NavListProps> = ({
-  className,
-  children,
-  floating,
-  horizontal,
-  subMenu,
-  ...props
-}) => {
-  const classes = useNavListStyles();
-  return (
-    <nav>
-      <ul
-        style={props.style}
-        className={clsx(
-          className,
-          classes.root,
-          subMenu && classes.subMenu,
-          floating && classes.floating,
-          !horizontal && classes.vertical
-        )}
-      >
-        {children}
-      </ul>
-      <div className={classes.floatClear} />
-    </nav>
-  );
-};
-
-export const NavList: React.FC<NavListProps> = ({
-  horizontal,
-  openSubMenus = false,
-  links = [],
-  ...props
-}) => {
-  return (
-    <NavListProvider
-      openSubMenus={openSubMenus}
-      horizontal={horizontal}
-      links={links}
-    >
-      <NavListBase horizontal={horizontal} {...props} />
-    </NavListProvider>
-  );
-};
-
-export default NavList;

package/src/core/NavList/NavListContext.tsx

@@ -1,85 +0,0 @@
-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

@@ -1,143 +0,0 @@
-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';
-}
-
-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,
-  ...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}
-        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

@@ -1,146 +0,0 @@
-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;
-}
-
-export const NavListItemBase = React.forwardRef<
-  HTMLLIElement,
-  NavListItemBaseProps
->(function NavListItemBase(
-  {
-    href = '#',
-    label,
-    children,
-    className,
-    open = false,
-    horizontal = false,
-    selected = false,
-    isNested,
-    expandOn,
-    onClick,
-    ...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}
-    >
-      <div
-        className={clsx(
-          horizontal ? classes.horizontal : classes.vertical,
-          (selected || privateSelected) && classes.selected
-        )}
-      >
-        <Link href={href} className={classes.link} {...props}>
-          <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

@@ -1,33 +0,0 @@
-import React, { useContext } from 'react';
-import { NavListBase, NavListProps } from '@digigov/ui/core/NavList';
-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/index.spec.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import mountWithTheme from '@digigov/ui/test-utils/mountWithTheme';
-
-import Component from '@digigov/ui/core/NavList';
-
-it('renders the ErrorSummary with sample data', () => {
-  expect(
-    mountWithTheme(<Component>this is some random warning text</Component>)
-  ).toMatchSnapshot();
-});

package/src/core/NotificationBanner/index.spec.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import mountWithTheme from '@digigov/ui/test-utils/mountWithTheme';
-
-import NotificationBanner from '@digigov/ui/core/NotificationBanner';
-
-it('renders the notification banner', () => {
-  expect(
-    mountWithTheme(
-      <NotificationBanner title="Notification Banner Example">
-        this is a notification
-      </NotificationBanner>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the notification banner with title and link', () => {
-  expect(
-    mountWithTheme(
-      <NotificationBanner
-        title="Notification Banner Example"
-        link={{ url: '/', label: 'This is a label' }}
-      >
-        this is a notification
-      </NotificationBanner>
-    )
-  ).toMatchSnapshot();
-});

package/src/core/NotificationBanner/index.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import withDeprecation from '@digigov/ui/utils/withDeprecation';
-import CoreNotificationBanner, {
-  NotificationBannerProps as CoreNotificationBannerProps,
-} from '@digigov/react-core/NotificationBanner';
-import NotificationBannerHeader from '@digigov/react-core/NotificationBannerHeader';
-import NotificationBannerHeading from '@digigov/react-core/NotificationBannerHeading';
-import NotificationBannerContent from '@digigov/react-core/NotificationBannerContent';
-import NotificationBannerLink from '@digigov/react-core/NotificationBannerLink';
-
-export interface NotificationBannerProps extends CoreNotificationBannerProps {
-  variant?: 'important' | 'success';
-  title?: string;
-  link?: { url: string; label: string };
-  ref?: React.Ref<HTMLDivElement>;
-}
-
-export const NotificationBanner: React.FC<NotificationBannerProps> = withDeprecation(
-  ({ variant = 'important', title, link, children, ...props }) => {
-    const success = variant === 'success';
-    title = title ? title : success ? 'Success' : 'Important';
-    return (
-      <CoreNotificationBanner success={success} {...props}>
-        <NotificationBannerHeader>{title}</NotificationBannerHeader>
-        <NotificationBannerContent>
-          <NotificationBannerHeading>{children}</NotificationBannerHeading>
-          {link && (
-            <NotificationBannerLink href={link.url}>
-              {link.label}
-            </NotificationBannerLink>
-          )}
-        </NotificationBannerContent>
-      </CoreNotificationBanner>
-    );
-  },
-  {
-    name: 'NotificationBanner',
-    props: {
-      variant: {
-        warning: 'variant prop will be deprecated. Use success:boolean instead',
-      },
-    },
-  }
-);
-
-export {
-  NotificationBannerHeader,
-  NotificationBannerContent,
-  NotificationBannerHeading,
-  NotificationBannerLink,
-};
-export default NotificationBanner;

package/src/core/ServiceBadge/index.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import withDeprecation from '@digigov/ui/utils/withDeprecation';
-import PhaseBanner, { PhaseBannerProps } from '@digigov/react-core/PhaseBanner';
-import PhaseBannerTag from '@digigov/react-core/PhaseBannerTag';
-import PhaseBannerText from '@digigov/react-core/PhaseBannerText';
-interface ServiceBadgeProps extends PhaseBannerProps {
-  // badge text, defaults to 'BETA'
-  label?: string;
-  ref?: React.Ref<HTMLDivElement>;
-  text?: string;
-}
-
-export const ServiceBadge: React.FC<ServiceBadgeProps> = withDeprecation(
-  ({ label = 'BETA', text, children, ...props }) => {
-    return (
-      <PhaseBanner {...props}>
-        {children ? (
-          children
-        ) : (
-          <>
-            <PhaseBannerTag>{label}</PhaseBannerTag>
-            {text && <PhaseBannerText>{text}</PhaseBannerText>}
-          </>
-        )}
-        ;
-      </PhaseBanner>
-    );
-  },
-  {
-    name: 'ServiceBadge',
-    rename: 'PhaseBanner',
-  }
-);
-
-export default ServiceBadge;

package/src/core/SummaryList/index.spec.tsx

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { mount } from 'enzyme';
-
-import {
-  SummaryList,
-  SummaryListItem,
-  SummaryListItemKey,
-  SummaryListItemValue,
-  SummaryListItemAction,
-} from '@digigov/ui/core/SummaryList';
-
-it('renders the SummaryList with sample data', () => {
-  expect(
-    mount(
-      <SummaryList>
-        <SummaryListItem>
-          <SummaryListItemKey>Όνομα</SummaryListItemKey>
-          <SummaryListItemValue> Μάριος</SummaryListItemValue>
-          <SummaryListItemAction> Αλλαγή</SummaryListItemAction>
-        </SummaryListItem>
-        <SummaryListItem>
-          <SummaryListItemKey>Επώνυμο</SummaryListItemKey>
-          <SummaryListItemValue>Μενεξές</SummaryListItemValue>
-        </SummaryListItem>
-      </SummaryList>
-    )
-  ).toMatchSnapshot();
-});