@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

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

@@ -0,0 +1,42 @@
+@use "sass:map" as sass-map;
+@use "../../../styles/tools/generate";
+@use "./config";
+
+/// Applies base social button styles
+@mixin base() {
+  border: 2px solid var(--color-border-contrast);
+  border-radius: 100%;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: baseline;
+  cursor: pointer;
+  flex: 0 0 auto;
+  line-height: 0;
+}
+
+/// Applies size to social button
+@mixin size($config: config.$size) {
+  @include generate.css-map($config);
+}
+
+/// Applies color variant based on social media type
+@mixin color($name, $colors: config.$social-colors) {
+  $variant: sass-map.get($colors, $name);
+
+  @include generate.css-map($variant, "default");
+
+  @media (hover: hover) {
+    &:hover {
+      @include generate.css-map($variant, "hover");
+    }
+  }
+
+  &:active,
+  &.is-active {
+    @include generate.css-map($variant, "pressed");
+  }
+}

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

@@ -0,0 +1,16 @@
+@use "../../../styles/tools/generate";
+@use "./config";
+@use "./mixins";
+
+@layer components {
+  .social-button {
+    @include mixins.base;
+    @include mixins.size;
+  }
+
+  @each $name, $props in config.$social-colors {
+    .social-button--#{$name} {
+      @include mixins.color($name);
+    }
+  }
+}

package/src/components/SocialButton/tests/SocialButton.unit.test.jsx

