feat(symbols): rework ExclamationPoint to resize dynamically

MTES-MCT · Mar 25, 2024 · ce6a398 · ce6a398
1 parent 5849aa1
commit ce6a398
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/src/symbols/ExclamationPoint.tsx b/src/symbols/ExclamationPoint.tsx
@@ -6,18 +6,22 @@ import type { HTMLAttributes } from 'react'
 export type ExclamationPointProps = HTMLAttributes<HTMLSpanElement> & {
   backgroundColor?: string | undefined
   color?: string | undefined
+  size?: number
 }
+
+const DEFAULT_SIZE = 20
+
 export const ExclamationPoint = styled.span<ExclamationPointProps>`
   background: ${p => p.backgroundColor ?? p.theme.color.goldenPoppy};
-  border-radius: 15px;
+  border-radius: ${p => `${p.size ?? DEFAULT_SIZE}px`};
   color: ${p => p.color ?? p.theme.color.white};
-  display: inline-block;
-  font-size: 11px;
+  display: inline-flex; /* use flexbox for easier centering */
+  justify-content: center; /* center content horizontally */
+  align-items: center; /* center content vertically */
+  font-size: ${p => `${p.size && p.size <= 13 ? p.size : 13}px`};
   font-weight: 700;
-  line-height: 11px !important;
-  height: 20px;
-  padding: 3.25px 4px 5px 8.25px;
-  width: 20px;
+  height: ${p => `${p.size ?? DEFAULT_SIZE}px`};
+  width: ${p => `${p.size ?? DEFAULT_SIZE}px`};
   box-sizing: border-box;
 
   ::after {

diff --git a/stories/elements/Tag.stories.tsx b/stories/elements/Tag.stories.tsx
@@ -1,7 +1,7 @@
 import { Showcase } from '../../.storybook/components/Showcase'
 import { ACCENTS_AS_ARRAY, TAG_BULLETS_AS_ARRAY } from '../../.storybook/constants'
 import { generateStoryDecorator } from '../../.storybook/utils/generateStoryDecorator'
-import { Accent, Icon, THEME, Tag, TagBullet } from '../../src'
+import { Accent, Icon, THEME, Tag, TagBullet, ExclamationPoint } from '../../src'
 
 import type { TagProps } from '../../src'
 import type { Meta } from '@storybook/react'
@@ -92,6 +92,13 @@ export function _Tag(props: TagProps) {
         <Tag backgroundColor={THEME.color.maximumRed15} color={THEME.color.charcoal} Icon={Icon.Link}>
           A tag with custom colors and icon
         </Tag>
+        <Tag
+          backgroundColor={THEME.color.maximumRed15}
+          color={THEME.color.charcoal}
+          Icon={() => <ExclamationPoint size={16} />}
+        >
+          A tag with an ExclamationPoint component
+        </Tag>
       </Showcase>
     </>
   )

diff --git a/stories/symbols/ExclamationPoint.stories.tsx b/stories/symbols/ExclamationPoint.stories.tsx
@@ -6,7 +6,8 @@ import type { Meta } from '@storybook/react'
 
 const args: ExclamationPointProps = {
   backgroundColor: THEME.color.goldenPoppy,
-  color: THEME.color.white
+  color: THEME.color.white,
+  size: 20
 }
 
 /* eslint-disable sort-keys-fix/sort-keys-fix */