@orangesk/orange-design-system 2.0.1 → 2.2.0

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

@@ -0,0 +1,48 @@
+import { render } from "@testing-library/react";
+
+import { Autocomplete } from "../Autocomplete";
+
+describe("rendering Autocomplete", () => {
+  it("serializes autocompleteConfig to data-autocomplete-config for SSR output", () => {
+    const { container } = render(
+      <Autocomplete
+        id="search-autocomplete"
+        options={["", "apple", "apricot"]}
+        placeholder=""
+        autocompleteConfig={{
+          customInputClassName: "input--search-icon",
+        }}
+      />,
+    );
+
+    const select = container.querySelector("select");
+
+    expect(select).toHaveAttribute(
+      "data-autocomplete-config",
+      JSON.stringify({
+        customInputClassName: "input--search-icon",
+      }),
+    );
+  });
+
+  it("keeps explicit data-autocomplete-config attribute when provided", () => {
+    const { container } = render(
+      <Autocomplete
+        id="search-autocomplete"
+        options={["", "apple", "apricot"]}
+        placeholder=""
+        autocompleteConfig={{
+          customInputClassName: "input--search-icon",
+        }}
+        data-autocomplete-config='{"customInputClassName":"input--search-icon-with-placeholder"}'
+      />,
+    );
+
+    const select = container.querySelector("select");
+
+    expect(select).toHaveAttribute(
+      "data-autocomplete-config",
+      '{"customInputClassName":"input--search-icon-with-placeholder"}',
+    );
+  });
+});

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

@@ -35,7 +35,7 @@
       }
     }
 
-    &__control:focus + &__button {
+    &__control:focus-visible + &__button {
       @include mixins.control-focused;
     }
 

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

@@ -23,7 +23,7 @@
     @include generate.css-map($config, "invalid");
   }
 
-  &:focus + #{$display-selector} {
+  &:focus-visible + #{$display-selector} {
     @include generate.css-map($config, "focus");
   }
 

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

@@ -3,9 +3,10 @@
 @use "../../../styles/tools/generate";
 
 @mixin base() {
+  --icon-size: 1em;
   fill: currentColor;
-  width: 1em;
-  height: 1em;
+  width: var(--icon-size);
+  height: var(--icon-size);
   vertical-align: text-bottom;
 }
 
@@ -14,8 +15,7 @@
     @include breakpoint.get($breakpoint) {
       @each $variant, $size in $props {
         &#{generate.variant-name($variant)} {
-          width: $size;
-          height: $size;
+          --icon-size: #{$size};
         }
       }
     }

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

@@ -27,7 +27,10 @@
       color: var(--color-text-accent);
       text-decoration: underline;
     }
