feat(sbb-badge): draft implementation

docs/GETTING_STARTED.md

@@ -208,6 +208,7 @@ However, if you like to more specifically pick what you need, consider the follo
 | `core.css`                      | Contains mandatory basics to use lyne-components (including design tokens).         |
 |                                 |                                                                                     |
 | `a11y.css`                      | Provides accessibility related CSS classes.                                         |
+| `badge.css`                     | Provides badge styling.                                                             |
 | `animation.css`                 | Provides CSS classes to disable animation (e.g. for testing).                       |
 | `layout.css`                    | Provides layout related CSS classes (e.g. page spacing, grid).                      |
 | `lists.css`                     | Provides CSS classes to style lists.                                                |

src/elements/core/styles/badge.scss

@@ -0,0 +1,28 @@
+@use './mixins/badge';
+
+[sbb-badge] {
+  --sbb-badge-position-offset: calc(var(--sbb-spacing-fixed-1x) * -1);
+
+  position: relative;
+
+  &::after {
+    @include badge.badge;
+
+    content: attr(sbb-badge);
+    position: absolute;
+    inset: var(--sbb-badge-position-block-start);
+    inset-block-start: var(--sbb-badge-position-offset);
+  }
+
+  &[sbb-badge-position~='before']::after {
+    inset-inline-start: var(--sbb-badge-position-offset);
+  }
+
+  &:where(:not([sbb-badge-position]), [sbb-badge-position~='after'])::after {
+    inset-inline-end: var(--sbb-badge-position-offset);
+  }
+
+  &[sbb-badge-position~='middle']::after {
+    inset-block-start: calc(50% + var(--sbb-spacing-fixed-2x) * -1);
+  }
+}

src/elements/core/styles/mixins/badge.scss

@@ -10,5 +10,6 @@
   border-radius: var(--sbb-border-radius-infinity);
   background-color: var(--sbb-color-red);
   color: var(--sbb-color-white);
-  min-width: fit-content;
+  min-width: var(--sbb-spacing-fixed-4x);
+  max-height: var(--sbb-spacing-fixed-4x);
 }

src/elements/core/styles/standard-theme.scss

@@ -4,6 +4,7 @@
 @use './core';
 @use './typography';
 @use './a11y';
+@use './badge';
 @use './animation';
 @use './layout';
 @use './lists';

src/elements/menu/common/menu-action.scss

@@ -100,7 +100,6 @@
 
   margin-inline-start: auto;
   width: var(--sbb-spacing-fixed-4x);
-  max-height: var(--sbb-spacing-fixed-4x);
 
   @include sbb.if-forced-colors {
     color: var(--sbb-menu-action-color);

src/elements/vite.config.ts

@@ -61,6 +61,7 @@ export default defineConfig((config) =>
                 ...buildStyleExports([
                   'a11y.css',
                   'animation.css',
+                  'badge.css',
                   'core.css',
                   'font-characters-extension.css',
                   'standard-theme.css',

src/storybook/styles/badge/badge.stories.ts

@@ -0,0 +1,106 @@
+import type { InputType } from '@storybook/types';
+import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
+
+import '../../../elements/header.js';
+import '../../../elements/icon.js';
+import '../../../elements/link.js';
+
+import readme from './readme.md?raw';
+
+const badgeContent: InputType = {
+  control: {
+    type: 'text',
+  },
+};
+
+const badgePosition: InputType = {
+  control: {
+    type: 'select',
+  },
+  options: ['before', 'middle', 'after'],
+};
+
+const defaultArgTypes: ArgTypes = {
+  badgeContent,
+  badgePosition,
+};
+
+const defaultArgs: Args = {
+  badgeContent: '3',
+  badgePosition: 'after',
+};
+
+const BadgeOnIconTemplate = ({ badgeContent, badgePosition }: Args): TemplateResult => html`
+  <sbb-icon
+    sbb-badge=${badgeContent}
+    sbb-badge-position=${badgePosition}
+    name="controls-small"
+  ></sbb-icon>
+`;
+
+const BadgeOnHeaderButtonTemplate = ({ badgeContent, badgePosition }: Args): TemplateResult => html`
+  <sbb-header-button>
+    <sbb-icon
+      slot="icon"
+      sbb-badge=${badgeContent}
+      sbb-badge-position=${badgePosition}
+      name="user-small"
+    ></sbb-icon>
+    User menu
+  </sbb-header-button>
+`;
+
+const BadgeOnLinkTemplate = ({ badgeContent, badgePosition }: Args): TemplateResult => html`
+  <sbb-link href="https://www.sbb.ch" sbb-badge=${badgeContent} sbb-badge-position=${badgePosition}>
+    Link
+  </sbb-link>
+`;
+
+export const BadgeOnIcon: StoryObj = {
+  render: BadgeOnIconTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
+};
+
+export const BadgeOnIconBefore: StoryObj = {
+  render: BadgeOnIconTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, badgePosition: 'before' },
+};
+
+export const BadgeOnIconMiddle: StoryObj = {
+  render: BadgeOnIconTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, badgePosition: 'middle' },
+};
+
+export const BadgeOnHeaderButton: StoryObj = {
+  render: BadgeOnHeaderButtonTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
+};
+
+export const BadgeOnLink: StoryObj = {
+  render: BadgeOnLinkTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
+};
+
+export const BadgeOnIconLong: StoryObj = {
+  render: BadgeOnIconTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, badgeContent: '99' },
+};
+
+const meta: Meta = {
+  parameters: {
+    docs: {
+      extractComponentDescription: () => readme,
+    },
+  },
+  title: 'styles/badge',
+};
+
+export default meta;

src/storybook/styles/badge/readme.md

@@ -0,0 +1,19 @@
+## Badge
+
+The badge can be applied to an existing component / element.
+Therefore, it can't be an own component and is provided as attribute.
+
+### API
+
+| CSS attribute name   | Type                        | Description                                                                  |
+| -------------------- | --------------------------- | ---------------------------------------------------------------------------- |
+| `sbb-badge`          | `string`                    | Content displayed in badge.                                                  |
+| `sbb-badge-position` | `before \| middle \| after` | Positioning of the badge relative to the element where the badge is applied. |
+
+Moreover, we provide the SASS mixin `badge` which contains the badge styling for general usage.
+
+### Usage
+
+```html
+<sbb-icon icon-name="controls-small" sbb-badge="2" sbb-badge-position="after"></sbb-icon>
+```

tools/vite/typography.ts

@@ -16,6 +16,7 @@ export function typography(): PluginOption {
       [
         { inputName: 'core/styles/a11y.scss', outputName: 'a11y.css' },
         { inputName: 'core/styles/animation.scss', outputName: 'animation.css' },
+        { inputName: 'core/styles/badge.scss', outputName: 'badge.css' },
         { inputName: 'core/styles/core.scss', outputName: 'core.css' },
         {
           inputName: 'core/styles/font-characters-extension.scss',

tsconfig.json

@@ -57,6 +57,8 @@
         },
         "globalAttributes": [
           "align-self",
+          "sbb-badge",
+          "sbb-badge-position",
           "sbb-dialog-close",
           "sbb-navigation-close",
           "sbb-navigation-section-close",