fix: update Pill component to support latest colors

src/components/Pill/Pill.stories.tsx

@@ -1,11 +1,20 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import Pill from './index';
 
 const meta = {
-  title: 'Pending Review/Pill',
+  title: 'Components/Pill',
   component: Pill,
   tags: ['autodocs'],
+  argTypes: {
+    onClick: { control: false },
+  },
+  args: {
+    inverse: false,
+    onClick: undefined,
+    size: 'medium',
+  },
 } satisfies Meta<typeof Pill>;
 
 export default meta;
@@ -17,3 +26,35 @@ export const Default: Story = {
     children: 'Default',
   },
 };
+
+export const Colors: Story = {
+  args: {
+    children: 'Colors',
+  },
+  argTypes: {
+    color: { control: false },
+  },
+  render: (args) => (
+    <div style={{ display: 'flex', gap: 12 }}>
+      <Pill {...args} color="default" />
+      <Pill {...args} color="primary" />
+      <Pill {...args} color="secondary" />
+      <Pill {...args} color="danger" />
+      <Pill {...args} color="info" />
+      <Pill {...args} color="success" />
+      <Pill {...args} color="warning" />
+    </div>
+  ),
+};
+
+export const Inverse: Story = {
+  args: {
+    children: 'Inverse',
+    inverse: true,
+  },
+  argTypes: {
+    color: { control: false },
+    inverse: { control: false },
+  },
+  render: Colors.render,
+};

src/components/Pill/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export type PillClassName = string | string[];
+export type PillColor = 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
 
 export type PillSize = 'large' | 'medium' | 'small';
 
@@ -10,21 +10,29 @@ export interface PillProps {
    */
   children: React.ReactNode;
   /**
-   * Custom classnames
-   */
-  className?: PillClassName;
-  /**
-   * Custome onClick event
+   * The main color for the pill
    */
-  onClick?: (...args: any[]) => any;
+  color?: PillColor;
   /**
    * one of ["large",  "medium", "small"]
    */
   size?: PillSize;
+  /**
+   * Inverse the background and content color
+   */
+  inverse?: boolean;
+  /**
+   * Custom onClick event
+   */
+  onClick?: (...args: any[]) => any;
   /**
    * Generate "data-test-selector" on the pill
    */
   dts?: string;
+  /**
+   * Custom classnames
+   */
+  className?: string;
 }
 
 declare const Pill: React.FC<PillProps>;

src/components/Pill/index.jsx

@@ -1,46 +1,59 @@
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { colors } from '../Button';
 import { expandDts } from '../../utils';
 import './styles.css';
 
 const sizes = ['large', 'medium', 'small'];
 
-const Pill = ({ className, children, onClick, size, dts }) => (
+const Pill = ({ children, color = colors[0], size = sizes[1], inverse = false, onClick, dts, className, ...rest }) => (
   <div
-    className={classnames('aui--pill', `aui--pill-${size}`, { 'aui--pill-clickable': onClick }, className)}
+    {...rest}
+    className={cx(
+      'aui--pill',
+      `aui-${size}`,
+      `aui-${color}`,
+      inverse && 'aui-inverse',
+      onClick && 'aui-clickable',
+      className
+    )}
     onClick={onClick}
     {...expandDts(dts)}
   >
-    <div className="aui--pill-children">{children}</div>
+    {children}
   </div>
 );
 
-Pill.defaultProps = {
-  size: sizes[1],
-};
-
 Pill.propTypes = {
   /**
-   * 	Content inside pill
+   * Content inside pill
    */
   children: PropTypes.node.isRequired,
   /**
-   *  	Custom classnames
+   * The main color for the pill
    */
-  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  /**
-   *  	Custome onClick event
-   */
-  onClick: PropTypes.func,
+  color: PropTypes.oneOf(colors),
   /**
    * one of ["large",  "medium", "small"]
    */
   size: PropTypes.oneOf(sizes),
+  /**
+   * Inverse the background and content color
+   */
+  inverse: PropTypes.bool,
+  /**
+   * Custom onClick event
+   */
+  onClick: PropTypes.func,
   /**
    * 	Generate "data-test-selector" on the pill
    */
   dts: PropTypes.string,
+  /**
+   * Custom classnames
+   */
+  className: PropTypes.string,
 };
 
 export default Pill;

src/components/Pill/styles.css

@@ -1,48 +1,103 @@
 @import url('../../styles/variable.css');
 
+$color-default-active: $color-grey-200;
+$color-primary-active: $color-blue-500;
+$color-success-active: $color-green-700;
+$color-danger-active: $color-red-700;
+$color-warning-active: $color-orange-700;
+$color-info-active: $color-cyan-700;
+$color-secondary-active: $color-teal-700;
+
 .aui--pill {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   border: 1px solid $color-border-base;
   user-select: none;
   font-weight: $font-weight-bold;
   line-height: 1;
   color: $color-text-base;
-  background-color: $color-white;
-}
+  background-color: $color-default-accent;
 
-.aui--pill-children {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  &.aui-small {
+    padding: 4px 6px;
+    font-size: $font-size-base;
+    border-radius: $border-radius-base;
+  }
 
-.aui--pill-clickable:hover,
-.aui--pill-clickable:focus {
-  background-color: $color-grey-200;
-  cursor: pointer;
-}
+  &.aui-medium {
+    padding: 6px 12px;
+    font-size: 14px;
+    border-radius: $border-radius-round;
+  }
 
-.aui--pill-small {
-  padding: 2px 5px;
-  font-size: $font-size-small;
-  border-radius: $border-radius-base;
-  line-height: 1;
-}
+  &.aui-large {
+    padding: 8px 20px;
+    font-size: $font-size-medium;
+    border-radius: $border-radius-round;
+  }
 
-.aui--pill-small .aui--svg-symbol-component {
-  width: 12px;
-  height: 12px;
-}
+  &.aui-clickable:hover,
+  &.aui-clickable:focus {
+    cursor: pointer;
+  }
 
-.aui--pill-medium {
-  padding: 5px 12px;
-  font-size: $font-size-base;
-  border-radius: $border-radius-round;
-}
+  &.aui-primary {
+    background-color: $color-primary-accent;
+    border-color: $color-primary-accent;
+  }
+
+  &.aui-secondary {
+    background-color: $color-secondary-accent;
+    border-color: $color-secondary-accent;
+  }
+
+  &.aui-success {
+    background-color: $color-success-accent;
+    border-color: $color-success-accent;
+  }
+
+  &.aui-info {
+    background-color: $color-info-accent;
+    border-color: $color-info-accent;
+  }
+
+  &.aui-warning {
+    background-color: $color-warning-accent;
+    border-color: $color-warning-accent;
+  }
+
+  &.aui-danger {
+    background-color: $color-danger-accent;
+    border-color: $color-danger-accent;
+  }
+
+  &.aui-inverse {
+    border-color: $color-border-base;
+    background-color: $color-white;
+
+    &.aui-primary {
+      color: $color-primary-base;
+    }
+
+    &.aui-secondary {
+      color: $color-secondary-base;
+    }
+
+    &.aui-success {
+      color: $color-success-base;
+    }
+
+    &.aui-info {
+      color: $color-info-base;
+    }
+
+    &.aui-warning {
+      color: $color-warning-base;
+    }
 
-.aui--pill-large {
-  padding: 6px 20px;
-  font-size: $font-size-medium;
-  border-radius: $border-radius-round;
+    &.aui-danger {
+      color: $color-danger-base;
+    }
+  }
 }