@orangesk/orange-design-system 2.0.0-beta.46 → 2.0.0-beta.48

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/InputStepper/styles/style.scss

@@ -111,12 +111,17 @@
     &--invalid {
       .input-stepper__button,
       .input-stepper__number,
-      .input-stepper__button--minus:hover:not(:disabled),
-      .input-stepper__button--plus:hover:not(:disabled),
       .input-stepper__button--minus:active:not(:disabled),
       .input-stepper__button--plus:active:not(:disabled) {
         border-color: var(--color-border-negative);
       }
+
+      @media (hover: hover) and (pointer: fine) {
+        .input-stepper__button--minus:hover:not(:disabled),
+        .input-stepper__button--plus:hover:not(:disabled) {
+          border-color: var(--color-border-negative);
+        }
+      }
     }
 
     &__button--minus:disabled,
@@ -126,13 +131,15 @@
       }
     }
 
-    &__button--minus:hover:not(:disabled),
-    &__button--plus:hover:not(:disabled) {
-      background-color: var(--color-fill-contrast);
-      border-color: var(--color-fill-contrast);
+    @media (hover: hover) and (pointer: fine) {
+      &__button--minus:hover:not(:disabled),
+      &__button--plus:hover:not(:disabled) {
+        background-color: var(--color-fill-contrast);
+        border-color: var(--color-fill-contrast);
 
-      &::before {
-        background-color: var(--color-fill-primary);
+        &::before {
+          background-color: var(--color-fill-primary);
+        }
       }
     }
 

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

@@ -4,7 +4,6 @@
 @mixin base {
   font-weight: bold;
   text-decoration: underline;
-  text-underline-offset: 0.1em;
   color: inherit;
   background: none;
   cursor: pointer;

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/Megamenu/Megamenu.tsx

@@ -414,9 +414,9 @@ export const Megamenu = ({
           aria-labelledby={ids.mobileMainTitleId}
           aria-hidden="true"
         >
-          <h2 id={ids.mobileMainTitleId} className="sr-only">
+          <span id={ids.mobileMainTitleId} className="sr-only">
             Hlavné menu
-          </h2>
+          </span>
           <button
             aria-label="Zatvoriť menu"
             className={CLASS_MOBILE_OVERLAY}

package/src/components/Megamenu/MegamenuBlog.tsx

@@ -325,9 +325,9 @@ export const MegamenuBlog = ({
           aria-labelledby={ids.mobileMainTitleId}
           aria-hidden="true"
         >
-          <h2 id={ids.mobileMainTitleId} className="sr-only">
+          <span id={ids.mobileMainTitleId} className="sr-only">
             Hlavné menu
-          </h2>
+          </span>
           <button
             aria-label="Zatvoriť menu"
             className={CLASS_MOBILE_OVERLAY}

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

@@ -59,7 +59,7 @@
     font-size: inherit;
     text-decoration: underline;
     text-underline-offset: convert.to-rem(2px);
-    text-decoration-thickness: 1px;
+    text-decoration-thickness: auto;
 
     &:hover,
     &:focus,
@@ -630,7 +630,8 @@
 @mixin mobile-account-logout {
   display: inline-block;
   text-decoration: underline;
-  text-underline-offset: convert.to-rem(4px);
+  text-underline-offset: convert.to-rem(2px);
+  text-decoration-thickness: auto;
   margin-bottom: convert.to-rem(20px);
   font-weight: 400 !important;
 }
@@ -665,8 +666,15 @@
 }
 
 @mixin mobile-account-link {
-  text-decoration: underline;
-  text-underline-offset: convert.to-rem(4px);
+  text-decoration: none !important;
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: underline !important;
+    text-underline-offset: convert.to-rem(2px);
+    text-decoration-thickness: auto;
+  }
 }
 
 @mixin container {
@@ -696,7 +704,7 @@
   a:focus {
     text-decoration: underline;
     text-underline-offset: convert.to-rem(2px);
-    text-decoration-thickness: 1px;
+    text-decoration-thickness: auto;
   }
 
   @include breakpoint.get("md", "down") {
@@ -709,19 +717,15 @@
 }
 
 @mixin text-large {
-  font-size: convert.to-rem(18px) !important;
+  font-size: convert.to-rem(28px) !important;
+  line-height: convert.to-rem(32px);
   font-weight: 700;
-  line-height: convert.to-rem(22px);
-
-  @include breakpoint.get("md", "down") {
-    font-size: convert.to-rem(24px) !important;
-    line-height: convert.to-rem(28px);
-  }
 }
 
 @mixin caption {
   @include generate.css-map(typographyConfig.$caption, "default");
   margin-top: 0;
+  margin-bottom: convert.to-rem(20px);
 }
 
 @mixin caption-large {
@@ -817,6 +821,10 @@
 @mixin accordion {
   @include accordion.base;
   margin-bottom: 0px !important;
+
+  a {
+    text-decoration: none !important;
+  }
 }
 
 @mixin accordion-item {

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/CodeExample.tsx

@@ -6,16 +6,78 @@ import unescape from "unescape-html";
 import { formatHTML } from "../../utils/formatCode";
 import { Button } from "../Button";
 import Code from "../Code/";
+import { getElementDisplayName } from "./getElementDisplayName";
 
 interface CodeExampleProps {
   codeJSXOptions?: Record<string, any>;
   codeTypes?: string[];
   children?: ReactNode;
+  htmlThemeClass?: string;
   jsxCode?: string; // Pre-generated JSX string (from server-side PreviewAuto)
   htmlCode?: ReactNode; // Code for HTML rendering
   [key: string]: any;
 }
 
+const addClassToOpeningTag = (tag: string, className: string): string => {
+  if (tag.includes(' class="')) {
+    return tag.replace(/ class="([^"]*)"/, (_, existingClassName) => {
+      const mergedClassName = [existingClassName, className]
+        .filter(Boolean)
+        .join(" ");
+      return ` class="${mergedClassName}"`;
+    });
+  }
+
+  return tag.replace(/^<([\w-]+)/, `<$1 class="${className}"`);
+};
+
+const applyThemeClassToMarkup = (
+  markup: string,
+  themeClass?: string,
+  wrapMultipleRoots = false,
+): string => {
+  if (!themeClass || !markup.trim()) {
+    return markup;
+  }
+
+  if (wrapMultipleRoots) {
+    return `<div class="${themeClass}">${markup}</div>`;
+  }
+
+  return markup.replace(/^<[^>]+>/, (openingTag) =>
+    addClassToOpeningTag(openingTag, themeClass),
+  );
+};
+
+const renderMarkupToHtml = (markup: ReactNode, themeClass?: string): string => {
+  if (!markup) {
+    return "";
+  }
+
+  if (typeof markup === "string") {
+    return markup;
+  }
+
+  if (Array.isArray(markup)) {
+    const renderedMarkup = markup
+      .map((markupItem) =>
+        renderToStaticMarkup(markupItem as React.ReactElement),
+      )
+      .join("");
+
+    return applyThemeClassToMarkup(
+      renderedMarkup,
+      themeClass,
+      markup.length > 1,
+    );
+  }
+
+  return applyThemeClassToMarkup(
+    renderToStaticMarkup(markup as React.ReactElement),
+    themeClass,
+  );
+};
+
 /**
  * Remove props that are undefined or null
  * Don't show React.Fragment in code example
@@ -68,25 +130,7 @@ const getJSXAsStringFromMarkup = (
     showDefaultProps: false,
     showFunctions: true,
     functionValue: (fn: any) => fn.name,
-    displayName: (ReactElement: any) => {
-      // Try to get display name from various sources
-      if (ReactElement.props && ReactElement.props.mdxType) {
-        return ReactElement.props.mdxType;
-      }
-      if (ReactElement.type && ReactElement.type.displayName) {
-        return ReactElement.type.displayName;
-      }
-      if (ReactElement.type && ReactElement.type.name) {
-        return ReactElement.type.name;
-      }
-      if (typeof ReactElement.type === "string") {
-        return ReactElement.type;
-      }
-      // Fallback to type name or 'Component'
-      return (
-        ReactElement.type?.displayName || ReactElement.type?.name || "Component"
-      );
-    },
+    displayName: getElementDisplayName,
     filterProps: ["mdxType", "originalType", ...filterProps],
     ...otherOptions,
   };
@@ -124,6 +168,7 @@ const CodeExample: React.FC<CodeExampleProps> = ({
   children,
   codeJSXOptions,
   codeTypes = ["html", "jsx"],
+  htmlThemeClass,
   jsxCode,
   htmlCode,
   ...other
@@ -184,18 +229,14 @@ const CodeExample: React.FC<CodeExampleProps> = ({
           typeof htmlCode === "string"
             ? unescape(htmlCode)
             : unescape(
-                formatHTML(
-                  renderToStaticMarkup(htmlCode as React.ReactElement),
-                ),
+                formatHTML(renderMarkupToHtml(htmlCode, htmlThemeClass)),
               );
       } else {
         codeToShow =
           typeof children === "string"
             ? unescape(children)
             : unescape(
-                formatHTML(
-                  renderToStaticMarkup(children as React.ReactElement),
-                ),
+                formatHTML(renderMarkupToHtml(children, htmlThemeClass)),
               );
       }
       break;

package/src/components/Preview/Preview.tsx

@@ -3,6 +3,7 @@
 import type { ReactNode } from "react";
 import React from "react";
 import reactElementToJSXString from "react-element-to-jsx-string";
+import { getElementDisplayName } from "./getElementDisplayName";
 import { PreviewGenerator } from "./PreviewGenerator";
 
 type PreviewProps = React.ComponentProps<typeof PreviewGenerator> & {
@@ -51,21 +52,27 @@ export function Preview({
   codeTypes = ["html", "jsx"],
   ...rest
 }: PreviewProps) {
+  const normalizedChildren = React.Children.toArray(children);
+  const normalizedCode =
+    rest.code == null
+      ? undefined
+      : typeof rest.code === "string" || typeof rest.code === "function"
+        ? rest.code
+        : React.Children.toArray(rest.code);
+  const jsxSource =
+    normalizedCode &&
+    typeof normalizedCode !== "string" &&
+    typeof normalizedCode !== "function"
+      ? normalizedCode
+      : normalizedChildren;
+  const hasMultipleCodeRoots = React.Children.count(jsxSource) > 1;
+
   // Generate JSX string on server
-  const jsxCode = generateJSXString(children, {
+  const jsxCode = generateJSXString(jsxSource, {
     showDefaultProps: false,
     showFunctions: true,
     functionValue: (fn: any) => fn.name || "Function",
-    displayName: (el: any) => {
-      // More robust display name handling
-      if (!el) return "Unknown";
-      return (
-        el?.props?.mdxType ||
-        el?.type?.displayName ||
-        el?.type?.name ||
-        (typeof el?.type === "string" ? el.type : "Component")
-      );
-    },
+    displayName: getElementDisplayName,
     filterProps: ["mdxType", "originalType"],
     useBooleanShorthandSyntax: false,
     sortProps: false,
@@ -74,8 +81,14 @@ export function Preview({
 
   // Pass the pre-generated JSX code to PreviewGenerator
   return (
-    <PreviewGenerator {...rest} jsxCode={jsxCode} codeTypes={codeTypes}>
-      {children}
+    <PreviewGenerator
+      {...rest}
+      code={normalizedCode}
+      hasMultipleCodeRoots={hasMultipleCodeRoots}
+      jsxCode={jsxCode}
+      codeTypes={codeTypes}
+    >
+      {normalizedChildren}
     </PreviewGenerator>
   );
 }