Merge pull request #458 from mashmatrix/support-slds-2-badge

Update `Badge` for SLDS2

Author: stomita

src/scripts/Badge.tsx

@@ -5,16 +5,25 @@ import classnames from 'classnames';
  *
  */
 export type BadgeProps = {
-  type?: 'default' | 'shade' | 'inverse';
+  type?: 'inverse' | 'lightest' | 'success' | 'warning' | 'error';
   label?: string;
 } & HTMLAttributes<HTMLSpanElement>;
 
 /**
  *
  */
 export const Badge: FC<BadgeProps> = ({ type, label, ...props }) => {
-  const typeClassName = type ? `slds-theme_${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

@@ -30,29 +30,74 @@ export const Default: ComponentStoryObj<typeof Badge> = {
 /**
  *
  */
-export const Shade: ComponentStoryObj<typeof Badge> = {
+export const Inverse: ComponentStoryObj<typeof Badge> = {
   args: {
-    type: 'shade',
+    type: 'inverse',
     children: 'Badge Label',
   },
   parameters: {
     docs: {
-      storyDescription: 'Badge with type: shade',
+      storyDescription: 'Badge with type: inverse',
     },
   },
 };
 
 /**
  *
  */
-export const Inverse: ComponentStoryObj<typeof Badge> = {
+export const Lightest: ComponentStoryObj<typeof Badge> = {
   args: {
-    type: 'inverse',
+    type: 'lightest',
     children: 'Badge Label',
   },
   parameters: {
     docs: {
-      storyDescription: 'Badge with type: inverse',
+      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',
     },
   },
 };