@digigov/react-icons 2.0.0-rc.0 → 2.0.0-rc.10

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;

package/src/lazy.js

@@ -3,14 +3,26 @@ export default {
     'AccessibilityIcon': lazy(() => import('@digigov/react-icons/AccessibilityIcon').then((module)=> ({default: module['AccessibilityIcon']}))),
   'ArrowIcon': lazy(() => import('@digigov/react-icons/ArrowIcon').then((module)=> ({default: module['ArrowIcon']}))),
   'BurgerIcon': lazy(() => import('@digigov/react-icons/BurgerIcon').then((module)=> ({default: module['BurgerIcon']}))),
+  'CancelIcon': lazy(() => import('@digigov/react-icons/CancelIcon').then((module)=> ({default: module['CancelIcon']}))),
   'CaretIcon': lazy(() => import('@digigov/react-icons/CaretIcon').then((module)=> ({default: module['CaretIcon']}))),
+  'ChatIcon': lazy(() => import('@digigov/react-icons/ChatIcon').then((module)=> ({default: module['ChatIcon']}))),
   'CheckIcon': lazy(() => import('@digigov/react-icons/CheckIcon').then((module)=> ({default: module['CheckIcon']}))),
   'ChevronIcon': lazy(() => import('@digigov/react-icons/ChevronIcon').then((module)=> ({default: module['ChevronIcon']}))),
   'CloseIcon': lazy(() => import('@digigov/react-icons/CloseIcon').then((module)=> ({default: module['CloseIcon']}))),
+  'DownloadIcon': lazy(() => import('@digigov/react-icons/DownloadIcon').then((module)=> ({default: module['DownloadIcon']}))),
+  'ExclamationIcon': lazy(() => import('@digigov/react-icons/ExclamationIcon').then((module)=> ({default: module['ExclamationIcon']}))),
   'GlobeIcon': lazy(() => import('@digigov/react-icons/GlobeIcon').then((module)=> ({default: module['GlobeIcon']}))),
   'Icon': lazy(() => import('@digigov/react-icons/Icon').then((module)=> ({default: module['Icon']}))),
   'UncheckIcon': lazy(() => import('@digigov/react-icons/UncheckIcon').then((module)=> ({default: module['UncheckIcon']}))),
   'MoreVertIcon': lazy(() => import('@digigov/react-icons/MoreVertIcon').then((module)=> ({default: module['MoreVertIcon']}))),
   'SearchIcon': lazy(() => import('@digigov/react-icons/SearchIcon').then((module)=> ({default: module['SearchIcon']}))),
+  'LockIcon': lazy(() => import('@digigov/react-icons/LockIcon').then((module)=> ({default: module['LockIcon']}))),
+  'PdfFileIcon': lazy(() => import('@digigov/react-icons/PdfFileIcon').then((module)=> ({default: module['PdfFileIcon']}))),
+  'PlusIcon': lazy(() => import('@digigov/react-icons/PlusIcon').then((module)=> ({default: module['PlusIcon']}))),
+  'MinusIcon': lazy(() => import('@digigov/react-icons/MinusIcon').then((module)=> ({default: module['MinusIcon']}))),
+  'LoginIcon': lazy(() => import('@digigov/react-icons/LoginIcon').then((module)=> ({default: module['LoginIcon']}))),
+  'RestoreIcon': lazy(() => import('@digigov/react-icons/RestoreIcon').then((module)=> ({default: module['RestoreIcon']}))),
+  'ReplyIcon': lazy(() => import('@digigov/react-icons/ReplyIcon').then((module)=> ({default: module['ReplyIcon']}))),
+  'PrintIcon': lazy(() => import('@digigov/react-icons/PrintIcon').then((module)=> ({default: module['PrintIcon']}))),
 
 }

package/src/registry.js

@@ -1,6 +1,7 @@
 
 import * as _digigov_react_icons_AccessibilityIcon from '@digigov/react-icons/AccessibilityIcon';
 import * as _digigov_react_icons_ArrowIcon from '@digigov/react-icons/ArrowIcon';
+import * as _digigov_react_icons_Base from '@digigov/react-icons/Base';
 import * as _digigov_react_icons_BurgerIcon from '@digigov/react-icons/BurgerIcon';
 import * as _digigov_react_icons_CancelIcon from '@digigov/react-icons/CancelIcon';
 import * as _digigov_react_icons_CaretIcon from '@digigov/react-icons/CaretIcon';
@@ -24,6 +25,7 @@ import * as _digigov_react_icons_PrintIcon from '@digigov/react-icons/PrintIcon'
 import * as _digigov_react_icons_ReplyIcon from '@digigov/react-icons/ReplyIcon';
 import * as _digigov_react_icons_RestoreIcon from '@digigov/react-icons/RestoreIcon';
 import * as _digigov_react_icons_SearchIcon from '@digigov/react-icons/SearchIcon';
+import * as _digigov_react_icons_SvgIcon from '@digigov/react-icons/SvgIcon';
 import * as _digigov_react_icons_UncheckIcon from '@digigov/react-icons/UncheckIcon'
 function lazyImport(pkgImport) {
   // eslint-disable-next-line no-undef
@@ -47,6 +49,7 @@ function lazyImport(pkgImport) {
 export default {
   '@digigov/react-icons/AccessibilityIcon': lazyImport(_digigov_react_icons_AccessibilityIcon),
   '@digigov/react-icons/ArrowIcon': lazyImport(_digigov_react_icons_ArrowIcon),
+  '@digigov/react-icons/Base': lazyImport(_digigov_react_icons_Base),
   '@digigov/react-icons/BurgerIcon': lazyImport(_digigov_react_icons_BurgerIcon),
   '@digigov/react-icons/CancelIcon': lazyImport(_digigov_react_icons_CancelIcon),
   '@digigov/react-icons/CaretIcon': lazyImport(_digigov_react_icons_CaretIcon),
@@ -70,6 +73,7 @@ export default {
   '@digigov/react-icons/ReplyIcon': lazyImport(_digigov_react_icons_ReplyIcon),
   '@digigov/react-icons/RestoreIcon': lazyImport(_digigov_react_icons_RestoreIcon),
   '@digigov/react-icons/SearchIcon': lazyImport(_digigov_react_icons_SearchIcon),
+  '@digigov/react-icons/SvgIcon': lazyImport(_digigov_react_icons_SvgIcon),
   '@digigov/react-icons/UncheckIcon': lazyImport(_digigov_react_icons_UncheckIcon)
 };