v8-ui-components
Version:
A component lib for v8 storefront apps
1,212 lines (1,188 loc) • 176 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var styled = _interopDefault(require('styled-components'));
var v8_ui_icons = require('v8.ui.icons');
var v8UiAtoms = require('v8-ui-atoms');
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
}
var minWidth = '320px';
var maxWidthLarge = '1600px';
var maxWidthSmall = '1254px';
var bpMobile = 767;
var bpTablet = 1024;
var bpDesktop = 1365;
var colGutter = '8px';
var contentPaddingLarge = '0 56px';
var componentSpacing = {
desktopLg: '32px',
desktopSm: '24px',
tablet: '16px',
mobile: '8px'
};
var spacing = {
xxxl: '80px',
xxl: '64px',
xl: '48px',
lgr: '40px',
lg: '32px',
md: '24px',
sm: '16px',
vsm: '12px',
xs: '8px',
vxs: '6px',
xxs: '4px',
xxss: '3px'
};
var row = function (noPadding, noWrap) { return "\n display: flex;\n " + (!noPadding && "padding: " + contentPaddingLarge) + ";\n max-width: " + maxWidthLarge + ";\n min-width: " + minWidth + ";\n flex: 1;\n flex-wrap:" + (noWrap ? 'nowrap' : 'wrap') + " ;\n width: 100%;\n \n " + mediaQueries('md', { noLower: true }) + " {\n padding: 0;\n max-width: " + maxWidthSmall + ";\n }\n"; };
var col = function (colWidth, noPadding) { return "\n width: " + (colWidth / 12) * 100 + "%;\n padding: 0 " + colGutter + ";\n box-sizing: border-box;\n \n &:first-child {\n " + (noPadding && "padding: 0 " + colGutter + " 0 -" + colGutter + ";") + "\n }\n\n &:last-child {\n " + (noPadding && "padding: 0 -" + colGutter + " 0 " + colGutter + ";") + "\n }\n}"; };
var mediaQueries = (function (bpKey, additionalConfig) {
if (additionalConfig && additionalConfig.altCondition) {
return '&&&';
}
switch (bpKey) {
case 'sm':
return "@media (max-width: " + bpMobile + "px)";
case 'md':
if (additionalConfig && additionalConfig.noUpper) {
return "@media (min-width: " + (bpMobile + 1) + "px)";
}
if (additionalConfig && additionalConfig.noLower) {
return "@media (max-width: " + (bpTablet - 1) + "px)";
}
if (additionalConfig && additionalConfig.upperLimit) {
return "@media (min-width: " + (bpMobile +
1) + "px) and (max-width: " + bpDesktop + "px)";
}
return "@media (min-width: " + (bpMobile + 1) + "px) and (max-width: " + (bpTablet -
1) + "px)";
case 'lg':
if (additionalConfig && additionalConfig.upperLimit) {
return "@media (min-width: " + bpTablet + "px) and (max-width: " + bpDesktop + "px)";
}
return "@media (min-width: " + bpTablet + "px)";
case 'xl':
return "@media (min-width: " + (bpDesktop + 1) + "px)";
default:
return null;
}
});
var previewFlexScreenWidth = 18;
var previewFlexItemWidth = {
desktop: 16,
largeMobile: 12,
mobile: 14,
tablet: 16
};
var CarouselWrapper = styled.div(function (_a) {
var theme = _a.theme;
return "\n display: flex;\n width: 100%;\n height: 100%;\n position: relative;\n background: " + theme.carousel.bannerBackgroundColor + ";\n padding: 22px 0 " + theme.carousel.carouselPagination.wrapperHeight + " 0;\n \n " + mediaQueries('md') + " {\n padding-top: " + spacing.sm + ";\n } \n \n " + mediaQueries('sm') + " {\n padding-top: " + spacing.xs + ";\n }\n \n";
});
var CarouselFrame = styled.div(function (_a) {
var minHeight = _a.minHeight, columnGap = _a.columnGap, isSmallCarousel = _a.isSmallCarousel;
return "\n position: relative;\n min-height: " + minHeight + "px;\n height: 100%;\n \n " + mediaQueries('sm') + " {\n height: auto;\n width: calc(100% + " + (!!columnGap.mobile ? columnGap.mobile : 0) + "px);\n margin: " + (!isSmallCarousel
? "0 -" + (!!columnGap.mobile ? columnGap.mobile : 0 / 2) + "px"
: 0) + ";\n }\n \n " + mediaQueries('md') + " {\n overflow: hidden;\n width: calc(100% + " + (!!columnGap.tablet ? columnGap.tablet : 0) + "px);\n margin: " + (!isSmallCarousel
? "0 -" + (!!columnGap.tablet ? columnGap.tablet : 0 / 2) + "px"
: "0 " + columnGap.tablet + "px") + ";\n }\n \n " + mediaQueries('lg') + " {\n overflow: hidden;\n width: calc(100% + " + (!!columnGap.desktop ? columnGap.desktop : 0) + "px);\n margin: " + (!isSmallCarousel
? "0 -" + (!!columnGap.desktop ? columnGap.desktop : 0 / 2) + "px"
: "0 " + columnGap.desktop + "px") + ";\n }\n";
});
var Track = styled.ul(function (_a) {
var shouldAnimate = _a.shouldAnimate;
return "\n list-style: none;\n display: flex;\n height: 100%;\n position: relative;\n left: 0;\n top: 0;\n margin: 0;\n padding: 0;\n text-align: left;\n transition: " + (shouldAnimate ? "transform 0.6s ease, opacity 0.6s ease" : "none") + "; \n";
});
var CarouselItem = styled.li(function (_a) {
var isActive = _a.isActive, previewScaleFactor = _a.previewScaleFactor, shouldAnimate = _a.shouldAnimate, type = _a.type, carouselHeight = _a.carouselHeight, isSingleSlide = _a.isSingleSlide;
return "\n width: 100%;\n box-sizing: border-box;\n transform: scale(" + previewScaleFactor + ");\n opacity: " + (isActive && type === "natural" ? 1 : 0) + ";\n display: " + (isActive && type === "natural" ? "initial" : "none") + ";\n margin: " + (isSingleSlide ? '0' : '8px') + ";\n height: " + carouselHeight + ";\n " + getCarouselAnimation(shouldAnimate, type) + " \n \n " + CarouselSlideKeyframes + " \n \n " + mediaQueries("sm") + " {\n " + (type !== "preClone" && type !== "postClone"
? "margin: 0 " + spacing.vxs + ";"
: "") + " \n }\n \n " + mediaQueries("md") + " {\n " + (type === "natural" ? "opacity: " + (isActive ? 1 : 0) + ";" : "") + "\n }\n \n " + mediaQueries("lg") + " {\n " + (type === "natural" ? "opacity: " + (isActive ? 1 : 0) + ";" : "") + "\n }\n " + (type === "preClone"
? "\n display: block;\n opacity: 1;\n margin-left: " + (isSingleSlide ? '-80%' : '-25%') + ";\n "
: "") + " \n " + (type === "postClone"
? "\n display: block;\n opacity: 1;\n margin-right: " + (isSingleSlide ? '-80%' : '-25%') + ";\n "
: "") + "\n " + mediaQueries("sm") + " {\n " + (type === "preClone"
? "margin-left: -93%; margin-right: " + spacing.vxs + ";"
: "") + " \n " + (type === "postClone"
? "margin-right: -93%; margin-left: " + spacing.vxs + ";"
: "") + " \n }\n \n ";
});
var CarouselItemInner = styled.article(function (_a) {
var productGrid = _a.productGrid;
return "\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n overflow-y: hidden;\n ";
});
var rule = "\n from { \n opacity: 0.3; \n }\n to { \n opacity: 1;\n }\n";
var CarouselSlideKeyframes = "\n @-webkit-keyframes CarouselSlide {\n " + rule + "\n }\n @keyframes CarouselSlide {\n " + rule + "\n } \n";
var getCarouselAnimation = function (shouldAnimate, type) {
return shouldAnimate && type === "natural"
? "animation: CarouselSlide 1000ms;"
: "";
};
var colors = {
primary1: "#016abc",
primary2: "#004f8c",
primary3: "#002a4b",
primary4: "#80b4dd",
primary5: "#e6f0f8",
secondary1: "#d83A22",
secondary2: "#aa2003",
secondary3: "#5b1102",
secondary4: "#f19582",
secondary5: "#fceae6",
tertiary1: "#e6f0f8",
tertiary2: "#fcefe6",
tertiary3: "#09448A",
tertiary4: "",
tertiary5: "",
promotion1: "#bc3e31",
promotion2: "#09448A",
success: "#4fbf76",
successDark: "#2e7c49",
successLight: "#e6f6ec",
warn: "#fcc260",
warnDark: "#8f7344",
warnLight: "#fff6e6",
alert: "#bc3e31",
alertDark: "#8c2e24",
alertLight: "#ffe5e2",
greyscale1: "#ffffff",
greyscale2: "#f3f4f6",
greyscale3: "#ccced0",
greyscale4: "#71777b",
greyscale5: "#40464b",
greyscale6: "#111111",
greyscale7: "#31363A",
};
var globalTheme = {
BorderRadius: "4px",
FontFamily: "Cabin, sans-serif",
baseFontSize: "16px",
FontWeight: 400,
FontWeightBold: 700,
bodyFontColor: "#111111",
HeadlineFontFamily: "Cabin, sans-serif",
HeadlineFontWeight: 700,
bodyBackgroundColor: "#f3f4f6",
};
var theme = {
colors: {
brandColors: {
primary1: colors.primary1,
primary2: colors.primary2,
primary3: colors.primary3,
primary4: colors.primary4,
primary5: colors.primary5,
secondary1: colors.secondary1,
secondary2: colors.secondary2,
secondary3: colors.secondary3,
secondary4: colors.secondary4,
secondary5: colors.secondary5,
tertiary1: colors.tertiary1,
tertiary2: colors.tertiary2,
tertiary3: colors.tertiary3,
tertiary4: colors.tertiary4,
tertiary5: colors.tertiary5,
},
uiColors: {
success: colors.success,
successDark: colors.successDark,
successLight: colors.successLight,
warn: colors.warn,
warnDark: colors.warnDark,
warnLight: colors.warnLight,
alert: colors.alert,
alertDark: colors.alertDark,
alertLight: colors.alertLight,
promotion1: colors.promotion1,
promotion2: colors.promotion2,
greyscale1: colors.greyscale1,
greyscale2: colors.greyscale2,
greyscale3: colors.greyscale3,
greyscale4: colors.greyscale4,
greyscale5: colors.greyscale5,
greyscale6: colors.greyscale6,
greyscale7: colors.greyscale7,
},
},
header: {
badge: {
cart: {
color: colors.secondary1,
bgColor: colors.greyscale1,
},
},
topMenu: {
color: colors.greyscale6,
backgroundColor: colors.greyscale2,
},
mainMenu: {
color: colors.greyscale6,
backgroundColor: colors.greyscale1,
},
bottomMenu: {
color: colors.greyscale6,
hoverColor: colors.primary1,
backgroundColor: colors.greyscale1,
textTransform: "capitalize",
},
mobileMenu: {
color: colors.primary1,
backgroundColor: colors.greyscale1,
},
search: {
borderColor: colors.greyscale3,
borderRadius: "4px",
clearBtnColor: colors.greyscale3,
},
storePopover: {
backgroundColor: colors.primary5,
activeBackgroundColor: colors.secondary5,
color: colors.greyscale5,
activeColor: colors.greyscale5,
borderColor: "transparent",
borderRadius: "4px",
reserveTimeIconPosition: "center",
},
accountPopover: {
backgroundColor: colors.greyscale2,
borderColor: "transparent",
borderRadius: "4px",
color: colors.greyscale5,
},
headerActionLinks: {
activeBackgroundColor: colors.greyscale2,
activeColor: colors.primary1,
backgroundColor: "none",
borderRadius: globalTheme.BorderRadius,
color: colors.greyscale5,
fontFamily: globalTheme.FontFamily,
fontWeight: globalTheme.FontWeightBold,
},
headerLinks: {
color: colors.greyscale5,
backgroundColor: "none",
activeColor: colors.greyscale5,
activeBackgroundColor: colors.greyscale2,
fontWeight: globalTheme.FontWeightBold,
borderRadius: globalTheme.BorderRadius,
},
departments: {
backgroundColor: {
active: "inherit",
static: colors.greyscale2,
},
color: {
static: colors.greyscale5,
hover: colors.primary1,
},
iconColor: {
static: colors.greyscale3,
hover: colors.greyscale3,
},
},
},
body: {
fontSize: globalTheme.baseFontSize,
color: globalTheme.bodyFontColor,
backgroundColor: globalTheme.bodyBackgroundColor,
},
footer: {
mainFooter: {
color: colors.greyscale6,
backgroundColor: colors.greyscale2,
},
bottomFooter: {
color: colors.greyscale1,
backgroundColor: colors.greyscale5,
},
mediaIcons: {
color: colors.greyscale5,
},
},
orderConfirmation: {
iconColor: colors.greyscale1,
backgroundColor: colors.successLight,
},
minimalHeader: {
desktop: {
color: colors.secondary1,
backgroundColor: colors.greyscale1,
iconColor: colors.secondary1,
},
mobile: {
color: colors.secondary1,
backgroundColor: colors.greyscale1,
iconColor: colors.secondary1,
},
},
subHeaderBoxes: {
backgroundColor: colors.greyscale2,
color: colors.greyscale5,
contentBorder: colors.greyscale2,
},
breadcrumb: {
textTransform: "capitalize",
backgroundColor: colors.greyscale2,
color: colors.primary1,
activeColor: colors.greyscale6,
backIconColor: colors.greyscale4,
},
payment: {
selectedCardBackground: colors.primary5,
selectedCardColor: colors.greyscale5,
summary: {
listItemBackground: colors.greyscale2,
},
checkoutCards: {
borderRadius: "4px",
},
},
productPage: {
detailsBackgroundColor: colors.greyscale2,
badges: {
borderRadius: "4px",
},
},
favorites: {
headerIconStyle: "FavSolid",
productColors: {
static: {
color: colors.greyscale3,
hoverColor: colors.alert,
},
active: {
color: colors.alert,
hoverColor: colors.alertDark,
},
},
},
promoBadges: {
backgroundColor: {
promotion: colors.promotion1,
pointsBasedPromo: colors.promotion2,
},
fontWeight: globalTheme.FontWeightBold,
color: {
promotion: colors.greyscale1,
pointsBasedPromo: colors.greyscale1,
},
},
loyaltyCard: {
backgroundColor: colors.primary5,
borderColor: colors.primary5,
borderRadius: "16px",
cardTextColor: colors.greyscale5,
dimensions: {
width: 325,
height: 190,
},
input: {
borderRadius: "4px",
backgroundColor: colors.greyscale1,
borderColor: colors.greyscale3,
idFields: {
staticBorder: colors.greyscale4,
hoverBorder: colors.greyscale5,
activeBorder: colors.primary1,
errorBorder: colors.alert,
},
},
infoList: {
color: colors.greyscale4,
borderColor: colors.greyscale2,
},
},
typography: {
webFonts: [
"https://fonts.googleapis.com/css?family=Cabin:400,400i,700,700i&display=swap",
],
weights: {
normal: globalTheme.FontWeight,
bold: globalTheme.FontWeightBold,
},
text: {
body: {
color: colors.greyscale6,
fontFamily: globalTheme.FontFamily,
fontSize: "1rem",
fontWeight: globalTheme.FontWeight,
capitalization: "none",
lineHeight: "1.1875rem",
letterSpacing: "normal",
},
fontXS: {
fontFamily: globalTheme.FontFamily,
fontSize: "0.75rem",
fontWeight: globalTheme.FontWeight,
capitalization: "none",
lineHeight: "0.9375rem",
letterSpacing: "normal",
},
fontSM: {
fontFamily: globalTheme.FontFamily,
fontSize: "0.875rem",
fontWeight: globalTheme.FontWeightBold,
capitalization: "none",
lineHeight: "1rem",
letterSpacing: "normal",
},
fontMD: {
fontFamily: globalTheme.FontFamily,
fontSize: "1rem",
fontWeight: globalTheme.FontWeightBold,
capitalization: "none",
lineHeight: "1.1875rem",
letterSpacing: "normal",
},
fontLG: {
fontFamily: globalTheme.HeadlineFontFamily,
fontSize: "1.5rem",
fontWeight: globalTheme.HeadlineFontWeight,
capitalization: "none",
lineHeight: "1.8125rem",
letterSpacing: "normal",
},
fontXL: {
fontFamily: globalTheme.HeadlineFontFamily,
fontSize: "2rem",
fontWeight: globalTheme.HeadlineFontWeight,
capitalization: "none",
lineHeight: "2.4375rem",
letterSpacing: "normal",
},
},
links: {
static: {
color: colors.primary1,
textDecoration: "none",
},
hover: {
color: colors.primary1,
textDecoration: "underline",
},
clicked: {
color: colors.primary1,
textDecoration: "underline",
},
visited: {
color: colors.primary1,
textDecoration: "none",
},
},
},
buttons: {
globalThemeBorderRadius: globalTheme.BorderRadius,
globalThemeFontWeight: globalTheme.FontWeightBold,
globalThemeFontFamily: globalTheme.FontFamily,
miniCart: {
textTransform: "capitalize",
backgroundColor: "none",
borderRadius: globalTheme.BorderRadius,
activeBackgroundColor: colors.secondary1,
hoverBackgroundColor: colors.secondary5,
color: colors.secondary1,
activeColor: colors.greyscale1,
mobileColor: colors.secondary1,
iconColor: colors.secondary1,
activeIconColor: colors.greyscale1,
mobileIconColor: colors.secondary1,
desktopIconSize: "16px",
mobileIconSize: "24px",
},
primary: {
borderRadius: globalTheme.BorderRadius,
fontWeight: globalTheme.FontWeightBold,
textTransform: "none",
static: {
bgColor: colors.primary1,
borderColor: colors.primary1,
color: colors.greyscale1,
iconColor: colors.greyscale1,
},
hover: {
bgColor: colors.primary2,
borderColor: colors.primary2,
color: colors.greyscale1,
iconColor: colors.greyscale1,
},
clicked: {
bgColor: colors.primary3,
borderColor: colors.primary3,
color: colors.greyscale1,
iconColor: colors.greyscale1,
},
disabled: {
bgColor: colors.primary4,
borderColor: colors.primary4,
color: colors.greyscale1,
iconColor: colors.greyscale3,
},
},
primaryLight: {
borderRadius: globalTheme.BorderRadius,
fontWeight: globalTheme.FontWeightBold,
textTransform: "none",
static: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale1,
color: colors.primary1,
iconColor: colors.primary1,
},
hover: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale1,
color: colors.primary2,
iconColor: colors.primary2,
},
clicked: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale1,
color: colors.primary3,
iconColor: colors.primary3,
},
disabled: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale1,
color: colors.greyscale3,
iconColor: colors.greyscale3,
},
},
secondary: {
borderRadius: globalTheme.BorderRadius,
fontWeight: globalTheme.FontWeightBold,
textTransform: "none",
static: {
bgColor: colors.greyscale1,
borderColor: colors.primary1,
color: colors.primary1,
iconColor: colors.primary1,
},
hover: {
bgColor: colors.primary1,
borderColor: colors.primary1,
color: colors.greyscale1,
iconColor: colors.greyscale1,
},
clicked: {
bgColor: colors.primary2,
borderColor: colors.primary2,
color: colors.greyscale1,
iconColor: colors.greyscale1,
},
disabled: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale3,
color: colors.greyscale3,
iconColor: colors.greyscale3,
},
},
secondaryLight: {
borderRadius: globalTheme.BorderRadius,
fontWeight: globalTheme.FontWeightBold,
textTransform: "none",
static: {
bgColor: "transparent",
borderColor: colors.greyscale1,
color: colors.greyscale1,
iconColor: colors.greyscale1,
},
hover: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale1,
color: colors.primary1,
iconColor: colors.primary1,
},
clicked: {
bgColor: colors.primary2,
borderColor: colors.greyscale1,
color: colors.greyscale1,
iconColor: colors.greyscale1,
},
disabled: {
bgColor: "transparent",
borderColor: colors.greyscale3,
color: colors.greyscale3,
iconColor: colors.greyscale3,
},
},
tertiary: {
borderRadius: globalTheme.BorderRadius,
fontWeight: globalTheme.FontWeightBold,
textTransform: "none",
static: {
bgColor: colors.tertiary1,
borderColor: colors.tertiary1,
color: colors.greyscale5,
iconColor: colors.greyscale5,
},
hover: {
bgColor: colors.tertiary1,
borderColor: colors.tertiary1,
color: colors.primary1,
iconColor: colors.primary1,
},
clicked: {
bgColor: colors.tertiary1,
borderColor: colors.primary1,
color: colors.primary1,
iconColor: colors.primary1,
},
disabled: {
bgColor: colors.greyscale2,
borderColor: colors.greyscale2,
color: colors.greyscale3,
iconColor: colors.greyscale1,
},
},
checkout: {
borderRadius: globalTheme.BorderRadius,
fontWeight: globalTheme.FontWeightBold,
iconColor: colors.greyscale5,
textTransform: "none",
static: {
bgColor: colors.secondary1,
borderColor: colors.secondary1,
color: colors.greyscale1,
},
hover: {
bgColor: colors.secondary2,
borderColor: colors.secondary2,
color: colors.greyscale1,
},
clicked: {
bgColor: colors.secondary3,
borderColor: colors.secondary3,
color: colors.greyscale1,
},
disabled: {
bgColor: colors.secondary4,
borderColor: colors.secondary4,
color: colors.greyscale1,
},
},
quantityStepper: {
borderColor: colors.greyscale3,
borderRadius: globalTheme.BorderRadius,
textTransform: "none",
numericInput: {
fontWeight: globalTheme.FontWeightBold,
fontSize: "0.875rem",
letterSpacing: "normal",
lineHeight: "1.1875rem",
static: {
bgColor: colors.greyscale1,
color: colors.greyscale5,
},
focused: {
bgColor: colors.primary5,
color: colors.greyscale5,
},
},
plusMinusButtons: {
plusMinusIconBgColor: colors.greyscale1,
plusMinusIconColor: colors.primary1,
},
},
coupon: {
borderRadius: globalTheme.BorderRadius,
borderStyle: "dashed",
fontWeight: globalTheme.FontWeightBold,
static: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale3,
color: colors.greyscale5,
couponIconColor: colors.primary1,
},
hover: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale3,
color: colors.greyscale5,
couponIconColor: colors.primary1,
},
clicked: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale3,
color: colors.greyscale5,
couponIconColor: colors.primary1,
},
clipped: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale3,
color: colors.greyscale5,
clippedIconColor: colors.success,
couponIconColor: colors.greyscale5,
},
},
addToCart: {
borderRadius: globalTheme.BorderRadius,
fontWeight: globalTheme.FontWeightBold,
textTransform: "none",
static: {
bgColor: colors.primary1,
borderColor: colors.primary1,
color: colors.greyscale1,
iconColor: colors.secondary1,
},
hover: {
bgColor: colors.primary2,
borderColor: colors.primary1,
color: colors.greyscale1,
iconColor: colors.greyscale1,
},
clicked: {
bgColor: colors.primary3,
borderColor: colors.primary2,
color: colors.greyscale1,
iconColor: colors.greyscale1,
},
disabled: {
bgColor: colors.primary4,
borderColor: colors.primary4,
color: colors.greyscale1,
iconColor: colors.greyscale3,
},
},
pills: {
borderRadius: "500px",
textTransform: "none",
active: {
fontWeight: globalTheme.FontWeightBold,
fontWeightHover: globalTheme.FontWeightBold,
color: colors.greyscale6,
colorHover: colors.greyscale6,
colorVisited: colors.greyscale6,
backgroundColor: colors.primary5,
borderColor: colors.primary1,
borderColorSelected: colors.primary1,
textDecoration: "none",
textDecorationHover: "underline",
padding: "4px 16px",
},
small: {
fontWeight: globalTheme.FontWeightBold,
fontWeightHover: globalTheme.FontWeight,
color: colors.greyscale5,
colorHover: colors.greyscale5,
colorVisited: colors.greyscale5,
backgroundColor: colors.primary5,
borderColor: colors.primary5,
borderColorSelected: colors.primary1,
textDecoration: "none",
textDecorationHover: "underline",
padding: "2px 8px",
},
regular: {
fontWeight: globalTheme.FontWeight,
fontWeightHover: globalTheme.FontWeight,
color: colors.primary1,
colorHover: colors.primary1,
colorVisited: colors.primary1,
backgroundColor: colors.greyscale1,
borderColor: colors.greyscale3,
borderColorSelected: colors.primary1,
textDecoration: "none",
textDecorationHover: "underline",
padding: "4px 16px",
},
},
facets: {
borderRadius: "500px",
textTransform: "none",
fontWeight: 400,
active: {
iconColor: colors.greyscale6,
fontWeight: globalTheme.FontWeightBold,
fontWeightHover: globalTheme.FontWeightBold,
color: colors.greyscale6,
colorHover: colors.greyscale6,
colorVisited: colors.greyscale6,
backgroundColor: colors.primary5,
borderColor: colors.primary1,
borderColorSelected: colors.primary1,
textDecoration: "none",
textDecorationHover: "underline",
padding: "4px 16px",
},
small: {
iconColor: colors.greyscale6,
fontWeight: globalTheme.FontWeightBold,
fontWeightHover: globalTheme.FontWeight,
color: colors.greyscale5,
colorHover: colors.greyscale5,
colorVisited: colors.greyscale5,
backgroundColor: colors.primary5,
borderColor: colors.primary5,
borderColorSelected: colors.primary1,
textDecoration: "none",
textDecorationHover: "underline",
padding: "2px 8px",
},
regular: {
iconColor: colors.greyscale6,
fontWeight: globalTheme.FontWeight,
fontWeightHover: globalTheme.FontWeight,
color: colors.primary1,
colorHover: colors.greyscale5,
colorVisited: colors.primary1,
backgroundColor: colors.greyscale1,
borderColor: colors.greyscale3,
borderColorSelected: colors.primary1,
textDecoration: "none",
textDecorationHover: "underline",
padding: "4px 16px",
},
},
sliderArrows: {
backgroundColor: colors.greyscale2,
sideBorderColor: colors.greyscale3,
iconColor: colors.greyscale4,
},
filterSort: {
color: colors.primary1,
hoverColor: colors.primary2,
},
},
carousel: {
bannerBackgroundColor: colors.greyscale5,
carouselPagination: {
dotBackground: colors.greyscale3,
activeDotBackground: colors.primary1,
wrapperBackground: "transparent",
wrapperHeight: "32px",
},
carouselArrows: {
borderRadius: "50%",
backgroundColor: "rgba(146, 146, 146, 0.5)",
activeBackgroundColor: colors.greyscale4,
iconColor: colors.greyscale1,
buttonDimension: 56,
},
},
modal: {
header: {
mobileBackgroundColor: colors.greyscale2,
},
storeIcon: {
bgColor: colors.tertiary1,
borderColor: colors.tertiary1,
color: colors.greyscale5,
hoverBGColor: colors.tertiary1,
hoverBorderColor: colors.tertiary1,
iconColor: colors.greyscale6,
},
},
selectedOption: {
bgColor: colors.successLight,
},
input: {
borderRadius: "4px",
static: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale3,
color: colors.greyscale4,
placeholderColor: colors.greyscale4,
},
hover: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale3,
color: colors.greyscale6,
placeholderColor: colors.greyscale4,
},
focus: {
bgColor: colors.tertiary1,
borderColor: colors.primary1,
color: colors.greyscale5,
placeholderColor: colors.greyscale5,
},
disabled: {
bgColor: colors.greyscale2,
borderColor: colors.greyscale3,
color: colors.greyscale4,
placeholderColor: colors.greyscale2,
},
},
productGrid: {
borderColor: colors.greyscale2,
},
logoHeight: {
header: {
desktop: "34px",
tablet: "30px",
mobile: "26px",
},
modal: {
desktop: "34px",
tablet: "30px",
mobile: "30px",
},
content: {
desktop: "34px",
tablet: "30px",
mobile: "26px",
},
},
globalAnimations: {
confettiAnimation: {
successModals: {
colors: [],
},
},
},
};
// CMS component types
var CMSComponentNames = {
Carousel: "Carousel",
CarouselSmall: "CarouselSmall",
Freeform: "Freeform",
ContactUs: "ContactUs",
HeroBanner: "HeroBanner",
Image: "Image",
Video: "Video",
VideoWithContent: "VideoWithContent",
ImageWithContent: "ImageWithContent",
ImageTextButton: "ImageTextButton",
SmallPromotion: "SmallPromotion",
SmallImageWithContent: "SmallImageWithContent",
LargePromotion: "LargePromotion",
TwoBannerContainer: "TwoBannerContainer",
ThreeBannerContainer: "ThreeBannerContainer",
Sale: "Sale",
SmallBannerWithBackgroundImage: "SmallBannerWithBackgroundImage",
SmallBannerWithSupportingImage: "SmallBannerWithSupportingImage",
};
var ContextObject = {
logger: console,
theme: theme,
componentNames: CMSComponentNames
};
var SharedContext = React.createContext(ContextObject);
var getActiveItemRange = function (currentSlideIndex, activeSlideCount) {
if (activeSlideCount === 1) {
return [currentSlideIndex];
}
else if (activeSlideCount === 2) {
return [currentSlideIndex, currentSlideIndex + 1];
}
else if (activeSlideCount === 3) {
var prevNum = currentSlideIndex - 1;
if (prevNum >= 0) {
return [currentSlideIndex, currentSlideIndex + 1, currentSlideIndex + 2];
}
else {
return [0, 1, 2];
}
}
else if (activeSlideCount === 4) {
var prevNum = currentSlideIndex - 1;
if (prevNum >= 0) {
return [
currentSlideIndex,
currentSlideIndex + 1,
currentSlideIndex + 2,
currentSlideIndex + 3,
];
}
else {
return [0, 1, 2, 3];
}
}
else if (activeSlideCount === 5) {
var prevNum = currentSlideIndex - 1;
if (prevNum >= 0) {
return [
currentSlideIndex,
currentSlideIndex + 1,
currentSlideIndex + 2,
currentSlideIndex + 3,
currentSlideIndex + 4,
];
}
else {
return [0, 1, 2, 3, 4];
}
}
else {
var prevNum = currentSlideIndex - 1;
if (prevNum >= 0) {
return [
currentSlideIndex,
currentSlideIndex + 1,
currentSlideIndex + 2,
currentSlideIndex + 3,
currentSlideIndex + 4,
currentSlideIndex + 5,
];
}
else {
return [0, 1, 2, 3, 4, 5];
}
}
};
var CarouselTrack = /** @class */ (function (_super) {
__extends(CarouselTrack, _super);
function CarouselTrack(props) {
var _this = _super.call(this, props) || this;
_this.registerActionStart = function (coordinate) {
// only update state if carouselEnabled
if (_this.props.carouselEnabled) {
_this.setState({
startX: coordinate,
});
}
};
_this.checkIfShouldChangeSlide = function (coordinate) {
// only update state if carouselEnabled
if (_this.props.carouselEnabled) {
var distanceTravelled = coordinate - _this.state.startX;
if (distanceTravelled > _this.props.dragThreshold) {
// if user swiped left further than the dragThreshold
_this.props.previousElement();
}
else if (distanceTravelled < -_this.props.dragThreshold) {
// if user swiped right further than the dragThreshold
_this.props.nextElement();
}
// clean up state
_this.setState({
startX: null,
});
}
};
_this.getIndexOfActiveSlides = function (index) {
return getActiveItemRange(_this.props.currentElementIndex, _this.props.activeSlideCount).filter(function (i) { return i === index; }).length > 0;
};
_this.state = {
startX: null,
};
return _this;
}
CarouselTrack.prototype.render = function () {
var _this = this;
try {
return (React.createElement(Track, { "data-testid": CarouselTrackTestId, role: "list", activeSlideCount: this.props.activeSlideCount, theme: this.context.theme, onMouseDown: function (e) { return _this.registerActionStart(e.pageX); }, onMouseUp: function (e) { return _this.checkIfShouldChangeSlide(e.pageX); }, onTouchEnd: function (e) {
return _this.checkIfShouldChangeSlide(e.changedTouches[0].clientX);
}, onTouchStart: function (e) {
return _this.registerActionStart(e.touches[0].clientX);
}, shouldAnimate: !!this.props.shouldAnimate },
this.props.showPreviews && (React.createElement(CarouselItem, { theme: this.context.theme, isSingleSlide: this.props.activeSlideCount === 1, carouselHeight: this.props.carouselHeight, type: "preClone", isActive: false, previewScaleFactor: this.props.previewScaleFactor, shouldAnimate: this.props.animatedTransitions, "aria-hidden": true, productGrid: this.props.productGrid, "data-testid": CarouselPreviewPreviousSlideTestId },
React.createElement(CarouselItemInner, { productGrid: this.props.productGrid, theme: this.context.theme }, this.props.itemsToRender[this.props.previousElementIndex]))),
this.props.itemsToRender.map(function (item, index) {
return (React.createElement(CarouselItem, { theme: _this.context.theme, carouselHeight: _this.props.carouselHeight, isSingleSlide: _this.props.activeSlideCount === 1, type: "natural", key: "" + index, isActive: _this.getIndexOfActiveSlides(index), previewScaleFactor: 1, shouldAnimate: _this.props.animatedTransitions, "aria-hidden": !_this.getIndexOfActiveSlides(index), productGrid: _this.props.productGrid, "data-testid": "" + CarouselSlideTestId + index },
React.createElement(CarouselItemInner, { productGrid: _this.props.productGrid, theme: _this.context.theme }, item)));
}),
this.props.showPreviews && (React.createElement(CarouselItem, { theme: this.context.theme, carouselHeight: this.props.carouselHeight, type: "postClone", isSingleSlide: this.props.activeSlideCount === 1, isActive: false, previewScaleFactor: this.props.previewScaleFactor, shouldAnimate: this.props.animatedTransitions, "aria-hidden": true, productGrid: this.props.productGrid, "data-testid": CarouselPreviewNextSlideTestId },
React.createElement(CarouselItemInner, { productGrid: this.props.productGrid, theme: this.context.theme }, this.props.itemsToRender[this.props.nextElementIndex])))));
}
catch (e) {
this.context.logger.error("CarouselTrackError", e, { props: this.props });
}
};
CarouselTrack.contextType = SharedContext;
return CarouselTrack;
}(React.Component));
var CarouselTrackTestId = "CarouselTrackTestId";
var CarouselSlideTestId = "CarouselSlideTestId";
var CarouselPreviewPreviousSlideTestId = "CarouselPreviewPreviousSlideTestId";
var CarouselPreviewNextSlideTestId = "CarouselPreviewNextSlideTestId";
var setGoogleTranslateLevel = function (input) {
return 0 + input;
};
var baseLayer = 1;
var overlayLayer = setGoogleTranslateLevel(2);
var ControlsContainer = styled.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: ", ";\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: ", ";\n"])), baseLayer);
var templateObject_1;
var CarouselControls = function (props) {
return (React.createElement(ControlsContainer, { "data-testid": CarouselControlsTestId }, props.children));
};
var CarouselControlsTestId = "CarouselControlsTestId";
var ButtonsWrapper = styled.div(function (_a) {
var showArrowsOnMobile = _a.showArrowsOnMobile, showPreviews = _a.showPreviews;
return "\n position: relative;\n height: 100%;\n \n " + mediaQueries("sm") + " {\n display: " + (showArrowsOnMobile ? "block" : "none") + ";\n width: " + (showPreviews.mobile
? "calc(100% * " + previewFlexItemWidth.mobile / previewFlexScreenWidth + ")"
: "100%") + ";\n }\n \n // Specific, extra media query to handle width of cells in mobile banner carousels at 'large mobile' size\n @media (min-width: 490px) and (max-width: " + bpMobile + "px) {\n width: " + (showPreviews.mobile
? "calc(100% * " + previewFlexItemWidth.largeMobile / previewFlexScreenWidth + ")"
: "100%") + ";\n }\n \n " + mediaQueries("md") + " {\n width: " + (showPreviews.tablet
? "calc(100% * " + previewFlexItemWidth.tablet / previewFlexScreenWidth + ")"
: "100%") + ";\n }\n \n " + mediaQueries("lg") + " {\n width: " + (showPreviews.desktop
? "calc(100% * " + previewFlexItemWidth.desktop / previewFlexScreenWidth + ")"
: "100%") + ";\n }\n";
});
var ButtonArrow = styled.button(function (_a) {
var theme = _a.theme, isLeft = _a.isLeft, isRight = _a.isRight, width = _a.width, height = _a.height, alignToTop = _a.alignToTop;
var arrowWidth = Number(width) || Number(theme.carousel.carouselArrows.buttonDimension);
var arrowHeight = Number(height) || Number(theme.carousel.carouselArrows.buttonDimension);
var arrowOffset = Number(arrowWidth) / 2;
return "\n pointer-events: all;\n position: absolute;\n top: " + (alignToTop ? "25%" : "50%") + ";\n transform: translateY(-50%);\n cursor: pointer;\n z-index: " + baseLayer + ";\n height: " + arrowHeight + "px;\n width: " + arrowWidth + "px;\n background-color: " + theme.carousel.carouselArrows.backgroundColor + ";\n border-radius: " + theme.carousel.carouselArrows.borderRadius + ";\n fill: " + theme.carousel.carouselArrows.iconColor + ";\n color: " + theme.carousel.carouselArrows.iconColor + ";\n display: inline-flex;\n align-items: center;\n justify-content: center;\n left: " + (!!isLeft ? "-" + arrowOffset + "px" : "auto") + ";\n right: " + (!!isRight ? "-" + arrowOffset + "px" : "auto") + ";\n border: none;\n outline: none;\n box-shadow: 0 0 10px rgba(0,0,0,0.10);\n\n &:hover, &:focus {\n background: " + theme.carousel.carouselArrows.activeBackgroundColor + ";\n }\n ";
});
var CarouselButtons = /** @class */ (function (_super) {
__extends(CarouselButtons, _super);
function CarouselButtons(props) {
var _this = _super.call(this, props) || this;
_this.handleOnClick = function (direction) {
if (direction !== _this.state.previousArrowDirection) {
_this.setState({
previousArrowDirection: direction,
sameArrowClickCount: 1,
});
}
else {
_this.setState({
sameArrowClickCount: _this.state.sameArrowClickCount + 1,
});
}
if (direction === "left") {
_this.props.goToPrevious();
}
else {
_this.props.goToNext();
}
};
_this.handlePrevBtnClick = function () {
if (!!_this.props.getCarouselButtonsAnalyticsEvents) {
_this.props.getCarouselButtonsAnalyticsEvents("carousel-arrow", "left", _this.state.previousArrowDirection !== "left"
? 1
: _this.state.sameArrowClickCount + 1, _this.props.carouselPosition);
}
_this.handleOnClick("left");
};
_this.handleNextBtnClick = function () {
if (!!_this.props.getCarouselButtonsAnalyticsEvents) {