@orangesk/orange-design-system 2.0.0-beta.30 → 2.0.0-beta.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -7
- package/build/appstore.svg +31 -0
- package/build/components/Breadcrumbs/style.css +1 -1
- package/build/components/Breadcrumbs/style.css.map +1 -1
- package/build/components/Carousel/style.css +1 -1
- package/build/components/Carousel/style.css.map +1 -1
- package/build/components/Footer/style.css +1 -1
- package/build/components/Footer/style.css.map +1 -1
- package/build/components/Megamenu/style.css +1 -1
- package/build/components/Megamenu/style.css.map +1 -1
- package/build/components/Preview/style.css +1 -1
- package/build/components/Preview/style.css.map +1 -1
- package/build/components/PromoBanner/style.css +1 -1
- package/build/components/PromoBanner/style.css.map +1 -1
- package/build/components/index.js +1 -1
- package/build/components/index.js.map +1 -1
- package/build/components/tsconfig.tsbuildinfo +1 -1
- package/build/components/types/index.d.ts +17 -2
- package/build/components/types/src/components/Carousel/Carousel.static.d.ts +1 -11
- package/build/components/types/src/components/Footer/Footer.static.d.ts +21 -0
- package/build/components/types/src/components/Footer/constants.d.ts +12 -2
- package/build/components/types/src/components/Footer/data.d.ts +5 -0
- package/build/components/types/src/components/Footer/static.d.ts +21 -0
- package/build/components/types/src/components/Megamenu/Megamenu.d.ts +4 -2
- package/build/components/types/src/components/Megamenu/Megamenu.static.d.ts +16 -5
- package/build/components/types/src/components/Megamenu/MegamenuBlog.d.ts +1 -1
- package/build/components/types/src/components/Megamenu/MegamenuSearchContent.d.ts +10 -0
- package/build/components/types/src/components/Megamenu/MyOrangeMobilePanel.d.ts +6 -0
- package/build/components/types/src/components/Megamenu/constants.d.ts +15 -0
- package/build/components/types/src/components/Megamenu/data.d.ts +21 -0
- package/build/components/types/src/components/Megamenu/ids.d.ts +11 -0
- package/build/components/types/src/components/PromoBanner/PromoBanner.d.ts +5 -1
- package/build/components/types/src/components/index.d.ts +2 -1
- package/build/googleplay.svg +52 -0
- package/build/lib/base.css.map +1 -1
- package/build/lib/components.css +1 -1
- package/build/lib/components.css.map +1 -1
- package/build/lib/footer.css +1 -1
- package/build/lib/footer.css.map +1 -1
- package/build/lib/footer.js +2 -0
- package/build/lib/footer.js.map +1 -0
- package/build/lib/megamenu.css +1 -1
- package/build/lib/megamenu.css.map +1 -1
- package/build/lib/megamenu.js +1 -1
- package/build/lib/megamenu.js.map +1 -1
- package/build/lib/scripts.js +1 -1
- package/build/lib/scripts.js.map +1 -1
- package/build/lib/style.css +1 -1
- package/build/lib/style.css.map +1 -1
- package/build/lib/tsconfig.tsbuildinfo +1 -1
- package/build/lib/utilities.css +1 -1
- package/build/lib/utilities.css.map +1 -1
- package/build/search-index.json +8 -4
- package/package.json +12 -12
- package/src/components/Breadcrumbs/styles/mixins.scss +6 -1
- package/src/components/Carousel/Carousel.static.ts +60 -89
- package/src/components/Carousel/styles/mixins.scss +4 -12
- package/src/components/Footer/Footer.static.ts +130 -0
- package/src/components/Footer/Footer.tsx +142 -62
- package/src/components/Footer/constants.ts +12 -2
- package/src/components/Footer/data.ts +13 -0
- package/src/components/Footer/static.ts +59 -0
- package/src/components/Footer/styles/mixins.scss +122 -18
- package/src/components/Footer/styles/style.scss +63 -4
- package/src/components/Footer/tests/Footer.unit.test.js +2 -2
- package/src/components/Megamenu/Megamenu.static.ts +200 -90
- package/src/components/Megamenu/Megamenu.tsx +363 -615
- package/src/components/Megamenu/MegamenuBlog.tsx +192 -73
- package/src/components/Megamenu/MegamenuSearchContent.tsx +74 -0
- package/src/components/Megamenu/MyOrangeMobilePanel.tsx +127 -0
- package/src/components/Megamenu/constants.ts +15 -0
- package/src/components/Megamenu/data.ts +231 -0
- package/src/components/Megamenu/ids.ts +35 -0
- package/src/components/Megamenu/styles/mixins.scss +223 -16
- package/src/components/Megamenu/styles/style.scss +64 -0
- package/src/components/Preview/styles/style.scss +2 -1
- package/src/components/PromoBanner/PromoBanner.tsx +12 -1
- package/src/components/PromoBanner/styles/mixins.scss +31 -7
- package/src/components/PromoBanner/styles/style.scss +41 -0
- package/src/components/PromoBanner/tests/PromoBanner.unit.test.js +44 -0
- package/src/components/index.ts +3 -0
- package/src/styles/utilities/horizontal-scroll.scss +28 -11
|
@@ -650,6 +650,17 @@ interface LoaderProps {
|
|
|
650
650
|
}
|
|
651
651
|
declare const Loader: React$1.FC<LoaderProps>;
|
|
652
652
|
|
|
653
|
+
type MegamenuProps = {
|
|
654
|
+
className?: string;
|
|
655
|
+
title?: string;
|
|
656
|
+
isSticky?: boolean;
|
|
657
|
+
searchEmpty?: boolean;
|
|
658
|
+
searchFilled?: boolean;
|
|
659
|
+
};
|
|
660
|
+
declare const Megamenu: ({ className, title, isSticky, searchEmpty, searchFilled, }: MegamenuProps) => react_jsx_runtime.JSX.Element;
|
|
661
|
+
|
|
662
|
+
declare const MegamenuBlog: ({ className, title, isSticky, searchEmpty, searchFilled, }: MegamenuProps) => react_jsx_runtime.JSX.Element;
|
|
663
|
+
|
|
653
664
|
declare const sizes$1: readonly ["small", "large"];
|
|
654
665
|
type ModalSize = (typeof sizes$1)[number];
|
|
655
666
|
interface ModalProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
@@ -840,6 +851,10 @@ interface PromoBannerProps {
|
|
|
840
851
|
className?: string;
|
|
841
852
|
image?: string;
|
|
842
853
|
alignImage?: "bottom" | "top";
|
|
854
|
+
/** Remove top padding from item on sm and smaller breakpoints */
|
|
855
|
+
flushTopSmDown?: boolean;
|
|
856
|
+
/** Remove bottom padding from item on sm and smaller breakpoints */
|
|
857
|
+
flushBottomSmDown?: boolean;
|
|
843
858
|
imageFullWidth?: boolean;
|
|
844
859
|
/** Make image extend to the edge of viewport even when inside container */
|
|
845
860
|
bleedImage?: boolean;
|
|
@@ -848,7 +863,7 @@ interface PromoBannerProps {
|
|
|
848
863
|
imageClassName?: string;
|
|
849
864
|
variant?: "vertical" | "reverse";
|
|
850
865
|
}
|
|
851
|
-
declare const PromoBanner: ({ image, className, alignImage, bleedImage, children, itemClassName, imageClassName, variant, imageFullWidth, }: PromoBannerProps) => react_jsx_runtime.JSX.Element;
|
|
866
|
+
declare const PromoBanner: ({ image, className, alignImage, flushTopSmDown, flushBottomSmDown, bleedImage, children, itemClassName, imageClassName, variant, imageFullWidth, }: PromoBannerProps) => react_jsx_runtime.JSX.Element;
|
|
852
867
|
|
|
853
868
|
interface PromotionCardProps {
|
|
854
869
|
className?: string;
|
|
@@ -1506,4 +1521,4 @@ type LinkProps = CommonProps & Omit<React$1.AnchorHTMLAttributes<HTMLAnchorEleme
|
|
|
1506
1521
|
type SocialButtonProps = ButtonProps | LinkProps;
|
|
1507
1522
|
declare const SocialButton: React$1.ForwardRefExoticComponent<SocialButtonProps & React$1.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
1508
1523
|
|
|
1509
|
-
export { Accordion, AccordionItem, Alert, AnchorNavigation, Autocomplete, Bar, BarBreak, BarItem, BlockAction, BlockActionControl, BlockActionIndicator, BlockActionOverride, BodyBanner, Breadcrumbs, Button, ButtonFill, ButtonGhost, ButtonPrimary, Buttons, Card, CardProductHeader, CardSection, Carousel, CarouselHero, CarouselHeroItem, 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, ModalProductFooter, ModalProductHeader, ModalTitle, Pagination, Pictogram, Pill, Progress, PromoBanner, PromotionCard, PromotionCardContent, PromotionCardImageWrapper, PromotionCardSection, PromotionCardTitle, Radio, RangeSlider, Section, Select, Skeleton, SkipLink, SocialButton, Stepbar, Sticker, Tab, TabPanel, Table, Tabs, Tag, TagButton, Testimonial, TextArea, TextInput, Tile, Tooltip };
|
|
1524
|
+
export { Accordion, AccordionItem, Alert, AnchorNavigation, Autocomplete, Bar, BarBreak, BarItem, BlockAction, BlockActionControl, BlockActionIndicator, BlockActionOverride, BodyBanner, Breadcrumbs, Button, ButtonFill, ButtonGhost, ButtonPrimary, Buttons, Card, CardProductHeader, CardSection, Carousel, CarouselHero, CarouselHeroItem, 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, Megamenu, MegamenuBlog, Message, Modal, ModalBody, ModalCloseButton, ModalProductFooter, ModalProductHeader, ModalTitle, Pagination, Pictogram, Pill, Progress, PromoBanner, PromotionCard, PromotionCardContent, PromotionCardImageWrapper, PromotionCardSection, PromotionCardTitle, Radio, RangeSlider, Section, Select, Skeleton, SkipLink, SocialButton, Stepbar, Sticker, Tab, TabPanel, Table, Tabs, Tag, TagButton, Testimonial, TextArea, TextInput, Tile, Tooltip };
|
|
@@ -32,17 +32,7 @@ export default class Carousel {
|
|
|
32
32
|
* This compensates for the 20px padding-right on each slide, ensuring proper grid alignment.
|
|
33
33
|
*/
|
|
34
34
|
private applyTrackMarginCompensation;
|
|
35
|
-
|
|
36
|
-
* Calculate how much the carousel should extend beyond the container (bleed effect).
|
|
37
|
-
* On screens 2560px and wider, the bleed effect is disabled.
|
|
38
|
-
* Also disabled when all slides fit on screen (slidesCount <= slidesPerView).
|
|
39
|
-
*/
|
|
40
|
-
private calculateBleedAmount;
|
|
41
|
-
/**
|
|
42
|
-
* Apply the bleed offset to extend the carousel beyond the container edge.
|
|
43
|
-
* Only applies when content exceeds the visible area.
|
|
44
|
-
*/
|
|
45
|
-
private applyBleedOffset;
|
|
35
|
+
private applyBleedInsets;
|
|
46
36
|
/**
|
|
47
37
|
* Configure bleed-right carousel to extend beyond the container edge.
|
|
48
38
|
* Calculates the exact offset needed for the carousel to reach the viewport edge
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
interface FooterSection {
|
|
2
|
+
element: HTMLElement;
|
|
3
|
+
toggle: HTMLButtonElement | null;
|
|
4
|
+
panel: HTMLElement | null;
|
|
5
|
+
}
|
|
6
|
+
export default class Footer {
|
|
7
|
+
element: HTMLElement;
|
|
8
|
+
sections: FooterSection[];
|
|
9
|
+
mediaQueryList: MediaQueryList;
|
|
10
|
+
onToggleClick: (event: Event) => void;
|
|
11
|
+
onMediaQueryChange: () => void;
|
|
12
|
+
constructor(element: HTMLElement);
|
|
13
|
+
static getInstance(el: HTMLElement): Footer | null;
|
|
14
|
+
init(): void;
|
|
15
|
+
private setSectionState;
|
|
16
|
+
private syncViewportState;
|
|
17
|
+
private handleToggleClick;
|
|
18
|
+
destroy(): void;
|
|
19
|
+
update(): void;
|
|
20
|
+
}
|
|
21
|
+
export {};
|
|
@@ -1,10 +1,20 @@
|
|
|
1
1
|
export declare const CLASS_ROOT = "footer";
|
|
2
2
|
export declare const CLASS_CONTAINER = "footer__container";
|
|
3
|
-
export declare const CLASS_GRID = "footer__grid";
|
|
4
3
|
export declare const CLASS_LOGO = "footer__logo";
|
|
5
4
|
export declare const CLASS_TITLE = "footer__title";
|
|
6
5
|
export declare const CLASS_LIST = "footer__list";
|
|
6
|
+
export declare const CLASS_LIST_SPACE_SMALL = "footer__list--space-small";
|
|
7
7
|
export declare const CLASS_LIST_INLINE = "footer__list--inline";
|
|
8
|
-
export declare const
|
|
8
|
+
export declare const CLASS_LIST_STACK_SM_DOWN = "footer__list--stack-sm-down";
|
|
9
|
+
export declare const CLASS_LIST_BREAK_SM_DOWN = "footer__list-break--sm-down";
|
|
10
|
+
export declare const CLASS_LIST_ITEM_LEAD = "footer__list-item--lead";
|
|
9
11
|
export declare const CLASS_BOTTOM = "footer__bottom";
|
|
10
12
|
export declare const CLASS_BOTTOM_COPYRIGHT = "footer__bottom-copyright";
|
|
13
|
+
export declare const CLASS_MENU = "footer__menu";
|
|
14
|
+
export declare const CLASS_MENU_SECTION = "footer__menu-section";
|
|
15
|
+
export declare const CLASS_BAR = "footer__bar";
|
|
16
|
+
export declare const CLASS_MB_LARGE = "footer--mb-xlarge";
|
|
17
|
+
export declare const CLASS_ACCORDION_TOGGLE = "footer__accordion-toggle";
|
|
18
|
+
export declare const CLASS_ACCORDION_ICON = "footer__accordion-icon";
|
|
19
|
+
export declare const CLASS_DIVIDER = "footer__divider";
|
|
20
|
+
export declare const CLASS_DIVIDER_HIDE_XS_DOWN = "footer__divider--hide-xs-down";
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import Footer from "./Footer.static";
|
|
2
|
+
import "./styles/style.scss";
|
|
3
|
+
export declare const customFooterModuleSelectorPairs: {
|
|
4
|
+
Module: typeof Footer;
|
|
5
|
+
name: string;
|
|
6
|
+
selector: string;
|
|
7
|
+
}[];
|
|
8
|
+
declare global {
|
|
9
|
+
interface Window {
|
|
10
|
+
ODSFooter: {
|
|
11
|
+
Footer: typeof Footer;
|
|
12
|
+
instances: Footer[];
|
|
13
|
+
init: () => void;
|
|
14
|
+
destroy: () => void;
|
|
15
|
+
initModulesWithin: (container: any) => {};
|
|
16
|
+
destroyModulesWithin: (container: any, removeOrphanedNodes?: boolean | undefined) => {};
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
export { Footer };
|
|
21
|
+
export default Footer;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
export declare const list: string[];
|
|
2
1
|
export type MegamenuProps = {
|
|
3
2
|
className?: string;
|
|
3
|
+
title?: string;
|
|
4
|
+
isSticky?: boolean;
|
|
4
5
|
searchEmpty?: boolean;
|
|
6
|
+
searchFilled?: boolean;
|
|
5
7
|
};
|
|
6
|
-
export declare const Megamenu: ({ className, searchEmpty }: MegamenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare const Megamenu: ({ className, title, isSticky, searchEmpty, searchFilled, }: MegamenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -8,21 +8,32 @@ export default class Megamenu {
|
|
|
8
8
|
config: Required<MegamenuConfig>;
|
|
9
9
|
toggleButtons: NodeListOf<HTMLButtonElement>;
|
|
10
10
|
dropdowns: NodeListOf<HTMLElement>;
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
mobileMenuButtons: HTMLButtonElement[];
|
|
12
|
+
mobilePanels: HTMLElement[];
|
|
13
|
+
mobileCloseButtons: HTMLButtonElement[];
|
|
14
|
+
activeMobilePanel: HTMLElement | null;
|
|
15
|
+
activeMobileTarget: string | null;
|
|
15
16
|
desktopOverlay: HTMLButtonElement | null;
|
|
16
17
|
accordionButtons: NodeListOf<HTMLButtonElement>;
|
|
18
|
+
desktopOverlayClickHandler: (event: Event) => void;
|
|
19
|
+
mobileCloseHandler: (event: Event) => void;
|
|
17
20
|
focusTrapHandler: (event: KeyboardEvent) => void;
|
|
21
|
+
focusTrapElement: HTMLElement | null;
|
|
18
22
|
lastFocusedElement: HTMLElement | null;
|
|
19
23
|
isKeyboardUser: boolean;
|
|
20
24
|
keydownHandler: (e: KeyboardEvent) => void;
|
|
21
25
|
mousedownHandler: () => void;
|
|
22
26
|
touchstartHandler: () => void;
|
|
27
|
+
instanceName: string;
|
|
23
28
|
constructor(element: HTMLElement, config?: MegamenuConfig);
|
|
24
29
|
static getInstance(el: HTMLElement): Megamenu | null;
|
|
25
30
|
init(): void;
|
|
31
|
+
shouldUseMobileTrigger(button: HTMLButtonElement): boolean;
|
|
32
|
+
getDefaultMobileTarget(): string;
|
|
33
|
+
getTargetFromElement(control: HTMLElement | null): string;
|
|
34
|
+
getPanelByTarget(target: string): HTMLElement | null;
|
|
35
|
+
syncMobileButtonState(): void;
|
|
36
|
+
setMobilePanelState(panel: HTMLElement, isOpen: boolean): void;
|
|
26
37
|
handleToggleClick(event: Event): void;
|
|
27
38
|
handleKeyPress(event: KeyboardEvent): void;
|
|
28
39
|
handleAccordionClick(event: Event): void;
|
|
@@ -31,7 +42,7 @@ export default class Megamenu {
|
|
|
31
42
|
closeDropdown(button: HTMLButtonElement): void;
|
|
32
43
|
closeAllDropdowns(): void;
|
|
33
44
|
handleMobileMenuToggle(event: Event): void;
|
|
34
|
-
openMobileMenu(): void;
|
|
45
|
+
openMobileMenu(target?: string, source?: HTMLElement): void;
|
|
35
46
|
closeMobileMenu(): void;
|
|
36
47
|
showDesktopOverlay(): void;
|
|
37
48
|
hideDesktopOverlay(): void;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { MegamenuProps } from "./Megamenu";
|
|
2
|
-
export declare const MegamenuBlog: ({ className, searchEmpty }: MegamenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const MegamenuBlog: ({ className, title, isSticky, searchEmpty, searchFilled, }: MegamenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
type MegamenuSearchContentProps = {
|
|
2
|
+
inputId: string;
|
|
3
|
+
inputLabel: string;
|
|
4
|
+
searchValue: string;
|
|
5
|
+
hasSearchEmpty: boolean;
|
|
6
|
+
hasSearchFilled: boolean;
|
|
7
|
+
emptyStateLinkHref?: string;
|
|
8
|
+
};
|
|
9
|
+
export declare const MegamenuSearchContent: ({ inputId, inputLabel, searchValue, hasSearchEmpty, hasSearchFilled, emptyStateLinkHref, }: MegamenuSearchContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -8,9 +8,13 @@ export declare const CLASS_CARD = "megamenu__card";
|
|
|
8
8
|
export declare const CLASS_NAV = "megamenu__nav";
|
|
9
9
|
export declare const CLASS_NAV_VERTICAL = "megamenu__nav--vertical";
|
|
10
10
|
export declare const CLASS_NAV_SPACE_SMALL = "megamenu__nav--space-small";
|
|
11
|
+
export declare const CLASS_NAV_MOBILE_LOCALE = "megamenu__nav--mobile-locale";
|
|
11
12
|
export declare const CLASS_NAV_ITEM = "megamenu__nav-item";
|
|
13
|
+
export declare const CLASS_NAV_ITEM_LEAD = "megamenu__nav-item--lead";
|
|
12
14
|
export declare const CLASS_NAV_ITEM_MAIN = "megamenu__nav-item--main";
|
|
13
15
|
export declare const CLASS_NAV_LINK = "megamenu__nav-link";
|
|
16
|
+
export declare const CLASS_NAV_LINK_LOCALE = "megamenu__nav-link--locale";
|
|
17
|
+
export declare const CLASS_NAV_LINK_NO_LINE = "megamenu__nav-link--no-line";
|
|
14
18
|
export declare const CLASS_NAV_CART_ICON = "megamenu__nav-cart-icon";
|
|
15
19
|
export declare const CLASS_NAV_SPACER = "megamenu__nav-spacer";
|
|
16
20
|
export declare const CLASS_NAV_ICON = "megamenu__nav-icon";
|
|
@@ -24,6 +28,8 @@ export declare const CLASS_OVERLAY = "megamenu__overlay";
|
|
|
24
28
|
export declare const CLASS_SPACER = "megamenu-spacer";
|
|
25
29
|
export declare const CLASS_SPACER_SMALL = "megamenu-spacer--small";
|
|
26
30
|
export declare const CLASS_TEXT_LARGE = "megamenu__text--large";
|
|
31
|
+
export declare const CLASS_CAPTION = "megamenu__caption";
|
|
32
|
+
export declare const CLASS_CAPTION_LARGE = "megamenu__caption--large";
|
|
27
33
|
export declare const CLASS_HIDE_MD_DOWN = "megamenu--hide-md-down";
|
|
28
34
|
export declare const CLASS_HIDE_LG_UP = "megamenu--hide-lg-up";
|
|
29
35
|
export declare const CLASS_ALIGN_CENTER = "megamenu--align-center";
|
|
@@ -32,6 +38,14 @@ export declare const CLASS_MOBILE_OVERLAY = "megamenu__mobile-overlay";
|
|
|
32
38
|
export declare const CLASS_MOBILE_WRAPPER = "megamenu__mobile-wrapper";
|
|
33
39
|
export declare const CLASS_MOBILE_HEADER = "megamenu__mobile-header";
|
|
34
40
|
export declare const CLASS_MOBILE_BODY = "megamenu__mobile-body";
|
|
41
|
+
export declare const CLASS_MOBILE_ACCOUNT = "megamenu__mobile-account";
|
|
42
|
+
export declare const CLASS_MOBILE_ACCOUNT_AVATAR = "megamenu__mobile-account-avatar";
|
|
43
|
+
export declare const CLASS_MOBILE_ACCOUNT_NAME = "megamenu__mobile-account-name";
|
|
44
|
+
export declare const CLASS_MOBILE_ACCOUNT_PHONE = "megamenu__mobile-account-phone";
|
|
45
|
+
export declare const CLASS_MOBILE_ACCOUNT_LOGOUT = "megamenu__mobile-account-logout";
|
|
46
|
+
export declare const CLASS_MOBILE_ACCOUNT_CTA = "megamenu__mobile-account-cta";
|
|
47
|
+
export declare const CLASS_MOBILE_ACCOUNT_LINKS = "megamenu__mobile-account-links";
|
|
48
|
+
export declare const CLASS_MOBILE_ACCOUNT_LINK = "megamenu__mobile-account-link";
|
|
35
49
|
export declare const CLASS_ACCORDION = "megamenu__accordion";
|
|
36
50
|
export declare const CLASS_ACCORDION_ITEM = "megamenu__accordion-item";
|
|
37
51
|
export declare const CLASS_ACCORDION_HEADER = "megamenu__accordion-header";
|
|
@@ -41,6 +55,7 @@ export declare const CLASS_ACCORDION_ICON = "megamenu__accordion-icon";
|
|
|
41
55
|
export declare const CLASS_ACCORDION_BODY = "megamenu__accordion-body";
|
|
42
56
|
export declare const CLASS_INPUT = "megamenu__input";
|
|
43
57
|
export declare const CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER = "megamenu__input--search-icon-with-placeholder";
|
|
58
|
+
export declare const CLASS_INPUT_SEARCH_RESPONSIVE = "megamenu__input--search-responsive";
|
|
44
59
|
export declare const CLASS_TAG = "megamenu__tag";
|
|
45
60
|
export declare const CLASS_TAG_ORANGE = "megamenu__tag--orange";
|
|
46
61
|
export declare const CLASS_TAG_SMALL = "megamenu__tag--small";
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export type MenuItem = {
|
|
2
|
+
label: string;
|
|
3
|
+
href?: string;
|
|
4
|
+
isLarge?: boolean;
|
|
5
|
+
tag?: string;
|
|
6
|
+
};
|
|
7
|
+
type MenuGroup = {
|
|
8
|
+
id: string;
|
|
9
|
+
heading: string;
|
|
10
|
+
items: MenuItem[];
|
|
11
|
+
};
|
|
12
|
+
export type MenuSection = {
|
|
13
|
+
id: string;
|
|
14
|
+
label: string;
|
|
15
|
+
featured: MenuGroup;
|
|
16
|
+
columns: MenuGroup[][];
|
|
17
|
+
};
|
|
18
|
+
export declare const menuSections: MenuSection[];
|
|
19
|
+
export declare const searchTerms: string[];
|
|
20
|
+
export declare const searchResultItems: string[];
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export type MegamenuVariant = "main" | "blog";
|
|
2
|
+
export type MegamenuIds = {
|
|
3
|
+
searchDropdownId: string;
|
|
4
|
+
searchInputDesktopId: string;
|
|
5
|
+
searchInputMobileId: string;
|
|
6
|
+
mobileMainPanelId: string;
|
|
7
|
+
mobileMainTitleId: string;
|
|
8
|
+
myOrangePanelId: string;
|
|
9
|
+
myOrangeTitleId: string;
|
|
10
|
+
};
|
|
11
|
+
export declare const getMegamenuIds: (variant: MegamenuVariant) => MegamenuIds;
|
|
@@ -3,6 +3,10 @@ interface PromoBannerProps {
|
|
|
3
3
|
className?: string;
|
|
4
4
|
image?: string;
|
|
5
5
|
alignImage?: "bottom" | "top";
|
|
6
|
+
/** Remove top padding from item on sm and smaller breakpoints */
|
|
7
|
+
flushTopSmDown?: boolean;
|
|
8
|
+
/** Remove bottom padding from item on sm and smaller breakpoints */
|
|
9
|
+
flushBottomSmDown?: boolean;
|
|
6
10
|
imageFullWidth?: boolean;
|
|
7
11
|
/** Make image extend to the edge of viewport even when inside container */
|
|
8
12
|
bleedImage?: boolean;
|
|
@@ -11,5 +15,5 @@ interface PromoBannerProps {
|
|
|
11
15
|
imageClassName?: string;
|
|
12
16
|
variant?: "vertical" | "reverse";
|
|
13
17
|
}
|
|
14
|
-
export declare const PromoBanner: ({ image, className, alignImage, bleedImage, children, itemClassName, imageClassName, variant, imageFullWidth, }: PromoBannerProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare const PromoBanner: ({ image, className, alignImage, flushTopSmDown, flushBottomSmDown, bleedImage, children, itemClassName, imageClassName, variant, imageFullWidth, }: PromoBannerProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
19
|
export {};
|
|
@@ -25,6 +25,7 @@ import { Grid, GridCol } from "./Grid";
|
|
|
25
25
|
import { Image } from "./Image";
|
|
26
26
|
import { Link } from "./Link";
|
|
27
27
|
import { Loader } from "./Loader";
|
|
28
|
+
import { Megamenu, MegamenuBlog } from "./Megamenu";
|
|
28
29
|
import { Modal, ModalBody, ModalCloseButton, ModalTitle, ModalProductHeader, ModalProductFooter } from "./Modal";
|
|
29
30
|
import { Section } from "./Section";
|
|
30
31
|
import { Sticker } from "./Sticker";
|
|
@@ -47,4 +48,4 @@ import { Testimonial } from "./Testimonial";
|
|
|
47
48
|
import { Hero } from "./Hero";
|
|
48
49
|
import { IconList, Item } from "./IconList";
|
|
49
50
|
import { SocialButton } from "./SocialButton";
|
|
50
|
-
export { Accordion, AccordionItem, Alert, AnchorNavigation, Autocomplete, Bar, BarBreak, BarItem, BlockAction, BlockActionControl, BlockActionIndicator, BlockActionOverride, BodyBanner, Breadcrumbs, Button, ButtonFill, ButtonGhost, ButtonPrimary, Buttons, Card, CardProductHeader, CardSection, Carousel, CarouselHero, CarouselHeroItem, 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, ModalProductFooter, ModalProductHeader, ModalTitle, Pagination, Pictogram, Pill, Progress, PromoBanner, PromotionCard, PromotionCardContent, PromotionCardImageWrapper, PromotionCardSection, PromotionCardTitle, Radio, RangeSlider, Section, Select, Skeleton, SkipLink, SocialButton, Stepbar, Sticker, Tab, Table, TabPanel, Tabs, Tag, TagButton, Testimonial, TextArea, TextInput, Tile, Tooltip, };
|
|
51
|
+
export { Accordion, AccordionItem, Alert, AnchorNavigation, Autocomplete, Bar, BarBreak, BarItem, BlockAction, BlockActionControl, BlockActionIndicator, BlockActionOverride, BodyBanner, Breadcrumbs, Button, ButtonFill, ButtonGhost, ButtonPrimary, Buttons, Card, CardProductHeader, CardSection, Carousel, CarouselHero, CarouselHeroItem, 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, Megamenu, MegamenuBlog, Message, Modal, ModalBody, ModalCloseButton, ModalProductFooter, ModalProductHeader, ModalTitle, Pagination, Pictogram, Pill, Progress, PromoBanner, PromotionCard, PromotionCardContent, PromotionCardImageWrapper, PromotionCardSection, PromotionCardTitle, Radio, RangeSlider, Section, Select, Skeleton, SkipLink, SocialButton, Stepbar, Sticker, Tab, Table, TabPanel, Tabs, Tag, TagButton, Testimonial, TextArea, TextInput, Tile, Tooltip, };
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<svg width="135" height="40" viewBox="0 0 135 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_13857_4254)">
|
|
3
|
+
<path d="M130 0H5C2.23858 0 0 2.23858 0 5V35C0 37.7614 2.23858 40 5 40H130C132.761 40 135 37.7614 135 35V5C135 2.23858 132.761 0 130 0Z" fill="black"/>
|
|
4
|
+
<path d="M130 0.8C132.32 0.8 134.2 2.6804 134.2 5V35C134.2 37.3196 132.32 39.2 130 39.2H5C2.6804 39.2 0.8 37.3196 0.8 35V5C0.8 2.6804 2.6804 0.8 5 0.8H130ZM130 0H5C2.23858 0 0 2.23858 0 5V35C0 37.7614 2.23858 40 5 40H130C132.761 40 135 37.7614 135 35V5C135 2.23858 132.761 0 130 0Z" fill="#A6A6A6"/>
|
|
5
|
+
<path d="M68.14 21.75C65.7873 21.7555 63.8845 23.6673 63.89 26.02C63.8956 28.3727 65.8073 30.2755 68.16 30.27C70.5127 30.2645 72.4155 28.3527 72.41 26C72.4265 24.8644 71.9812 23.7707 71.1763 22.9695C70.3713 22.1683 69.2755 21.7282 68.14 21.75ZM68.14 28.58C67.0832 28.6539 66.0887 28.0743 65.632 27.1184C65.1754 26.1626 65.3494 25.0247 66.071 24.249C66.7925 23.4734 67.9148 23.2176 68.9012 23.6041C69.8875 23.9905 70.5374 24.9407 70.54 26C70.5726 26.6627 70.336 27.3104 69.8841 27.7962C69.4323 28.282 68.8033 28.5646 68.14 28.58ZM58.82 21.75C56.4673 21.7555 54.5645 23.6673 54.57 26.02C54.5756 28.3727 56.4873 30.2755 58.84 30.27C61.1927 30.2645 63.0955 28.3527 63.09 26C63.1065 24.8644 62.6612 23.7707 61.8563 22.9695C61.0513 22.1683 59.9555 21.7282 58.82 21.75ZM58.82 28.58C57.7632 28.6539 56.7687 28.0743 56.312 27.1184C55.8554 26.1626 56.0294 25.0247 56.751 24.249C57.4725 23.4734 58.5948 23.2176 59.5812 23.6041C60.5675 23.9905 61.2174 24.9407 61.22 26C61.2526 26.6627 61.016 27.3104 60.5641 27.7962C60.1123 28.282 59.4833 28.5646 58.82 28.58ZM47.74 23.06V24.86H52.06C51.9923 25.7078 51.6399 26.5078 51.06 27.13C50.1837 28.0229 48.97 28.5025 47.72 28.45C45.069 28.45 42.92 26.301 42.92 23.65C42.92 20.999 45.069 18.85 47.72 18.85C48.9405 18.8319 50.1189 19.2953 51 20.14L52.27 18.87C51.066 17.6792 49.4332 17.0232 47.74 17.05C45.319 16.9558 43.0404 18.1937 41.8019 20.2761C40.5633 22.3584 40.5633 24.9516 41.8019 27.0339C43.0404 29.1163 45.319 30.3542 47.74 30.26C49.4702 30.3291 51.1476 29.656 52.35 28.41C53.4001 27.2564 53.9597 25.7392 53.91 24.18C53.9136 23.8047 53.8835 23.4299 53.82 23.06H47.74ZM93.05 24.46C92.5161 22.8892 91.0679 21.8111 89.41 21.75C88.3044 21.7478 87.2472 22.2034 86.4894 23.0085C85.7316 23.8137 85.3409 24.8965 85.41 26C85.3925 27.8748 86.6111 29.5375 88.4043 30.0851C90.1974 30.6328 92.1371 29.9347 93.17 28.37L91.72 27.37C91.2802 28.1031 90.4849 28.5483 89.63 28.54C88.7428 28.5766 87.9244 28.0641 87.57 27.25L93.26 24.9L93.05 24.46ZM87.25 25.88C87.2091 25.2525 87.4224 24.635 87.8419 24.1665C88.2614 23.6981 88.8518 23.4182 89.48 23.39C90.1388 23.3498 90.7575 23.7084 91.05 24.3L87.25 25.88ZM82.63 30H84.5V17.5H82.63V30ZM79.57 22.7H79.5C78.9347 22.0562 78.1167 21.691 77.26 21.7C74.9902 21.8101 73.2063 23.6825 73.2063 25.955C73.2063 28.2275 74.9902 30.0999 77.26 30.21C78.1184 30.2272 78.9397 29.8606 79.5 29.21H79.57V29.82C79.57 31.45 78.7 32.32 77.3 32.32C76.3435 32.299 75.4944 31.7026 75.15 30.81L73.53 31.48C74.1432 33.02 75.6426 34.0223 77.3 34C79.49 34 81.3 32.71 81.3 29.57V22H79.57V22.7ZM77.42 28.58C76.0601 28.4952 75.0006 27.3676 75.0006 26.005C75.0006 24.6424 76.0601 23.5148 77.42 23.43C78.067 23.4579 78.675 23.7472 79.1048 24.2317C79.5346 24.7161 79.7494 25.3543 79.7 26C79.7551 26.6481 79.5427 27.2904 79.112 27.7778C78.6813 28.2651 78.0699 28.555 77.42 28.58ZM101.81 17.5H97.33V30H99.2V25.26H101.81C103.263 25.3644 104.652 24.6485 105.41 23.405C106.168 22.1614 106.168 20.5986 105.41 19.355C104.652 18.1115 103.263 17.3956 101.81 17.5ZM101.81 23.5H99.2V19.24H101.85C102.615 19.24 103.321 19.6479 103.703 20.31C104.086 20.9721 104.086 21.7879 103.703 22.45C103.321 23.1121 102.615 23.52 101.85 23.52L101.81 23.5ZM113.35 21.71C111.958 21.6242 110.649 22.3752 110.02 23.62L111.67 24.31C112.011 23.6959 112.68 23.3395 113.38 23.4C113.86 23.344 114.341 23.483 114.718 23.7857C115.094 24.0885 115.332 24.5296 115.38 25.01V25.13C114.779 24.8139 114.109 24.6492 113.43 24.65C111.65 24.65 109.83 25.65 109.83 27.47C109.866 28.2516 110.217 28.9853 110.803 29.5036C111.389 30.0219 112.16 30.2804 112.94 30.22C113.895 30.2729 114.805 29.8065 115.32 29H115.38V30H117.18V25.19C117.18 23 115.52 21.73 113.39 21.73L113.35 21.71ZM113.12 28.56C112.51 28.56 111.66 28.25 111.66 27.5C111.66 26.5 112.72 26.16 113.66 26.16C114.254 26.1453 114.841 26.2904 115.36 26.58C115.23 27.7031 114.29 28.5575 113.16 28.58L113.12 28.56ZM123.74 22L121.6 27.42H121.54L119.32 22H117.32L120.65 29.58L118.75 33.79H120.7L125.82 22H123.74ZM106.94 30H108.8V17.5H106.94V30Z" fill="white"/>
|
|
6
|
+
<path d="M10.44 7.53997C10.1105 7.92959 9.94233 8.43043 9.97 8.93997V31.06C9.93597 31.5704 10.1049 32.0735 10.44 32.46L10.51 32.54L22.9 20.15V19.85L10.51 7.46997L10.44 7.53997Z" fill="url(#paint0_linear_13857_4254)"/>
|
|
7
|
+
<path d="M27 24.28L22.9 20.15V19.85L27 15.72L27.09 15.78L32 18.56C33.4 19.35 33.4 20.65 32 21.45L27.11 24.23L27 24.28Z" fill="url(#paint1_linear_13857_4254)"/>
|
|
8
|
+
<path d="M27.12 24.22L22.9 20L10.44 32.46C11.023 32.979 11.8932 33.0084 12.51 32.53L27.12 24.22Z" fill="url(#paint2_linear_13857_4254)"/>
|
|
9
|
+
<path d="M27.12 15.78L12.51 7.47997C11.897 6.99469 11.0239 7.02 10.44 7.53997L22.9 20L27.12 15.78Z" fill="url(#paint3_linear_13857_4254)"/>
|
|
10
|
+
<path opacity="0.2" d="M27 24.13L12.51 32.38C11.9182 32.8267 11.1018 32.8267 10.51 32.38L10.44 32.45L10.51 32.53C11.1018 32.9767 11.9182 32.9767 12.51 32.53L27.12 24.22L27 24.13Z" fill="black"/>
|
|
11
|
+
<path opacity="0.12" d="M10.44 32.32C10.1188 31.9233 9.96138 31.4189 10 30.91V31.06C9.96597 31.5704 10.1349 32.0735 10.47 32.46L10.54 32.39L10.44 32.32Z" fill="black"/>
|
|
12
|
+
<path opacity="0.12" d="M32 21.3L27 24.13L27.09 24.22L32 21.44C32.5904 21.1904 32.9971 20.6379 33.06 20C32.9332 20.5771 32.5398 21.0596 32 21.3Z" fill="black"/>
|
|
13
|
+
<path opacity="0.25" d="M12.51 7.61998L32 18.7C32.5398 18.9403 32.9332 19.4229 33.06 20C32.9971 19.3621 32.5904 18.8096 32 18.56L12.51 7.47998C11.12 6.67998 9.97 7.33998 9.97 8.93998V9.08998C10 7.48998 11.12 6.82998 12.51 7.61998Z" fill="white"/>
|
|
14
|
+
<path d="M43.69 13H42.92V7.74H41.24V7H45.37V7.74H43.69V13Z" fill="white" stroke="white" stroke-width="0.2"/>
|
|
15
|
+
<path d="M49.84 7.74H47.11V9.64H49.57V10.36H47.11V12.26H49.84V13H46.34V7H49.84V7.74Z" fill="white" stroke="white" stroke-width="0.2"/>
|
|
16
|
+
<path d="M51.05 13V6.99997H53.05C53.5396 6.99157 54.0132 7.17454 54.37 7.50997C54.7643 7.81817 54.9963 8.28953 55 8.78997C54.9998 9.19697 54.8544 9.59055 54.59 9.89997C54.333 10.206 53.981 10.4172 53.59 10.5L55.2 13H54.29L52.67 10.57H51.82V13H51.05ZM51.82 9.84997H53.06C53.3522 9.85591 53.6354 9.74838 53.85 9.54997C54.0647 9.35627 54.185 9.0791 54.18 8.78997C54.1774 8.51905 54.074 8.25881 53.89 8.05997C53.6899 7.84356 53.4044 7.72647 53.11 7.73997H51.82V9.84997Z" fill="white" stroke="white" stroke-width="0.2"/>
|
|
17
|
+
<path d="M55.56 13L57.82 7H58.69L61 13H60.1L59.52 11.37H57L56.41 13H55.56ZM57.26 10.65H59.26L58.26 7.95L57.26 10.65Z" fill="white" stroke="white" stroke-width="0.2"/>
|
|
18
|
+
<path d="M61.49 13V12.2L64.68 7.74H61.62V7H65.62V7.8L62.43 12.26H65.65V13H61.49Z" fill="white" stroke="white" stroke-width="0.2"/>
|
|
19
|
+
<path d="M68.73 13V7H69.67L72.58 11.67V10.51V7H73.36V13H72.55L69.55 8.11V9.26V13H68.73Z" fill="white" stroke="white" stroke-width="0.2"/>
|
|
20
|
+
<path d="M74.23 13L76.49 7H77.36L79.62 13H78.77L78.19 11.37H75.67L75.08 13H74.23ZM75.93 10.65H77.93L76.93 7.95L75.93 10.65Z" fill="white" stroke="white" stroke-width="0.2"/>
|
|
21
|
+
</g>
|
|
22
|
+
<defs>
|
|
23
|
+
<linearGradient id="paint0_linear_13857_4254" x1="799.544" y1="131.47" x2="-262.782" y2="1193.8" gradientUnits="userSpaceOnUse">
|
|
24
|
+
<stop stop-color="#00A0FF"/>
|
|
25
|
+
<stop offset="0.01" stop-color="#00A1FF"/>
|
|
26
|
+
<stop offset="0.26" stop-color="#00BEFF"/>
|
|
27
|
+
<stop offset="0.51" stop-color="#00D2FF"/>
|
|
28
|
+
<stop offset="0.76" stop-color="#00DFFF"/>
|
|
29
|
+
<stop offset="1" stop-color="#00E3FF"/>
|
|
30
|
+
</linearGradient>
|
|
31
|
+
<linearGradient id="paint1_linear_13857_4254" x1="1115.9" y1="443.72" x2="-1303.1" y2="443.72" gradientUnits="userSpaceOnUse">
|
|
32
|
+
<stop stop-color="#FFE000"/>
|
|
33
|
+
<stop offset="0.41" stop-color="#FFBD00"/>
|
|
34
|
+
<stop offset="0.78" stop-color="#FFA500"/>
|
|
35
|
+
<stop offset="1" stop-color="#FF9C00"/>
|
|
36
|
+
</linearGradient>
|
|
37
|
+
<linearGradient id="paint2_linear_13857_4254" x1="1449.44" y1="417.328" x2="-366.253" y2="2232.22" gradientUnits="userSpaceOnUse">
|
|
38
|
+
<stop stop-color="#FF3A44"/>
|
|
39
|
+
<stop offset="1" stop-color="#C31162"/>
|
|
40
|
+
</linearGradient>
|
|
41
|
+
<linearGradient id="paint3_linear_13857_4254" x1="-303.56" y1="-146.126" x2="506.762" y2="664.196" gradientUnits="userSpaceOnUse">
|
|
42
|
+
<stop stop-color="#32A071"/>
|
|
43
|
+
<stop offset="0.07" stop-color="#2DA771"/>
|
|
44
|
+
<stop offset="0.48" stop-color="#15CF74"/>
|
|
45
|
+
<stop offset="0.8" stop-color="#06E775"/>
|
|
46
|
+
<stop offset="1" stop-color="#00F076"/>
|
|
47
|
+
</linearGradient>
|
|
48
|
+
<clipPath id="clip0_13857_4254">
|
|
49
|
+
<rect width="135" height="40" fill="white"/>
|
|
50
|
+
</clipPath>
|
|
51
|
+
</defs>
|
|
52
|
+
</svg>
|