npm - @digigov/react-icons - Versions diffs - 2.0.0-rc.28 → 2.0.0-rc.29 - Mend

@digigov/react-icons 2.0.0-rc.28 → 2.0.0-rc.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (456) hide show

package/dist/src/RestoreIcon/config.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+import React from 'react';
+import IconBase from '@digigov/react-icons/IconBase';
+export interface RestoreType {}
+export function restore(): React.ReactElement {
+  return (
+    <>
+      <IconBase
+        as="path"
+        d="M12,21.3c-2.37,0-4.691-.929-6.407-2.559l1.669-2.003c1.247,1.247,2.974,1.962,4.738,1.962,3.694,0,6.7-3.006,6.7-6.7s-3.006-6.7-6.7-6.7-6.7,3.006-6.7,6.7h-2.6C2.7,6.872,6.872,2.7,12,2.7s9.3,4.172,9.3,9.3-4.172,9.3-9.3,9.3Z"
+      />
+      <IconBase as="path" d="M7.5,12H.5l3.5,4.2,3.5-4.2Z" />
+      <IconBase as="circle" cx="12" cy="12" r="1.65" />
+    </>
+  );
+}
+restore.props = [];
+export default restore;

package/dist/src/RestoreIcon/index.test.tsx ADDED Viewed

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

package/dist/src/RestoreIcon/index.tsx ADDED Viewed

@@ -0,0 +1,8 @@
+import React from 'react';
+import Icon, { IconProps } from '@digigov/react-icons/Icon';
+export const RestoreIcon: React.FC<IconProps<'restore'>> = (props) => {
+  return <Icon {...props} icon="restore"></Icon>;
+};
+export default RestoreIcon;

package/dist/src/SearchIcon/__snapshots__/index.test.tsx.snap ADDED Viewed

@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+exports[`renders the SearchIcon with no props 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--search ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        as="path"
+        class=""
+        d="M22,19.9l-5.4-5.4c0.9-1.3,1.4-2.8,1.4-4.5c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.7,0,3.2-0.5,4.5-1.4l5.4,5.4L22,19.9z M10,15c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S12.8,15,10,15z"
+      />
+    </svg>
+  </div>
+</body>
+`;

package/dist/src/SearchIcon/config.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import React from 'react';
+import IconBase from '@digigov/react-icons/IconBase';
+export interface SearchType {}
+export function search(): React.ReactElement {
+  return (
+    <>
+      <IconBase
+        as="path"
+        d="M22,19.9l-5.4-5.4c0.9-1.3,1.4-2.8,1.4-4.5c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.7,0,3.2-0.5,4.5-1.4l5.4,5.4L22,19.9z M10,15c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S12.8,15,10,15z"
+      />
+    </>
+  );
+}
+search.props = [];
+export default search;

package/dist/src/SearchIcon/index.test.tsx ADDED Viewed

@@ -0,0 +1,8 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import SearchIcon from '@digigov/react-icons/SearchIcon';
+it('renders the SearchIcon with no props', () => {
+  expect(render(<SearchIcon />).baseElement).toMatchSnapshot();
+});

package/dist/src/SearchIcon/index.tsx ADDED Viewed

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

package/dist/src/SvgIcon/__snapshots__/index.test.tsx.snap ADDED Viewed

@@ -0,0 +1,271 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+exports[`renders the SvgIcon with no props 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    />
+  </div>
+</body>
+`;
+exports[`renders the SvgIcon with prop color=base-content 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon ds-svg-icon--base-content"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </div>
+</body>
+`;
+exports[`renders the SvgIcon with prop color=dark 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon ds-svg-icon--dark"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </div>
+</body>
+`;
+exports[`renders the SvgIcon with prop color=error 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon ds-svg-icon--error"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </div>
+</body>
+`;
+exports[`renders the SvgIcon with prop color=error and size= xl 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon ds-svg-icon--warning ds-svg-icon--xl"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </div>
+</body>
+`;
+exports[`renders the SvgIcon with prop color=focus 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon ds-svg-icon--focus"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </div>
+</body>
+`;
+exports[`renders the SvgIcon with prop color=gray 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon ds-svg-icon--gray"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </div>
+</body>
+`;
+exports[`renders the SvgIcon with prop color=primary 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon ds-svg-icon--primary"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </div>
+</body>
+`;
+exports[`renders the SvgIcon with prop color=success 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon ds-svg-icon--success"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </div>
+</body>
+`;
+exports[`renders the SvgIcon with prop color=warning 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon ds-svg-icon--warning"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </div>
+</body>
+`;
+exports[`renders the SvgIcon with prop color=warning and size=sm 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon ds-svg-icon--warning ds-svg-icon--sm"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </div>
+</body>
+`;
+exports[`renders the SvgIcon with prop color=white 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon ds-svg-icon--white"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </div>
+</body>
+`;
+exports[`renders the SvgIcon with prop size=lg 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon ds-svg-icon--lg"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </div>
+</body>
+`;
+exports[`renders the SvgIcon with prop size=md 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon ds-svg-icon--md"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </div>
+</body>
+`;
+exports[`renders the SvgIcon with prop size=sm 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon ds-svg-icon--sm"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </div>
+</body>
+`;
+exports[`renders the SvgIcon with prop size=xl 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon ds-svg-icon--xl"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </div>
+</body>
+`;
+exports[`renders the SvgIcon with prop size=xs 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon ds-svg-icon--xs"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </div>
+</body>
+`;

package/dist/src/SvgIcon/index.test.tsx ADDED Viewed

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

package/dist/src/SvgIcon/index.tsx ADDED Viewed

@@ -0,0 +1,72 @@
+import React from 'react';
+import clsx from 'clsx';
+import IconBase, { IconBaseProps } from '@digigov/react-icons/IconBase';
+export interface SvgIconProps extends IconBaseProps<'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 (
+      <IconBase
+        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}
+      </IconBase>
+    );
+  }
+);
+export default SvgIcon;