feat: create badge component

packages/core/src/components/badge/badge.scss

@@ -0,0 +1,24 @@
+.atom-badge {
+  border-radius: var(--border-radius-medium);
+  color: var(--color-neutral-white);
+  font: var(--text-badge);
+  letter-spacing: var(--text-badge-letter);
+  padding: 0 var(--spacing-xxsmall);
+
+  &[color='warning'] {
+    background-color: var(--color-contextual-warning-regular);
+  }
+
+  &[color='danger'] {
+    background-color: var(--color-contextual-error-regular);
+  }
+
+  &[color='neutral'] {
+    background-color: var(--color-neutral-light-3);
+    color: var(--color-neutral-light-2);
+  }
+
+  &[color='dark'] {
+    background-color: var(--color-neutral-regular);
+  }
+}

packages/core/src/components/badge/badge.spec.ts

@@ -0,0 +1,178 @@
+import { newSpecPage } from '@stencil/core/testing'
+
+import { AtomBadge } from './badge'
+
+describe('atom-badge', () => {
+  it('should render an ion-badge element', async () => {
+    const page = await newSpecPage({
+      components: [AtomBadge],
+      html: `<atom-badge type='primary'>Badge</atom-badge>`,
+    })
+
+    await page.waitForChanges()
+
+    const badgeEl = page.root?.shadowRoot?.querySelector('ion-badge')
+
+    expect(badgeEl).toBeTruthy()
+  })
+
+  it('should render with default props', async () => {
+    const page = await newSpecPage({
+      components: [AtomBadge],
+      html: `<atom-badge type='primary'>Badge</atom-badge>`,
+    })
+
+    await page.waitForChanges()
+
+    expect(page.root).toEqualHtml(`
+      <atom-badge type='primary'>
+        <mock:shadow-root>
+        <ion-badge color='primary' class="atom-badge">
+          <slot></slot>
+        </ion-badge>
+        </mock:shadow-root>
+        Badge
+      </atom-badge>
+    `)
+  })
+
+  it('should add "ion-color-secondary" class when type prop is secondary', async () => {
+    const page = await newSpecPage({
+      components: [AtomBadge],
+      html: `<atom-badge type='secondary'>Badge</atom-badge>`,
+    })
+
+    await page.waitForChanges()
+
+    expect(page.root).toEqualHtml(`
+      <atom-badge type='secondary'>
+        <mock:shadow-root>
+        <ion-badge color='secondary' class="atom-badge">
+          <slot></slot>
+        </ion-badge>
+        </mock:shadow-root>
+        Badge
+      </atom-badge>
+    `)
+  })
+
+  it('should add "ion-color-tertiary" class when type prop is tertiary', async () => {
+    const page = await newSpecPage({
+      components: [AtomBadge],
+      html: `<atom-badge type='tertiary'>Badge</atom-badge>`,
+    })
+
+    await page.waitForChanges()
+
+    expect(page.root).toEqualHtml(`
+      <atom-badge type='tertiary'>
+        <mock:shadow-root>
+        <ion-badge color='tertiary' class="atom-badge">
+          <slot></slot>
+        </ion-badge>
+        </mock:shadow-root>
+        Badge
+      </atom-badge>
+    `)
+  })
+
+  it('should add "ion-color-success" class when type prop is success', async () => {
+    const page = await newSpecPage({
+      components: [AtomBadge],
+      html: `<atom-badge type='success'>Badge</atom-badge>`,
+    })
+
+    await page.waitForChanges()
+
+    expect(page.root).toEqualHtml(`
+      <atom-badge type='success'>
+        <mock:shadow-root>
+        <ion-badge color='success' class="atom-badge">
+          <slot></slot>
+        </ion-badge>
+        </mock:shadow-root>
+        Badge
+      </atom-badge>
+    `)
+  })
+
+  it('should add "ion-color-warning" class when type prop is warning', async () => {
+    const page = await newSpecPage({
+      components: [AtomBadge],
+      html: `<atom-badge type='warning'>Badge</atom-badge>`,
+    })
+
+    await page.waitForChanges()
+
+    expect(page.root).toEqualHtml(`
+      <atom-badge type='warning'>
+        <mock:shadow-root>
+        <ion-badge color='warning' class="atom-badge">
+          <slot></slot>
+        </ion-badge>
+        </mock:shadow-root>
+        Badge
+      </atom-badge>
+    `)
+  })
+
+  it('should add "ion-color-danger" class when type prop is danger', async () => {
+    const page = await newSpecPage({
+      components: [AtomBadge],
+      html: `<atom-badge type='danger'>Badge</atom-badge>`,
+    })
+
+    await page.waitForChanges()
+
+    expect(page.root).toEqualHtml(`
+      <atom-badge type='danger'>
+        <mock:shadow-root>
+        <ion-badge color='danger' class="atom-badge">
+          <slot></slot>
+        </ion-badge>
+        </mock:shadow-root>
+        Badge
+      </atom-badge>
+    `)
+  })
+
+  it('should add "ion-color-neutral" class when type prop is neutral', async () => {
+    const page = await newSpecPage({
+      components: [AtomBadge],
+      html: `<atom-badge type='neutral'>Badge</atom-badge>`,
+    })
+
+    await page.waitForChanges()
+
+    expect(page.root).toEqualHtml(`
+      <atom-badge type='neutral'>
+        <mock:shadow-root>
+        <ion-badge color='neutral' class="atom-badge">
+          <slot></slot>
+        </ion-badge>
+        </mock:shadow-root>
+        Badge
+      </atom-badge>
+    `)
+  })
+
+  it('should add "ion-color-dark" class when type prop is dark', async () => {
+    const page = await newSpecPage({
+      components: [AtomBadge],
+      html: `<atom-badge type='dark'>Badge</atom-badge>`,
+    })
+
+    await page.waitForChanges()
+
+    expect(page.root).toEqualHtml(`
+      <atom-badge type='dark'>
+        <mock:shadow-root>
+        <ion-badge color='dark' class="atom-badge">
+          <slot></slot>
+        </ion-badge>
+        </mock:shadow-root>
+        Badge
+      </atom-badge>
+    `)
+  })
+})

