@digigov/react-core 0.18.1 → 0.19.0

package/src/BurgerIcon/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
+import clsx from 'clsx';
+export interface BurgerIconProps extends SvgIconProps {
+  /**
+   * ref is optional.
+   * ref prop declares the reference of the svg icon component.
+   * It can be used to to access the DOM element and the React element.
+   */
+  ref?: React.Ref<SVGSVGElement>;
+  /**
+   * active is optional.
+   * The default is 'false'.
+   * This prop should be 'true' whenever the NavHorizontal is 'active', so whenever the user clicks at the burger menu.
+   */
+  active?: boolean;
+
+  /**
+   * hidden is optional.
+   * The default is 's'.
+   * It can be used to control the visibility of the icon across screens.
+   */
+  hidden?: 's' | 'm' | 'l';
+}
+/**
+ * BurgerIcon is used inside the Header component.
+ * It should be linked with the NavHorizontal component. It is hidden when the NavHorizontal is visible and vice versa.
+ */
+export const BurgerIcon: React.FC<BurgerIconProps> = React.forwardRef<
+  SVGSVGElement,
+  BurgerIconProps
+>(function BurgerIcon(
+  { variant, size, active, hidden, className, ...props },
+  ref
+) {
+  return (
+    <SvgIcon
+      variant={variant}
+      size={size}
+      className={clsx(className, {
+        'govgr-burger-icon': true,
+        'govgr-burger-icon--active': active === true,
+        'govgr-burger-icon--hidden-s': hidden === 's',
+        'govgr-burger-icon--hidden-m': hidden === 'm',
+        'govgr-burger-icon--hidden-l': hidden === 'l',
+      })}
+      ref={ref}
+      {...props}
+    >
+      <rect id="govgr-burger-icon__line-1" width="20" height="3.3" />
+      <rect id="govgr-burger-icon__line-2" width="20" height="3.3" />
+      <rect id="govgr-burger-icon__line-3" width="20" height="3.3" />
+    </SvgIcon>
+  );
+});
+
+export default BurgerIcon;

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

