From 2409a2f642ed2d8b4301de78a17386f47446a3f4 Mon Sep 17 00:00:00 2001
From: Rob Phoenix <9257284+robphoenix@users.noreply.github.com>
Date: Tue, 17 Dec 2024 13:32:32 +0000
Subject: [PATCH] add Badge docs (#658)

---
 .../react/src/components/Badge/Badge.docs.mdx | 77 +++++++++++++++++++
 .../react/src/components/Badge/Badge.props.ts |  2 +-
 .../src/components/Badge/Badge.stories.tsx    | 17 ++--
 3 files changed, 86 insertions(+), 10 deletions(-)
 create mode 100644 packages/react/src/components/Badge/Badge.docs.mdx

diff --git a/packages/react/src/components/Badge/Badge.docs.mdx b/packages/react/src/components/Badge/Badge.docs.mdx
new file mode 100644
index 000000000..72dc2d174
--- /dev/null
+++ b/packages/react/src/components/Badge/Badge.docs.mdx
@@ -0,0 +1,77 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+
+import * as Stories from './Badge.stories';
+
+import { DocsHeader } from '../../storybook/DocsHeader';
+
+<Meta title="Components / Badge" />
+
+<DocsHeader
+  componentName="Badge"
+  figmaLink="https://www.figma.com/design/4FFYTLWJ2hQpj36JplQQUw/UW-Web-UI?node-id=904-9379"
+  stories={Stories}
+/>
+
+<Canvas of={Stories.Workshop} sourceState="none" />
+
+- [Variants](#variants)
+- [Color schemes](#color-schemes)
+- [Size](#size)
+- [Bottom radius](#bottom-radius)
+- [API](#api)
+
+## Variants
+
+The variant prop controls the visual appearance of the Badge.
+
+<Canvas of={Stories.Variants} />
+
+```tsx
+<Badge variant="soft">Badge</Badge>
+<Badge variant="strong">Badge</Badge>
+<Badge variant="outline">Badge</Badge>
+```
+
+## Color schemes
+
+The `colorScheme` prop will change the Badge colours.
+
+<Canvas of={Stories.ColorSchemes} />
+
+## Size
+
+The small size is a more compact Badge.
+
+```tsx
+<Badge size="small">Small badge</Badge>
+<Badge size="medium">Medium badge</Badge>
+```
+
+This prop is responsive, so you can set the value according to breakpoint values.
+
+```tsx
+<Badge size={{ mobile: 'small', desktop: 'medium' }}>Responsive badge size</Badge>
+```
+
+<Canvas of={Stories.ResponsiveSize} />
+
+## Bottom radius
+
+The `bottomRadiusZero` will remove the `border-bottom-right-radius` and `border-bottom-left-radius`, for use when the badge is positioned on top of another element.
+
+```tsx
+<Badge bottomRadiusZero>Multi SIM offer</Badge>
+```
+
+<Canvas of={Stories.BottomRadiusZero} />
+
+## API
+
+This component is based on the `a` element.
+
+| Prop               | Type                                         | Description                                                                          | Default  |
+| ------------------ | -------------------------------------------- | ------------------------------------------------------------------------------------ | -------- |
+| `variant`          | `soft` \| `strong` \| `outline`              | Sets the badges's visual variant.                                                    | `soft`   |
+| `colorScheme`      | `cyan` \|`green` \| `red` \|`gold` \| `grey` | Sets the colour scheme.                                                              | `cyan`   |
+| `size`             | `small` \|`medium`                           | Sets the size.                                                                       | `medium` |
+| `bottomRadiusZero` | `boolean`                                    | Removes the bottom radius, set when the Badge sits directly above another container. | `false`  |
diff --git a/packages/react/src/components/Badge/Badge.props.ts b/packages/react/src/components/Badge/Badge.props.ts
index dee1e32cf..32f78dbdc 100644
--- a/packages/react/src/components/Badge/Badge.props.ts
+++ b/packages/react/src/components/Badge/Badge.props.ts
@@ -30,7 +30,7 @@ export interface BadgeProps extends ComponentPropsWithout<'span', RemovedProps>
    */
   bottomRadiusZero?: boolean;
   /**
-   * Sets a more compact padding
+   * Set the size of the Badge
    * @default medium
    */
   size?: Responsive<(typeof sizes)[number]>;
diff --git a/packages/react/src/components/Badge/Badge.stories.tsx b/packages/react/src/components/Badge/Badge.stories.tsx
index ee45c2a77..30e6b79da 100644
--- a/packages/react/src/components/Badge/Badge.stories.tsx
+++ b/packages/react/src/components/Badge/Badge.stories.tsx
@@ -106,6 +106,14 @@ export const ColorSchemes: Story = {
   ),
 };
 
+export const ResponsiveSize: Story = {
+  render: args => (
+    <Badge {...args} size={{ mobile: 'small', desktop: 'medium' }}>
+      Responsive badge size
+    </Badge>
+  ),
+};
+
 export const BottomRadiusZero: Story = {
   render: () => {
     return (
@@ -125,12 +133,3 @@ export const BottomRadiusZero: Story = {
     );
   },
 };
-
-export const Compact: Story = {
-  name: 'Responsive size',
-  render: args => (
-    <Badge {...args} size={{ mobile: 'small', tablet: 'medium' }}>
-      Responsive badge size
-    </Badge>
-  ),
-};