@digigov/ui 0.11.0 → 0.12.2

package/src/core/NavList/NavListItemBase.tsx

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+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();
+});

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

@@ -1,7 +1,9 @@
 import { SummaryList } from '@digigov/react-core/SummaryList';
+
 export * from '@digigov/react-core/SummaryList';
 export * from '@digigov/react-core/SummaryListItemAction';
 export * from '@digigov/react-core/SummaryListItem';
 export * from '@digigov/react-core/SummaryListItemKey';
 export * from '@digigov/react-core/SummaryListItemValue';
+
 export default SummaryList;

package/src/core/Tabs/index.tsx

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+import Tabs from '@digigov/react-core/Tabs';
+import TabsList from '@digigov/react-core/TabsList';
+import TabsListItem from '@digigov/react-core/TabsListItem';
+import TabsPanel from '@digigov/react-core/TabsPanel';
+import TabsHeading from '@digigov/react-core/TabsHeading';
+import {
+  useTogglableSections,
+  UseTogglableSectionsReturn,
+} from '@digigov/ui/hooks/useTogglableSections';
+
+export interface UseTabsReturn extends UseTogglableSectionsReturn {
+  panel: (key: string) => { active: boolean; tabIndex: number; id: string };
+}
+export { Tabs, TabsList, TabsListItem, TabsPanel, TabsHeading };
+export const useTabs = (): UseTabsReturn => {
+  const { register, opened, ...rest } = useTogglableSections({
+    singleOpen: true,
+    toggleProperty: 'selected',
+    onToggleProperty: 'onClick',
+    firstOpen: true,
+    ariaNavigation: true,
+  });
+  const panel = useCallback(
+    (key: string) => {
+      return {
+        active: opened[key],
+        id: key,
+        tabIndex: opened[key] ? 1 : -1,
+      };
+    },
+    [opened]
+  );
+  return { register, opened, panel, ...rest };
+};
+export default Tabs;

package/src/core/WarningText/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/WarningText';
+
+it('renders the WarningText with sample data', () => {
+  expect(
+    mountWithTheme(<Component>this is some random warning text</Component>)
+  ).toMatchSnapshot();
+});

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

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

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

@@ -12,3 +12,6 @@ export * from '@digigov/ui/core/ServiceBadge';
 export * from '@digigov/ui/core/SummaryList';
 export * from '@digigov/ui/core/Tabs';
 export * from '@digigov/ui/core/NotificationBanner';
+export * from '@digigov/ui/core/Table';
+export * from '@digigov/ui/core/Button';
+export * from '@digigov/ui/core/Divider';

package/src/custom.d.ts

@@ -0,0 +1,8 @@
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}
+declare module '*.png' {
+  const content: any;
+  export default content;
+}

package/src/govgr/Footer/Copyright.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import CoreCopyright from '@digigov/react-core/Copyright';
+import { useTranslation } from '@digigov/ui/app';
+import Link from '@digigov/ui/core/Link';
+
+const getCopyright = () => {
+  const year = new Date().getFullYear();
+  return `© Copyright ${year}`;
+};
+
+export interface CopyrightProps {
+  copyright?: string;
+  createdBy?: React.ReactNode;
+  minDigitalCopyright?: boolean;
+}
+export const Copyright: React.FC<CopyrightProps> = ({
+  copyright = getCopyright(),
+  createdBy,
+  minDigitalCopyright,
+}) => {
+  const { t } = useTranslation();
+  const copyrightInfo = minDigitalCopyright
+    ? {
+        url: 'https://mindigital.gr',
+        label: t('footer.mindigital'),
+      }
+    : {
+        url: 'https://grnet.gr',
+        label: t('footer.grnet'),
+      };
+
+  return (
+    <CoreCopyright>
+      {copyright}
+      {' - '}
+      {createdBy || (
+        <>
+          {t('footer.created_by')}{' '}
+          <Link
+            href={copyrightInfo.url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {copyrightInfo.label}
+          </Link>{' '}
+          {!minDigitalCopyright && (
+            <>
+              {t('footer.using')}{' '}
+              <Link
+                href="https://mathe.ellak.gr/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {t('footer.open_source')}
+              </Link>
+            </>
+          )}
+        </>
+      )}
+    </CoreCopyright>
+  );
+};
+
+export default Copyright;

package/{govgr/Footer/HellenicRepublicLogo.d.ts → src/govgr/Footer/HellenicRepublicLogo.tsx}

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

package/src/govgr/Footer/LicenseCCSA.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import NormalText from '@digigov/react-core/NormalText';
+import { useTranslation } from '@digigov/ui/app';
+import Link from '@digigov/ui/core/Link';
+
+export const LicenseCCSA: React.FC = () => {
+  const { t } = useTranslation();
+  return (
+    <NormalText>
+      <>
+        {t('footer.creative_commons')}{' '}
+        <Link
+          href="https://creativecommons.org/licenses/by-sa/4.0/deed.el"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          CC-BY-SA
+        </Link>{' '}
+      </>
+    </NormalText>
+  );
+};
+
+export default LicenseCCSA;

package/src/govgr/Footer/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Copyright from '@digigov/ui/govgr/Footer/Copyright';
+import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
+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';
+
+export interface GovGRFooterProps extends FooterProps {
+  copyright?: React.ReactNode;
+  minDigitalCopyright?: boolean;
+  license?: string;
+  openSource?: string;
+  children?: React.ReactNode;
+  createdBy?: React.ReactNode;
+  className?: string;
+}
+export const GovGRFooter: React.FC<GovGRFooterProps> = ({
+  copyright,
+  children,
+  createdBy,
+  minDigitalCopyright,
+}: GovGRFooterProps) => {
+  return (
+    <Footer>
+      <FooterContainer>
+        {children || (
+          <FooterMeta>
+            <FooterMetaItem>
+              {copyright ? (
+                copyright
+              ) : (
+                <Copyright
+                  createdBy={createdBy}
+                  minDigitalCopyright={minDigitalCopyright}
+                />
+              )}
+            </FooterMetaItem>
+            <FooterMetaItem>
+              <HellenicRepublicLogo />
+            </FooterMetaItem>
+          </FooterMeta>
+        )}
+      </FooterContainer>
+    </Footer>
+  );
+};
+
+export default GovGRFooter;