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

package/src/components/Forms/TextInput/styles/mixins.scss

@@ -1,6 +1,6 @@
-@use '../../../../styles/tools/generate';
-@use '../../../../styles/tools/convert';
-@use './config';
+@use "../../../../styles/tools/generate";
+@use "../../../../styles/tools/convert";
+@use "./config";
 
 @mixin base($config: config.$base) {
   @include generate.css-map($config);
@@ -11,25 +11,31 @@
 }
 
 @mixin states($config: config.$states) {
-  @include generate.css-map($config, 'default');
+  @include generate.css-map($config, "default");
 
   &:focus {
-    @include generate.css-map($config, 'focus');
+    @include generate.css-map($config, "focus");
   }
 
   &:disabled {
     opacity: 1;
     //stylelint-disable-next-line
     -webkit-text-fill-color: config.$disabled;
-    @include generate.css-map($config, 'disabled');
+    @include generate.css-map($config, "disabled");
   }
 
-  &:read-only {
-    @include generate.css-map($config, 'readonly');
+  &:read-only:not(:disabled) {
+    @include generate.css-map($config, "readonly");
   }
 
   &.is-invalid {
-    @include generate.css-map($config, 'invalid');
+    @include generate.css-map($config, "invalid");
+  }
+
+  &::placeholder {
+    @include generate.css-map($config, "placeholder");
+
+    opacity: 1;
   }
 
   &.is-valid {
@@ -52,10 +58,10 @@
 @mixin search-icon-base {
   background-image: config.$background-image-search-icon;
   background-repeat: no-repeat;
-  @include generate.css-map(config.$background-search, 'default');
+  @include generate.css-map(config.$background-search, "default");
 
   &.text-input--large {
-    @include generate.css-map(config.$background-search, 'large');
+    @include generate.css-map(config.$background-search, "large");
   }
 }
 

package/src/components/Forms/TextInput/styles/style.scss

@@ -3,6 +3,73 @@
 @use "./mixins";
 
 @layer components {
+  .text-input__wrapper {
+    position: relative;
+
+    &--search-icon,
+    &--search-icon-with-placeholder {
+      display: inline-block;
+
+      &:has(> .text-input--3ch) {
+        @include mixins.width(3ch);
+      }
+
+      &:has(> .text-input--8ch) {
+        @include mixins.width(8ch);
+      }
+
+      &:has(> .text-input--12ch) {
+        @include mixins.width(12ch);
+      }
+
+      &:has(> .text-input--fullwidth) {
+        @include mixins.width(fullwidth);
+      }
+
+      &:has(
+        > .text-input:not(.text-input--3ch):not(.text-input--8ch):not(
+            .text-input--12ch
+          ):not(.text-input--fullwidth)
+      ) {
+        @include mixins.width(default);
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0.625rem;
+        width: 1.25rem;
+        height: 1.25rem;
+        transform: translateY(-50%);
+        background-color: var(--color-icon-brand);
+        mask-image: config.$mask-image-search-icon;
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        pointer-events: none;
+        z-index: 1;
+      }
+
+      &:has(> .text-input:not(:placeholder-shown))::before {
+        background-color: var(--color-icon-default);
+      }
+
+      &:has(> .text-input:disabled)::before {
+        background-color: var(--color-icon-disabled);
+      }
+
+      &:has(> .text-input.is-invalid)::before {
+        background-color: var(--color-icon-negative);
+      }
+
+      > .text-input {
+        background-image: none !important;
+        padding-left: 2.5rem;
+      }
+    }
+  }
+
   .text-input {
     @include mixins.base();
     @include mixins.states();

package/src/components/Forms/index.ts

@@ -6,6 +6,7 @@ export { Fieldset } from "./Fieldset";
 export { File } from "./File";
 export { Group } from "./Group";
 export { Hint } from "./Hint";
+export { InputStepper } from "./InputStepper";
 export { Label } from "./Label";
 export { Message } from "./Message";
 export { Radio } from "./Radio";
@@ -13,4 +14,3 @@ export { RangeSlider } from "./RangeSlider";
 export { Select } from "./Select";
 export { TextArea } from "./TextArea";
 export { TextInput } from "./TextInput";
-export { InputStepper } from "./InputStepper";

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

@@ -3,28 +3,30 @@
 @use "../../../styles/tokens/space";
 
 $default: (
-  background-color: color.$white,
-  border: 2px solid var(--color-surface-moderate),
+  background-color: var(--color-fill-primary),
+  border: 2px solid var(--color-border-strong),
+  color: var(--color-text-default),
 );
 
 $focus: (
   border-color: var(--color-border-contrast),
-  box-shadow: base.$focus-shadow,
+  outline: 2px solid var(--color-border-contrast),
+  outline-offset: -2px,
 );
 
 $disabled: (
-  background-color: var(--color-surface-subtle),
-  border-color: var(--color-surface-moderate),
-  color: color.$gray-700,
+  background-color: transparent,
+  border-color: var(--color-border-strong),
+  color: var(--color-text-secondary),
 );
 
 $disabled-checked: (
-  background-color: var(--color-surface-moderate),
+  background-color: var(--color-border-strong),
 );
 
 $readonly: (
-  background-color: var(--color-surface-subtle),
-  color: color.$gray-700,
+  background-color: transparent,
+  color: var(--color-text-secondary),
 );
 
 $invalid: (
@@ -32,7 +34,8 @@ $invalid: (
 );
 
 $placeholder: (
-  color: color.$gray-700,
+  color: var(--color-text-secondary),
+  font-weight: bold,
 );
 
 $radiocheck-sizes: (

package/src/components/Gauge/Gauge.tsx

@@ -1,5 +1,5 @@
-import React, { ForwardedRef } from "react";
 import cx from "classnames";
+import React, { ForwardedRef } from "react";
 
 const getMaxValue = (radius: number): number =>
   Math.PI * (radius + radius * 0.22) * 2;

package/src/components/Gauge/GaugeMaker.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import React, { useState, useRef } from "react";
-import pretty from "pretty";
+import React, { useRef, useState } from "react";
+import { formatHTML } from "../../utils/formatCode";
 
 import { Bar, BarItem } from "../Bar";
-import { Field } from "../Forms/Field";
-import { TextInput } from "../Forms/TextInput";
 import { Button } from "../Button";
+import { Field } from "../Forms/Field";
 import { Message } from "../Forms/Message";
+import { TextInput } from "../Forms/TextInput";
 
 import { Gauge } from "./Gauge";
 
@@ -36,7 +36,7 @@ const GaugeMaker: React.FC = () => {
   ) => {
     e.preventDefault();
     if (gaugeRef.current) {
-      navigator.clipboard.writeText(pretty(gaugeRef.current.outerHTML));
+      navigator.clipboard.writeText(formatHTML(gaugeRef.current.outerHTML));
       setIsSuccessMessageVisible(true);
     }
   };

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

@@ -7,7 +7,7 @@
     position: relative;
     width: convert.to-rem(220px);
     padding: 0;
-    margin: 0 0 space.get() 0;
+    margin: 0 0 space.get("large") 0;
     text-align: center;
 
     &__dial {

package/src/components/Gauge/tests/{Gauge.unit.test.js → Gauge.unit.test.jsx}

@@ -1,5 +1,4 @@
 import { render } from "@testing-library/react";
-import React from "react";
 
 import { Gauge } from "../";
 

package/src/components/Grid/Grid.tsx

@@ -1,15 +1,24 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 import { genResponsiveClasses } from "../../utils";
 
 export type GridVAlign = "stretch" | "start" | "end" | "center";
 export type GridHAlign = "end" | "center" | "space-around" | "space-between";
 export type GridRowGapSize =
+  | "none"
+  | "xsmall"
+  | "small"
   | "medium"
   | "large"
   | "xlarge"
-  | Record<string, "medium" | "large" | "xlarge">;
-export type GridColumnGapSize = "none";
+  | Record<string, "none" | "xsmall" | "small" | "medium" | "large" | "xlarge">;
+export type GridColumnGapSize =
+  | "none"
+  | "small"
+  | "default"
+  | "large"
+  | "xlarge"
+  | Record<string, "none" | "small" | "default" | "large" | "xlarge">;
 
 export interface GridProps extends React.HTMLAttributes<HTMLElement> {
   vAlign?: GridVAlign;
@@ -42,8 +51,8 @@ export const Grid = React.forwardRef<HTMLElement, GridProps>(
         [`align-items-${vAlign}`]: vAlign,
         [`justify-content-${hAlign}`]: hAlign,
         [`${CLASS_ROOT}--justify-height`]: justifyHeight,
-        [`${CLASS_ROOT}--column-gap-${columnGapSize}`]: columnGapSize,
       },
+      ...genResponsiveClasses(`${CLASS_ROOT}-column-gap`, columnGapSize),
       ...genResponsiveClasses(`${CLASS_ROOT}-row-gap`, rowGapSize),
       className,
     );

package/src/components/Grid/GridCol.tsx

@@ -1,9 +1,14 @@
-import React from 'react';
-import cx from 'classnames';
-import { genResponsiveClasses } from '../../utils';
+import cx from "classnames";
+import React from "react";
+import { genResponsiveClasses } from "../../utils";
 
-export type GridColAlign = 'top' | 'middle' | 'bottom' | 'stretch';
-export type GridColSize = number | 'shrink' | 'fill' | 'auto' | Record<string, number | 'shrink' | 'fill' | 'auto'>;
+export type GridColAlign = "top" | "middle" | "bottom" | "stretch";
+export type GridColSize =
+  | number
+  | "shrink"
+  | "fill"
+  | "auto"
+  | Record<string, number | "shrink" | "fill" | "auto">;
 
 export interface GridColProps extends React.HTMLAttributes<HTMLElement> {
   align?: GridColAlign;
@@ -11,18 +16,24 @@ export interface GridColProps extends React.HTMLAttributes<HTMLElement> {
   size?: GridColSize;
 }
 
-const CLASS_ROOT = 'grid__col';
+const CLASS_ROOT = "grid__col";
 
-export const GridCol = ({ className, align, tag = "div", size, ...other }: GridColProps) => {
+export const GridCol = ({
+  className,
+  align,
+  tag = "div",
+  size,
+  ...other
+}: GridColProps) => {
   const responsiveClasses = genResponsiveClasses(CLASS_ROOT, size);
-  
+
   const classes = cx(
     CLASS_ROOT, // Always apply base class
     ...responsiveClasses.filter(Boolean), // Filter out null/undefined values
     {
       [`align-self-${align}`]: align,
     },
-    className
+    className,
   );
 
   const TagName = tag;
@@ -30,4 +41,4 @@ export const GridCol = ({ className, align, tag = "div", size, ...other }: GridC
   return <TagName className={classes} {...other} />;
 };
 
-GridCol.displayName = 'GridCol';
+GridCol.displayName = "GridCol";

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

@@ -1,10 +1,14 @@
-@use '../../../styles/tokens/space';
+@use "../../../styles/tokens/space";
 
 $grid-base: 12 !default;
 
-$grid-row-gap-sizes: ('medium', 'large', 'xlarge');
+$grid-row-gap-sizes: ("none", "xsmall", "small", "medium", "large", "xlarge");
+$grid-column-gap-sizes: ("none", "small", "default", "large", "xlarge");
 
 $column-gap: (
-  default: space.get('small'),
   none: 0,
+  small: space.get("xsmall"),
+  default: space.get("small"),
+  large: space.get("medium"),
+  xlarge: space.get("large"),
 );

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

@@ -1,11 +1,11 @@
 @use "sass:map";
-@use 'sass:math';
+@use "sass:math";
 
-@use './../../../styles/tools/generate';
-@use './../../../styles/tools/layout';
-@use './../../../styles/tokens/breakpoint';
-@use './../../../styles/tokens/space';
-@use './config';
+@use "./../../../styles/tools/generate";
+@use "./../../../styles/tools/layout";
+@use "./../../../styles/tokens/breakpoint";
+@use "./../../../styles/tokens/space";
+@use "./config";
 
 @mixin grid-base() {
   display: flex;
@@ -16,18 +16,41 @@
 
   /* Fixes VoiceOver no announcing unordered lists */
   > li::before {
-    content: ' ';
+    content: " ";
     position: absolute;
     width: 0;
     height: 0;
   }
 }
 
-@mixin grid-column-gap($size: 'default', $column-gap: config.$column-gap) {
+@mixin grid-column-gap(
+  $size: "default",
+  $column-gap: config.$column-gap,
+  $force-important: false
+) {
   $gap: map.get($column-gap, $size);
 
-  margin-left: -$gap;
-  margin-right: -$gap;
+  @if ($size == "default" or $size == "small") {
+    @if ($size == "default" and not $force-important) {
+      margin-left: -$gap;
+      margin-right: -$gap;
+    } @else {
+      margin-left: -$gap !important;
+      margin-right: -$gap !important;
+    }
+  } @else {
+    @include breakpoint.get("md") {
+      margin-left: -$gap !important;
+      margin-right: -$gap !important;
+    }
+  }
+}
+
+@mixin grid-column-gap-responsive(
+  $size: "default",
+  $column-gap: config.$column-gap
+) {
+  @include grid-column-gap($size, $column-gap, true);
 }
 
 @mixin grid-with-equal-height-content(
@@ -53,7 +76,7 @@
 }
 
 @mixin grid-row-gap(
-  $size: 'medium',
+  $size: "medium",
   $grid-col-selector: '[class*="grid__col"]'
 ) {
   margin-top: #{space.get($size) * -1};
@@ -70,11 +93,32 @@
   max-width: 100%;
 }
 
-@mixin grid-col-column-gap($size: 'default', $column-gap: config.$column-gap) {
+@mixin grid-col-column-gap(
+  $size: "default",
+  $column-gap: config.$column-gap,
+  $force-important: false
+) {
   $gap: map.get($column-gap, $size);
 
-  padding-left: $gap;
-  padding-right: $gap;
+  @if ($size == "default" and not $force-important) {
+    padding-left: $gap;
+    padding-right: $gap;
+  } @else if ($size == "small") {
+    padding-left: $gap !important;
+    padding-right: $gap !important;
+  } @else {
+    @include breakpoint.get("md") {
+      padding-left: $gap !important;
+      padding-right: $gap !important;
+    }
+  }
+}
+
+@mixin grid-col-column-gap-responsive(
+  $size: "default",
+  $column-gap: config.$column-gap
+) {
+  @include grid-col-column-gap($size, $column-gap, true);
 }
 
 @mixin column-size($width: config.$grid-base, $grid-base: config.$grid-base) {
@@ -100,25 +144,25 @@
 }
 
 @mixin column-classes() {
-  *[class*='grid__col'] {
+  *[class*="grid__col"] {
     @include grid-col-base();
   }
 
   @include breakpoint.each using ($breakpoint) {
-    .grid__col-#{generate.variant-name($breakpoint, '-')}-shrink {
+    .grid__col-#{generate.variant-name($breakpoint, "-")}-shrink {
       @include column-shrink;
     }
 
-    .grid__col-#{generate.variant-name($breakpoint, '-')}-fill {
+    .grid__col-#{generate.variant-name($breakpoint, "-")}-fill {
       @include column-fill;
     }
 
-    .grid__col-#{generate.variant-name($breakpoint, '-')}-auto {
+    .grid__col-#{generate.variant-name($breakpoint, "-")}-auto {
       @include column-auto;
     }
 
     @for $i from 1 through config.$grid-base {
-      .grid__col-#{generate.variant-name($breakpoint, '-')}-#{$i} {
+      .grid__col-#{generate.variant-name($breakpoint, "-")}-#{$i} {
         @include column-size($i);
       }
     }

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

@@ -10,6 +10,12 @@
   .grid {
     @include mixins.grid-base;
 
+    @include mixins.grid-column-gap("default");
+
+    > [class*="grid__col"] {
+      @include mixins.grid-col-column-gap("default");
+    }
+
     &--justify-height {
       @include mixins.grid-with-equal-height-content;
     }
@@ -24,12 +30,16 @@
       }
     }
 
-    @each $name, $value in config.$column-gap {
-      &#{generate.variant-name($name, "--column-gap-",)} {
-        @include mixins.grid-column-gap($name);
+    &-column-gap {
+      @each $name in config.$grid-column-gap-sizes {
+        @include breakpoint.each using ($breakpoint) {
+          &-#{generate.variant-name($breakpoint, "-")}-#{string.unquote($name)} {
+            @include mixins.grid-column-gap-responsive($name);
 
-        > [class*="grid__col"] {
-          @include mixins.grid-col-column-gap($name);
+            > [class*="grid__col"] {
+              @include mixins.grid-col-column-gap-responsive($name);
+            }
+          }
         }
       }
     }

package/src/components/Grid/tests/{Grid.unit.test.js → Grid.unit.test.jsx}

@@ -7,7 +7,6 @@
  * Tests both React component usage and equivalent HTML structure generation.
  */
 
-import React from "react";
 import { render } from "@testing-library/react";
 import { Grid } from "../Grid";
 import { GridCol } from "../GridCol";
@@ -53,15 +52,56 @@ describe("Grid", () => {
     expect(getByTestId("test-id")).toHaveClass("grid--justify-height");
   });
 
-  ["medium", "large", "xlarge"].forEach((rowGapSize) => {
-    it(`applies grid-row-gap--${rowGapSize} class when rowGapSize is ${rowGapSize}`, () => {
+  ["none", "xsmall", "small", "medium", "large", "xlarge"].forEach(
+    (rowGapSize) => {
+      it(`applies grid-row-gap--${rowGapSize} class when rowGapSize is ${rowGapSize}`, () => {
+        const { getByTestId } = render(
+          <Grid data-testid="test-id" rowGapSize={rowGapSize} />,
+        );
+        expect(getByTestId("test-id")).toHaveClass(
+          `grid-row-gap--${rowGapSize}`,
+        );
+      });
+    },
+  );
+
+  ["small", "large", "xlarge", "none"].forEach((columnGapSize) => {
+    it(`applies grid-column-gap--${columnGapSize} class when columnGapSize is ${columnGapSize}`, () => {
       const { getByTestId } = render(
-        <Grid data-testid="test-id" rowGapSize={rowGapSize} />,
+        <Grid data-testid="test-id" columnGapSize={columnGapSize} />,
+      );
+      expect(getByTestId("test-id")).toHaveClass(
+        `grid-column-gap--${columnGapSize}`,
       );
-      expect(getByTestId("test-id")).toHaveClass(`grid-row-gap--${rowGapSize}`);
     });
   });
 
+  it("applies responsive row gap classes when rowGapSize is object", () => {
+    const { getByTestId } = render(
+      <Grid
+        data-testid="test-id"
+        rowGapSize={{ xs: "medium", md: "xlarge" }}
+      />,
+    );
+    expect(getByTestId("test-id")).toHaveClass(
+      "grid-row-gap--medium",
+      "grid-row-gap--md-xlarge",
+    );
+  });
+
+  it("applies responsive column gap classes when columnGapSize is object", () => {
+    const { getByTestId } = render(
+      <Grid
+        data-testid="test-id"
+        columnGapSize={{ xs: "small", lg: "xlarge" }}
+      />,
+    );
+    expect(getByTestId("test-id")).toHaveClass(
+      "grid-column-gap--small",
+      "grid-column-gap--lg-xlarge",
+    );
+  });
+
   it("merges additional className", () => {
     const { getByTestId } = render(
       <Grid data-testid="test-id" className="test-class" />,
@@ -288,7 +328,7 @@ describe("Grid with GridCol combinations", () => {
 
     expect(grid).toHaveClass(
       "grid-row-gap--large",
-      "grid--column-gap-none",
+      "grid-column-gap--none",
       "custom-grid",
     );
     expect(cols[0]).toHaveClass("grid__col", "grid__col--auto", "custom-col");

package/src/components/Grid/tests/{GridCol.unit.test.js → GridCol.unit.test.jsx}

@@ -6,7 +6,6 @@
  * Also includes complex scenarios with various size combinations and responsive behavior.
  */
 
-import React from "react";
 import { render } from "@testing-library/react";
 import { GridCol } from "../GridCol";
 
@@ -189,7 +188,7 @@ describe("GridCol complex scenarios", () => {
   });
 
   it("renders with event handlers", () => {
-    const handleClick = jest.fn();
+    const handleClick = vi.fn();
     const { getByTestId } = render(
       <GridCol
         data-testid="test-id"