-    &:focus {
+    &.text-accent:hover {
+      color: var(--color-text-default) !important;
+    }
+    &:focus-visible {
       outline: 2px solid var(--color-border-contrast);
       outline-offset: 2px;
     }

package/src/components/PromoBanner/PromoBanner.tsx

@@ -33,6 +33,7 @@ export const PromoBanner = ({
   imageClassName,
   variant,
   imageFullWidth,
+  ...other
 }: PromoBannerProps) => {
   const classes = cx(CLASS_ROOT, className, {
     [`${CLASS_ROOT}--flush-top-sm-down`]: flushTopSmDown,
@@ -41,7 +42,7 @@ export const PromoBanner = ({
     [`${CLASS_ROOT}--vertical`]: variant === "vertical",
   });
   return (
-    <div className={classes}>
+    <div className={classes} {...other}>
       <Grid columnGapSize="large">
         {variant === "reverse" && image && (
           <GridCol

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

@@ -1,6 +1,21 @@
+@use "sass:map";
 @use "../../../styles/tokens/space";
 @use "../../../styles/tokens/breakpoint";
 @use "../../../styles/tools/convert";
+@use "../../Icon/styles/config" as icon-config;
+
+@function build-unsized-icon-selector($selector) {
+  $result: $selector;
+
+  @each $size-name in map.keys(map.get(icon-config.$sizes, default)) {
+    $result: "#{$result}:not(.icon--#{$size-name})";
+  }
+
+  @return $result;
+}
+
+$tile-unsized-icon-selector: build-unsized-icon-selector(">.icon") + ", " +
+  build-unsized-icon-selector(">svg");
 
 @mixin tile-base {
   display: flex;
@@ -19,6 +34,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  justify-content: space-between;
   gap: space.get("medium");
   padding: space.get("medium");
   z-index: 1;
@@ -27,18 +43,20 @@
     margin-bottom: 0;
   }
 
-  > .icon,
-  > svg {
+  @include breakpoint.get("md") {
+    flex-direction: column;
+    padding: space.get("large");
+  }
+}
+
+@mixin tile-body-icon-ratio {
+  #{$tile-unsized-icon-selector} {
     width: convert.to-rem(24px);
     height: convert.to-rem(24px);
   }
 
   @include breakpoint.get("md") {
-    flex-direction: column;
-    padding: space.get("large");
-
-    > .icon,
-    > svg {
+    #{$tile-unsized-icon-selector} {
       width: convert.to-rem(32px);
       height: convert.to-rem(32px);
     }

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

@@ -8,6 +8,10 @@
       @include mixins.tile-body;
     }
 
+    &:not(.tile--action) .tile__body {
+      @include mixins.tile-body-icon-ratio;
+    }
+
     &--compact .tile__body {
       @include mixins.tile-body-compact;
     }
@@ -19,7 +23,7 @@
         @include mixins.tile-action;
       }
 
-      .icon {
+      .tile__body > .icon:last-child {
         @include mixins.tile-action-icon;
       }
     }

package/src/styles/tokens/base.scss

@@ -19,11 +19,6 @@ $focus-shadow:
 $selection-background: sasscolor.adjust(color.$orange-dark, $alpha: -0.1);
 
 @mixin focusring {
-  &:focus {
-    outline: $focus-outline;
-    outline-offset: $focusring-offset;
-  }
-
   &:focus-visible {
     outline: $focus-outline;
     outline-offset: $focusring-offset;
@@ -36,11 +31,6 @@ $selection-background: sasscolor.adjust(color.$orange-dark, $alpha: -0.1);
 }
 
 @mixin focusring-flush {
-  &:focus {
-    outline: $focus-outline;
-    outline-offset: 0 !important;
-  }
-
   &:focus-visible {
     outline: $focus-outline;
     outline-offset: 0 !important;
@@ -55,12 +45,6 @@ $selection-background: sasscolor.adjust(color.$orange-dark, $alpha: -0.1);
 @mixin focusring-round {
   border-radius: 100%;
 
-  &:focus {
-    outline-width: 0 !important;
-    outline-color: transparent !important;
-    box-shadow: $focus-shadow;
-  }
-
   &:focus-visible {
     outline-width: 0 !important;
     outline-color: transparent !important;

package/src/styles/typography/mixins.scss

@@ -50,7 +50,16 @@
     // Default štýly pre všetky p elementy
     @include generate.responsive-css-map(map.get($config, "default"));
 
-    a {
+    a:not(.no-underline):not(.underline-hover) {
+      text-decoration: underline !important;
+    }
+
+    a.no-underline,
+    a.underline-hover {
+      text-decoration: none !important;
+    }
+
+    a.underline-hover:hover {
       text-decoration: underline !important;
     }
   }

package/src/components/Card/CHANGELOG.md

@@ -1,19 +0,0 @@
-# Changelog for Card Component
-
-## [Unreleased]
-
-### Breaking Changes
-
-- **Removed**: `CardHeader` component has been removed from the Card module.
-- **Added**: `CardProductHeader` component has been introduced as a new header variant for product cards.
-- **Added**: `space` prop to `CardSection` and `CardProductHeader` for small spacing option. When set to `"small"`, applies compact spacing via a modifier class.
-
-### Other Notable Changes
-
-- Card documentation and usage examples updated to use `CardProductHeader` instead of `CardHeader`.
-- Card exports and tests updated to reflect the removal of `CardHeader` and addition of `CardProductHeader`.
-- No changes to the main `Card` or `CardSection` API except for the new `space` prop.
-
----
-
-**Note:** If you were using `CardHeader`, please migrate to `CardProductHeader` or use `CardSection` for custom header content as needed.