@orangesk/orange-design-system 2.0.0-beta.37 → 2.0.0-beta.38

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

@@ -1,19 +1,18 @@
-@use '../../../styles/tokens/breakpoint';
-@use './config';
+@use "../../../styles/tokens/breakpoint";
+@use "./config";
 
 @mixin base {
-    height: 100%;
+  height: 100%;
 
-    thead tr {
-      border-bottom: config.$table-header-border;
+  thead tr {
+    border-bottom: config.$table-header-border;
 
-      th {
-        border-bottom: 0;
-      }
+    th {
+      border-bottom: 0;
     }
+  }
 
-  @include breakpoint.get('xs', 'down') {
-
+  @include breakpoint.get("xs", "down") {
     tr {
       display: flex;
       flex-wrap: wrap;
@@ -31,7 +30,7 @@
     }
   }
 
-  @include breakpoint.get('md') {
+  @include breakpoint.get("md") {
     td,
     th {
       padding-right: config.$default-spacing !important;
@@ -55,11 +54,11 @@
   td:empty,
   th:empty {
     padding: 0 !important;
-  }  
+  }
 }
 
 @mixin product {
-  @include breakpoint.get('xs', 'down') {
+  @include breakpoint.get("xs", "down") {
     flex-basis: config.$product-size;
     flex-grow: 1;
 
@@ -71,71 +70,69 @@
       flex-basis: auto;
       max-width: none;
     }
-  } 
+  }
 }
 
 @mixin discount-position--top {
-    margin-top: config.$default-spacing;
+  margin-top: config.$default-spacing;
 }
 
 @mixin discount-position--left {
-    padding-left: config.$subitem-discount-spacing;
+  padding-left: config.$subitem-discount-spacing;
 }
 
 @mixin subitem-position {
-    margin-left: config.$mobile-spacing;
-    @include breakpoint.get('md') {
-      margin-left: config.$default-spacing;
-    } 
+  margin-left: config.$mobile-spacing;
+  @include breakpoint.get("md") {
+    margin-left: config.$default-spacing;
+  }
 }
 
 @mixin button {
-    font-size: config.$button-font-size !important;
+  font-size: config.$button-font-size !important;
+
+  svg {
+    margin-right: -#{config.$button-margin};
+    margin-left: -#{config.$button-margin};
+  }
 
+  @include breakpoint.get("md") {
     svg {
-      margin-right: -#{config.$button-margin};
-      margin-left: -#{config.$button-margin};
-    }
-    
-    @include breakpoint.get('md') { 
-      svg {
-        margin-right: config.$button-margin !important;
-      }
+      margin-right: config.$button-margin !important;
     }
+  }
 }
 
 @mixin price {
-    @include breakpoint.get('xs', 'down'){
-      padding-top: 0 !important;
-      order: 1;
-      flex-basis: 100%;
-
-      thead & {
-        display: none;
-        border-bottom: 0;
-      }
-
-      tfoot & {
-        flex-basis: auto;
-        padding-top: config.$default-spacing !important;
-        padding-bottom: config.$default-spacing !important;
-      }
+  @include breakpoint.get("xs", "down") {
+    padding-top: 0 !important;
+    order: 1;
+    flex-basis: 100%;
+
+    thead & {
+      display: none;
+      border-bottom: 0;
     }
+
+    tfoot & {
+      flex-basis: auto;
+      padding-top: config.$default-spacing !important;
+      padding-bottom: config.$default-spacing !important;
+    }
+  }
 }
 
 @mixin large {
   th,
   td {
-    
-    @include breakpoint.get('md') {
+    @include breakpoint.get("md") {
       padding: config.$default-spacing !important;
-
     }
   }
 
   font-size: config.$large-font-size--mobile;
 
-  @include breakpoint.get('md') {
+  @include breakpoint.get("md") {
     font-size: config.$large-font-size--desktop;
   }
-}
+}

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

@@ -1,4 +1,4 @@
-@use '../../../styles/tokens/space';
+@use "../../../styles/tokens/space";
 
 $container-widths: (
   // containers on xs and md breakpoints are fluid
@@ -8,4 +8,4 @@ $container-widths: (
   xxl: 1320px
 );
 
-$container-padding: space.get('small');
+$container-padding: space.get("small");

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

@@ -1,6 +1,6 @@
-@use './../../../styles/tools/generate';
-@use './../../../styles/tokens/breakpoint';
-@use './config';
+@use "./../../../styles/tools/generate";
+@use "./../../../styles/tokens/breakpoint";
+@use "./config";
 
 @mixin base {
   width: 100%;
@@ -16,7 +16,7 @@
     }
   }
 
-  > *:last-child{
+  > *:last-child {
     margin-bottom: 0;
   }
 }

package/src/components/Forms/Autocomplete/Autocomplete.static.ts

@@ -1,5 +1,6 @@
 export interface AutocompleteConfig {
   autoselect: boolean;
+  autocomplete?: string;
   wrapperClassName: string;
   menuClassName: string;
   optionClassName: string;

package/src/components/Forms/Autocomplete/Autocomplete.tsx

@@ -12,7 +12,10 @@ const CLASS_ROOT = "autocomplete";
 export type AutocompleteOption = string | { title: string; value: string };
 
 export interface AutocompleteProps
-  extends React.HTMLAttributes<HTMLSelectElement> {
+  extends Omit<
+    React.SelectHTMLAttributes<HTMLSelectElement>,
+    "size" | "value"
+  > {
   /** Module config. For more see accessible-autocomplete docs */
   autocompleteConfig?: Record<string, any>;
   /** Array of string options */
@@ -21,6 +24,8 @@ export interface AutocompleteProps
   placeholder?: string;
   /** Additional CSS classes */
   className?: string;
+  /** Select value */
+  value?: string | string[];
 }
 
 const Autocomplete: React.FC<AutocompleteProps> = ({

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

@@ -1,7 +1,7 @@
-@use '../../../../styles/tools/convert.scss';
-@use '../../TextInput/styles/config' as textConfig;
+@use "../../../../styles/tools/convert.scss";
+@use "../../TextInput/styles/config" as textConfig;
 
 $states: textConfig.$states;
 $sizes: textConfig.$sizes;
 
-$menu-height: convert.to-rem(243px);
+$menu-height: convert.to-rem(243px);

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

@@ -1,2 +1,2 @@
-@use '../../../../styles/tools/generate';
-@use './config';
+@use "../../../../styles/tools/generate";
+@use "./config";

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

@@ -1,12 +1,12 @@
 @use "sass:map";
-@use '../../../../styles/tools/convert';
-@use '../../../Button/styles/config' as buttonConfig;
+@use "../../../../styles/tools/convert";
+@use "../../../Button/styles/config" as buttonConfig;
 
 $sizes: buttonConfig.$sizes;
 
 $sizes: (
-  'default': map.get(buttonConfig.$sizes, 'default'),
-  'large': map.get(buttonConfig.$sizes, 'large'),
+  "default": map.get(buttonConfig.$sizes, "default"),
+  "large": map.get(buttonConfig.$sizes, "large"),
 );
 
-$disabled: map.get(buttonConfig.$base, 'disabled');
+$disabled: map.get(buttonConfig.$base, "disabled");

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

@@ -1,4 +1,4 @@
-@use '../../../../styles/tools/convert';
+@use "../../../../styles/tools/convert";
 
 $base: (
   font-size: convert.to-rem(14px),

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

@@ -1,5 +1,5 @@
-@use '../../../../styles/tools/generate';
-@use './config';
+@use "../../../../styles/tools/generate";
+@use "./config";
 
 @mixin base($config: config.$base) {
   @include generate.css-map($config);

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

@@ -1,5 +1,5 @@
-@use '../../../../styles/tools/generate';
-@use './config';
+@use "../../../../styles/tools/generate";
+@use "./config";
 
 @mixin base($config: config.$base) {
   @include generate.css-map($config);

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

@@ -1,5 +1,5 @@
-@use '../../../../styles/tools/generate';
-@use './config';
+@use "../../../../styles/tools/generate";
+@use "./config";
 
 @mixin display() {
   border-radius: 100%;

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

@@ -1,5 +1,5 @@
-@use '../../../../styles/tools/generate';
-@use './config';
+@use "../../../../styles/tools/generate";
+@use "./config";
 
 @mixin base($config: config.$base) {
   @include generate.css-map($config);
@@ -10,18 +10,18 @@
 }
 
 @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 {
-    @include generate.css-map($config, 'disabled');
+    @include generate.css-map($config, "disabled");
   }
 
   &.is-invalid {
-    @include generate.css-map($config, 'invalid');
+    @include generate.css-map($config, "invalid");
   }
 }
 

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,25 @@
 }
 
 @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');
+    @include generate.css-map($config, "readonly");
   }
 
   &.is-invalid {
-    @include generate.css-map($config, 'invalid');
+    @include generate.css-map($config, "invalid");
   }
 
   &.is-valid {
@@ -52,10 +52,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/Hero/styles/config.scss

@@ -1,7 +1,6 @@
 @use "../../../styles/tokens/color";
 @use "../../../styles/tokens/space";
 
-
 $sticker-colors: (
   default: (
     background-color: var(--color-surface-secondary),

package/src/components/Icon/styles/export/size.scss

@@ -1,6 +1,6 @@
 @use "sass:string";
-@use 'sass:map' as sassmap;
-@use '../config';
+@use "sass:map" as sassmap;
+@use "../config";
 
 :export {
   @each $key, $value in sassmap.get(config.$sizes, default) {

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

@@ -1,6 +1,6 @@
-@use './config';
-@use '../../../styles/tokens/breakpoint';
-@use '../../../styles/tools/generate';
+@use "./config";
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tools/generate";
 
 @mixin base() {
   fill: currentColor;

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

@@ -1,3 +1,3 @@
-@use '../../../styles/tokens/space';
+@use "../../../styles/tokens/space";
 
-$spacing: space.get('small');
+$spacing: space.get("small");

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

@@ -1,4 +1,4 @@
-@use './mixins';
+@use "./mixins";
 
 .icon-list {
   @include mixins.base();

package/src/components/Loader/LoaderFullscreen.tsx

@@ -0,0 +1,32 @@
+import cx from "classnames";
+import React, { ReactNode } from "react";
+import { Container } from "../Container";
+import { Loader } from "./Loader";
+
+const CLASS_ROOT = "loader-fullscreen";
+
+interface LoaderFullscreenProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const LoaderFullscreen: React.FC<LoaderFullscreenProps> = ({
+  className,
+  children,
+  ...other
+}) => {
+  const classes = cx(CLASS_ROOT, className);
+
+  return (
+    <div className={classes} role="status" aria-live="polite" {...other}>
+      <Container>
+        {children}
+        <Loader size="large" />
+      </Container>
+    </div>
+  );
+};
+
+LoaderFullscreen.displayName = "LoaderFullscreen";
+
+export { LoaderFullscreen };

package/src/components/Loader/index.ts

@@ -1 +1,2 @@
 export { Loader } from "./Loader";
+export { LoaderFullscreen } from "./LoaderFullscreen";

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

@@ -1,16 +1,16 @@
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/convert';
+@use "../../../styles/tokens/color";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
 
 $sizes: (
   default: (
     width: convert.to-rem(40px),
     height: convert.to-rem(40px),
-    margin-right: space.get('small'),
+    margin-right: space.get("small"),
   ),
   large: (
     width: convert.to-rem(50px),
     height: convert.to-rem(50px),
     margin-right: space.get(),
-  )
+  ),
 );

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

@@ -2,6 +2,7 @@
 @use "../../../styles/tools/generate";
 @use "../../../styles/tools/convert";
 @use "../../../styles/tokens/color";
+@use "../../../styles/tokens/space";
 @use "./config";
 
 @keyframes logo-line {
@@ -31,6 +32,10 @@
   flex: 0 0 auto;
   overflow: hidden;
   background-color: var(--color-surface-secondary);
+
+  &:only-child {
+    margin-right: 0 !important;
+  }
 }
 
 @mixin size($size: default) {
@@ -64,3 +69,22 @@
 @mixin messages-large {
   font-size: convert.to-rem(18px);
 }
+
+@mixin fullscreen-base {
+  position: fixed;
+  display: flex;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 500;
+  background-color: #eeeeeef2; // color.$surface-subtle opacity 95%
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+}

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

@@ -1,4 +1,5 @@
 @use "./mixins";
+@use "../../../styles/tokens/color";
 
 @layer components {
   .loader {
@@ -37,4 +38,12 @@
       }
     }
   }
+
+  .loader-fullscreen {
+    @include mixins.fullscreen-base;
+  }
+
+  .is-dark .loader-fullscreen {
+    background-color: #333333f2; // color.$surface-subtle opacity 95%
+  }
 }

package/src/components/Loader/tests/LoaderFullscreen.conformance.test.jsx

@@ -0,0 +1,21 @@
+import { render } from "@testing-library/react";
+import { axe } from "vitest-axe";
+
+import { LoaderFullscreen } from "../";
+
+const example = (
+  <>
+    <LoaderFullscreen />
+    <LoaderFullscreen>Loading...</LoaderFullscreen>
+  </>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate();
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

package/src/components/Loader/tests/LoaderFullscreen.unit.test.jsx

@@ -0,0 +1,41 @@
+import { render } from "@testing-library/react";
+
+import { LoaderFullscreen } from "../";
+
+describe("LoaderFullscreen", () => {
+  describe("initial state", () => {
+    it("has default class loader-fullscreen", () => {
+      const { getByTestId } = render(
+        <LoaderFullscreen data-testid="test-id" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("loader-fullscreen");
+    });
+
+    it("renders a Loader inside", () => {
+      const { container } = render(<LoaderFullscreen />);
+      expect(container.getElementsByClassName("loader").length).toBe(1);
+    });
+
+    it("renders a large Loader by default", () => {
+      const { container } = render(<LoaderFullscreen />);
+      expect(container.getElementsByClassName("loader--large").length).toBe(1);
+    });
+
+    it("has role status", () => {
+      const { getByTestId } = render(
+        <LoaderFullscreen data-testid="test-id" />,
+      );
+      expect(getByTestId("test-id")).toHaveAttribute("role", "status");
+    });
+  });
+
+  describe("passed props", () => {
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <LoaderFullscreen data-testid="test-id" className="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("loader-fullscreen");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+  });
+});

package/src/components/Loader/tests/test.scss

@@ -2,4 +2,4 @@ div[style*="border:2px solid red;"] {
   .loader__line {
     animation: none !important;
   }
-}
+}

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

@@ -1,4 +1,2 @@
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
-
-
+@use "../../../styles/tokens/color";
+@use "../../../styles/tokens/space";

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

@@ -1,5 +1,5 @@
-@use '../../../styles/tools/generate';
-@use './config';
+@use "../../../styles/tools/generate";
+@use "./config";
 
 @mixin base {
   @include generate.css-map(config.$skeleton-base);
@@ -12,7 +12,7 @@
   &::after {
     @include generate.css-map(config.$skeleton-overlay);
 
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;

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

@@ -1,5 +1,5 @@
-@use '../../../styles/tools/generate';
-@use './config';
+@use "../../../styles/tools/generate";
+@use "./config";
 
 @mixin base() {
   position: relative;

package/src/components/Table/docsData.ts

@@ -142,7 +142,6 @@ export const scrollableHeaders: TableHeader[] = [
     key: "col5",
     label:
       "Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.",
-    cellProps: { className: "text-nowrap" },
   },
 ];