@digigov/react-icons 2.0.0-8de46296 → 2.0.0-aefd0709

package/src/PdfFileIcon/config.tsx

@@ -1,17 +1,27 @@
 import React from 'react';
+import IconBase from '@digigov/react-icons/IconBase';
 
 export interface PdfFileType {}
 
 export function pdfFile(): React.ReactElement {
   return (
-    <g>
-      <polygon points="4 19 4 7 2 7 2 21 18 21 18 19 4 19" />
-      <g>
-        <path d="M9.594,8.364h-.838v1.504h.823c.243,0,.429-.061.557-.183.128-.122.192-.294.192-.516,0-.243-.066-.438-.197-.584-.131-.146-.31-.22-.537-.222Z" />
-        <path d="M13.952,8.364h-.422v3.276h.437c.36,0,.637-.128.831-.385.193-.257.29-.638.29-1.144v-.226c0-.504-.097-.883-.29-1.139-.193-.255-.475-.383-.845-.383Z" />
-        <path d="M6,3v14h16V3H6ZM11.057,10.381c-.364.304-.863.456-1.498.456h-.802v1.769h-1.257v-5.213h2.08c.399,0,.751.073,1.058.22s.544.356.712.627c.168.271.252.578.252.922,0,.508-.182.915-.546,1.219ZM16.368,10.111c0,.477-.101.905-.303,1.284-.202.378-.486.674-.852.888-.366.214-.775.322-1.226.324h-1.715v-5.213h1.679c.461,0,.875.104,1.242.313.368.209.655.504.861.884.206.381.311.807.313,1.28v.24ZM20.5,8.364h-2.231v1.199h2.026v.967h-2.026v2.077h-1.257v-5.213h3.487v.97Z" />
-      </g>
-    </g>
+    <IconBase as="g">
+      <IconBase as="polygon" points="4 19 4 7 2 7 2 21 18 21 18 19 4 19" />
+      <IconBase as="g">
+        <IconBase
+          as="path"
+          d="M9.594,8.364h-.838v1.504h.823c.243,0,.429-.061.557-.183.128-.122.192-.294.192-.516,0-.243-.066-.438-.197-.584-.131-.146-.31-.22-.537-.222Z"
+        />
+        <IconBase
+          as="path"
+          d="M13.952,8.364h-.422v3.276h.437c.36,0,.637-.128.831-.385.193-.257.29-.638.29-1.144v-.226c0-.504-.097-.883-.29-1.139-.193-.255-.475-.383-.845-.383Z"
+        />
+        <IconBase
+          as="path"
+          d="M6,3v14h16V3H6ZM11.057,10.381c-.364.304-.863.456-1.498.456h-.802v1.769h-1.257v-5.213h2.08c.399,0,.751.073,1.058.22s.544.356.712.627c.168.271.252.578.252.922,0,.508-.182.915-.546,1.219ZM16.368,10.111c0,.477-.101.905-.303,1.284-.202.378-.486.674-.852.888-.366.214-.775.322-1.226.324h-1.715v-5.213h1.679c.461,0,.875.104,1.242.313.368.209.655.504.861.884.206.381.311.807.313,1.28v.24ZM20.5,8.364h-2.231v1.199h2.026v.967h-2.026v2.077h-1.257v-5.213h3.487v.97Z"
+        />
+      </IconBase>
+    </IconBase>
   );
 }
 

package/src/PdfFileIcon/index.test.tsx

@@ -1,26 +1,30 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import PdfFileIcon from '@digigov/react-icons/PdfFileIcon';
 
 it('renders the PdfFileIcon with no props', () => {
-  expect(mount(<PdfFileIcon />)).toMatchSnapshot();
+  expect(render(<PdfFileIcon />).baseElement).toMatchSnapshot();
 });
 it('renders the PdfFileIcon with prop size=m', () => {
-  expect(mount(<PdfFileIcon size="md" />)).toMatchSnapshot();
+  expect(render(<PdfFileIcon size="md" />).baseElement).toMatchSnapshot();
 });
 it('renders the PdfFileIcon with prop size=xl', () => {
-  expect(mount(<PdfFileIcon size="xl" />)).toMatchSnapshot();
+  expect(render(<PdfFileIcon size="xl" />).baseElement).toMatchSnapshot();
 });
