refa[DST-607]: revise <Badge> page (#4291)

.changeset/great-plums-fail.md

@@ -0,0 +1,10 @@
+---
+"@marigold/docs": patch
+"@marigold/components": patch
+"@marigold/theme-b2b": patch
+"@marigold/theme-core": patch
+---
+
+refa[DST-607]: revise `<Badge>` page
+
+The `<Badge>` was revised according to our new component guidelines.

docs/content/components/content/badge/badge-appearance.demo.tsx

@@ -0,0 +1,3 @@
+import { Badge, ButtonProps } from '@marigold/components';
+
+export default (props: ButtonProps) => <Badge {...props}>basic</Badge>;

docs/content/components/content/badge/badge.mdx

@@ -1,40 +1,102 @@
 ---
 title: Badge
 caption: Component for short notes with one color as status messages
+badge: updated
 ---
 
-A `<Badge>` is a content component. This component can be used to reflect status messages via a short note and a color. The content of a badge can be arbitrary, but it is preferred to use a string and/or a icon.
+A `<Badge>` is a content component. This component can be used to reflect status messages via a short note and a color.
 
-## Import
+## Anatomy
 
-```tsx
-import { Badge } from '@marigold/components';
-```
+It consists of a container and the content can either be a text or an icon.
 
-## Appearance
-
-<AppearanceTable component={title} />
-
-## Props
-
-<PropsTable component={title} />
+<Image
+  src="/badge/badge-anatomy.jpg"
+  alt="Anatomy of badge component"
+  width={800}
+  height={550}
+  className="mx-auto block"
+/>
 
-## Examples
-
-### Info Badge
-
-In this example we have the `<Badge>` component that has been given the `variant` info and a string.
-
-<ComponentDemo file="./basic-badge.demo.tsx" />
+## Appearance
 
-### Badge with an Icon
+<AppearanceDemo component={title} />
 
-In this example, the `<Badge>` component gets an icon component.
+<AppearanceTable component={title} />
 
-<ComponentDemo file="./icon-badge.demo.tsx" />
+## Usage
+
+A `<Badge>` is a component used to provide information on new updates and notifications. It is used with other components and cannot be used alone. The content of a badge can be arbitrary, but it is preferred to use a string and/or a icon.
+
+### Text Label Length
+
+The Badge is a simple and compact component for use in a limited space in the context of more complex components. When it includes a text label, make sure it fits into the dedicated space.
+
+<GuidelineTiles>
+  <Do>
+    <Do.Figure>
+      <Image
+        width={700}
+        height={700}
+        unoptimized
+        src="/badge/badge-do-label-length.jpg"
+        alt="Do: Use short and precise text labels."
+      />
+    </Do.Figure>
+    <Do.Description>Use short and precise text labels.</Do.Description>
+  </Do>
+  <Dont>
+    <Dont.Figure>
+      <Image
+        width={700}
+        height={700}
+        unoptimized
+        src="/badge/badge-dont-label-length.jpg"
+        alt="Don't: Use long descriptions for labels."
+      />
+    </Dont.Figure>
+    <Dont.Description>Don't use long descriptions for labels.</Dont.Description>
+  </Dont>
+</GuidelineTiles>
+
+### Color
+
+As the Badge is used as an indicator, its color must be precise and relevant to the message that the badge conveys.
+
+<GuidelineTiles>
+  <Do>
+    <Do.Figure>
+      <Image
+        width={700}
+        height={700}
+        unoptimized
+        src="/badge/badge-do-color.jpg"
+        alt="Do: Use the colors wisely and according to the meaning that the Badge implies."
+      />
+    </Do.Figure>
+    <Do.Description>
+      Use the colors wisely and according to the meaning that the Badge implies.
+    </Do.Description>
+  </Do>
+  <Dont>
+    <Dont.Figure>
+      <Image
+        width={700}
+        height={700}
+        unoptimized
+        src="/badge/badge-dont-color.jpg"
+        alt="Don't: Avoid using arbitrary colors that would not match the message that the Badge conveys."
+      />
+    </Dont.Figure>
+    <Dont.Description>
+      Avoid using arbitrary colors that would not match the message that the
+      Badge conveys.
+    </Dont.Description>
+  </Dont>
+</GuidelineTiles>
 
-### Badge with variant
+## Props
 
-Here you can see the `<Badge>` component with variant dark.
+<StorybookHintMessage component={title} />
 
-<ComponentDemo file="./badge-dark.demo.tsx" />
+<PropsTable component={title} />

packages/components/src/Badge/Badge.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
+import { Accessible } from '../icons';
 import { Badge } from './Badge';
 
 const meta = {
@@ -23,6 +24,11 @@ const meta = {
         defaultValue: { summary: 'new' },
       },
     },
+    size: {
+      table: {
+        disable: true,
+      },
+    },
   },
   args: {
     children: 'new',
@@ -34,3 +40,14 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = { render: args => <Badge {...args} /> };
+
+export const Icon: Story = {
+  parameters: {
+    controls: { exclude: ['children'] },
+  },
+  render: args => (
+    <Badge {...args}>
+      <Accessible />
+    </Badge>
+  ),
+};

packages/components/src/icons/Accessible.tsx

@@ -0,0 +1,13 @@
+import { forwardRef } from 'react';
+import { SVG, SVGProps as SVGPropsType } from '@marigold/system';
+
+interface SVGProps extends SVGPropsType {
+  className?: string;
+}
+
+export const Accessible = forwardRef<SVGSVGElement, SVGProps>((props, ref) => (
+  <SVG {...props} viewBox="0 0 24 24" ref={ref}>
+    <path d="M12.0188 5.94388C13.1337 5.94388 14.0375 5.04008 14.0375 3.92519C14.0375 2.81029 13.1337 1.90649 12.0188 1.90649C10.904 1.90649 10.0002 2.81029 10.0002 3.92519C10.0002 5.04008 10.904 5.94388 12.0188 5.94388Z"></path>
+    <path d="M19.0843 13.0093V10.9906C17.5299 11.0108 15.9654 10.2336 14.9762 9.14347L13.6742 7.7001C13.5026 7.50833 13.2906 7.35692 13.0585 7.2459C13.0484 7.2459 13.0484 7.2358 13.0383 7.2358H13.0282C12.6749 7.03393 12.2712 6.933 11.8271 6.97337C10.7673 7.06421 10.0002 8.00291 10.0002 9.06272V15.028C10.0002 16.1382 10.9086 17.0466 12.0188 17.0466H17.0656V22.0934H19.0843V16.542C19.0843 15.4317 18.1759 14.5233 17.0656 14.5233H14.0375V11.041C15.3396 12.121 17.3179 12.9992 19.0843 13.0093ZM12.8566 18.056C12.4428 19.2268 11.3224 20.0747 10.0002 20.0747C8.32464 20.0747 6.97212 18.7222 6.97212 17.0466C6.97212 15.7244 7.81997 14.6141 8.99081 14.1902V12.1008C6.6895 12.5651 4.95343 14.604 4.95343 17.0466C4.95343 19.8324 7.21436 22.0934 10.0002 22.0934C12.4428 22.0934 14.4817 20.3573 14.946 18.056H12.8566Z"></path>
+  </SVG>
+));

packages/components/src/icons/index.ts

@@ -5,3 +5,5 @@ export * from './ChevronLeft';
 
 export * from './SortDown';
 export * from './SortUp';
+
+export * from './Accessible';

themes/theme-b2b/src/components/Badge.styles.ts

@@ -7,9 +7,9 @@ export const Badge: ThemeComponent<'Badge'> = cva(
       variant: {
         default: 'bg-bg-base',
         inverted: 'text-text-inverted bg-bg-inverted',
-        success: 'bg-bg-success',
+        success: 'text-text-inverted bg-bg-success',
         info: 'text-text-inverted bg-bg-info',
-        warning: 'bg-bg-warning',
+        warning: 'text-text-inverted bg-bg-warning',
         error: 'text-text-inverted bg-bg-error',
       },
     },

themes/theme-core/src/components/Badge.styles.ts

@@ -9,7 +9,7 @@ export const Badge: ThemeComponent<'Badge'> = cva(
         inverted: 'text-text-inverted bg-bg-accent',
         success: 'text-text-inverted bg-bg-success',
         info: 'text-text-inverted bg-bg-info',
-        warning: 'bg-bg-warning',
+        warning: 'text-text-inverted bg-bg-warning',
         error: 'text-text-inverted bg-bg-error',
       },
     },