badge stories

packages/uui-badge/lib/uui-badge.stories.ts

@@ -6,9 +6,29 @@ import { spread } from '../../../storyhelpers/spread-directive';
 const meta: Meta = {
   component: 'uui-badge',
   title: 'Displays/Badge',
+  args: {
+    slot: '2',
+  },
+  argTypes: {
+    look: {
+      options: ['default', 'primary', 'secondary', 'outline', 'placeholder'],
+    },
+    color: {
+      options: ['default', 'positive', 'warning', 'danger'],
+    },
+  },
   render: args => {
-    return html`<uui-badge ${spread(args)}>2</uui-badge>`;
+    return html`<uui-badge ${spread(args, ['slot'])}>${args.slot}</uui-badge>`;
   },
+};
+
+export default meta;
+type Story = StoryObj;
+
+// We can't have a component decorator because the looks and colors story needs to be rendered differently.
+// Instead we inherit the default story.
+
+export const Default: Story = {
   decorators: [
     story =>
       html`<div
@@ -18,7 +38,51 @@ const meta: Meta = {
   ],
 };
 
-export default meta;
-type Story = StoryObj;
+export const Attention: Story = {
+  ...Default,
+  args: {
+    attention: true,
+  },
+};
+
+export const Icon: Story = {
+  ...Default,
+  render: args => {
+    return html`<uui-badge ${spread(args, ['slot'])}>
+      <uui-icon name="favorite"></uui-icon>
+    </uui-badge>`;
+  },
+};
+
+export const LooksAndColors: Story = {
+  render: () => {
+    const looks = ['default', 'primary', 'secondary', 'outline', 'placeholder'];
+    const colors = ['default', 'positive', 'warning', 'danger'];
+
+    const uppercaseFirstLetter = (str: string) =>
+      str.charAt(0).toUpperCase() + str.slice(1);
 
-export const Default: Story = {};
+    return html`
+      ${colors.map(
+        color => html`
+          <h5>${uppercaseFirstLetter(color)}</h5>
+          <div style="margin-bottom: 32px; display: flex; gap: 16px;">
+            ${looks.map(
+              look => html`
+                <div
+                  style="position:relative; width:100px; height:80px; border: 1px dashed rgba(0,0,0,0.1); margin-top: 16px">
+                  <uui-badge
+                    .look=${look as any}
+                    .color=${color as any}
+                    style="margin-right:12px;"
+                    >${uppercaseFirstLetter(look)}</uui-badge
+                  >
+                </div>
+              `,
+            )}
+          </div>
+        `,
+      )}
+    `;
+  },
+};