@digigov/ui 0.11.0 → 0.12.2

package/src/app/NotFound/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PageTitle from '@digigov/react-core/PageTitle';
+import PageTitleHeading from '@digigov/react-core/PageTitleHeading';
+import Paragraph from '@digigov/react-core/Paragraph';
+import { useTranslation } from '@digigov/ui/app';
+
+export const NotFound: React.FC = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <PageTitle>
+        <PageTitleHeading>{t('notfound.page_not_found')}</PageTitleHeading>
+      </PageTitle>
+      <Paragraph>{t('notfound.wrong_key_address')}</Paragraph>
+      <Paragraph>{t('notfound.wrong_cp_address')}</Paragraph>
+      <Paragraph>{t('notfound.service_contact')}</Paragraph>
+    </>
+  );
+};
+
+export default NotFound;

package/src/app/OutdatedBrowserBanner.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { WarningText } from '@digigov/ui/core/WarningText';
+import Paragraph from '@digigov/ui/typography/Paragraph';
+import useOutdatedBrowserCheck from '@digigov/ui/hooks/useOutdatedBrowserCheck';
+import Link from '@digigov/ui/core/Link';
+import { isMobile } from '@digigov/ui/utils/evaluateBrowserVersion';
+import { useTranslation } from '@digigov/ui/app/';
+
+export default function OutdatedBrowserBanner(): JSX.Element {
+  const mob = isMobile;
+  const [shouldUpdate, updateLink] = useOutdatedBrowserCheck();
+  const { t } = useTranslation();
+  return (
+    <WarningText>
+      {shouldUpdate ? (
+        <>
+          {mob.any() ? (
+            <>
+              <Paragraph>{t('outdated.mobile')}</Paragraph>
+            </>
+          ) : (
+            <>
+              <Paragraph>
+                {t('outdated.web')}
+                <Link href={updateLink} target="_blank">
+                  {updateLink}{' '}
+                </Link>
+              </Paragraph>
+            </>
+          )}
+        </>
+      ) : (
+        <></>
+      )}
+    </WarningText>
+  );
+}

package/src/app/PageTitle.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import Caption, { CaptionProps } from '@digigov/ui/typography/Caption';
+import Title, { TitleProps } from '@digigov/ui/typography/Title';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+
+export const PageTitle: React.FC<{}> = withDeprecation(
+  ({ children }) => {
+    return <>{children}</>;
+  },
+  {
+    name: 'PageTitle',
+    warning:
+      'There is no need to use PageTitle components anymore. It will be removed in a later version',
+  }
+);
+
+export default PageTitle;
+
+export const PageTitleSection: React.FC<{}> = withDeprecation(
+  ({ children }) => {
+    return <>{children}</>;
+  },
+  {
+    name: 'PageTitleSection',
+    warning:
+      'There is no need to use PageTitleSection components anymore. It will be removed in a later version',
+  }
+);
+
+export const PageTitleCaption: React.FC<CaptionProps> = withDeprecation(
+  Caption,
+  {
+    name: 'PageTitleCaption',
+    rename: 'Caption',
+  }
+);
+
+export interface PageTitleHeadingProps extends TitleProps { }
+
+export const PageTitleHeading: React.FC<TitleProps> = withDeprecation(
+  ({ component, children, ...props }) => {
+    return (
+      <Title size="xl" element={component} {...props}>
+        {children}
+      </Title>
+    );
+  },
+  {
+    name: 'PageTitleHeading',
+    props: {
+      dense: {
+        error: true,
+      },
+      size: {
+        values: {
+          xs: {
+            error: true,
+          },
+        },
+      },
+      component: {
+        values: {
+          h5: {
+            error: true,
+          },
+        },
+      },
+    },
+  }
+);

package/src/app/QrCodeScanner/index.spec.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+
+import QrCodeScanner from '@digigov/ui/app/QrCodeScanner';
+
+it('renders the qr code scanner', () => {
+  expect(
+    mount(
+      <QrCodeScanner
+        onScan={(args) => {
+          console.log(args);
+        }}
+        onError={(args) => {
+          console.log(args);
+        }}
+      />
+    )
+  ).toMatchSnapshot();
+});

