From 0072d11cd33b17ee8eff70110c154e33db751c10 Mon Sep 17 00:00:00 2001 From: Klink <85062+dogmar@users.noreply.github.com> Date: Thu, 25 Jan 2024 17:06:03 -0800 Subject: [PATCH] feat: PR Queue Icons (#568) --- src/components/icons/CheckRoundedIcon.tsx | 8 ++- src/components/icons/CheckedShieldIcon.tsx | 10 +++- src/components/icons/CloseRoundedIcon.tsx | 8 ++- src/components/icons/ErrorIcon.tsx | 11 +++- src/components/icons/InfoIcon.tsx | 8 ++- src/components/icons/PadlockIcon.tsx | 11 +++- src/components/icons/PadlockLockedIcon.tsx | 11 +++- src/components/icons/PrClosedIcon.tsx | 15 +++++ src/components/icons/PrMergedIcon.tsx | 15 +++++ src/components/icons/PrOpenIcon.tsx | 15 +++++ src/components/icons/StatusIpIcon.tsx | 8 ++- src/components/icons/SuccessIcon.tsx | 26 +-------- src/components/icons/VerifiedIcon.tsx | 16 +----- src/components/icons/WarningIcon.tsx | 11 +++- src/icons.ts | 12 ++-- src/index.ts | 3 + src/plural-logos.ts | 4 ++ src/stories/Icons.stories.tsx | 65 ++++++++++++++++++++++ 18 files changed, 200 insertions(+), 57 deletions(-) create mode 100644 src/components/icons/PrClosedIcon.tsx create mode 100644 src/components/icons/PrMergedIcon.tsx create mode 100644 src/components/icons/PrOpenIcon.tsx create mode 100644 src/plural-logos.ts diff --git a/src/components/icons/CheckRoundedIcon.tsx b/src/components/icons/CheckRoundedIcon.tsx index 12fb091b..6cad0404 100644 --- a/src/components/icons/CheckRoundedIcon.tsx +++ b/src/components/icons/CheckRoundedIcon.tsx @@ -1,12 +1,18 @@ import createIcon from './createIcon' -export default createIcon(({ size, color }) => ( +export default createIcon(({ size, color, secondaryColor = 'transparent' }) => ( + ( +export default createIcon(({ size, color, secondaryColor = 'transparent' }) => ( + )) diff --git a/src/components/icons/CloseRoundedIcon.tsx b/src/components/icons/CloseRoundedIcon.tsx index f0d34148..f8eb74f0 100644 --- a/src/components/icons/CloseRoundedIcon.tsx +++ b/src/components/icons/CloseRoundedIcon.tsx @@ -1,12 +1,18 @@ import createIcon from './createIcon' -export default createIcon(({ size, color }) => ( +export default createIcon(({ size, color, secondaryColor = 'transparent' }) => ( + ( +export default createIcon(({ size, color, secondaryColor = 'transparent' }) => ( + ( +export default createIcon(({ size, color, secondaryColor = 'transparent' }) => ( + ( +export default createIcon(({ size, color, secondaryColor = 'transparent' }) => ( + ( +export default createIcon(({ size, color, secondaryColor = 'transparent' }) => ( ( fill="none" xmlns="http://www.w3.org/2000/svg" > + ( + + + +)) diff --git a/src/components/icons/PrMergedIcon.tsx b/src/components/icons/PrMergedIcon.tsx new file mode 100644 index 00000000..bef5fe93 --- /dev/null +++ b/src/components/icons/PrMergedIcon.tsx @@ -0,0 +1,15 @@ +import createIcon from './createIcon' + +export default createIcon(({ size, color }) => ( + + + +)) diff --git a/src/components/icons/PrOpenIcon.tsx b/src/components/icons/PrOpenIcon.tsx new file mode 100644 index 00000000..2510f2f3 --- /dev/null +++ b/src/components/icons/PrOpenIcon.tsx @@ -0,0 +1,15 @@ +import createIcon from './createIcon' + +export default createIcon(({ size, color }) => ( + + + +)) diff --git a/src/components/icons/StatusIpIcon.tsx b/src/components/icons/StatusIpIcon.tsx index 5fc73fc4..1aed8bfe 100644 --- a/src/components/icons/StatusIpIcon.tsx +++ b/src/components/icons/StatusIpIcon.tsx @@ -1,12 +1,18 @@ import createIcon from './createIcon' -export default createIcon(({ size, color }) => ( +export default createIcon(({ size, color, secondaryColor = 'transparent' }) => ( + ( - - - - - - - - - - -)) +export default CheckRoundedIcon diff --git a/src/components/icons/VerifiedIcon.tsx b/src/components/icons/VerifiedIcon.tsx index d1d8dd17..9fef1814 100644 --- a/src/components/icons/VerifiedIcon.tsx +++ b/src/components/icons/VerifiedIcon.tsx @@ -1,15 +1,3 @@ -import createIcon from './createIcon' +import CheckedShieldIcon from './CheckedShieldIcon' -export default createIcon(({ size, color }) => ( - - - -)) +export default CheckedShieldIcon diff --git a/src/components/icons/WarningIcon.tsx b/src/components/icons/WarningIcon.tsx index 4eac0d08..1f6de5ca 100644 --- a/src/components/icons/WarningIcon.tsx +++ b/src/components/icons/WarningIcon.tsx @@ -2,7 +2,7 @@ import { useId } from 'react' import createIcon from './createIcon' -export default createIcon(({ size, color }) => { +export default createIcon(({ size, color, secondaryColor = 'transparent' }) => { const id1 = useId() return ( @@ -12,6 +12,15 @@ export default createIcon(({ size, color }) => { fill="none" xmlns="http://www.w3.org/2000/svg" > + diff --git a/src/icons.ts b/src/icons.ts index eaeaef3b..bb992001 100644 --- a/src/icons.ts +++ b/src/icons.ts @@ -131,6 +131,9 @@ export { default as PipelineIcon } from './components/icons/PipelineIcon' export { default as PlanIcon } from './components/icons/PlanIcon' export { default as PlayIcon } from './components/icons/PlayIcon' export { default as PlusIcon } from './components/icons/PlusIcon' +export { default as PrClosedIcon } from './components/icons/PrClosedIcon' +export { default as PrMergedIcon } from './components/icons/PrMergedIcon' +export { default as PrOpenIcon } from './components/icons/PrOpenIcon' export { default as ProtectedClusterIcon } from './components/icons/ProtectedClusterIcon' export { default as PushPinIcon } from './components/icons/PushPinIcon' export { default as ReloadIcon } from './components/icons/ReloadIcon' @@ -144,8 +147,8 @@ export { default as ScrollPlusIcon } from './components/icons/ScrollPlusIcon' 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 ShieldOutlineIcon } from './components/icons/ShieldOutlineIcon' export { default as ShipIcon } from './components/icons/ShipIcon' export { default as SirenIcon } from './components/icons/SirenIcon' export { default as SlackLogoIcon } from './components/icons/SlackLogoIcon' @@ -183,10 +186,3 @@ export { default as WavingHandIcon } from './components/icons/WavingHandIcon' export { default as WebhooksIcon } from './components/icons/WebhooksIcon' export { default as WindowsLogoIcon } from './components/icons/WindowsLogoIcon' export { default as WorkspaceIcon } from './components/icons/WorkspaceIcon' -// Logos -export { default as PluralLogoFull } from './components/icons/logo/PluralLogoFull' -export { default as PluralLogoMark } from './components/icons/logo/PluralLogoMark' -export { default as PluralLogoWord } from './components/icons/logo/PluralLogoWord' -// Deprecated -export { default as GitPull } from './components/icons/GitPullIcon' -export { default as GitMerge } from './components/icons/GitMergeIcon' diff --git a/src/index.ts b/src/index.ts index d52df138..5331961e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,6 +3,9 @@ export { Avatar, Menu, MenuItem } from 'honorable' // Icons export * from './icons' +// PluralLogos +export * from './plural-logos' + // Components export { default as Accordion } from './components/Accordion' export { default as Banner } from './components/Banner' diff --git a/src/plural-logos.ts b/src/plural-logos.ts new file mode 100644 index 00000000..166cfc9f --- /dev/null +++ b/src/plural-logos.ts @@ -0,0 +1,4 @@ +// Logos +export { default as PluralLogoFull } from './components/icons/logo/PluralLogoFull' +export { default as PluralLogoMark } from './components/icons/logo/PluralLogoMark' +export { default as PluralLogoWord } from './components/icons/logo/PluralLogoWord' diff --git a/src/stories/Icons.stories.tsx b/src/stories/Icons.stories.tsx index 9a9d1ca8..ec03c759 100644 --- a/src/stories/Icons.stories.tsx +++ b/src/stories/Icons.stories.tsx @@ -2,6 +2,7 @@ import styled, { useTheme } from 'styled-components' import { createElement } from 'react' import * as icons from '../icons' +import * as logos from '../plural-logos' export default { title: 'Icons', @@ -110,6 +111,62 @@ function Template({ backgroundColor, color, secondaryColor, ...args }: any) { ) } +function LogosTemplate({ + 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 ( +
+ {Object.entries(logos).map(([name, icon]) => ( +
+
+ {createElement(icon as any, { color, secondaryColor, ...args })} +
+ +
+ ))} +
+ ) +} + export const Default = Template.bind({}) Default.args = { color: 'icon-default', @@ -157,3 +214,11 @@ FullColor.args = { size: 32, backgroundColor: 'transparent', } + +export const PluralLogos = LogosTemplate.bind({}) +PluralLogos.args = { + color: 'icon-default', + fullColor: true, + size: 32, + backgroundColor: 'transparent', +}