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

package/src/components/Table/types.ts

@@ -0,0 +1,40 @@
+import React from "react";
+
+export interface CellValue {
+  value: React.ReactNode;
+  rawValue?: number | string;
+  [key: string]: any;
+}
+
+export interface TableHeader {
+  key: string;
+  label: React.ReactNode;
+  isSortable?: boolean;
+  sort?: "none" | "ascending" | "descending";
+  cellProps?: React.HTMLAttributes<HTMLTableCellElement>;
+  headCellProps?: React.HTMLAttributes<HTMLTableCellElement>;
+}
+
+export interface TableRow {
+  [key: string]: React.ReactNode | CellValue | TableRow[] | boolean | undefined;
+  expand?: TableRow[];
+  isExpanded?: boolean;
+  id?: string;
+}
+
+export interface ExpandableRowsCaptions {
+  header: string;
+  emptyRow: string;
+}
+
+export interface ExpandableRows {
+  hasExpandableRows: boolean;
+  expandableRowsCaptions?: ExpandableRowsCaptions;
+}
+
+export interface TableContextType {
+  headers: TableHeader[];
+  rows: TableRow[];
+  footers?: TableRow[];
+  expandableRows?: ExpandableRows;
+}

package/src/components/Tabs/Tabs.tsx

@@ -8,10 +8,8 @@ import { Tab } from "./Tab";
 import TabsStatic from "./Tabs.static";
 
 export const variants = ["standard", "light"] as const;
-export const colours = ["default", "inverse"] as const;
 
 export type TabsVariant = (typeof variants)[number];
