@orangesk/orange-design-system 2.0.0-beta.47 → 2.0.0-beta.49

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

@@ -2,7 +2,7 @@
 @use "../../TextInput/styles/config" as TextInputConfig;
 
 $item: (
-  border: 2px solid var(--color-surface-moderate),
+  border: 2px solid var(--color-border-strong),
   background: var(--color-surface-subtle),
 );
 

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

@@ -39,15 +39,32 @@
     border-radius: 0 !important;
   }
 
+  > *:not(:first-child):not(:last-child) .autocomplete__input {
+    border-radius: 0 !important;
+  }
+
   > *:first-child:not(:last-child) {
     border-top-right-radius: 0 !important;
     border-bottom-right-radius: 0 !important;
   }
 
+  > *:first-child:not(:last-child) .autocomplete__input,
+  > *:has(+ .autocomplete[style*="display: none"] + *) .autocomplete__input {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
   > *:last-child:not(:first-child) {
     border-top-left-radius: 0 !important;
     border-bottom-left-radius: 0 !important;
   }
+
+  > *:last-child:not(:first-child) .autocomplete__input,
+  > *:not(:first-child):has(+ .autocomplete[style*="display: none"])
+    .autocomplete__input {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
 }
 
 @mixin item($config: config.$item) {

package/src/components/Forms/Group/tests/Group.unit.test.jsx

@@ -109,6 +109,15 @@ describe("rendering Group", () => {
       );
       expect(container.getElementsByClassName("select").length).toBe(1);
     });
+    it("renders Autocomplete component (autocomplete class) when control type is set to autocomplete", () => {
+      const { container } = render(
+        <Group
+          data-testid="test-id"
+          control={{ type: "autocomplete", options: ["", "apple"] }}
+        />,
+      );
+      expect(container.getElementsByClassName("autocomplete").length).toBe(1);
+    });
     it("addonPrefix Item has class control-group__item--large when size is set to large", () => {
       const { container } = render(
         <Group

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

@@ -13,6 +13,7 @@ $states: (
   disabled: commonConfig.$disabled,
   readonly: commonConfig.$readonly,
   invalid: commonConfig.$invalid,
+  placeholder: commonConfig.$placeholder,
 );
 
 $sizes: (

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

@@ -22,7 +22,7 @@
     @include generate.css-map($config, "disabled");
   }
 
-  &:read-only {
+  &:read-only:not(:disabled) {
     @include generate.css-map($config, "readonly");
   }
 
@@ -30,6 +30,12 @@
     @include generate.css-map($config, "invalid");
   }
 
+  &::placeholder {
+    @include generate.css-map($config, "placeholder");
+
+    opacity: 1;
+  }
+
   &.is-valid {
     padding-right: 36px;
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Cpath d='M7.5,15 C3.35786438,15 0,11.6421356 0,7.5 C0,3.35786438 3.35786438,0 7.5,0 C11.6421356,0 15,3.35786438 15,7.5 C15,11.6421356 11.6421356,15 7.5,15 Z M3.40550597,6.68901229 C2.99100286,7.0539857 2.95085113,7.6858763 3.31582458,8.1003794 L5.77477826,10.8930318 C6.1397517,11.3075349 6.7716423,11.3476866 7.18614541,10.9827132 C7.20478962,10.9662968 7.22281563,10.9491914 7.24018594,10.9314326 L11.8941565,6.17336831 C12.2803381,5.7785491 12.2733359,5.14542284 11.8785167,4.75924123 C11.4836975,4.37305961 10.8505712,4.38006176 10.4643896,4.77488097 L7.31720124,7.9924615 C6.93101963,8.3872807 6.29789337,8.3942828 5.90307416,8.0081012 C5.88531533,7.9907309 5.86820993,7.9727049 5.85179355,7.9540607 L4.81687313,6.77869369 C4.45189969,6.36419058 3.82000909,6.32403885 3.40550597,6.68901229 Z' fill='%2332c832' /%3E%3C/svg%3E");

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

@@ -25,6 +25,7 @@ $states: (
   disabled: commonConfig.$disabled,
   readonly: commonConfig.$readonly,
   invalid: commonConfig.$invalid,
+  placeholder: commonConfig.$placeholder,
 );
 
 $sizes: (
@@ -57,4 +58,5 @@ $widths: (
   ),
 );
 
-$background-image-search-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><path fill="%23999999" fill-rule="evenodd" d="m19.82 18-5.64-5.65a7.81 7.81 0 1 0-1.83 1.82L18 19.82a.63.63 0 0 0 .88 0l.94-.94a.63.63 0 0 0 0-.88Zm-12-4.88a5.32 5.32 0 1 1 0-10.63 5.32 5.32 0 0 1 0 10.63Z" clip-rule="evenodd"/></svg>');
+$background-image-search-icon: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 0C13.1944 1.026e-07 17 3.80558 17 8.5C17 10.3053 16.4363 11.9785 15.4766 13.355L19.4248 17.3032L17.3032 19.4248L13.3555 15.4766C11.9789 16.4364 10.3054 17 8.5 17C3.80558 17 -1.026e-07 13.1944 0 8.5C1.026e-07 3.80558 3.80558 -1.026e-07 8.5 0ZM8.5 3C5.46243 3 3 5.46243 3 8.5C3 11.5376 5.46243 14 8.5 14C11.5376 14 14 11.5376 14 8.5C14 5.46243 11.5376 3 8.5 3Z" fill="%23F15E00"/></svg>');
+$mask-image-search-icon: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 0C13.1944 1.026e-07 17 3.80558 17 8.5C17 10.3053 16.4363 11.9785 15.4766 13.355L19.4248 17.3032L17.3032 19.4248L13.3555 15.4766C11.9789 16.4364 10.3054 17 8.5 17C3.80558 17 -1.026e-07 13.1944 0 8.5C1.026e-07 3.80558 3.80558 -1.026e-07 8.5 0ZM8.5 3C5.46243 3 3 5.46243 3 8.5C3 11.5376 5.46243 14 8.5 14C11.5376 14 14 11.5376 14 8.5C14 5.46243 11.5376 3 8.5 3Z" fill="%23000"/></svg>');

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

@@ -24,7 +24,7 @@
     @include generate.css-map($config, "disabled");
   }
 
-  &:read-only {
+  &:read-only:not(:disabled) {
     @include generate.css-map($config, "readonly");
   }
 
@@ -32,6 +32,12 @@
     @include generate.css-map($config, "invalid");
   }
 
+  &::placeholder {
+    @include generate.css-map($config, "placeholder");
+
+    opacity: 1;
+  }
+
   &.is-valid {
     padding-right: convert.to-rem(36px);
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Cpath d='M7.5,15 C3.35786438,15 0,11.6421356 0,7.5 C0,3.35786438 3.35786438,0 7.5,0 C11.6421356,0 15,3.35786438 15,7.5 C15,11.6421356 11.6421356,15 7.5,15 Z M3.40550597,6.68901229 C2.99100286,7.0539857 2.95085113,7.6858763 3.31582458,8.1003794 L5.77477826,10.8930318 C6.1397517,11.3075349 6.7716423,11.3476866 7.18614541,10.9827132 C7.20478962,10.9662968 7.22281563,10.9491914 7.24018594,10.9314326 L11.8941565,6.17336831 C12.2803381,5.7785491 12.2733359,5.14542284 11.8785167,4.75924123 C11.4836975,4.37305961 10.8505712,4.38006176 10.4643896,4.77488097 L7.31720124,7.9924615 C6.93101963,8.3872807 6.29789337,8.3942828 5.90307416,8.0081012 C5.88531533,7.9907309 5.86820993,7.9727049 5.85179355,7.9540607 L4.81687313,6.77869369 C4.45189969,6.36419058 3.82000909,6.32403885 3.40550597,6.68901229 Z' fill='%2332c832' /%3E%3C/svg%3E");

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

@@ -38,29 +38,34 @@
         content: "";
         position: absolute;
         top: 50%;
-        left: 0.5rem;
+        left: 0.625rem;
         width: 1.25rem;
         height: 1.25rem;
         transform: translateY(-50%);
-        background-image: config.$background-image-search-icon;
-        background-repeat: no-repeat;
+        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;
       }
 
-      > .text-input {
-        background-image: none !important;
-        padding-left: 2.5rem;
+      &:has(> .text-input:not(:placeholder-shown))::before {
+        background-color: var(--color-icon-default);
       }
-    }
 
-    &--search-icon {
-      &::before {
-        opacity: 0;
+      &:has(> .text-input:disabled)::before {
+        background-color: var(--color-icon-disabled);
       }
 
-      &:has(> .text-input:not(:focus):placeholder-shown)::before {
-        opacity: 1;
+      &:has(> .text-input.is-invalid)::before {
+        background-color: var(--color-icon-negative);
+      }
+
+      > .text-input {
+        background-image: none !important;
+        padding-left: 2.5rem;
       }
     }
   }

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

@@ -15,7 +15,7 @@ $focus: (
 );
 
 $disabled: (
-  background-color: var(--color-surface-subtle),
+  background-color: transparent,
   border-color: var(--color-border-strong),
   color: var(--color-text-secondary),
 );
@@ -25,7 +25,7 @@ $disabled-checked: (
 );
 
 $readonly: (
-  background-color: var(--color-surface-subtle),
+  background-color: transparent,
   color: var(--color-text-secondary),
 );
 
@@ -35,6 +35,7 @@ $invalid: (
 
 $placeholder: (
   color: var(--color-text-secondary),
+  font-weight: bold,
 );
 
 $radiocheck-sizes: (

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

@@ -43,7 +43,8 @@
 
       // In dark theme, hide light and show dark
       .is-dark &,
-      .bg-black & {
+      .background-contrast &,
+      .surface-contrast & {
         &--light {
           display: none;
         }

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

@@ -13,7 +13,6 @@
         @include mixins.size(large);
       }
 
-      .bg-orange &,
       .surface-secondary &,
       .surface-tertiary & {
         @include mixins.color-inverse();
@@ -23,7 +22,6 @@
     &__line {
       @include mixins.line-base;
 
-      .bg-orange &,
       .surface-secondary &,
       .surface-tertiary & {
         @include mixins.line-color-inverse();

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

@@ -8,6 +8,7 @@
 @mixin base() {
   @include typoMixins.list-unstyled();
 
+  gap: convert.to-rem(7px);
   display: flex;
   max-width: none;
   margin-bottom: space.get("large");
@@ -17,24 +18,25 @@
   font-weight: bold;
   height: 50%;
   align-self: center;
+  margin: 0 convert.to-rem(10px);
 }
 
 @mixin item() {
-  margin-right: space.get("small");
   margin-bottom: 0;
 }
 
-@mixin last-item() {
-  margin-right: 0;
-}
-
 @mixin link() {
-  border-radius: 100% !important;
+  border-radius: convert.to-rem(5px);
   margin-bottom: 0;
   background-color: var(--color-background-primary);
+
   &:hover {
     background-color: var(--color-background-contrast);
   }
+
+  &:active {
+    background-color: var(--color-surface-tertiary);
+  }
 }
 
 @mixin link-active() {

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

@@ -13,10 +13,6 @@
       @include mixins.item;
     }
 
-    &__item:last-child {
-      @include mixins.last-item;
-    }
-
     &__link {
       @include mixins.link;
 

package/src/components/Preview/PreviewGenerator.tsx

@@ -297,11 +297,10 @@ const getBackgroundsAsArray = (
     return acc;
   }, []);
 
-// Map names to only the 6 allowed background classes
+// Map names to allowed background/surface classes
 const getBgClassFromName = (name: string): string => {
   const normalized = name.toLowerCase().replace(/\s+/g, "-");
 
-  // Only allow these background classes
   const allowedBackgrounds = [
     "background-primary",
     "background-secondary",
@@ -310,6 +309,13 @@ const getBgClassFromName = (name: string): string => {
     "background-accent1-blog",
     "background-accent2-blog",
     "background-none",
+    "surface-primary",
+    "surface-secondary",
+    "surface-tertiary",
+    "surface-subtle",
+    "surface-moderate",
+    "surface-contrast",
+    "surface-accent",
   ];
 
   // Return the class if it's in the allowed list, otherwise default to background-primary
@@ -327,6 +333,13 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
     "Background Accent": "background-accent",
     "Background Accent1 Blog": "background-accent1-blog",
     "Background Accent2 Blog": "background-accent2-blog",
+    "Surface Primary": "surface-primary",
+    "Surface Secondary": "surface-secondary",
+    "Surface Tertiary": "surface-tertiary",
+    "Surface Subtle": "surface-subtle",
+    "Surface Moderate": "surface-moderate",
+    "Surface Contrast": "surface-contrast",
+    "Surface Accent": "surface-accent",
   },
   bgThemeExcludedColors = [],
   children,

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

@@ -12,7 +12,8 @@
   flex-direction: column;
   border: 1px solid var(--color-border-subtle);
 
-  &.bg-black {
+  &.background-contrast,
+  &.surface-contrast {
     border: 1px solid var(--color-icon-default);
   }
 

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

@@ -4,6 +4,23 @@
 @use "../../../styles/tools/map";
 @use "./config";
 
+$section-spacing-colors: (
+  background-primary,
+  background-secondary,
+  background-contrast,
+  background-accent,
+  background-accent1-blog,
+  background-accent2-blog,
+  background-none,
+  surface-primary,
+  surface-secondary,
+  surface-tertiary,
+  surface-subtle,
+  surface-moderate,
+  surface-contrast,
+  surface-accent
+);
+
 @mixin base {
   background-color: var(--color-background-primary);
 }
@@ -13,15 +30,20 @@
 }
 
 @mixin spacing-rules($config: config.$spacing) {
-  &:not([class*="bg-"]) + &:not([class*="bg-"]),
-  &[class~="bg-black"] + &[class~="bg-black"],
-  &[class~="bg-white"] + &[class~="bg-white"],
-  &[class~="bg-orange"] + &[class~="bg-orange"],
-  &[class~="bg-gray"] + &[class~="bg-gray"] {
+  &:not([class*="background-"]):not([class*="surface-"])
+    + &:not([class*="background-"]):not([class*="surface-"]) {
     &:not(.section--default) {
       @include spacing("small");
     }
   }
+
+  @each $color in $section-spacing-colors {
+    &[class~="#{$color}"] + &[class~="#{$color}"] {
+      &:not(.section--default) {
+        @include spacing("small");
+      }
+    }
+  }
 }
 
 @mixin image-stuck-to-bottom($config: config.$stuck-image-spacing) {

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

@@ -160,8 +160,8 @@ $social-colors: (
     ),
     hover: (
       color: color.$white "!important",
-      background-color: #f16e00,
-      border-color: #f16e00,
+      background-color: var(--color-icon-brand),
+      border-color: var(--color-icon-brand),
     ),
     pressed: (
       color: var(--color-text-inverse) "!important",

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/Table/styles/mixins.scss

@@ -1,7 +1,9 @@
+@use "sass:map";
 @use "./config";
 @use "../../../styles/tokens/color";
 @use "../../../styles/tokens/space";
-@use "../../../styles/tools/convert";
+@use "../../../styles/tools/generate";
+@use "../../../styles/typography/config" as typography;
 
 @mixin base {
   width: 100%;
@@ -12,8 +14,9 @@
 @mixin cells {
   padding: space.get("medium");
   vertical-align: middle;
-  font-size: inherit;
-  line-height: inherit;
+  @include generate.responsive-css-map(
+    map.get(typography.$body-text, "default")
+  );
 }
 
 @mixin header-cells {

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

@@ -38,7 +38,7 @@ $icon-sizes: (
     padding: convert.to-rem(7px),
   ),
   large: (
-    padding: convert.to-rem(9.5px),
+    padding: convert.to-rem(8px),
   ),
 );
 

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

@@ -51,11 +51,6 @@
           }
         }
       }
-
-      // TODO: This is a temporary solution to make transparent tags work on gray backgrounds, we need to find a better way to handle this in the future.
-      &--transparent {
-        background-color: var(--color-surface-primary);
-      }
     }
 
     // Transparent class is a special variant of color, it's not possible to make transparent variant for each color at the moment.
@@ -121,6 +116,28 @@
       border-radius: 9999px;
       z-index: 2;
 
+      .background-secondary & {
+        background-color: var(--color-border-strong);
+
+        &:not([disabled]):not([aria-disabled="true"]) {
+          &:focus-visible,
+          &:hover {
+            background-color: color.$gray-600;
+          }
+
+          &:active,
+          &.is-active {
+            color: var(--color-text-inverse);
+            background-color: var(--color-background-contrast);
+          }
+        }
+
+        &[aria-disabled="true"],
+        &[disabled] {
+          background-color: var(--color-border-strong);
+        }
+      }
+
       @each $name, $props in config.$icon-sizes {
         &#{generate.variant-name($name)} {
           $padding: sass-map.get($props, padding);

package/src/components/Tile/Tile.tsx

@@ -2,30 +2,18 @@ import cx from "classnames";
 import React, { ReactNode } from "react";
 import { Icon } from "../Icon";
 import { IconProps } from "../Icon/Icon";
-import { Image } from "../Image";
 
-export const tileColors = [
-  "surface-primary",
-  "surface-subtle",
-  "surface-contrast",
-] as const;
-export type TileColor = (typeof tileColors)[number];
 export type TileHAlign = "center";
 export type TileVAlign = "center" | "end" | "space-between";
+export type TileVariant = "compact" | "action";
 
 export interface TileProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Tile color. */
-  color?: TileColor;
   /** Horizontal alignment of the tile content. */
   hAlign?: TileHAlign;
   /** Vertical alignment of the tile content. */
   vAlign?: TileVAlign;
-  /** variant can be "image" or "action" */
-  variant?: "image" | "action";
-  /** Alt and src attributes are required */
-  backgroundImage?: React.ComponentProps<typeof Image>;
-  /** Use small spacing */
-  space?: "small";
+  /** Tile variant. */
+  variant?: TileVariant;
   children?: ReactNode;
   className?: string;
 }
@@ -36,54 +24,42 @@ const Tile: React.FC<TileProps> = ({
   className,
   children,
   variant,
-  backgroundImage,
   vAlign,
   hAlign,
-  color,
-  space,
   ...other
 }) => {
+  const isCompact = variant === "compact";
+  const isAction = variant === "action";
+
   const classesWrapper = cx(
     CLASS_ROOT,
     {
-      [`${CLASS_ROOT}--${variant}`]: variant,
-      ...(color && color !== "surface-contrast" ? { [color]: true } : {}),
-      ...(color === "surface-contrast"
-        ? { [`${color} text-inverse`]: true }
-        : {}),
+      [`${CLASS_ROOT}--compact`]: isCompact,
+      [`${CLASS_ROOT}--action`]: isAction,
     },
     className,
   );
 
   const classesBody = cx(
     `${CLASS_ROOT}__body`,
-    vAlign && `justify-content-${vAlign}`,
-    hAlign && `align-items-${hAlign}`,
-    space && `${CLASS_ROOT}__body--space-${space}`,
+    !isAction && vAlign && `justify-content-${vAlign}`,
+    !isAction && hAlign && `align-items-${hAlign}`,
   );
 
-  const iconProps =
-    variant === "action"
-      ? ({
-          name: "chevron-right",
-          size: "medium",
-          color: "orange",
-        } as IconProps)
-      : null;
+  const iconProps = isAction
+    ? ({
+        name: "chevron-right",
+        size: "medium",
+        color: "orange",
+      } as IconProps)
+    : null;
 
   return (
     <div className={classesWrapper} {...other}>
       <div className={classesBody}>
-        {iconProps && <Icon {...iconProps} />}
         {children}
+        {iconProps && <Icon {...iconProps} />}
       </div>
-      {backgroundImage && (
-        // eslint-disable-next-line jsx-a11y/alt-text
-        <Image
-          {...backgroundImage}
-          className={cx(`${CLASS_ROOT}__bg`, backgroundImage.className)}
-        />
-      )}
     </div>
   );
 };