feat(pill): update pill component with the new tokens (#1025)

# What

<!-- Describe the technical "why" behind your changes -->

## Code Quality Checklist

- [x] Lint and unit tests pass locally with my changes
- [ ] I have added tests that prove my fix is effective or that my
feature works (if appropriate)
- [ ] I have added necessary documentation (if appropriate)
- [x] I have updated storybook (if appropriate)
- [ ] I have ran `yarn set-peer-dep` when adding an icon as a dependency
of another component (if appropriate) [read
more](https://carlsberggbs.atlassian.net/wiki/spaces/DSM/pages/4697162121/Components+as+peer+dependency)

## Jira Card

<!-- if no card is associated, remove the line bellow and add "Not
Applicable" -->

DSM-1521

cypress/e2e/Pill.cy.ts

@@ -9,14 +9,20 @@ describe('<Pill />', () => {
     page.getFullPageWithVisibleTarget(dataTestId).compareSnapshot(buildSnapshotName());
   });
 
-  it('Icon', () => {
-    const page = visit({ args: { dataTestId }, storyId: 'information-pill--icon' });
+  it('Only Icon', () => {
+    const page = visit({ args: { dataTestId }, storyId: 'information-pill--only-icon' });
 
     page.getFullPageWithVisibleTarget(dataTestId).compareSnapshot(buildSnapshotName());
   });
 
-  it('Text', () => {
-    const page = visit({ args: { dataTestId }, storyId: 'information-pill--text' });
+  it('Text With Leading Icon', () => {
+    const page = visit({ args: { dataTestId }, storyId: 'information-pill--text-with-leading-icon' });
+
+    page.getFullPageWithVisibleTarget(dataTestId).compareSnapshot(buildSnapshotName());
+  });
+
+  it('Text With Trailing Icon', () => {
+    const page = visit({ args: { dataTestId }, storyId: 'information-pill--text-with-trailing-icon' });
 
     page.getFullPageWithVisibleTarget(dataTestId).compareSnapshot(buildSnapshotName());
   });

malty/atoms/BaseIcon/BaseIcon.helper.ts

@@ -18,6 +18,7 @@ export const useIconColor = (color: IconColor): string => {
     case IconColor.NotificationLight:
     case IconColor.Success:
     case IconColor.SuccessLight:
+    case IconColor.Disabled:
       return colours.system[color].value;
 
     case IconColor.Support20:

malty/atoms/BaseIcon/BaseIcon.types.ts

@@ -40,6 +40,7 @@ export enum IconColor {
   SuccessLight = 'success-light',
   Fail = 'fail',
   FailLight = 'fail-light',
+  Disabled = 'disabled',
   DisableDark = 'disable-dark-theme',
   DisableLight = 'disable-light-theme'
 }

malty/atoms/Pill/Pill.helper.tsx

@@ -1,53 +1,91 @@
 import { IconColor, IconSize } from '@carlsberggbs/malty.atoms.base-icon';
-import { globalTheme as defaultTheme } from '@carlsberggbs/malty.theme.malty-theme-provider';
+import { defaultTheme } from '@carlsberggbs/malty.theme.new-malty-theme-provider';
 import { useContext } from 'react';
 import { ThemeContext } from 'styled-components';
-import { IconTextColorProps, PillSize, PillType, UsePillStylesProps } from './Pill.types';
+import { IconTextColorProps, PillSize, PillType, UsePillBackgroundColorProps, UsePillStylesProps } from './Pill.types';
 
 export const usePillStyles = ({ size }: UsePillStylesProps) => {
   const theme = useContext(ThemeContext) || defaultTheme;
 
   const pillStyles = {
-    [PillSize.ExtraSmall]: {
-      numSize: theme.sizes.ms.value,
-      fontSize: theme.typography.desktop.text.tiny_bold['font-size'].value,
-      fontFamily: theme.typography.desktop.text.tiny_bold['font-family'].value,
+    [PillSize.XS]: {
+      numSize: theme.sizesV2.s,
+      fontWeight: theme.typographyV2.montserrat.body[10].semibold.fontWeight,
+      lineHeight: theme.typographyV2.montserrat.body[10].semibold.lineHeight,
+      fontSize: theme.typographyV2.montserrat.body[10].semibold.fontSize,
       iconSize: IconSize.ExtraSmall,
-      padding: theme.sizes['3xs'].value,
-      gap: theme.sizes['4xs'].value
+      padding: `${theme.sizesV2['4xs']} ${theme.sizesV2['3xs']}`,
+      gap: theme.sizesV2['5xs']
     },
-    [PillSize.Small]: {
-      numSize: theme.sizes.m.value,
-      fontSize: theme.typography.desktop.text.tiny_bold['font-size'].value,
-      fontFamily: theme.typography.desktop.text.tiny_bold['font-family'].value,
+    [PillSize.S]: {
+      numSize: theme.sizesV2.m,
+      fontWeight: theme.typographyV2.montserrat.body[10].semibold.fontWeight,
+      lineHeight: theme.typographyV2.montserrat.body[10].semibold.lineHeight,
+      fontSize: theme.typographyV2.montserrat.body[10].semibold.fontSize,
       iconSize: IconSize.Small,
-      padding: theme.sizes['2xs'].value,
-      gap: theme.sizes['3xs'].value
+      padding: `${theme.sizesV2['4xs']} ${theme.sizesV2['3xs']}`,
+      gap: theme.sizesV2['4xs']
     },
-    [PillSize.Medium]: {
-      numSize: theme.sizes.l.value,
-      fontSize: theme.typography.desktop.text['medium-small_bold']['font-size'].value,
-      fontFamily: theme.typography.desktop.text['medium-small_bold']['font-family'].value,
+    [PillSize.M]: {
+      numSize: theme.sizesV2.xl,
+      fontWeight: theme.typographyV2.montserrat.body[14].semibold.fontWeight,
+      lineHeight: theme.typographyV2.montserrat.body[14].semibold.lineHeight,
+      fontSize: theme.typographyV2.montserrat.body[14].semibold.fontSize,
       iconSize: IconSize.Medium,
-      padding: theme.sizes.xs.value,
-      gap: theme.sizes['2xs'].value
+      padding: `${theme.sizesV2['4xs']} ${theme.sizesV2['2xs']}`,
+      gap: theme.sizesV2['4xs']
     }
   };
 
   return pillStyles[size];
 };
 
-export const useIconTextColor = ({ type }: IconTextColorProps) => {
-  if (
-    type === PillType.Archive ||
-    type === PillType.Success ||
-    type === PillType.SuccessLight ||
-    type === PillType.AlertStrong ||
-    type === PillType.AlertLight ||
-    type === PillType.NotificationLight
-  ) {
+// TODO: Refactor this when the icons are reviewed with new tokens
+export const useIconColor = ({ type }: IconTextColorProps) => {
+  if (type === PillType.Archive || type === PillType.Success || type === PillType.Alert) {
     return IconColor.DigitalBlack;
   }
 
+  if (type === PillType.Disabled) {
+    return IconColor.Disabled;
+  }
+
   return IconColor.White;
 };
+
+export const useTextColor = ({ type }: IconTextColorProps) => {
+  const theme = useContext(ThemeContext) || defaultTheme;
+
+  if (type === PillType.Archive || type === PillType.Success || type === PillType.Alert) {
+    return theme.colorsV2.default.content[500];
+  }
+
+  if (type === PillType.Disabled) {
+    return theme.colorsV2.default.foreground.primary['interactive--disabled'];
+  }
+
+  return theme.colorsV2.default.content[100];
+};
+
+export const usePillBackgroundColor = ({ type }: UsePillBackgroundColorProps) => {
+  const theme = useContext(ThemeContext) || defaultTheme;
+
+  switch (type) {
+    case PillType.Success:
+      return theme.colorsV2.default.success[500];
+    case PillType.Alert:
+      return theme.colorsV2.default.warning[500];
+    case PillType.Fail:
+      return theme.colorsV2.default.error[600];
+    case PillType.Notification:
+      return theme.colorsV2.default.information[600];
+    case PillType.Archive:
+      return theme.colorsV2.default.primary[200];
+    case PillType.Secondary:
+      return theme.colorsV2.default.primary[400];
+    case PillType.Disabled:
+      return theme.colorsV2.default.background.primary['interactive--disabled'];
+    default:
+      return theme.colorsV2.default.content[500];
+  }
+};

malty/atoms/Pill/Pill.stories.tsx

@@ -4,7 +4,7 @@ import { generateStorybookSpacing } from '@carlsberggbs/malty.utils.space';
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { Pill } from './Pill';
-import { PillProps, PillSize, PillType } from './Pill.types';
+import { IconPosition, PillProps, PillSize, PillType } from './Pill.types';
 
 const meta: Meta<PillProps> = {
   title: 'Information/Pill',
@@ -23,22 +23,14 @@ const meta: Meta<PillProps> = {
       options: Object.values(PillSize),
       control: 'select',
       table: {
-        category: 'Styling',
-        defaultValue: {
-          summary: PillSize.Medium
-        }
+        category: 'Styling'
       }
     },
     type: {
       description: 'Pill type',
-      options: Object.keys(PillType),
+      options: Object.values(PillType),
       mapping: PillType,
-      control: 'select',
-      table: {
-        defaultValue: {
-          summary: PillType.Primary
-        }
-      }
+      control: 'select'
     },
     icon: {
       description: 'The icon component to be displayed',
@@ -51,6 +43,15 @@ const meta: Meta<PillProps> = {
         }
       }
     },
+    iconPosition: {
+      description: 'Icon position',
+      options: ['leading', 'trailing'],
+      control: 'radio',
+      if: { arg: 'icon' },
+      table: {
+        category: 'Icon'
+      }
+    },
     isUppercase: {
       description: 'Use this property to uppercase the text content',
       control: 'boolean',
@@ -71,26 +72,36 @@ type Story = StoryObj<PillProps>;
 export const Base: Story = {
   args: {
     text: 'Text',
-    icon: <CarlsbergFilled />,
     type: PillType.Primary,
-    size: PillSize.Medium,
+    size: PillSize.M,
     isUppercase: false
   }
 };
 
-export const Icon: Story = {
+export const OnlyIcon: Story = {
   args: {
     ...Base.args,
+    icon: <CarlsbergFilled />,
     type: PillType.Success,
     text: ''
   }
 };
 
-export const Text: Story = {
+export const TextWithLeadingIcon: Story = {
   args: {
     ...Base.args,
-    type: PillType.Fail,
-    icon: undefined
+    icon: <CarlsbergFilled />,
+    iconPosition: IconPosition.Leading,
+    type: PillType.Alert
+  }
+};
+
+export const TextWithTrailingIcon: Story = {
+  args: {
+    ...Base.args,
+    icon: <CarlsbergFilled />,
+    iconPosition: IconPosition.Trailing,
+    type: PillType.Notification
   }
 };
 

malty/atoms/Pill/Pill.styled.ts

@@ -1,61 +1,47 @@
 import { space } from '@carlsberggbs/malty.utils.space';
 import styled, { css } from 'styled-components';
-import { PillSize, PillType, StyledPillProps } from './Pill.types';
+import { PillSize, StyledPillProps } from './Pill.types';
 
 export const StyledPill = styled.div<StyledPillProps>`
-  font-family: ${({ fontFamily }) => `${fontFamily}`};
-  font-size: ${({ fontSize }) => `${fontSize}`};
-  font-weight: bold;
-  background-color: ${({ type, theme }) => {
-    if (type === PillType.Primary) {
-      return theme.colors.theme.themePrimary.value;
-    }
-    if (type === PillType.Secondary) {
-      return theme.colors.theme.themeSecondary.value;
-    }
-    if (type === PillType.Archive) {
-      return theme.colors.colours.support[40].value;
-    }
-    return theme.colors.colours.system[type].value;
-  }};
-  color: ${({ textColor }) => textColor};
+  font-family: 'Montserrat', sans-serif;
+  font-size: ${({ $fontSize }) => $fontSize};
+  font-weight: ${({ $fontWeight }) => $fontWeight};
+  background-color: ${({ $backgroundColor }) => $backgroundColor};
+  line-height: ${({ $lineHeight }) => $lineHeight};
+  color: ${({ $textColor }) => $textColor};
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: ${({ size }) => `${size}`};
-  min-width: ${({ size }) => `${size}`};
+  height: ${({ $size }) => $size};
+  min-width: ${({ $size }) => $size};
   box-sizing: border-box;
-  transition: background-color 0.25s ease-in-out;
-  border-radius: ${({ size }) => `${size}`};
-  padding: 0 ${({ padding }) => padding};
-  gap: ${({ gap }) => gap};
-  text-transform: ${({ isUppercase }) => (isUppercase ? 'uppercase' : 'initial')};
+  gap: ${({ $gap }) => $gap};
+  padding: ${({ $padding }) => $padding};
+  text-transform: ${({ $isUppercase }) => ($isUppercase ? 'uppercase' : 'initial')};
+  border-radius: ${({ theme }) => theme.borderRadiusV2.round};
 
-  ${({ hasIcon, hasText, pillSize, theme }) => {
-    let paddingLeft;
+  ${({ $hasIcon, $hasText, $pillSize, theme }) => {
+    let padding;
+    let gap;
 
-    if (hasIcon && !hasText) {
-      return css`
-        padding: 0;
-      `;
-    }
-
-    if (hasIcon && hasText) {
-      switch (pillSize) {
-        case PillSize.ExtraSmall:
-          paddingLeft = theme.sizes['4xs'].value;
-          break;
-        case PillSize.Small:
-          paddingLeft = theme.sizes['3xs'].value;
-          break;
-        default:
-          paddingLeft = theme.sizes['2xs'].value;
-          break;
+    if ($hasIcon && !$hasText) {
+      if ($pillSize === PillSize.XS) {
+        padding = theme.sizesV2['4xs'];
+        gap = theme.sizesV2['5xs'];
+      }
+      if ($pillSize === PillSize.S) {
+        padding = theme.sizesV2['4xs'];
+        gap = theme.sizesV2['4xs'];
+      }
+      if ($pillSize === PillSize.M) {
+        padding = theme.sizesV2['4xs'];
+        gap = theme.sizesV2['3xs'];
       }
     }
 
     return css`
-      padding-left: ${paddingLeft};
+      padding: ${padding};
+      gap: ${gap};
     `;
   }}