-export type TabsColour = (typeof colours)[number];
 
 // Define the expected props for TabPanel children
 export interface TabPanelProps {
@@ -29,7 +27,7 @@ interface TabsProps extends React.HTMLAttributes<HTMLUListElement> {
   /** Additional classes for tabs header. */
   classesTabNav?: string;
   /** Color theme for the tabs */
-  colour?: TabsColour;
+  colorScheme?: "dark" | "light";
   /** All tabs have equal width inside a full-width container */
   hasEqualTabWidth?: boolean;
   /** Fullwidth container */
@@ -46,12 +44,12 @@ const Tabs: React.FC<TabsProps> = ({
   activeTabIndex = 0,
   className,
   classesTabNav,
-  colour = "default",
   isFullWidth,
   isLink,
   hasEqualTabWidth,
   variant = "standard",
   children,
+  colorScheme,
   ...other
 }) => {
   const CLASS_TABNAV = "tab-list";
@@ -60,8 +58,9 @@ const Tabs: React.FC<TabsProps> = ({
     CLASS_TABNAV,
     { [`${CLASS_TABNAV}--equal`]: hasEqualTabWidth },
     { [`${CLASS_TABNAV}--fullwidth`]: isFullWidth },
-    { [`${CLASS_TABNAV}--inverse`]: colour === "inverse" },
     { [`${CLASS_TABNAV}--light`]: variant === "light" },
+    { "is-dark": colorScheme === "dark" },
+    { "is-light": colorScheme === "light" },
     classesTabNav,
     className,
   );

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

@@ -1,78 +1,59 @@
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/convert';
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
 
 $outline-width: convert.to-rem(2px);
 $negative-outline-width: $outline-width * -1;
 
 $tablist-spacing: (
-  margin: $negative-outline-width $negative-outline-width (space.get() + $negative-outline-width) $negative-outline-width,
+  margin: $negative-outline-width $negative-outline-width
+    (
+      space.get() + $negative-outline-width,
+    )
+    $negative-outline-width,
   padding: $outline-width,
 );
 
 $tab: (
-  'default': (
-    default: (
-      color: color.$black,
-      box-shadow: inset 0 -2px 0 0 color.$black,
-    ),
-    active: (
-      color: color.$orange,
-      box-shadow: (
-        inset -2px 0 0 0 color.$black,
-        inset 0 2px 0 0 color.$black,
-        inset 2px 0 0 0 color.$black,
-      ),
-    ),
-    hover: (
-      color: color.$orange,
-    ),
-    disabled: (
-      color: color.$gray-500,
-    )
+  default: (
+    color: var(--color-text-default),
+    box-shadow: inset 0 -2px 0 0 var(--color-border-contrast),
   ),
-  'inverse': (
-    default: (
-      color: color.$white,
-      box-shadow: inset 0 -2px 0 0 color.$white,
-    ),
-    active: (
-      color: color.$orange,
-      box-shadow: (
-        inset -2px 0 0 0 color.$white,
-        inset 0 2px 0 0 color.$white,
-        inset 2px 0 0 0 color.$white,
-      ),
-    ),
-    hover: (
-      color: color.$orange,
+  active: (
+    color: var(--color-text-accent),
+    box-shadow: (
+      inset -2px 0 0 0 var(--color-border-contrast),
+      inset 0 2px 0 0 var(--color-border-contrast),
+      inset 2px 0 0 0 var(--color-border-contrast),
     ),
-    disabled: (
-      color: color.$gray-600,
-    )
+  ),
+  hover: (
+    color: var(--color-text-accent),
+  ),
+  disabled: (
+    color: var(--color-surface-moderate),
   ),
 );
 
 $tab-light: (
   default: (
-    box-shadow: none !important,
+    box-shadow: none "!important",
   ),
   active: (
-    box-shadow: inset 0 -4px 0 0 color.$orange !important,
+    box-shadow: inset 0 -4px 0 0 var(--color-border-accent) "!important",
   ),
   hover: (
-    box-shadow: none !important,
+    box-shadow: none "!important",
   ),
   disabled: (
-    box-shadow: none !important,
-  )
+    box-shadow: none "!important",
+  ),
 );
 
 $tab-sizes: (
   default: (
-    padding: space.get('small') space.get(),
+    padding: space.get("small") space.get(),
   ),
   large: (
-    padding: space.get('small') space.get(),
+    padding: space.get("small") space.get(),
   ),
 );

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

@@ -1,8 +1,7 @@
-@use './config';
-@use '../../../styles/tokens/base';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/color';
-@use '../../../styles/tools/generate';
+@use "./config";
+@use "../../../styles/tokens/base";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/generate";
 
 @mixin list-base($spacing: config.$tablist-spacing) {
   position: relative;
@@ -43,39 +42,35 @@
   @include base.focusring-flush;
 }
 
-@mixin color-variant($variant, $config: config.$tab) {
-  @include generate.css-map($config, $variant, 'default');
+@mixin color-variant($config: config.$tab) {
+  @include generate.css-map($config, "default");
 
-  &[aria-selected='true'] {
-    @include generate.css-map($config, $variant, 'active');
+  &[aria-selected="true"] {
+    @include generate.css-map($config, "active");
   }
 
   &:hover {
-    @include generate.css-map(config.$tab, $variant, 'hover');
+    @include generate.css-map(config.$tab, "hover");
   }
 
-  &[aria-disabled='true'] {
-    @include generate.css-map(config.$tab, $variant, 'disabled');
+  &[aria-disabled="true"] {
+    @include generate.css-map(config.$tab, "disabled");
   }
 }
 
-@mixin inverse-variant {
-  @include generate.css-map(config.$tab-light, 'default');  
-}
-
 @mixin tab-light {
-  @include generate.css-map(config.$tab-light, 'default');
+  @include generate.css-map(config.$tab-light, "default");
 
   &:hover {
-    @include generate.css-map(config.$tab-light, 'hover');
+    @include generate.css-map(config.$tab-light, "hover");
   }
 
-  &[aria-selected='true'] {
-    @include generate.css-map(config.$tab-light, 'active');
+  &[aria-selected="true"] {
+    @include generate.css-map(config.$tab-light, "active");
   }
-  
-  &[aria-disabled='true'] {
-    @include generate.css-map(config.$tab-light, 'disabled');
+
+  &[aria-disabled="true"] {
+    @include generate.css-map(config.$tab-light, "disabled");
   }
 }
 
@@ -90,15 +85,11 @@
 @mixin underline {
   flex: 1 1 auto;
   max-width: none;
-  box-shadow: inset 0 -2px 0 0 color.$black;
-}
-
-@mixin underline-inverse {
-  box-shadow: inset 0 -2px 0 0 color.$white;
+  box-shadow: inset 0 -2px 0 0 var(--color-border-contrast);
 }
 
 @mixin underline-light {
-  box-shadow: inset 0 -1px 0 0 color.$gray-500;
+  box-shadow: inset 0 -1px 0 0 var(--color-surface-moderate);
 }
 
 @mixin list-equal-item {

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

@@ -1,64 +1,56 @@
 @use "./config";
 @use "./mixins";
-@use "../../../styles/tokens/color";
 @use "../../../styles/tools/generate";
 @use "../../../styles/tokens/breakpoint";
 @use "../../../styles/typography/mixins" as typography;
 
-.tab-list {
-  $this: &;
+@layer components {
+  .tab-list {
+    $this: &;
 
-  @include typography.list-unstyled;
-  @include mixins.list-base;
+    @include typography.list-unstyled;
+    @include mixins.list-base;
 
-  &--equal {
-    @include mixins.list-equal;
-  }
-
-  &__item {
-    @include mixins.list-item;
-
-    #{$this}--equal & {
-      @include mixins.list-equal-item;
-    }
-
-    #{$this}--light & {
-      @include mixins.underline-light;
+    &--equal {
+      @include mixins.list-equal;
     }
-  }
 
-  &__tab {
-    @include mixins.tab;
-    @include mixins.color-variant("default");
+    &__item {
+      @include mixins.list-item;
 
-    @each $size, $props in config.$tab-sizes {
-      &#{generate.variant-name($size)} {
-        @include mixins.tab-size($size);
+      #{$this}--equal & {
+        @include mixins.list-equal-item;
       }
-    }
-    #{$this}--light & {
-      @include mixins.tab-light;
-    }
 
-    #{$this}--light#{$this}--equal & {
-      @include mixins.tab-centered;
+      #{$this}--light & {
+        @include mixins.underline-light;
+      }
     }
 
-    .bg-black &,
-    #{$this}--inverse & {
-      @include mixins.color-variant("inverse");
-    }
-  }
+    &__tab {
+      @include mixins.tab;
+      @include mixins.color-variant;
 
-  &__hr {
-    @include mixins.underline;
+      @each $size, $props in config.$tab-sizes {
+        &#{generate.variant-name($size)} {
+          @include mixins.tab-size($size);
+        }
+      }
+      #{$this}--light & {
+        @include mixins.tab-light;
+      }
 
-    #{$this}--light & {
-      @include mixins.underline-light;
+      #{$this}--light#{$this}--equal & {
+        @include mixins.tab-centered;
+      }
     }
 
-    #{$this}--inverse & {
-      @include mixins.underline-inverse;
+    &__hr {
+      @include mixins.underline;
+
+      #{$this}--light & {
+        @include mixins.underline-light;
+      }
     }
   }
 }

package/src/components/Tabs/tests/Tabs.unit.test.js

@@ -99,6 +99,14 @@ describe("rendering Tabs", () => {
         }
       }
     });
+    it("has class is-dark when colorScheme is set to dark", () => {
+      const { getByTestId } = render(<TabsExample colorScheme="dark" />);
+      expect(getByTestId("test-id")).toHaveClass("is-dark");
+    });
+    it("has class is-light when colorScheme is set to light", () => {
+      const { getByTestId } = render(<TabsExample colorScheme="light" />);
+      expect(getByTestId("test-id")).toHaveClass("is-light");
+    });
   });
   describe("checking fireEvents", () => {
     it("click in disabled tab button doesnt cause change", () => {

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 };