@digigov/ui 0.11.0 → 0.12.2

package/src/core/Divider/index.tsx

@@ -0,0 +1,13 @@
+import CoreSectionBreak, {
+  SectionBreakProps as CoreSectionBreakProps,
+} from '@digigov/react-core/SectionBreak';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+
+export type SectionBreakProps = CoreSectionBreakProps;
+
+export const SectionBreak = withDeprecation(CoreSectionBreak, {
+  name: 'Divider',
+  rename: 'SectionBreak',
+});
+
+export default SectionBreak;

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

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

package/{core/ErrorSummary/index.d.ts → src/core/ErrorSummary/index.tsx}

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

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+
+import Component, { LinkProvider } from '@digigov/ui/core/Link';
+
+const CustomLink: React.FC<{}> = (props) => {
+  return <div>{props.children}</div>;
+};
+
+it('renders the Link', () => {
+  expect(mount(<Component>hello</Component>)).toMatchSnapshot();
+});
+
+it('Provider', () => {
+  expect(
+    mount(
+      <LinkProvider component={CustomLink}>
+        <Component>hello</Component>
+      </LinkProvider>
+    )
+  ).toMatchSnapshot();
+});

package/src/core/Link/index.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { LinkProps as CoreLinkProps } from '@digigov/react-core/Link';
+
+export interface LinkComponentContextProps {
+  component: React.ElementType<LinkProps>;
+}
+
+export const CommonLink: React.FC<LinkProps> = (props) => (
+  <a {...props}>{props.children}</a>
+);
+
+const LinkComponentContext = React.createContext<React.ElementType<LinkProps>>(
+  CommonLink
+);
+export const LinkProvider: React.FC<LinkComponentContextProps> = (props) => {
+  return (
+    <LinkComponentContext.Provider value={props.component}>
+      {props.children}
+    </LinkComponentContext.Provider>
+  );
+};
+
+export interface LinkProps extends CoreLinkProps {
+  ref?: React.Ref<HTMLAnchorElement>;
+}
+
+const Link: React.ExoticComponent<LinkProps> = React.forwardRef(
+  function WrappedLink(
+    { children, href = '', ...props },
+    ref: React.Ref<HTMLAnchorElement>
+  ) {
+    const LinkComponent = React.useContext(LinkComponentContext);
+    return (
+      <LinkComponent ref={ref} href={href} {...props}>
+        {children}
+      </LinkComponent>
+    );
+  }
+);
+
+export default Link;

package/{core/List/List.d.ts → src/core/List/List.tsx}

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

package/{core/List/ListItem.d.ts → src/core/List/ListItem.tsx}

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

package/src/core/List/ListItemContent.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useListItemContenttyles = makeStyles(
+  (theme) => ({
+    root: {
+      flexGrow: 1,
+      padding: theme.spacing(0, 2),
+    },
+  }),
+  { name: 'MuiListItemContent' }
+);
+
+export interface ListItemContentProps {
+  className?: string;
+}
+
+export const ListItemContent: React.FC<ListItemContentProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  const classes = useListItemContenttyles();
+  return (
+    <div className={clsx(className, classes.root)} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export default ListItemContent;

package/src/core/List/ListItemIcon.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core/styles';
+import Avatar, { AvatarProps } from '@material-ui/core/Avatar';
+
+export const useListItemIconStyles = makeStyles(
+  () => ({
+    root: {},
+  }),
+  { name: 'MuiListItemIcon' }
+);
+
+export interface ListItemIconProps extends AvatarProps {}
+
+export const ListItemIcon: React.FC<ListItemIconProps> = ({
+  className,
+  children,
+  style,
+  ...props
+}) => {
+  const classes = useListItemIconStyles();
+  return (
+    <div style={style} className={clsx(className, classes.root)}>
+      <Avatar variant="rounded" {...props}>
+        {children}
+      </Avatar>
+    </div>
+  );
+};
+
+export default ListItemIcon;

package/src/core/List/ListItemText.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import NormalText, { NormalTextProps } from '@digigov/ui/typography/NormalText';
+
+export const useListItemTextStyles = makeStyles(
+  () => ({
+    root: {},
+  }),
+  { name: 'MuiListItemText' }
+);
+
+export interface ListItemTextProps extends NormalTextProps {
+  ref?: React.Ref<HTMLSpanElement>;
+}
+
+export const ListItemText: React.FC<ListItemTextProps> = ({
+  children,
+  ...props
+}) => {
+  return <NormalText {...props}>{children}</NormalText>;
+};
+
+export default ListItemText;

package/src/core/List/ListItemTitle.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Title, { TitleProps } from '@digigov/ui/typography/Title';
+import Link, { LinkProps } from '@digigov/ui/core/Link';
+
+export const useListItemTitleStyles = makeStyles(
+  () => ({
+    root: {},
+  }),
+  { name: 'MuiListItemTitle' }
+);
+
+export interface ListItemTitleProps extends TitleProps {
+  href?: string;
+  linkProps?: Omit<LinkProps, 'href'>;
+}
+
+export const ListItemTitle: React.FC<ListItemTitleProps> = ({
+  href,
+  linkProps,
+  children,
+  ...props
+}) => {
+  return (
+    <Title {...props}>
+      {href ? (
+        <Link href={href} {...linkProps}>
+          {children}
+        </Link>
+      ) : (
+        children
+      )}
+    </Title>
+  );
+};
+
+export default ListItemTitle;

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

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

package/src/core/NavList/NavList.tsx

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

@@ -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,143 @@
+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;