@@ -0,0 +1,162 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { render } from "@testing-library/react";
+import React from "react";
+
+import { SocialButton } from "../";
+
+describe("rendering SocialButton", () => {
+  describe("initial state", () => {
+    it("renders as button element by default", () => {
+      const { getByRole } = render(<SocialButton name="x" />);
+      const button = getByRole("button");
+      expect(button).toBeInTheDocument();
+      expect(button.tagName).toBe("BUTTON");
+    });
+
+    it("has default class social-button", () => {
+      const { getByRole } = render(<SocialButton name="x" />);
+      expect(getByRole("button")).toHaveClass("social-button");
+    });
+
+    it("has social platform class", () => {
+      const { getByRole } = render(<SocialButton name="x" />);
+      expect(getByRole("button")).toHaveClass("social-button--x");
+    });
+
+    it("renders Icon component", () => {
+      const { getByRole } = render(<SocialButton name="x" />);
+      const icon = getByRole("button").querySelector("svg");
+      expect(icon).toBeInTheDocument();
+    });
+  });
+
+  describe("passed props - button", () => {
+    it("renders different social platform classes", () => {
+      const platforms = [
+        "x",
+        "facebook-2",
+        "linkedin",
+        "instagram-2",
+        "pinterest",
+        "snapchat",
+        "tiktok",
+        "whatsapp",
+        "youtube",
+        "email",
+      ];
+
+      platforms.forEach((platform) => {
+        const { getByRole, unmount } = render(<SocialButton name={platform} />);
+        expect(getByRole("button")).toHaveClass(`social-button--${platform}`);
+        unmount();
+      });
+    });
+
+    it("adds custom className", () => {
+      const { getByRole } = render(
+        <SocialButton name="x" className="custom-class" />,
+      );
+      expect(getByRole("button")).toHaveClass("custom-class");
+      expect(getByRole("button")).toHaveClass("social-button");
+    });
+
+    it("passes onClick handler", () => {
+      const onClick = vi.fn();
+      const { getByRole } = render(<SocialButton name="x" onClick={onClick} />);
+      getByRole("button").click();
+      expect(onClick).toHaveBeenCalled();
+    });
+
+    it("passes data-testid attribute", () => {
+      const { getByTestId } = render(
+        <SocialButton name="x" data-testid="social-btn" />,
+      );
+      expect(getByTestId("social-btn")).toBeInTheDocument();
+    });
+
+    it("accepts aria-label attribute", () => {
+      const { getByRole } = render(
+        <SocialButton name="x" aria-label="Follow us on X" />,
+      );
+      expect(
+        getByRole("button", { name: "Follow us on X" }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("passed props - anchor", () => {
+    it("renders as anchor element when href is provided", () => {
+      const { getByRole } = render(
+        <SocialButton name="x" href="https://x.com" />,
+      );
+      const link = getByRole("link");
+      expect(link).toBeInTheDocument();
+      expect(link.tagName).toBe("A");
+    });
+
+    it("has href attribute", () => {
+      const { getByRole } = render(
+        <SocialButton name="x" href="https://x.com" />,
+      );
+      expect(getByRole("link")).toHaveAttribute("href", "https://x.com");
+    });
+
+    it("has social platform class as anchor", () => {
+      const { getByRole } = render(
+        <SocialButton name="facebook-2" href="https://facebook.com" />,
+      );
+      expect(getByRole("link")).toHaveClass("social-button--facebook-2");
+    });
+
+    it("passes target attribute", () => {
+      const { getByRole } = render(
+        <SocialButton name="x" href="https://x.com" target="_blank" />,
+      );
+      expect(getByRole("link")).toHaveAttribute("target", "_blank");
+    });
+
+    it("passes rel attribute", () => {
+      const { getByRole } = render(
+        <SocialButton
+          name="x"
+          href="https://x.com"
+          rel="noopener noreferrer"
+        />,
+      );
+      expect(getByRole("link")).toHaveAttribute("rel", "noopener noreferrer");
+    });
+
+    it("adds custom className to anchor", () => {
+      const { getByRole } = render(
+        <SocialButton name="x" href="https://x.com" className="custom-link" />,
+      );
+      expect(getByRole("link")).toHaveClass("custom-link");
+      expect(getByRole("link")).toHaveClass("social-button");
+    });
+
+    it("renders Icon component in anchor", () => {
+      const { getByRole } = render(
+        <SocialButton name="x" href="https://x.com" />,
+      );
+      const icon = getByRole("link").querySelector("svg");
+      expect(icon).toBeInTheDocument();
+    });
+  });
+
+  describe("ref forwarding", () => {
+    it("forwards ref to button element", () => {
+      const ref = React.createRef();
+      render(<SocialButton name="x" ref={ref} />);
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    });
+
+    it("forwards ref to anchor element", () => {
+      const ref = React.createRef();
+      render(<SocialButton name="x" href="https://x.com" ref={ref} />);
+      expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
+    });
+  });
+});

package/src/components/Stepbar/Stepbar.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 export const showTitlesFromOptions = ["md", "lg", "xl"] as const;
 export const variantOptions = ["default", "inverse"] as const;
@@ -19,8 +19,6 @@ export interface StepbarProps extends React.HTMLAttributes<HTMLElement> {
   showTitlesFrom?: ShowTitlesFrom;
   /** Array of step objects */
   steps: StepbarStep[];
-  /** Visual variant of the stepbar */
-  colorScheme?: "dark" | "light";
 }
 
 const CLASS_ROOT = "stepbar";
@@ -29,7 +27,6 @@ const Stepbar: React.FC<StepbarProps> = ({
   showTitlesFrom,
   steps,
   label = "krok",
-  colorScheme,
   className,
   ...other
 }) => {
@@ -68,8 +65,6 @@ const Stepbar: React.FC<StepbarProps> = ({
       className={cx(
         CLASS_ROOT,
         {
-          "is-dark": colorScheme === "dark",
-          "is-light": colorScheme === "light",
           [`${CLASS_ROOT}--wide-${showTitlesFrom}`]: showTitlesFrom,
         },
         className,

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

@@ -5,10 +5,14 @@
 $item-base: (
   display: inline-flex,
   align-items: center,
-  padding-top: space.get("small"),
-  padding-bottom: space.get("small"),
+  padding-top: convert.to-rem(10px),
+  padding-bottom: convert.to-rem(10px),
   margin: 0 0 0 space.get("xsmall"),
-  color: var(--color-text-default),
+  color: var(--stepbar-item-color),
+  background: var(--stepbar-item-background),
+  --stepbar-arrow-size: #{convert.to-rem(21px)},
+  --stepbar-item-background: var(--color-surface-contrast),
+  --stepbar-item-color: var(--color-text-inverse),
 );
 
 $arrow-spacing-small: (
@@ -26,8 +30,8 @@ $arrow-spacing-small: (
 
 $arrow-spacing: (
   default: (
-    padding-left: convert.to-rem(40px),
-    padding-right: convert.to-rem(19px),
+    padding-left: convert.to-rem(35px),
+    padding-right: convert.to-rem(30px),
   ),
   first: (
     padding-left: convert.to-rem(35px),
@@ -40,43 +44,56 @@ $arrow-spacing: (
 $arrows: (
   default: (
     done:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23141414'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='%23141414'/%3E%3C/svg%3E"),
     current:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23F16E00'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='%23f15e00'/%3E%3C/svg%3E"),
     next:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23eee'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='%23dddddd'/%3E%3C/svg%3E"),
   ),
   inverse: (
     done:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='white'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='white'/%3E%3C/svg%3E"),
     current:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23F16E00'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='%23f15e00'/%3E%3C/svg%3E"),
     next:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23eee'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='%23595959'/%3E%3C/svg%3E"),
   ),
 );
 
 $item-done-colors: (
   default: (
-    background: var(--color-surface-contrast),
+    --stepbar-item-background: var(--color-surface-contrast),
+    --stepbar-item-color: var(--color-text-inverse),
+  ),
+  inverse: (
+    --stepbar-item-background: var(--color-surface-contrast),
+    --stepbar-item-color: var(--color-text-inverse),
   ),
 );
 
 $item-colors: (
   current: (
-    background: var(--color-surface-tertiary),
-    color: var(--color-text-default),
+    --stepbar-item-background: var(--color-surface-tertiary),
+    --stepbar-item-color: #{color.$white},
   ),
   next: (
-    background: var(--color-surface-subtle),
-    color: var(--color-surface-contrast),
+    --stepbar-item-background: var(--color-surface-moderate),
+    --stepbar-item-color: var(--color-text-default),
   ),
 );
 
 $link-colors: (
   default: (
     base: (
-      color: var(--color-text-inverse),
+      color: var(--stepbar-item-color),
+    ),
+    interaction: (
+      color: var(--color-text-accent),
+    ),
+  ),
+  inverse: (
+    base: (
+      color: var(--stepbar-item-color),
     ),
     interaction: (
       color: var(--color-text-accent),

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

@@ -4,7 +4,7 @@
 @use "../../../styles/tools/generate";
 @use "../../../styles/tools/map";
 @use "../../../styles/tokens/breakpoint";
-@use "../../../styles/typography/mixins" as typoMixins;
+@use "../../../styles/typography/config" as typographyConfig;
 @use "./config";
 
 @mixin list-base {
@@ -12,8 +12,9 @@
   flex-wrap: nowrap;
   list-style-type: none;
   padding-left: 0;
-  margin: 0 0 space.get() 0;
+  margin: 0 0 space.get("large") 0;
   max-width: none;
+  @include generate.css-map(sass-map.get(typographyConfig.$caption, "large"));
   font-weight: bold;
 }
 
@@ -65,10 +66,11 @@
     position: absolute;
     z-index: 1;
     top: 0;
-    right: -21px;
-    width: 21px;
+    right: calc(var(--stepbar-arrow-size) * -1);
+    width: var(--stepbar-arrow-size);
     height: 100%;
     background-size: 100% 100%;
+    pointer-events: none;
   }
 }
 

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

@@ -37,7 +37,8 @@
         @include mixins.item-color("default", "next");
       }
 
-      .bg-black &,
+      .background-contrast &,
+      .surface-contrast &,
       .is-dark & {
         @include mixins.item-color("inverse", "done");
 
@@ -68,7 +69,8 @@
       @include mixins.link-overlay();
       @include mixins.link-underline();
 
-      .bg-black &,
+      .background-contrast &,
+      .surface-contrast &,
       .is-dark & {
         @include mixins.link-color("inverse");
       }

package/src/components/Stepbar/tests/{Stepbar.conformance.test.js → Stepbar.conformance.test.jsx}

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from "vitest-axe";
 
 import { Stepbar } from "../";
 

package/src/components/Sticker/Sticker.tsx

@@ -1,24 +1,30 @@
-import React from 'react';
-import cx from 'classnames';
+import cx from "classnames";
+import React from "react";
 
 interface StickerProps {
-  color?: 'black' | 'orange';
-  size?: 'small';
+  color?: "black" | "orange";
+  size?: "small";
   children?: React.ReactNode;
   className?: string;
   [key: string]: any;
 }
 
-const CLASS_ROOT = 'sticker';
+const CLASS_ROOT = "sticker";
 
-export const Sticker: React.FC<StickerProps> = ({ color, size, children, className, ...other }) => {
+export const Sticker: React.FC<StickerProps> = ({
+  color,
+  size,
+  children,
+  className,
+  ...other
+}) => {
   const classes = cx(
     CLASS_ROOT,
     {
       [`${CLASS_ROOT}--${color}`]: color,
       [`${CLASS_ROOT}--${size}`]: size,
     },
-    className
+    className,
   );
 
   return (
@@ -28,4 +34,4 @@ export const Sticker: React.FC<StickerProps> = ({ color, size, children, classNa
   );
 };
 
-Sticker.displayName = 'Sticker';
+Sticker.displayName = "Sticker";

package/src/components/Sticker/index.ts

@@ -1,2 +1,3 @@
 import { Sticker } from "./Sticker";
+
 export { Sticker };

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

@@ -1,5 +1,5 @@
-@use '../../../styles/tools/generate';
-@use './config';
+@use "../../../styles/tools/generate";
+@use "./config";
 
 @mixin base() {
   position: relative;

package/src/components/Sticker/tests/Sticker.conformance.test.jsx

@@ -0,0 +1,16 @@
+import { render } from "@testing-library/react";
+import { axe } from "vitest-axe";
+
+import { Sticker } from "../";
+
+const example = <Sticker color="black">Black sticker</Sticker>;
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate();
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

package/src/components/Sticker/tests/Sticker.unit.test.jsx

@@ -0,0 +1,39 @@
+import { render } from "@testing-library/react";
+
+import { Sticker } from "../Sticker";
+
+describe("rendering Sticker", () => {
+  describe("initial state", () => {
+    it("has default class sticker", () => {
+      const { getByTestId } = render(<Sticker data-testid="test-id" />);
+      expect(getByTestId("test-id")).toHaveClass("sticker");
+    });
+  });
+
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByText } = render(<Sticker>test</Sticker>);
+      expect(getByText("test")).toBeInTheDocument();
+    });
+
+    it("has class test-class when className is set to test-class", () => {
+      const { getByTestId } = render(
+        <Sticker data-testid="test-id" className="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+    ["black", "orange"].map((color) => {
+      it(`has sticker--${color} class when color is ${color}`, () => {
+        const { container } = render(<Sticker color={color} />);
+        expect(
+          container.getElementsByClassName(`sticker--${color}`).length,
+        ).toBe(1);
+      });
+    });
+
+    it("has sticker--small class when size is small", () => {
+      const { container } = render(<Sticker size="small" />);
+      expect(container.getElementsByClassName("sticker--small").length).toBe(1);
+    });
+  });
+});

package/src/components/Table/Header.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import React from "react";
-
-import TableContext from "./TableContext";
 import { Cell } from "./Cell";
+import TableContext from "./TableContext";
 import { TableHeader } from "./types";
 
 interface SortOptions {

package/src/components/Table/Row.tsx

@@ -4,9 +4,8 @@ import React from "react";
 
 import { Button } from "../Button/";
 import { Icon } from "../Icon/";
-
-import TableContext from "./TableContext";
 import { Cell } from "./Cell";
+import TableContext from "./TableContext";
 import { TableRow } from "./types";
 
 interface RowProps {
@@ -14,8 +13,9 @@ interface RowProps {
 }
 
 const Row = ({ row }: RowProps) => {
-  const { headers, expandableRows } = React.useContext(TableContext);
-  return headers.map(({ key, cellProps }, index, array) => {
+  const { headers, expandableRows, isResponsive } =
+    React.useContext(TableContext);
+  return headers.map(({ key, label, cellProps }, index, array) => {
     const cell = row[key];
     const isObject = typeof cell === "object" && cell !== null;
     const value = isObject && "value" in cell ? cell.value : cell;
@@ -26,9 +26,14 @@ const Row = ({ row }: RowProps) => {
             .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
         : {};
     const rl = row?.expand?.length || 0;
+
     return (
       <React.Fragment key={key}>
-        <Cell {...cellProps} {...props}>
+        <Cell
+          {...cellProps}
+          {...props}
+          {...(isResponsive && { "data-label": label })}
+        >
           {value ? (value as React.ReactNode) : ""}
         </Cell>
         {index === array.length - 1 &&

package/src/components/Table/Rows.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import React from "react";
-
-import TableContext from "./TableContext";
 import { Row } from "./Row";
+import TableContext from "./TableContext";
 import { TableRow } from "./types";
 
 const Rows: React.FC = () => {