@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.3

package/src/components/Tag/CHANGELOG.md

@@ -0,0 +1,93 @@
+# Tag Component Changelog
+
+## 1.0.0 | 9 July 2025
+
+### Overview
+
+The `Tag` component is a renamed and refactored version of the previous `Badge` component. It maintains the same core functionality while updating the naming to better reflect its purpose and usage in the design system.
+
+### Changes from Badge Component
+
+#### Renamed
+
+- Component renamed from `Badge` to `Tag` for better semantic clarity
+- CSS class prefix changed from `badge` to `tag`
+
+#### Removed
+
+- Removed `isRound` prop that was previously used for rounded styling
+
+#### New Features
+
+- Added support for different sizes with the `size` prop ("small" or "large")
+- Added a new `TagButton` component for action buttons
+- Added support for dismissible tags with `actionButton` prop
+- Added support for interactive tags that render as buttons when `onClick` is provided
+- Added new color options: yellow, green, and blue
+- Added support for disabled state with `isDisabled` prop
+- Added contextual accessibility through:
+  - Proper `aria-disabled` attribute handling
+  - Conditionally rendering as semantic button or span based on interaction needs
+  - Automatic prop forwarding to TagButton when used together
+
+### Implementation Changes
+
+- Complete rewrite of component rendering logic:
+  - Automatically renders as a `<button>` when `onClick` is provided
+  - Renders as a wrapper with both tag and action button when `actionButton` is provided
+  - Otherwise renders as a simple `<span>` element
+- Added forwarding of size and disabled state to action buttons
+- Implemented intelligent ref forwarding to the appropriate rendered element
+
+#### Maintained Features
+
+- Color variants: black, orange, success, info, warning, danger
+- Inverse styling with `isInverse` prop
+- Custom className support
+- Full HTML span element attribute support
+
+#### Interface
+
+- Completely restructured component interface using TypeScript discriminated unions:
+  - Created a base `CommonProps` interface with shared props
+  - Created specific `SpanProps` for regular tags (rendered as spans)
+  - Created specific `ButtonProps` for interactive tags (rendered as buttons)
+  - Combined as `TagProps = SpanProps | ButtonProps` for type safety
+- New props and types:
+  - `color?: TagColor` - Typesafe color options with const assertion
+  - `size?: "small" | "large"` - Dedicated TagSize type
+  - `isInverse?: boolean` - Toggle for inverse styling
+  - `isDisabled?: boolean` - Support for disabled state
+  - `className?: string` - Custom class support
+  - `children?: React.ReactNode` - Content inside the tag
+  - `actionButton?: React.ReactElement<TagButtonProps>` - Optional action button
+  - `onClick?: React.MouseEventHandler<HTMLButtonElement>` - Click handler (renders as button)
+
+### Usage Example
+
+```jsx
+// Basic usage
+<Tag>Default</Tag>
+
+// With color
+<Tag color="success">Success</Tag>
+
+// With size
+<Tag size="large">Large Tag</Tag>
+
+// With action button
+<Tag actionButton={<TagButton iconName="close" ariaLabel="Close" />}>
+  Dismissible Tag
+</Tag>
+
+// Interactive Tag
+<Tag onClick={() => console.log('Tag clicked')}>
+  Interactive Tag
+</Tag>
+
+// Inverse styling
+<Tag isInverse color="warning">Warning</Tag>
+
+// Disabled Tag
+<Tag isDisabled>Disabled Tag</Tag>
+```

package/src/components/Tag/Tag.mdx

