Merge pull request #1789 from Royal-Navy/feat/badge-styled-components

feat(Badge): Migrate to styled-components

packages/css-framework/index.scss

@@ -34,7 +34,6 @@
 @use "src/components/alert";
 @use "src/components/avatar";
 @use "src/components/autosuggest";
-@use "src/components/badge";
 @use "src/components/breadcrumbs";
 @use "src/components/btn";
 @use "src/components/btn-group";

packages/css-framework/src/components/_phase-banner.scss

@@ -26,7 +26,7 @@
   }
 }
 
-.rn-phase-banner .rn-badge {
+.rn-phase-banner__badge {
   margin: 0;
   text-transform: capitalize;
 }

packages/react-component-library/src/components/Badge/Badge.stories.tsx

@@ -8,9 +8,8 @@ import {
   BADGE_COLOR_VARIANT,
   BADGE_SIZE,
   BADGE_VARIANT,
-  BadgeColorType,
-  BadgeSizeType,
 } from '.'
+import { BadgeColorType, BadgeSizeType } from './types'
 
 const stories = storiesOf('Badge', module)
 const fadedExamples = storiesOf('Badge/Examples/Faded', module)

packages/react-component-library/src/components/Badge/Badge.test.tsx

@@ -21,14 +21,14 @@ describe('Badge', () => {
           colorVariant={BADGE_COLOR_VARIANT.SOLID}
           size={BADGE_SIZE.REGULAR}
           variant={BADGE_VARIANT.PILL}
-          dummy-testid="example"
+          data-arbitrary="example"
         />
       )
     })
 
     it('applies the props to the wrapper element', () => {
       expect(wrapper.getByTestId('badge')).toHaveAttribute(
-        'dummy-testid',
+        'data-arbitrary',
         'example'
       )
     })

packages/react-component-library/src/components/Badge/Badge.tsx

@@ -1,61 +1,41 @@
 import React from 'react'
-import classNames from 'classnames'
 
 import { ComponentWithClass } from '../../common/ComponentWithClass'
+import { StyledBadge } from './partials/StyledBadge'
 
+import { BADGE_COLOR, BADGE_COLOR_VARIANT, BADGE_SIZE } from './constants'
 import {
-  BADGE_COLOR,
-  BADGE_COLOR_VARIANT,
-  BADGE_SIZE,
-  BADGE_VARIANT,
-} from './constants'
-
-export type BadgeColorType =
-  | typeof BADGE_COLOR.ACTION
-  | typeof BADGE_COLOR.DANGER
-  | typeof BADGE_COLOR.NEUTRAL
-  | typeof BADGE_COLOR.SUCCESS
-  | typeof BADGE_COLOR.WARNING
-
-export type BadgeSizeType =
-  | typeof BADGE_SIZE.XSMALL
-  | typeof BADGE_SIZE.SMALL
-  | typeof BADGE_SIZE.REGULAR
-  | typeof BADGE_SIZE.LARGE
-  | typeof BADGE_SIZE.XLARGE
+  BadgeColorType,
+  BadgeColorVariantType,
+  BadgeSizeType,
+  BadgeVariantType,
+} from './types'
 
 export interface BadgeProps extends ComponentWithClass {
   color?: BadgeColorType
-  colorVariant?:
-    | typeof BADGE_COLOR_VARIANT.FADED
-    | typeof BADGE_COLOR_VARIANT.SOLID
+  colorVariant?: BadgeColorVariantType
   size?: BadgeSizeType
-  variant?: typeof BADGE_VARIANT.PILL
+  variant?: BadgeVariantType
 }
 
 export const Badge: React.FC<BadgeProps> = ({
   children,
-  className,
-  color = BADGE_COLOR.NEUTRAL,
+  color: badgeColor = BADGE_COLOR.NEUTRAL,
   colorVariant = BADGE_COLOR_VARIANT.SOLID,
   size = BADGE_SIZE.REGULAR,
   variant,
   ...rest
-}) => {
-  const classes = classNames(
-    'rn-badge',
-    `rn-badge--${color}`,
-    `rn-badge--${colorVariant}`,
-    `rn-badge--${size}`,
-    `rn-badge--${variant}`,
-    className
-  )
-
-  return (
-    <span className={classes} data-testid="badge" {...rest}>
-      {children}
-    </span>
-  )
-}
+}) => (
+  <StyledBadge
+    $color={badgeColor}
+    $colorVariant={colorVariant}
+    $size={size}
+    $variant={variant}
+    data-testid="badge"
+    {...rest}
+  >
+    {children}
+  </StyledBadge>
+)
 
 Badge.displayName = 'Badge'