add Badge docs (#658)

utilitywarehouse · Dec 17, 2024 · 2409a2f · 2409a2f
1 parent 9c60123
commit 2409a2f
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 10 deletions.
diff --git a/packages/react/src/components/Badge/Badge.docs.mdx 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
@@ -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
@@ -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>
-  ),
-};