@digigov/react-core 0.18.1 → 0.19.0

package/src/ArrowIcon/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,115 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the ArrowIcon with direction down prop 1`] = `
+<ForwardRef(ArrowIcon)
+  direction="down"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-arrow--down"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-arrow--down govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-arrow--down govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(ArrowIcon)>
+`;
+
+exports[`renders the ArrowIcon with direction left prop 1`] = `
+<ForwardRef(ArrowIcon)
+  direction="left"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-arrow--left"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-arrow--left govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-arrow--left govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M14.8,22l2.4-2.3L9.6,12l7.6-7.6L14.8,2l-10,10L14.8,22z"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(ArrowIcon)>
+`;
+
+exports[`renders the ArrowIcon with direction up prop 1`] = `
+<ForwardRef(ArrowIcon)
+  direction="up"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-arrow--up"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-arrow--up govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-arrow--up govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M2,15.8l2.3,2.4l7.7-7.6l7.6,7.6l2.4-2.4l-10-10L2,15.8z"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(ArrowIcon)>
+`;
+
+exports[`renders the ArrowIcon with no props, direction prop is right by default 1`] = `
+<ForwardRef(ArrowIcon)>
+  <ForwardRef(SvgIcon)
+    className="govgr-arrow--right"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-arrow--right govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-arrow--right govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(ArrowIcon)>
+`;

package/src/ArrowIcon/index.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import ArrowIcon from '@digigov/react-core/ArrowIcon';
+
+it('renders the ArrowIcon with no props, direction prop is right by default', () => {
+  expect(mount(<ArrowIcon />)).toMatchSnapshot();
+});
+
+it('renders the ArrowIcon with direction left prop', () => {
+  expect(mount(<ArrowIcon direction="left" />)).toMatchSnapshot();
+});
+
+it('renders the ArrowIcon with direction up prop', () => {
+  expect(mount(<ArrowIcon direction="up" />)).toMatchSnapshot();
+});
+
+it('renders the ArrowIcon with direction down prop', () => {
+  expect(mount(<ArrowIcon direction="down" />)).toMatchSnapshot();
+});

package/src/ArrowIcon/index.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
+import clsx from 'clsx';
+export interface ArrowIconProps extends SvgIconProps {
+  ref?: React.Ref<SVGSVGElement>;
+  /**
+   * direction is optional.
+   * direction prop declares the direction of the svg icon.
+   */
+  direction?: 'up' | 'right' | 'down' | 'left';
+}
+/**
+ * ArrowIcon component is used to add arrow icon.
+ * ArrowIcon component can be used inside other components, for example CallToAction component.
+ */
+export const ArrowIcon: React.FC<ArrowIconProps> = React.forwardRef<
+  SVGSVGElement,
+  ArrowIconProps
+>(function ArrowIcon(
+  { size, variant, direction = 'right', className, ...props },
+  ref
+) {
+  return (
+    <SvgIcon
+      size={size}
+      variant={variant}
+      className={clsx(className, {
+        'govgr-arrow--right': direction === 'right',
+        'govgr-arrow--left': direction === 'left',
+        'govgr-arrow--up': direction === 'up',
+        'govgr-arrow--down': direction === 'down',
+      })}
+      ref={ref}
+      {...props}
+    >
+      {direction === 'left' && (
+        <path d="M14.8,22l2.4-2.3L9.6,12l7.6-7.6L14.8,2l-10,10L14.8,22z" />
+      )}
+      {direction === 'right' && (
+        <path d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z" />
+      )}
+      {direction === 'up' && (
+        <path d="M2,15.8l2.3,2.4l7.7-7.6l7.6,7.6l2.4-2.4l-10-10L2,15.8z" />
+      )}
+      {direction === 'down' && (
+        <path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z" />
+      )}
+    </SvgIcon>
+  );
+});
+
+export default ArrowIcon;

package/src/Aside/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Aside with no props 1`] = `
+<ForwardRef(Aside)>
+  <ForwardRef(Base)
+    as="aside"
+    className="govgr-grid-column-one-third"
+  >
+    <aside
+      className="govgr-grid-column-one-third"
+    >
+      hello
+    </aside>
+  </ForwardRef(Base)>
+</ForwardRef(Aside)>
+`;

package/src/Aside/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Aside from '@digigov/react-core/Aside';
+
+it('renders the Aside with no props', () => {
+  expect(mount(<Aside>hello</Aside>)).toMatchSnapshot();
+});

