@ticketmaster/aurora
Version:
Shared UI Library for Ticketmaster
1,595 lines (1,390 loc) • 837 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('styled-components'), require('classnames'), require('react-dom'), require('react-transition-group')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'styled-components', 'classnames', 'react-dom', 'react-transition-group'], factory) :
(global = global || self, factory(global.TicketmasterAurora = {}, global.React, global.PropTypes, global.styled, global.classNames, global.ReactDOM, global.ReactTransitionGroup));
}(this, function (exports, React, PropTypes, styled, classNames, ReactDOM, reactTransitionGroup) { 'use strict';
var React__default = 'default' in React ? React['default'] : React;
var PropTypes__default = 'default' in PropTypes ? PropTypes['default'] : PropTypes;
var styled__default = 'default' in styled ? styled['default'] : styled;
classNames = classNames && classNames.hasOwnProperty('default') ? classNames['default'] : classNames;
var ReactDOM__default = 'default' in ReactDOM ? ReactDOM['default'] : ReactDOM;
function _typeof(obj) {
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof = function (obj) {
return typeof obj;
};
} else {
_typeof = function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
}
return _typeof(obj);
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectSpread(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === 'function') {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function (key) {
_defineProperty(target, key, source[key]);
});
}
return target;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
writable: true,
configurable: true
}
});
if (superClass) _setPrototypeOf(subClass, superClass);
}
function _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _possibleConstructorReturn(self, call) {
if (call && (typeof call === "object" || typeof call === "function")) {
return call;
}
return _assertThisInitialized(self);
}
function _taggedTemplateLiteral(strings, raw) {
if (!raw) {
raw = strings.slice(0);
}
return Object.freeze(Object.defineProperties(strings, {
raw: {
value: Object.freeze(raw)
}
}));
}
function _toArray(arr) {
return _arrayWithHoles(arr) || _iterableToArray(arr) || _nonIterableRest();
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
return arr2;
}
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance");
}
// DIRECTIONS
var TOP = "top";
var BOTTOM = "bottom";
var LEFT = "left";
var RIGHT = "right";
var AUTO = "auto";
var DIRECTIONS = [TOP, BOTTOM, LEFT, RIGHT, AUTO];
// VARIANTS
var LIGHT = "light";
var DARK = "dark";
var VARIANTS = [LIGHT, DARK];
// BUTTON_VARIANTS
var STANDARD = "standard";
var SPECIAL = "special";
var OUTLINE = "outline";
var OUTLINE_GRAY = "outlineGray";
var TRANSPARENT = "transparent";
var BUTTON_VARIANTS = [STANDARD, SPECIAL, OUTLINE, OUTLINE_GRAY, TRANSPARENT];
// SIZES
var SMALL = "small";
var REGULAR = "regular";
var LARGE = "large";
var SIZES = [SMALL, REGULAR, LARGE];
var SIZES_SL = [SMALL, LARGE];
var SIZES_SR = [SMALL, REGULAR];
var ARROW_WIDTH = 12; // FONT_WEIGHTS
var FONT_WEIGHT_SEMI_BOLD = "semiBold";
// THEME COLORS
var ONYX = "onyx";
var BASE = "base";
var spacing = {
slim: "4px",
cozy: "8px",
moderate: "16px",
normal: "24px",
comfy: "32px",
shakira: "32px",
// NOTE: this constant is deprecated. It will be removed in the future.
spacious: "48px",
giant: "64px",
colossal: "88px",
gutters: {
tiny: 8,
small: 16,
mediumAndUp: 24,
largeAndUp: 32
}
};
var typography = {
weight: {
light: 300,
regular: 400,
semiBold: 600,
/**
* @deprecated Use `semiBold` value instead
*/
extraBold: 600
},
lineHeight: {
body: "1.5",
header: "1.25"
},
size: {
mini: "10px",
uno: "12px",
hecto: "14px",
kilo: "16px",
giga: "20px",
tera: "24px",
zetta: "32px",
bronto: "46px"
}
};
var success = "#1bab1e";
var global$1 = {
brand: "#026cdf",
primary: {
// brand colors
base: "#026cdf",
reverse: "#3396ff",
reverseLight: "#80b5ef",
reverseLightest: "#bfdaf6",
// button colors
dark: "#0150a7",
darkest: "#013670",
light: "#d6e7fa",
lightest: "#ebf4fd",
// not used in new components. kept for backward compatibility.
lightBase: "rgba(2, 108, 223, 0.1)",
medium: "#0150a7",
muted: "#d6e7fa"
},
special: {
base: success,
dark: "#23702c",
darkest: "#265333",
medium: "#23702c" // not used in new components. kept for backward compatibility.
},
darkFill: "#1f262d",
// not used in new components. kept for backward compatibility.
dark: {
base: "#1f262d",
light: "#8f9296",
lightest: "#e3e4e5"
},
accent01: {
base: "#c56bff",
dark: "#904eba",
light: "#eacbff",
lightest: "#f9f0ff"
},
accent02: {
base: "#962d94",
dark: "#6d236c",
light: "#dfc0df",
lightest: "#f4eaf4"
},
accent03: {
base: "#14a1a3",
dark: "#0a7e80",
light: "#aadddd",
lightest: "#cef2f2",
reverse: "#20c4c7"
},
accent04: "#00ffff",
gray01: "#262626",
gray02: "#999999",
gray03: "#bfbfbf",
gray04: "#ebebeb",
gray05: "#f6f6f6",
error: {
base: "#d93a3a",
dark: "#a22b2b",
light: "#f3c3c3",
lightest: "#fbebeb"
},
caution: {
base: "#f2bd2a",
dark: "#c69a22",
light: "#fae7b4",
lightest: "#fdf5df"
},
success: {
base: success,
dark: "#148016",
light: "#bae5bb",
lightest: "#e8f6e8"
},
transparent: "transparent",
onyx: {
base: "rgba(38, 38, 38, 1)",
light: "rgba(38, 38, 38, 0.65)",
muted: "rgba(38, 38, 38, 0.4)"
},
white: {
base: "rgba(255, 255, 255, 1)",
lighter: "rgba(255, 255, 255, 0.2)",
midlight: "rgba(255, 255, 255, 0.65)",
light: "rgba(255, 255, 255, 0.7)",
muted: "rgba(255, 255, 255, 0.5)"
}
};
var themes = {
global: global$1,
tm: global$1,
lne: _objectSpread({}, global$1, {
brand: "#e11d39",
primary: {
base: "#2cb3ad",
medium: "#239893",
dark: "#1f8783",
light: "#e9f7f6",
lightest: "#e9f7f6",
muted: "#d5f0ef"
}
})
};
var tm = themes.tm;
/**
* PLEASE NOTE: THESE COLORS ARE DEPRECATED! DO NOT USE!
* Please reference the colorThemes located in `/src/theme/colorThemes` instead!
*/
var colors = {
azure: {
dark: tm.primary.base,
base: tm.primary.base,
light: "rgba(2, 108, 223, 0.2)",
muted: tm.primary.lightBase,
restrained: "rgba(2, 108, 223, 0.4)",
hover: tm.primary.medium,
hoverLight: tm.primary.light,
pressed: tm.primary.dark,
pressedLight: tm.primary.muted
},
emerald: _objectSpread({}, tm.success, {
hover: tm.special.medium,
pressed: tm.special.dark,
muted: "rgba(27, 171, 30, 0.4)",
restrained: "rgba(27, 171, 30, 0.2)"
}),
outlined: {
hover: "#ECF4FD",
pressed: "#D9E8F9"
},
transparent: tm.transparent,
summerSky: "#3AC7FF",
blackPearl: tm.darkFill,
slate: tm.gray02,
moonstone: "#D1D1D1",
shale: "#E6E6E6",
quartz: tm.gray05,
lightGray: "#E0E0E0",
aquamarine: tm.accent04,
turquoise: tm.accent03,
ruby: {
base: tm.error.base,
darkRuby: tm.error.dark,
lightRuby: tm.error.light
},
amber: {
base: tm.caution.base,
darkAmber: tm.caution.dark,
lightAmber: tm.caution.light
},
moonrock: tm.gray03,
diatomite: tm.gray04,
heliotrope: _objectSpread({}, tm.accent01, {
muted: "#F3E1FF"
}),
cruz: _objectSpread({}, tm.accent02, {
muted: "#e3cae3"
}),
alert: {
base: tm.error.base,
dark: "#AE393A",
light: "#EC9C9C",
muted: "#F5CDCD"
},
caution: tm.caution,
positive: {
base: tm.success.base,
dark: "#208E25",
light: "#8DD58E",
muted: "#C5E9C6"
},
defaultGradient: {
from: tm.primary.base,
to: "#3ac7ff"
},
onyx: tm.onyx,
white: tm.white
};
var zIndex = {
default: 0,
reset: 1,
unset: -1,
shared: {
autocomplete: 1
},
searchsuggest: {
base: 4,
fields: 5
},
layout: {
feedback: 1,
ads: 2,
header: 3,
menu: 4,
overlay: 9
},
drawer: {
overlay: 3,
content: 4
},
filter: {
panel: 5
}
};
var constants = {
MAX_COLUMNS: 12,
borderRadius: {
small: "2px",
large: "4px",
xLarge: "8px",
xxLarge: "10px"
},
breakpoints: {
small: "(max-width: 767px)",
medium: "(min-width: 768px)",
large: "(min-width: 1024px)",
xLarge: "(min-width: 1440px)",
xSmallAndDown: "(max-width: 479px)",
smallAndUp: "(min-width: 480px)",
mediumAndUp: "(min-width: 768px)",
largeAndUp: "(min-width: 1024px)",
midLargeAndUp: "(min-width: 1280px)",
midLargeAndDown: "(max-width: 1280px)",
xLargeAndUp: "(min-width: 1440px)"
},
easing: {
easeInQuad: "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
easeInOutQuad: "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
easeOutQuad: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
exit: "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
elastic: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
}
};
var cardBoxShadow = "0 4px 4px 0 rgba(0, 0, 0, 0.06), 0 0 4px 0 rgba(0, 0, 0, 0.12)";
var popContainersBoxShadow = "0 4px 4px 0 rgba(0, 0, 0, 0.12)";
var popContainersSharpBoxShadow = "0 2px 8px 0 rgba(159, 159, 159, 0.5)";
var THEME_TM = {
themeName: "tm"
};
var _this = undefined;
/* eslint-disable no-param-reassign */
var memoize = (function (fn) {
return function () {
for (var _len = arguments.length, input = new Array(_len), _key = 0; _key < _len; _key++) {
input[_key] = arguments[_key];
}
var args = Array.prototype.slice.call(input);
fn.cache = fn.cache || {};
var result = fn.cache[args] ? fn.cache[args] : fn.cache[args] = fn.apply(_this, args);
return result;
};
});
var getThemeObject = function getThemeObject(themeName, customValues) {
var baseTheme = themes[themeName] || themes.global;
if (customValues && customValues.constructor === Object) {
return _objectSpread({}, baseTheme, customValues);
}
return baseTheme;
};
var memoized = memoize(getThemeObject);
var themeShape = {
themeName: PropTypes__default.string.isRequired
};
/**
* This function allows to retrieve a value from the themes object.
* The first function accepts path as a list of strings.
* The second function accepts a theme object. It's provided in styled components
* automatically.
*/
var getThemeValue = (function () {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return function () {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$theme = _ref.theme;
_ref$theme = _ref$theme === void 0 ? THEME_TM : _ref$theme;
var _ref$theme$themeName = _ref$theme.themeName,
themeName = _ref$theme$themeName === void 0 ? THEME_TM.themeName : _ref$theme$themeName,
_ref$theme$customValu = _ref$theme.customValues,
customValues = _ref$theme$customValu === void 0 ? null : _ref$theme$customValu;
var themeObject = memoized(themeName, customValues);
return args.reduce(function (acc, el) {
if (acc[el] === undefined) {
throw new ReferenceError("value is not defined");
}
return acc[el];
}, themeObject);
};
});
var composeHandler = function composeHandler() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return function (e) {
args.forEach(function (fn) {
return fn && fn(e);
});
};
};
/**
* getRelByTarget overrides the anchor tag's rel attribute to "noopener" when the target attribute equals "_blank"
* Prevents a security vulnerability and improves performance: https://developers.google.com/web/tools/lighthouse/audits/noopener
* @param { String } target - Specifies where to open the linked document (e.g. _blank, _self, _parent, _top, framename)
* @param { String } rel - Specifies the relationship between the current document and the linked document (e.g. alternate, author, noopener, etc.)
* @returns { String } rel
*/
var getRelByTarget = function getRelByTarget(target, rel) {
return target === "_blank" ? "noopener" : rel;
};
var getAsProp = function getAsProp(_ref) {
var href = _ref.href,
onClick = _ref.onClick;
if (href && href.length) return {
as: "a"
};
if (!href && onClick && typeof onClick === "function") return {
as: "button"
};
return {
as: "span"
};
};
var omitKeys = function omitKeys() {
var keys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var obj = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
return Object.keys(obj).reduce(function (acc, key) {
if (keys.includes(key)) return acc;
acc[key] = obj[key];
return acc;
}, {});
};
var sluggify = function sluggify() {
var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
if (typeof text !== "string") {
return "";
}
return text.replace(/\s/g, "").toLowerCase();
};
var getFontHue = function getFontHue(_ref) {
var fontColor = _ref.fontColor,
primary = _ref.primary,
secondary = _ref.secondary,
disabled = _ref.disabled,
variant = _ref.variant,
themed = _ref.themed;
if (typeof fontColor === "string") return themed ? "" : fontColor;
var fontHues = themed ? {
primary: variant === "accent" ? "dark" : "base",
secondary: variant === "accent" ? "base" : "light",
disabled: variant === "accent" ? "light" : "muted"
} : {
primary: variant === "accent" ? fontColor.dark : fontColor.base,
secondary: fontColor.light,
disabled: fontColor.muted
};
switch (true) {
case primary:
return fontHues.primary;
case secondary:
return fontHues.secondary;
case disabled:
return fontHues.disabled;
default:
return fontHues.primary;
}
};
var getFontColor = function getFontColor(_ref2) {
var variant = _ref2.variant,
accent = _ref2.accent,
primary = _ref2.primary,
secondary = _ref2.secondary,
disabled = _ref2.disabled;
var fontColors = {
dark: themes.global.onyx,
light: themes.global.white,
accent: colors[accent]
};
var fontColor = fontColors[variant] || fontColors.dark;
return getFontHue({
fontColor: fontColor,
primary: primary,
secondary: secondary,
disabled: disabled,
variant: variant,
themed: false
});
};
var getThemedFontColor = function getThemedFontColor(_ref3) {
var theme = _ref3.theme,
variant = _ref3.variant,
accent = _ref3.accent,
primary = _ref3.primary,
secondary = _ref3.secondary,
disabled = _ref3.disabled;
if (!theme || !theme.themeName) {
return getFontColor({
variant: variant,
accent: accent,
primary: primary,
secondary: secondary,
disabled: disabled
});
}
var fontColors = {
dark: "onyx",
light: "white",
accent: accent
};
var fontColor = getThemeValue(fontColors[variant] || "onyx")({
theme: theme
});
var fontHue = getFontHue({
fontColor: fontColor,
primary: primary,
secondary: secondary,
disabled: disabled,
variant: variant,
themed: true
});
return fontColor[fontHue] || fontColor;
};
var labelsColorMap = {
alert: themes.global.error.base,
positive: themes.global.success.base,
positiveDark: themes.global.success.dark,
accent: themes.global.accent01.dark,
caution: themes.global.caution.dark,
neutral: themes.global.onyx.light
};
var getLabelTextColor = function getLabelTextColor(_ref4) {
var variant = _ref4.variant;
return labelsColorMap[variant] || "inherit";
};
var throttle = (function (callback, wait) {
var immediate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var timeout = null;
var initialCall = true; // eslint-disable-next-line func-names
return function () {
var _this = this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var callNow = immediate && initialCall;
var next = function next() {
callback.apply(_this, args);
timeout = null;
};
if (callNow) {
initialCall = false;
next();
}
if (!timeout) {
timeout = setTimeout(next, wait);
}
};
});
var isValidThemeColorVariant = function isValidThemeColorVariant() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : THEME_TM,
_ref$themeName = _ref.themeName,
themeName = _ref$themeName === void 0 ? THEME_TM.themeName : _ref$themeName,
_ref$customValues = _ref.customValues,
customValues = _ref$customValues === void 0 ? null : _ref$customValues;
var color = arguments.length > 1 ? arguments[1] : undefined;
var variant = arguments.length > 2 ? arguments[2] : undefined;
var themeObject = memoized(themeName, customValues);
return Boolean(themeObject[color] && themeObject[color].constructor === Object && themeObject[color][variant]);
};
var getBackgroundImage = function getBackgroundImage(_ref) {
var backgroundImage = _ref.backgroundImage,
deg = _ref.deg,
stops = _ref.stops;
return [deg && stops && "linear-gradient(".concat(deg, ", ").concat(stops.join(", "), ")"), backgroundImage && "url(".concat(backgroundImage, ")")].join(backgroundImage && deg && stops ? ", " : "");
};
function _templateObject2() {
var data = _taggedTemplateLiteral(["\n display: block;\n text-decoration: none;\n"]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = _taggedTemplateLiteral(["\n font-family: inherit;\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n width: 100%;\n padding: 0 ", " 0 ", ";\n min-width: 60px;\n text-align: center;\n border-radius: ", ";\n cursor: pointer;\n\n color: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n\n transition: transform 0.1s linear;\n transition: background-color 0.3s ", ";\n\n &:focus {\n outline: none;\n box-shadow: 0 0 5px 0 ", ";\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n transform: scale(0.98, 0.98) translate(0, 1px);\n background-color: ", ";\n }\n\n &:disabled {\n transform: none;\n color: ", ";\n background-color: ", ";\n border: 1px solid\n ", ";\n ", ";\n }\n\n &.noFocus:focus {\n box-shadow: none;\n }\n\n &.iconed svg {\n position: relative;\n display: inline-block;\n vertical-align: text-top;\n margin-right: ", ";\n }\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
var colorVariants = {
standard: {
color: getThemeValue("white", "base"),
backgroundColor: getThemeValue("primary", "base"),
backgroundColorHover: getThemeValue("primary", "medium"),
backgroundColorPressed: getThemeValue("primary", "dark"),
borderColor: getThemeValue("transparent")
},
standardDisabled: {
color: getThemeValue("white", "base"),
backgroundColor: getThemeValue("primary", "base"),
borderColor: getThemeValue("transparent")
},
special: {
color: getThemeValue("white", "base"),
backgroundColor: getThemeValue("special", "base"),
backgroundColorHover: getThemeValue("special", "medium"),
backgroundColorPressed: getThemeValue("special", "dark"),
borderColor: getThemeValue("transparent")
},
specialDisabled: {
color: getThemeValue("white", "base"),
backgroundColor: getThemeValue("special", "base"),
borderColor: getThemeValue("transparent")
},
outline: {
color: getThemeValue("primary", "base"),
backgroundColor: getThemeValue("white", "base"),
backgroundColorHover: getThemeValue("primary", "light"),
backgroundColorPressed: getThemeValue("primary", "muted"),
borderColor: getThemeValue("primary", "base")
},
outlineDisabled: {
color: getThemeValue("primary", "base"),
backgroundColor: getThemeValue("transparent"),
borderColor: getThemeValue("primary", "base")
},
transparent: {
color: getThemeValue("primary", "base"),
backgroundColor: getThemeValue("transparent"),
backgroundColorHover: getThemeValue("primary", "light"),
backgroundColorPressed: getThemeValue("primary", "muted"),
borderColor: getThemeValue("transparent")
},
transparentDisabled: {
color: getThemeValue("primary", "base"),
backgroundColor: getThemeValue("transparent"),
borderColor: getThemeValue("transparent")
},
outlineGray: {
color: getThemeValue("darkFill"),
backgroundColor: getThemeValue("white", "base"),
backgroundColorHover: getThemeValue("white", "base"),
backgroundColorPressed: getThemeValue("white", "base"),
borderColor: getThemeValue("gray04")
},
outlineGrayDisabled: {
color: getThemeValue("primary", "base"),
backgroundColor: getThemeValue("transparent"),
borderColor: getThemeValue("gray02")
}
};
var SIZES$1 = {
small: {
padding: "10px",
lineHeight: 1.84,
fontSize: typography.size.uno
},
regular: {
padding: "12px",
lineHeight: 2.43,
fontSize: typography.size.hecto
},
large: {
padding: "14px",
lineHeight: 2.63,
fontSize: typography.size.kilo
}
};
var getPadding = function getPadding(_ref) {
var size = _ref.size;
return SIZES$1[size].padding;
};
var StyledButton = styled__default.button(_templateObject(), typography.weight.semiBold, function (_ref2) {
var size = _ref2.size;
return SIZES$1[size].fontSize;
}, function (_ref3) {
var size = _ref3.size;
return SIZES$1[size].lineHeight;
}, getPadding, getPadding, constants.borderRadius.small, function (_ref4) {
var variant = _ref4.variant;
return colorVariants[variant].color;
}, function (_ref5) {
var variant = _ref5.variant;
return colorVariants[variant].backgroundColor;
}, function (_ref6) {
var variant = _ref6.variant;
return colorVariants[variant].borderColor;
}, constants.easing.easeInOutQuad, getThemeValue("primary", "base"), function (_ref7) {
var variant = _ref7.variant;
return colorVariants[variant].backgroundColorHover;
}, function (_ref8) {
var variant = _ref8.variant;
return colorVariants[variant].backgroundColorPressed;
}, function (_ref9) {
var variant = _ref9.variant;
return colorVariants[variant].color;
}, function (_ref10) {
var variant = _ref10.variant;
return colorVariants[variant].backgroundColor;
}, function (_ref11) {
var variant = _ref11.variant;
return colorVariants["".concat(variant, "Disabled")].borderColor;
}, function (_ref12) {
var variant = _ref12.variant;
return variant === SPECIAL ? "opacity: 0.4;" : "opacity: 0.2;";
}, spacing.cozy);
StyledButton.defaultProps = {
theme: {
themeName: "tm"
}
};
var StyledButtonLink = styled__default(StyledButton)(_templateObject2());
function isButtonLinkProps(props) {
return !!props.href;
}
var Button =
/*#__PURE__*/
function (_Component) {
_inherits(Button, _Component);
function Button() {
var _getPrototypeOf2;
var _this;
_classCallCheck(this, Button);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Button)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "focusHandler", function () {
window.addEventListener("keyup", _this.activateFocusStyles);
});
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "blurHandler", function () {
if (_this.button && _this.button.current && _this.button.current.classList) {
_this.button.current.classList.add("noFocus");
}
window.removeEventListener("keyup", _this.activateFocusStyles);
});
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "activateFocusStyles", function () {
if (_this.button && _this.button.current && _this.button.current.classList) {
_this.button.current.classList.remove("noFocus");
}
});
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "button", _this.props.forwardedRef || React__default.createRef());
return _this;
}
_createClass(Button, [{
key: "componentDidMount",
value: function componentDidMount() {
if (!isButtonLinkProps(this.props) && this.button && this.button.current) {
// this functionality is required to avoid focus outline on click but keep it on tab focus
this.button.current.addEventListener("focus", this.focusHandler);
this.button.current.addEventListener("blur", this.blurHandler);
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
// in case user leaves a page before onBlur is triggered
window.removeEventListener("keyup", this.activateFocusStyles);
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
variant = _this$props.variant,
size = _this$props.size,
icon = _this$props.icon,
children = _this$props.children,
rest = _objectWithoutProperties(_this$props, ["variant", "size", "icon", "children"]);
if (isButtonLinkProps(this.props)) {
var _this$props2 = this.props,
_rel = _this$props2.rel,
_target = _this$props2.target;
var validatedRel = getRelByTarget(_target, _rel);
return React__default.createElement(StyledButtonLink, _extends({
variant: variant,
size: size,
rel: validatedRel,
as: "a",
className: "".concat(icon ? "iconed" : "")
}, rest), icon, children);
}
return React__default.createElement(StyledButton, _extends({
variant: variant,
size: size
}, rest, {
className: "".concat(rest.className || "", " ").concat(icon ? "iconed" : "", " noFocus"),
ref: this.button
}), icon, children);
}
}]);
return Button;
}(React.Component);
_defineProperty(Button, "displayName", "Button");
_defineProperty(Button, "propTypes", {
variant: PropTypes__default.oneOf(BUTTON_VARIANTS),
size: PropTypes__default.oneOf(SIZES),
icon: PropTypes__default.node,
children: PropTypes__default.node.isRequired,
forwardedRef: PropTypes__default.objectOf(PropTypes__default.any)
});
_defineProperty(Button, "defaultProps", {
size: REGULAR,
variant: STANDARD,
icon: null,
forwardedRef: null
});
function _templateObject2$1() {
var data = _taggedTemplateLiteral(["\n font-size: ", ";\n display: flex;\n flex-flow: row;\n align-items: center;\n justify-content: center;\n max-width: 45px;\n min-width: 45px;\n height: 20px;\n"]);
_templateObject2$1 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject$1() {
var data = _taggedTemplateLiteral(["\n height: ", ";\n width: 100%;\n min-width: 100px;\n\n font-weight: ", ";\n text-align: center;\n border-radius: ", ";\n color: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n cursor: pointer;\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: 1px solid\n ", ";\n cursor: not-allowed;\n }\n"]);
_templateObject$1 = function _templateObject() {
return data;
};
return data;
}
var HEIGHT = "36px";
var VARIANTS$1 = {
standard: {
color: themes.global.white.base,
backgroundColor: themes.global.primary.base,
borderColor: themes.global.primary.base
},
standardDisabled: {
color: themes.global.white.base,
backgroundColor: colors.azure.light,
borderColor: colors.azure.light
},
outline: {
color: themes.global.primary.base,
backgroundColor: themes.global.white.base,
borderColor: themes.global.primary.base
},
outlineDisabled: {
color: colors.azure.light,
backgroundColor: themes.global.white.base,
borderColor: colors.azure.light
},
transparent: {
color: themes.global.white.base,
backgroundColor: "transparent",
borderColor: themes.global.white.base
},
transparentDisabled: {
color: themes.global.white.muted,
backgroundColor: "transparent",
borderColor: themes.global.white.muted
}
};
var GenericButton = styled__default.button(_templateObject$1(), HEIGHT, typography.weight.semiBold, constants.borderRadius.small, function (_ref) {
var variant = _ref.variant;
return VARIANTS$1[variant].color;
}, function (_ref2) {
var variant = _ref2.variant;
return VARIANTS$1[variant].backgroundColor;
}, function (_ref3) {
var variant = _ref3.variant;
return VARIANTS$1[variant].borderColor;
}, function (_ref4) {
var variant = _ref4.variant;
return VARIANTS$1["".concat(variant, "Disabled")].color;
}, function (_ref5) {
var variant = _ref5.variant;
return VARIANTS$1["".concat(variant, "Disabled")].backgroundColor;
}, function (_ref6) {
var variant = _ref6.variant;
return VARIANTS$1["".concat(variant, "Disabled")].borderColor;
});
var StyledBadge = styled__default(GenericButton)(_templateObject2$1(), typography.size.uno);
var Badge = function Badge(_ref) {
var children = _ref.children,
variant = _ref.variant,
props = _objectWithoutProperties(_ref, ["children", "variant"]);
return React__default.createElement(StyledBadge, _extends({
variant: variant
}, props), children);
};
Badge.propTypes = {
children: PropTypes__default.node.isRequired,
variant: PropTypes__default.oneOf(BUTTON_VARIANTS),
size: PropTypes__default.oneOf(SIZES)
};
Badge.defaultProps = {
size: REGULAR,
variant: STANDARD
};
var StarIcon = function StarIcon(_ref) {
var size = _ref.size,
color = _ref.color,
children = _ref.children,
props = _objectWithoutProperties(_ref, ["size", "color", "children"]);
return React__default.createElement("svg", _extends({}, props, {
viewBox: "0 0 11 10",
width: size,
height: size,
fill: color
}), children, React__default.createElement("path", {
fillRule: "evenodd",
d: "M5.5 7.7L2.267 9.95l1.14-3.77L.27 3.8l3.938-.08L5.5 0l1.293 3.72 3.938.08-3.139 2.38 1.14 3.77z"
}));
};
StarIcon.displayName = "StarIcon";
StarIcon.propTypes = {
size: PropTypes.PropTypes.number.isRequired,
color: PropTypes.PropTypes.string,
children: PropTypes.PropTypes.node
};
StarIcon.defaultProps = {
children: null,
color: "currentColor"
};
function _templateObject4() {
var data = _taggedTemplateLiteral(["\n flex: 0 0 auto;\n line-height: 1;\n"]);
_templateObject4 = function _templateObject4() {
return data;
};
return data;
}
function _templateObject3() {
var data = _taggedTemplateLiteral(["\n padding-left: 2px;\n"]);
_templateObject3 = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2$2() {
var data = _taggedTemplateLiteral(["\n display: flex;\n flex-flow: row;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n"]);
_templateObject2$2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject$2() {
var data = _taggedTemplateLiteral(["\n padding: 0;\n\n &:hover {\n opacity: 0.5;\n }\n"]);
_templateObject$2 = function _templateObject() {
return data;
};
return data;
}
var StyledBadgeRating = styled__default(StyledBadge)(_templateObject$2());
var ContentWrapper = styled__default.span(_templateObject2$2());
var Container = styled__default.span(_templateObject3());
var StyledStarIcon = styled__default(StarIcon)(_templateObject4());
var RatingBadge = function RatingBadge(_ref) {
var variant = _ref.variant,
children = _ref.children,
ratingValue = _ref.ratingValue,
bestRating = _ref.bestRating,
ratingCount = _ref.ratingCount,
props = _objectWithoutProperties(_ref, ["variant", "children", "ratingValue", "bestRating", "ratingCount"]);
return React__default.createElement(StyledBadgeRating, _extends({
itemProp: "aggregateRating",
itemScope: true,
itemType: "https://schema.org/AggregateRating",
variant: variant
}, props), React__default.createElement(ContentWrapper, null, React__default.createElement(StyledStarIcon, {
size: 12
}), React__default.createElement(Container, null, children), ratingValue && React__default.createElement("meta", {
itemProp: "ratingValue",
content: ratingValue
}), bestRating && React__default.createElement("meta", {
itemProp: "bestRating",
content: bestRating
}), ratingCount && React__default.createElement("meta", {
itemProp: "ratingCount",
content: ratingCount
})));
};
RatingBadge.propTypes = {
children: PropTypes__default.node.isRequired,
ratingValue: PropTypes__default.string.isRequired,
bestRating: PropTypes__default.string,
ratingCount: PropTypes__default.string.isRequired,
variant: PropTypes__default.oneOf(BUTTON_VARIANTS),
size: PropTypes__default.oneOf(SIZES)
};
RatingBadge.defaultProps = {
variant: STANDARD,
size: REGULAR,
bestRating: "5"
};
function _templateObject$3() {
var data = _taggedTemplateLiteral(["\n font-size: ", ";\n min-width: ", "px;\n max-width: ", "px;\n height: ", "px;\n width: ", "px;\n border: none;\n\n &:focus {\n outline: none;\n }\n > * {\n pointer-events: none;\n }\n"]);
_templateObject$3 = function _templateObject() {
return data;
};
return data;
}
var StyledIconButton = styled__default(GenericButton)(_templateObject$3(), typography.size.hecto, function (props) {
return props.size;
}, function (props) {
return props.size;
}, function (props) {
return props.size;
}, function (props) {
return props.size;
});
var IconButton = function IconButton(_ref) {
var children = _ref.children,
size = _ref.size,
props = _objectWithoutProperties(_ref, ["children", "size"]);
return React__default.createElement(StyledIconButton, _extends({
size: size,
variant: "transparent"
}, props), children);
};
IconButton.defaultProps = {
size: 45
};
IconButton.propTypes = {
children: PropTypes__default.node.isRequired,
size: PropTypes__default.number
};
function _templateObject2$3() {
var data = _taggedTemplateLiteral(["\n width: 100%;\n position: absolute;\n white-space: nowrap;\n top: 0;\n"]);
_templateObject2$3 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject$4() {
var data = _taggedTemplateLiteral(["\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: ", ";\n animation: ", " 0.8s linear infinite;\n\n &:nth-child(2) {\n animation-delay: -0.1s;\n margin: 0 ", ";\n }\n\n &:nth-child(3) {\n animation-delay: -0.5s;\n }\n"]);
_templateObject$4 = function _templateObject() {
return data;
};
return data;
}
var dotColors = {
white: getThemeValue("white", "base"),
primary: getThemeValue("primary", "base"),
dark: getThemeValue("darkFill")
};
var colorVariants$1 = {
standard: dotColors.white,
standardDisabled: dotColors.white,
special: dotColors.white,
specialDisabled: dotColors.white,
outline: dotColors.primary,
outlineDisabled: dotColors.primary,
transparent: dotColors.primary,
transparentDisabled: dotColors.primary,
outlineGray: dotColors.dark,
outlineGrayDisabled: dotColors.primary
};
var wave = styled.keyframes(["0%,60%,100%{transform:initial;}30%{transform:translateY(-10px);}"]);
var Dot = styled__default.span(_templateObject$4(), function (_ref) {
var variant = _ref.variant;
return colorVariants$1[variant];
}, wave, spacing.cozy);
Dot.displayName = "Dot";
var DotsWrapper = styled__default.div(_templateObject2$3());
DotsWrapper.displayName = "DotsWrapper";
var Loader = function Loader(_ref) {
var variant = _ref.variant;
return React__default.createElement(DotsWrapper, {
"data-bdd": "loader"
}, React__default.createElement(Dot, {
variant: variant
}), React__default.createElement(Dot, {
variant: variant
}), React__default.createElement(Dot, {
variant: variant
}));
};
Loader.propTypes = {
variant: PropTypes__default.oneOf(BUTTON_VARIANTS)
};
Loader.defaultProps = {
variant: STANDARD
};
function _templateObject2$4() {
var data = _taggedTemplateLiteral(["\n position: relative;\n"]);
_templateObject2$4 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject$5() {
var data = _taggedTemplateLiteral(["\n visibility: ", ";\n"]);
_templateObject$5 = function _templateObject() {
return data;
};
return data;
}
var ContentWrapper$1 = styled__default.div(_templateObject$5(), function (_ref) {
var isLoading = _ref.isLoading;
return isLoading ? "hidden" : "visible";
});
ContentWrapper$1.displayName = "ContentWrapper";
var Wrapper = styled__default.div(_templateObject2$4());
Wrapper.displayName = "Wrapper";
var ButtonWithLoading = function ButtonWithLoading(_ref) {
var isLoading = _ref.isLoading,
children = _ref.children,
props = _objectWithoutProperties(_ref, ["isLoading", "children"]);
var variant = props.variant;
return React__default.createElement(Button, props, React__default.createElement(Wrapper, null, React__default.createElement(ContentWrapper$1, {
isLoading: isLoading
}, children), isLoading && React__default.createElement(Loader, {
variant: variant
})));
};
ButtonWithLoading.propTypes = {
isLoading: PropTypes__default.bool,
children: PropTypes__default.node.isRequired
};
ButtonWithLoading.defaultProps = {
isLoading: false
};
function _templateObject2$5() {
var data = _taggedTemplateLiteral(["\n z-index: 1;\n position: absolute;\n top: 0;\n left: 0;\n right: 30px;\n display: flex;\n flex-flow: row nowrap;\n pointer-events: none;\n"]);
_templateObject2$5 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject$6() {
var data = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n flex-flow: column nowrap;\n height: 100%;\n min-height: 192px;\n border: solid 1px ", ";\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n\n &.", " {\n border-radius: 0;\n }\n"]);
_templateObject$6 = function _templateObject() {
return data;
};
return data;
}
var DAY_TILE_CLASS = "day-tile";
var DAY_TILE_NO_BORDER_RADIUS_CLASS = "".concat(DAY_TILE_CLASS, "--no-border-radius");
var DayTile = styled__default.div.attrs(function (_ref) {
var noBorderRadius = _ref.noBorderRadius;
return {
className: classNames(DAY_TILE_CLASS, _defineProperty({}, DAY_TILE_NO_BORDER_RADIUS_CLASS, noBorderRadius))
};
})(_templateObject$6(), getThemeValue("gray04"), getThemeValue("white", "base"), constants.borderRadius.small, DAY_TILE_NO_BORDER_RADIUS_CLASS);
DayTile.Header = styled__default.header(_templateObject2$5());
function _templateObject$7() {
var data = _taggedTemplateLiteral(["\n font-size: ", ";\n"]);
_templateObject$7 = function _templateObject() {
return data;
};
return data;
}
var StyledText = styled__default.div(_templateObject$7(), function (props) {
return props.fontSize || typography.size.hecto;
});
function _templateObject$8() {
var data = _taggedTemplateLiteral(["\n color: ", ";\n\n @media only screen and ", " {\n font-size: ", ";\n }\n"]);
_templateObject$8 = function _templateObject() {
return data;
};
return data;
}
var PrimaryStyledText = styled__default(StyledText)(_templateObject$8(), themes.global.onyx.base, constants.breakpoints.smallAndUp, typography.size.kilo);
var PrimaryText = function PrimaryText(_ref) {
var children = _ref.children,
props = _objectWithoutProperties(_ref, ["children"]);
return React__default.createElement(PrimaryStyledText, props, children);
};
PrimaryText.propTypes = {
children: PropTypes__default.string.isRequired
};
function _templateObject$9() {
var data = _taggedTemplateLiteral(["\n color: ", ";\n"]);
_templateObject$9 = function _templateObject() {
return data;
};
return data;
}
var SecondaryStyledText = styled__default(StyledText)(_templateObject$9(), themes.global.onyx.light);
var SecondaryText = function SecondaryText(_ref) {
var children = _ref.children,
props = _objectWithoutProperties(_ref, ["children"]);
return React__default.createElement(SecondaryStyledText, props, children);
};
SecondaryText.propTypes = {
children: PropTypes__default.string.isRequired
};
var small = function small() {
return styled.css(["@media screen and ", "{", ";}"], constants.breakpoints.small, styled.css.apply(void 0, arguments));
};
var smallAndUp = function smallAndUp() {
return styled.css(["@media screen and ", "{", ";}"], constants.breakpoints.smallAndUp, styled.css.apply(void 0, arguments));
};
var mediumAndUp = function mediumAndUp() {
return styled.css(["@media screen and ", "{", ";}"], constants.breakpoints.mediumAndUp, styled.css.apply(void 0, arguments));
};
var largeAndUp = function largeAndUp() {
return styled.css(["@media screen and ", "{", ";}"], constants.breakpoints.largeAndUp, styled.css.apply(void 0, arguments));
};
var xLargeAndUp = function xLargeAndUp() {
return styled.css(["@media screen and ", "{", ";}"], constants.breakpoints.xLargeAndUp, styled.css.apply(void 0, arguments));
};
function _templateObject2$6() {
var data = _taggedTemplateLiteral(["\n font-size: ", ";\n "]);
_templateObject2$6 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject$a() {
var data = _taggedTemplateLiteral(["\n color: ", ";\n font-weight: ", ";\n\n ", ";\n"]);
_templateObject$a = function _templateObject() {
return data;
};
return data;
}
var BoldStyledText = styled__default(StyledText)(_templateObject$a(), function (props) {
return props.color;
}, typography.weight.semiBold, mediumAndUp(_templateObject2$6(), typography.size.uno));
var BoldText = function BoldText(_ref) {
var color = _ref.color,
children = _ref.children,
rest = _objectWithoutProperties(_ref, ["color", "children"]);
return React__default.createElement(BoldStyledText, _extends({
color: color
}, rest), children);
};
BoldText.defaultProps = {
color: themes.global.darkFill
};
BoldText.propTypes = {
children: PropTypes__default.string.isRequired,
color: PropTypes__default.string
};
function _templateObject4$1() {
var data = _taggedTemplateLiteral(["\n font-size: ", ";\n "]);
_templateObject4$1 = function _templateObject4() {
return data;
};
return data;
}
function _templateObject3$1() {
var data = _taggedTemplateLiteral(["\n font-size: ", ";\n "]);
_