@@ -0,0 +1,214 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Button with ariaLabel prop 1`] = `
+<ForwardRef(Button)
+  aria-label="button for opening menu"
+>
+  <ForwardRef(Base)
+    aria-label="button for opening menu"
+    as="button"
+    className="govgr-btn-primary govgr-btn"
+    printHidden={true}
+  >
+    <button
+      aria-label="button for opening menu"
+      className="govgr-btn-primary govgr-btn govgr-print-hidden"
+    >
+      Menu
+    </button>
+  </ForwardRef(Base)>
+</ForwardRef(Button)>
+`;
+
+exports[`renders the Button with color=primary 1`] = `
+<ForwardRef(Button)
+  color="primary"
+>
+  <ForwardRef(Base)
+    as="button"
+    className="govgr-btn-primary govgr-btn"
+    printHidden={true}
+  >
+    <button
+      className="govgr-btn-primary govgr-btn govgr-print-hidden"
+    >
+      hello
+    </button>
+  </ForwardRef(Base)>
+</ForwardRef(Button)>
+`;
+
+exports[`renders the Button with color=primary with disabled=true 1`] = `
+<ForwardRef(Button)
+  color="primary"
+  disabled={true}
+>
+  <ForwardRef(Base)
+    as="button"
+    className="govgr-btn-primary govgr-btn-disabled govgr-btn"
+    disabled={true}
+    printHidden={true}
+  >
+    <button
+      className="govgr-btn-primary govgr-btn-disabled govgr-btn govgr-print-hidden"
+      disabled={true}
+    >
+      hello
+    </button>
+  </ForwardRef(Base)>
+</ForwardRef(Button)>
+`;
+
+exports[`renders the Button with color=secondary 1`] = `
+<ForwardRef(Button)
+  color="secondary"
+>
+  <ForwardRef(Base)
+    as="button"
+    className="govgr-btn-secondary govgr-btn"
+    printHidden={true}
+  >
+    <button
+      className="govgr-btn-secondary govgr-btn govgr-print-hidden"
+    >
+      hello
+    </button>
+  </ForwardRef(Base)>
+</ForwardRef(Button)>
+`;
+
+exports[`renders the Button with color=secondary with disabled=true 1`] = `
+<ForwardRef(Button)
+  color="secondary"
+  disabled={true}
+>
+  <ForwardRef(Base)
+    as="button"
+    className="govgr-btn-secondary govgr-btn-disabled govgr-btn"
+    disabled={true}
+    printHidden={true}
+  >
+    <button
+      className="govgr-btn-secondary govgr-btn-disabled govgr-btn govgr-print-hidden"
+      disabled={true}
+    >
+      hello
+    </button>
+  </ForwardRef(Base)>
+</ForwardRef(Button)>
+`;
+
+exports[`renders the Button with color=warning 1`] = `
+<ForwardRef(Button)
+  color="warning"
+>
+  <ForwardRef(Base)
+    as="button"
+    className="govgr-btn-warning govgr-btn"
+    printHidden={true}
+  >
+    <button
+      className="govgr-btn-warning govgr-btn govgr-print-hidden"
+    >
+      hello
+    </button>
+  </ForwardRef(Base)>
+</ForwardRef(Button)>
+`;
+
+exports[`renders the Button with color=warning with disabled=true 1`] = `
+<ForwardRef(Button)
+  color="warning"
+  disabled={true}
+>
+  <ForwardRef(Base)
+    as="button"
+    className="govgr-btn-warning govgr-btn-disabled govgr-btn"
+    disabled={true}
+    printHidden={true}
+  >
+    <button
+      className="govgr-btn-warning govgr-btn-disabled govgr-btn govgr-print-hidden"
+      disabled={true}
+    >
+      hello
+    </button>
+  </ForwardRef(Base)>
+</ForwardRef(Button)>
+`;
+
+exports[`renders the Button with disabled=false 1`] = `
+<ForwardRef(Button)
+  disabled={false}
+>
+  <ForwardRef(Base)
+    as="button"
+    className="govgr-btn-primary govgr-btn"
+    disabled={false}
+    printHidden={true}
+  >
+    <button
+      className="govgr-btn-primary govgr-btn govgr-print-hidden"
+      disabled={false}
+    >
+      hello
+    </button>
+  </ForwardRef(Base)>
+</ForwardRef(Button)>
+`;
+
+exports[`renders the Button with disabled=true 1`] = `
+<ForwardRef(Button)
+  disabled={true}
+>
+  <ForwardRef(Base)
+    as="button"
+    className="govgr-btn-primary govgr-btn-disabled govgr-btn"
+    disabled={true}
+    printHidden={true}
+  >
+    <button
+      className="govgr-btn-primary govgr-btn-disabled govgr-btn govgr-print-hidden"
+      disabled={true}
+    >
+      hello
+    </button>
+  </ForwardRef(Base)>
+</ForwardRef(Button)>
+`;
+
+exports[`renders the Button with no props 1`] = `
+<ForwardRef(Button)>
+  <ForwardRef(Base)
+    as="button"
+    className="govgr-btn-primary govgr-btn"
+    printHidden={true}
+  >
+    <button
+      className="govgr-btn-primary govgr-btn govgr-print-hidden"
+    >
+      hello
+    </button>
+  </ForwardRef(Base)>
+</ForwardRef(Button)>
+`;
+
+exports[`renders the Button with tabIndex prop 1`] = `
+<ForwardRef(Button)
+  tabIndex={0}
+>
+  <ForwardRef(Base)
+    as="button"
+    className="govgr-btn-primary govgr-btn"
+    printHidden={true}
+    tabIndex={0}
+  >
+    <button
+      className="govgr-btn-primary govgr-btn govgr-print-hidden"
+      tabIndex={0}
+    >
+      Menu
+    </button>
+  </ForwardRef(Base)>
+</ForwardRef(Button)>
+`;

package/src/Button/index.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Button from '@digigov/react-core/Button';
+
+it('renders the Button with no props', () => {
+  expect(mount(<Button>hello</Button>)).toMatchSnapshot();
+});
+it('renders the Button with color=primary', () => {
+  expect(mount(<Button color={'primary'}>hello</Button>)).toMatchSnapshot();
+});
+it('renders the Button with color=secondary', () => {
+  expect(mount(<Button color={'secondary'}>hello</Button>)).toMatchSnapshot();
+});
+it('renders the Button with color=warning', () => {
+  expect(mount(<Button color={'warning'}>hello</Button>)).toMatchSnapshot();
+});
+it('renders the Button with disabled=true', () => {
+  expect(mount(<Button disabled={true}>hello</Button>)).toMatchSnapshot();
+});
+it('renders the Button with disabled=false', () => {
+  expect(mount(<Button disabled={false}>hello</Button>)).toMatchSnapshot();
+});
+it('renders the Button with color=primary with disabled=true', () => {
+  expect(
+    mount(
+      <Button disabled={true} color={'primary'}>
+        hello
+      </Button>
+    )
+  ).toMatchSnapshot();
+});
+it('renders the Button with color=secondary with disabled=true', () => {
+  expect(
+    mount(
+      <Button disabled={true} color={'secondary'}>
+        hello
+      </Button>
+    )
+  ).toMatchSnapshot();
+});
+it('renders the Button with color=warning with disabled=true', () => {
+  expect(
+    mount(
+      <Button disabled={true} color={'warning'}>
+        hello
+      </Button>
+    )
+  ).toMatchSnapshot();
+});
+it('renders the Button with ariaLabel prop', () => {
+  expect(
+    mount(<Button aria-label="button for opening menu">Menu</Button>)
+  ).toMatchSnapshot();
+});
+it('renders the Button with tabIndex prop', () => {
+  expect(mount(<Button tabIndex={0}>Menu</Button>)).toMatchSnapshot();
+});

package/src/Button/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface ButtonProps extends BaseProps<'button'> {
+  /**
+   * color is optional.
+   * 'primary' color is used for the main call to action on a page.
+   * 'secondary' color is used for secondary calls to action on a page.
+   * 'warning' color is used to make users think carefully before they use them.
+   * The default value is 'primary'.
+   */
+  color?: 'primary' | 'secondary' | 'warning';
+
+  /**
+   * disabled is optional.
+   */
+  disabled?: boolean;
+  /**
+   * variant is optional.
+   */
+  variant?: 'link' | 'button';
+}
+/**
+ * Use the Button component to help users carry out an action.
+ */
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(
+    {
+      color = 'primary',
+      variant = 'button',
+      disabled,
+      printHidden = true, 
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <Base
+        as="button"
+        disabled={disabled}
+        printHidden={printHidden}
+        ref={ref}
+        className={clsx(className, {
+          'govgr-link': variant === 'link',
+          'govgr-btn': variant === 'button',
+          'govgr-btn-primary': variant === 'button' && color === 'primary',
+          'govgr-btn-secondary': variant === 'button' && color === 'secondary',
+          'govgr-btn-warning': variant === 'button' && color === 'warning',
+          'govgr-btn-disabled': variant === 'button' && disabled === true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default Button;

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

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

package/src/ButtonGroup/index.test.tsx

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

package/src/ButtonGroup/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface ButtonGroupProps extends BaseProps<'div'> {}
+/**
+ * Use a button group when two or more buttons are placed together.
+ */
+export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
+  function ButtonGroup({ className, children, ...props }, ref) {
+    return (
+      <Base
+        as="div"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-button-group': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default ButtonGroup;

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

@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Button with tabIndex prop 1`] = `
+<ForwardRef(ButtonLink)
+  tabIndex={0}
+>
+  <ForwardRef(Base)
+    as="a"
+    className="govgr-btn-primary govgr-btn"
+    tabIndex={0}
+  >
+    <a
+      className="govgr-btn-primary govgr-btn"
+      tabIndex={0}
+    >
+      Menu
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(ButtonLink)>
+`;
+
+exports[`renders the ButtonLink with ariaLabel prop 1`] = `
+<ForwardRef(ButtonLink)
+  aria-label="button for opening menu"
+>
+  <ForwardRef(Base)
+    aria-label="button for opening menu"
+    as="a"
+    className="govgr-btn-primary govgr-btn"
+  >
+    <a
+      aria-label="button for opening menu"
+      className="govgr-btn-primary govgr-btn"
+    >
+      Menu
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(ButtonLink)>
+`;
+
+exports[`renders the ButtonLink with color=primary 1`] = `
+<ForwardRef(ButtonLink)
+  color="primary"
+>
+  <ForwardRef(Base)
+    as="a"
+    className="govgr-btn-primary govgr-btn"
+  >
+    <a
+      className="govgr-btn-primary govgr-btn"
+    >
+      hello
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(ButtonLink)>
+`;
+
+exports[`renders the ButtonLink with color=primary with href=# 1`] = `
+<ForwardRef(ButtonLink)
+  color="primary"
+  href="#"
+>
+  <ForwardRef(Base)
+    as="a"
+    className="govgr-btn-primary govgr-btn"
+    href="#"
+  >
+    <a
+      className="govgr-btn-primary govgr-btn"
+      href="#"
+    >
+      hello
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(ButtonLink)>
+`;
+
+exports[`renders the ButtonLink with color=secondary 1`] = `
+<ForwardRef(ButtonLink)
+  color="secondary"
+>
+  <ForwardRef(Base)
+    as="a"
+    className="govgr-btn-secondary govgr-btn"
+  >
+    <a
+      className="govgr-btn-secondary govgr-btn"
+    >
+      hello
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(ButtonLink)>
+`;
+
+exports[`renders the ButtonLink with color=secondary with href=# 1`] = `
+<ForwardRef(ButtonLink)
+  color="secondary"
+  href="#"
+>
+  <ForwardRef(Base)
+    as="a"
+    className="govgr-btn-secondary govgr-btn"
+    href="#"
+  >
+    <a
+      className="govgr-btn-secondary govgr-btn"
+      href="#"
+    >
+      hello
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(ButtonLink)>
+`;
+
+exports[`renders the ButtonLink with color=warning 1`] = `
+<ForwardRef(ButtonLink)
+  color="warning"
+>
+  <ForwardRef(Base)
+    as="a"
+    className="govgr-btn-warning govgr-btn"
+  >
+    <a
+      className="govgr-btn-warning govgr-btn"
+    >
+      hello
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(ButtonLink)>
+`;
+
+exports[`renders the ButtonLink with color=warning with href=# 1`] = `
+<ForwardRef(ButtonLink)
+  color="warning"
+  href="#"
+>
+  <ForwardRef(Base)
+    as="a"
+    className="govgr-btn-warning govgr-btn"
+    href="#"
+  >
+    <a
+      className="govgr-btn-warning govgr-btn"
+      href="#"
+    >
+      hello
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(ButtonLink)>
+`;
+
+exports[`renders the ButtonLink with disabled=false 1`] = `
+<ForwardRef(ButtonLink)>
+  <ForwardRef(Base)
+    as="a"
+    className="govgr-btn-primary govgr-btn"
+  >
+    <a
+      className="govgr-btn-primary govgr-btn"
+    >
+      hello
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(ButtonLink)>
+`;
+
+exports[`renders the ButtonLink with href=# 1`] = `
+<ForwardRef(ButtonLink)
+  href="#"
+>
+  <ForwardRef(Base)
+    as="a"
+    className="govgr-btn-primary govgr-btn"
+    href="#"
+  >
+    <a
+      className="govgr-btn-primary govgr-btn"
+      href="#"
+    >
+      hello
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(ButtonLink)>
+`;
+
+exports[`renders the ButtonLink with no props 1`] = `
+<ForwardRef(ButtonLink)>
+  <ForwardRef(Base)
+    as="a"
+    className="govgr-btn-primary govgr-btn"
+  >
+    <a
+      className="govgr-btn-primary govgr-btn"
+    >
+      hello
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(ButtonLink)>
+`;