package/src/Aside/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface AsideProps extends BaseProps<'aside'> {}
+/**
+ * Use this inside the Content component for additional content
+ * that will be shown on the left one third of the page
+ */
+export const Aside = React.forwardRef<HTMLElement, AsideProps>(function Aside(
+  { className, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="aside"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-grid-column-one-third': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default Aside;

package/src/BackLink/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the BackLink with href="#" 1`] = `
+<ForwardRef(BackLink)
+  href="#"
+>
+  <ForwardRef(Base)
+    as="a"
+    className="govgr-back-link"
+    href="#"
+    onClick={[Function]}
+    printHidden={true}
+    tabIndex={0}
+  >
+    <a
+      className="govgr-back-link govgr-print-hidden"
+      href="#"
+      onClick={[Function]}
+      tabIndex={0}
+    >
+      <ForwardRef(CaretIcon)>
+        <ForwardRef(SvgIcon)
+          className="govgr-caret--left"
+        >
+          <ForwardRef(Base)
+            aria-hidden="true"
+            as="svg"
+            className="govgr-caret--left govgr-svg-icon"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <svg
+              aria-hidden="true"
+              className="govgr-caret--left govgr-svg-icon"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M18,22V2L6,12L18,22z"
+              />
+            </svg>
+          </ForwardRef(Base)>
+        </ForwardRef(SvgIcon)>
+      </ForwardRef(CaretIcon)>
+      hello
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(BackLink)>
+`;
+
+exports[`renders the BackLink with no props 1`] = `
+<ForwardRef(BackLink)>
+  <ForwardRef(Base)
+    as="a"
+    className="govgr-back-link"
+    onClick={[Function]}
+    printHidden={true}
+    tabIndex={0}
+  >
+    <a
+      className="govgr-back-link govgr-print-hidden"
+      onClick={[Function]}
+      tabIndex={0}
+    >
+      <ForwardRef(CaretIcon)>
+        <ForwardRef(SvgIcon)
+          className="govgr-caret--left"
+        >
+          <ForwardRef(Base)
+            aria-hidden="true"
+            as="svg"
+            className="govgr-caret--left govgr-svg-icon"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <svg
+              aria-hidden="true"
+              className="govgr-caret--left govgr-svg-icon"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M18,22V2L6,12L18,22z"
+              />
+            </svg>
+          </ForwardRef(Base)>
+        </ForwardRef(SvgIcon)>
+      </ForwardRef(CaretIcon)>
+      hello
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(BackLink)>
+`;

package/src/BackLink/index.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import BackLink from '@digigov/react-core/BackLink';
+
+it('renders the BackLink with no props', () => {
+  expect(mount(<BackLink>hello</BackLink>)).toMatchSnapshot();
+});
+it('renders the BackLink with href="#"', () => {
+  expect(mount(<BackLink href="#">hello</BackLink>)).toMatchSnapshot();
+});

package/src/BackLink/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+import CaretIcon from '@digigov/react-core/CaretIcon';
+export interface BackLinkProps extends BaseProps<'a'> {
+  /**
+   * href is optional.
+   */
+  href?: string;
+}
+/**
+ * Use BackLink component to help users go back to the previous page in a multi-page transaction.
+ */
+export const BackLink = React.forwardRef<HTMLAnchorElement, BackLinkProps>(
+  function BackLink(
+    { href, tabIndex = 0, printHidden= true, className, children, ...props },
+    ref
+  ) {
+    return (
+      <Base
+        as="a"
+        printHidden={printHidden}
+        href={href}
+        onClick={() => {
+          !href && window.history.back();
+        }}
+        ref={ref}
+        className={clsx(className, {
+          'govgr-back-link': true,
+        })}
+        tabIndex={tabIndex}
+        {...props}
+      >
+        <CaretIcon />
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default BackLink;

package/src/Base/index.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import clsx from 'clsx';
+
+type AsProp<C extends React.ElementType> = {
+  as?: C;
+};
+
+type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
+
+// This is the first reusable type utility we built
+type PolymorphicComponentProp<
+  C extends React.ElementType,
+  Props = Record<string, unknown>
+> = React.PropsWithChildren<Props & AsProp<C>> &
+  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+
+// This is a new type utitlity with ref!
+type PolymorphicComponentPropWithRef<
+  C extends React.ElementType,
+  Props = Record<string, unknown>
+> = PolymorphicComponentProp<C, Props> & { ref?: PolymorphicRef<C> };
+
+// This is the type for the "ref" only
+type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<
+  C
+>['ref'];
+
+/**
+ * This is the updated component props using PolymorphicComponentPropWithRef
+ */
+export type BaseProps<
+  C extends React.ElementType
+> = PolymorphicComponentPropWithRef<
+  C,
+  {
+    /** margin is optional. It has not a default value. */
+    margin?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    /** marginTop is optional. It has not a default value. */
+    marginTop?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    /** marginBottom is optional. It has not a default value. */
+    marginBottom?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    /** marginLeft is optional. It has not a default value. */
+    marginLeft?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    /** marginRight is optional. It has not a default value. */
+    marginRight?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    /** padding is optional. It has not a default value. */
+    padding?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    /** paddingTop is optional. It has not a default value. */
+    paddingTop?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    /** paddingBottom is optional. It has not a default value. */
+    paddingBottom?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    /** paddingLeft is optional. It has not a default value. */
+    paddingLeft?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    /** paddingRight is optional. It has not a default value. */
+    paddingRight?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    /**  printHidden is optional. Default value is false. When true, the component is hidden at print. */
+    printHidden?: boolean;
+  }
+>;
+
+/**
+ * This is the type used in the type annotation for the component
+ */
+type BaseComponent = <C extends React.ElementType = 'span'>(
+  props: BaseProps<C>
+) => React.ReactElement | null;
+
+function calculateClasses(
+  margin?: number,
+  marginTop?: number,
+  marginBottom?: number,
+  marginRight?: number,
+  marginLeft?: number,
+  padding?: number,
+  paddingTop?: number,
+  paddingBottom?: number,
+  paddingRight?: number,
+  paddingLeft?: number,
+  printHidden?: boolean,
+  printVisible?: "block" | "inline"
+) {
+  const classList = {} as Record<string, boolean>;
+  for (let i = 0; i <= 12; i++) {
+    classList[`govgr-m-${i}`] = margin === i;
+    classList[`govgr-mt-${i}`] = marginTop === i;
+    classList[`govgr-mb-${i}`] = marginBottom === i;
+    classList[`govgr-mr-${i}`] = marginRight === i;
+    classList[`govgr-ml-${i}`] = marginLeft === i;
+    classList[`govgr-p-${i}`] = padding === i;
+    classList[`govgr-pt-${i}`] = paddingTop === i;
+    classList[`govgr-pb-${i}`] = paddingBottom === i;
+    classList[`govgr-pr-${i}`] = paddingRight === i;
+    classList[`govgr-pl-${i}`] = paddingLeft === i;
+  }
+  classList['govgr-print-hidden'] = !!printHidden;
+  classList['govgr-print-visible-block'] = printVisible === "block";
+  classList['govgr-print-visible-inline'] = printVisible === "inline";
+  return classList;
+}
+
+export const Base: BaseComponent = React.forwardRef(function Base<
+  C extends React.ElementType = 'span'
+>(
+  {
+    as,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    printHidden,
+    printVisible,
+    children,
+    className,
+    ...props
+  }: BaseProps<C>,
+  ref?: PolymorphicRef<C>
+) {
+  const Component = as || 'span';
+
+  return (
+    <Component
+      ref={ref}
+      className={clsx(
+        className,
+        calculateClasses(
+          margin,
+          marginTop,
+          marginBottom,
+          marginRight,
+          marginLeft,
+          padding,
+          paddingTop,
+          paddingBottom,
+          paddingRight,
+          paddingLeft,
+          printHidden,
+          printVisible,
+        )
+      )}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+});
+
+export default Base;

package/src/Blockquote/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Blockquote with no props 1`] = `
+<ForwardRef(Blockquote)>
+  <ForwardRef(Base)
+    as="blockquote"
+    className="govgr-blockquote"
+  >
+    <blockquote
+      className="govgr-blockquote"
+    >
+      hello
+    </blockquote>
+  </ForwardRef(Base)>
+</ForwardRef(Blockquote)>
+`;

package/src/Blockquote/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Blockquote from '@digigov/react-core/Blockquote';
+
+it('renders the Blockquote with no props', () => {
+  expect(mount(<Blockquote>hello</Blockquote>)).toMatchSnapshot();
+});

package/src/Blockquote/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface BlockquoteProps extends BaseProps<'blockquote'> {}
+/**
+ * Use Blockquote to differentiate a block of text from the content that surrounds it.
+ */
+export const Blockquote = React.forwardRef<HTMLElement, BlockquoteProps>(
+  function Blockquote({ className, children, ...props }, ref) {
+    return (
+      <Base
+        as="blockquote"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-blockquote': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default Blockquote;

package/src/Bottom/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Bottom with no props 1`] = `
+<ForwardRef(Bottom)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-bottom"
+  >
+    <div
+      className="govgr-bottom"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Bottom)>
+`;

package/src/Bottom/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Bottom from '@digigov/react-core/Bottom';
+
+it('renders the Bottom with no props', () => {
+  expect(mount(<Bottom>hello</Bottom>)).toMatchSnapshot();
+});

package/src/Bottom/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface BottomProps extends BaseProps<'div'> {}
+/**
+ * Bottom is used inside the Layout component and it must be the last component in order.
+ */
+export const Bottom = React.forwardRef<HTMLDivElement, BottomProps>(
+  function Bottom({ className, children, ...props }, ref) {
+    return (
+      <Base
+        as="div"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-bottom': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default Bottom;

package/src/Breadcrumbs/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Breadcrumbs with no props 1`] = `
+<ForwardRef(Breadcrumbs)>
+  <ForwardRef(Base)
+    as="nav"
+    className="govgr-breadcrumbs"
+  >
+    <nav
+      className="govgr-breadcrumbs"
+    >
+      hello
+    </nav>
+  </ForwardRef(Base)>
+</ForwardRef(Breadcrumbs)>
+`;

package/src/Breadcrumbs/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Breadcrumbs from '@digigov/react-core/Breadcrumbs';
+
+it('renders the Breadcrumbs with no props', () => {
+  expect(mount(<Breadcrumbs>hello</Breadcrumbs>)).toMatchSnapshot();
+});