@digigov/react-icons 1.0.0-rc → 1.0.0-rc.1

package/src/Icon/index.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Icon from '@digigov/react-icons/Icon';
+
+it('renders the Icon with no props', () => {
+  expect(mount(<Icon />)).toMatchSnapshot();
+});
+
+it('renders the Icon with prop icon=arrow and direction=up', () => {
+  expect(mount(<Icon direction="up" />)).toMatchSnapshot();
+});
+it('renders the Icon with prop prop icon=burger', () => {
+  expect(mount(<Icon icon="burger" />)).toMatchSnapshot();
+});
+it('renders the Icon prop icon= "caret"', () => {
+  expect(mount(<Icon icon="caret" />)).toMatchSnapshot();
+});
+it('renders the Icon prop icon= "caret" and direction=left', () => {
+  expect(mount(<Icon icon="caret" direction="left" />)).toMatchSnapshot();
+});
+it('renders the Icon prop icon= "check"', () => {
+  expect(mount(<Icon icon="check" />)).toMatchSnapshot();
+});
+it('renders the Icon prop icon= "close"', () => {
+  expect(mount(<Icon icon="close" />)).toMatchSnapshot();
+});
+it('renders the Icon with prop prop icon=globe', () => {
+  expect(mount(<Icon icon="globe" />)).toMatchSnapshot();
+});
+it('renders the Icon props icon= "moreVert"', () => {
+  expect(mount(<Icon icon="moreVert" />)).toMatchSnapshot();
+});
+it('renders the Icon prop icon= "uncheck"', () => {
+  expect(mount(<Icon icon="uncheck" />)).toMatchSnapshot();
+});

package/src/Icon/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import clsx from 'clsx';
+import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
+import * as icons from '@digigov/react-icons/icons';
+import type { IconTypes } from '@digigov/react-icons/icons';
+
+export type IconProps<N extends keyof IconTypes> = SvgIconProps &
+  IconTypes[N] & {
+    /**
+     * 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>;
+    /**
+     * icon is optional, but strongly recommended.
+     * Default value is 'arrow'.
+     * Use this prop to display the icon you want.
+     */
+    icon?: N;
+  };
+
+type IconComponent = <C extends keyof IconTypes>(
+  props: IconProps<C>
+) => React.ReactElement | null;
+export type IconNames = keyof IconTypes;
+/**
+ * Icon is used whenever we need a GOV.GR icon.
+ * Choose the icon from the list in icon prop.
+ */
+export const Icon: IconComponent = React.forwardRef<
+  SVGSVGElement,
+  IconProps<IconNames>
+>(function Icon(
+  { icon = 'arrow', className, ...props }: IconProps<IconNames>,
+  ref
+) {
+  const IconComponent = icons[icon];
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const iconProps = IconComponent?.props.reduce((compProps, propName) => {
+    const value = props[propName];
+    delete props[propName];
+    return {
+      ...compProps,
+      [propName]: value,
+    };
+  }, {});
+
+  return (
+    <SvgIcon
+      ref={ref}
+      {...props}
+      className={clsx(className, {
+        [`govgr-svg-icon--${icon}`]: true,
+      })}
+    >
+      <IconComponent {...iconProps} />
+    </SvgIcon>
+  );
+});
+
+export default Icon;

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

@@ -94,55 +94,6 @@ exports[`renders the MoreVertIcon with prop size=l 1`] = `
 </MoreVertIcon>
 `;
 
-exports[`renders the MoreVertIcon with prop size=m 1`] = `
-<MoreVertIcon
-  size="md"
->
-  <ForwardRef(Icon)
-    icon="moreVert"
-    size="md"
-  >
-    <ForwardRef(SvgIcon)
-      className="govgr-svg-icon--moreVert"
-      size="md"
-    >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="govgr-svg-icon--moreVert govgr-svg-icon--md govgr-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="govgr-svg-icon--moreVert govgr-svg-icon--md govgr-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <moreVert>
-            <circle
-              cx="12"
-              cy="5"
-              r="2"
-            />
-            <circle
-              cx="12"
-              cy="12"
-              r="2"
-            />
-            <circle
-              cx="12"
-              cy="19"
-              r="2"
-            />
-          </moreVert>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</MoreVertIcon>
-`;
-
 exports[`renders the MoreVertIcon with prop size=s 1`] = `
 <MoreVertIcon
   size="sm"
@@ -192,55 +143,6 @@ exports[`renders the MoreVertIcon with prop size=s 1`] = `
 </MoreVertIcon>
 `;
 
-exports[`renders the MoreVertIcon with prop size=xl 1`] = `
-<MoreVertIcon
-  size="xl"
->
-  <ForwardRef(Icon)
-    icon="moreVert"
-    size="xl"
-  >
-    <ForwardRef(SvgIcon)
-      className="govgr-svg-icon--moreVert"
-      size="xl"
-    >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="govgr-svg-icon--moreVert govgr-svg-icon--xl govgr-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="govgr-svg-icon--moreVert govgr-svg-icon--xl govgr-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <moreVert>
-            <circle
-              cx="12"
-              cy="5"
-              r="2"
-            />
-            <circle
-              cx="12"
-              cy="12"
-              r="2"
-            />
-            <circle
-              cx="12"
-              cy="19"
-              r="2"
-            />
-          </moreVert>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</MoreVertIcon>
-`;
-
 exports[`renders the MoreVertIcon with prop variant=dark 1`] = `
 <MoreVertIcon
   variant="dark"
