@orangesk/orange-design-system 2.0.0-beta.36 → 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/CartTable/tests/CartTable.conformance.test.jsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 
 import { CartTable } from "../";
 

package/src/components/Code/Code.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import { Highlight, Language, PrismTheme, themes } from "prism-react-renderer";
+import React from "react";
 
 import "./styles/style.scss";
 

package/src/components/Container/Container.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cx from "classnames";
+import React, { forwardRef } from "react";
 
 const CLASS_ROOT = "container";
 

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/Container/tests/Container.unit.test.jsx

@@ -24,9 +24,10 @@
  *    - Handles array of children
  *    - Handles React elements as children
  */
-import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
+
+import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import React from "react";
 
 import { Container } from "../";
 

package/src/components/Controls/Controls.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 import { Icon } from "../Icon";
 
 interface IControlsProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {

package/src/components/Controls/tests/Controls.test.jsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import React from "react";
 import "@testing-library/jest-dom/vitest";
 import { Controls } from "../Controls";
 

package/src/components/Cover/Cover.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { Image } from "../Image";
 

package/src/components/Cover/index.ts

@@ -1,2 +1,3 @@
 import { Cover } from "./Cover";
+
 export { Cover };

package/src/components/Cover/tests/Cover.conformance.test.jsx

@@ -1,28 +1,27 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'vitest-axe';
+import { render } from "@testing-library/react";
+import { axe } from "vitest-axe";
 
-import { Cover } from '../';
+import { Cover } from "../";
 
 const example = (
   <>
     <Cover bgSrc="https://placehold.co/800x150" />;
     <Cover
       bgSrc={{
-        default: 'https://placehold.co/800x300',
-        lg: 'https://placehold.co/2560x1000',
-        md: 'https://placehold.co/1200x500',
+        default: "https://placehold.co/800x300",
+        lg: "https://placehold.co/2560x1000",
+        md: "https://placehold.co/1200x500",
       }}
     />
   </>
 );
 
-it('is valid html', () => {
+it("is valid html", () => {
   const { container } = render(example);
   expect(container).toHTMLValidate();
 });
 
-it('is accessible', async () => {
+it("is accessible", async () => {
   const { container } = render(example);
   expect(await axe(container)).toHaveNoViolations();
 });

package/src/components/Cover/tests/Cover.unit.test.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@testing-library/react";
 
 import { Cover } from "../Cover";

package/src/components/Divider/Divider.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode, HTMLAttributes } from "react";
 import cx from "classnames";
+import React, { HTMLAttributes, ReactNode } from "react";
 
 import { Icon } from "../Icon";
 

package/src/components/Divider/tests/Divider.conformance.test.jsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 
 import { Divider } from "../";
 

package/src/components/DocumentationSidebar/DocumentationSidebar.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
-import { usePathname, useRouter } from "next/navigation";
-import Link from "next/link";
 import MiniSearch from "minisearch";
-import { Image } from "../Image";
-import { Icon } from "../Icon";
-import { TextInput } from "../Forms/TextInput";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import React from "react";
 import packageJson from "../../../package.json";
+import { TextInput } from "../Forms/TextInput";
+import { Icon } from "../Icon";
+import { Image } from "../Image";
 
 export interface DocumentationSidebarItem {
   label: string;
@@ -254,7 +254,7 @@ export const DocumentationSidebar: React.FC<DocumentationSidebarProps> = (
         const mergedItems = mergeSearchIndex(items, indexData);
         const updatedSearch = initializeSearch(mergedItems);
         setMiniSearch(updatedSearch);
-      } catch (err) {
+      } catch (_err) {
         // Search index not found or fetch failed, continue with menu items only
         console.debug("Search index not available, using menu items only");
       }

package/src/components/DocumentationSidebar/index.ts

@@ -1,7 +1,7 @@
 import "./styles/style.scss";
 
-export { DocumentationSidebar } from "./DocumentationSidebar";
 export type {
-  DocumentationSidebarProps,
   DocumentationSidebarItem,
+  DocumentationSidebarProps,
 } from "./DocumentationSidebar";
+export { DocumentationSidebar } from "./DocumentationSidebar";

package/src/components/Dropdown/Dropdown.static.ts

@@ -1,5 +1,5 @@
-import { createPopper, Instance, Options } from "@popperjs/core";
 import { transitionHiddenElement } from "@cloudfour/transition-hidden-element";
+import { createPopper, Instance, Options } from "@popperjs/core";
 
 import { keys } from "../../utils";
 

package/src/components/Dropdown/Dropdown.tsx

@@ -1,15 +1,13 @@
 "use client";
 
-import React, { ReactNode } from "react";
 import cx from "classnames";
-
+import React, { ReactNode } from "react";
+import { useStatic } from "@/utils/hooks";
 import { Bar, BarItem } from "../Bar";
 import { IconButton } from "../Button";
-
+import { ButtonProps } from "../Button/Button";
 import DropdownButtonStatic from "./Dropdown.static";
 import { DropdownToggleButton } from "./DropdownToggleButton";
-import { useStatic } from "@/utils/hooks";
-import { ButtonProps } from "../Button/Button";
 
 export const CLASS_ROOT = "dropdown";
 

package/src/components/Dropdown/DropdownDivider.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 const CLASS_ROOT = "dropdown__divider";
 

package/src/components/Dropdown/DropdownItem.tsx

@@ -1,5 +1,5 @@
-import React, { AnchorHTMLAttributes, ReactNode } from "react";
 import cx from "classnames";
+import React, { AnchorHTMLAttributes, ReactNode } from "react";
 
 const CLASS_ROOT = "dropdown__item";
 

package/src/components/Dropdown/DropdownToggleButton.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import ToggleButton from "../../docs/utils/ToggleButton";
 

package/src/components/Dropdown/index.ts

@@ -1,4 +1,4 @@
 export { Dropdown } from "./Dropdown";
-export { DropdownItem } from "./DropdownItem";
 export { DropdownDivider } from "./DropdownDivider";
+export { DropdownItem } from "./DropdownItem";
 export { DropdownToggleButton } from "./DropdownToggleButton";

package/src/components/Dropdown/tests/Dropdown.conformance.test.jsx

@@ -1,7 +1,7 @@
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 
-import { Dropdown, DropdownItem, DropdownDivider } from "../";
+import { Dropdown, DropdownDivider, DropdownItem } from "../";
 
 const example = (
   <>

package/src/components/Dropdown/tests/Dropdown.unit.test.jsx

@@ -1,7 +1,6 @@
-import React from "react";
 import { render, screen } from "@testing-library/react";
+import { DropdownDivider, DropdownItem } from "../";
 import { Dropdown } from "../Dropdown";
-import { DropdownItem, DropdownDivider } from "../";
 
 describe("Dropdown Component Unit Tests", () => {
   it("renders with base class", () => {

package/src/components/Expander/Expander.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React, { useMemo } from "react";
 import cx from "classnames";
+import React, { useMemo } from "react";
 
 import { useStatic } from "../../utils/hooks";
 import { Icon } from "../Icon";

package/src/components/Expander/tests/Expander.conformance.test.jsx

@@ -1,9 +1,7 @@
-import React from "react";
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
-
-import { Expander } from "../Expander";
+import { axe } from "vitest-axe";
 import { Icon } from "../../Icon";
+import { Expander } from "../Expander";
 
 const example = (
   <>

package/src/components/Expander/tests/Expander.unit.test.jsx

@@ -1,8 +1,6 @@
-import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
-
-import { Expander } from "../Expander";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { Icon } from "../../Icon";
+import { Expander } from "../Expander";
 
 describe("Expander", () => {
   it("renders basic expander with summary text", () => {

package/src/components/FeatureAccordion/FeatureAccordion.tsx

@@ -1,12 +1,12 @@
 "use client";
 
+import cx from "classnames";
 import React, { RefCallback, useMemo } from "react";
+import { useStatic } from "../../utils/hooks";
 import { Accordion } from "../Accordion/Accordion";
 import { Grid } from "../Grid/Grid";
 import { GridCol } from "../Grid/GridCol";
 import { Image } from "../Image";
-import cx from "classnames";
-import { useStatic } from "../../utils/hooks";
 import FeatureAccordionStatic from "./FeatureAccordion.static";
 
 const CLASS_ROOT = "feature-accordion";

package/src/components/FeatureAccordion/FeatureAccordionItem.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
+import React from "react";
 import { AccordionItem, AccordionItemProps } from "../Accordion/AccordionItem";
 
 const CLASS_ROOT = "feature-accordion__item";
@@ -41,4 +41,5 @@ const FeatureAccordionItem: React.FC<FeatureAccordionItemProps> = ({
 };
 
 FeatureAccordionItem.displayName = "FeatureAccordionItem";
+
 export { FeatureAccordionItem };

package/src/components/FeatureAccordion/tests/FeatureAccordion.conformance.test.jsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 import { FeatureAccordion } from "../FeatureAccordion";
 import { FeatureAccordionItem } from "../FeatureAccordionItem";
 

package/src/components/FeatureAccordion/tests/FeatureAccordion.unit.test.jsx

@@ -1,8 +1,7 @@
-import React from "react";
-import { render, fireEvent, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { FeatureAccordion } from "../FeatureAccordion";
-import { FeatureAccordionItem } from "../FeatureAccordionItem";
 import FeatureAccordionStatic from "../FeatureAccordion.static";
+import { FeatureAccordionItem } from "../FeatureAccordionItem";
 
 // Helper function to initialize feature accordion static behavior
 const initializeFeatureAccordion = (container) => {

package/src/components/Footer/Footer.tsx

@@ -1,7 +1,6 @@
-import React from "react";
 import cx from "classnames";
-
-import footerData, { apps, socials } from "./data";
+import React from "react";
+import { SocialButton } from "../SocialButton";
 import {
   CLASS_ACCORDION_ICON,
   CLASS_ACCORDION_TOGGLE,
@@ -15,8 +14,8 @@ import {
   CLASS_LIST_BREAK_SM_DOWN,
   CLASS_LIST_INLINE,
   CLASS_LIST_ITEM_LEAD,
-  CLASS_LIST_STACK_SM_DOWN,
   CLASS_LIST_SPACE_SMALL,
+  CLASS_LIST_STACK_SM_DOWN,
   CLASS_LOGO,
   CLASS_MB_LARGE,
   CLASS_MENU,
@@ -24,7 +23,7 @@ import {
   CLASS_ROOT,
   CLASS_TITLE,
 } from "./constants";
-import { SocialButton } from "../SocialButton";
+import footerData, { apps, socials } from "./data";
 import { PlanObnovyImage } from "./PlanObnovy";
 
 interface FooterProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/components/Footer/static.ts

@@ -1,8 +1,8 @@
-import Footer from "./Footer.static";
 import moduleFactory, {
-  initModulesWithin,
   destroyModulesWithin,
+  initModulesWithin,
 } from "../../scripts/lib/moduleFactory";
+import Footer from "./Footer.static";
 import "./styles/style.scss";
 
 export const customFooterModuleSelectorPairs = [

package/src/components/Footer/tests/Footer.unit.test.jsx

@@ -1,6 +1,6 @@
 import { render } from "@testing-library/react";
-import { Footer } from "../Footer";
 import footerData from "../data";
+import { Footer } from "../Footer";
 
 describe("Footer", () => {
   it("renders without crashing", () => {

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

@@ -1,18 +1,21 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { useStatic } from "../../../utils/hooks";
-import AutocompleteStatic from "./Autocomplete.static";
 import { Select } from "../Select";
+import AutocompleteStatic from "./Autocomplete.static";
 
 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/Checkbox.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 const CLASS_ROOT = "checkbox";
 

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

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