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

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

@@ -1,4 +1,5 @@
 @use "../../../styles/tokens/space";
+@use "../../../styles/tokens/color";
 @use "../../../styles/tools/convert";
 
 $base: (
@@ -6,7 +7,6 @@ $base: (
     border: 2px solid transparent,
     font-size: convert.to-rem(18px),
     font-weight: bold,
-    line-height: normal,
     border-radius: convert.to-rem(5px),
   ),
   active: (
@@ -46,7 +46,7 @@ $variants: (
       border-color: transparent,
     ),
     active: (
-      color: var(--color-text-inverse),
+      color: color.$white,
       background-color: var(--color-fill-tertiary),
       border-color: transparent,
     ),
@@ -58,7 +58,7 @@ $variants: (
   ),
   "primary": (
     default: (
-      color: var(--color-text-inverse),
+      color: color.$white,
       background-color: var(--color-fill-tertiary),
       border-color: transparent,
     ),
@@ -73,7 +73,7 @@ $variants: (
       border-color: var(--color-border-contrast),
     ),
     disabled: (
-      color: var(--color-text-inverse),
+      color: color.$white,
       background-color: var(--color-fill-disabled),
       border-color: var(--color-fill-disabled),
     ),
@@ -90,7 +90,7 @@ $variants: (
       border-color: var(--color-border-contrast),
     ),
     active: (
-      color: var(--color-text-inverse),
+      color: color.$white,
       background-color: var(--color-fill-tertiary),
       border-color: transparent,
     ),

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

@@ -47,7 +47,7 @@
 
 // Layout rules. Adds space between adjacent buttons and applies vertical spacing after a button.
 @mixin layout {
-  margin-bottom: space.get();
+  margin-bottom: space.get("large");
 
   &:not(:last-of-type) {
     margin-right: space.get("small");
@@ -153,3 +153,8 @@
     cursor: not-allowed;
   }
 }
+
+@mixin preserve-width {
+  width: initial !important;
+  min-width: initial !important;
+}

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

@@ -43,4 +43,8 @@
   .btn--large .icon--large {
     @include mixins.large-button-large-icon-size-fix();
   }
+
+  .btn--preserve-width {
+    @include mixins.preserve-width;
+  }
 }

package/src/components/Button/tests/Button.test.js

@@ -69,16 +69,6 @@ describe("rendering", () => {
       expect(getByText("Button")).toHaveClass("is-active");
     });
 
-    it("has is-dark class when colorScheme is dark", () => {
-      const { getByText } = render(<Button colorScheme="dark">Button</Button>);
-      expect(getByText("Button")).toHaveClass("is-dark");
-    });
-
-    it("has is-light class when colorScheme is light", () => {
-      const { getByText } = render(<Button colorScheme="light">Button</Button>);
-      expect(getByText("Button")).toHaveClass("is-light");
-    });
-
     it("has btn--square class when squared", () => {
       const { getByText } = render(<Button isSquare>Button</Button>);
       expect(getByText("Button")).toHaveClass("btn--square");

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

@@ -10,7 +10,7 @@
   display: flex;
   flex-flow: row wrap;
   max-width: calc(100% - #{$spacing});
-  margin: ($spacing * -1) ($spacing * -1) space.get() 0;
+  margin: ($spacing * -1) ($spacing * -1) space.get("large") 0;
 
   #{$button-selector},
   #{$button-selector}:last-child,

package/src/components/Card/Card.tsx

@@ -1,22 +1,39 @@
 import React from "react";
 import cx from "classnames";
 
-export const cardColors = ["white", "black", "orange"] as const;
+export const cardColors = [
+  "background-primary",
+  "background-secondary",
+  "background-contrast",
+  "background-accent",
+  "background-accent1-blog",
+  "background-accent2-blog",
+  "fill-subtle",
+  "fill-accent1",
+  "fill-accent2",
+  "fill-accent3",
+  "fill-accent4",
+  "fill-accent5",
+] as const;
 export type CardColor = (typeof cardColors)[number];
 
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Custom background color */
   color?: CardColor;
+  noBorder?: boolean;
 }
 
 export const CLASS_ROOT = "card";
 
 const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ className, color = "white", ...other }, ref) => {
+  ({ className, color = "background-primary", noBorder, ...other }, ref) => {
     const classes = cx(
       CLASS_ROOT,
       {
-        [`bg-${color}`]: color !== "white",
+        [color]:
+          color !== "background-primary" && color !== "background-contrast",
+        [`${color} text-inverse`]: color === "background-contrast",
+        [`${CLASS_ROOT}--no-border`]: noBorder,
       },
       className,
     );

package/src/components/Card/CardSection.tsx

@@ -1,16 +1,8 @@
 import React from "react";
 import cx from "classnames";
+import { cardColors } from "./Card";
 
-export const cardSectionColors = [
-  "orange",
-  "gray",
-  "blue",
-  "green",
-  "pink",
-  "yellow",
-  "violet",
-] as const;
-export type CardSectionColor = (typeof cardSectionColors)[number];
+export type CardSectionColor = (typeof cardColors)[number];
 
 interface CardSectionProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Custom background color */
@@ -28,7 +20,11 @@ const CardSection = React.forwardRef<HTMLDivElement, CardSectionProps>(
     const classes = cx(
       CLASS_ROOT,
       {
-        [`bg-${color}`]: color,
+        [String(color)]:
+          color &&
+          color !== "background-primary" &&
+          color !== "background-contrast",
+        [`${color} text-inverse`]: color === "background-contrast",
         [`${CLASS_ROOT}--fill`]: isFilling,
         [`${CLASS_ROOT}--space-small`]: space === "small",
       },

package/src/components/Card/index.ts

@@ -1,3 +1,4 @@
 export { Card } from "./Card";
+export type { CardColor } from "./Card";
 export { CardSection } from "./CardSection";
 export { CardProductHeader } from "./CardProductHeader";

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

@@ -4,9 +4,9 @@
 
 $card-base: (
   background-color: var(--color-surface-primary),
-  margin-bottom: space.get(),
+  margin-bottom: space.get("large"),
   border-radius: convert.to-rem(10px),
-  border: 1px solid var(--color-border-subtle),
+  border: 1px solid var(--color-border-strong),
   overflow: hidden,
 );
 

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

@@ -38,13 +38,15 @@
 @mixin card-section($spacing) {
   @include card-spacing($spacing);
 
-  .btn,
-  button {
-    display: block;
-    width: 100%;
+  > {
+    .btn,
+    button {
+      display: block;
+      width: 100%;
 
-    &:not(:last-child) {
-      margin-bottom: space.get("small");
+      &:not(:last-child) {
+        margin-bottom: space.get("small");
+      }
     }
   }
 

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

@@ -35,5 +35,9 @@
     &__product-header--space-small &__product-content {
       @include mixins.card-product-header(space.get());
     }
+
+    &--no-border {
+      border: none;
+    }
   }
 }

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

@@ -24,19 +24,58 @@ describe("rendering Card", () => {
       expect(getByTestId("test-id")).toHaveClass("test-class");
     });
 
-    ["black", "orange"].map((color) => {
-      it(`has bg-${color} class when color is ${color}`, () => {
+    // Test semantic color classes (excluding background-primary and background-contrast)
+    [
+      "background-secondary",
+      "background-accent",
+      "background-accent1-blog",
+      "background-accent2-blog",
+      "fill-subtle",
+      "fill-accent1",
+      "fill-accent2",
+      "fill-accent3",
+      "fill-accent4",
+      "fill-accent5",
+    ].map((color) => {
+      it(`has ${color} class when color is ${color}`, () => {
         const { getByTestId } = render(
           <Card data-testid="test-id" color={color} />,
         );
-        expect(getByTestId("test-id")).toHaveClass(`bg-${color}`);
+        expect(getByTestId("test-id")).toHaveClass(color);
       });
     });
-    it(`doesnt have class bg-white class when color is white`, () => {
+
+    it(`has background-contrast and text-inverse classes when color is background-contrast`, () => {
+      const { getByTestId } = render(
+        <Card data-testid="test-id" color="background-contrast" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("background-contrast");
+      expect(getByTestId("test-id")).toHaveClass("text-inverse");
+    });
+
+    it(`doesn't have background-primary class when color is background-primary (default)`, () => {
+      const { getByTestId } = render(
+        <Card data-testid="test-id" color="background-primary" />,
+      );
+      expect(getByTestId("test-id")).not.toHaveClass("background-primary");
+    });
+
+    it(`doesn't have any color class when no color is specified (defaults to background-primary)`, () => {
+      const { getByTestId } = render(<Card data-testid="test-id" />);
+      expect(getByTestId("test-id")).not.toHaveClass("background-primary");
+      expect(getByTestId("test-id")).toHaveClass("card");
+    });
+
+    it(`has card--no-border class when noBorder is true`, () => {
+      const { getByTestId } = render(<Card data-testid="test-id" noBorder />);
+      expect(getByTestId("test-id")).toHaveClass("card--no-border");
+    });
+
+    it(`doesn't have card--no-border class when noBorder is false`, () => {
       const { getByTestId } = render(
-        <Card data-testid="test-id" color={"white"} />,
+        <Card data-testid="test-id" noBorder={false} />,
       );
-      expect(getByTestId("test-id")).not.toHaveClass("bg-white");
+      expect(getByTestId("test-id")).not.toHaveClass("card--no-border");
     });
   });
 });

package/src/components/Card/tests/CardSection.unit.test.js

@@ -24,15 +24,48 @@ describe("rendering CardSection", () => {
       expect(getByTestId("test-id")).toHaveClass("test-class");
     });
 
-    ["white", "black", "orange"].map((color) => {
-      it(`bg-${color} class when color is ${color}`, () => {
+    // Test semantic color classes (excluding background-primary and background-contrast)
+    [
+      "background-secondary",
+      "background-accent",
+      "background-accent1-blog",
+      "background-accent2-blog",
+      "fill-subtle",
+      "fill-accent1",
+      "fill-accent2",
+      "fill-accent3",
+      "fill-accent4",
+      "fill-accent5",
+    ].map((color) => {
+      it(`has ${color} class when color is ${color}`, () => {
         const { getByTestId } = render(
           <CardSection data-testid="test-id" color={color} />,
         );
-        expect(getByTestId("test-id")).toHaveClass(`bg-${color}`);
+        expect(getByTestId("test-id")).toHaveClass(color);
       });
     });
 
+    it(`has background-contrast and text-inverse classes when color is background-contrast`, () => {
+      const { getByTestId } = render(
+        <CardSection data-testid="test-id" color="background-contrast" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("background-contrast");
+      expect(getByTestId("test-id")).toHaveClass("text-inverse");
+    });
+
+    it(`doesn't have background-primary class when color is background-primary`, () => {
+      const { getByTestId } = render(
+        <CardSection data-testid="test-id" color="background-primary" />,
+      );
+      expect(getByTestId("test-id")).not.toHaveClass("background-primary");
+    });
+
+    it(`doesn't have any color class when no color is specified`, () => {
+      const { getByTestId } = render(<CardSection data-testid="test-id" />);
+      expect(getByTestId("test-id")).toHaveClass("card__section");
+      expect(getByTestId("test-id")).not.toHaveClass("background-primary");
+    });
+
     it(`has card__section--fill class when isFilling is passed`, () => {
       const { getByTestId } = render(
         <CardSection data-testid="test-id" isFilling />,