@@ -0,0 +1,52 @@
+import { ComponentDocs, Code } from "@lighting-beetle/lighter-styleguide";
+
+import { Preview } from "../../styleguide/";
+import Tag, { colors } from "./Tag";
+import Icon from "../Icon";
+
+# Tag
+
+Tag is used to highlight short and concise information, usually one word. Breaks into multiple lines when necessary.
+
+<Preview>
+  <Tag>Short text</Tag>
+</Preview>
+
+## Color
+
+<Preview>
+  <ul className="list-unstyled">
+    <li>
+      <Tag>default</Tag>
+    </li>
+    {colors.map((color) => (
+      <li key={color}>
+        <Tag color={color}>{color}</Tag>
+      </li>
+    ))}
+  </ul>
+</Preview>
+
+## Round
+
+<Preview>
+  <Tag isRound>round</Tag>
+</Preview>
+
+## Text wrapping
+
+Tag content can span multiple lines. Use soft hyphens to control where the text can wrap.
+
+Our code preview does not show the soft hyphen character explicitly. The word markup is: `Naj&shy;ne&shy;zre&shy;vo&shy;lu&shy;cio&shy;na&shy;li&shy;zo&shy;va&shy;teľ&shy;nej&shy;šie&shy;mu`.
+
+<Preview>
+  <div style={{ width: "150px" }}>
+    <Tag className="text-wrap">
+      Naj&shy;ne&shy;zre&shy;vo&shy;lu&shy;cio&shy;na&shy;li&shy;zo&shy;va&shy;teľ&shy;nej&shy;šie&shy;mu
+    </Tag>
+  </div>
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Tag />" component={Tag} />

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import cx from "classnames";
+import { TagButtonProps } from "./TagButton";
+
+export const colors = [
+  "black",
+  "orange",
+  "yellow",
+  "green",
+  "blue",
+  "success",
+  "info",
+  "warning",
+  "danger",
+] as const;
+
+export type TagColor = (typeof colors)[number];
+export type TagSize = "small" | "large";
+
+interface CommonProps {
+  color?: TagColor;
+  size?: TagSize;
+  isInverse?: boolean;
+  isDisabled?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  actionButton?: React.ReactElement<TagButtonProps>;
+}
+
+type SpanProps = CommonProps &
+  Omit<React.HTMLAttributes<HTMLSpanElement>, keyof CommonProps> & {
+    onClick?: undefined;
+  };
+
+type ButtonProps = CommonProps &
+  Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps> & {
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+  };
+
+type TagProps = SpanProps | ButtonProps;
+
+export const CLASS_ROOT = "tag";
+
+const Tag = React.forwardRef<HTMLElement, TagProps>((props, ref) => {
+  const {
+    color,
+    size,
+    isInverse,
+    isDisabled,
+    className,
+    children,
+    actionButton,
+    ...other
+  } = props;
+
+  const classes = cx(CLASS_ROOT, className, {
+    "tag--inverse": isInverse,
+    [`tag--${color}`]: color,
+    [`tag--${size}`]: size,
+  });
+
+  if ("onClick" in props && props.onClick) {
+    const { onClick, ...buttonProps } =
+      other as React.ButtonHTMLAttributes<HTMLButtonElement>;
+    return (
+      <button
+        type="button"
+        className={classes}
+        onClick={onClick}
+        disabled={isDisabled ? true : undefined}
+        aria-disabled={isDisabled ? "true" : undefined}
+        ref={ref as React.Ref<HTMLButtonElement>}
+        {...buttonProps}
+      >
+        {children}
+      </button>
+    );
+  }
+
+  if ("actionButton" in props && actionButton) {
+    const spanProps = other as Omit<
+      React.HTMLAttributes<HTMLDivElement>,
+      "onClick"
+    >;
+    return (
+      <div
+        ref={ref as React.Ref<HTMLDivElement>}
+        className={`${CLASS_ROOT}__wrapper`}
+      >
+        <span
+          className={classes}
+          aria-disabled={isDisabled ? "true" : undefined}
+          {...spanProps}
+        >
+          {children}
+        </span>
+        {React.isValidElement(actionButton)
+          ? React.cloneElement(actionButton, { size, isDisabled })
+          : actionButton}
+      </div>
+    );
+  }
+
+  const spanProps = other as React.HTMLAttributes<HTMLSpanElement>;
+  return (
+    <span
+      className={classes}
+      ref={ref as React.Ref<HTMLSpanElement>}
+      {...spanProps}
+    >
+      {children} {actionButton}
+    </span>
+  );
+});
+
+Tag.displayName = "Tag";
+
+export { Tag };

