@orangesk/orange-design-system 2.0.0-beta.28 → 2.0.0-beta.29

package/src/components/Forms/Field/Control.tsx

@@ -30,6 +30,33 @@ export interface ControlProps {
   className?: string;
 }
 
+const getControlElement = (type: string) => {
+  switch (type) {
+    case "autocomplete":
+      return Autocomplete;
+    case "checkbox":
+      return Checkbox;
+    case "datepicker":
+      return DatePicker;
+    case "file":
+      return File;
+    case "group":
+      return Group;
+    case "radio":
+      return Radio;
+    case "range":
+      return RangeSlider;
+    case "select":
+      return Select;
+    case "input-stepper":
+      return InputStepper;
+    case "textarea":
+      return TextArea;
+    default:
+      return TextInput;
+  }
+};
+
 const Control: React.FC<ControlProps> = ({ className }) => {
   const context = React.useContext(FieldContext);
   const fieldsetContext = React.useContext(FieldsetContext);
@@ -46,66 +73,42 @@ const Control: React.FC<ControlProps> = ({ className }) => {
     type,
     control: innerControl,
     renderControl,
+    prefix,
+    suffix,
+    id: controlConfigId,
     ...controlProps
   } = control;
 
   const describedby = getDescribedBy(hint, messages, tooltip, controlId);
   const renderWrapper = isRadioCheck || type === "autocomplete";
 
-  const ControlElement = (props: any) => {
-    switch (type) {
-      case "autocomplete":
-        return <Autocomplete {...props} />;
-      case "checkbox":
-        return <Checkbox {...props} />;
-      case "datepicker":
-        return <DatePicker {...props} />;
-      case "file":
-        return <File {...props} />;
-      case "group":
-        return <Group {...props} />;
-      case "radio":
-        return <Radio {...props} />;
-      case "range":
-        return <RangeSlider {...props} />;
-      case "select":
-        return <Select {...props} />;
-      case "input-stepper":
-        return <InputStepper {...props} />;
-      case "textarea":
-        return <TextArea {...props} />;
-      default:
-        return <TextInput {...props} />;
-    }
-  };
+  const ControlElement = getControlElement(type ?? "text");
 
   const { isInvalid, isValid } = controlProps;
 
-  const isReallyInvalid =
+  const hasValidationError =
     isInvalid ??
     ((fieldsetMessages.some((msg: any) => msg.isMain) ||
       messages.some((msg: any) => msg.type === "error")) &&
       !isValid);
 
-  const props = (() => {
-    let calculatedControlProps: any = {
-      id: controlId,
-      ...(describedby.length && { "aria-describedby": describedby }),
-      ...(type === "file" && { "aria-labelledby": `${controlId}-label` }),
-      ...(type === "text" ? { isInvalid: isReallyInvalid } : {}),
-    };
-
-    if (type === "group") {
-      calculatedControlProps = {
-        control: { type, ...innerControl, ...calculatedControlProps },
-      };
-    }
-
-    return {
-      ...controlProps,
-      ...calculatedControlProps,
-    };
-  })();
+  const props = {
+    ...controlProps,
+    ...(type !== "group" && { id: controlId }),
+    ...(describedby.length && { "aria-describedby": describedby }),
+    ...(type === "file" && { "aria-labelledby": `${controlId}-label` }),
+    isInvalid: hasValidationError,
+    ...(type === "group" &&
+      innerControl && {
+        addonPrefix: prefix,
+        addonSuffix: suffix,
+        control: {
+          ...innerControl,
+          id: controlId,
+          isInvalid: hasValidationError,
+        },
+      }),
+  };
 
   if (renderControl) {
     return renderControl(props);

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

@@ -21,5 +21,5 @@ $radiocheck-control: (
 
 $hint: (
   margin-top: space.get("xsmall"),
-  margin-bottom: space.get("xsmall"),
+  margin-bottom: 0,
 );

package/src/components/Forms/Field/tests/Group.Field.conformance.test.js

@@ -4,25 +4,49 @@ import { axe } from "jest-axe";
 import { Button } from "../../../Button";
 import { Field } from "..";
 
-const controlConfig = {
-  type: "group",
-  prefix: "€",
-  suffix: ["kg", <Button key="test">Send</Button>],
-  control: { type: "text" },
-};
-
 const example = (
   <>
-    <Field label="Field Label" control={controlConfig} />
-    <Field label="Field Label" control={controlConfig} tooltip="info tooltip" />
+    <Field
+      label="Field Label"
+      control={{
+        type: "group",
+        id: "group-field-1",
+        prefix: "€",
+        suffix: ["kg", <Button key="test">Send</Button>],
+        control: { type: "text", id: "text-field-1" },
+      }}
+    />
+    <Field
+      label="Field Label"
+      control={{
+        type: "group",
+        id: "group-field-2",
+        prefix: "€",
+        suffix: ["kg", <Button key="test">Send</Button>],
+        control: { type: "text", id: "text-field-2" },
+      }}
+      tooltip="info tooltip"
+    />
     <Field
       label="Field Label"
       hint="Field hint with long text"
-      control={controlConfig}
+      control={{
+        type: "group",
+        id: "group-field-3",
+        prefix: "€",
+        suffix: ["kg", <Button key="test">Send</Button>],
+        control: { type: "text", id: "text-field-3" },
+      }}
     />
     <Field
       label="Field Label"
-      control={controlConfig}
+      control={{
+        type: "group",
+        id: "group-field-4",
+        prefix: "€",
+        suffix: ["kg", <Button key="test">Send</Button>],
+        control: { type: "text", id: "text-field-4" },
+      }}
       messages={[
         { type: "info", text: "Info message with lorem ipsum long text ipsum" },
       ]}

package/src/components/Forms/File/File.tsx

@@ -11,12 +11,16 @@ const CLASS_ROOT = "file-input";
 export type FileSize = "default" | "large";
 
 // Omit native 'size' prop to avoid conflict
-export interface FileProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+export interface FileProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "size"
+> {
   /** Html id attribute. Generated automatically if omitted. */
   id?: string;
   /** Disabled state. */
   isDisabled?: boolean;
+  /** Invalid state */
+  isInvalid?: boolean;
   /** Input name. */
   name?: string;
   /** Size of element. */
@@ -29,6 +33,7 @@ const defaultSize: FileSize = "default";
 const File: FC<FileProps> = ({
   id,
   isDisabled,
+  isInvalid,
   name,
   size = defaultSize,
   className,

package/src/components/Forms/Group/Group.tsx

@@ -19,6 +19,8 @@ interface GroupProps extends HTMLAttributes<HTMLDivElement> {
   size?: "large";
   addonSuffix?: ReactNode | ReactNode[];
   className?: string;
+  /** Invalid state */
+  isInvalid?: boolean;
 }
 
 const Group: React.FC<GroupProps> = ({
@@ -27,6 +29,7 @@ const Group: React.FC<GroupProps> = ({
   addonSuffix,
   size,
   className,
+  isInvalid,
   ...other
 }) => {
   const { type, ...controlProps } = control;
@@ -42,20 +45,26 @@ const Group: React.FC<GroupProps> = ({
 
   const renderItems = (items: ReactNode | ReactNode[] | undefined) =>
     React.Children.map(items, (item) => {
-      if (
-        typeof item === "string" ||
-        (item && typeof (item as any).type === "string")
-      ) {
+      if (typeof item === "string") {
         return <Item size={size}>{item}</Item>;
       } else if (React.isValidElement(item)) {
+        const itemType = (item as any).type;
+        const isNativeElement = typeof itemType === "string";
+        const isButtonElement =
+          isNativeElement && (itemType === "button" || itemType === "a");
+
+        // Wrap native HTML elements (span, p, div) but NOT buttons or links
+        // Don't wrap React components (Button, etc.)
+        if (isNativeElement && !isButtonElement) {
+          return <Item size={size}>{item}</Item>;
+        }
+
+        // For buttons, links, and React components, clone with size prop if needed
         const propsToAdd =
           item.props && typeof item.props === "object" && "size" in item.props
             ? {}
             : { size };
-        return React.cloneElement(item, {
-          ...(item.props || {}),
-          ...propsToAdd,
-        });
+        return React.cloneElement(item, propsToAdd);
       }
       return item;
     });

package/src/components/Forms/InputStepper/InputStepper.tsx

@@ -22,6 +22,8 @@ export interface InputStepperProps {
   id: string;
   inputClassName?: string;
   isDisabled?: boolean;
+  /** Invalid state */
+  isInvalid?: boolean;
   name?: string;
   nonEditableInput?: boolean;
   className?: string;
@@ -34,6 +36,7 @@ const InputStepper: React.FC<InputStepperProps> = ({
   id,
   config,
   isDisabled,
+  isInvalid,
   nonEditableInput = false,
   ...other
 }) => {

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

@@ -25,9 +25,9 @@
         appearance: none;
       }
       &:disabled {
-        color: var(--color-surface-moderate) !important;
-        -webkit-text-fill-color: var(--color-surface-moderate) !important;
-        background-color: color.$white;
+        color: var(--color-text-disabled) !important;
+        -webkit-text-fill-color: var(--color-text-disabled) !important;
+        background-color: var(--color-fill-primary);
       }
     }
     &__number {
@@ -40,11 +40,12 @@
       padding: space.get("xsmall") space.get("xsmall") convert.to-rem(8px)
         space.get("xsmall");
       text-align: center;
-      border: 2px solid var(--color-surface-moderate);
+      border: 2px solid var(--color-border-strong);
       border-left: 0;
       border-right: 0;
       margin-bottom: 0;
       line-height: 1.5;
+      background-color: var(--color-fill-primary);
     }
     &__button {
       position: relative;
@@ -53,14 +54,11 @@
       width: 40px;
       border-top: 2px solid;
       border-bottom: 2px solid;
-      border-color: var(--color-surface-moderate);
+      border-color: var(--color-border-strong);
 
       &::before {
         content: "";
         position: absolute;
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-position: center center;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
@@ -70,24 +68,40 @@
     }
 
     &__button--minus {
-      border-left: 2px solid var(--color-surface-moderate);
+      border-left: 2px solid var(--color-border-strong);
       border-top-left-radius: convert.to-rem(5px);
       border-bottom-left-radius: convert.to-rem(5px);
-      background-color: color.$white;
+      background-color: var(--color-fill-primary);
 
       &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
+        background-color: var(--color-text-default);
+        mask: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
+        mask-size: cover;
+        mask-repeat: no-repeat;
+        mask-position: center center;
+        -webkit-mask: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
+        -webkit-mask-size: cover;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center center;
       }
     }
 
     &__button--plus {
-      border-right: 2px solid var(--color-surface-moderate);
+      border-right: 2px solid var(--color-border-strong);
       border-top-right-radius: convert.to-rem(5px);
       border-bottom-right-radius: convert.to-rem(5px);
-      background-color: color.$white;
+      background-color: var(--color-fill-primary);
 
       &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
+        background-color: var(--color-text-default);
+        mask: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
+        mask-size: cover;
+        mask-repeat: no-repeat;
+        mask-position: center center;
+        -webkit-mask: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
+        -webkit-mask-size: cover;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center center;
       }
     }
 
@@ -95,50 +109,31 @@
       z-index: 1;
     }
 
-    &__button--minus:disabled {
-      &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z" fill="%23CCCCCC"/></svg>');
-      }
-    }
-
+    &__button--minus:disabled,
     &__button--plus:disabled {
       &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z" fill="%23CCCCCC"/></svg>');
-      }
-    }
-
-    &__button:hover:not(:disabled) {
-      background-color: color.$black;
-      border-color: color.$black;
-    }
-
-    &__button--minus:hover:not(:disabled) {
-      &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z" fill="white"/></svg>');
+        background-color: var(--color-border-strong);
       }
     }
 
+    &__button--minus:hover:not(:disabled),
     &__button--plus:hover:not(:disabled) {
-      &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z" fill="white"/></svg>');
-      }
-    }
+      background-color: var(--color-fill-contrast);
+      border-color: var(--color-fill-contrast);
 
-    &__button--minus:active:not(:disabled) {
       &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
+        background-color: var(--color-fill-primary);
       }
     }
 
+    &__button--minus:active:not(:disabled),
     &__button--plus:active:not(:disabled) {
+      background-color: var(--color-fill-tertiary);
+      border-color: var(--color-border-accent);
+
       &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
+        background-color: color.$white;
       }
     }
-
-    &__button:active:not(:disabled) {
-      background-color: color.$orange-dark;
-      border-color: color.$orange-dark;
-    }
   }
 }

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

@@ -5,7 +5,8 @@
 $base: (
   font-size: 1rem,
   font-weight: bold,
-  margin-bottom: space.get("xsmall"),
+  margin-top: space.get("xsmall"),
+  margin-bottom: 0,
   max-width: convert.to-rem(350px),
 );
 

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

@@ -2,11 +2,14 @@
 @use "../../styles/config" as commonConfig;
 
 $checked-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23fff'/%3E%3C/svg%3E");
-$invalid-checked-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23cd3c14'/%3E%3C/svg%3E");
+$invalid-checked-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23ffffff'/%3E%3C/svg%3E");
 
 $states: (
   default: commonConfig.$default,
-  focus: commonConfig.$focus,
+  focus: (
+    outline: 2px solid var(--color-border-contrast),
+    outline-offset: 2px,
+  ),
   checked: (
     border-color: var(--color-border-accent),
     background-color: var(--color-surface-tertiary),
@@ -17,7 +20,7 @@ $states: (
   disabled-checked: commonConfig.$disabled-checked,
   invalid: commonConfig.$invalid,
   invalid-checked: (
-    background-color: color.$white,
+    background-color: var(--color-icon-negative),
     background-image: $invalid-checked-bg,
   ),
 );

package/src/components/Forms/RangeSlider/RangeSlider.tsx

@@ -40,6 +40,8 @@ export interface RangeSliderProps extends React.HTMLAttributes<HTMLDivElement> {
   hasDataAttr?: boolean;
   /** element id. required by RangeSlider.static.js and generated automatically in React environment. */
   id?: string;
+  /** Invalid state */
+  isInvalid?: boolean;
   /** width of the element */
   width?: RangeSliderWidth;
   /** Additional CSS classes */
@@ -58,6 +60,7 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
   config,
   elementBefore,
   elementAfter,
+  isInvalid,
   width = defaultProps.width,
   ...other
 }) => {

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

@@ -3,8 +3,9 @@
 @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: (
@@ -15,12 +16,12 @@ $focus: (
 
 $disabled: (
   background-color: var(--color-surface-subtle),
-  border-color: var(--color-surface-moderate),
+  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: (

package/src/components/PromoBanner/PromoBanner.tsx

@@ -30,64 +30,66 @@ export const PromoBanner = ({
 }: PromoBannerProps) => {
   const classes = cx(CLASS_ROOT, className);
   return (
-    <Grid columnGapSize="large" className={classes}>
-      {variant === "reverse" && image && (
-        <GridCol
-          size={{ xs: 12, md: 6 }}
-          className={cx(
-            `${CLASS_ROOT}__image`,
-            "align-center align-md-left",
-            imageClassName,
-          )}
-        >
-          <Image
-            src={image}
-            alt="Obrázok"
-            className={cx("mb-none", { fullwidth: imageFullWidth })}
-          />
-        </GridCol>
-      )}
-
-      <GridCol
-        size={
-          variant === "vertical"
-            ? { xs: 12, sm: 10, md: 8, lg: 6 }
-            : { xs: 12, md: image ? 6 : 7 }
-        }
-        className={cx(
-          `${CLASS_ROOT}__item`,
-          {
-            "align-items-center align-center align-self-center":
-              variant === "vertical",
-          },
-          itemClassName,
+    <div className={classes}>
+      <Grid columnGapSize="large">
+        {variant === "reverse" && image && (
+          <GridCol
+            size={{ xs: 12, md: 6 }}
+            className={cx(
+              `${CLASS_ROOT}__image`,
+              "align-center align-md-left",
+              imageClassName,
+            )}
+          >
+            <Image
+              src={image}
+              alt="Obrázok"
+              className={cx("mb-none", { fullwidth: imageFullWidth })}
+            />
+          </GridCol>
         )}
-      >
-        {children}
-      </GridCol>
 
-      {image && variant !== "reverse" && (
         <GridCol
-          size={variant === "vertical" ? { xs: 12 } : { xs: 12, md: 6 }}
+          size={
+            variant === "vertical"
+              ? { xs: 12, sm: 10, md: 8, lg: 6 }
+              : { xs: 12, md: image ? 6 : 7 }
+          }
           className={cx(
-            `${CLASS_ROOT}__image`,
+            `${CLASS_ROOT}__item`,
             {
-              [`${CLASS_ROOT}__image--bleed-right`]: bleedImage,
-              [`align-self-${alignImage}`]: alignImage,
-              "pt-none": alignImage === "top",
-              "pb-none": alignImage === "bottom",
-              "align-center": variant === "vertical",
+              "align-items-center align-center align-self-center":
+                variant === "vertical",
             },
-            imageClassName,
+            itemClassName,
           )}
         >
-          <Image
-            src={image}
-            alt="Obrázok"
-            className={cx("mb-none", { fullwidth: imageFullWidth })}
-          />
+          {children}
         </GridCol>
-      )}
-    </Grid>
+
+        {image && variant !== "reverse" && (
+          <GridCol
+            size={variant === "vertical" ? { xs: 12 } : { xs: 12, md: 6 }}
+            className={cx(
+              `${CLASS_ROOT}__image`,
+              {
+                [`${CLASS_ROOT}__image--bleed-right`]: bleedImage,
+                [`align-self-${alignImage}`]: alignImage,
+                "pt-none": alignImage === "top",
+                "pb-none": alignImage === "bottom",
+                "align-center": variant === "vertical",
+              },
+              imageClassName,
+            )}
+          >
+            <Image
+              src={image}
+              alt="Obrázok"
+              className={cx("mb-none", { fullwidth: imageFullWidth })}
+            />
+          </GridCol>
+        )}
+      </Grid>
+    </div>
   );
 };

package/src/components/PromoBanner/tests/PromoBanner.conformance.test.js

@@ -714,10 +714,12 @@ describe("PromoBanner Component Conformance Tests", () => {
         </PromoBanner>,
       );
 
-      const grid = container.querySelector(".grid");
+      const banner = container.querySelector(".promo-banner");
+      const grid = banner.querySelector(".grid");
       const gridCol = container.querySelector(".grid__col");
 
-      expect(grid).toHaveClass("grid", "promo-banner", "test-grid");
+      expect(banner).toHaveClass("promo-banner", "test-grid");
+      expect(grid).toHaveClass("grid");
       expect(gridCol).toHaveClass("grid__col");
     });