@digigov/react-core 0.18.1 → 0.19.1

package/src/SkipLink/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface LinkProps extends BaseProps<'a'> {
+  href?: string;
+}
+/**
+ * Use the skip link component to help keyboard-only users skip to the main content on a page.
+ */
+export const SkipLink = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  function SkipLink(
+    { className, children, href = '#main-content', ...props },
+    ref
+  ) {
+    return (
+      <Base
+        as="a"
+        tabIndex={0}
+        href={href}
+        ref={ref}
+        className={clsx(className, {
+          'govgr--skip-link': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default SkipLink;

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

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

package/src/SummaryList/index.test.tsx

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

package/src/SummaryList/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface SummaryListProps extends BaseProps<'dl'> {
+  /**
+   * border is optional.
+   * By default, SummaryList has borders. You can remove borders by using border prop.
+   * By default is true
+   */
+  border?: boolean;
+}
+/**
+ * SummaryList used as a table with summary informations.
+ * It must contain a list of SummaryListItem components.
+ */
+export const SummaryList = React.forwardRef<HTMLDListElement, SummaryListProps>(
+  function SummaryList({ className, border = true, children, ...props }, ref) {
+    return (
+      <Base
+        as="dl"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-summary-list--no-border': !border,
+          'govgr-summary-list': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default SummaryList;

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

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

package/src/SummaryListItem/index.test.tsx

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

package/src/SummaryListItem/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface SummaryListItemProps extends BaseProps<'div'> {}
+/**
+ * SummaryListItem must be inside SummaryList component. Each SummaryListItem is a row in the SummaryList table.
+ * This component must contain SummaryListItemKey, SummaryListItemValue and SummaryListItemAction, in that order.
+ */
+export const SummaryListItem = React.forwardRef<
+  HTMLDivElement,
+  SummaryListItemProps
+>(function SummaryListItem({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-summary-list__row': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default SummaryListItem;

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

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

package/src/SummaryListItemAction/index.test.tsx

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

package/src/SummaryListItemAction/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface SummaryListItemActionProps extends BaseProps<'dd'> {}
+/**
+ * SummaryListItemAction is used within the SummaryListItem component.
+ * In this column we place the action that the user can do, based on the information on the rest of the row.
+ */
+export const SummaryListItemAction = React.forwardRef<
+  HTMLElement,
+  SummaryListItemActionProps
+>(function SummaryListItemAction({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="dd"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-summary-list__actions': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default SummaryListItemAction;

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

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

package/src/SummaryListItemKey/index.test.tsx

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

package/src/SummaryListItemKey/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface SummaryListItemKeyProps extends BaseProps<'dt'> {}
+/**
+ * SummaryListItemKey is used within the SummaryListItem component.
+ * In this column we place the key information for the row (ex. "Name", "Address", etc).
+ */
+export const SummaryListItemKey = React.forwardRef<
+  HTMLElement,
+  SummaryListItemKeyProps
+>(function SummaryListItemKey({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="dt"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-summary-list__key': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default SummaryListItemKey;

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

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

package/src/SummaryListItemValue/index.test.tsx

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

package/src/SummaryListItemValue/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface SummaryListItemValueProps extends BaseProps<'dd'> {}
+/**
+ * Details for the SummaryListItemValue.
+ */
+export const SummaryListItemValue = React.forwardRef<
+  HTMLElement,
+  SummaryListItemValueProps
+>(function SummaryListItemValue({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="dd"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-summary-list__value': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default SummaryListItemValue;

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

@@ -0,0 +1,344 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the SvgIcon with no props 1`] = `
+<ForwardRef(SvgIcon)>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="govgr-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop size=l 1`] = `
+<ForwardRef(SvgIcon)
+  size="l"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="govgr-svg-icon--l govgr-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--l govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop size=m 1`] = `
+<ForwardRef(SvgIcon)
+  size="m"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="govgr-svg-icon--m govgr-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--m govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop size=s 1`] = `
+<ForwardRef(SvgIcon)
+  size="s"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="govgr-svg-icon--s govgr-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--s govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop size=xl 1`] = `
+<ForwardRef(SvgIcon)
+  size="xl"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="govgr-svg-icon--xl govgr-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--xl govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop variant=dark 1`] = `
+<ForwardRef(SvgIcon)
+  variant="dark"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="govgr-svg-icon--dark govgr-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--dark govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop variant=error 1`] = `
+<ForwardRef(SvgIcon)
+  variant="error"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="govgr-svg-icon--error govgr-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--error govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop variant=error and size= xl 1`] = `
+<ForwardRef(SvgIcon)
+  size="xl"
+  variant="warning"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="govgr-svg-icon--warning govgr-svg-icon--xl govgr-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--warning govgr-svg-icon--xl govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop variant=focus 1`] = `
+<ForwardRef(SvgIcon)
+  variant="focus"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="govgr-svg-icon--focus govgr-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--focus govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop variant=gray 1`] = `
+<ForwardRef(SvgIcon)
+  variant="gray"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="govgr-svg-icon--gray govgr-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--gray govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop variant=light 1`] = `
+<ForwardRef(SvgIcon)
+  variant="light"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="govgr-svg-icon--light govgr-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--light govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop variant=primary 1`] = `
+<ForwardRef(SvgIcon)
+  variant="primary"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="govgr-svg-icon--primary govgr-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--primary govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop variant=success 1`] = `
+<ForwardRef(SvgIcon)
+  variant="success"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="govgr-svg-icon--success govgr-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--success govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop variant=warning 1`] = `
+<ForwardRef(SvgIcon)
+  variant="warning"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="govgr-svg-icon--warning govgr-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--warning govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop variant=warning and size=s 1`] = `
+<ForwardRef(SvgIcon)
+  size="s"
+  variant="warning"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="govgr-svg-icon--warning govgr-svg-icon--s govgr-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--warning govgr-svg-icon--s govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;