@@ -290,55 +192,6 @@ exports[`renders the MoreVertIcon with prop variant=dark 1`] = `
 </MoreVertIcon>
 `;
 
-exports[`renders the MoreVertIcon with prop variant=error 1`] = `
-<MoreVertIcon
-  variant="error"
->
-  <ForwardRef(Icon)
-    icon="moreVert"
-    variant="error"
-  >
-    <ForwardRef(SvgIcon)
-      className="govgr-svg-icon--moreVert"
-      variant="error"
-    >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="govgr-svg-icon--moreVert govgr-svg-icon--error govgr-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="govgr-svg-icon--moreVert govgr-svg-icon--error govgr-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <moreVert>
-            <circle
-              cx="12"
-              cy="5"
-              r="2"
-            />
-            <circle
-              cx="12"
-              cy="12"
-              r="2"
-            />
-            <circle
-              cx="12"
-              cy="19"
-              r="2"
-            />
-          </moreVert>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</MoreVertIcon>
-`;
-
 exports[`renders the MoreVertIcon with prop variant=error and size= xl 1`] = `
 <MoreVertIcon
   size="xl"
@@ -440,104 +293,6 @@ exports[`renders the MoreVertIcon with prop variant=focus 1`] = `
 </MoreVertIcon>
 `;
 
-exports[`renders the MoreVertIcon with prop variant=gray 1`] = `
-<MoreVertIcon
-  variant="gray"
->
-  <ForwardRef(Icon)
-    icon="moreVert"
-    variant="gray"
-  >
-    <ForwardRef(SvgIcon)
-      className="govgr-svg-icon--moreVert"
-      variant="gray"
-    >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="govgr-svg-icon--moreVert govgr-svg-icon--gray govgr-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="govgr-svg-icon--moreVert govgr-svg-icon--gray govgr-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <moreVert>
-            <circle
-              cx="12"
-              cy="5"
-              r="2"
-            />
-            <circle
-              cx="12"
-              cy="12"
-              r="2"
-            />
-            <circle
-              cx="12"
-              cy="19"
-              r="2"
-            />
-          </moreVert>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</MoreVertIcon>
-`;
-
-exports[`renders the MoreVertIcon with prop variant=light 1`] = `
-<MoreVertIcon
-  variant="light"
->
-  <ForwardRef(Icon)
-    icon="moreVert"
-    variant="light"
-  >
-    <ForwardRef(SvgIcon)
-      className="govgr-svg-icon--moreVert"
-      variant="light"
-    >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="govgr-svg-icon--moreVert govgr-svg-icon--light govgr-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="govgr-svg-icon--moreVert govgr-svg-icon--light govgr-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <moreVert>
-            <circle
-              cx="12"
-              cy="5"
-              r="2"
-            />
-            <circle
-              cx="12"
-              cy="12"
-              r="2"
-            />
-            <circle
-              cx="12"
-              cy="19"
-              r="2"
-            />
-          </moreVert>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</MoreVertIcon>
-`;
-
 exports[`renders the MoreVertIcon with prop variant=primary 1`] = `
 <MoreVertIcon
   variant="primary"
@@ -636,55 +391,6 @@ exports[`renders the MoreVertIcon with prop variant=success 1`] = `
 </MoreVertIcon>
 `;
 
-exports[`renders the MoreVertIcon with prop variant=warning 1`] = `
-<MoreVertIcon
-  variant="warning"
->
-  <ForwardRef(Icon)
-    icon="moreVert"
-    variant="warning"
-  >
-    <ForwardRef(SvgIcon)
-      className="govgr-svg-icon--moreVert"
-      variant="warning"
-    >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="govgr-svg-icon--moreVert govgr-svg-icon--warning govgr-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="govgr-svg-icon--moreVert govgr-svg-icon--warning govgr-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <moreVert>
-            <circle
-              cx="12"
-              cy="5"
-              r="2"
-            />
-            <circle
-              cx="12"
-              cy="12"
-              r="2"
-            />
-            <circle
-              cx="12"
-              cy="19"
-              r="2"
-            />
-          </moreVert>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</MoreVertIcon>
-`;
-
 exports[`renders the MoreVertIcon with prop variant=warning and size=s 1`] = `
 <MoreVertIcon
   size="sm"

package/src/MoreVertIcon/index.test.tsx

@@ -9,36 +9,18 @@ it('renders the MoreVertIcon with no props', () => {
 it('renders the MoreVertIcon with prop size=s', () => {
   expect(mount(<MoreVertIcon size="sm" />)).toMatchSnapshot();
 });
-it('renders the MoreVertIcon with prop size=m', () => {
-  expect(mount(<MoreVertIcon size="md" />)).toMatchSnapshot();
-});
 it('renders the MoreVertIcon with prop size=l', () => {
   expect(mount(<MoreVertIcon size="lg" />)).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();
 });

package/src/MoreVertIcon/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon, { IconProps } from '@digigov/react-core/Icon';
+import Icon, { IconProps } from '@digigov/react-icons/Icon';
 
 export const MoreVertIcon: React.FC<IconProps<'moreVert'>> = (props) => {
   return <Icon {...props} icon="moreVert"></Icon>;

package/src/SearchIcon/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon, { IconProps } from '@digigov/react-core/Icon';
+import Icon, { IconProps } from '@digigov/react-icons/Icon';
 
 export const SearchIcon: React.FC<IconProps<'search'>> = (props) => {
   return <Icon {...props} icon="search"></Icon>;