diff --git a/.changeset/shy-pugs-tickle.md b/.changeset/shy-pugs-tickle.md new file mode 100644 index 0000000000..e146d892a6 --- /dev/null +++ b/.changeset/shy-pugs-tickle.md @@ -0,0 +1,5 @@ +--- +'@commercetools-uikit/icons': minor +--- + +Four new icons added: 'HubIcon', 'CtCheckoutIcon', 'TuneIcon' & 'PaidIcon' diff --git a/packages/components/icons/src/generated/CtCheckoutReact.tsx b/packages/components/icons/src/generated/CtCheckoutReact.tsx new file mode 100644 index 0000000000..31052b8f8b --- /dev/null +++ b/packages/components/icons/src/generated/CtCheckoutReact.tsx @@ -0,0 +1,158 @@ +// 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) => ( + +); +SvgCtCheckout.displayName = 'SvgCtCheckout'; +const CtCheckoutIcon = (props: Props) => ( + + {({ css: createClass }) => ( + + )} + +); +CtCheckoutIcon.displayName = 'CtCheckoutIcon'; +export default CtCheckoutIcon; diff --git a/packages/components/icons/src/generated/HubReact.tsx b/packages/components/icons/src/generated/HubReact.tsx new file mode 100644 index 0000000000..150690e729 --- /dev/null +++ b/packages/components/icons/src/generated/HubReact.tsx @@ -0,0 +1,156 @@ +// 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) => ( + +); +SvgHub.displayName = 'SvgHub'; +const HubIcon = (props: Props) => ( + + {({ css: createClass }) => ( + + )} + +); +HubIcon.displayName = 'HubIcon'; +export default HubIcon; diff --git a/packages/components/icons/src/generated/PaidReact.tsx b/packages/components/icons/src/generated/PaidReact.tsx new file mode 100644 index 0000000000..7d658161be --- /dev/null +++ b/packages/components/icons/src/generated/PaidReact.tsx @@ -0,0 +1,171 @@ +// 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) => ( + +); +SvgPaid.displayName = 'SvgPaid'; +const PaidIcon = (props: Props) => ( + + {({ css: createClass }) => ( + + )} + +); +PaidIcon.displayName = 'PaidIcon'; +export default PaidIcon; diff --git a/packages/components/icons/src/generated/TuneReact.tsx b/packages/components/icons/src/generated/TuneReact.tsx new file mode 100644 index 0000000000..28f332847e --- /dev/null +++ b/packages/components/icons/src/generated/TuneReact.tsx @@ -0,0 +1,171 @@ +// 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) => ( + +); +SvgTune.displayName = 'SvgTune'; +const TuneIcon = (props: Props) => ( + + {({ css: createClass }) => ( + + )} + +); +TuneIcon.displayName = 'TuneIcon'; +export default TuneIcon; diff --git a/packages/components/icons/src/generated/index.ts b/packages/components/icons/src/generated/index.ts index 568730084c..f46946ba03 100644 --- a/packages/components/icons/src/generated/index.ts +++ b/packages/components/icons/src/generated/index.ts @@ -45,6 +45,7 @@ export { default as ColumnsIcon } from './ColumnsReact'; export { default as ConnectedSquareIcon } from './ConnectedSquareReact'; export { default as ConnectedTriangleIcon } from './ConnectedTriangleReact'; export { default as CopyIcon } from './CopyReact'; +export { default as CtCheckoutIcon } from './CtCheckoutReact'; export { default as CubeIcon } from './CubeReact'; export { default as CubesIcon } from './CubesReact'; export { default as DiamondIcon } from './DiamondReact'; @@ -73,6 +74,7 @@ export { default as GridIcon } from './GridReact'; export { default as GroupAddIcon } from './GroupAddReact'; export { default as HeartIcon } from './HeartReact'; export { default as HomeIcon } from './HomeReact'; +export { default as HubIcon } from './HubReact'; export { default as ImportIcon } from './ImportReact'; export { default as InfoIcon } from './InfoReact'; export { default as InformationIcon } from './InformationReact'; @@ -87,6 +89,7 @@ export { default as NestedViewIcon } from './NestedViewReact'; export { default as OperationsIcon } from './OperationsReact'; export { default as PageGearIcon } from './PageGearReact'; export { default as PagesIcon } from './PagesReact'; +export { default as PaidIcon } from './PaidReact'; export { default as PaperBillInvertedIcon } from './PaperBillInvertedReact'; export { default as PaperclipIcon } from './PaperclipReact'; export { default as PinFilledIcon } from './PinFilledReact'; @@ -123,6 +126,7 @@ export { default as TagIcon } from './TagReact'; export { default as TerminalIcon } from './TerminalReact'; export { default as TreeStructureIcon } from './TreeStructureReact'; export { default as TruckIcon } from './TruckReact'; +export { default as TuneIcon } from './TuneReact'; export { default as UserFilledIcon } from './UserFilledReact'; export { default as UserLinearIcon } from './UserLinearReact'; export { default as UsersIcon } from './UsersReact'; diff --git a/packages/components/icons/src/svg/ct-checkout.react.svg b/packages/components/icons/src/svg/ct-checkout.react.svg new file mode 100644 index 0000000000..9c7716b9b8 --- /dev/null +++ b/packages/components/icons/src/svg/ct-checkout.react.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/components/icons/src/svg/hub.react.svg b/packages/components/icons/src/svg/hub.react.svg new file mode 100644 index 0000000000..2f55055a9f --- /dev/null +++ b/packages/components/icons/src/svg/hub.react.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/components/icons/src/svg/paid.react.svg b/packages/components/icons/src/svg/paid.react.svg new file mode 100644 index 0000000000..4b06df2e48 --- /dev/null +++ b/packages/components/icons/src/svg/paid.react.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/components/icons/src/svg/tune.react.svg b/packages/components/icons/src/svg/tune.react.svg new file mode 100644 index 0000000000..a1751c1f23 --- /dev/null +++ b/packages/components/icons/src/svg/tune.react.svg @@ -0,0 +1,8 @@ + + + + + + + +