@digigov/react-core 0.18.1 → 0.19.1

package/src/Breadcrumbs/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface BreadcrumbsProps extends BaseProps<'div'> {}
+/**
+ * Use Breadcrumbs component when you need to help users understand and move between the multiple levels of a website.
+ * The breadcrumb should start with your ‘home’ page and end with the parent section of the current page.
+ */
+export const Breadcrumbs = React.forwardRef<HTMLDivElement, BreadcrumbsProps>(
+  function Breadcrumbs({ className, children, ...props }, ref) {
+    return (
+      <Base
+        as="nav"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-breadcrumbs': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default Breadcrumbs;

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

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

package/src/BreadcrumbsList/index.test.tsx

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

package/src/BreadcrumbsList/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface BreadcrumbsListProps extends BaseProps<'ol'> {}
+/**
+ * BreadcrumbsList is used for providing the items inside Breadcrumbs.
+ */
+export const BreadcrumbsList = React.forwardRef<
+  HTMLOListElement,
+  BreadcrumbsListProps
+>(function BreadcrumbsList({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="ol"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-breadcrumbs__list': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default BreadcrumbsList;

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

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the BreadcrumbsListItem with href 1`] = `
+<ForwardRef(BreadcrumbsListItem)
+  href="#"
+>
+  <ForwardRef(Base)
+    as="li"
+    className="govgr-breadcrumbs__list-item"
+  >
+    <li
+      className="govgr-breadcrumbs__list-item"
+    >
+      <a
+        className="govgr-breadcrumbs__link"
+        href="#"
+      >
+        hello
+      </a>
+    </li>
+  </ForwardRef(Base)>
+</ForwardRef(BreadcrumbsListItem)>
+`;
+
+exports[`renders the BreadcrumbsListItem with no props 1`] = `
+<ForwardRef(BreadcrumbsListItem)>
+  <ForwardRef(Base)
+    as="li"
+    className="govgr-breadcrumbs__list-item"
+  >
+    <li
+      className="govgr-breadcrumbs__list-item"
+    >
+      <a
+        className="govgr-breadcrumbs__link"
+      >
+        hello
+      </a>
+    </li>
+  </ForwardRef(Base)>
+</ForwardRef(BreadcrumbsListItem)>
+`;

package/src/BreadcrumbsListItem/index.test.tsx

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

package/src/BreadcrumbsListItem/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface BreadcrumbsListItemProps extends BaseProps<'li'> {
+  /**
+   * href is optional and provides the text and url of the Breadcrumbs items.
+   */
+  href?: string;
+}
+/**
+ * BreadcrumbsListItem creates a list of items with the possibility of navigation.
+ * It should be used inside BreadcrumbsList as children component
+ */
+export const BreadcrumbsListItem = React.forwardRef<
+  HTMLLIElement,
+  BreadcrumbsListItemProps
+>(function BreadcrumbsListItem({ href, className, children, ...props }, ref) {
+  return (
+    <Base
+      as="li"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-breadcrumbs__list-item': true,
+      })}
+      {...props}
+    >
+      <a
+        href={href}
+        className={clsx({
+          'govgr-breadcrumbs__link': true,
+        })}
+      >
+        {children}
+      </a>
+    </Base>
+  );
+});
+
+export default BreadcrumbsListItem;

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

@@ -0,0 +1,460 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the BurgerIcon prop hidden="l" 1`] = `
+<ForwardRef(BurgerIcon)
+  hidden="l"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-burger-icon--hidden-l govgr-burger-icon"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-burger-icon--hidden-l govgr-burger-icon govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-burger-icon--hidden-l govgr-burger-icon govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-1"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-2"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-3"
+          width="20"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(BurgerIcon)>
+`;
+
+exports[`renders the BurgerIcon prop hidden="m" 1`] = `
+<ForwardRef(BurgerIcon)
+  hidden="m"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-burger-icon--hidden-m govgr-burger-icon"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-burger-icon--hidden-m govgr-burger-icon govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-burger-icon--hidden-m govgr-burger-icon govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-1"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-2"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-3"
+          width="20"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(BurgerIcon)>
+`;
+
+exports[`renders the BurgerIcon prop hidden="s" 1`] = `
+<ForwardRef(BurgerIcon)
+  hidden="s"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-burger-icon--hidden-s govgr-burger-icon"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-burger-icon--hidden-s govgr-burger-icon govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-burger-icon--hidden-s govgr-burger-icon govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-1"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-2"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-3"
+          width="20"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(BurgerIcon)>
+`;
+
+exports[`renders the BurgerIcon prop variant= "error" 1`] = `
+<ForwardRef(BurgerIcon)
+  variant="error"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-burger-icon"
+    variant="error"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-burger-icon govgr-svg-icon--error govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-burger-icon govgr-svg-icon--error govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-1"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-2"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-3"
+          width="20"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(BurgerIcon)>
+`;
+
+exports[`renders the BurgerIcon prop variant= "light" 1`] = `
+<ForwardRef(BurgerIcon)
+  variant="light"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-burger-icon"
+    variant="light"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-burger-icon govgr-svg-icon--light govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-burger-icon govgr-svg-icon--light govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-1"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-2"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-3"
+          width="20"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(BurgerIcon)>
+`;
+
+exports[`renders the BurgerIcon props active hidden="no" variant= "light" 1`] = `
+<ForwardRef(BurgerIcon)
+  active={true}
+  variant="light"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-burger-icon--active govgr-burger-icon"
+    variant="light"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-burger-icon--active govgr-burger-icon govgr-svg-icon--light govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-burger-icon--active govgr-burger-icon govgr-svg-icon--light govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-1"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-2"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-3"
+          width="20"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(BurgerIcon)>
+`;
+
+exports[`renders the BurgerIcon with no props 1`] = `
+<ForwardRef(BurgerIcon)>
+  <ForwardRef(SvgIcon)
+    className="govgr-burger-icon"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-burger-icon govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-burger-icon govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-1"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-2"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-3"
+          width="20"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(BurgerIcon)>
+`;
+
+exports[`renders the BurgerIcon with prop active=true 1`] = `
+<ForwardRef(BurgerIcon)
+  active={true}
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-burger-icon--active govgr-burger-icon"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-burger-icon--active govgr-burger-icon govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-burger-icon--active govgr-burger-icon govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-1"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-2"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-3"
+          width="20"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(BurgerIcon)>
+`;
+
+exports[`renders the BurgerIcon with prop variant=dark 1`] = `
+<ForwardRef(BurgerIcon)
+  variant="dark"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-burger-icon"
+    variant="dark"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-burger-icon govgr-svg-icon--dark govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-burger-icon govgr-svg-icon--dark govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-1"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-2"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-3"
+          width="20"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(BurgerIcon)>
+`;
+
+exports[`renders the BurgerIcon with props active hidden="s" and variant="dark" 1`] = `
+<ForwardRef(BurgerIcon)
+  active={true}
+  hidden="s"
+  variant="dark"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-burger-icon--active govgr-burger-icon--hidden-s govgr-burger-icon"
+    variant="dark"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-burger-icon--active govgr-burger-icon--hidden-s govgr-burger-icon govgr-svg-icon--dark govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-burger-icon--active govgr-burger-icon--hidden-s govgr-burger-icon govgr-svg-icon--dark govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-1"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-2"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-3"
+          width="20"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(BurgerIcon)>
+`;
+
+exports[`renders the BurgerIcon with props hidden="l" and variant="success" 1`] = `
+<ForwardRef(BurgerIcon)
+  hidden="l"
+  variant="success"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-burger-icon--hidden-l govgr-burger-icon"
+    variant="success"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-burger-icon--hidden-l govgr-burger-icon govgr-svg-icon--success govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-burger-icon--hidden-l govgr-burger-icon govgr-svg-icon--success govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-1"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-2"
+          width="20"
+        />
+        <rect
+          height="3.3"
+          id="govgr-burger-icon__line-3"
+          width="20"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(BurgerIcon)>
+`;

package/src/BurgerIcon/index.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import BurgerIcon from '@digigov/react-core/BurgerIcon';
+
+it('renders the BurgerIcon with no props', () => {
+  expect(mount(<BurgerIcon />)).toMatchSnapshot();
+});
+
+it('renders the BurgerIcon with prop active=true', () => {
+  expect(mount(<BurgerIcon active={true} />)).toMatchSnapshot();
+});
+
+it('renders the BurgerIcon with prop variant=dark', () => {
+  expect(mount(<BurgerIcon variant="dark" />)).toMatchSnapshot();
+});
+
+it('renders the BurgerIcon prop variant= "light"', () => {
+  expect(mount(<BurgerIcon variant="light" />)).toMatchSnapshot();
+});
+it('renders the BurgerIcon prop variant= "error"', () => {
+  expect(mount(<BurgerIcon variant="error" />)).toMatchSnapshot();
+});
+it('renders the BurgerIcon prop hidden="s"', () => {
+  expect(mount(<BurgerIcon hidden="s" />)).toMatchSnapshot();
+});
+it('renders the BurgerIcon prop hidden="m"', () => {
+  expect(mount(<BurgerIcon hidden="m" />)).toMatchSnapshot();
+});
+it('renders the BurgerIcon prop hidden="l"', () => {
+  expect(mount(<BurgerIcon hidden="l" />)).toMatchSnapshot();
+});
+
+it('renders the BurgerIcon with props active hidden="s" and variant="dark"', () => {
+  expect(
+    mount(<BurgerIcon active hidden="s" variant="dark" />)
+  ).toMatchSnapshot();
+});
+it('renders the BurgerIcon with props hidden="l" and variant="success"', () => {
+  expect(mount(<BurgerIcon hidden="l" variant="success" />)).toMatchSnapshot();
+});
+
+it('renders the BurgerIcon props active hidden="no" variant= "light"', () => {
+  expect(mount(<BurgerIcon active variant="light" />)).toMatchSnapshot();
+});