feat(elements): add color and background color props to icon button

MTES-MCT · Jul 30, 2024 · e8a123a · e8a123a
1 parent d3881df
commit e8a123a
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 12 deletions.
diff --git a/src/elements/IconButton.tsx b/src/elements/IconButton.tsx
@@ -16,27 +16,30 @@ const ICON_SIZE_IN_PX: Record<Size, number> = {
 export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
   Icon: FunctionComponent<IconProps>
   accent?: Accent | undefined
-  badge?: string | undefined
+  badgeBackgroundColor?: string | undefined
+  badgeColor?: string | undefined
+  badgeNumber?: number | undefined
   color?: string | undefined
   /** In pixels, override `size` prop default values. */
   iconSize?: number | undefined
   /** Remove button border and padding. */
   isCompact?: boolean | undefined
   size?: Size | undefined
-  spotlightedNumber?: number | undefined
   /** Prevent onClick event propagation. */
   withUnpropagatedClick?: boolean | undefined
 }
 export function IconButton({
   accent = Accent.PRIMARY,
+  badgeBackgroundColor,
+  badgeColor,
+  badgeNumber,
   className,
   color,
   Icon,
   iconSize,
   isCompact,
   onClick,
   size = Size.NORMAL,
-  spotlightedNumber,
   type = 'button',
   withUnpropagatedClick = false,
   ...nativeProps
@@ -76,23 +79,35 @@ export function IconButton({
     case Accent.SECONDARY:
       return (
         <Wrapper>
-          {!!spotlightedNumber && <SpotlightedNumber size={size}>{spotlightedNumber}</SpotlightedNumber>}
+          {!!badgeNumber && (
+            <BadgeNumber backgroundColor={badgeBackgroundColor} color={badgeColor} size={size}>
+              {badgeNumber}
+            </BadgeNumber>
+          )}
           <SecondaryButton as={StyledButton} {...commonProps} />
         </Wrapper>
       )
 
     case Accent.TERTIARY:
       return (
         <Wrapper>
-          {!!spotlightedNumber && <SpotlightedNumber size={size}>{spotlightedNumber}</SpotlightedNumber>}
+          {!!badgeNumber && (
+            <BadgeNumber backgroundColor={badgeBackgroundColor} color={badgeColor} size={size}>
+              {badgeNumber}
+            </BadgeNumber>
+          )}
           <TertiaryButton as={StyledButton} {...commonProps} />
         </Wrapper>
       )
 
     default:
       return (
         <Wrapper>
-          {!!spotlightedNumber && <SpotlightedNumber size={size}>{spotlightedNumber}</SpotlightedNumber>}
+          {!!badgeNumber && (
+            <BadgeNumber backgroundColor={badgeBackgroundColor} color={badgeColor} size={size}>
+              {badgeNumber}
+            </BadgeNumber>
+          )}
           <PrimaryButton as={StyledButton} {...commonProps} />
         </Wrapper>
       )
@@ -115,7 +130,9 @@ const LEFT_MARGIN: Record<Size, number> = {
   [Size.SMALL]: 15
 }
 
-const SpotlightedNumber = styled.div<{
+const BadgeNumber = styled.div<{
+  backgroundColor: string | undefined
+  color: string | undefined
   size: Size
 }>`
   display: inline-block;
@@ -127,8 +144,8 @@ const SpotlightedNumber = styled.div<{
   top: -5px;
   line-height: 14px;
   left: ${p => (p.size ? LEFT_MARGIN[p.size] : 25)}px;
-  background: ${p => p.theme.color.maximumRed};
-  color: ${p => p.theme.color.white};
+  background: ${p => (p.backgroundColor ? p.backgroundColor : p.theme.color.maximumRed)};
+  color: ${p => (p.color ? p.color : p.theme.color.white)};
   font-size: 12px;
   letter-spacing: 0px;
   font-weight: 700;

diff --git a/stories/elements/IconButton.stories.tsx b/stories/elements/IconButton.stories.tsx
@@ -2,6 +2,7 @@ import { Showcase } from '../../.storybook/components/Showcase'
 import { ARG_TYPE, META_DEFAULTS } from '../../.storybook/constants'
 import { generateStoryDecorator } from '../../.storybook/utils/generateStoryDecorator'
 import { Accent, IconButton, Icon, Size } from '../../src'
+import { THEME } from '../../src/theme'
 
 import type { IconButtonProps } from '../../src'
 import type { Meta } from '@storybook/react'
@@ -16,13 +17,15 @@ const meta: Meta<IconButtonProps> = {
   argTypes: {
     accent: ARG_TYPE.OPTIONAL_ACCENT,
     color: ARG_TYPE.OPTIONAL_COLOR,
+    badgeBackgroundColor: ARG_TYPE.OPTIONAL_COLOR,
+    badgeColor: ARG_TYPE.OPTIONAL_COLOR,
     disabled: ARG_TYPE.OPTIONAL_BOOLEAN,
     Icon: ARG_TYPE.ICON,
     iconSize: ARG_TYPE.OPTIONAL_NUMBER,
     isCompact: ARG_TYPE.OPTIONAL_BOOLEAN,
     size: ARG_TYPE.OPTIONAL_SIZE,
     type: ARG_TYPE.NO_CONTROL,
-    spotlightedNumber: ARG_TYPE.OPTIONAL_NUMBER,
+    badgeNumber: ARG_TYPE.OPTIONAL_NUMBER,
     withUnpropagatedClick: ARG_TYPE.OPTIONAL_BOOLEAN
   },
 
@@ -31,7 +34,9 @@ const meta: Meta<IconButtonProps> = {
     disabled: false,
     Icon: Icon.Close,
     isCompact: false,
-    spotlightedNumber: 2,
+    badgeNumber: 2,
+    badgeBackgroundColor: THEME.color.lightGray,
+    badgeColor: THEME.color.slateGray,
     size: undefined,
     withUnpropagatedClick: false
   },
@@ -77,10 +82,10 @@ function ShowcaseReference() {
             <td>
               <IconButton
                 accent={Accent.PRIMARY}
+                badgeNumber={123}
                 className=""
                 Icon={Icon.Search}
                 size={Size.NORMAL}
-                spotlightedNumber={123}
               />
             </td>
             <td>