@orangesk/orange-design-system 2.0.0-beta.2 → 2.0.0-beta.21

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

@@ -25,13 +25,14 @@ import { Section } from "../";
  * - Screen reader compatibility
  *
  * 🎨 FUNCTIONAL BEHAVIOR
- * - Correct application of CSS classes (section, bg-*, section--*)
- * - All colors: white (default), gray, black, orange
+ * - Correct application of CSS classes (section, section--*)
+ * - All colors: background-primary (default), background-secondary, background-contrast, background-accent, etc.
  * - All spacing variants: default, small, xsmall
  * - Multiple props combinations
  * - Custom tag rendering (section, article, main, aside, header, footer)
  * - Passing through additional props (id, role, aria-*)
  * - Container integration and structure
+ * - Text inverse functionality for background-contrast
  *
  * 📝 CONTENT RENDERING
  * - Text children rendering through Container
@@ -72,7 +73,7 @@ describe("Section Conformance Tests", () => {
     it("is valid HTML with all props", () => {
       const { container } = render(
         <Section
-          color="gray"
+          color="background-secondary"
           spacing="small"
           tag="section"
           className="test-class"
@@ -121,7 +122,7 @@ describe("Section Conformance Tests", () => {
 
     it("is accessible with complex content", async () => {
       const { container } = render(
-        <Section color="gray" spacing="small">
+        <Section color="background-secondary" spacing="small">
           <header>
             <h1>Page Title</h1>
             <nav aria-label="Main navigation">
@@ -194,14 +195,15 @@ describe("Section Conformance Tests", () => {
       const { container } = render(<Section data-testid="test-section" />);
       const section = container.querySelector('[data-testid="test-section"]');
       expect(section).toHaveClass("section");
-      expect(section).not.toHaveClass("bg-white");
+      expect(section).not.toHaveClass("background-primary");
     });
 
     it("applies color classes correctly", () => {
       const colors = [
-        "gray",
-        "black",
-        "orange",
+        "background-secondary",
+        "background-accent",
+        "background-accent1-blog",
+        "background-accent2-blog",
         "accent1-blog",
         "accent2-blog",
       ];
@@ -210,10 +212,19 @@ describe("Section Conformance Tests", () => {
           <Section color={color} data-testid="test-section" />,
         );
         const section = container.querySelector('[data-testid="test-section"]');
-        expect(section).toHaveClass(`bg-${color}`);
+        expect(section).toHaveClass(color);
       });
     });
 
+    it("applies background-contrast with text-inverse correctly", () => {
+      const { container } = render(
+        <Section color="background-contrast" data-testid="test-section" />,
+      );
+      const section = container.querySelector('[data-testid="test-section"]');
+      expect(section).toHaveClass("background-contrast");
+      expect(section).toHaveClass("text-inverse");
+    });
+
     it("applies spacing classes correctly", () => {
       const spacings = ["default", "small", "xsmall"];
       spacings.forEach((spacing) => {
@@ -228,7 +239,7 @@ describe("Section Conformance Tests", () => {
     it("combines multiple props correctly", () => {
       const { container } = render(
         <Section
-          color="gray"
+          color="background-secondary"
           spacing="small"
           className="custom-class"
           data-testid="test-section"
@@ -236,7 +247,7 @@ describe("Section Conformance Tests", () => {
       );
       const section = container.querySelector('[data-testid="test-section"]');
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-gray");
+      expect(section).toHaveClass("background-secondary");
       expect(section).toHaveClass("section--small");
       expect(section).toHaveClass("custom-class");
     });
@@ -400,7 +411,7 @@ describe("Section Conformance Tests", () => {
       );
       const section = container.querySelector('[data-testid="test-section"]');
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-invalid-color");
+      expect(section).toHaveClass("invalid-color");
     });
 
     it("handles invalid spacing prop gracefully", () => {

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

@@ -38,12 +38,13 @@ import { Section } from "../Section";
  * - Multiple children
  *
  * 🎯 SPECIFIC FUNCTIONALITY
- * - Color prop behavior (white, gray, black, orange)
+ * - Color prop behavior (background-secondary, background-contrast, background-accent, etc.)
  * - Spacing prop behavior (default, small, xsmall)
  * - Tag prop behavior (div, section, article, etc.)
  * - ClassName prop merging
  * - Additional props spreading
  * - Container integration
+ * - Text inverse functionality for background-contrast
  *
  * ⚡ PERFORMANCE & OPTIMIZATION
  * - Component re-rendering
@@ -102,7 +103,7 @@ describe("Section Component Unit Tests", () => {
       const { getByTestId } = render(
         <Section
           data-testid="test-section"
-          color="gray"
+          color="background-secondary"
           spacing="small"
           className="custom-class"
         />,
@@ -156,72 +157,86 @@ describe("Section Component Unit Tests", () => {
   });
 
   describe("Color Prop Behavior", () => {
-    it("applies no background class for white color (default)", () => {
+    it("applies correct color class for background-secondary color", () => {
       const { getByTestId } = render(
-        <Section data-testid="test-section" color="white" />,
+        <Section data-testid="test-section" color="background-secondary" />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).not.toHaveClass("bg-white");
+      expect(section).toHaveClass("background-secondary");
     });
 
-    it("applies correct background class for gray color", () => {
+    it("applies correct color class and text-inverse for background-contrast color", () => {
       const { getByTestId } = render(
-        <Section data-testid="test-section" color="gray" />,
+        <Section data-testid="test-section" color="background-contrast" />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-gray");
+      expect(section).toHaveClass("background-contrast");
+      expect(section).toHaveClass("text-inverse");
     });
 
-    it("applies correct background class for black color", () => {
+    it("applies correct color class for background-accent color", () => {
       const { getByTestId } = render(
-        <Section data-testid="test-section" color="black" />,
+        <Section data-testid="test-section" color="background-accent" />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-black");
+      expect(section).toHaveClass("background-accent");
     });
 
-    it("applies correct background class for orange color", () => {
+    it("applies correct color class for background-accent1-blog color", () => {
       const { getByTestId } = render(
-        <Section data-testid="test-section" color="orange" />,
+        <Section data-testid="test-section" color="background-accent1-blog" />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-orange");
+      expect(section).toHaveClass("background-accent1-blog");
     });
 
-    it("applies correct background class for accent1-blog color", () => {
+    it("applies correct color class for background-accent2-blog color", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" color="background-accent2-blog" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("background-accent2-blog");
+    });
+
+    it("applies correct color class for accent1-blog color", () => {
       const { getByTestId } = render(
         <Section data-testid="test-section" color="accent1-blog" />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-accent1-blog");
+      expect(section).toHaveClass("accent1-blog");
     });
 
-    it("applies correct background class for accent2-blog color", () => {
+    it("applies correct color class for accent2-blog color", () => {
       const { getByTestId } = render(
         <Section data-testid="test-section" color="accent2-blog" />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-accent2-blog");
+      expect(section).toHaveClass("accent2-blog");
     });
 
     it("handles all color variants correctly", () => {
       const colors = [
-        "white",
-        "gray",
-        "black",
-        "orange",
+        "background-secondary",
+        "background-contrast",
+        "background-accent",
+        "background-accent1-blog",
+        "background-accent2-blog",
+        "background-none",
+        "surface-subtle",
         "accent1-blog",
         "accent2-blog",
       ];
@@ -234,10 +249,11 @@ describe("Section Component Unit Tests", () => {
 
         expect(section).toHaveClass("section");
 
-        if (color === "white") {
-          expect(section).not.toHaveClass("bg-white");
+        if (color === "background-contrast") {
+          expect(section).toHaveClass("background-contrast");
+          expect(section).toHaveClass("text-inverse");
         } else {
-          expect(section).toHaveClass(`bg-${color}`);
+          expect(section).toHaveClass(color);
         }
       });
     });
@@ -500,12 +516,16 @@ describe("Section Component Unit Tests", () => {
   describe("Props Combinations", () => {
     it("combines color and spacing props correctly", () => {
       const { getByTestId } = render(
-        <Section data-testid="test-section" color="gray" spacing="small" />,
+        <Section
+          data-testid="test-section"
+          color="background-secondary"
+          spacing="small"
+        />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-gray");
+      expect(section).toHaveClass("background-secondary");
       expect(section).toHaveClass("section--small");
     });
 
@@ -513,7 +533,7 @@ describe("Section Component Unit Tests", () => {
       const { getByTestId } = render(
         <Section
           data-testid="test-section"
-          color="black"
+          color="background-contrast"
           spacing="xsmall"
           tag="article"
         />,
@@ -522,7 +542,8 @@ describe("Section Component Unit Tests", () => {
 
       expect(section.tagName.toLowerCase()).toBe("article");
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-black");
+      expect(section).toHaveClass("background-contrast");
+      expect(section).toHaveClass("text-inverse");
       expect(section).toHaveClass("section--xsmall");
     });
 
@@ -530,7 +551,7 @@ describe("Section Component Unit Tests", () => {
       const { getByTestId } = render(
         <Section
           data-testid="test-section"
-          color="orange"
+          color="background-accent"
           spacing="default"
           tag="main"
           className="custom-class"
@@ -542,7 +563,7 @@ describe("Section Component Unit Tests", () => {
 
       expect(section.tagName.toLowerCase()).toBe("main");
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-orange");
+      expect(section).toHaveClass("background-accent");
       expect(section).toHaveClass("section--default");
       expect(section).toHaveClass("custom-class");
       expect(screen.getByText("Content")).toBeInTheDocument();
@@ -616,7 +637,7 @@ describe("Section Component Unit Tests", () => {
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-invalid-color");
+      expect(section).toHaveClass("invalid-color");
     });
 
     it("handles invalid spacing prop gracefully", () => {

package/src/components/SocialButton/SocialButton.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import cx from "classnames";
+import { Icon } from "../Icon";
+
+const CLASS_ROOT = "social-button";
+
+export type SocialName =
+  | "x"
+  | "facebook-2"
+  | "linkedin-2"
+  | "instagram"
+  | "pinterest"
+  | "snapchat"
+  | "tiktok"
+  | "whatsapp"
+  | "youtube"
+  | "email";
+
+type CommonProps = {
+  name: SocialName;
+  className?: string;
+};
+
+type ButtonProps = CommonProps &
+  Omit<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    "type" | keyof CommonProps
+  >;
+
+type LinkProps = CommonProps &
+  Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps> & {
+    href: string;
+  };
+
+export type SocialButtonProps = ButtonProps | LinkProps;
+
+export const SocialButton = React.forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
+  SocialButtonProps
+>(({ name, className, ...rest }, ref) => {
+  const props = rest as any;
+  const classes = cx(CLASS_ROOT, `${CLASS_ROOT}--${name}`, className);
+
+  if (!("href" in props)) {
+    return (
+      <button
+        ref={ref as React.Ref<HTMLButtonElement>}
+        className={classes}
+        {...props}
+      >
+        <Icon name={name} size="medium" />
+      </button>
+    );
+  } else {
+    return (
+      <a
+        ref={ref as React.Ref<HTMLAnchorElement>}
+        className={classes}
+        {...props}
+      >
+        <Icon name={name} size="medium" />
+      </a>
+    );
+  }
+});
+
+SocialButton.displayName = "SocialButton";

package/src/components/SocialButton/index.ts

@@ -0,0 +1 @@
+export { SocialButton } from "./SocialButton";

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

@@ -0,0 +1,172 @@
+@use "../../../styles/tokens/color";
+@use "../../../styles/tools/convert";
+
+$size: (
+  min-height: convert.to-rem(40px),
+  width: convert.to-rem(40px),
+  padding: 0,
+);
+
+// Social media brand colors for hover states
+$social-colors: (
+  "x": (
+    default: (
+      color: var(--color-text-default),
+      background-color: transparent,
+    ),
+    hover: (
+      color: color.$white "!important",
+      background-color: #067acc,
+      border-color: #067acc,
+    ),
+    pressed: (
+      color: var(--color-text-inverse) "!important",
+      background-color: var(--color-fill-contrast),
+      border-color: var(--color-border-contrast),
+    ),
+  ),
+  "facebook-2": (
+    default: (
+      color: var(--color-text-default),
+      background-color: transparent,
+    ),
+    hover: (
+      color: color.$white "!important",
+      background-color: #3b5998,
+      border-color: #3b5998,
+    ),
+    pressed: (
+      color: var(--color-text-inverse) "!important",
+      background-color: var(--color-fill-contrast),
+      border-color: var(--color-border-contrast),
+    ),
+  ),
+  "linkedin-2": (
+    default: (
+      color: var(--color-text-default),
+      background-color: transparent,
+    ),
+    hover: (
+      color: color.$white "!important",
+      background-color: #0077b5,
+      border-color: #0077b5,
+    ),
+    pressed: (
+      color: var(--color-text-inverse) "!important",
+      background-color: var(--color-fill-contrast),
+      border-color: var(--color-border-contrast),
+    ),
+  ),
+  "instagram": (
+    default: (
+      color: var(--color-text-default),
+      background-color: transparent,
+    ),
+    hover: (
+      color: color.$white "!important",
+      background-color: #e1306c,
+      border-color: #e1306c,
+    ),
+    pressed: (
+      color: var(--color-text-inverse) "!important",
+      background-color: var(--color-fill-contrast),
+      border-color: var(--color-border-contrast),
+    ),
+  ),
+  "pinterest": (
+    default: (
+      color: var(--color-text-default),
+      background-color: transparent,
+    ),
+    hover: (
+      color: color.$white "!important",
+      background-color: #e60023,
+      border-color: #e60023,
+    ),
+    pressed: (
+      color: var(--color-text-inverse) "!important",
+      background-color: var(--color-fill-contrast),
+      border-color: var(--color-border-contrast),
+    ),
+  ),
+  "snapchat": (
+    default: (
+      color: var(--color-text-default),
+      background-color: transparent,
+    ),
+    hover: (
+      color: #000000 "!important",
+      background-color: #fffc00,
+      border-color: #fffc00,
+    ),
+    pressed: (
+      color: var(--color-text-inverse) "!important",
+      background-color: var(--color-fill-contrast),
+      border-color: var(--color-border-contrast),
+    ),
+  ),
+  "tiktok": (
+    default: (
+      color: var(--color-text-default),
+      background-color: transparent,
+    ),
+    hover: (
+      color: color.$white "!important",
+      background-color: #ff2c55,
+      border-color: #ff2c55,
+    ),
+    pressed: (
+      color: var(--color-text-inverse) "!important",
+      background-color: var(--color-fill-contrast),
+      border-color: var(--color-border-contrast),
+    ),
+  ),
+  "whatsapp": (
+    default: (
+      color: var(--color-text-default),
+      background-color: transparent,
+    ),
+    hover: (
+      color: color.$white "!important",
+      background-color: #25d366,
+      border-color: #25d366,
+    ),
+    pressed: (
+      color: var(--color-text-inverse) "!important",
+      background-color: var(--color-fill-contrast),
+      border-color: var(--color-border-contrast),
+    ),
+  ),
+  "youtube": (
+    default: (
+      color: var(--color-text-default),
+      background-color: transparent,
+    ),
+    hover: (
+      color: color.$white "!important",
+      background-color: #ff0000,
+      border-color: #ff0000,
+    ),
+    pressed: (
+      color: var(--color-text-inverse) "!important",
+      background-color: var(--color-fill-contrast),
+      border-color: var(--color-border-contrast),
+    ),
+  ),
+  "email": (
+    default: (
+      color: var(--color-text-default),
+      background-color: transparent,
+    ),
+    hover: (
+      color: color.$white "!important",
+      background-color: #f16e00,
+      border-color: #f16e00,
+    ),
+    pressed: (
+      color: var(--color-text-inverse) "!important",
+      background-color: var(--color-fill-contrast),
+      border-color: var(--color-border-contrast),
+    ),
+  ),
+);

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