-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
34 changed files
with
555 additions
and
110 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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} /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}, | ||
}; |
Oops, something went wrong.