Merge branch 'main' into uwds-1641

packages/web-ui/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @utilitywarehouse/web-ui
 
+## 0.8.1
+
+### Patch Changes
+
+- [#373](https://github.com/utilitywarehouse/design-systems/pull/373) [`9de954d1`](https://github.com/utilitywarehouse/design-systems/commit/9de954d10b166219e69b49f08debb8249bc3a530) Thanks [@robphoenix](https://github.com/robphoenix)! - Fix disabled Radio
+
+## 0.8.0
+
+### Minor Changes
+
+- [#360](https://github.com/utilitywarehouse/design-systems/pull/360) [`f98c1b0b`](https://github.com/utilitywarehouse/design-systems/commit/f98c1b0b42c25ac5740bfd05f50586c63b7cf08c) Thanks [@PollyCR](https://github.com/PollyCR)! [@robphoenix](https://github.com/robphoenix)! - Add `Badge` component
+
 ## 0.7.1
 
 ### Patch Changes

packages/web-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/web-ui",
-  "version": "0.7.1",
+  "version": "0.8.1",
   "description": "React components for building UW UIs",
   "type": "module",
   "main": "dist/index.cjs",

packages/web-ui/src/Badge/Badge.docs.mdx

@@ -0,0 +1,81 @@
+import { Meta, Canvas, ArgTypes, Description } from '@storybook/blocks';
+import * as Stories from './Badge.stories';
+
+<Meta of={Stories} />
+
+# Badge
+
+<Description />
+
+- [Variant](#variant)
+- [Color schemes](#color-schemes)
+- [Compact](#compact)
+- [Bottom radius](#bottom-radius)
+- [Contextual colour](#contextual-colour)
+- [Props](#props)
+
+<Canvas of={Stories.KitchenSink} />
+
+## Variant
+
+The variant prop controls the visual appearance of the Badge.
+
+```tsx
+<Flex gap={2} align="center">
+  <Badge variant="soft">Badge</Badge>
+  <Badge variant="strong">Badge</Badge>
+  <Badge variant="outline">Badge</Badge>
+</Flex>
+```
+
+## Color schemes
+
+The `colorScheme` prop will change the Badge colours.
+
+```tsx
+<Badge colorScheme="red">Error</Badge>
+```
+
+## Compact
+
+This prop will render a more compact Badge.
+
+```tsx
+<Badge compact>Compact badge</Badge>
+```
+
+## 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} />
+
+## Contextual colour
+
+When an `outline` variant Badge is inside a `Box` component that specifies a
+`background` which is the value of either `colorsCommon.brandMidnight` or
+`colorsCommon.brandPrimaryPurple`, the `Badge` will render the colour scheme
+differently so as to be visible on the darker background. This can also be
+achieved using the `inverted` prop on the Badge component.
+
+> This only applies to the `outline` variant, and will have no effect on the other variants.
+
+```tsx
+<Box background={colors.brandMidnight}>
+  <Badge variant="outline">{...}</Badge>
+</Box>
+
+[...]
+
+<Badge inverted variant="outline">{...}</Badge>
+```
+
+<Canvas of={Stories.ContextualColour} />
+
+## Props
+
+<ArgTypes of={Stories} />

packages/web-ui/src/Badge/Badge.props.ts

@@ -0,0 +1,30 @@
+import { ComponentPropsWithoutRef } from 'react';
+
+export interface BadgeProps extends ComponentPropsWithoutRef<'span'> {
+  /**
+   * Sets the badges's visual variant
+   * @default soft
+   */
+  variant?: 'soft' | 'strong' | 'outline';
+  /**
+   * Sets the colour scheme.
+   * @default cyan
+   */
+  colorScheme?: 'cyan' | 'green' | 'red' | 'gold' | 'grey';
+  /**
+   * Inverts the colorScheme, for use on darker brand backgrounds.
+   * Only affects the outline variant
+   * @default false
+   */
+  inverted?: boolean;
+  /**
+   * Removes the bottom radius, set when the Badge sits directly above another container
+   * @default false
+   */
+  bottomRadiusZero?: boolean;
+  /**
+   * Sets a more compact padding
+   * @default false
+   */
+  compact?: boolean;
+}

packages/web-ui/src/Badge/Badge.stories.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Backgrounds } from '../storybook-utils';
+import { Badge } from './Badge';
+import { Flex } from '../Flex';
+import { StarSmallIcon } from '@utilitywarehouse/react-icons';
+import { colors } from '@utilitywarehouse/colour-system';
+import { Box } from '../Box';
+
+const variants = ['soft', 'strong', 'outline'] as const;
+const colorSchemes = ['cyan', 'green', 'red', 'gold', 'grey'] as const;
+
+const meta: Meta<typeof Badge> = {
+  title: 'Web UI / Components / Badge',
+  component: Badge,
+  argTypes: {
+    children: { control: { type: 'text' } },
+    variant: { options: variants, control: { type: 'radio' } },
+    colorScheme: { options: colorSchemes, control: { type: 'radio' } },
+    compact: { control: { type: 'boolean' } },
+    inverted: { control: { type: 'boolean' } },
+    bottomRadiusZero: { control: { type: 'boolean' } },
+  },
+  args: {
+    children: 'Badge',
+    variant: 'soft',
+    colorScheme: 'cyan',
+    compact: false,
+    inverted: false,
+    bottomRadiusZero: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+export const KitchenSink: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => {
+    return (
+      <Flex direction="column">
+        {variants.map(variant => (
+          <Flex key={variant} gap={4} justifyContent="center" padding={4} direction="column">
+            {colorSchemes.map(colorScheme => (
+              <Flex key={colorScheme} direction="row" gap={2}>
+                <Badge variant={variant} colorScheme={colorScheme}>
+                  Badge
+                </Badge>
+                <Badge compact variant={variant} colorScheme={colorScheme}>
+                  Badge
+                </Badge>
+                <Badge variant={variant} colorScheme={colorScheme}>
+                  <StarSmallIcon />
+                  Badge
+                </Badge>
+                <Badge compact variant={variant} colorScheme={colorScheme}>
+                  <StarSmallIcon />
+                  Badge
+                </Badge>
+                <Badge variant={variant} colorScheme={colorScheme} bottomRadiusZero>
+                  Badge
+                </Badge>
+                <Badge compact variant={variant} colorScheme={colorScheme} bottomRadiusZero>
+                  Badge
+                </Badge>
+                <Badge variant={variant} colorScheme={colorScheme} bottomRadiusZero>
+                  <StarSmallIcon />
+                  Badge
+                </Badge>
+                <Badge compact variant={variant} colorScheme={colorScheme} bottomRadiusZero>
+                  <StarSmallIcon />
+                  Badge
+                </Badge>
+              </Flex>
+            ))}
+          </Flex>
+        ))}
+      </Flex>
+    );
+  },
+};
+
+export const Workshop: Story = {};
+
+export const BottomRadiusZero: Story = {
+  render: () => {
+    return (
+      <Box>
+        <Box marginLeft="250px">
+          <Badge colorScheme="green" variant="strong" bottomRadiusZero>
+            Multi SIM offer
+          </Badge>
+        </Box>
+        <Box width={400} height={200} borderRadius="8px" bgcolor={colors.green100} />
+      </Box>
+    );
+  },
+};
+
+export const ContextualColour: Story = {
+  render: () => {
+    return (
+      <Backgrounds>
+        <Flex gap={4}>
+          {colorSchemes.map(colorScheme => (
+            <Badge key={colorScheme} colorScheme={colorScheme} variant="outline">
+              {colorScheme}
+            </Badge>
+          ))}
+        </Flex>
+      </Backgrounds>
+    );
+  },
+};