diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 226e93083e..89d3b3f47e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -123,7 +123,7 @@ If you want to modify an existing translation, you will need to manually edit th To add new icons in the `@commercetools-uikit/icons` package: 1. Add the raw SVG file to the `packages/components/icons/src/svg` folder. Make sure the file name ends with `.react.svg`. -2. Run the `yarn generate-icons` command to generate the React component files. The components are generated using the `svgo` CLI and the template file `packages/components/icons/src/templates/icon.styles.tsx`. +2. Run the `yarn generate-icons` command to generate the React component files. The components are generated using the `svgr` CLI and the template file in `svgr/config.js` ## Adding changesets diff --git a/packages/components/icons/src/generated/AngleDownReact.tsx b/packages/components/icons/src/generated/AngleDownReact.tsx index 399505cd94..c5c282b009 100644 --- a/packages/components/icons/src/generated/AngleDownReact.tsx +++ b/packages/components/icons/src/generated/AngleDownReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/angle-down.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgAngleDown = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgAngleDown = (props: TSVGProps) => ( ( ); SvgAngleDown.displayName = 'SvgAngleDown'; -const AngleDownIcon = (props: Props) => ( +const AngleDownIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/AngleLeftReact.tsx b/packages/components/icons/src/generated/AngleLeftReact.tsx index 5a0640d204..87503f3687 100644 --- a/packages/components/icons/src/generated/AngleLeftReact.tsx +++ b/packages/components/icons/src/generated/AngleLeftReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/angle-left.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgAngleLeft = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgAngleLeft = (props: TSVGProps) => ( ( ); SvgAngleLeft.displayName = 'SvgAngleLeft'; -const AngleLeftIcon = (props: Props) => ( +const AngleLeftIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/AngleRightReact.tsx b/packages/components/icons/src/generated/AngleRightReact.tsx index a12ae8e7e6..fe4b28dd6f 100644 --- a/packages/components/icons/src/generated/AngleRightReact.tsx +++ b/packages/components/icons/src/generated/AngleRightReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/angle-right.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgAngleRight = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgAngleRight = (props: TSVGProps) => ( ( ); SvgAngleRight.displayName = 'SvgAngleRight'; -const AngleRightIcon = (props: Props) => ( +const AngleRightIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/AngleThinLeftReact.tsx b/packages/components/icons/src/generated/AngleThinLeftReact.tsx index adebd89b66..25137b9a8b 100644 --- a/packages/components/icons/src/generated/AngleThinLeftReact.tsx +++ b/packages/components/icons/src/generated/AngleThinLeftReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/angle-thin-left.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgAngleThinLeft = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgAngleThinLeft = (props: TSVGProps) => ( ( ); SvgAngleThinLeft.displayName = 'SvgAngleThinLeft'; -const AngleThinLeftIcon = (props: Props) => ( +const AngleThinLeftIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgAngleThinRight = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgAngleThinRight = (props: TSVGProps) => ( ( ); SvgAngleThinRight.displayName = 'SvgAngleThinRight'; -const AngleThinRightIcon = (props: Props) => ( +const AngleThinRightIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgAngleUpDown = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgAngleUpDown = (props: TSVGProps) => ( ( ); SvgAngleUpDown.displayName = 'SvgAngleUpDown'; -const AngleUpDownIcon = (props: Props) => ( +const AngleUpDownIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgAngleUp = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgAngleUp = (props: TSVGProps) => ( ( ); SvgAngleUp.displayName = 'SvgAngleUp'; -const AngleUpIcon = (props: Props) => ( +const AngleUpIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ArrowDownReact.tsx b/packages/components/icons/src/generated/ArrowDownReact.tsx index a81bd12aae..085f47af7f 100644 --- a/packages/components/icons/src/generated/ArrowDownReact.tsx +++ b/packages/components/icons/src/generated/ArrowDownReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/arrow-down.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgArrowDown = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgArrowDown = (props: TSVGProps) => ( ( ); SvgArrowDown.displayName = 'SvgArrowDown'; -const ArrowDownIcon = (props: Props) => ( +const ArrowDownIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ArrowLeftReact.tsx b/packages/components/icons/src/generated/ArrowLeftReact.tsx index 70929910b8..fd89a32cf2 100644 --- a/packages/components/icons/src/generated/ArrowLeftReact.tsx +++ b/packages/components/icons/src/generated/ArrowLeftReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/arrow-left.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgArrowLeft = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgArrowLeft = (props: TSVGProps) => ( ( ); SvgArrowLeft.displayName = 'SvgArrowLeft'; -const ArrowLeftIcon = (props: Props) => ( +const ArrowLeftIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ArrowLongDownReact.tsx b/packages/components/icons/src/generated/ArrowLongDownReact.tsx index d81fcf4b8b..043e3a7494 100644 --- a/packages/components/icons/src/generated/ArrowLongDownReact.tsx +++ b/packages/components/icons/src/generated/ArrowLongDownReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/arrow-long-down.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgArrowLongDown = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgArrowLongDown = (props: TSVGProps) => ( ( ); SvgArrowLongDown.displayName = 'SvgArrowLongDown'; -const ArrowLongDownIcon = (props: Props) => ( +const ArrowLongDownIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgArrowRight = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgArrowRight = (props: TSVGProps) => ( ( ); SvgArrowRight.displayName = 'SvgArrowRight'; -const ArrowRightIcon = (props: Props) => ( +const ArrowRightIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ArrowTriangleDownReact.tsx b/packages/components/icons/src/generated/ArrowTriangleDownReact.tsx index fa8442434d..e0e9d22d81 100644 --- a/packages/components/icons/src/generated/ArrowTriangleDownReact.tsx +++ b/packages/components/icons/src/generated/ArrowTriangleDownReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/arrow-triangle-down.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgArrowTriangleDown = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgArrowTriangleDown = (props: TSVGProps) => ( ( ); SvgArrowTriangleDown.displayName = 'SvgArrowTriangleDown'; -const ArrowTriangleDownIcon = (props: Props) => ( +const ArrowTriangleDownIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgArrowTriangleUp = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgArrowTriangleUp = (props: TSVGProps) => ( ( ); SvgArrowTriangleUp.displayName = 'SvgArrowTriangleUp'; -const ArrowTriangleUpIcon = (props: Props) => ( +const ArrowTriangleUpIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgArrowUp = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgArrowUp = (props: TSVGProps) => ( ( ); SvgArrowUp.displayName = 'SvgArrowUp'; -const ArrowUpIcon = (props: Props) => ( +const ArrowUpIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ArrowsMinimizeReact.tsx b/packages/components/icons/src/generated/ArrowsMinimizeReact.tsx index b01ea50e26..df0aa4b9f8 100644 --- a/packages/components/icons/src/generated/ArrowsMinimizeReact.tsx +++ b/packages/components/icons/src/generated/ArrowsMinimizeReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/arrows-minimize.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgArrowsMinimize = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgArrowsMinimize = (props: TSVGProps) => ( ( ); SvgArrowsMinimize.displayName = 'SvgArrowsMinimize'; -const ArrowsMinimizeIcon = (props: Props) => ( +const ArrowsMinimizeIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgArrows = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgArrows = (props: TSVGProps) => ( ( ); SvgArrows.displayName = 'SvgArrows'; -const ArrowsIcon = (props: Props) => ( +const ArrowsIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/BackReact.tsx b/packages/components/icons/src/generated/BackReact.tsx index 40b4b91ac1..2fa24bed53 100644 --- a/packages/components/icons/src/generated/BackReact.tsx +++ b/packages/components/icons/src/generated/BackReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/back.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgBack = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgBack = (props: TSVGProps) => ( ( ); SvgBack.displayName = 'SvgBack'; -const BackIcon = (props: Props) => ( +const BackIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/BidirectionalArrowReact.tsx b/packages/components/icons/src/generated/BidirectionalArrowReact.tsx index a74ca8755f..0ffe30a7af 100644 --- a/packages/components/icons/src/generated/BidirectionalArrowReact.tsx +++ b/packages/components/icons/src/generated/BidirectionalArrowReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/bidirectional-arrow.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgBidirectionalArrow = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgBidirectionalArrow = (props: TSVGProps) => ( ( ); SvgBidirectionalArrow.displayName = 'SvgBidirectionalArrow'; -const BidirectionalArrowIcon = (props: Props) => ( +const BidirectionalArrowIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgBinFilled = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgBinFilled = (props: TSVGProps) => ( ( ); SvgBinFilled.displayName = 'SvgBinFilled'; -const BinFilledIcon = (props: Props) => ( +const BinFilledIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/BinLinearReact.tsx b/packages/components/icons/src/generated/BinLinearReact.tsx index 3038746738..db15f23d43 100644 --- a/packages/components/icons/src/generated/BinLinearReact.tsx +++ b/packages/components/icons/src/generated/BinLinearReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/bin-linear.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgBinLinear = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgBinLinear = (props: TSVGProps) => ( ( ); SvgBinLinear.displayName = 'SvgBinLinear'; -const BinLinearIcon = (props: Props) => ( +const BinLinearIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/BoxReact.tsx b/packages/components/icons/src/generated/BoxReact.tsx index a21d8e692a..d3628f715b 100644 --- a/packages/components/icons/src/generated/BoxReact.tsx +++ b/packages/components/icons/src/generated/BoxReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/box.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgBox = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgBox = (props: TSVGProps) => ( ( ); SvgBox.displayName = 'SvgBox'; -const BoxIcon = (props: Props) => ( +const BoxIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/BrainReact.tsx b/packages/components/icons/src/generated/BrainReact.tsx index 621ffb0ca8..8ee25d8dd7 100644 --- a/packages/components/icons/src/generated/BrainReact.tsx +++ b/packages/components/icons/src/generated/BrainReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/brain.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgBrain = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgBrain = (props: TSVGProps) => ( ( ); SvgBrain.displayName = 'SvgBrain'; -const BrainIcon = (props: Props) => ( +const BrainIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/CalendarReact.tsx b/packages/components/icons/src/generated/CalendarReact.tsx index ae40c76b43..972e1cc4a0 100644 --- a/packages/components/icons/src/generated/CalendarReact.tsx +++ b/packages/components/icons/src/generated/CalendarReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/calendar.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgCalendar = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgCalendar = (props: TSVGProps) => ( ( ); SvgCalendar.displayName = 'SvgCalendar'; -const CalendarIcon = (props: Props) => ( +const CalendarIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/CameraReact.tsx b/packages/components/icons/src/generated/CameraReact.tsx index e1eaf2053f..a7d515692b 100644 --- a/packages/components/icons/src/generated/CameraReact.tsx +++ b/packages/components/icons/src/generated/CameraReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/camera.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgCamera = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgCamera = (props: TSVGProps) => ( ( ); SvgCamera.displayName = 'SvgCamera'; -const CameraIcon = (props: Props) => ( +const CameraIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/CaretDownReact.tsx b/packages/components/icons/src/generated/CaretDownReact.tsx index 633286e971..468d9ea02f 100644 --- a/packages/components/icons/src/generated/CaretDownReact.tsx +++ b/packages/components/icons/src/generated/CaretDownReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/caret-down.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgCaretDown = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgCaretDown = (props: TSVGProps) => ( ( ); SvgCaretDown.displayName = 'SvgCaretDown'; -const CaretDownIcon = (props: Props) => ( +const CaretDownIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/CaretDownSmallReact.tsx b/packages/components/icons/src/generated/CaretDownSmallReact.tsx index 45902b5edb..ce738f34c5 100644 --- a/packages/components/icons/src/generated/CaretDownSmallReact.tsx +++ b/packages/components/icons/src/generated/CaretDownSmallReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/caret-down-small.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgCaretDownSmall = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgCaretDownSmall = (props: TSVGProps) => ( ( ); SvgCaretDownSmall.displayName = 'SvgCaretDownSmall'; -const CaretDownSmallIcon = (props: Props) => ( +const CaretDownSmallIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgCaretUp = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgCaretUp = (props: TSVGProps) => ( ( ); SvgCaretUp.displayName = 'SvgCaretUp'; -const CaretUpIcon = (props: Props) => ( +const CaretUpIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/CaretUpSmallReact.tsx b/packages/components/icons/src/generated/CaretUpSmallReact.tsx index 36ab70ecde..64b92da8ed 100644 --- a/packages/components/icons/src/generated/CaretUpSmallReact.tsx +++ b/packages/components/icons/src/generated/CaretUpSmallReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/caret-up-small.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgCaretUpSmall = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgCaretUpSmall = (props: TSVGProps) => ( ( ); SvgCaretUpSmall.displayName = 'SvgCaretUpSmall'; -const CaretUpSmallIcon = (props: Props) => ( +const CaretUpSmallIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgCart = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgCart = (props: TSVGProps) => ( ( ); SvgCart.displayName = 'SvgCart'; -const CartIcon = (props: Props) => ( +const CartIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ChainBrokenReact.tsx b/packages/components/icons/src/generated/ChainBrokenReact.tsx index 4f91241c23..7b68b71d94 100644 --- a/packages/components/icons/src/generated/ChainBrokenReact.tsx +++ b/packages/components/icons/src/generated/ChainBrokenReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/chain-broken.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgChainBroken = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgChainBroken = (props: TSVGProps) => ( ( ); SvgChainBroken.displayName = 'SvgChainBroken'; -const ChainBrokenIcon = (props: Props) => ( +const ChainBrokenIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgChain = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgChain = (props: TSVGProps) => ( ( ); SvgChain.displayName = 'SvgChain'; -const ChainIcon = (props: Props) => ( +const ChainIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/CheckActiveReact.tsx b/packages/components/icons/src/generated/CheckActiveReact.tsx index e8192581ad..6b6651d3bd 100644 --- a/packages/components/icons/src/generated/CheckActiveReact.tsx +++ b/packages/components/icons/src/generated/CheckActiveReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/check-active.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgCheckActive = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgCheckActive = (props: TSVGProps) => ( ( ); SvgCheckActive.displayName = 'SvgCheckActive'; -const CheckActiveIcon = (props: Props) => ( +const CheckActiveIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgCheckBold = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgCheckBold = (props: TSVGProps) => ( ( ); SvgCheckBold.displayName = 'SvgCheckBold'; -const CheckBoldIcon = (props: Props) => ( +const CheckBoldIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/CheckInactiveReact.tsx b/packages/components/icons/src/generated/CheckInactiveReact.tsx index fd517a9d84..58b5f3c5cb 100644 --- a/packages/components/icons/src/generated/CheckInactiveReact.tsx +++ b/packages/components/icons/src/generated/CheckInactiveReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/check-inactive.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgCheckInactive = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgCheckInactive = (props: TSVGProps) => ( ( ); SvgCheckInactive.displayName = 'SvgCheckInactive'; -const CheckInactiveIcon = (props: Props) => ( +const CheckInactiveIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgCheckThin = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgCheckThin = (props: TSVGProps) => ( ( ); SvgCheckThin.displayName = 'SvgCheckThin'; -const CheckThinIcon = (props: Props) => ( +const CheckThinIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/CircleReact.tsx b/packages/components/icons/src/generated/CircleReact.tsx index bb7c7a066e..9f1127c70b 100644 --- a/packages/components/icons/src/generated/CircleReact.tsx +++ b/packages/components/icons/src/generated/CircleReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/circle.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgCircle = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgCircle = (props: TSVGProps) => ( ( ); SvgCircle.displayName = 'SvgCircle'; -const CircleIcon = (props: Props) => ( +const CircleIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ClipboardReact.tsx b/packages/components/icons/src/generated/ClipboardReact.tsx index b296aa5c74..aa681f2660 100644 --- a/packages/components/icons/src/generated/ClipboardReact.tsx +++ b/packages/components/icons/src/generated/ClipboardReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/clipboard.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgClipboard = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgClipboard = (props: TSVGProps) => ( ( ); SvgClipboard.displayName = 'SvgClipboard'; -const ClipboardIcon = (props: Props) => ( +const ClipboardIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ClockReact.tsx b/packages/components/icons/src/generated/ClockReact.tsx index fa87039a05..9995c3495b 100644 --- a/packages/components/icons/src/generated/ClockReact.tsx +++ b/packages/components/icons/src/generated/ClockReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/clock.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgClock = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgClock = (props: TSVGProps) => ( ( ); SvgClock.displayName = 'SvgClock'; -const ClockIcon = (props: Props) => ( +const ClockIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ClockWithArrowReact.tsx b/packages/components/icons/src/generated/ClockWithArrowReact.tsx index 1f1388ce35..3927945eb0 100644 --- a/packages/components/icons/src/generated/ClockWithArrowReact.tsx +++ b/packages/components/icons/src/generated/ClockWithArrowReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/clock-with-arrow.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgClockWithArrow = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgClockWithArrow = (props: TSVGProps) => ( ( ); SvgClockWithArrow.displayName = 'SvgClockWithArrow'; -const ClockWithArrowIcon = (props: Props) => ( +const ClockWithArrowIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgCloseBold = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgCloseBold = (props: TSVGProps) => ( ( ); SvgCloseBold.displayName = 'SvgCloseBold'; -const CloseBoldIcon = (props: Props) => ( +const CloseBoldIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/CloseReact.tsx b/packages/components/icons/src/generated/CloseReact.tsx index 46ddbf8ecb..8decea434f 100644 --- a/packages/components/icons/src/generated/CloseReact.tsx +++ b/packages/components/icons/src/generated/CloseReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/close.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgClose = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgClose = (props: TSVGProps) => ( ( ); SvgClose.displayName = 'SvgClose'; -const CloseIcon = (props: Props) => ( +const CloseIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/CodeViewReact.tsx b/packages/components/icons/src/generated/CodeViewReact.tsx index d5e25a9dd5..af896514cd 100644 --- a/packages/components/icons/src/generated/CodeViewReact.tsx +++ b/packages/components/icons/src/generated/CodeViewReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/code-view.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgCodeView = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgCodeView = (props: TSVGProps) => ( ( ); SvgCodeView.displayName = 'SvgCodeView'; -const CodeViewIcon = (props: Props) => ( +const CodeViewIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/CoinsReact.tsx b/packages/components/icons/src/generated/CoinsReact.tsx index 29b2e2a0cb..db8ede6b5c 100644 --- a/packages/components/icons/src/generated/CoinsReact.tsx +++ b/packages/components/icons/src/generated/CoinsReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/coins.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgCoins = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgCoins = (props: TSVGProps) => ( ( ); SvgCoins.displayName = 'SvgCoins'; -const CoinsIcon = (props: Props) => ( +const CoinsIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ColumnsReact.tsx b/packages/components/icons/src/generated/ColumnsReact.tsx index b5de3daaf7..7c6eb5045a 100644 --- a/packages/components/icons/src/generated/ColumnsReact.tsx +++ b/packages/components/icons/src/generated/ColumnsReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/columns.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgColumns = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgColumns = (props: TSVGProps) => ( ( ); SvgColumns.displayName = 'SvgColumns'; -const ColumnsIcon = (props: Props) => ( +const ColumnsIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ConnectedSquareReact.tsx b/packages/components/icons/src/generated/ConnectedSquareReact.tsx index 1840e59fa9..ab493c9b90 100644 --- a/packages/components/icons/src/generated/ConnectedSquareReact.tsx +++ b/packages/components/icons/src/generated/ConnectedSquareReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/connected-square.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgConnectedSquare = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgConnectedSquare = (props: TSVGProps) => ( ( ); SvgConnectedSquare.displayName = 'SvgConnectedSquare'; -const ConnectedSquareIcon = (props: Props) => ( +const ConnectedSquareIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgConnectedTriangle = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgConnectedTriangle = (props: TSVGProps) => ( ( ); SvgConnectedTriangle.displayName = 'SvgConnectedTriangle'; -const ConnectedTriangleIcon = (props: Props) => ( +const ConnectedTriangleIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgCopy = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgCopy = (props: TSVGProps) => ( ( ); SvgCopy.displayName = 'SvgCopy'; -const CopyIcon = (props: Props) => ( +const CopyIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/CtCheckoutReact.tsx b/packages/components/icons/src/generated/CtCheckoutReact.tsx index 31052b8f8b..457500c1a7 100644 --- a/packages/components/icons/src/generated/CtCheckoutReact.tsx +++ b/packages/components/icons/src/generated/CtCheckoutReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/ct-checkout.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgCtCheckout = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgCtCheckout = (props: TSVGProps) => ( ( ); SvgCtCheckout.displayName = 'SvgCtCheckout'; -const CtCheckoutIcon = (props: Props) => ( +const CtCheckoutIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/CubeReact.tsx b/packages/components/icons/src/generated/CubeReact.tsx index 168ae3c77c..708c654595 100644 --- a/packages/components/icons/src/generated/CubeReact.tsx +++ b/packages/components/icons/src/generated/CubeReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/cube.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgCube = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgCube = (props: TSVGProps) => ( ( ); SvgCube.displayName = 'SvgCube'; -const CubeIcon = (props: Props) => ( +const CubeIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/CubesReact.tsx b/packages/components/icons/src/generated/CubesReact.tsx index 80edf5cafb..75263e0e55 100644 --- a/packages/components/icons/src/generated/CubesReact.tsx +++ b/packages/components/icons/src/generated/CubesReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/cubes.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgCubes = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgCubes = (props: TSVGProps) => ( ( ); SvgCubes.displayName = 'SvgCubes'; -const CubesIcon = (props: Props) => ( +const CubesIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/DiamondReact.tsx b/packages/components/icons/src/generated/DiamondReact.tsx index 07d1514741..8b1070f40e 100644 --- a/packages/components/icons/src/generated/DiamondReact.tsx +++ b/packages/components/icons/src/generated/DiamondReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/diamond.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgDiamond = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgDiamond = (props: TSVGProps) => ( ( ); SvgDiamond.displayName = 'SvgDiamond'; -const DiamondIcon = (props: Props) => ( +const DiamondIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/DomainReact.tsx b/packages/components/icons/src/generated/DomainReact.tsx index 513058ec25..eb329880dd 100644 --- a/packages/components/icons/src/generated/DomainReact.tsx +++ b/packages/components/icons/src/generated/DomainReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/domain.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgDomain = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgDomain = (props: TSVGProps) => ( ( ); SvgDomain.displayName = 'SvgDomain'; -const DomainIcon = (props: Props) => ( +const DomainIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/DotReact.tsx b/packages/components/icons/src/generated/DotReact.tsx index 0464906545..b6cdd76e53 100644 --- a/packages/components/icons/src/generated/DotReact.tsx +++ b/packages/components/icons/src/generated/DotReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/dot.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgDot = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgDot = (props: TSVGProps) => ( ( ); SvgDot.displayName = 'SvgDot'; -const DotIcon = (props: Props) => ( +const DotIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/DownloadReact.tsx b/packages/components/icons/src/generated/DownloadReact.tsx index cef77d94dd..3eeebab519 100644 --- a/packages/components/icons/src/generated/DownloadReact.tsx +++ b/packages/components/icons/src/generated/DownloadReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/download.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgDownload = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgDownload = (props: TSVGProps) => ( ( ); SvgDownload.displayName = 'SvgDownload'; -const DownloadIcon = (props: Props) => ( +const DownloadIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/DragDropReact.tsx b/packages/components/icons/src/generated/DragDropReact.tsx index 17c5fb9e5f..21084962b0 100644 --- a/packages/components/icons/src/generated/DragDropReact.tsx +++ b/packages/components/icons/src/generated/DragDropReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/drag-drop.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgDragDrop = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgDragDrop = (props: TSVGProps) => ( ( ); SvgDragDrop.displayName = 'SvgDragDrop'; -const DragDropIcon = (props: Props) => ( +const DragDropIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/DragReact.tsx b/packages/components/icons/src/generated/DragReact.tsx index 78d351f70e..140aafba1e 100644 --- a/packages/components/icons/src/generated/DragReact.tsx +++ b/packages/components/icons/src/generated/DragReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/drag.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgDrag = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgDrag = (props: TSVGProps) => ( ( ); SvgDrag.displayName = 'SvgDrag'; -const DragIcon = (props: Props) => ( +const DragIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/EditReact.tsx b/packages/components/icons/src/generated/EditReact.tsx index 854aca6aee..822510ccc8 100644 --- a/packages/components/icons/src/generated/EditReact.tsx +++ b/packages/components/icons/src/generated/EditReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/edit.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgEdit = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgEdit = (props: TSVGProps) => ( ( ); SvgEdit.displayName = 'SvgEdit'; -const EditIcon = (props: Props) => ( +const EditIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ErrorReact.tsx b/packages/components/icons/src/generated/ErrorReact.tsx index 918cc0099e..263254a437 100644 --- a/packages/components/icons/src/generated/ErrorReact.tsx +++ b/packages/components/icons/src/generated/ErrorReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/error.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgError = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgError = (props: TSVGProps) => ( ( ); SvgError.displayName = 'SvgError'; -const ErrorIcon = (props: Props) => ( +const ErrorIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ExpandReact.tsx b/packages/components/icons/src/generated/ExpandReact.tsx index 94137cc666..8e9b03fe73 100644 --- a/packages/components/icons/src/generated/ExpandReact.tsx +++ b/packages/components/icons/src/generated/ExpandReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/expand.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgExpand = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgExpand = (props: TSVGProps) => ( ( ); SvgExpand.displayName = 'SvgExpand'; -const ExpandIcon = (props: Props) => ( +const ExpandIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ExportReact.tsx b/packages/components/icons/src/generated/ExportReact.tsx index e1906375db..3dbf8b6da6 100644 --- a/packages/components/icons/src/generated/ExportReact.tsx +++ b/packages/components/icons/src/generated/ExportReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/export.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgExport = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgExport = (props: TSVGProps) => ( ( ); SvgExport.displayName = 'SvgExport'; -const ExportIcon = (props: Props) => ( +const ExportIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ExternalLinkReact.tsx b/packages/components/icons/src/generated/ExternalLinkReact.tsx index cb675348c3..8acf7c7d44 100644 --- a/packages/components/icons/src/generated/ExternalLinkReact.tsx +++ b/packages/components/icons/src/generated/ExternalLinkReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/external-link.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgExternalLink = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgExternalLink = (props: TSVGProps) => ( ( ); SvgExternalLink.displayName = 'SvgExternalLink'; -const ExternalLinkIcon = (props: Props) => ( +const ExternalLinkIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgEyeCrossed = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgEyeCrossed = (props: TSVGProps) => ( ( ); SvgEyeCrossed.displayName = 'SvgEyeCrossed'; -const EyeCrossedIcon = (props: Props) => ( +const EyeCrossedIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/EyeReact.tsx b/packages/components/icons/src/generated/EyeReact.tsx index 117dbdeb54..aad6fc86e2 100644 --- a/packages/components/icons/src/generated/EyeReact.tsx +++ b/packages/components/icons/src/generated/EyeReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/eye.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgEye = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgEye = (props: TSVGProps) => ( ( ); SvgEye.displayName = 'SvgEye'; -const EyeIcon = (props: Props) => ( +const EyeIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/FilterAndListReact.tsx b/packages/components/icons/src/generated/FilterAndListReact.tsx index 7cb3a3a83b..a2942c56f4 100644 --- a/packages/components/icons/src/generated/FilterAndListReact.tsx +++ b/packages/components/icons/src/generated/FilterAndListReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/filter-and-list.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgFilterAndList = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgFilterAndList = (props: TSVGProps) => ( ( ); SvgFilterAndList.displayName = 'SvgFilterAndList'; -const FilterAndListIcon = (props: Props) => ( +const FilterAndListIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgFilter = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgFilter = (props: TSVGProps) => ( ( ); SvgFilter.displayName = 'SvgFilter'; -const FilterIcon = (props: Props) => ( +const FilterIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/FlagFilledReact.tsx b/packages/components/icons/src/generated/FlagFilledReact.tsx index a6a935018f..aafd71fdab 100644 --- a/packages/components/icons/src/generated/FlagFilledReact.tsx +++ b/packages/components/icons/src/generated/FlagFilledReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/flag-filled.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgFlagFilled = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgFlagFilled = (props: TSVGProps) => ( ( ); SvgFlagFilled.displayName = 'SvgFlagFilled'; -const FlagFilledIcon = (props: Props) => ( +const FlagFilledIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/FlagLinearReact.tsx b/packages/components/icons/src/generated/FlagLinearReact.tsx index 9dc0a83d4f..c931b00bdf 100644 --- a/packages/components/icons/src/generated/FlagLinearReact.tsx +++ b/packages/components/icons/src/generated/FlagLinearReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/flag-linear.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgFlagLinear = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgFlagLinear = (props: TSVGProps) => ( ( ); SvgFlagLinear.displayName = 'SvgFlagLinear'; -const FlagLinearIcon = (props: Props) => ( +const FlagLinearIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/FlameReact.tsx b/packages/components/icons/src/generated/FlameReact.tsx index 80cf0eacb4..56eae926e7 100644 --- a/packages/components/icons/src/generated/FlameReact.tsx +++ b/packages/components/icons/src/generated/FlameReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/flame.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgFlame = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgFlame = (props: TSVGProps) => ( ( ); SvgFlame.displayName = 'SvgFlame'; -const FlameIcon = (props: Props) => ( +const FlameIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/FractionDigitsReact.tsx b/packages/components/icons/src/generated/FractionDigitsReact.tsx index 83e01859ff..d2edee4111 100644 --- a/packages/components/icons/src/generated/FractionDigitsReact.tsx +++ b/packages/components/icons/src/generated/FractionDigitsReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/fraction-digits.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgFractionDigits = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgFractionDigits = (props: TSVGProps) => ( ( ); SvgFractionDigits.displayName = 'SvgFractionDigits'; -const FractionDigitsIcon = (props: Props) => ( +const FractionDigitsIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgGear = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgGear = (props: TSVGProps) => ( ( ); SvgGear.displayName = 'SvgGear'; -const GearIcon = (props: Props) => ( +const GearIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/GraduationCapReact.tsx b/packages/components/icons/src/generated/GraduationCapReact.tsx index c240bc6187..3548d97b9d 100644 --- a/packages/components/icons/src/generated/GraduationCapReact.tsx +++ b/packages/components/icons/src/generated/GraduationCapReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/graduation-cap.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgGraduationCap = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgGraduationCap = (props: TSVGProps) => ( ( ); SvgGraduationCap.displayName = 'SvgGraduationCap'; -const GraduationCapIcon = (props: Props) => ( +const GraduationCapIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgGraph = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgGraph = (props: TSVGProps) => ( ( ); SvgGraph.displayName = 'SvgGraph'; -const GraphIcon = (props: Props) => ( +const GraphIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/GridReact.tsx b/packages/components/icons/src/generated/GridReact.tsx index 00579d37dd..27edd4d99f 100644 --- a/packages/components/icons/src/generated/GridReact.tsx +++ b/packages/components/icons/src/generated/GridReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/grid.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgGrid = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgGrid = (props: TSVGProps) => ( ( ); SvgGrid.displayName = 'SvgGrid'; -const GridIcon = (props: Props) => ( +const GridIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/GroupAddReact.tsx b/packages/components/icons/src/generated/GroupAddReact.tsx index 0c04fcbd2b..790a358496 100644 --- a/packages/components/icons/src/generated/GroupAddReact.tsx +++ b/packages/components/icons/src/generated/GroupAddReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/group-add.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgGroupAdd = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgGroupAdd = (props: TSVGProps) => ( ( ); SvgGroupAdd.displayName = 'SvgGroupAdd'; -const GroupAddIcon = (props: Props) => ( +const GroupAddIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/HeartReact.tsx b/packages/components/icons/src/generated/HeartReact.tsx index 09f293879f..06d51d13ba 100644 --- a/packages/components/icons/src/generated/HeartReact.tsx +++ b/packages/components/icons/src/generated/HeartReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/heart.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgHeart = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgHeart = (props: TSVGProps) => ( ( ); SvgHeart.displayName = 'SvgHeart'; -const HeartIcon = (props: Props) => ( +const HeartIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/HomeReact.tsx b/packages/components/icons/src/generated/HomeReact.tsx index 0472551c42..d146bb8cc5 100644 --- a/packages/components/icons/src/generated/HomeReact.tsx +++ b/packages/components/icons/src/generated/HomeReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/home.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgHome = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgHome = (props: TSVGProps) => ( ( ); SvgHome.displayName = 'SvgHome'; -const HomeIcon = (props: Props) => ( +const HomeIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/HubReact.tsx b/packages/components/icons/src/generated/HubReact.tsx index 150690e729..db89ffe995 100644 --- a/packages/components/icons/src/generated/HubReact.tsx +++ b/packages/components/icons/src/generated/HubReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/hub.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgHub = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgHub = (props: TSVGProps) => ( ( ); SvgHub.displayName = 'SvgHub'; -const HubIcon = (props: Props) => ( +const HubIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ImportReact.tsx b/packages/components/icons/src/generated/ImportReact.tsx index 873f9ee621..049c7c8fa5 100644 --- a/packages/components/icons/src/generated/ImportReact.tsx +++ b/packages/components/icons/src/generated/ImportReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/import.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgImport = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgImport = (props: TSVGProps) => ( ( ); SvgImport.displayName = 'SvgImport'; -const ImportIcon = (props: Props) => ( +const ImportIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/InfoReact.tsx b/packages/components/icons/src/generated/InfoReact.tsx index 5a79c29a94..412c578dcb 100644 --- a/packages/components/icons/src/generated/InfoReact.tsx +++ b/packages/components/icons/src/generated/InfoReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/info.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgInfo = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgInfo = (props: TSVGProps) => ( ( ); SvgInfo.displayName = 'SvgInfo'; -const InfoIcon = (props: Props) => ( +const InfoIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/InformationReact.tsx b/packages/components/icons/src/generated/InformationReact.tsx index d8669a6925..78efa314b3 100644 --- a/packages/components/icons/src/generated/InformationReact.tsx +++ b/packages/components/icons/src/generated/InformationReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/information.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgInformation = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgInformation = (props: TSVGProps) => ( ( ); SvgInformation.displayName = 'SvgInformation'; -const InformationIcon = (props: Props) => ( +const InformationIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgLayers = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgLayers = (props: TSVGProps) => ( ( ); SvgLayers.displayName = 'SvgLayers'; -const LayersIcon = (props: Props) => ( +const LayersIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ListReact.tsx b/packages/components/icons/src/generated/ListReact.tsx index 23c2017fd8..b65ded2d17 100644 --- a/packages/components/icons/src/generated/ListReact.tsx +++ b/packages/components/icons/src/generated/ListReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/list.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgList = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgList = (props: TSVGProps) => ( ( ); SvgList.displayName = 'SvgList'; -const ListIcon = (props: Props) => ( +const ListIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ListWithSearchReact.tsx b/packages/components/icons/src/generated/ListWithSearchReact.tsx index 64effcce1e..ecda1facb8 100644 --- a/packages/components/icons/src/generated/ListWithSearchReact.tsx +++ b/packages/components/icons/src/generated/ListWithSearchReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/list-with-search.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgListWithSearch = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgListWithSearch = (props: TSVGProps) => ( ( ); SvgListWithSearch.displayName = 'SvgListWithSearch'; -const ListWithSearchIcon = (props: Props) => ( +const ListWithSearchIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgLock = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgLock = (props: TSVGProps) => ( ( ); SvgLock.displayName = 'SvgLock'; -const LockIcon = (props: Props) => ( +const LockIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/LogoutReact.tsx b/packages/components/icons/src/generated/LogoutReact.tsx index 8dba55b90e..bbe3316835 100644 --- a/packages/components/icons/src/generated/LogoutReact.tsx +++ b/packages/components/icons/src/generated/LogoutReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/logout.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgLogout = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgLogout = (props: TSVGProps) => ( ( ); SvgLogout.displayName = 'SvgLogout'; -const LogoutIcon = (props: Props) => ( +const LogoutIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/MailReact.tsx b/packages/components/icons/src/generated/MailReact.tsx index df8da59ec8..cca95c843c 100644 --- a/packages/components/icons/src/generated/MailReact.tsx +++ b/packages/components/icons/src/generated/MailReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/mail.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgMail = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgMail = (props: TSVGProps) => ( ( ); SvgMail.displayName = 'SvgMail'; -const MailIcon = (props: Props) => ( +const MailIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/MinimizeReact.tsx b/packages/components/icons/src/generated/MinimizeReact.tsx index 1ce6b17104..05a4c34d50 100644 --- a/packages/components/icons/src/generated/MinimizeReact.tsx +++ b/packages/components/icons/src/generated/MinimizeReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/minimize.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgMinimize = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgMinimize = (props: TSVGProps) => ( ( ); SvgMinimize.displayName = 'SvgMinimize'; -const MinimizeIcon = (props: Props) => ( +const MinimizeIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/NestedViewReact.tsx b/packages/components/icons/src/generated/NestedViewReact.tsx index 686ce2ec77..88d4389c5a 100644 --- a/packages/components/icons/src/generated/NestedViewReact.tsx +++ b/packages/components/icons/src/generated/NestedViewReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/nested-view.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgNestedView = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgNestedView = (props: TSVGProps) => ( ( ); SvgNestedView.displayName = 'SvgNestedView'; -const NestedViewIcon = (props: Props) => ( +const NestedViewIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/OperationsReact.tsx b/packages/components/icons/src/generated/OperationsReact.tsx index c09eb93563..6b723a03bd 100644 --- a/packages/components/icons/src/generated/OperationsReact.tsx +++ b/packages/components/icons/src/generated/OperationsReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/operations.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgOperations = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgOperations = (props: TSVGProps) => ( ( ); SvgOperations.displayName = 'SvgOperations'; -const OperationsIcon = (props: Props) => ( +const OperationsIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/PageGearReact.tsx b/packages/components/icons/src/generated/PageGearReact.tsx index df50efbcd4..144d5fc503 100644 --- a/packages/components/icons/src/generated/PageGearReact.tsx +++ b/packages/components/icons/src/generated/PageGearReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/page-gear.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgPageGear = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgPageGear = (props: TSVGProps) => ( ( ); SvgPageGear.displayName = 'SvgPageGear'; -const PageGearIcon = (props: Props) => ( +const PageGearIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/PagesReact.tsx b/packages/components/icons/src/generated/PagesReact.tsx index 08416bdb56..75cbba19fd 100644 --- a/packages/components/icons/src/generated/PagesReact.tsx +++ b/packages/components/icons/src/generated/PagesReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/pages.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgPages = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgPages = (props: TSVGProps) => ( ( ); SvgPages.displayName = 'SvgPages'; -const PagesIcon = (props: Props) => ( +const PagesIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/PaidReact.tsx b/packages/components/icons/src/generated/PaidReact.tsx index 7d658161be..4800c79eaf 100644 --- a/packages/components/icons/src/generated/PaidReact.tsx +++ b/packages/components/icons/src/generated/PaidReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/paid.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgPaid = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgPaid = (props: TSVGProps) => ( ( ); SvgPaid.displayName = 'SvgPaid'; -const PaidIcon = (props: Props) => ( +const PaidIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/PaperBillInvertedReact.tsx b/packages/components/icons/src/generated/PaperBillInvertedReact.tsx index ecfd83d10c..cbca2b5091 100644 --- a/packages/components/icons/src/generated/PaperBillInvertedReact.tsx +++ b/packages/components/icons/src/generated/PaperBillInvertedReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/paper-bill-inverted.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgPaperBillInverted = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgPaperBillInverted = (props: TSVGProps) => ( ( ); SvgPaperBillInverted.displayName = 'SvgPaperBillInverted'; -const PaperBillInvertedIcon = (props: Props) => ( +const PaperBillInvertedIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgPaperclip = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgPaperclip = (props: TSVGProps) => ( ( ); SvgPaperclip.displayName = 'SvgPaperclip'; -const PaperclipIcon = (props: Props) => ( +const PaperclipIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/PinFilledReact.tsx b/packages/components/icons/src/generated/PinFilledReact.tsx index fa1111b80a..a73606a633 100644 --- a/packages/components/icons/src/generated/PinFilledReact.tsx +++ b/packages/components/icons/src/generated/PinFilledReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/pin-filled.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgPinFilled = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgPinFilled = (props: TSVGProps) => ( ( ); SvgPinFilled.displayName = 'SvgPinFilled'; -const PinFilledIcon = (props: Props) => ( +const PinFilledIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/PinGearReact.tsx b/packages/components/icons/src/generated/PinGearReact.tsx index 8ddd67f575..4d16222940 100644 --- a/packages/components/icons/src/generated/PinGearReact.tsx +++ b/packages/components/icons/src/generated/PinGearReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/pin-gear.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgPinGear = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgPinGear = (props: TSVGProps) => ( ( ); SvgPinGear.displayName = 'SvgPinGear'; -const PinGearIcon = (props: Props) => ( +const PinGearIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/PinLinearReact.tsx b/packages/components/icons/src/generated/PinLinearReact.tsx index bbc999d6a9..ffd5b99f82 100644 --- a/packages/components/icons/src/generated/PinLinearReact.tsx +++ b/packages/components/icons/src/generated/PinLinearReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/pin-linear.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgPinLinear = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgPinLinear = (props: TSVGProps) => ( ( ); SvgPinLinear.displayName = 'SvgPinLinear'; -const PinLinearIcon = (props: Props) => ( +const PinLinearIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/PluginReact.tsx b/packages/components/icons/src/generated/PluginReact.tsx index 7a7322ed9b..61faace2f3 100644 --- a/packages/components/icons/src/generated/PluginReact.tsx +++ b/packages/components/icons/src/generated/PluginReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/plugin.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgPlugin = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgPlugin = (props: TSVGProps) => ( ( ); SvgPlugin.displayName = 'SvgPlugin'; -const PluginIcon = (props: Props) => ( +const PluginIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/PlusBoldReact.tsx b/packages/components/icons/src/generated/PlusBoldReact.tsx index 0b1dc572ea..0208ee6f5a 100644 --- a/packages/components/icons/src/generated/PlusBoldReact.tsx +++ b/packages/components/icons/src/generated/PlusBoldReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/plus-bold.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgPlusBold = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgPlusBold = (props: TSVGProps) => ( ( ); SvgPlusBold.displayName = 'SvgPlusBold'; -const PlusBoldIcon = (props: Props) => ( +const PlusBoldIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/PlusThinReact.tsx b/packages/components/icons/src/generated/PlusThinReact.tsx index 1fdc21c4e5..de998e5e14 100644 --- a/packages/components/icons/src/generated/PlusThinReact.tsx +++ b/packages/components/icons/src/generated/PlusThinReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/plus-thin.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgPlusThin = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgPlusThin = (props: TSVGProps) => ( ( ); SvgPlusThin.displayName = 'SvgPlusThin'; -const PlusThinIcon = (props: Props) => ( +const PlusThinIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/RefreshReact.tsx b/packages/components/icons/src/generated/RefreshReact.tsx index e33579becc..2ba8211a82 100644 --- a/packages/components/icons/src/generated/RefreshReact.tsx +++ b/packages/components/icons/src/generated/RefreshReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/refresh.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgRefresh = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgRefresh = (props: TSVGProps) => ( ( ); SvgRefresh.displayName = 'SvgRefresh'; -const RefreshIcon = (props: Props) => ( +const RefreshIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/RestoreReact.tsx b/packages/components/icons/src/generated/RestoreReact.tsx index 1ebdcf1e01..dd21c6a20b 100644 --- a/packages/components/icons/src/generated/RestoreReact.tsx +++ b/packages/components/icons/src/generated/RestoreReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/restore.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgRestore = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgRestore = (props: TSVGProps) => ( ( ); SvgRestore.displayName = 'SvgRestore'; -const RestoreIcon = (props: Props) => ( +const RestoreIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/RevertReact.tsx b/packages/components/icons/src/generated/RevertReact.tsx index e90623eee9..b76141a17c 100644 --- a/packages/components/icons/src/generated/RevertReact.tsx +++ b/packages/components/icons/src/generated/RevertReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/revert.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgRevert = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgRevert = (props: TSVGProps) => ( ( ); SvgRevert.displayName = 'SvgRevert'; -const RevertIcon = (props: Props) => ( +const RevertIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ReviewReact.tsx b/packages/components/icons/src/generated/ReviewReact.tsx index 58f969b495..74b08f8308 100644 --- a/packages/components/icons/src/generated/ReviewReact.tsx +++ b/packages/components/icons/src/generated/ReviewReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/review.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgReview = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgReview = (props: TSVGProps) => ( ( ); SvgReview.displayName = 'SvgReview'; -const ReviewIcon = (props: Props) => ( +const ReviewIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/RightTriangleFilledReact.tsx b/packages/components/icons/src/generated/RightTriangleFilledReact.tsx index f71c7b437d..663930d0de 100644 --- a/packages/components/icons/src/generated/RightTriangleFilledReact.tsx +++ b/packages/components/icons/src/generated/RightTriangleFilledReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/right-triangle-filled.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgRightTriangleFilled = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgRightTriangleFilled = (props: TSVGProps) => ( ( ); SvgRightTriangleFilled.displayName = 'SvgRightTriangleFilled'; -const RightTriangleFilledIcon = (props: Props) => ( +const RightTriangleFilledIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgRightTriangleLinear = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgRightTriangleLinear = (props: TSVGProps) => ( ( ); SvgRightTriangleLinear.displayName = 'SvgRightTriangleLinear'; -const RightTriangleLinearIcon = (props: Props) => ( +const RightTriangleLinearIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgRocket = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgRocket = (props: TSVGProps) => ( ( ); SvgRocket.displayName = 'SvgRocket'; -const RocketIcon = (props: Props) => ( +const RocketIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ScreenGearReact.tsx b/packages/components/icons/src/generated/ScreenGearReact.tsx index 5e2e674ed0..8385398250 100644 --- a/packages/components/icons/src/generated/ScreenGearReact.tsx +++ b/packages/components/icons/src/generated/ScreenGearReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/screen-gear.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgScreenGear = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgScreenGear = (props: TSVGProps) => ( ( ); SvgScreenGear.displayName = 'SvgScreenGear'; -const ScreenGearIcon = (props: Props) => ( +const ScreenGearIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ScreenUserReact.tsx b/packages/components/icons/src/generated/ScreenUserReact.tsx index e1dccd406e..bb55c2d906 100644 --- a/packages/components/icons/src/generated/ScreenUserReact.tsx +++ b/packages/components/icons/src/generated/ScreenUserReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/screen-user.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgScreenUser = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgScreenUser = (props: TSVGProps) => ( ( ); SvgScreenUser.displayName = 'SvgScreenUser'; -const ScreenUserIcon = (props: Props) => ( +const ScreenUserIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/SearchReact.tsx b/packages/components/icons/src/generated/SearchReact.tsx index a8bb1bb9fb..56dbc1a781 100644 --- a/packages/components/icons/src/generated/SearchReact.tsx +++ b/packages/components/icons/src/generated/SearchReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/search.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgSearch = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgSearch = (props: TSVGProps) => ( ( ); SvgSearch.displayName = 'SvgSearch'; -const SearchIcon = (props: Props) => ( +const SearchIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/SidebarCollapseReact.tsx b/packages/components/icons/src/generated/SidebarCollapseReact.tsx index eed8a36d01..f9a1c3bf87 100644 --- a/packages/components/icons/src/generated/SidebarCollapseReact.tsx +++ b/packages/components/icons/src/generated/SidebarCollapseReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/sidebar-collapse.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgSidebarCollapse = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgSidebarCollapse = (props: TSVGProps) => ( ( ); SvgSidebarCollapse.displayName = 'SvgSidebarCollapse'; -const SidebarCollapseIcon = (props: Props) => ( +const SidebarCollapseIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgSidebarExpand = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgSidebarExpand = (props: TSVGProps) => ( ( ); SvgSidebarExpand.displayName = 'SvgSidebarExpand'; -const SidebarExpandIcon = (props: Props) => ( +const SidebarExpandIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgSorting = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgSorting = (props: TSVGProps) => ( ( ); SvgSorting.displayName = 'SvgSorting'; -const SortingIcon = (props: Props) => ( +const SortingIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/SpeechBubbleReact.tsx b/packages/components/icons/src/generated/SpeechBubbleReact.tsx index cbe2481c4b..7c5c56bdbd 100644 --- a/packages/components/icons/src/generated/SpeechBubbleReact.tsx +++ b/packages/components/icons/src/generated/SpeechBubbleReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/speech-bubble.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgSpeechBubble = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgSpeechBubble = (props: TSVGProps) => ( ( ); SvgSpeechBubble.displayName = 'SvgSpeechBubble'; -const SpeechBubbleIcon = (props: Props) => ( +const SpeechBubbleIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgSpeedometer = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgSpeedometer = (props: TSVGProps) => ( ( ); SvgSpeedometer.displayName = 'SvgSpeedometer'; -const SpeedometerIcon = (props: Props) => ( +const SpeedometerIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgSplit = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgSplit = (props: TSVGProps) => ( ( ); SvgSplit.displayName = 'SvgSplit'; -const SplitIcon = (props: Props) => ( +const SplitIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/StackReact.tsx b/packages/components/icons/src/generated/StackReact.tsx index b24b296696..9a9e77af83 100644 --- a/packages/components/icons/src/generated/StackReact.tsx +++ b/packages/components/icons/src/generated/StackReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/stack.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgStack = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgStack = (props: TSVGProps) => ( ( ); SvgStack.displayName = 'SvgStack'; -const StackIcon = (props: Props) => ( +const StackIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/StarReact.tsx b/packages/components/icons/src/generated/StarReact.tsx index 7c8335c4f0..e3c7f7e75e 100644 --- a/packages/components/icons/src/generated/StarReact.tsx +++ b/packages/components/icons/src/generated/StarReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/star.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgStar = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgStar = (props: TSVGProps) => ( ( ); SvgStar.displayName = 'SvgStar'; -const StarIcon = (props: Props) => ( +const StarIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/SubdirectoryArrowReact.tsx b/packages/components/icons/src/generated/SubdirectoryArrowReact.tsx index 8198dc5227..42b1df3ae3 100644 --- a/packages/components/icons/src/generated/SubdirectoryArrowReact.tsx +++ b/packages/components/icons/src/generated/SubdirectoryArrowReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/subdirectory-arrow.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgSubdirectoryArrow = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgSubdirectoryArrow = (props: TSVGProps) => ( ( ); SvgSubdirectoryArrow.displayName = 'SvgSubdirectoryArrow'; -const SubdirectoryArrowIcon = (props: Props) => ( +const SubdirectoryArrowIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgSupport = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgSupport = (props: TSVGProps) => ( ( ); SvgSupport.displayName = 'SvgSupport'; -const SupportIcon = (props: Props) => ( +const SupportIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/SwitcherReact.tsx b/packages/components/icons/src/generated/SwitcherReact.tsx index d26e0db41c..1f90f0d0c5 100644 --- a/packages/components/icons/src/generated/SwitcherReact.tsx +++ b/packages/components/icons/src/generated/SwitcherReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/switcher.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgSwitcher = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgSwitcher = (props: TSVGProps) => ( ( ); SvgSwitcher.displayName = 'SvgSwitcher'; -const SwitcherIcon = (props: Props) => ( +const SwitcherIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/TableReact.tsx b/packages/components/icons/src/generated/TableReact.tsx index e60c8eaa3e..e75ba1f870 100644 --- a/packages/components/icons/src/generated/TableReact.tsx +++ b/packages/components/icons/src/generated/TableReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/table.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgTable = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgTable = (props: TSVGProps) => ( ( ); SvgTable.displayName = 'SvgTable'; -const TableIcon = (props: Props) => ( +const TableIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/TagMultiReact.tsx b/packages/components/icons/src/generated/TagMultiReact.tsx index cc8d14ffeb..87576ec6d1 100644 --- a/packages/components/icons/src/generated/TagMultiReact.tsx +++ b/packages/components/icons/src/generated/TagMultiReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/tag-multi.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgTagMulti = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgTagMulti = (props: TSVGProps) => ( ( ); SvgTagMulti.displayName = 'SvgTagMulti'; -const TagMultiIcon = (props: Props) => ( +const TagMultiIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/TagReact.tsx b/packages/components/icons/src/generated/TagReact.tsx index 13b92ac0ee..f8fe4cc33d 100644 --- a/packages/components/icons/src/generated/TagReact.tsx +++ b/packages/components/icons/src/generated/TagReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/tag.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgTag = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgTag = (props: TSVGProps) => ( ( ); SvgTag.displayName = 'SvgTag'; -const TagIcon = (props: Props) => ( +const TagIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/TagStackedReact.tsx b/packages/components/icons/src/generated/TagStackedReact.tsx index 108de0bb22..4c048cce9c 100644 --- a/packages/components/icons/src/generated/TagStackedReact.tsx +++ b/packages/components/icons/src/generated/TagStackedReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/tag-stacked.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgTagStacked = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgTagStacked = (props: TSVGProps) => ( ( ); SvgTagStacked.displayName = 'SvgTagStacked'; -const TagStackedIcon = (props: Props) => ( +const TagStackedIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/TerminalReact.tsx b/packages/components/icons/src/generated/TerminalReact.tsx index 9065b1b202..89786f9bcb 100644 --- a/packages/components/icons/src/generated/TerminalReact.tsx +++ b/packages/components/icons/src/generated/TerminalReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/terminal.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgTerminal = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgTerminal = (props: TSVGProps) => ( ( ); SvgTerminal.displayName = 'SvgTerminal'; -const TerminalIcon = (props: Props) => ( +const TerminalIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/TreeStructureReact.tsx b/packages/components/icons/src/generated/TreeStructureReact.tsx index 0801c5e065..8fdff6fc6b 100644 --- a/packages/components/icons/src/generated/TreeStructureReact.tsx +++ b/packages/components/icons/src/generated/TreeStructureReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/tree-structure.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgTreeStructure = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgTreeStructure = (props: TSVGProps) => ( ( ); SvgTreeStructure.displayName = 'SvgTreeStructure'; -const TreeStructureIcon = (props: Props) => ( +const TreeStructureIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgTruck = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgTruck = (props: TSVGProps) => ( ( ); SvgTruck.displayName = 'SvgTruck'; -const TruckIcon = (props: Props) => ( +const TruckIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/TuneReact.tsx b/packages/components/icons/src/generated/TuneReact.tsx index 28f332847e..1e21db0b1f 100644 --- a/packages/components/icons/src/generated/TuneReact.tsx +++ b/packages/components/icons/src/generated/TuneReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/tune.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgTune = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgTune = (props: TSVGProps) => ( ( ); SvgTune.displayName = 'SvgTune'; -const TuneIcon = (props: Props) => ( +const TuneIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/UserFilledReact.tsx b/packages/components/icons/src/generated/UserFilledReact.tsx index 43de6e57d6..2b85b44d14 100644 --- a/packages/components/icons/src/generated/UserFilledReact.tsx +++ b/packages/components/icons/src/generated/UserFilledReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/user-filled.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgUserFilled = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgUserFilled = (props: TSVGProps) => ( ( ); SvgUserFilled.displayName = 'SvgUserFilled'; -const UserFilledIcon = (props: Props) => ( +const UserFilledIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/UserLinearReact.tsx b/packages/components/icons/src/generated/UserLinearReact.tsx index 10c5bbb034..b8646e7bb1 100644 --- a/packages/components/icons/src/generated/UserLinearReact.tsx +++ b/packages/components/icons/src/generated/UserLinearReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/user-linear.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgUserLinear = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgUserLinear = (props: TSVGProps) => ( ( ); SvgUserLinear.displayName = 'SvgUserLinear'; -const UserLinearIcon = (props: Props) => ( +const UserLinearIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/UsersReact.tsx b/packages/components/icons/src/generated/UsersReact.tsx index 8f3091ba2d..9291122596 100644 --- a/packages/components/icons/src/generated/UsersReact.tsx +++ b/packages/components/icons/src/generated/UsersReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/users.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgUsers = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgUsers = (props: TSVGProps) => ( ( ); SvgUsers.displayName = 'SvgUsers'; -const UsersIcon = (props: Props) => ( +const UsersIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/VerifiedReact.tsx b/packages/components/icons/src/generated/VerifiedReact.tsx index 557c59a9bc..4a9d02f4af 100644 --- a/packages/components/icons/src/generated/VerifiedReact.tsx +++ b/packages/components/icons/src/generated/VerifiedReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/verified.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgVerified = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgVerified = (props: TSVGProps) => ( ( ); SvgVerified.displayName = 'SvgVerified'; -const VerifiedIcon = (props: Props) => ( +const VerifiedIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/ViewGridPlusReact.tsx b/packages/components/icons/src/generated/ViewGridPlusReact.tsx index 1bc0860d72..db7bc7ccc4 100644 --- a/packages/components/icons/src/generated/ViewGridPlusReact.tsx +++ b/packages/components/icons/src/generated/ViewGridPlusReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/view-grid-plus.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgViewGridPlus = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgViewGridPlus = (props: TSVGProps) => ( ( ); SvgViewGridPlus.displayName = 'SvgViewGridPlus'; -const ViewGridPlusIcon = (props: Props) => ( +const ViewGridPlusIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgWarning = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgWarning = (props: TSVGProps) => ( ( ); SvgWarning.displayName = 'SvgWarning'; -const WarningIcon = (props: Props) => ( +const WarningIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/WindowEyeReact.tsx b/packages/components/icons/src/generated/WindowEyeReact.tsx index a8fb5a2657..b2c61d0380 100644 --- a/packages/components/icons/src/generated/WindowEyeReact.tsx +++ b/packages/components/icons/src/generated/WindowEyeReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/window-eye.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgWindowEye = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgWindowEye = (props: TSVGProps) => ( ( ); SvgWindowEye.displayName = 'SvgWindowEye'; -const WindowEyeIcon = (props: Props) => ( +const WindowEyeIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/generated/WorldReact.tsx b/packages/components/icons/src/generated/WorldReact.tsx index b2fc8d5457..014c62db5b 100644 --- a/packages/components/icons/src/generated/WorldReact.tsx +++ b/packages/components/icons/src/generated/WorldReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/svg/world.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgWorld = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgWorld = (props: TSVGProps) => ( ( ); SvgWorld.displayName = 'SvgWorld'; -const WorldIcon = (props: Props) => ( +const WorldIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/icons/src/inline-svg/inline-svg.tsx b/packages/components/icons/src/inline-svg/inline-svg.tsx index 9ae77241b4..541584283a 100644 --- a/packages/components/icons/src/inline-svg/inline-svg.tsx +++ b/packages/components/icons/src/inline-svg/inline-svg.tsx @@ -1,5 +1,3 @@ -import type { Props } from '../templates/icon.styles'; - import { cloneElement, isValidElement, @@ -10,9 +8,12 @@ import DOMPurify from 'dompurify'; import convert from 'react-from-dom'; import { ClassNames } from '@emotion/react'; import { canUseDOM } from '@commercetools-uikit/utils'; -import { getIconStyles } from '../templates/icon.styles'; +import { + getIconStyles, + type TIconProps, +} from '@commercetools-uikit/design-system'; -export type InlineSvgProps = Props & { +export type InlineSvgProps = TIconProps & { data: string; }; diff --git a/packages/components/icons/src/templates/icon.styles.tsx b/packages/components/icons/src/templates/icon.styles.tsx deleted file mode 100644 index a8067c97a3..0000000000 --- a/packages/components/icons/src/templates/icon.styles.tsx +++ /dev/null @@ -1,125 +0,0 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -// @ts-ignore -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; - -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { className: string }; - -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { width: '100%', height: 'auto' }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { width: `${iconSizes[size]}px`, height: `${iconSizes[size]}px` }; - default: - return { width: `${iconSizes['40']}px`, height: `${iconSizes['40']}px` }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; - -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - - return iconColor; -}; - -// @ts-ignore -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; diff --git a/packages/components/inputs/checkbox-input/src/icons/generated/CheckedReact.tsx b/packages/components/inputs/checkbox-input/src/icons/generated/CheckedReact.tsx index df8add69a1..143ba923ba 100644 --- a/packages/components/inputs/checkbox-input/src/icons/generated/CheckedReact.tsx +++ b/packages/components/inputs/checkbox-input/src/icons/generated/CheckedReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/icons/svg/checked.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgChecked = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgChecked = (props: TSVGProps) => ( ( ); SvgChecked.displayName = 'SvgChecked'; -const CheckedIcon = (props: Props) => ( +const CheckedIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/inputs/checkbox-input/src/icons/generated/IndeterminateReact.tsx b/packages/components/inputs/checkbox-input/src/icons/generated/IndeterminateReact.tsx index e19e629340..8f24bfc22c 100644 --- a/packages/components/inputs/checkbox-input/src/icons/generated/IndeterminateReact.tsx +++ b/packages/components/inputs/checkbox-input/src/icons/generated/IndeterminateReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/icons/svg/indeterminate.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgIndeterminate = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgIndeterminate = (props: TSVGProps) => ( ( ); SvgIndeterminate.displayName = 'SvgIndeterminate'; -const IndeterminateIcon = (props: Props) => ( +const IndeterminateIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgBold = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgBold = (props: TSVGProps) => ( ( ); SvgBold.displayName = 'SvgBold'; -const BoldIcon = (props: Props) => ( +const BoldIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ExpandFullReact.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ExpandFullReact.tsx index c66a7ef277..fcfb410bc9 100644 --- a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ExpandFullReact.tsx +++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ExpandFullReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/rich-text-body/icons/svg/expand-full.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgExpandFull = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgExpandFull = (props: TSVGProps) => ( ( ); SvgExpandFull.displayName = 'SvgExpandFull'; -const ExpandFullIcon = (props: Props) => ( +const ExpandFullIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ExpandReact.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ExpandReact.tsx index ceef8c89b9..a007e1f03f 100644 --- a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ExpandReact.tsx +++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ExpandReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/rich-text-body/icons/svg/expand.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgExpand = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgExpand = (props: TSVGProps) => ( ( ); SvgExpand.displayName = 'SvgExpand'; -const ExpandIcon = (props: Props) => ( +const ExpandIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ItalicReact.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ItalicReact.tsx index b65a3e1bc7..2993290e50 100644 --- a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ItalicReact.tsx +++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/ItalicReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/rich-text-body/icons/svg/italic.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgItalic = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgItalic = (props: TSVGProps) => ( ( ); SvgItalic.displayName = 'SvgItalic'; -const ItalicIcon = (props: Props) => ( +const ItalicIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/MoreStylesReact.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/MoreStylesReact.tsx index 60a12b74c7..7094351966 100644 --- a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/MoreStylesReact.tsx +++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/MoreStylesReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/rich-text-body/icons/svg/more-styles.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgMoreStyles = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgMoreStyles = (props: TSVGProps) => ( ( ); SvgMoreStyles.displayName = 'SvgMoreStyles'; -const MoreStylesIcon = (props: Props) => ( +const MoreStylesIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/OrderedListReact.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/OrderedListReact.tsx index 57b065f791..dc305d44a0 100644 --- a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/OrderedListReact.tsx +++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/OrderedListReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/rich-text-body/icons/svg/ordered-list.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgOrderedList = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgOrderedList = (props: TSVGProps) => ( ( ); SvgOrderedList.displayName = 'SvgOrderedList'; -const OrderedListIcon = (props: Props) => ( +const OrderedListIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgRedo = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgRedo = (props: TSVGProps) => ( ( ); SvgRedo.displayName = 'SvgRedo'; -const RedoIcon = (props: Props) => ( +const RedoIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/StrikethroughReact.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/StrikethroughReact.tsx index baeca1737b..af8bcdab0a 100644 --- a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/StrikethroughReact.tsx +++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/StrikethroughReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/rich-text-body/icons/svg/strikethrough.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgStrikethrough = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgStrikethrough = (props: TSVGProps) => ( ( ); SvgStrikethrough.displayName = 'SvgStrikethrough'; -const StrikethroughIcon = (props: Props) => ( +const StrikethroughIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgSubscript = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgSubscript = (props: TSVGProps) => ( ( ); SvgSubscript.displayName = 'SvgSubscript'; -const SubscriptIcon = (props: Props) => ( +const SubscriptIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/SuperscriptReact.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/SuperscriptReact.tsx index 1a2ebb2469..eaf14c9082 100644 --- a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/SuperscriptReact.tsx +++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/SuperscriptReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/rich-text-body/icons/svg/superscript.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgSuperscript = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgSuperscript = (props: TSVGProps) => ( ( ); SvgSuperscript.displayName = 'SvgSuperscript'; -const SuperscriptIcon = (props: Props) => ( +const SuperscriptIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgUnderline = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgUnderline = (props: TSVGProps) => ( ( ); SvgUnderline.displayName = 'SvgUnderline'; -const UnderlineIcon = (props: Props) => ( +const UnderlineIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/UndoReact.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/UndoReact.tsx index 9602342549..afbf72462a 100644 --- a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/UndoReact.tsx +++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/UndoReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/rich-text-body/icons/svg/undo.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgUndo = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgUndo = (props: TSVGProps) => ( ( ); SvgUndo.displayName = 'SvgUndo'; -const UndoIcon = (props: Props) => ( +const UndoIcon = (props: TIconProps) => ( {({ css: createClass }) => ( diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/UnorderedListReact.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/UnorderedListReact.tsx index 4a78ad1f1f..2742ce1663 100644 --- a/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/UnorderedListReact.tsx +++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/icons/generated/UnorderedListReact.tsx @@ -1,134 +1,13 @@ // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: src/rich-text-body/icons/svg/unordered-list.react.svg -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { warning } from '@commercetools-uikit/utils'; -import { css, ClassNames } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; -export type Props = { - color?: - | 'solid' - | 'neutral60' - | 'surface' - | 'info' - | 'primary' - | 'primary40' - | 'warning' - | 'error' - | 'success'; - /** - * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'. - */ - size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40'; -}; -export type SVGProps = Props & { - className: string; -}; -const iconSizes = { - small: 12, - medium: 16, - big: 24, - '10': 12, - '20': 16, - '30': 20, - '40': 24, -} as const; -const getSizeDimensions = (size: Props['size']) => { - switch (size) { - case 'scale': - return { - width: '100%', - height: 'auto', - }; - case 'small': - case 'medium': - case 'big': - case '10': - case '20': - case '30': - case '40': - return { - width: `${iconSizes[size]}px`, - height: `${iconSizes[size]}px`, - }; - default: - return { - width: `${iconSizes['40']}px`, - height: `${iconSizes['40']}px`, - }; - } -}; -const getSizeStyle = (size: Props['size']) => { - const dimensions = getSizeDimensions(size); - switch (size) { - case 'scale': - return ` - &:not(:root) { - width: ${dimensions.width}; - height: ${dimensions.height}; - } - `; - default: - return ` - width: ${dimensions.width}; - height: ${dimensions.height}; - `; - } -}; -const getColor = (color: Props['color']) => { - if (!color) return 'inherit'; - let iconColor; - switch (color) { - case 'solid': - iconColor = designTokens.colorSolid; - break; - case 'neutral60': - iconColor = designTokens.colorNeutral60; - break; - case 'surface': - iconColor = designTokens.colorSurface; - break; - case 'info': - iconColor = designTokens.colorInfo; - break; - case 'primary': - iconColor = designTokens.colorPrimary; - break; - case 'primary40': - iconColor = designTokens.colorPrimary40; - break; - case 'warning': - iconColor = designTokens.colorWarning; - break; - case 'error': - iconColor = designTokens.colorError; - break; - case 'success': - iconColor = designTokens.colorSuccess; - break; - default: - break; - } - if (!iconColor) { - warning( - color, - `ui-kit/Icon: the specified color '${color}' is not supported.` - ); - return 'inherit'; - } - return iconColor; -}; -export const getIconStyles = (props: Props) => css` - *:not([fill='none']) { - fill: ${getColor(props.color)}; - } - &, - image { - ${getSizeStyle(props.size)}; - } - flex-shrink: 0; -`; -const SvgUnorderedList = (props: SVGProps) => ( +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; +const SvgUnorderedList = (props: TSVGProps) => ( ( ); SvgUnorderedList.displayName = 'SvgUnorderedList'; -const UnorderedListIcon = (props: Props) => ( +const UnorderedListIcon = (props: TIconProps) => ( {({ css: createClass }) => ( { const exportEntries = filePaths.map(({ path: filePath }) => { const basename = path.basename(filePath, path.extname(filePath)); @@ -49,13 +40,17 @@ const styledIconsTemplate = (variables, context) => { const code = `// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. // This file is created with 'yarn generate-icons'. // Original SVG file: ${context.options.state.filePath} +import { ClassNames } from '@emotion/react'; +import { + getIconStyles, + type TIconProps, + type TSVGProps, +} from '@commercetools-uikit/design-system'; -${templateCreateStyledIcon} - -const ${svgComponentName} = (props: SVGProps) => JSX; +const ${svgComponentName} = (props: TSVGProps) => JSX; ${svgComponentName}.displayName = "${svgComponentName}"; -const ${reactComponentName} = (props: Props) => ( +const ${reactComponentName} = (props: TIconProps) => ( {({ css: createClass }) => <${svgComponentName} {...props} className={createClass(getIconStyles(props))} />