(Badge): add new types that haven't been available until now

Author: msmx-mnakagawa

src/scripts/Badge.tsx

@@ -5,16 +5,25 @@ import classnames from 'classnames';
  *
  */
 export type BadgeProps = {
-  type?: 'inverse';
+  type?: 'inverse' | 'lightest' | 'success' | 'warning' | 'error';
   label?: string;
 } & HTMLAttributes<HTMLSpanElement>;
 
 /**
  *
  */
 export const Badge: FC<BadgeProps> = ({ type, label, ...props }) => {
-  const typeClassName = type ? `slds-badge_${type}` : null;
-  const badgeClassNames = classnames('slds-badge', typeClassName);
+  const typeClassName = /^(inverse|lightest)$/.test(type ?? '')
+    ? `slds-badge_${type}`
+    : null;
+  const themeClassName = /^(success|warning|error)$/.test(type ?? '')
+    ? `slds-theme_${type}`
+    : null;
+  const badgeClassNames = classnames(
+    'slds-badge',
+    typeClassName,
+    themeClassName
+  );
   return (
     <span className={badgeClassNames} {...props}>
       {label || props.children}

stories/Badge.stories.tsx

@@ -41,3 +41,63 @@ export const Inverse: ComponentStoryObj<typeof Badge> = {
     },
   },
 };
+
+/**
+ *
+ */
+export const Lightest: ComponentStoryObj<typeof Badge> = {
+  args: {
+    type: 'lightest',
+    children: 'Badge Label',
+  },
+  parameters: {
+    docs: {
+      storyDescription: 'Badge with type: lightest',
+    },
+  },
+};
+
+/**
+ *
+ */
+export const Success: ComponentStoryObj<typeof Badge> = {
+  args: {
+    type: 'success',
+    children: 'Badge Label',
+  },
+  parameters: {
+    docs: {
+      storyDescription: 'Badge with type: success',
+    },
+  },
+};
+
+/**
+ *
+ */
+export const Warning: ComponentStoryObj<typeof Badge> = {
+  args: {
+    type: 'warning',
+    children: 'Badge Label',
+  },
+  parameters: {
+    docs: {
+      storyDescription: 'Badge with type: warning',
+    },
+  },
+};
+
+/**
+ *
+ */
+export const Error: ComponentStoryObj<typeof Badge> = {
+  args: {
+    type: 'error',
+    children: 'Badge Label',
+  },
+  parameters: {
+    docs: {
+      storyDescription: 'Badge with type: error',
+    },
+  },
+};