From cdf17174171b3d2649383dce6f68f67f713318c9 Mon Sep 17 00:00:00 2001 From: Klink <85062+dogmar@users.noreply.github.com> Date: Tue, 9 Jan 2024 07:54:09 -0800 Subject: [PATCH] feat: Icon updates (#559) --- src/components/icons/BlockedIcon.tsx | 20 ++++++++++++++++++++ src/components/icons/ShieldLockIcon.tsx | 25 +++++++++++++++++++++++++ src/components/icons/createIcon.tsx | 25 ++++++++++++++----------- src/icons.ts | 2 ++ src/stories/Icons.stories.tsx | 25 +++++++++++++++++++++++-- 5 files changed, 84 insertions(+), 13 deletions(-) create mode 100644 src/components/icons/BlockedIcon.tsx create mode 100644 src/components/icons/ShieldLockIcon.tsx diff --git a/src/components/icons/BlockedIcon.tsx b/src/components/icons/BlockedIcon.tsx new file mode 100644 index 00000000..565ed621 --- /dev/null +++ b/src/components/icons/BlockedIcon.tsx @@ -0,0 +1,20 @@ +import createIcon from './createIcon' + +export default createIcon(({ size, color, secondaryColor }) => ( + + + + +)) diff --git a/src/components/icons/ShieldLockIcon.tsx b/src/components/icons/ShieldLockIcon.tsx new file mode 100644 index 00000000..519947a8 --- /dev/null +++ b/src/components/icons/ShieldLockIcon.tsx @@ -0,0 +1,25 @@ +import { useTheme } from 'styled-components' + +import createIcon from './createIcon' + +export default createIcon(({ size, color, secondaryColor }) => { + const theme = useTheme() + + return ( + + + + + ) +}) diff --git a/src/components/icons/createIcon.tsx b/src/components/icons/createIcon.tsx index 02a04f0b..7ddb8a64 100644 --- a/src/components/icons/createIcon.tsx +++ b/src/components/icons/createIcon.tsx @@ -4,25 +4,25 @@ import { type IconProps as HonorableIconProps, useTheme, } from 'honorable' -import PropTypes from 'prop-types' type IconBaseProps = { size?: number | string color?: string fullColor?: boolean + secondaryColor?: string } export type IconProps = HonorableIconProps & IconBaseProps -const propTypes = { - size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - color: PropTypes.string, - fullColor: PropTypes.bool, -} - function createIcon(render: (props: IconBaseProps) => ReactNode) { function IconRef( - { size = 16, color = 'currentColor', fullColor, ...props }: IconProps, + { + size = 16, + color = 'currentColor', + fullColor, + secondaryColor, + ...props + }: IconProps, ref: Ref ) { const theme = useTheme() @@ -35,15 +35,18 @@ function createIcon(render: (props: IconBaseProps) => ReactNode) { {...{ '& *': { transition: 'stroke 150ms linear, fill 150ms linear' } }} {...props} > - {render({ size, color: workingColor, fullColor })} + {render({ + size, + color: workingColor, + secondaryColor, + fullColor, + })} ) } const ForwardedIcon = forwardRef(IconRef) - ForwardedIcon.propTypes = propTypes - return ForwardedIcon } diff --git a/src/icons.ts b/src/icons.ts index 50cab34b..e1de0e01 100644 --- a/src/icons.ts +++ b/src/icons.ts @@ -10,6 +10,7 @@ export { default as ArrowTopRightIcon } from './components/icons/ArrowTopRightIc export { default as AwsLogoIcon } from './components/icons/AwsLogoIcon' export { default as AzureLogoIcon } from './components/icons/AzureLogoIcon' export { default as BellIcon } from './components/icons/BellIcon' +export { default as BlockedIcon } from './components/icons/BlockedIcon' export { default as BookIcon } from './components/icons/BookIcon' export { default as BotIcon } from './components/icons/BotIcon' export { default as BriefcaseIcon } from './components/icons/BriefcaseIcon' @@ -141,6 +142,7 @@ export { default as SearchIcon } from './components/icons/SearchIcon' export { default as SendMessageIcon } from './components/icons/SendMessageIcon' export { default as ServersIcon } from './components/icons/ServersIcon' export { default as ShieldOutlineIcon } from './components/icons/ShieldOutlineIcon' +export { default as ShieldLockIcon } from './components/icons/ShieldLockIcon' export { default as ShipIcon } from './components/icons/ShipIcon' export { default as SirenIcon } from './components/icons/SirenIcon' export { default as SlackLogoIcon } from './components/icons/SlackLogoIcon' diff --git a/src/stories/Icons.stories.tsx b/src/stories/Icons.stories.tsx index ea998e3e..9a9d1ca8 100644 --- a/src/stories/Icons.stories.tsx +++ b/src/stories/Icons.stories.tsx @@ -25,6 +25,21 @@ export default { type: 'select', }, }, + secondaryColor: { + options: [ + '', + 'fill-zero', + 'fill-one', + 'fill-two', + 'fill-three', + 'black', + 'white', + 'transparent', + ], + control: { + type: 'select', + }, + }, }, } @@ -53,13 +68,19 @@ const AppIcon = styled.div<{ $backgroundColor: string }>( }) ) -function Template({ backgroundColor, ...args }: any) { +function Template({ backgroundColor, color, secondaryColor, ...args }: any) { const theme = useTheme() const bgColor = (typeof (theme.colors as any)[backgroundColor] === 'string' && (theme.colors as any)[backgroundColor]) || backgroundColor + // @ts-ignore + color = theme.colors[color] ?? (color || undefined) + secondaryColor = + // @ts-ignore + theme.colors[secondaryColor as string] ?? (secondaryColor || undefined) + return ( - {createElement(icon as any, { ...args })} + {createElement(icon as any, { color, secondaryColor, ...args })}