From 27c002aadf38ffbc5d827c425f239d46dfa71b7f Mon Sep 17 00:00:00 2001 From: Klaudija Ljevar Date: Tue, 22 Aug 2023 11:35:28 +0200 Subject: [PATCH] Navigation new icons and color (#2581) * chore: adding new color (primary-30) and icons for representing expand/collapse actions. --------- Co-authored-by: Carlos Cortizas <97907068+CarlosCortizasCT@users.noreply.github.com> --- .changeset/gold-guests-occur.md | 6 + design-system/materials/custom-properties.css | 1 + .../materials/custom-properties.json | 1 + .../materials/internals/definition.yaml | 1 + design-system/src/design-tokens.ts | 2 + .../src/generated/SidebarCollapseReact.tsx | 154 ++++++++++++++++++ .../src/generated/SidebarExpandReact.tsx | 154 ++++++++++++++++++ .../components/icons/src/generated/index.ts | 2 + .../icons/src/svg/sidebar-collapse.react.svg | 5 + .../icons/src/svg/sidebar-expand.react.svg | 5 + 10 files changed, 331 insertions(+) create mode 100644 .changeset/gold-guests-occur.md create mode 100644 packages/components/icons/src/generated/SidebarCollapseReact.tsx create mode 100644 packages/components/icons/src/generated/SidebarExpandReact.tsx create mode 100644 packages/components/icons/src/svg/sidebar-collapse.react.svg create mode 100644 packages/components/icons/src/svg/sidebar-expand.react.svg diff --git a/.changeset/gold-guests-occur.md b/.changeset/gold-guests-occur.md new file mode 100644 index 0000000000..ee2f9f1a6c --- /dev/null +++ b/.changeset/gold-guests-occur.md @@ -0,0 +1,6 @@ +--- +'@commercetools-uikit/icons': patch +'@commercetools-uikit/design-system': patch +--- + +Adding new color (primary-30) and icons for representing expand/collapse actions. diff --git a/design-system/materials/custom-properties.css b/design-system/materials/custom-properties.css index 2561c90253..ed4a5b78eb 100644 --- a/design-system/materials/custom-properties.css +++ b/design-system/materials/custom-properties.css @@ -8,6 +8,7 @@ :root { --color-primary: #00b39e; --color-primary-25: hsl(172.9608938547486, 100%, 25%); + --color-primary-30: hsl(172.9608938547486, 100%, 30%); --color-primary-40: hsl(172.9608938547486, 100%, 40%); --color-primary-85: hsl(172.9608938547486, 100%, 85%); --color-primary-95: hsl(172.9608938547486, 100%, 95%); diff --git a/design-system/materials/custom-properties.json b/design-system/materials/custom-properties.json index 9ce292b2ce..d87a9cbbcf 100644 --- a/design-system/materials/custom-properties.json +++ b/design-system/materials/custom-properties.json @@ -1,6 +1,7 @@ { "--color-primary": "#00b39e", "--color-primary-25": "hsl(172.9608938547486, 100%, 25%)", + "--color-primary-30": "hsl(172.9608938547486, 100%, 30%)", "--color-primary-40": "hsl(172.9608938547486, 100%, 40%)", "--color-primary-85": "hsl(172.9608938547486, 100%, 85%)", "--color-primary-95": "hsl(172.9608938547486, 100%, 95%)", diff --git a/design-system/materials/internals/definition.yaml b/design-system/materials/internals/definition.yaml index ea6388bb19..6bde187e56 100644 --- a/design-system/materials/internals/definition.yaml +++ b/design-system/materials/internals/definition.yaml @@ -38,6 +38,7 @@ choiceGroupsByTheme: choices: color-primary: '#00b39e' color-primary-25: 'hsl(172.9608938547486, 100%, 25%)' + color-primary-30: 'hsl(172.9608938547486, 100%, 30%)' color-primary-40: 'hsl(172.9608938547486, 100%, 40%)' color-primary-85: 'hsl(172.9608938547486, 100%, 85%)' color-primary-95: 'hsl(172.9608938547486, 100%, 95%)' diff --git a/design-system/src/design-tokens.ts b/design-system/src/design-tokens.ts index f7856b308e..2d9f4e4417 100644 --- a/design-system/src/design-tokens.ts +++ b/design-system/src/design-tokens.ts @@ -7,6 +7,7 @@ export const themes = { default: { colorPrimary: '#00b39e', colorPrimary25: 'hsl(172.9608938547486, 100%, 25%)', + colorPrimary30: 'hsl(172.9608938547486, 100%, 30%)', colorPrimary40: 'hsl(172.9608938547486, 100%, 40%)', colorPrimary85: 'hsl(172.9608938547486, 100%, 85%)', colorPrimary95: 'hsl(172.9608938547486, 100%, 95%)', @@ -530,6 +531,7 @@ export const themes = { const designTokens = { colorPrimary: 'var(--color-primary, #00b39e)', colorPrimary25: 'var(--color-primary-25, hsl(172.9608938547486, 100%, 25%))', + colorPrimary30: 'var(--color-primary-30, hsl(172.9608938547486, 100%, 30%))', colorPrimary40: 'var(--color-primary-40, hsl(172.9608938547486, 100%, 40%))', colorPrimary85: 'var(--color-primary-85, hsl(172.9608938547486, 100%, 85%))', colorPrimary95: 'var(--color-primary-95, hsl(172.9608938547486, 100%, 95%))', diff --git a/packages/components/icons/src/generated/SidebarCollapseReact.tsx b/packages/components/icons/src/generated/SidebarCollapseReact.tsx new file mode 100644 index 0000000000..2cb7de66c3 --- /dev/null +++ b/packages/components/icons/src/generated/SidebarCollapseReact.tsx @@ -0,0 +1,154 @@ +// 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'; + size?: 'small' | 'medium' | 'big' | 'scale'; +}; +export type SVGProps = Props & { + className: string; +}; +const iconSizes = { + small: 12, + medium: 16, + big: 24, +} as const; +const getSizeDimensions = (size: Props['size']) => { + switch (size) { + case 'scale': + return { + width: '100%', + height: 'auto', + }; + case 'small': + case 'medium': + case 'big': + return { + width: `${iconSizes[size]}px`, + height: `${iconSizes[size]}px`, + }; + default: + return { + width: `${iconSizes.big}px`, + height: `${iconSizes.big}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; + 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) => ( + + + + + +); +SvgSidebarCollapse.displayName = 'SvgSidebarCollapse'; +const SidebarCollapseIcon = (props: Props) => ( + + {({ css: createClass }) => ( + + )} + +); +SidebarCollapseIcon.displayName = 'SidebarCollapseIcon'; +export default SidebarCollapseIcon; diff --git a/packages/components/icons/src/generated/SidebarExpandReact.tsx b/packages/components/icons/src/generated/SidebarExpandReact.tsx new file mode 100644 index 0000000000..5569fc292c --- /dev/null +++ b/packages/components/icons/src/generated/SidebarExpandReact.tsx @@ -0,0 +1,154 @@ +// 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-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'; + size?: 'small' | 'medium' | 'big' | 'scale'; +}; +export type SVGProps = Props & { + className: string; +}; +const iconSizes = { + small: 12, + medium: 16, + big: 24, +} as const; +const getSizeDimensions = (size: Props['size']) => { + switch (size) { + case 'scale': + return { + width: '100%', + height: 'auto', + }; + case 'small': + case 'medium': + case 'big': + return { + width: `${iconSizes[size]}px`, + height: `${iconSizes[size]}px`, + }; + default: + return { + width: `${iconSizes.big}px`, + height: `${iconSizes.big}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; + 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) => ( + + + + + +); +SvgSidebarExpand.displayName = 'SvgSidebarExpand'; +const SidebarExpandIcon = (props: Props) => ( + + {({ css: createClass }) => ( + + )} + +); +SidebarExpandIcon.displayName = 'SidebarExpandIcon'; +export default SidebarExpandIcon; diff --git a/packages/components/icons/src/generated/index.ts b/packages/components/icons/src/generated/index.ts index 701541d069..b89eca8f8f 100644 --- a/packages/components/icons/src/generated/index.ts +++ b/packages/components/icons/src/generated/index.ts @@ -102,6 +102,8 @@ export { default as RocketIcon } from './RocketReact'; export { default as ScreenGearIcon } from './ScreenGearReact'; export { default as ScreenUserIcon } from './ScreenUserReact'; export { default as SearchIcon } from './SearchReact'; +export { default as SidebarCollapseIcon } from './SidebarCollapseReact'; +export { default as SidebarExpandIcon } from './SidebarExpandReact'; export { default as SortingIcon } from './SortingReact'; export { default as SpeechBubbleIcon } from './SpeechBubbleReact'; export { default as SpeedometerIcon } from './SpeedometerReact'; diff --git a/packages/components/icons/src/svg/sidebar-collapse.react.svg b/packages/components/icons/src/svg/sidebar-collapse.react.svg new file mode 100644 index 0000000000..8ff059f85c --- /dev/null +++ b/packages/components/icons/src/svg/sidebar-collapse.react.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/components/icons/src/svg/sidebar-expand.react.svg b/packages/components/icons/src/svg/sidebar-expand.react.svg new file mode 100644 index 0000000000..2b9bff5d8a --- /dev/null +++ b/packages/components/icons/src/svg/sidebar-expand.react.svg @@ -0,0 +1,5 @@ + + + + +