@orangesk/orange-design-system 2.0.0-beta.3 → 2.0.0-beta.5

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,9 @@
+import React, { ReactNode, HTMLAttributes } from "react";
+interface CarouselHeroItemProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children?: ReactNode;
+    image: string;
+    title: string;
+}
+declare const CarouselHeroItem: React.FC<CarouselHeroItemProps>;
+export { CarouselHeroItem };

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

@@ -0,0 +1,34 @@
+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_CONTENT = "carousel-hero__slide-content";
+export declare const CLASS_SLIDE_TITLE = "carousel-hero__slide-title";
+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_CONTROLS = "carousel-hero__controls";
+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/Pagination/Pagination.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import { PaginationItem } from "./PaginationItem";
-interface PaginationItem {
+interface PaginationItemProps {
     /** Page link href */
     href: string;
     /** Text label inside page item */
@@ -16,7 +15,7 @@ interface PaginationProps {
     /** Dark theme */
     colorScheme?: "light" | "dark";
     /** All pagination items - buttons & numbers */
-    items: PaginationItem[];
+    items: PaginationItemProps[];
     /** Accessibility label */
     label?: string;
     /** Additional CSS class name */

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

@@ -1,4 +1,3 @@
-import "../styles/before-components.scss";
 import { Accordion, AccordionItem } from "./Accordion";
 import { Alert } from "./Alert";
 import { Tag, TagButton } from "./Tag";
@@ -9,6 +8,7 @@ import { Breadcrumbs } from "./Breadcrumbs";
 import { Button, ButtonFill, ButtonGhost, ButtonPrimary, IconButton } from "./Button";
 import { Buttons } from "./Buttons";
 import { Carousel } from "./Carousel";
+import { CarouselHero } from "./CarouselHero";
 import { CarouselPromotions } from "./CarouselPromotions";
 import { CartTable } from "./CartTable";
 import { Container } from "./Container";
@@ -41,9 +41,8 @@ import { Tab, TabPanel, Tabs } from "./Tabs";
 import { Table } from "./Table";
 import { Tile } from "./Tile";
 import { Tooltip, InfoTooltip } from "./Tooltip";
-import "../styles/after-components.scss";
 import { Cover } from "./Cover";
 import { Testimonial } from "./Testimonial";
 import { Hero } from "./Hero";
 import { IconList, Item } from "./IconList";
-export { Accordion, AccordionItem, Alert, Autocomplete, Bar, BarBreak, BarItem, BlockAction, BlockActionControl, BlockActionIndicator, BlockActionOverride, BodyBanner, Breadcrumbs, Button, ButtonFill, ButtonGhost, ButtonPrimary, Buttons, Card, CardProductHeader, CardSection, Carousel, CarouselPromotions, CartTable, Checkbox, Container, Controls, Cover, Divider, Dropdown, DropdownDivider, DropdownItem, DropdownToggleButton, Expander, FeatureAccordion, FeatureAccordionItem, Field, Fieldset, File, Gauge, Grid, GridCol, Group, Hero, Hint, Icon, IconButton, IconList, Image, InfoTooltip, InputStepper, Item, Label, Link, List, ListItem, Loader, Message, Modal, ModalBody, ModalCloseButton, ModalProductHeader, ModalTitle, Pagination, Pictogram, Pill, Progress, PromoBanner, PromotionCard, PromotionCardContent, PromotionCardImageWrapper, PromotionCardSection, PromotionCardTitle, Radio, RangeSlider, Section, Select, Skeleton, SkipLink, Stepbar, Sticker, Tab, Table, TabPanel, Tabs, Tag, TagButton, Testimonial, TextArea, TextInput, Tile, Tooltip, };
+export { Accordion, AccordionItem, Alert, Autocomplete, Bar, BarBreak, BarItem, BlockAction, BlockActionControl, BlockActionIndicator, BlockActionOverride, BodyBanner, Breadcrumbs, Button, ButtonFill, ButtonGhost, ButtonPrimary, Buttons, Card, CardProductHeader, CardSection, Carousel, CarouselHero, CarouselPromotions, CartTable, Checkbox, Container, Controls, Cover, Divider, Dropdown, DropdownDivider, DropdownItem, DropdownToggleButton, Expander, FeatureAccordion, FeatureAccordionItem, Field, Fieldset, File, Gauge, Grid, GridCol, Group, Hero, Hint, Icon, IconButton, IconList, Image, InfoTooltip, InputStepper, Item, Label, Link, List, ListItem, Loader, Message, Modal, ModalBody, ModalCloseButton, ModalProductHeader, ModalTitle, Pagination, Pictogram, Pill, Progress, PromoBanner, PromotionCard, PromotionCardContent, PromotionCardImageWrapper, PromotionCardSection, PromotionCardTitle, Radio, RangeSlider, Section, Select, Skeleton, SkipLink, Stepbar, Sticker, Tab, Table, TabPanel, Tabs, Tag, TagButton, Testimonial, TextArea, TextInput, Tile, Tooltip, };

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

@@ -3,6 +3,7 @@ import Autocomplete from "../components/Forms/Autocomplete/Autocomplete.static";
 import DatePicker from "../components/Forms/DatePicker/DatePicker.static";
 import BlockAction from "../components/BlockAction/BlockAction.static";
 import Carousel from "../components/Carousel/Carousel.static";
+import CarouselHero from "../components/CarouselHero/CarouselHero.static";
 import CarouselPromotions from "../components/CarouselPromotions/CarouselPromotions.static";
 import Dropdown from "../components/Dropdown/Dropdown.static";
 import Expander from "../components/Expander/Expander.static";
@@ -46,6 +47,10 @@ export declare const moduleSelectorPairs: ({
     Module: typeof Carousel;
     name: string;
     selector: string;
+} | {
+    Module: typeof CarouselHero;
+    name: string;
+    selector: string;
 } | {
     Module: typeof CarouselPromotions;
     name: string;