package/src/ButtonLink/index.test.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import ButtonLink from '@digigov/react-core/ButtonLink';
+
+it('renders the ButtonLink with no props', () => {
+  expect(mount(<ButtonLink>hello</ButtonLink>)).toMatchSnapshot();
+});
+it('renders the ButtonLink with color=primary', () => {
+  expect(
+    mount(<ButtonLink color={'primary'}>hello</ButtonLink>)
+  ).toMatchSnapshot();
+});
+it('renders the ButtonLink with color=secondary', () => {
+  expect(
+    mount(<ButtonLink color={'secondary'}>hello</ButtonLink>)
+  ).toMatchSnapshot();
+});
+it('renders the ButtonLink with color=warning', () => {
+  expect(
+    mount(<ButtonLink color={'warning'}>hello</ButtonLink>)
+  ).toMatchSnapshot();
+});
+it('renders the ButtonLink with href=#', () => {
+  expect(mount(<ButtonLink href={'#'}>hello</ButtonLink>)).toMatchSnapshot();
+});
+it('renders the ButtonLink with disabled=false', () => {
+  expect(mount(<ButtonLink>hello</ButtonLink>)).toMatchSnapshot();
+});
+it('renders the ButtonLink with color=primary with href=#', () => {
+  expect(
+    mount(
+      <ButtonLink href={'#'} color={'primary'}>
+        hello
+      </ButtonLink>
+    )
+  ).toMatchSnapshot();
+});
+it('renders the ButtonLink with color=secondary with href=#', () => {
+  expect(
+    mount(
+      <ButtonLink href={'#'} color={'secondary'}>
+        hello
+      </ButtonLink>
+    )
+  ).toMatchSnapshot();
+});
+it('renders the ButtonLink with color=warning with href=#', () => {
+  expect(
+    mount(
+      <ButtonLink href={'#'} color={'warning'}>
+        hello
+      </ButtonLink>
+    )
+  ).toMatchSnapshot();
+});
+it('renders the ButtonLink with ariaLabel prop', () => {
+  expect(
+    mount(<ButtonLink aria-label="button for opening menu">Menu</ButtonLink>)
+  ).toMatchSnapshot();
+});
+it('renders the Button with tabIndex prop', () => {
+  expect(mount(<ButtonLink tabIndex={0}>Menu</ButtonLink>)).toMatchSnapshot();
+});