packages/core/src/components/badge/badge.tsx

@@ -0,0 +1,26 @@
+import { Component, Prop, h } from '@stencil/core'
+
+@Component({
+  tag: 'atom-badge',
+  styleUrl: 'badge.scss',
+  shadow: true,
+})
+export class AtomBadge {
+  @Prop() type:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'neutral'
+    | 'dark' = 'primary'
+
+  render() {
+    return (
+      <ion-badge color={this.type} class="atom-badge">
+        <slot />
+      </ion-badge>
+    )
+  }
+}

packages/core/src/components/badge/stories/badge.args.ts

@@ -0,0 +1,36 @@
+export const BadgeStoryArgs = {
+  decorators: [],
+  parameters: {
+    actions: {
+      handles: [],
+    },
+    docs: {
+      description: {
+        component:
+          'Badges are inline block elements that usually appear near another element. Read the [Ionic documentation](https://ionicframework.com/docs/api/Badge) for more information about this component.',
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'tertiary',
+        'success',
+        'warning',
+        'danger',
+        'neutral',
+        'dark',
+      ],
+      defaultValue: { summary: 'primary' },
+      description:
+        'The type of the badge, the component will receive the color according to its type.',
+    },
+    label: {
+      control: 'text',
+      description: 'The label of the badge',
+    },
+  },
+}

packages/core/src/components/badge/stories/badge.core.stories.tsx

@@ -0,0 +1,78 @@
+import { Meta, StoryObj } from '@storybook/web-components'
+
+import { html } from 'lit'
+
+import { BadgeStoryArgs } from './badge.args'
+
+export default {
+  title: 'Components/Badge',
+  ...BadgeStoryArgs,
+} as Meta
+
+const createBadge = (args) => {
+  return html` <atom-badge type="${args.type}"> ${args.label} </atom-badge> `
+}
+
+export const Primary: StoryObj = {
+  render: (args) => createBadge(args),
+  args: {
+    type: 'primary',
+    label: 'Badge',
+  },
+}
+
+export const Secondary: StoryObj = {
+  render: (args) => createBadge(args),
+  args: {
+    ...Primary.args,
+    type: 'secondary',
+  },
+}
+
+export const Tertiary: StoryObj = {
+  render: (args) => createBadge(args),
+  args: {
+    ...Primary.args,
+    type: 'tertiary',
+  },
+}
+
+export const Success: StoryObj = {
+  render: (args) => createBadge(args),
+  args: {
+    ...Primary.args,
+    type: 'success',
+  },
+}
+
+export const Warning: StoryObj = {
+  render: (args) => createBadge(args),
+  args: {
+    ...Primary.args,
+    type: 'warning',
+  },
+}
+
+export const Danger: StoryObj = {
+  render: (args) => createBadge(args),
+  args: {
+    ...Primary.args,
+    type: 'danger',
+  },
+}
+
+export const Neutral: StoryObj = {
+  render: (args) => createBadge(args),
+  args: {
+    ...Primary.args,
+    type: 'neutral',
+  },
+}
+
+export const Dark: StoryObj = {
+  render: (args) => createBadge(args),
+  args: {
+    ...Primary.args,
+    type: 'dark',
+  },
+}