package/src/app/QrCodeScanner/index.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+
+const QrReader = React.lazy(() => import('react-qr-reader'));
+
+export interface QrCodeScannerProps {
+  className?: string;
+  dataType?: 'url' | 'text';
+  children?: React.ReactNode;
+  legacyMode?: boolean;
+  validate?: (...args) => boolean;
+  onScan: (...args) => void;
+  onError: (err: any) => void;
+}
+
+/**
+ * QRCodeScanner assumes that the data provided inside the QR code image,
+ * are a HTTP link, thus it uses the `encodeURI` function to escape
+ * all scanned data that will be forwarded to the `onScan` function
+ *
+ * When a QR code is scanned, before we run the `onScan` callback function,
+ * we do the following:
+ *
+ * 1. Run a validator function provided in the props of QrCodeScanner component
+ *    that receives the *raw* scanned data and returns a boolean type. (eg. check
+ *    if it's a gov.gr subdomain, or that it matches the current domain)
+ * 2. If the validator returns `true`, then construct a URL object from the data provided
+ *    and check if the protocol is `https` and the `origin` is the same as the origin of this page
+ * 2. Automatically fallback to the `onError` callback function, if the validation or url check fail
+ * 3. Finally, run `onScan` callback function with the scanned data encoded as a URI.
+ *
+ */
+
+export const QrCodeScanner: React.FC<QrCodeScannerProps> = ({
+  className,
+  children,
+  validate,
+  onScan,
+  onError,
+  dataType = 'url',
+  legacyMode = false,
+}) => {
+  if (dataType === 'text') {
+    console.warn(
+      `Security Warning! The \`text\` dataType could be used to inject XSS code to your application database or user DOM.
+
+In order to be safe, you can:
+1. Use a sanitizer function inside the \`onScan\` callback function that makes sure the data is not posing a threat to your app
+2. Contact @digigov-ui for any further details and feature requests.
+3. Read more about xss https://owasp.org/www-community/attacks/xss/
+`
+    );
+  }
+  const handleOnScan = (data) => {
+    if (data) {
+      if (dataType === 'url') {
+        if (
+          !data.match(
+            /^https?:\/\/([a-z0-9-]*\.?)*(:?)(([a-z0-9-]*)\/)*([a-z0-9-]*)$/gi
+          )
+        ) {
+          return onError(
+            new Error(
+              '@digigov-ui XSS Validation failed: qr code payload should follow the pattern `https://example.com/data/:id`'
+            )
+          );
+        }
+      }
+      // run a validator function provided by the application code
+      if (validate && !validate(data)) {
+        return onError(new Error('Custom QR Code payload validation failed'));
+      }
+      // proceed with application defined callback function
+      onScan(data);
+    }
+  };
+  return (
+    <>
+      <QrReader
+        className={className}
+        delay={100}
+        onError={onError}
+        onScan={handleOnScan}
+        legacyMode={legacyMode}
+      />
+      {children}
+    </>
+  );
+};
+
+export default QrCodeScanner;

package/src/app/i18n.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import el from '@digigov/ui/locales/el';
+export interface I18NContextProps {
+  t: (str: string) => string;
+  children?: React.ReactNode;
+  i18n?: any;
+}
+const defaultTranslate = (key) => {
+  try {
+    if (key.split('.').length > 0) {
+      return key.split('.').reduce((locale, path) => {
+        return locale[path] ? locale[path] : key;
+      }, el);
+    } else if (el[key]) {
+      return el[key];
+    } else {
+      return key;
+    }
+  } catch (err) {
+    console.error(`Translation key \`${key}\` not found`);
+    return key;
+  }
+};
+export const I18NContext = React.createContext<I18NContextProps>({
+  t: defaultTranslate,
+});
+
+export const I18NProvider: React.FC<I18NContextProps> = ({
+  t = defaultTranslate,
+  children,
+  ...props
+}: I18NContextProps) => {
+  return (
+    <I18NContext.Provider value={{ t, ...props }}>
+      {children}
+    </I18NContext.Provider>
+  );
+};
+
+export const useTranslation = (): I18NContextProps => {
+  return React.useContext(I18NContext);
+};
+
+export default I18NProvider;

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemDetails,
+  AccordionItemSummary,
+} from '@digigov/ui/core/Accordion';
+
+it('renders the Accordion', () => {
+  expect(
+    mount(
+      <Accordion>
+        <AccordionItem>
+          <AccordionItemSummary>Βασικες Ρυθμισεις</AccordionItemSummary>
+          <AccordionItemDetails>
+            Περιεχομενο Βασικων Ρυθμισεων
+          </AccordionItemDetails>
+        </AccordionItem>
+        <AccordionItem>
+          <AccordionItemSummary>Υπολοιπες Ρυθμισεις</AccordionItemSummary>
+          <AccordionItemDetails>
+            Περιεχομενο Υπολοιπων Ρυθμισεων
+          </AccordionItemDetails>
+        </AccordionItem>
+      </Accordion>
+    )
+  ).toMatchSnapshot();
+});

