feat(Badge): deprecate some props and new UpdateBadge and StatusBadge components

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

@@ -28,7 +28,7 @@ export const Sizes = (): React.ReactElement => (
     <StoryDescriptor title="Medium">
       <Badge size="medium" count={1} />
     </StoryDescriptor>
-    <StoryDescriptor title="Large">
+    <StoryDescriptor title="Large (deprecated)">
       <Badge size="large" count={1} />
     </StoryDescriptor>
   </>
@@ -39,7 +39,7 @@ export const Kinds = (): React.ReactElement => (
     <StoryDescriptor title="Primary">
       <Badge kind="primary" count={1} />
     </StoryDescriptor>
-    <StoryDescriptor title="Secondary">
+    <StoryDescriptor title="Secondary (Deprecated)">
       <Badge kind="secondary" count={1} />
     </StoryDescriptor>
     <StoryDescriptor title="Tertiary">
@@ -64,7 +64,7 @@ export const Types = (): React.ReactElement => (
     <StoryDescriptor title="Alert">
       <Badge type="alert" />
     </StoryDescriptor>
-    <StoryDescriptor title="Dot">
+    <StoryDescriptor title="Dot (Deprecated)">
       <Badge type="dot" />
     </StoryDescriptor>
   </>

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

@@ -15,6 +15,7 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   count?: number;
   /**
    * Specify the badge kind
+   * @param secondary - is deprecated, use "primary" or "tertiary" instead
    */
   kind?: 'primary' | 'secondary' | 'tertiary';
   /**
@@ -23,10 +24,12 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   max?: number;
   /**
    * Specify the badge size
+   * @param large - is deprecated, use "medium" or "compact" instead
    */
   size?: 'large' | 'medium' | 'compact';
   /**
    * Specify the badge type
+   * @param dot - is deprecated, use "UpdateBadge" component instead
    */
   type?: 'counter' | 'alert' | 'dot';
 }

packages/react-components/src/components/StatusBadge/StatusBadge.module.scss

@@ -0,0 +1,79 @@
+$base-class: 'status-badge';
+
+@mixin size($size) {
+  border-radius: $size;
+  width: $size;
+  height: $size;
+}
+
+.#{$base-class} {
+  display: flex;
+  border-style: solid;
+  border-color: var(--surface-primary-default);
+
+  &--3XS {
+    @include size(4px);
+
+    border-width: 1px;
+  }
+
+  &--2XS {
+    @include size(5px);
+
+    border-width: 1px;
+  }
+
+  &--XS {
+    @include size(6px);
+
+    border-width: 1px;
+  }
+
+  &--SM {
+    @include size(8px);
+
+    border-width: 1px;
+  }
+
+  &--MD {
+    @include size(9px);
+
+    border-width: 2px;
+  }
+
+  &--LG {
+    @include size(10px);
+
+    border-width: 2px;
+  }
+
+  &--XL {
+    @include size(12px);
+
+    border-width: 2px;
+  }
+
+  &--2XL {
+    @include size(16px);
+
+    border-width: 2px;
+  }
+
+  &--3XL {
+    @include size(24px);
+
+    border-width: 3px;
+  }
+
+  &--offline {
+    background-color: var(--content-basic-disabled);
+  }
+
+  &--accept {
+    background-color: var(--surface-accent-emphasis-high-positive);
+  }
+
+  &--not-accept {
+    background-color: var(--surface-accent-emphasis-high-negative);
+  }
+}

packages/react-components/src/components/StatusBadge/StatusBadge.stories.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
+
+import {
+  IStatusBadgeProps,
+  StatusBadge,
+  StatusBadgeSizes,
+} from './StatusBadge';
+
+export default {
+  title: 'Components/Badge/StatusBadge',
+  component: StatusBadge,
+};
+
+const SIZES: StatusBadgeSizes[] = [
+  '3XS',
+  '2XS',
+  'XS',
+  'SM',
+  'MD',
+  'LG',
+  'XL',
+  '2XL',
+  '3XL',
+];
+
+export const Default = (args: IStatusBadgeProps): React.ReactElement => (
+  <StatusBadge {...args} />
+);
+
+export const KindsAndSizes = (): React.ReactElement => (
+  <>
+    {SIZES.map((size) => (
+      <StoryDescriptor title={`${size}`}>
+        <StatusBadge size={size} kind="accept" />
+        <StatusBadge size={size} kind="not-accept" />
+        <StatusBadge size={size} kind="offline" />
+      </StoryDescriptor>
+    ))}
+  </>
+);

packages/react-components/src/components/StatusBadge/StatusBadge.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+import cx from 'clsx';
+
+import styles from './StatusBadge.module.scss';
+
+const baseClass = 'status-badge';
+
+export type StatusBadgeSizes =
+  | '3XS'
+  | '2XS'
+  | 'XS'
+  | 'SM'
+  | 'MD'
+  | 'LG'
+  | 'XL'
+  | '2XL'
+  | '3XL';
+
+export interface IStatusBadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Specify the status badge kind
+   */
+  kind?: 'offline' | 'accept' | 'not-accept';
+  /**
+   * Specify the status badge size
+   */
+  size?: StatusBadgeSizes;
+}
+
+export const StatusBadge: React.FC<IStatusBadgeProps> = ({
+  className,
+  kind = 'offline',
+  size = 'MD',
+  ...spanProps
+}) => {
+  const mergedClassNames = cx(
+    styles[baseClass],
+    styles[`${baseClass}--${kind}`],
+    styles[`${baseClass}--${size}`],
+    className
+  );
+
+  return <span className={mergedClassNames} {...spanProps} />;
+};

packages/react-components/src/components/StatusBadge/index.ts

@@ -0,0 +1 @@
+export { StatusBadge } from './StatusBadge';

packages/react-components/src/components/UpdateBadge/UpdateBadge.module.scss

@@ -0,0 +1,13 @@
+$base-class: 'update-badge';
+$size: 9px;
+
+.#{$base-class} {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $size;
+  box-shadow: inset 0 0 0 3.25px var(--surface-accent-emphasis-high-negative);
+  background-color: var(--content-invert-primary);
+  width: $size;
+  height: $size;
+}

packages/react-components/src/components/UpdateBadge/UpdateBadge.stories.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+import { UpdateBadge } from './UpdateBadge';
+
+export default {
+  title: 'Components/Badge/UpdateBadge',
+  component: UpdateBadge,
+};
+
+export const Default = (): React.ReactElement => <UpdateBadge />;

packages/react-components/src/components/UpdateBadge/UpdateBadge.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import styles from './UpdateBadge.module.scss';
+
+const baseClass = 'update-badge';
+
+export const UpdateBadge: React.FC = () => (
+  <span className={styles[baseClass]} />
+);

packages/react-components/src/components/UpdateBadge/index.ts

@@ -0,0 +1 @@
+export { UpdateBadge } from './UpdateBadge';

packages/react-components/src/index.ts

@@ -38,6 +38,7 @@ export * from './components/PromoBannerV2';
 export * from './components/RadioButton';
 export * from './components/Search';
 export * from './components/Skeleton';
+export * from './components/StatusBadge';
 export * from './components/Switch';
 export * from './components/Tab';
 export * from './components/Tag';
@@ -46,5 +47,6 @@ export * from './components/Toast';
 export * from './components/Tooltip';
 export * from './components/Typography';
 export * from './components/Textarea';
+export * from './components/UpdateBadge';
 export * from './components/FileUploadProgress';
 export * from './components/UploadBar';