@digigov/react-core 0.18.1 → 0.19.0

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

@@ -0,0 +1,632 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the MoreVertIcon with no props 1`] = `
+<ForwardRef(MoreVertIcon)>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          cx="12"
+          cy="5"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="19"
+          r="2"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(MoreVertIcon)>
+`;
+
+exports[`renders the MoreVertIcon with prop size=l 1`] = `
+<ForwardRef(MoreVertIcon)
+  size="l"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
+    size="l"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--l govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--l govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          cx="12"
+          cy="5"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="19"
+          r="2"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(MoreVertIcon)>
+`;
+
+exports[`renders the MoreVertIcon with prop size=m 1`] = `
+<ForwardRef(MoreVertIcon)
+  size="m"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
+    size="m"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--m govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--m govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          cx="12"
+          cy="5"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="19"
+          r="2"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(MoreVertIcon)>
+`;
+
+exports[`renders the MoreVertIcon with prop size=s 1`] = `
+<ForwardRef(MoreVertIcon)
+  size="s"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
+    size="s"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--s govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--s govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          cx="12"
+          cy="5"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="19"
+          r="2"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(MoreVertIcon)>
+`;
+
+exports[`renders the MoreVertIcon with prop size=xl 1`] = `
+<ForwardRef(MoreVertIcon)
+  size="xl"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
+    size="xl"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--xl govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--xl govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          cx="12"
+          cy="5"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="19"
+          r="2"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(MoreVertIcon)>
+`;
+
+exports[`renders the MoreVertIcon with prop variant=dark 1`] = `
+<ForwardRef(MoreVertIcon)
+  variant="dark"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
+    variant="dark"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--dark govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--dark govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          cx="12"
+          cy="5"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="19"
+          r="2"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(MoreVertIcon)>
+`;
+
+exports[`renders the MoreVertIcon with prop variant=error 1`] = `
+<ForwardRef(MoreVertIcon)
+  variant="error"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
+    variant="error"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--error govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--error govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          cx="12"
+          cy="5"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="19"
+          r="2"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(MoreVertIcon)>
+`;
+
+exports[`renders the MoreVertIcon with prop variant=error and size= xl 1`] = `
+<ForwardRef(MoreVertIcon)
+  size="xl"
+  variant="warning"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
+    size="xl"
+    variant="warning"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--check 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--check govgr-svg-icon--warning govgr-svg-icon--xl govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          cx="12"
+          cy="5"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="19"
+          r="2"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(MoreVertIcon)>
+`;
+
+exports[`renders the MoreVertIcon with prop variant=focus 1`] = `
+<ForwardRef(MoreVertIcon)
+  variant="focus"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
+    variant="focus"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--focus govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--focus govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          cx="12"
+          cy="5"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="19"
+          r="2"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(MoreVertIcon)>
+`;
+
+exports[`renders the MoreVertIcon with prop variant=gray 1`] = `
+<ForwardRef(MoreVertIcon)
+  variant="gray"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
+    variant="gray"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--gray govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--gray govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          cx="12"
+          cy="5"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="19"
+          r="2"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(MoreVertIcon)>
+`;
+
+exports[`renders the MoreVertIcon with prop variant=light 1`] = `
+<ForwardRef(MoreVertIcon)
+  variant="light"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
+    variant="light"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--light govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--light govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          cx="12"
+          cy="5"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="19"
+          r="2"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(MoreVertIcon)>
+`;
+
+exports[`renders the MoreVertIcon with prop variant=primary 1`] = `
+<ForwardRef(MoreVertIcon)
+  variant="primary"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
+    variant="primary"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--primary govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--primary govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          cx="12"
+          cy="5"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="19"
+          r="2"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(MoreVertIcon)>
+`;
+
+exports[`renders the MoreVertIcon with prop variant=success 1`] = `
+<ForwardRef(MoreVertIcon)
+  variant="success"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
+    variant="success"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--success govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--success govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          cx="12"
+          cy="5"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="19"
+          r="2"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(MoreVertIcon)>
+`;
+
+exports[`renders the MoreVertIcon with prop variant=warning 1`] = `
+<ForwardRef(MoreVertIcon)
+  variant="warning"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
+    variant="warning"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--warning govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--warning govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          cx="12"
+          cy="5"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="19"
+          r="2"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(MoreVertIcon)>
+`;
+
+exports[`renders the MoreVertIcon with prop variant=warning and size=s 1`] = `
+<ForwardRef(MoreVertIcon)
+  size="s"
+  variant="warning"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
+    size="s"
+    variant="warning"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--check 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--check govgr-svg-icon--warning govgr-svg-icon--s govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          cx="12"
+          cy="5"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          r="2"
+        />
+        <circle
+          cx="12"
+          cy="19"
+          r="2"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(MoreVertIcon)>
+`;

package/src/MoreVertIcon/index.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import MoreVertIcon from '@digigov/react-core/MoreVertIcon';
+
+it('renders the MoreVertIcon with no props', () => {
+  expect(mount(<MoreVertIcon />)).toMatchSnapshot();
+});
+it('renders the MoreVertIcon with prop size=s', () => {
+  expect(mount(<MoreVertIcon size="s" />)).toMatchSnapshot();
+});
+it('renders the MoreVertIcon with prop size=m', () => {
+  expect(mount(<MoreVertIcon size="m" />)).toMatchSnapshot();
+});
+it('renders the MoreVertIcon with prop size=l', () => {
+  expect(mount(<MoreVertIcon size="l" />)).toMatchSnapshot();
+});
+it('renders the MoreVertIcon with prop size=xl', () => {
+  expect(mount(<MoreVertIcon size="xl" />)).toMatchSnapshot();
+});
+it('renders the MoreVertIcon with prop variant=dark', () => {
+  expect(mount(<MoreVertIcon variant="dark" />)).toMatchSnapshot();
+});
+it('renders the MoreVertIcon with prop variant=light', () => {
+  expect(mount(<MoreVertIcon variant="light" />)).toMatchSnapshot();
+});
+it('renders the MoreVertIcon with prop variant=gray', () => {
+  expect(mount(<MoreVertIcon variant="gray" />)).toMatchSnapshot();
+});
+it('renders the MoreVertIcon with prop variant=primary', () => {
+  expect(mount(<MoreVertIcon variant="primary" />)).toMatchSnapshot();
+});
+it('renders the MoreVertIcon with prop variant=success', () => {
+  expect(mount(<MoreVertIcon variant="success" />)).toMatchSnapshot();
+});
+it('renders the MoreVertIcon with prop variant=warning', () => {
+  expect(mount(<MoreVertIcon variant="warning" />)).toMatchSnapshot();
+});
+it('renders the MoreVertIcon with prop variant=error', () => {
+  expect(mount(<MoreVertIcon variant="error" />)).toMatchSnapshot();
+});
+it('renders the MoreVertIcon with prop variant=focus', () => {
+  expect(mount(<MoreVertIcon variant="focus" />)).toMatchSnapshot();
+});
+it('renders the MoreVertIcon with prop variant=warning and size=s', () => {
+  expect(mount(<MoreVertIcon variant="warning" size="s" />)).toMatchSnapshot();
+});
+it('renders the MoreVertIcon with prop variant=error and size= xl', () => {
+  expect(mount(<MoreVertIcon variant="warning" size="xl" />)).toMatchSnapshot();
+});

package/src/MoreVertIcon/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
+import clsx from 'clsx';
+export interface MoreVertIconProps 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>;
+}
+/**
+ * Use MoreVertIcon component when you need to show more options.
+ */
+export const MoreVertIcon: React.FC<MoreVertIconProps> = React.forwardRef<
+  SVGSVGElement,
+  MoreVertIconProps
+>(function MoreVertIcon({ size, variant, className, ...props }, ref) {
+  return (
+    <SvgIcon
+      size={size}
+      variant={variant}
+      className={clsx(className, {
+        'govgr-svg-icon--check': true,
+      })}
+      ref={ref}
+      {...props}
+    >
+      <circle cx="12" cy="5" r="2" />
+      <circle cx="12" cy="12" r="2" />
+      <circle cx="12" cy="19" r="2" />
+    </SvgIcon>
+  );
+});
+
+export default MoreVertIcon;