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

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

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/Icon/__snapshots__/index.test.tsx.snap DELETED Viewed

@@ -1,238 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`renders the Icon prop icon= "caret" 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      as="svg"
-      class="ds-svg-icon--caret ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      <path
-        as="path"
-        class=""
-        d="M18,22V2L6,12L18,22z"
-      />
-    </svg>
-  </div>
-</body>
-`;
-exports[`renders the Icon prop icon= "caret" and direction=left 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      as="svg"
-      class="ds-svg-icon--caret ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      <path
-        as="path"
-        class=""
-        d="M18,22V2L6,12L18,22z"
-      />
-    </svg>
-  </div>
-</body>
-`;
-exports[`renders the Icon prop icon= "check" 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      as="svg"
-      class="ds-svg-icon--check ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      <polygon
-        as="polygon"
-        class=""
-        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
-      />
-    </svg>
-  </div>
-</body>
-`;
-exports[`renders the Icon prop icon= "close" 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      as="svg"
-      class="ds-svg-icon--close ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      <polygon
-        as="polygon"
-        class=""
-        points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 "
-      />
-    </svg>
-  </div>
-</body>
-`;
-exports[`renders the Icon prop icon= "uncheck" 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      as="svg"
-      class="ds-svg-icon--uncheck ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      <polygon
-        as="polygon"
-        class=""
-        points="20.59 5.74 18.26 3.41 12 9.67 5.742 3.41 3.41 5.74 9.67 12 3.41 18.26 5.74 20.6 12 14.33 18.26 20.59 20.59 18.26 14.33 12 20.59 5.74"
-      />
-    </svg>
-  </div>
-</body>
-`;
-exports[`renders the Icon props icon= "moreVert" 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      as="svg"
-      class="ds-svg-icon--moreVert ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      <circle
-        as="circle"
-        class=""
-        cx="12"
-        cy="5"
-        r="2"
-      />
-      <circle
-        as="circle"
-        class=""
-        cx="12"
-        cy="12"
-        r="2"
-      />
-      <circle
-        as="circle"
-        class=""
-        cx="12"
-        cy="19"
-        r="2"
-      />
-    </svg>
-  </div>
-</body>
-`;
-exports[`renders the Icon with no props 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      as="svg"
-      class="ds-svg-icon--chevron ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      <path
-        as="path"
-        class=""
-        d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"
-      />
-    </svg>
-  </div>
-</body>
-`;
-exports[`renders the Icon with prop icon=arrow and direction=up 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      as="svg"
-      class="ds-svg-icon--chevron ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      <path
-        as="path"
-        class=""
-        d="M2,15.8l2.3,2.4l7.7-7.6l7.6,7.6l2.4-2.4l-10-10L2,15.8z"
-      />
-    </svg>
-  </div>
-</body>
-`;
-exports[`renders the Icon with prop prop icon=burger 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      as="svg"
-      class="ds-svg-icon--burger ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      <g
-        as="g"
-        class=""
-      >
-        <rect
-          as="rect"
-          class=""
-          height="3.3"
-          id="ds-svg-icon--burger__line-1"
-          width="20"
-        />
-        <rect
-          as="rect"
-          class=""
-          height="3.3"
-          id="ds-svg-icon--burger__line-2"
-          width="20"
-        />
-        <rect
-          as="rect"
-          class=""
-          height="3.3"
-          id="ds-svg-icon--burger__line-3"
-          width="20"
-        />
-      </g>
-    </svg>
-  </div>
-</body>
-`;
-exports[`renders the Icon with prop prop icon=globe 1`] = `
-<body>
-  <div>
-    <svg
-      aria-hidden="true"
-      as="svg"
-      class="ds-svg-icon--globe ds-svg-icon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      <path
-        as="path"
-        class=""
-        d="M12,1C5.925,1,1,5.925,1,12s4.925,11,11,11,11-4.925,11-11S18.075,1,12,1ZM19.203,7.7h-2.6c-.236-1.22-.572-2.32-.98-3.267,1.49.716,2.735,1.857,3.58,3.267ZM20.4,12c0,.582-.06,1.151-.173,1.7h-3.292c.039-.556.066-1.12.066-1.7s-.026-1.145-.066-1.7h3.292c.113.549.173,1.118.173,1.7ZM12,20.378c-.484-.265-1.393-1.667-1.943-4.078h3.885c-.55,2.411-1.459,3.814-1.943,4.078ZM9.667,13.7c-.042-.537-.068-1.103-.068-1.7s.025-1.163.068-1.7h4.665c.042.537.068,1.103.068,1.7s-.025,1.163-.068,1.7h-4.665ZM3.6,12c0-.582.06-1.151.173-1.7h3.292c-.039.556-.066,1.12-.066,1.7s.026,1.145.066,1.7h-3.292c-.113-.549-.173-1.118-.173-1.7ZM12,3.622c.484.265,1.393,1.667,1.943,4.079h-3.885c.55-2.411,1.459-3.814,1.943-4.079ZM8.377,4.433c-.409.947-.745,2.047-.98,3.267h-2.6c.845-1.411,2.09-2.551,3.58-3.267ZM4.797,16.3h2.6c.236,1.22.572,2.32.98,3.267-1.49-.716-2.735-1.857-3.58-3.267ZM15.623,19.567c.409-.947.745-2.047.98-3.267h2.6c-.845,1.411-2.09,2.551-3.58,3.267Z"
-      />
-    </svg>
-  </div>
-</body>
-`;

package/dist/src/Icon/index.test.tsx DELETED Viewed

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

package/dist/src/Icon/index.tsx DELETED Viewed

@@ -1,63 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import * as icons from '@digigov/react-icons/icons';
-import type { IconTypes } from '@digigov/react-icons/icons';
-import SvgIcon, { SvgIconProps } from '@digigov/react-icons/SvgIcon';
-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 'chevron'.
-     * Use this prop to display the icon you want.
-     */
-    icon?: N;
-  };
-type IconComponent = <C extends keyof IconTypes>(
-  props: IconProps<C>
-) => React.ReactNode | 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 = 'chevron', 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, {
-        [`ds-svg-icon--${icon}`]: true,
-      })}
-    >
-      <IconComponent {...iconProps} />
-    </SvgIcon>
-  );
-});
-export default Icon;

package/dist/src/IconBase/index.tsx DELETED Viewed

@@ -1,258 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-interface AsProp<C extends React.ElementType> {
-  as?: C;
-}
-type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
-// This is the first reusable type utility we built
-type PolymorphicComponentProp<
-  C extends React.ElementType,
-  Props = Record<string, unknown>,
-> = React.PropsWithChildren<Props & AsProp<C>> &
-  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
-// This is a new type utility with ref!
-type PolymorphicComponentPropWithRef<
-  C extends React.ElementType,
-  Props = Record<string, unknown>,
-> = PolymorphicComponentProp<C, Props> & { ref?: any };
-// This is the type for the "ref" only
-type PolymorphicRef<C extends React.ElementType> =
-  React.ComponentPropsWithRef<C>['ref'];
-/**
- * This is the updated component props using PolymorphicComponentPropWithRef
- */
-export type IconBaseProps<C extends React.ElementType> =
-  PolymorphicComponentPropWithRef<
-    C,
-    {
-      /** margin is optional. It has not a default value. */
-      margin?: spacingValues;
-      /** marginTop is optional. It has not a default value. */
-      marginTop?: spacingValues;
-      /** marginBottom is optional. It has not a default value. */
-      marginBottom?: spacingValues;
-      /** marginLeft is optional. It has not a default value. */
-      marginLeft?: spacingValues;
-      /** marginRight is optional. It has not a default value. */
-      marginRight?: spacingValues;
-      /** Alternative for margin. Margin is optional. It has not a default value. */
-      m?: spacingValues;
-      /** Alternative for marginTop. MarginTop is optional. It has not a default value. */
-      mt?: spacingValues;
-      /** Alternative for marginBottom. MarginBottom is optional. It has not a default value. */
-      mb?: spacingValues;
-      /** Alternative for marginLeft. MarginLeft is optional. It has not a default value. */
-      ml?: spacingValues;
-      /** Alternative for marginRight. MarginRight is optional. It has not a default value. */
-      mr?: spacingValues;
-      /** Alternative for marginX. MarginX is optional. It has not a default value. */
-      mx?: spacingValues;
-      /** Alternative for marginY. MarginY is optional. It has not a default value. */
-      my?: spacingValues;
-      /** padding is optional. It has not a default value. */
-      padding?: spacingValues;
-      /** paddingTop is optional. It has not a default value. */
-      paddingTop?: spacingValues;
-      /** paddingBottom is optional. It has not a default value. */
-      paddingBottom?: spacingValues;
-      /** paddingLeft is optional. It has not a default value. */
-      paddingLeft?: spacingValues;
-      /** paddingRight is optional. It has not a default value. */
-      paddingRight?: spacingValues;
-      /** Alternative for padding. Padding is optional. It has not a default value. */
-      p?: spacingValues;
-      /** Alternative for paddingTop. PaddingTop is optional. It has not a default value. */
-      pt?: spacingValues;
-      /** Alternative for paddingBottom. PaddingBottom is optional. It has not a default value. */
-      pb?: spacingValues;
-      /** Alternative for paddingLeft. PaddingLeft is optional. It has not a default value. */
-      pl?: spacingValues;
-      /** Alternative for paddingRight. PaddingRight is optional. It has not a default value. */
-      pr?: spacingValues;
-      /** Alternative for paddingX. PaddingX is optional. It has not a default value. */
-      px?: spacingValues;
-      /** Alternative for paddingY. PaddingY is optional. It has not a default value. */
-      py?: spacingValues;
-      /**  printHidden is optional. Default value is false. When true, the component is hidden at print. */
-      printHidden?: boolean;
-      /**  printVisible is optional. When block, the component is displayed as block. When inline, the component is displayed as inline.*/
-      printVisible?: 'block' | 'inline';
-      /** Components will be hidden at all screen sizes. */
-      hidden?: boolean;
-      /** Components will be hidden from 'xs' screen size and up. */
-      xsUpHidden?: boolean;
-      /** Components will be hidden from 'sm' screen size and up. */
-      smUpHidden?: boolean;
-      /** Components will be hidden from 'md' screen size and up. */
-      mdUpHidden?: boolean;
-      /** Components will be hidden from 'lg' screen size and up. */
-      lgUpHidden?: boolean;
-      /** Components will be hidden from 'xl' screen size and up. */
-      xlUpHidden?: boolean;
-      /** Components will be hidden between xs and sm screen size. */
-      xsHidden?: boolean;
-      /** Components will be hidden between sm and md screen size. */
-      smHidden?: boolean;
-      /** Components will be hidden between md and lg screen size. */
-      mdHidden?: boolean;
-      /** Components will be hidden between lg and xl screen size. */
-      lgHidden?: boolean;
-      /** Components will be hidden between xl and 2xl screen size. */
-      xlHidden?: boolean;
-    }
-  >;
-type spacingValues =
-  | 0
-  | 0.5
-  | 1
-  | 1.5
-  | 2
-  | 2.5
-  | 3
-  | 3.5
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10
-  | 11
-  | 12
-  | 14
-  | 16
-  | 20
-  | 24
-  | 28
-  | 32
-  | 36
-  | 40
-  | 44
-  | 48
-  | 52
-  | 56
-  | 60
-  | 64
-  | 72
-  | 80
-  | 96;
-/**
- * This is the type used in the type annotation for the component
- */
-type IconBaseComponent = <C extends React.ElementType = 'span'>(
-  props: IconBaseProps<C>
-) => React.ReactNode | null;
-export const IconBase: IconBaseComponent = React.forwardRef(function Base<
-  C extends React.ElementType = 'span',
->(
-  {
-    as,
-    margin,
-    marginTop,
-    marginBottom,
-    marginLeft,
-    marginRight,
-    m,
-    mt,
-    mb,
-    ml,
-    mr,
-    mx,
-    my,
-    padding,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    p,
-    pt,
-    pb,
-    pr,
-    pl,
-    px,
-    py,
-    printHidden,
-    printVisible,
-    hidden,
-    xsUpHidden,
-    smUpHidden,
-    mdUpHidden,
-    lgUpHidden,
-    xlUpHidden,
-    xsHidden,
-    smHidden,
-    mdHidden,
-    lgHidden,
-    xlHidden,
-    children,
-    className,
-    ...props
-  }: IconBaseProps<C>,
-  ref?: PolymorphicRef<C>
-) {
-  const Component = as || 'span';
-  return (
-    <Component
-      as={as}
-      className={clsx(className, {
-        [`ds-m-${margin}`]: margin !== undefined ? true : undefined,
-        [`ds-mt-${marginTop}`]: marginTop !== undefined ? true : undefined,
-        [`ds-mb-${marginBottom}`]:
-          marginBottom !== undefined ? true : undefined,
-        [`ds-mr-${marginRight}`]: marginRight !== undefined ? true : undefined,
-        [`ds-ml-${marginLeft}`]: marginLeft !== undefined ? true : undefined,
-        [`ds-m-${m}`]: m !== undefined ? true : undefined,
-        [`ds-mt-${mt}`]: mt !== undefined ? true : undefined,
-        [`ds-mb-${mb}`]: mb !== undefined ? true : undefined,
-        [`ds-mr-${mr}`]: mr !== undefined ? true : undefined,
-        [`ds-ml-${ml}`]: ml !== undefined ? true : undefined,
-        [`ds-mx-${mx}`]: mx !== undefined ? true : undefined,
-        [`ds-my-${my}`]: my !== undefined ? true : undefined,
-        [`ds-p-${padding}`]: padding !== undefined ? true : undefined,
-        [`ds-pt-${paddingTop}`]: paddingTop !== undefined ? true : undefined,
-        [`ds-pb-${paddingBottom}`]:
-          paddingBottom !== undefined ? true : undefined,
-        [`ds-pr-${paddingRight}`]:
-          paddingRight !== undefined ? true : undefined,
-        [`ds-pl-${paddingLeft}`]: paddingLeft !== undefined ? true : undefined,
-        [`ds-p-${p}`]: p !== undefined ? true : undefined,
-        [`ds-pt-${pt}`]: pt !== undefined ? true : undefined,
-        [`ds-pb-${pb}`]: pb !== undefined ? true : undefined,
-        [`ds-pr-${pr}`]: pr !== undefined ? true : undefined,
-        [`ds-pl-${pl}`]: pl !== undefined ? true : undefined,
-        [`ds-px-${px}`]: px !== undefined ? true : undefined,
-        [`ds-py-${py}`]: py !== undefined ? true : undefined,
-        'ds-print-hidden': !!printHidden,
-        'ds-print-visible-block': printVisible === 'block',
-        'ds-print-visible-inline': printVisible === 'inline',
-        'ds-hidden': !!hidden,
-        'ds-hidden-xs-up': !!xsUpHidden,
-        'ds-hidden-sm-up': !!smUpHidden,
-        'ds-hidden-md-up': !!mdUpHidden,
-        'ds-hidden-lg-up': !!lgUpHidden,
-        'ds-hidden-xl-up': !!xlUpHidden,
-        'ds-hidden-xs': !!xsHidden,
-        'ds-hidden-sm': !!smHidden,
-        'ds-hidden-md': !!mdHidden,
-        'ds-hidden-lg': !!lgHidden,
-        'ds-hidden-xl': !!xlHidden,
-      })}
-      ref={ref}
-      {...props}
-    >
-      {children}
-    </Component>
-  );
-});
-export default IconBase;