@orangesk/orange-design-system 2.0.0-beta.9 → 2.0.0

package/build/components/types/src/components/FeatureAccordion/FeatureAccordion.d.ts

@@ -1,11 +1,22 @@
 import React from "react";
+export interface FeatureAccordionImageSrc {
+    src: string;
+    srcSet?: string;
+}
+export interface FeatureAccordionImageResponsive {
+    default: string;
+    sm?: string;
+    lg?: string;
+    xl?: string;
+    xxl?: string;
+    [key: string]: string | undefined;
+}
+export type FeatureAccordionImage = FeatureAccordionImageSrc | FeatureAccordionImageResponsive;
 interface AccordionProps {
-    /** Color scheme for whole FeatureAccordion */
-    colorScheme?: "light" | "dark" | "white";
     /** Additional CSS classes */
     className?: string;
 }
 declare const FeatureAccordion: (props: AccordionProps & {
     children: React.ReactNode;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export { FeatureAccordion };

package/build/components/types/src/components/FeatureAccordion/FeatureAccordion.static.d.ts

@@ -1,5 +1,4 @@
 interface FeatureAccordionConfig {
-    itemSelector: string;
     bodiesSelector: string;
     buttonSelector: string;
     imageSelector: string;
@@ -7,13 +6,13 @@ interface FeatureAccordionConfig {
 export default class FeatureAccordion {
     private element;
     private config;
-    private items;
     private bodies;
     private buttons;
     private images;
     private activeId;
     constructor(element: HTMLElement, config?: Partial<FeatureAccordionConfig>);
     private init;
+    private generateImagesFromDataAttributes;
     private onClick;
     private setActive;
     destroy(): void;

package/build/components/types/src/components/FeatureAccordion/FeatureAccordionItem.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 import { AccordionItemProps } from "../Accordion/AccordionItem";
 interface FeatureAccordionItemProps extends AccordionItemProps {
+    image?: string | object;
     imageUrl?: string;
     imageAlt?: string;
+    imageSrcSet?: string;
     [key: string]: any;
 }
-declare const FeatureAccordionItem: React.FC<FeatureAccordionItemProps & {
-    defaultOpen?: boolean;
-}>;
+declare const FeatureAccordionItem: React.FC<FeatureAccordionItemProps>;
 export { FeatureAccordionItem };

package/build/components/types/src/components/Footer/Footer.static.d.ts

@@ -0,0 +1,21 @@
+interface FooterSection {
+    element: HTMLElement;
+    toggle: HTMLButtonElement | null;
+    panel: HTMLElement | null;
+}
+export default class Footer {
+    element: HTMLElement;
+    sections: FooterSection[];
+    mediaQueryList: MediaQueryList;
+    onToggleClick: (event: Event) => void;
+    onMediaQueryChange: () => void;
+    constructor(element: HTMLElement);
+    static getInstance(el: HTMLElement): Footer | null;
+    init(): void;
+    private setSectionState;
+    private syncViewportState;
+    private handleToggleClick;
+    destroy(): void;
+    update(): void;
+}
+export {};

package/build/components/types/src/components/Footer/PlanObnovy.d.ts

@@ -0,0 +1 @@
+export declare const PlanObnovyImage: () => import("react/jsx-runtime").JSX.Element;

package/build/components/types/src/components/Footer/constants.d.ts

@@ -1,9 +1,20 @@
 export declare const CLASS_ROOT = "footer";
 export declare const CLASS_CONTAINER = "footer__container";
-export declare const CLASS_GRID = "footer__grid";
 export declare const CLASS_LOGO = "footer__logo";
 export declare const CLASS_TITLE = "footer__title";
 export declare const CLASS_LIST = "footer__list";
+export declare const CLASS_LIST_SPACE_SMALL = "footer__list--space-small";
 export declare const CLASS_LIST_INLINE = "footer__list--inline";
+export declare const CLASS_LIST_STACK_SM_DOWN = "footer__list--stack-sm-down";
+export declare const CLASS_LIST_BREAK_SM_DOWN = "footer__list-break--sm-down";
+export declare const CLASS_LIST_ITEM_LEAD = "footer__list-item--lead";
 export declare const CLASS_BOTTOM = "footer__bottom";
 export declare const CLASS_BOTTOM_COPYRIGHT = "footer__bottom-copyright";
+export declare const CLASS_MENU = "footer__menu";
+export declare const CLASS_MENU_SECTION = "footer__menu-section";
+export declare const CLASS_BAR = "footer__bar";
+export declare const CLASS_MB_LARGE = "footer--mb-xlarge";
+export declare const CLASS_ACCORDION_TOGGLE = "footer__accordion-toggle";
+export declare const CLASS_ACCORDION_ICON = "footer__accordion-icon";
+export declare const CLASS_DIVIDER = "footer__divider";
+export declare const CLASS_DIVIDER_HIDE_XS_DOWN = "footer__divider--hide-xs-down";

package/build/components/types/src/components/Footer/data.d.ts

@@ -1,3 +1,4 @@
+import { SocialName } from "../SocialButton/SocialButton";
 declare const data: {
     columns: {
         title: string;
@@ -12,4 +13,14 @@ declare const data: {
     }[];
     copyright: string;
 };
+export declare const socials: Array<{
+    name: SocialName;
+    url: string;
+    label: string;
+}>;
+export declare const apps: {
+    label: string;
+    src: string;
+    url: string;
+}[];
 export default data;

package/build/components/types/src/components/Footer/static.d.ts

@@ -0,0 +1,21 @@
+import Footer from "./Footer.static";
+import "./styles/style.scss";
+export declare const customFooterModuleSelectorPairs: {
+    Module: typeof Footer;
+    name: string;
+    selector: string;
+}[];
+declare global {
+    interface Window {
+        ODSFooter: {
+            Footer: typeof Footer;
+            instances: Footer[];
+            init: () => void;
+            destroy: () => void;
+            initModulesWithin: (container: any) => {};
+            destroyModulesWithin: (container: any, removeOrphanedNodes?: boolean | undefined) => {};
+        };
+    }
+}
+export { Footer };
+export default Footer;

package/build/components/types/src/components/Forms/Autocomplete/Autocomplete.d.ts

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

package/build/components/types/src/components/Forms/Autocomplete/Autocomplete.static.d.ts

@@ -1,10 +1,13 @@
 export interface AutocompleteConfig {
     autoselect: boolean;
+    autocomplete?: string;
     wrapperClassName: string;
     menuClassName: string;
     optionClassName: string;
     customInputClassName: string;
     displayMenu: string;
+    onConfirm?: (value: unknown) => void;
+    tClearButton: () => string;
     tAssistiveHint: () => string;
 }
 export declare const defaultConfig: AutocompleteConfig;
@@ -12,8 +15,17 @@ export default class Autocomplete {
     private element;
     private config;
     private instance;
+    private teardownClearButton;
     constructor(element: HTMLElement, config?: Partial<AutocompleteConfig>);
     private init;
+    private getWrapper;
+    private getInput;
+    private initEnhancedControls;
+    private syncInputState;
+    private initClearButton;
+    private preventDefault;
+    private stopPropagation;
+    private onClearButtonClick;
     private onPageshow;
     destroy(): void;
     update(): void;

package/build/components/types/src/components/Forms/File/File.d.ts

@@ -5,6 +5,8 @@ export interface FileProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
     id?: string;
     /** Disabled state. */
     isDisabled?: boolean;
+    /** Invalid state */
+    isInvalid?: boolean;
     /** Input name. */
     name?: string;
     /** Size of element. */

package/build/components/types/src/components/Forms/Group/Group.d.ts

@@ -1,6 +1,6 @@
-import React, { ReactNode, HTMLAttributes } from "react";
+import React, { HTMLAttributes, ReactNode } from "react";
 interface ControlShape {
-    type: "text" | "select";
+    type: "autocomplete" | "text" | "select";
     [key: string]: any;
 }
 interface GroupProps extends HTMLAttributes<HTMLDivElement> {
@@ -9,6 +9,8 @@ interface GroupProps extends HTMLAttributes<HTMLDivElement> {
     size?: "large";
     addonSuffix?: ReactNode | ReactNode[];
     className?: string;
+    /** Invalid state */
+    isInvalid?: boolean;
 }
 declare const Group: React.FC<GroupProps>;
 export { Group };

package/build/components/types/src/components/Forms/Group/Item.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, HTMLAttributes } from "react";
+import React, { HTMLAttributes, ReactNode } from "react";
 interface ItemProps extends HTMLAttributes<HTMLDivElement> {
     size?: "default" | "large";
     className?: string;

package/build/components/types/src/components/Forms/InputStepper/InputStepper.d.ts

@@ -10,7 +10,8 @@ export interface InputStepperProps {
     id: string;
     inputClassName?: string;
     isDisabled?: boolean;
-    colorScheme?: "light" | "dark";
+    /** Invalid state */
+    isInvalid?: boolean;
     name?: string;
     nonEditableInput?: boolean;
     className?: string;

package/build/components/types/src/components/Forms/RangeSlider/RangeSlider.d.ts

@@ -29,6 +29,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 */

package/build/components/types/src/components/Forms/Select/index.d.ts

@@ -1,3 +1,3 @@
 import { Select, SelectProps } from "./Select";
 export { Select };
-export declare const MultiSelect: (props: SelectProps) => import("react").JSX.Element;
+export declare const MultiSelect: (props: SelectProps) => import("react/jsx-runtime").JSX.Element;

package/build/components/types/src/components/Forms/TextInput/TextInput.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 export type TextInputSize = "default" | "large";
 export type TextInputWidth = "3ch" | "8ch" | "12ch" | "default" | "fullwidth";
 export type TextInputType = "email" | "hidden" | "password" | "search" | "tel" | "number" | "text" | "url";
+export type TextInputSearchIcon = "none" | "transient" | "persistent";
 export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     /** Input html type. */
     htmlType?: TextInputType;
@@ -27,6 +28,8 @@ export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
     width?: TextInputWidth;
     /** Additional CSS classes */
     className?: string;
+    /** Search icon mode. `transient` shows icon only on empty unfocused input, `persistent` keeps it visible with placeholder. */
+    searchIcon?: TextInputSearchIcon;
 }
 declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 export { TextInput };

package/build/components/types/src/components/Forms/index.d.ts

@@ -6,6 +6,7 @@ export { Fieldset } from "./Fieldset";
 export { File } from "./File";
 export { Group } from "./Group";
 export { Hint } from "./Hint";
+export { InputStepper } from "./InputStepper";
 export { Label } from "./Label";
 export { Message } from "./Message";
 export { Radio } from "./Radio";
@@ -13,4 +14,3 @@ export { RangeSlider } from "./RangeSlider";
 export { Select } from "./Select";
 export { TextArea } from "./TextArea";
 export { TextInput } from "./TextInput";
-export { InputStepper } from "./InputStepper";

package/build/components/types/src/components/Grid/Grid.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 export type GridVAlign = "stretch" | "start" | "end" | "center";
 export type GridHAlign = "end" | "center" | "space-around" | "space-between";
-export type GridRowGapSize = "medium" | "large" | "xlarge" | Record<string, "medium" | "large" | "xlarge">;
-export type GridColumnGapSize = "none";
+export type GridRowGapSize = "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | Record<string, "none" | "xsmall" | "small" | "medium" | "large" | "xlarge">;
+export type GridColumnGapSize = "none" | "small" | "default" | "large" | "xlarge" | Record<string, "none" | "small" | "default" | "large" | "xlarge">;
 export interface GridProps extends React.HTMLAttributes<HTMLElement> {
     vAlign?: GridVAlign;
     hAlign?: GridHAlign;

package/build/components/types/src/components/Grid/GridCol.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
-export type GridColAlign = 'top' | 'middle' | 'bottom' | 'stretch';
-export type GridColSize = number | 'shrink' | 'fill' | 'auto' | Record<string, number | 'shrink' | 'fill' | 'auto'>;
+import React from "react";
+export type GridColAlign = "top" | "middle" | "bottom" | "stretch";
+export type GridColSize = number | "shrink" | "fill" | "auto" | Record<string, number | "shrink" | "fill" | "auto">;
 export interface GridColProps extends React.HTMLAttributes<HTMLElement> {
     align?: GridColAlign;
     tag?: React.ElementType;
     size?: GridColSize;
 }
 export declare const GridCol: {
-    ({ className, align, tag, size, ...other }: GridColProps): React.JSX.Element;
+    ({ className, align, tag, size, ...other }: GridColProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/build/components/types/src/components/Hero/Hero.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-export type HeroBackground = "white" | "black" | "gray";
 export type HeroTextSize = "medium" | "large";
 export type StickerColor = "black" | "orange";
 export interface HeroImageSrc {
@@ -31,8 +30,6 @@ export interface HeroStickerProps {
     className?: string;
 }
 export interface HeroProps {
-    /** Background spanning whole viewport width */
-    colorScheme?: HeroBackground;
     /** Action button props */
     button?: HeroButtonProps;
     /** Main text */

package/build/components/types/src/components/Icon/IconSearch.d.ts

@@ -1,6 +1,6 @@
 export function IconList({ icons, isWide }: {
     icons: any;
     isWide?: boolean | undefined;
-}): import("react").JSX.Element;
-export function IconSearch(): import("react").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
+export function IconSearch(): import("react/jsx-runtime").JSX.Element;
 export function getIconNames(): any[];

package/build/components/types/src/components/Icon/IconSearchWrapper.d.ts

@@ -1 +1 @@
-export declare const IconSearchWrapper: () => import("react").JSX.Element;
+export declare const IconSearchWrapper: () => import("react/jsx-runtime").JSX.Element;

package/build/components/types/src/components/Icon/PictogramSearch.d.ts

@@ -0,0 +1,6 @@
+export function PictogramList({ pictograms, isWide }: {
+    pictograms: any;
+    isWide?: boolean | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export function PictogramSearch(): import("react/jsx-runtime").JSX.Element;
+export function getPictogramNames(): any[];

package/build/components/types/src/components/Icon/PictogramSearchWrapper.d.ts

@@ -0,0 +1 @@
+export declare const PictogramSearchWrapper: () => import("react/jsx-runtime").JSX.Element;