feat: Add Badge component

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# Next
+
+-   [Feat] Introduces a `Badge` component
+
 # v15.2.0
 
 -   [Feat] Enhance the `label` property in `CheckboxField` to be of type `React.ReactNode`

docs/iframe.html

@@ -476,4 +476,4 @@
 
 
 
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(tsx|mdx))$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"}];</script><script src="runtime~main.ad83b813.iframe.bundle.js"></script><script src="vendors~main.86b22c73.iframe.bundle.js"></script><script src="main.da9fe5af.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(tsx|mdx))$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"}];</script><script src="runtime~main.ad83b813.iframe.bundle.js"></script><script src="vendors~main.86b22c73.iframe.bundle.js"></script><script src="main.7cccf0cf.iframe.bundle.js"></script></body></html>

docs/project.json

@@ -1 +1 @@
-{"generatedAt":1666986346911,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.5.5"},"typescriptOptions":{"check":true,"checkOptions":{},"reactDocgen":"react-docgen-typescript","reactDocgenTypescriptOptions":{"shouldExtractLiteralValuesFromEnum":true}},"storybookVersion":"^6.5.3","language":"typescript","storybookPackages":{"@storybook/addon-knobs":{"version":"6.3.1"},"@storybook/addon-links":{"version":"6.5.3"},"@storybook/addons":{"version":"6.5.3"},"@storybook/react":{"version":"6.5.3"}},"framework":{"name":"react"},"addons":{"@storybook/addon-postcss":{"version":"2.0.0"},"@storybook/addon-actions":{"version":"6.5.3"},"@storybook/addon-docs":{"options":{"configureJSX":true},"version":"6.5.3"},"@storybook/addon-controls":{"version":"6.5.3"},"@geometricpanda/storybook-addon-badges":{"version":"0.2.2"}}}
+{"generatedAt":1667282564853,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.5.5"},"typescriptOptions":{"check":true,"checkOptions":{},"reactDocgen":"react-docgen-typescript","reactDocgenTypescriptOptions":{"shouldExtractLiteralValuesFromEnum":true}},"storybookVersion":"^6.5.3","language":"typescript","storybookPackages":{"@storybook/addon-knobs":{"version":"6.3.1"},"@storybook/addon-links":{"version":"6.5.3"},"@storybook/addons":{"version":"6.5.3"},"@storybook/react":{"version":"6.5.3"}},"framework":{"name":"react"},"addons":{"@storybook/addon-postcss":{"version":"2.0.0"},"@storybook/addon-actions":{"version":"6.5.3"},"@storybook/addon-docs":{"options":{"configureJSX":true},"version":"6.5.3"},"@storybook/addon-controls":{"version":"6.5.3"},"@geometricpanda/storybook-addon-badges":{"version":"0.2.2"}}}

src/index.ts

@@ -33,6 +33,7 @@ export * from './new-components/text-field'
 
 // other components
 export * from './new-components/avatar'
+export * from './new-components/badge'
 export * from './new-components/modal'
 export * from './new-components/tabs'
 

src/new-components/badge/badge.module.css

@@ -0,0 +1,33 @@
+:root {
+    --reactist-badge-neutral-background: rgb(238, 238, 238);
+    --reactist-badge-neutral-foreground: rgb(102, 102, 102);
+
+    --reactist-badge-positive-background: rgba(5, 133, 39, 0.1);
+    --reactist-badge-positive-foreground: rgb(5, 133, 39);
+
+    --reactist-badge-color-background: rgb(250, 234, 209);
+    --reactist-badge-color-foreground: rgb(143, 71, 0);
+}
+
+.badge {
+    font-family: var(--reactist-font-family);
+    font-size: 10px;
+    border-radius: 3px;
+    padding: 3px var(--reactist-spacing-xsmall);
+    text-transform: uppercase;
+}
+
+.badge-neutral {
+    color: var(--reactist-badge-neutral-foreground);
+    background-color: var(--reactist-badge-neutral-background);
+}
+
+.badge-positive {
+    color: var(--reactist-badge-positive-foreground);
+    background-color: var(--reactist-badge-positive-background);
+}
+
+.badge-color {
+    color: var(--reactist-badge-color-foreground);
+    background-color: var(--reactist-badge-color-background);
+}

src/new-components/badge/badge.stories.mdx

@@ -0,0 +1,51 @@
+import { Meta, Story, Canvas, ArgsTable, Description } from '@storybook/addon-docs'
+
+import { Columns, Column } from '../columns'
+import { Badge } from './badge'
+
+<Meta
+    title="Design system/Badge"
+    component={Badge}
+    parameters={{
+        badges: ['accessible'],
+    }}
+/>
+
+# Badge
+
+A badge used to bring attention to a particular UI element or functionality.
+
+The use of variants does not provide extra semantic meaning and is strictly visual. Ensure your content provides the necessary context for users by using the `aria-label` prop if needed.
+
+<Canvas>
+    <Story parameters={{ docs: { source: { type: 'code' } } }} name="Main demo">
+        <Columns space="large">
+            <Column width="content">
+                <Badge variant="neutral">Neutral</Badge>
+            </Column>
+            <Column width="content">
+                <Badge variant="positive">Positive</Badge>
+            </Column>
+            <Column width="content">
+                <Badge variant="color">Color</Badge>
+            </Column>
+        </Columns>
+    </Story>
+</Canvas>
+
+<ArgsTable of={Badge} />
+
+## Colors
+
+The following CSS custom properties are available so that the badge's colors can be customized:
+
+```
+--reactist-badge-neutral-background
+--reactist-badge-neutral-foreground
+
+--reactist-badge-positive-background
+--reactist-badge-positive-foreground
+
+--reactist-badge-color-background
+--reactist-badge-color-foreground
+```

src/new-components/badge/badge.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+import { Box } from '../box'
+
+import type { PropsWithChildren } from 'react'
+
+import styles from './badge.module.css'
+
+type Props = {
+    variant: 'neutral' | 'positive' | 'color'
+    'aria-label'?: string
+}
+
+function Badge({ variant = 'neutral', children, ...rest }: PropsWithChildren<Props>) {
+    const variantClassName = styles[`badge-${variant}`]
+
+    return (
+        <Box {...rest} className={[styles.badge, variantClassName]}>
+            {children}
+        </Box>
+    )
+}
+
+export { Badge }

src/new-components/badge/index.ts

@@ -0,0 +1 @@
+export { Badge } from './badge'