feat: add OnyxTag component (#941)

Relates to #566

Add `OnyxTag` component

---------

Co-authored-by: nerdrun <[email protected]>

.changeset/fair-scissors-notice.md

@@ -0,0 +1,5 @@
+---
+"sit-onyx": minor
+---
+
+feat: add `OnyxTag` component

packages/sit-onyx/src/components/OnyxTag/OnyxTag.ct.tsx

@@ -0,0 +1,36 @@
+import { DENSITIES } from "../../composables/density";
+import { expect, test } from "../../playwright/a11y";
+import { executeMatrixScreenshotTest, mockPlaywrightIcon } from "../../playwright/screenshots";
+import { ONYX_COLORS } from "../../types/colors";
+import OnyxTag from "./OnyxTag.vue";
+
+test.describe("Screenshot tests", () => {
+  executeMatrixScreenshotTest({
+    name: "Tag",
+    columns: DENSITIES,
+    rows: ONYX_COLORS,
+    component: (column, row) => <OnyxTag label="Tag" density={column} color={row} />,
+  });
+
+  executeMatrixScreenshotTest({
+    name: "Tag (with icon)",
+    columns: DENSITIES,
+    rows: ONYX_COLORS,
+    component: (column, row) => (
+      <OnyxTag label="Tag" density={column} color={row} icon={mockPlaywrightIcon} />
+    ),
+  });
+});
+
+test("should truncate text", async ({ mount }) => {
+  const label = "Very long label that should be truncated";
+
+  // ARRANGE
+  const component = await mount(<OnyxTag label={label} style="max-width: 8rem;" />);
+
+  // ASSERT
+  await expect(component).toContainText(label);
+
+  // ASSERT
+  await expect(component).toHaveScreenshot("truncation.png");
+});

packages/sit-onyx/src/components/OnyxTag/OnyxTag.stories.ts

@@ -0,0 +1,63 @@
+import check from "@sit-onyx/icons/check.svg?raw";
+import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import {
+  createIconSourceCodeTransformer,
+  createTruncationDecorator,
+  defineIconSelectArgType,
+} from "../../utils/storybook";
+import OnyxTag from "./OnyxTag.vue";
+
+/**
+ * Tags are succinct textual labels that provide single-worded information or hints to their related parent element.
+ */
+const meta: Meta<typeof OnyxTag> = {
+  title: "components/Tag",
+  ...defineStorybookActionsAndVModels({
+    component: OnyxTag,
+    events: [],
+    argTypes: {
+      icon: defineIconSelectArgType(),
+    },
+  }),
+  parameters: {
+    docs: {
+      source: {
+        transform: createIconSourceCodeTransformer("icon"),
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof OnyxTag>;
+
+/**
+ * This example shows the tag in primary color.
+ */
+export const Primary = {
+  args: {
+    label: "Tag",
+  },
+} satisfies Story;
+
+/**
+ * This example shows the tag with an icon.
+ */
+export const WithIcon = {
+  args: {
+    label: "Done",
+    icon: check,
+    color: "success",
+  },
+} satisfies Story;
+
+/**
+ * This example shows the tag with truncation.
+ */
+export const WithTruncation = {
+  args: {
+    label: "Tag with a very long text that gets truncated",
+  },
+  decorators: createTruncationDecorator("10rem"),
+} satisfies Story;

packages/sit-onyx/src/components/OnyxTag/OnyxTag.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { useDensity } from "../../composables/density";
+import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
+import type { OnyxTagProps } from "./types";
+
+const props = withDefaults(defineProps<OnyxTagProps>(), {
+  color: "primary",
+});
+
+const { densityClass } = useDensity(props);
+</script>
+
+<template>
+  <div :class="['onyx-tag', `onyx-tag--${props.color}`, densityClass]">
+    <OnyxIcon v-if="props.icon" :icon="props.icon" size="16px" />
+    <span class="onyx-text onyx-truncation-ellipsis">{{ props.label }}</span>
+  </div>
+</template>
+
+<style lang="scss">
+@use "../../styles/mixins/density.scss";
+@use "../../styles/mixins/layers.scss";
+
+.onyx-tag {
+  @include density.compact {
+    --onyx-tag-padding: 0 var(--onyx-spacing-3xs);
+  }
+
+  @include density.default {
+    --onyx-tag-padding: var(--onyx-spacing-5xs) var(--onyx-spacing-2xs);
+  }
+
+  @include density.cozy {
+    --onyx-tag-padding: var(--onyx-spacing-4xs) var(--onyx-spacing-xs);
+  }
+
+  @include layers.component() {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--onyx-spacing-3xs);
+    max-width: 100%;
+    padding: var(--onyx-tag-padding);
+    border-radius: var(--onyx-radius-sm);
+    font-family: var(--onyx-font-family);
+
+    color: var(--onyx-tag-color);
+    border: var(--onyx-1px-in-rem) solid var(--onyx-tag-border-color);
+    background-color: var(--onyx-tag-background-color);
+
+    $colors: primary, secondary, neutral, danger, warning, success, info;
+
+    @each $color in $colors {
+      &--#{$color} {
+        --onyx-tag-background-color: var(--onyx-color-base-#{$color}-200);
+        --onyx-tag-border-color: var(--onyx-color-base-#{$color}-600);
+
+        @if $color == "neutral" {
+          // neutral does not have a bold color so we need to use medium here
+          --onyx-tag-color: var(--onyx-color-text-icons-neutral-medium);
+        } @else {
+          --onyx-tag-color: var(--onyx-color-text-icons-#{$color}-bold);
+        }
+      }
+    }
+  }
+}
+</style>

packages/sit-onyx/src/components/OnyxTag/types.ts

@@ -0,0 +1,17 @@
+import type { DensityProp } from "../../composables/density";
+import type { OnyxColor } from "../../types/colors";
+
+export type OnyxTagProps = DensityProp & {
+  /**
+   * The text content of the tag.
+   */
+  label: string;
+  /**
+   * The color of the tag.
+   */
+  color?: OnyxColor;
+  /**
+   * An icon which will be displayed on the left side of the label.
+   */
+  icon?: string;
+};

packages/sit-onyx/src/index.ts

@@ -57,6 +57,9 @@ export * from "./components/OnyxTable/types";
 export { default as OnyxTooltip } from "./components/OnyxTooltip/OnyxTooltip.vue";
 export * from "./components/OnyxTooltip/types";
 
+export { default as OnyxTag } from "./components/OnyxTag/OnyxTag.vue";
+export * from "./components/OnyxTag/types";
+
 export * from "./composables/density";
 export * from "./composables/scrollEnd";
 export type { OnyxTranslations, ProvideI18nOptions } from "./i18n";