package/src/core/Accordion/index.tsx

@@ -0,0 +1,86 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import Accordion from '@digigov/react-core/Accordion';
+import AccordionSection from '@digigov/react-core/AccordionSection';
+import AccordionSectionContent from '@digigov/react-core/AccordionSectionContent';
+import AccordionSectionHeader from '@digigov/react-core/AccordionSectionHeader';
+import AccordionControls from '@digigov/react-core/AccordionControls';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+import {
+  useTogglableSections,
+  UseTogglableSectionsReturn,
+} from '@digigov/ui/hooks/useTogglableSections';
+import React, { useCallback, useMemo } from 'react';
+
+export const AccordionItemDetails = withDeprecation(AccordionSectionContent, {
+  name: 'AccordionItemDetails',
+  rename: 'AccordionSectionContent',
+});
+
+export const AccordionItemSummary = withDeprecation(AccordionSectionHeader, {
+  name: 'AccordionItemSummary',
+  rename: 'AccordionSectionHeader',
+});
+
+export const AccordionItem = withDeprecation(
+  React.memo(AccordionSection, (prev, next) => prev.open === next.open),
+  {
+    name: 'AccordionItem',
+    rename: 'AccordionSection',
+  }
+);
+export interface UseAccordionProps {
+  singleOpen?: boolean;
+}
+export interface UseAccordionReturn extends UseTogglableSectionsReturn {
+  isOpenAll: boolean;
+  openAll: () => void;
+  closeAll: () => void;
+}
+const useAccordion = (props: UseAccordionProps): UseAccordionReturn => {
+  const {
+    register,
+    setOpened,
+    opened,
+    registered,
+    ...rest
+  } = useTogglableSections({
+    toggleProperty: 'open',
+    onToggleProperty: 'onClick',
+    singleOpen: props && !!props.singleOpen,
+  });
+  const keys = useMemo(() => Object.keys(registered.current), [
+    registered.current.length,
+  ]);
+  const openAll = useCallback(() => {
+    setOpened(
+      keys.reduce(
+        (newOpened, key) => ({
+          ...newOpened,
+          [key]: true,
+        }),
+        {}
+      )
+    );
+  }, [keys]);
+  const closeAll = useCallback(() => setOpened({}), []);
+
+  return {
+    register,
+    openAll,
+    closeAll,
+    isOpenAll: keys.length ? keys.every((v) => opened[v]) : false,
+    setOpened,
+    opened,
+    registered,
+    ...rest,
+  };
+};
+export {
+  Accordion,
+  AccordionControls,
+  AccordionSection,
+  AccordionSectionContent,
+  AccordionSectionHeader,
+  useAccordion,
+};
+export default Accordion;

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

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

package/{esm/core/Blockquote/index.js → src/core/Blockquote/index.tsx}

@@ -1,16 +1,18 @@
 import CoreBlockquote from '@digigov/react-core/Blockquote';
 import withDeprecation from '@digigov/ui/utils/withDeprecation';
-export var Blockquote = withDeprecation(CoreBlockquote, {
+
+export const Blockquote = withDeprecation(CoreBlockquote, {
   name: 'Blockquote',
   props: {
     variant: {
       values: {
         info: {
-          warning: true
-        }
+          warning: true,
+        },
       },
-      error: true
-    }
-  }
+      error: true,
+    },
+  },
 });
-export default Blockquote;
+
+export default Blockquote;

package/{esm/core/Button/BackButton.js → src/core/Button/BackButton.tsx}

@@ -1,21 +1,23 @@
 import BackLink from '@digigov/react-core/BackLink';
 import withDeprecation from '@digigov/ui/utils/withDeprecation';
-export var BackButton = withDeprecation(BackLink, {
+
+export const BackButton = withDeprecation(BackLink, {
   name: 'BackButton',
   rename: 'BackLink',
   props: {
     variant: {
-      error: true
+      error: true,
     },
     size: {
-      error: true
+      error: true,
     },
     xsFullWidth: {
-      error: true
+      error: true,
     },
     startIcon: {
-      error: true
-    }
-  }
+      error: true,
+    },
+  },
 });
