@orangesk/orange-design-system 2.0.0-beta.1 → 2.0.0-beta.11

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

@@ -4,6 +4,8 @@ interface AccordionProps {
     headingLevel?: number;
     /** Accordion is enclosed in another component */
     isEnclosed?: boolean;
+    /** If true, the last item will not have a bottom border */
+    lastItemNoBottomBorder?: boolean;
     /** Adjustable spacing */
     size?: "large";
     /** Additional CSS classes */

package/build/components/types/src/components/Accordion/AccordionHeader.d.ts

@@ -1,11 +1,12 @@
 import React from "react";
-interface AccordionHeaderProps {
+export interface AccordionHeaderProps {
     /** Header id */
     id: string;
     /** Active state */
     isActive?: boolean;
     /** Header title */
     title: string;
+    renderTitle?: (title: string) => React.ReactNode;
     /** Additional CSS classes */
     className?: string;
     /** Custom toggle attribute for specialized accordions (defaults to 'data-accordion-toggle') */

package/build/components/types/src/components/Accordion/AccordionItem.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
-export interface AccordionItemProps {
+import { type AccordionHeaderProps } from "./AccordionHeader";
+export interface AccordionItemProps extends Pick<AccordionHeaderProps, "renderTitle"> {
     /** Accordion item id (automatically generated by default)  */
     id?: string;
     /** Open state indication */

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

@@ -11,7 +11,7 @@ interface AnchorNavigationProps {
     children?: React.ReactNode;
 }
 declare const AnchorNavigation: {
-    ({ items, className, colorScheme, children, }: AnchorNavigationProps): React.JSX.Element;
+    ({ items, className, colorScheme, children, ...other }: AnchorNavigationProps): React.JSX.Element;
     displayName: string;
 };
 export { AnchorNavigation };

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

@@ -1,24 +1,26 @@
-interface AnchorNavigationConfig {
-    itemSelector: string;
-}
-export declare const defaultConfig: AnchorNavigationConfig;
-export declare const configDocs: {
-    itemSelector: string;
-};
 export default class AnchorNavigation {
     private element;
-    private config;
-    private items;
-    private activeItemIndex;
-    constructor(element: HTMLElement, config?: Partial<AnchorNavigationConfig>);
+    private megamenuElement;
+    private resizeObserver;
+    private scrollHandler;
+    private scrollSpyHandler;
+    private scrollEndHandler;
+    private resizeHandler;
+    private isAutoScrolling;
+    private navLinks;
+    private sections;
+    private currentPath;
+    private lastActiveIndex;
+    constructor(element: HTMLElement);
     static getInstance(el: HTMLElement): AnchorNavigation | null;
+    private findMegamenuElement;
+    private updateStickyPosition;
+    private setupMegamenuObserver;
+    private setupScrollSpy;
+    private initScrollSpy;
+    private handleScrollSpy;
+    private handleScrollEnd;
     private init;
     destroy(): void;
     update(): void;
-    private isActive;
-    private handleClick;
-    private toggleItem;
-    activateNthItem(index: number): void;
-    getActiveItemIndex(): number | null;
 }
-export {};

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

@@ -1,2 +1 @@
-import "./styles/style.scss";
 export { AnchorNavigation } from "./AnchorNavigation";

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

@@ -2,7 +2,6 @@ import React, { ReactElement } from "react";
 import { BlockAction } from "./BlockAction";
 import { BlockActionControl } from "./BlockActionControl";
 import { BlockActionIndicator } from "./BlockActionIndicator";
-import "./styles/style.scss";
 export interface BlockActionOverrideProps {
     /** 1 and only one single element */
     children: ReactElement;

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

@@ -1,2 +1 @@
-import "./styles/style.scss";
 export { BodyBanner } from "./BodyBanner";

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

@@ -13,6 +13,7 @@ interface CommonProps {
     type?: ButtonType;
     className?: string;
     children?: React.ReactNode;
+    preserveWidth?: boolean;
 }
 type AnchorProps = CommonProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps | "type" | "ref"> & {
     href: string;

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

@@ -1,7 +1,6 @@
 import React from "react";
 import { Button, ButtonProps } from "./Button";
 import { IconButton } from "./IconButton";
-import "./styles/style.scss";
 export declare const ButtonPrimary: {
     (props: ButtonProps): React.JSX.Element;
     displayName: string;

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

@@ -1,12 +1,10 @@
 import React from "react";
-export declare const cardColors: readonly ["white", "black", "orange"];
+export declare const cardColors: readonly ["background-primary", "background-secondary", "background-contrast", "background-accent", "background-accent1-blog", "background-accent2-blog", "fill-subtle", "fill-accent1", "fill-accent2", "fill-accent3", "fill-accent4", "fill-accent5"];
 export type CardColor = (typeof cardColors)[number];
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Custom background color */
     color?: CardColor;
-    /** Add border */
-    hasBorder?: boolean;
-    hasShadow?: boolean;
+    noBorder?: boolean;
 }
 export declare const CLASS_ROOT = "card";
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;

package/build/components/types/src/components/Card/CardSection.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-export declare const cardSectionColors: readonly ["orange", "gray", "blue", "green", "pink", "yellow", "violet"];
-export type CardSectionColor = (typeof cardSectionColors)[number];
+import { cardColors } from "./Card";
+export type CardSectionColor = (typeof cardColors)[number];
 interface CardSectionProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Custom background color */
     color?: CardSectionColor;

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

@@ -6,6 +6,10 @@ interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
     colorScheme?: "light" | "dark";
     /** Carousel items */
     items: ReactNode[];
+    /** Always show scrollbar and hide dots */
+    showScrollbar?: boolean;
+    /** Make carousel bleed to the right edge of screen while keeping left aligned with container */
+    bleedRight?: boolean;
     className?: string;
 }
 declare const Carousel: React.FC<CarouselProps>;

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

@@ -11,6 +11,7 @@ export default class Carousel {
     init(): void;
     getElements(): void;
     getCustomOptions(): void;
+    adjustConfigForBleedRight(): void;
     /**
      * Handles the slide change event on the carousel.
      * Updates the tooltip position for the active slide and hides tooltips for non-active slides.

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

@@ -13,6 +13,8 @@ export declare const CLASS_SCROLLBAR = "carousel__scrollbar";
 export declare const CLASS_SCROLLBAR_HORIZONTAL = "carousel__scrollbar-horizontal";
 export declare const CLASS_SCROLLBAR_DRAG = "carousel__scrollbar-drag";
 export declare const CLASS_ACTIVE = "is-active";
+export declare const CLASS_SCROLLBAR_VARIANT = "carousel--scrollbar";
+export declare const CLASS_BLEED_RIGHT = "carousel--bleed-right";
 export declare const SELECTOR_VIEWPORT = ".carousel__viewport";
 export declare const SELECTOR_TRACK = ".carousel__track";
 export declare const SELECTOR_PREV = ".carousel__prev";

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

@@ -0,0 +1,18 @@
+import React, { ReactNode } from "react";
+import { CarouselHeroItem } from "./CarouselHeroItem";
+interface TabItem {
+    label: string;
+    [key: string]: any;
+}
+interface CarouselHeroProps {
+    className?: string;
+    swiperOptions?: Record<string, any>;
+    colorScheme?: "light" | "dark";
+    children?: ReactNode;
+    tabs?: TabItem[];
+    interval?: number;
+    [key: string]: any;
+}
+declare const CarouselHero: React.FC<CarouselHeroProps>;
+export { CarouselHero, CarouselHeroItem };
+export type { CarouselHeroProps, TabItem };

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

@@ -0,0 +1,47 @@
+import type { SwiperOptions } from "swiper/types";
+import { Swiper } from "swiper";
+export declare const defaultConfig: SwiperOptions;
+export default class CarouselHero {
+    element: HTMLElement;
+    config: SwiperOptions;
+    viewport: HTMLElement;
+    instance: Swiper;
+    tabs: HTMLElement[];
+    _dotAnimationJustStarted: boolean;
+    _isDragging: boolean;
+    private _boundTabClick;
+    private _boundPrevClick;
+    private _boundNextClick;
+    private _boundPlayPauseClick;
+    constructor(element: HTMLElement, config?: Partial<SwiperOptions>);
+    init(): void;
+    getElements(): void;
+    setupConfig(): void;
+    createSwiper(): void;
+    setupEventListeners(): void;
+    private _onUserNavigation;
+    _onTabClick(e: Event): void;
+    private _onPlayPauseClick;
+    private isAutoplayRunning;
+    private _stopAutoplayIfRunning;
+    private _onAutoplayStart;
+    private _onAutoplayStop;
+    toggleAutoplay(): void;
+    goToSlide(index: number): void;
+    updateStates(): void;
+    private updatePaginationBullets;
+    scrollActiveTabIntoView(activeIndex: number): void;
+    updatePlayPauseIcon(): void;
+    renderPaginationDots(): void;
+    startDotAnimation(force?: boolean): void;
+    restartDotAnimation(): void;
+    stopDotAnimation(): void;
+    private _getPaginationButtons;
+    private _getActiveBulletClass;
+    private _getActiveBulletButton;
+    createSvgDot(): SVGSVGElement;
+    hasAutoplay(): boolean;
+    getAnimationDuration(): number;
+    destroy(): void;
+    static getInstance(el: HTMLElement): CarouselHero | null;
+}

package/build/components/types/src/components/CarouselHero/CarouselHeroItem.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode, HTMLAttributes } from "react";
+interface CarouselHeroItemProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children?: ReactNode;
+    image: string;
+}
+declare const CarouselHeroItem: React.FC<CarouselHeroItemProps>;
+export { CarouselHeroItem };

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

@@ -0,0 +1,33 @@
+export declare const CLASS_ROOT = "carousel-hero";
+export declare const CLASS_VIEWPORT_WRAPPER = "carousel-hero__viewport-wrapper";
+export declare const CLASS_VIEWPORT = "carousel-hero__viewport";
+export declare const CLASS_TRACK = "carousel-hero__track";
+export declare const CLASS_SLIDE = "carousel-hero__slide";
+export declare const CLASS_SLIDE_CONTAINER = "carousel-hero__slide-container";
+export declare const CLASS_SLIDE_CONTENT = "carousel-hero__slide-content";
+export declare const CLASS_SLIDE_SUBTITLE = "carousel-hero__slide-subtitle";
+export declare const CLASS_SLIDE_IMAGE_WRAPPER = "carousel-hero__slide-image-wrapper";
+export declare const CLASS_SLIDE_IMAGE = "carousel-hero__slide-image";
+export declare const CLASS_SLIDE_BUTTON = "carousel-hero__slide-button";
+export declare const CLASS_PREV = "carousel-hero__prev";
+export declare const CLASS_NEXT = "carousel-hero__next";
+export declare const CLASS_PLAY_PAUSE = "carousel-hero__play-pause";
+export declare const CLASS_TABS = "carousel-hero__tabs";
+export declare const CLASS_TAB = "carousel-hero__tab";
+export declare const CLASS_PAGINATION = "carousel-hero__pagination";
+export declare const CLASS_PAGINATION_ITEM = "carousel-hero__pagination-item";
+export declare const CLASS_PAGINATION_SVG = "carousel-hero__pagination-svg";
+export declare const CLASS_PAGINATION_CIRCLE = "carousel-hero__pagination-circle";
+export declare const CLASS_NAVIGATION = "carousel-hero__navigation";
+export declare const CLASS_ACTIVE = "is-active";
+export declare const CLASS_PLAYING = "is-playing";
+export declare const CLASS_PAUSED = "is-paused";
+export declare const SELECTOR_VIEWPORT = ".carousel-hero__viewport";
+export declare const SELECTOR_TRACK = ".carousel-hero__track";
+export declare const SELECTOR_PREV = ".carousel-hero__prev";
+export declare const SELECTOR_NEXT = ".carousel-hero__next";
+export declare const SELECTOR_PLAY_PAUSE = ".carousel-hero__play-pause";
+export declare const SELECTOR_TABS = ".carousel-hero__tabs";
+export declare const SELECTOR_TAB = ".carousel-hero__tab";
+export declare const SELECTOR_PAGINATION = ".carousel-hero__pagination";
+export declare const SELECTOR_ACTIVE = ".is-active";

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

@@ -0,0 +1,2 @@
+export { CarouselHero, CarouselHeroItem } from "./CarouselHero";
+export type { CarouselHeroProps, TabItem } from "./CarouselHero";

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

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

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

@@ -1,13 +1,9 @@
 import React, { ReactNode, HTMLAttributes } from "react";
 export interface DividerProps extends Omit<HTMLAttributes<HTMLDivElement>, "content"> {
-    /** Custom background color */
-    color?: "black" | "white";
     /** Custom content inside divider */
     content?: ReactNode;
     /** Icon which will be rendered inside divider */
     icon?: string;
-    /** Divider line has width of 1px */
-    thinLine?: boolean;
 }
 declare const Divider: React.FC<DividerProps>;
 export { Divider };

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

@@ -15,8 +15,8 @@ interface ExpanderProps {
     className?: string;
     /** Child elements */
     children?: React.ReactNode;
-    /** Additional HTML attributes */
-    [key: string]: any;
+    /** Expander takes full width of its container */
+    isFullWidth?: boolean;
 }
 export declare const Expander: React.FC<ExpanderProps>;
 export {};

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

@@ -1,12 +1,8 @@
 import React from "react";
-import { SectionProps } from "../Section/Section";
 import footerData from "./data";
 interface FooterProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Sets Footer to use inverse color scheme */
-    isInverse?: boolean;
-    /** Custom data to override default footer data */
     data?: typeof footerData;
     className?: string;
 }
-declare const Footer: React.FC<FooterProps & SectionProps>;
+declare const Footer: React.FC<FooterProps>;
 export { Footer };

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

@@ -0,0 +1,9 @@
+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_INLINE = "footer__list--inline";
+export declare const CLASS_BOTTOM = "footer__bottom";
+export declare const CLASS_BOTTOM_COPYRIGHT = "footer__bottom-copyright";

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

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