package/src/components/Tag/TagButton.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import cx from "classnames";
+
+import { Icon } from "@/components/Icon";
+import { CLASS_ROOT } from "./Tag";
+
+export type TagButtonProps = {
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  children?: React.ReactNode;
+  isDisabled?: boolean;
+  ariaLabel?: string;
+  iconName: string;
+  size?: string; // Add size prop that will be passed from Tag component
+};
+
+const CLASS_NAME = `${CLASS_ROOT}__action`;
+
+const TagButton = React.forwardRef<HTMLButtonElement, TagButtonProps>(
+  (props, ref) => {
+    const {
+      className,
+      onClick,
+      isDisabled,
+      iconName,
+      ariaLabel,
+      size,
+      ...other
+    } = props;
+
+    const classes = cx(
+      CLASS_NAME,
+      {
+        [`${CLASS_NAME}--${size}`]: size,
+      },
+      className,
+    );
+
+    function iconSize() {
+      switch (size) {
+        case "large":
+          return "medium";
+        default:
+          return "small";
+      }
+    }
+
+    return (
+      <button
+        type="button"
+        className={classes}
+        onClick={onClick}
+        disabled={isDisabled ? true : undefined}
+        aria-disabled={isDisabled ? "true" : undefined}
+        aria-label={ariaLabel}
+        ref={ref}
+        {...other}
+      >
+        <Icon size={iconSize()} name={iconName} />
+      </button>
+    );
+  },
+);
+
+TagButton.displayName = "TagButton";
+
+export { TagButton };

package/src/components/Tag/index.ts

@@ -0,0 +1,5 @@
+import "./styles/style.scss";
+
+export { Tag } from "./Tag";
+export { TagButton } from "./TagButton";
+export type { TagColor, TagSize } from "./Tag";

package/src/components/Tag/styles/config.scss

@@ -0,0 +1,132 @@
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tools/convert";
+@use "sass:map";
+
+$tag: (
+  display: inline-flex,
+  vertical-align: baseline,
+  border-radius: 9999px,
+  box-decoration-break: clone,
+);
+
+$sizes: (
+  default: (
+    padding: convert.to-rem(7px) convert.to-rem(12px),
+    font-size: convert.to-rem(14px),
+    line-height: 1rem,
+    font-weight: 700,
+  ),
+  small: (
+    padding: convert.to-rem(2px) convert.to-rem(8px),
+    font-size: convert.to-rem(12px),
+    line-height: convert.to-rem(14px),
+    font-weight: 400,
+  ),
+  large: (
+    padding: convert.to-rem(12.5px) convert.to-rem(15px),
+    font-size: convert.to-rem(16px),
+    line-height: convert.to-rem(18px),
+    font-weight: 700,
+  ),
+);
+
+$icon-sizes: (
+  default: (
+    padding: convert.to-rem(7px),
+  ),
+  large: (
+    padding: convert.to-rem(9.5px),
+  ),
+);
+
+$colors: (
+  "default": (
+    background-color: var(--color-fill-subtle),
+    color: var(--color-text-default),
+  ),
+  "orange": (
+    background-color: map.get(color.$colors-light, icon-accent),
+    color: color.$black,
+  ),
+  "black": (
+    background-color: map.get(color.$colors-dark, border-subtle),
+    color: color.$white,
+  ),
+  "yellow": (
+    // TODO add to config
+    background-color: #fff6b6,
+    color: color.$black,
+  ),
+  "green": (
+    // TODO add to config
+    background-color: #b8ebd6,
+    color: color.$black,
+  ),
+  "blue": (
+    // TODO add to config
+    background-color: #b5e8f7,
+    color: color.$black,
+  ),
+  "success": (
+    background-color: map.get(color.$colors-light, icon-positive),
+    color: color.$white,
+  ),
+  "danger": (
+    background-color: map.get(color.$colors-light, icon-negative),
+    color: color.$white,
+  ),
+  "info": (
+    background-color: map.get(color.$colors-light, icon-information),
+    color: color.$white,
+  ),
+  "warning": (
+    background-color: map.get(color.$colors-light, icon-warning),
+    color: color.$black,
+  ),
+);
+
+$states: (
+  default: map.get($colors, "default"),
+  hover: (
+    color: var(--color-text-default),
+    background-color: var(--color-fill-disabled),
+  ),
+  active: (
+    color: var(--color-text-inverse),
+    background-color: var(--color-background-contrast),
+  ),
+  focus: (
+    color: map.get(map.get($colors, "default"), color),
+    background-color: map.get(map.get($colors, "default"), background-color),
+    outline: 2px solid var(--color-background-contrast) "!important",
+  ),
+  disabled: (
+    color: var(--color-text-disabled),
+    background-color: var(--color-fill-subtle),
+  ),
+);
+
+$icon-states: (
+  default: (
+    color: var(--color-text-default),
+    background-color: var(--color-fill-moderate),
+  ),
+  hover: (
+    color: var(--color-text-default),
+    background-color: var(--color-fill-disabled),
+  ),
+  active: (
+    color: var(--color-text-inverse),
+    background-color: var(--color-background-contrast),
+  ),
+  focus: (
+    color: map.get(map.get($colors, "default"), color),
+    background-color: map.get(map.get($colors, "default"), background-color),
+    outline: 2px solid var(--color-background-contrast) "!important",
+  ),
+  disabled: (
+    color: var(--color-fill-subtle),
+    background-color: var(--color-fill-moderate),
+  ),
+);