-export default BackButton;
+
+export default BackButton;

package/src/core/Button/ButtonLink.tsx

@@ -0,0 +1,20 @@
+import CoreButtonLink, {
+  ButtonLinkProps as CoreButtonLinkProps,
+} from '@digigov/react-core/ButtonLink';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+
+export type ButtonLinkProps = CoreButtonLinkProps;
+export const ButtonLink = withDeprecation(CoreButtonLink, {
+  name: 'ButtonLink',
+  props: {
+    variant: {
+      error: true,
+    },
+    size: {
+      error: true,
+    },
+    xsFullWidth: {
+      error: true,
+    },
+  },
+});

package/src/core/Button/CallToAction.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import CoreCallToAction, {
+  CallToActionProps as CoreCallToActionProps,
+} from '@digigov/react-core/CallToAction';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+
+export interface CallToActionProps extends CoreCallToActionProps {
+  label?: string;
+}
+
+export const CallToAction: React.FC<CallToActionProps> = withDeprecation(
+  ({ label = 'Start here', children, ...props }) => {
+    return <CoreCallToAction {...props}>{children || label}</CoreCallToAction>;
+  },
+  {
+    name: 'CallToAction',
+    props: {
+      variant: {
+        error: true,
+      },
+      size: {
+        error: true,
+      },
+      xsFullWidth: {
+        error: true,
+      },
+    },
+  }
+);
+
+export default CallToAction;

package/src/core/Button/Icon.tsx

@@ -0,0 +1,9 @@
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export const ButtonIcon = withDeprecation(() => {}, {
+  name: 'ButtonIcon',
+  error: true,
+});
+
+export default ButtonIcon;

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+
+import Component from '@digigov/ui/core/Button';
+
+it('renders the button', () => {
+  expect(mount(<Component>hello</Component>)).toMatchSnapshot();
+});

package/src/core/Button/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import CoreButton, {
+  ButtonProps as CoreButtonProps,
+} from '@digigov/react-core/Button';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+
+export type ButtonProps = CoreButtonProps;
+
+export const Button = withDeprecation(CoreButton, {
+  name: 'Button',
+  props: {
+    href: {
+      error: 'To use a button with a link import ButtonLink instead',
+    },
+    /* variant: {
+      error: true,
+    }, */
+    size: {
+      error: true,
+    },
+    xsFullWidth: {
+      error: true,
+    },
+  },
+});
+
+export default Button;
+
+export interface ContinueButtonProps extends ButtonProps {
+  label?: string;
+  ref?: React.Ref<HTMLButtonElement>;
+}
+
+export const ContinueButton: React.FC<ContinueButtonProps> = ({
+  label = 'Continue',
+  children,
+  ...props
+}) => {
+  return <Button {...props}>{label || children}</Button>;
+};
+
+export * from '@digigov/ui/core/Button/BackButton';
+export * from '@digigov/ui/core/Button/CallToAction';
+export * from '@digigov/ui/core/Button/ButtonLink';
+export * from '@digigov/ui/core/Button/Icon';
+export * from '@digigov/react-core/ButtonGroup';

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+
+import {
+  Details,
+  DetailsContent,
+  DetailsSummary,
+} from '@digigov/ui/core/Details';
+
+it('renders the closed Details component', () => {
+  expect(
+    mount(
+      <Details>
+        <DetailsSummary>Help with nationality</DetailsSummary>
+        <DetailsContent>
+          We need to know your nationality so we can work out which elections
+          you’re entitled to vote in. If you cannot provide your nationality,
+          you’ll have to send copies of identity documents through the post.
+        </DetailsContent>
+      </Details>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the open Details component', () => {
+  expect(
+    mount(
+      <Details open>
+        <DetailsSummary>Help with nationality</DetailsSummary>
+        <DetailsContent>
+          We need to know your nationality so we can work out which elections
+          you’re entitled to vote in. If you cannot provide your nationality,
+          you’ll have to send copies of identity documents through the post.
+        </DetailsContent>
+      </Details>
+    )
+  ).toMatchSnapshot();
+});

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

@@ -1,5 +1,7 @@
 import Details from '@digigov/react-core/Details';
 import DetailsContent from '@digigov/react-core/DetailsContent';
 import DetailsSummary from '@digigov/react-core/DetailsSummary';
+
 export { Details, DetailsContent, DetailsSummary };
+
 export default Details;