@digigov/react-icons 1.2.0-dcbd7ded → 2.0.0-0edebf87

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

@@ -0,0 +1,390 @@
+// 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="ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=base-content 1`] = `
+<ForwardRef(SvgIcon)
+  color="base-content"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--base-content ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--base-content ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=dark 1`] = `
+<ForwardRef(SvgIcon)
+  color="dark"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--dark ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--dark ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=error 1`] = `
+<ForwardRef(SvgIcon)
+  color="error"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--error ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--error ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=error and size= xl 1`] = `
+<ForwardRef(SvgIcon)
+  color="warning"
+  size="xl"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="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--warning ds-svg-icon--xl ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=focus 1`] = `
+<ForwardRef(SvgIcon)
+  color="focus"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--focus ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--focus ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=gray 1`] = `
+<ForwardRef(SvgIcon)
+  color="gray"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--gray ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--gray ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=primary 1`] = `
+<ForwardRef(SvgIcon)
+  color="primary"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--primary ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--primary ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=success 1`] = `
+<ForwardRef(SvgIcon)
+  color="success"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--success ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--success ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=warning 1`] = `
+<ForwardRef(SvgIcon)
+  color="warning"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--warning ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--warning ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=warning and size=sm 1`] = `
+<ForwardRef(SvgIcon)
+  color="warning"
+  size="sm"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="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--warning ds-svg-icon--sm ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=white 1`] = `
+<ForwardRef(SvgIcon)
+  color="white"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--white ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--white ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop size=lg 1`] = `
+<ForwardRef(SvgIcon)
+  size="lg"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--lg ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--lg ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop size=md 1`] = `
+<ForwardRef(SvgIcon)
+  size="md"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--md ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--md ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop size=sm 1`] = `
+<ForwardRef(SvgIcon)
+  size="sm"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--sm ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--sm ds-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="ds-svg-icon--xl ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--xl ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop size=xs 1`] = `
+<ForwardRef(SvgIcon)
+  size="xs"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--xs ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--xs ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;

package/src/SvgIcon/index.test.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import SvgIcon from '@digigov/react-icons/SvgIcon';
+
+it('renders the SvgIcon with no props', () => {
+  expect(mount(<SvgIcon />)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop size=xs', () => {
+  expect(mount(<SvgIcon size="xs">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop size=sm', () => {
+  expect(mount(<SvgIcon size="sm">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop size=md', () => {
+  expect(mount(<SvgIcon size="md">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop size=lg', () => {
+  expect(mount(<SvgIcon size="lg">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop size=xl', () => {
+  expect(mount(<SvgIcon size="xl">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop color=base-content', () => {
+  expect(mount(<SvgIcon color="base-content">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop color=dark', () => {
+  expect(mount(<SvgIcon color="dark">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop color=white', () => {
+  expect(mount(<SvgIcon color="white">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop color=gray', () => {
+  expect(mount(<SvgIcon color="gray">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop color=primary', () => {
+  expect(mount(<SvgIcon color="primary">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop color=success', () => {
+  expect(mount(<SvgIcon color="success">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop color=warning', () => {
+  expect(mount(<SvgIcon color="warning">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop color=error', () => {
+  expect(mount(<SvgIcon color="error">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop color=focus', () => {
+  expect(mount(<SvgIcon color="focus">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop color=warning and size=sm', () => {
+  expect(
+    mount(
+      <SvgIcon color="warning" size="sm">
+        hello
+      </SvgIcon>
+    )
+  ).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop color=error and size= xl', () => {
+  expect(
+    mount(
+      <SvgIcon color="warning" size="xl">
+        hello
+      </SvgIcon>
+    )
+  ).toMatchSnapshot();
+});

package/src/SvgIcon/index.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-icons/Base';
+
+export interface SvgIconProps extends BaseProps<'svg'> {
+  /**
+   * size is optional.
+   * size prop declares the size of the svg icon.
+   * @value 'xs'
+   * @value 'sm'
+   * @value 'md'
+   * @value 'lg'
+   * @value 'xl'
+   * @default 'sm'
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /**
+   * color property styles svg icon with Gov.gr palette's basic colors.
+   * color property is optional.
+   * @value 'base-content' 
+   * @value 'dark', always dark, among all themes
+   * @value 'white', always white, among all themes
+   * @value 'gray'
+   * @value 'primary'
+   * @value 'success'
+   * @value 'warning'
+   * @value 'error'
+   * @value 'focus', use only in focus state, in dark background
+   * @value 'info'
+   * @value 'link'
+   */
+  color?:
+  | 'base-content'
+  | 'dark'
+  | 'white'
+  | 'gray'
+  | 'primary'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'focus'
+  | 'info'
+  | 'link';
+}
+/**
+ * Use SvgIcon as global svg component.
+ *  SvgIcon can be used inside other svg components as children such as CheckIcon, CaretIcon etc.
+ */
+export const SvgIcon = React.forwardRef<SVGSVGElement, SvgIconProps>(
+  function SvgIcon({ size, color, children, className, ...props }, ref) {
+    return (
+      <Base
+        as="svg"
+        ref={ref}
+        className={clsx(className, {
+          'ds-svg-icon': true,
+          [`ds-svg-icon--${color}`]: color !== undefined,
+          [`ds-svg-icon--${size}`]: size !== undefined,
+        })}
+        focusable="false"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default SvgIcon;