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

package/src/AccessibilityIcon/config.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
+import IconBase from '@digigov/react-icons/IconBase';
 
 export interface AccessibilityType {}
 
-export function accessibility(): React.ReactElement {
+export function accessibility(): React.ReactElement<any> {
   return (
     <>
-      <title>Μενού Προσβασιμότητας</title>
-      <circle cx="12" cy="3" r="3" />
-      <path
+      <IconBase as="title">Μενού Προσβασιμότητας</IconBase>
+      <IconBase as="circle" cx="12" cy="3" r="3" />
+      <IconBase
+        as="path"
         d="M19.76,6.13c-4.94,2.01-10.57,2.01-15.51,0c-0.71-0.3-1.55-0.04-1.98,0.66c-1.41,2.6,3.27,3.76,4.94,4.37
 	c0.4,0.11,0.81,0.2,1.22,0.28c0.56,0.11,0.92,0.67,0.79,1.25c-0.79,3.66-1.96,9.1-1.96,9.1c-0.46,2.27,2.72,3.15,3.39,0.92L12,17.93
 	l1.36,4.78c0.67,2.22,3.85,1.36,3.39-0.92c0,0-1.16-5.4-1.95-9.06c-0.12-0.57,0.22-1.16,0.77-1.27c2.01-0.41,3.94-1.17,5.68-2.31

package/src/AccessibilityIcon/index.test.tsx

@@ -1,36 +1,44 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import AccessibilityIcon from '@digigov/react-icons/AccessibilityIcon';
 
 it('renders the AccessibilityIcon with no props', () => {
-  expect(mount(<AccessibilityIcon />)).toMatchSnapshot();
+  expect(render(<AccessibilityIcon />).baseElement).toMatchSnapshot();
 });
 it('renders the AccessibilityIcon with prop size=s', () => {
-  expect(mount(<AccessibilityIcon size="sm" />)).toMatchSnapshot();
+  expect(render(<AccessibilityIcon size="sm" />).baseElement).toMatchSnapshot();
 });
 it('renders the AccessibilityIcon with prop size=l', () => {
-  expect(mount(<AccessibilityIcon size="lg" />)).toMatchSnapshot();
+  expect(render(<AccessibilityIcon size="lg" />).baseElement).toMatchSnapshot();
 });
-it('renders the AccessibilityIcon with prop variant=dark', () => {
-  expect(mount(<AccessibilityIcon variant="dark" />)).toMatchSnapshot();
+it('renders the AccessibilityIcon with prop color=base-content', () => {
+  expect(
+    render(<AccessibilityIcon color="base-content" />).baseElement
+  ).toMatchSnapshot();
 });
-it('renders the AccessibilityIcon with prop variant=primary', () => {
-  expect(mount(<AccessibilityIcon variant="primary" />)).toMatchSnapshot();
+it('renders the AccessibilityIcon with prop color=primary', () => {
+  expect(
+    render(<AccessibilityIcon color="primary" />).baseElement
+  ).toMatchSnapshot();
 });
-it('renders the AccessibilityIcon with prop variant=success', () => {
-  expect(mount(<AccessibilityIcon variant="success" />)).toMatchSnapshot();
+it('renders the AccessibilityIcon with prop color=success', () => {
+  expect(
+    render(<AccessibilityIcon color="success" />).baseElement
+  ).toMatchSnapshot();
 });
-it('renders the AccessibilityIcon with prop variant=error', () => {
-  expect(mount(<AccessibilityIcon variant="error" />)).toMatchSnapshot();
+it('renders the AccessibilityIcon with prop color=error', () => {
+  expect(
+    render(<AccessibilityIcon color="error" />).baseElement
+  ).toMatchSnapshot();
 });
-it('renders the AccessibilityIcon with prop variant=warning and size=s', () => {
+it('renders the AccessibilityIcon with prop color=warning and size=s', () => {
   expect(
-    mount(<AccessibilityIcon variant="warning" size="sm" />)
+    render(<AccessibilityIcon color="warning" size="sm" />).baseElement
   ).toMatchSnapshot();
 });
-it('renders the AccessibilityIcon with prop variant=error and size= xl', () => {
+it('renders the AccessibilityIcon with prop color=error and size= xl', () => {
   expect(
-    mount(<AccessibilityIcon variant="warning" size="xl" />)
+    render(<AccessibilityIcon color="warning" size="xl" />).baseElement
   ).toMatchSnapshot();
 });

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

@@ -1,148 +1,81 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the ArrowIcon with direction down prop 1`] = `
-<ArrowIcon
-  direction="down"
->
-  <ForwardRef(Icon)
-    direction="down"
-    icon="arrow"
-  >
-    <ForwardRef(SvgIcon)
-      className="ds-svg-icon--arrow"
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--arrow ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
     >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="ds-svg-icon--arrow ds-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="ds-svg-icon--arrow ds-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <arrow
-            direction="down"
-          >
-            <polygon
-              points="19.7 9.6 13.7 15.52 13.7 2.07 10.37 2 10.32 15.52 4.4 9.6 2 12 12 22 22 12 19.7 9.6"
-            />
-          </arrow>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</ArrowIcon>
+      <polygon
+        as="polygon"
+        class=""
+        points="19.7 9.6 13.7 15.52 13.7 2.07 10.37 2 10.32 15.52 4.4 9.6 2 12 12 22 22 12 19.7 9.6"
+      />
+    </svg>
+  </div>
+</body>
 `;
 
 exports[`renders the ArrowIcon with direction left prop 1`] = `
-<ArrowIcon
-  direction="left"
->
-  <ForwardRef(Icon)
-    direction="left"
-    icon="arrow"
-  >
-    <ForwardRef(SvgIcon)
-      className="ds-svg-icon--arrow"
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--arrow ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
     >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="ds-svg-icon--arrow ds-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="ds-svg-icon--arrow ds-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <arrow
-            direction="left"
-          >
-            <polygon
-              points="14.4 19.7 8.48 13.7 21.93 13.7 22 10.37 8.48 10.32 14.4 4.4 12 2 2 12 12 22 14.4 19.7"
-            />
-          </arrow>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</ArrowIcon>
+      <polygon
+        as="polygon"
+        class=""
+        points="14.4 19.7 8.48 13.7 21.93 13.7 22 10.37 8.48 10.32 14.4 4.4 12 2 2 12 12 22 14.4 19.7"
+      />
+    </svg>
+  </div>
+</body>
 `;
 
 exports[`renders the ArrowIcon with direction up prop 1`] = `
-<ArrowIcon
-  direction="up"
->
-  <ForwardRef(Icon)
-    direction="up"
-    icon="arrow"
-  >
-    <ForwardRef(SvgIcon)
-      className="ds-svg-icon--arrow"
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--arrow ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
     >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="ds-svg-icon--arrow ds-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="ds-svg-icon--arrow ds-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <arrow
-            direction="up"
-          >
-            <polygon
-              points="22 12 12 2 2 12 4.3 14.4 10.3 8.48 10.3 21.93 13.63 22 13.68 8.48 19.6 14.4 22 12"
-            />
-          </arrow>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</ArrowIcon>
+      <polygon
+        as="polygon"
+        class=""
+        points="22 12 12 2 2 12 4.3 14.4 10.3 8.48 10.3 21.93 13.63 22 13.68 8.48 19.6 14.4 22 12"
+      />
+    </svg>
+  </div>
+</body>
 `;
 
 exports[`renders the ArrowIcon with no props, direction prop is right by default 1`] = `
-<ArrowIcon>
-  <ForwardRef(Icon)
-    icon="arrow"
-  >
-    <ForwardRef(SvgIcon)
-      className="ds-svg-icon--arrow"
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--arrow ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
     >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="ds-svg-icon--arrow ds-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="ds-svg-icon--arrow ds-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <arrow>
-            <polygon
-              points="22 12 12 2 2 12 4.3 14.4 10.3 8.48 10.3 21.93 13.63 22 13.68 8.48 19.6 14.4 22 12"
-            />
-          </arrow>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</ArrowIcon>
+      <polygon
+        as="polygon"
+        class=""
+        points="22 12 12 2 2 12 4.3 14.4 10.3 8.48 10.3 21.93 13.63 22 13.68 8.48 19.6 14.4 22 12"
+      />
+    </svg>
+  </div>
+</body>
 `;

package/src/ArrowIcon/config.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import IconBase from '@digigov/react-icons/IconBase';
 
 export interface ArrowType {
   /**
@@ -15,16 +16,28 @@ export const arrow: React.FC<ArrowType> = ({ direction = 'up' }) => {
   return (
     <>
       {direction === 'left' && (
-        <polygon points="14.4 19.7 8.48 13.7 21.93 13.7 22 10.37 8.48 10.32 14.4 4.4 12 2 2 12 12 22 14.4 19.7" />
+        <IconBase
+          as="polygon"
+          points="14.4 19.7 8.48 13.7 21.93 13.7 22 10.37 8.48 10.32 14.4 4.4 12 2 2 12 12 22 14.4 19.7"
+        />
       )}
       {direction === 'right' && (
-        <polygon points="9.6 4.3 15.52 10.3 2.07 10.3 2 13.63 15.52 13.68 9.6 19.6 12 22 22 12 12 2 9.6 4.3" />
+        <IconBase
+          as="polygon"
+          points="9.6 4.3 15.52 10.3 2.07 10.3 2 13.63 15.52 13.68 9.6 19.6 12 22 22 12 12 2 9.6 4.3"
+        />
       )}
       {direction === 'up' && (
-        <polygon points="22 12 12 2 2 12 4.3 14.4 10.3 8.48 10.3 21.93 13.63 22 13.68 8.48 19.6 14.4 22 12" />
+        <IconBase
+          as="polygon"
+          points="22 12 12 2 2 12 4.3 14.4 10.3 8.48 10.3 21.93 13.63 22 13.68 8.48 19.6 14.4 22 12"
+        />
       )}
       {direction === 'down' && (
-        <polygon points="19.7 9.6 13.7 15.52 13.7 2.07 10.37 2 10.32 15.52 4.4 9.6 2 12 12 22 22 12 19.7 9.6" />
+        <IconBase
+          as="polygon"
+          points="19.7 9.6 13.7 15.52 13.7 2.07 10.37 2 10.32 15.52 4.4 9.6 2 12 12 22 22 12 19.7 9.6"
+        />
       )}
     </>
   );

package/src/ArrowIcon/index.test.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import ArrowIcon from '@digigov/react-icons/ArrowIcon';
 
 it('renders the ArrowIcon with no props, direction prop is right by default', () => {
-  expect(mount(<ArrowIcon />)).toMatchSnapshot();
+  expect(render(<ArrowIcon />).baseElement).toMatchSnapshot();
 });
 
 it('renders the ArrowIcon with direction left prop', () => {
-  expect(mount(<ArrowIcon direction="left" />)).toMatchSnapshot();
+  expect(render(<ArrowIcon direction="left" />).baseElement).toMatchSnapshot();
 });
 
 it('renders the ArrowIcon with direction up prop', () => {
-  expect(mount(<ArrowIcon direction="up" />)).toMatchSnapshot();
+  expect(render(<ArrowIcon direction="up" />).baseElement).toMatchSnapshot();
 });
 
 it('renders the ArrowIcon with direction down prop', () => {
-  expect(mount(<ArrowIcon direction="down" />)).toMatchSnapshot();
+  expect(render(<ArrowIcon direction="down" />).baseElement).toMatchSnapshot();
 });