-it('renders the PdfFileIcon with prop variant=light', () => {
-  expect(mount(<PdfFileIcon variant="light" />)).toMatchSnapshot();
+it('renders the PdfFileIcon with prop color=white', () => {
+  expect(render(<PdfFileIcon color="white" />).baseElement).toMatchSnapshot();
 });
-it('renders the PdfFileIcon with prop variant=warning', () => {
-  expect(mount(<PdfFileIcon variant="warning" />)).toMatchSnapshot();
+it('renders the PdfFileIcon with prop color=warning', () => {
+  expect(render(<PdfFileIcon color="warning" />).baseElement).toMatchSnapshot();
 });
-it('renders the PdfFileIcon with prop variant=warning and size=s', () => {
-  expect(mount(<PdfFileIcon variant="warning" size="sm" />)).toMatchSnapshot();
+it('renders the PdfFileIcon with prop color=warning and size=s', () => {
+  expect(
+    render(<PdfFileIcon color="warning" size="sm" />).baseElement
+  ).toMatchSnapshot();
 });
-it('renders the PdfFileIcon with prop variant=error and size= xl', () => {
-  expect(mount(<PdfFileIcon variant="warning" size="xl" />)).toMatchSnapshot();
+it('renders the PdfFileIcon with prop color=error and size= xl', () => {
+  expect(
+    render(<PdfFileIcon color="warning" size="xl" />).baseElement
+  ).toMatchSnapshot();
 });

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

@@ -1,262 +1,141 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the PlusIcon with no props 1`] = `
-<PlusIcon>
-  <ForwardRef(Icon)
-    icon="plus"
-  >
-    <ForwardRef(SvgIcon)
-      className="ds-svg-icon--plus"
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--plus ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
     >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="ds-svg-icon--plus ds-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="ds-svg-icon--plus ds-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <plus>
-            <polygon
-              points="22 10.35 13.65 10.35 13.65 2 10.35 2 10.35 10.35 2 10.35 2 13.65 10.35 13.65 10.35 22 13.65 22 13.65 13.65 22 13.65 22 10.35"
-            />
-          </plus>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</PlusIcon>
+      <polygon
+        as="polygon"
+        class=""
+        points="22 10.35 13.65 10.35 13.65 2 10.35 2 10.35 10.35 2 10.35 2 13.65 10.35 13.65 10.35 22 13.65 22 13.65 13.65 22 13.65 22 10.35"
+      />
+    </svg>
+  </div>
+</body>
 `;
 
-exports[`renders the PlusIcon with prop size=m 1`] = `
-<PlusIcon
-  size="md"
->
-  <ForwardRef(Icon)
-    icon="plus"
-    size="md"
-  >
-    <ForwardRef(SvgIcon)
-      className="ds-svg-icon--plus"
-      size="md"
+exports[`renders the PlusIcon with prop color=error and size= xl 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--plus ds-svg-icon ds-svg-icon--warning ds-svg-icon--xl"
+      focusable="false"
+      viewBox="0 0 24 24"
     >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="ds-svg-icon--plus ds-svg-icon--md ds-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="ds-svg-icon--plus ds-svg-icon--md ds-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <plus>
-            <polygon
-              points="22 10.35 13.65 10.35 13.65 2 10.35 2 10.35 10.35 2 10.35 2 13.65 10.35 13.65 10.35 22 13.65 22 13.65 13.65 22 13.65 22 10.35"
-            />
-          </plus>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</PlusIcon>
+      <polygon
+        as="polygon"
+        class=""
+        points="22 10.35 13.65 10.35 13.65 2 10.35 2 10.35 10.35 2 10.35 2 13.65 10.35 13.65 10.35 22 13.65 22 13.65 13.65 22 13.65 22 10.35"
+      />
+    </svg>
+  </div>
+</body>
 `;
 
-exports[`renders the PlusIcon with prop size=xl 1`] = `
-<PlusIcon
-  size="xl"
->
-  <ForwardRef(Icon)
-    icon="plus"
-    size="xl"
-  >
-    <ForwardRef(SvgIcon)
-      className="ds-svg-icon--plus"
-      size="xl"
+exports[`renders the PlusIcon with prop color=warning 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--plus ds-svg-icon ds-svg-icon--warning"
+      focusable="false"
+      viewBox="0 0 24 24"
     >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="ds-svg-icon--plus ds-svg-icon--xl ds-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="ds-svg-icon--plus ds-svg-icon--xl ds-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <plus>
-            <polygon
-              points="22 10.35 13.65 10.35 13.65 2 10.35 2 10.35 10.35 2 10.35 2 13.65 10.35 13.65 10.35 22 13.65 22 13.65 13.65 22 13.65 22 10.35"
-            />
-          </plus>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</PlusIcon>
+      <polygon
+        as="polygon"
+        class=""
+        points="22 10.35 13.65 10.35 13.65 2 10.35 2 10.35 10.35 2 10.35 2 13.65 10.35 13.65 10.35 22 13.65 22 13.65 13.65 22 13.65 22 10.35"
+      />
+    </svg>
+  </div>
+</body>
 `;
 
-exports[`renders the PlusIcon with prop variant=error and size= xl 1`] = `
-<PlusIcon
-  size="xl"
-  variant="warning"
->
-  <ForwardRef(Icon)
-    icon="plus"
-    size="xl"
-    variant="warning"
-  >
-    <ForwardRef(SvgIcon)
-      className="ds-svg-icon--plus"
-      size="xl"
-      variant="warning"
+exports[`renders the PlusIcon with prop color=warning and size=s 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--plus ds-svg-icon ds-svg-icon--warning ds-svg-icon--sm"
+      focusable="false"
+      viewBox="0 0 24 24"
     >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="ds-svg-icon--plus ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="ds-svg-icon--plus ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <plus>
-            <polygon
-              points="22 10.35 13.65 10.35 13.65 2 10.35 2 10.35 10.35 2 10.35 2 13.65 10.35 13.65 10.35 22 13.65 22 13.65 13.65 22 13.65 22 10.35"
-            />
-          </plus>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</PlusIcon>
+      <polygon
+        as="polygon"
+        class=""
+        points="22 10.35 13.65 10.35 13.65 2 10.35 2 10.35 10.35 2 10.35 2 13.65 10.35 13.65 10.35 22 13.65 22 13.65 13.65 22 13.65 22 10.35"
+      />
+    </svg>
+  </div>
+</body>
 `;
 
-exports[`renders the PlusIcon with prop variant=light 1`] = `
-<PlusIcon
-  variant="light"
->
-  <ForwardRef(Icon)
-    icon="plus"
-    variant="light"
-  >
-    <ForwardRef(SvgIcon)
-      className="ds-svg-icon--plus"
-      variant="light"
+exports[`renders the PlusIcon with prop color=white 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--plus ds-svg-icon ds-svg-icon--white"
+      focusable="false"
+      viewBox="0 0 24 24"
     >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="ds-svg-icon--plus ds-svg-icon--light ds-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="ds-svg-icon--plus ds-svg-icon--light ds-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <plus>
-            <polygon
-              points="22 10.35 13.65 10.35 13.65 2 10.35 2 10.35 10.35 2 10.35 2 13.65 10.35 13.65 10.35 22 13.65 22 13.65 13.65 22 13.65 22 10.35"
-            />
-          </plus>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</PlusIcon>
+      <polygon
+        as="polygon"
+        class=""
+        points="22 10.35 13.65 10.35 13.65 2 10.35 2 10.35 10.35 2 10.35 2 13.65 10.35 13.65 10.35 22 13.65 22 13.65 13.65 22 13.65 22 10.35"
+      />
+    </svg>
+  </div>
+</body>
 `;
 
-exports[`renders the PlusIcon with prop variant=warning 1`] = `
-<PlusIcon
-  variant="warning"
->
-  <ForwardRef(Icon)
-    icon="plus"
-    variant="warning"
-  >
-    <ForwardRef(SvgIcon)
-      className="ds-svg-icon--plus"
-      variant="warning"
+exports[`renders the PlusIcon with prop size=m 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--plus ds-svg-icon ds-svg-icon--md"
+      focusable="false"
+      viewBox="0 0 24 24"
     >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="ds-svg-icon--plus ds-svg-icon--warning ds-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="ds-svg-icon--plus ds-svg-icon--warning ds-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <plus>
-            <polygon
-              points="22 10.35 13.65 10.35 13.65 2 10.35 2 10.35 10.35 2 10.35 2 13.65 10.35 13.65 10.35 22 13.65 22 13.65 13.65 22 13.65 22 10.35"
-            />
-          </plus>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</PlusIcon>
+      <polygon
+        as="polygon"
+        class=""
+        points="22 10.35 13.65 10.35 13.65 2 10.35 2 10.35 10.35 2 10.35 2 13.65 10.35 13.65 10.35 22 13.65 22 13.65 13.65 22 13.65 22 10.35"
+      />
+    </svg>
+  </div>
+</body>
 `;
 
-exports[`renders the PlusIcon with prop variant=warning and size=s 1`] = `
-<PlusIcon
-  size="sm"
-  variant="warning"
->
-  <ForwardRef(Icon)
-    icon="plus"
-    size="sm"
-    variant="warning"
-  >
-    <ForwardRef(SvgIcon)
-      className="ds-svg-icon--plus"
-      size="sm"
-      variant="warning"
+exports[`renders the PlusIcon with prop size=xl 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--plus ds-svg-icon ds-svg-icon--xl"
+      focusable="false"
+      viewBox="0 0 24 24"
     >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="ds-svg-icon--plus ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="ds-svg-icon--plus ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <plus>
-            <polygon
-              points="22 10.35 13.65 10.35 13.65 2 10.35 2 10.35 10.35 2 10.35 2 13.65 10.35 13.65 10.35 22 13.65 22 13.65 13.65 22 13.65 22 10.35"
-            />
-          </plus>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</PlusIcon>
+      <polygon
+        as="polygon"
+        class=""
+        points="22 10.35 13.65 10.35 13.65 2 10.35 2 10.35 10.35 2 10.35 2 13.65 10.35 13.65 10.35 22 13.65 22 13.65 13.65 22 13.65 22 10.35"
+      />
+    </svg>
+  </div>
+</body>
 `;

package/src/PlusIcon/config.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
+import IconBase from '@digigov/react-icons/IconBase';
 
 export interface PlusType {}
 
 export function plus(): React.ReactElement {
   return (
     <>
-      <polygon points="22 10.35 13.65 10.35 13.65 2 10.35 2 10.35 10.35 2 10.35 2 13.65 10.35 13.65 10.35 22 13.65 22 13.65 13.65 22 13.65 22 10.35" />
+      <IconBase
+        as="polygon"
+        points="22 10.35 13.65 10.35 13.65 2 10.35 2 10.35 10.35 2 10.35 2 13.65 10.35 13.65 10.35 22 13.65 22 13.65 13.65 22 13.65 22 10.35"
+      />
     </>
   );
 }

package/src/PlusIcon/index.test.tsx

@@ -1,26 +1,30 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import PlusIcon from '@digigov/react-icons/PlusIcon';
 
 it('renders the PlusIcon with no props', () => {
-  expect(mount(<PlusIcon />)).toMatchSnapshot();
+  expect(render(<PlusIcon />).baseElement).toMatchSnapshot();
 });
 it('renders the PlusIcon with prop size=m', () => {
-  expect(mount(<PlusIcon size="md" />)).toMatchSnapshot();
+  expect(render(<PlusIcon size="md" />).baseElement).toMatchSnapshot();
 });
 it('renders the PlusIcon with prop size=xl', () => {
-  expect(mount(<PlusIcon size="xl" />)).toMatchSnapshot();
+  expect(render(<PlusIcon size="xl" />).baseElement).toMatchSnapshot();
 });
-it('renders the PlusIcon with prop variant=light', () => {
-  expect(mount(<PlusIcon variant="light" />)).toMatchSnapshot();
+it('renders the PlusIcon with prop color=white', () => {
+  expect(render(<PlusIcon color="white" />).baseElement).toMatchSnapshot();
 });
-it('renders the PlusIcon with prop variant=warning', () => {
-  expect(mount(<PlusIcon variant="warning" />)).toMatchSnapshot();
+it('renders the PlusIcon with prop color=warning', () => {
+  expect(render(<PlusIcon color="warning" />).baseElement).toMatchSnapshot();
 });
-it('renders the PlusIcon with prop variant=warning and size=s', () => {
-  expect(mount(<PlusIcon variant="warning" size="sm" />)).toMatchSnapshot();
+it('renders the PlusIcon with prop color=warning and size=s', () => {
+  expect(
+    render(<PlusIcon color="warning" size="sm" />).baseElement
+  ).toMatchSnapshot();
 });
-it('renders the PlusIcon with prop variant=error and size= xl', () => {
-  expect(mount(<PlusIcon variant="warning" size="xl" />)).toMatchSnapshot();
+it('renders the PlusIcon with prop color=error and size= xl', () => {
+  expect(
+    render(<PlusIcon color="warning" size="xl" />).baseElement
+  ).toMatchSnapshot();
 });