package/src/components/Tag/styles/mixins.scss

@@ -0,0 +1,54 @@
+@use "sass:map";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tools/convert";
+@use "./config";
+
+@mixin base($config: config.$tag) {
+  @include generate.css-map($config);
+}
+
+@mixin size($name, $config: config.$sizes) {
+  @include generate.css-map($config, $name);
+}
+
+@mixin color($color, $dark: false) {
+  $color-config: config.$colors;
+  $props: map.get($color-config, $color);
+  color: map.get($props, color);
+  background-color: map.get($props, background-color);
+}
+
+@mixin buttton-disabled($is-icon: false) {
+  $config: if($is-icon, config.$icon-states, config.$states);
+
+  &[aria-disabled="true"],
+  &[disabled] {
+    @include generate.css-map($config, "disabled");
+    cursor: not-allowed;
+  }
+}
+
+@mixin button($is-icon: false) {
+  $config: if($is-icon, config.$icon-states, config.$states);
+
+  @include generate.css-map($config, "default");
+
+  cursor: pointer;
+  outline-offset: 2px;
+
+  @media (hover: hover) {
+    &:hover {
+      @include generate.css-map($config, "hover");
+    }
+  }
+
+  &:focus-visible {
+    @include generate.css-map($config, "focus");
+  }
+
+  &:active,
+  &.is-active {
+    @include generate.css-map($config, "active");
+    z-index: 2;
+  }
+}

package/src/components/Tag/styles/style.scss

@@ -0,0 +1,69 @@
+@use "sass:map" as sass-map;
+@use "../../../styles/tools/generate";
+@use "../../../styles/tokens/color";
+@use "./config";
+@use "./mixins";
+
+@layer components {
+  .tag {
+    @include mixins.base();
+
+    @each $name, $props in config.$sizes {
+      &#{generate.variant-name($name)} {
+        @include mixins.size($name);
+      }
+    }
+
+    @each $variant, $props in config.$colors {
+      &#{generate.variant-name($variant)} {
+        @include mixins.color($variant);
+      }
+    }
+
+    &:where(button) {
+      @include mixins.button();
+      z-index: 2;
+    }
+
+    @include mixins.buttton-disabled();
+
+    &__wrapper {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+
+      .tag {
+        @each $name, $props in config.$sizes {
+          &#{generate.variant-name($name)} {
+            @if sass-map.has-key(config.$icon-sizes, $name) {
+              $icon-props: sass-map.get(config.$icon-sizes, $name);
+              $padding: sass-map.get($icon-props, padding);
+              padding-right: calc(#{$padding * 2 + 1.5rem}) !important;
+              margin-right: 0.5rem;
+            }
+          }
+        }
+      }
+    }
+
+    &__action {
+      @include mixins.base();
+      @include mixins.button(true);
+      @include mixins.buttton-disabled(true);
+
+      aspect-ratio: 1;
+      display: flex;
+      align-items: center;
+      border-radius: 9999px;
+      z-index: 2;
+
+      @each $name, $props in config.$icon-sizes {
+        &#{generate.variant-name($name)} {
+          $padding: sass-map.get($props, padding);
+          margin-left: calc(-#{$padding * 2 + 1.5rem}) !important;
+          @include mixins.size($name, config.$icon-sizes);
+        }
+      }
+    }
+  }
+}

package/src/components/Tag/tests/Tag.conformance.test.js

@@ -0,0 +1,44 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { colors } from "../Tag";
+import { Tag, TagButton } from "..";
+
+const sizes = ["small", "large"];
+
+const example = (
+  <>
+    {colors.map((color) => (
+      <Tag key={color} color={color}>
+        {color}
+      </Tag>
+    ))}
+
+    {sizes.map((size) => (
+      <Tag key={size} size={size}>
+        {size} size
+      </Tag>
+    ))}
+
+    <Tag actionButton={<TagButton iconName="close" ariaLabel="Close" />}>
+      With action button
+    </Tag>
+
+    <Tag
+      size="large"
+      actionButton={<TagButton iconName="close" ariaLabel="Close" />}
+    >
+      Large with action button
+    </Tag>
+  </>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate();
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});