@royaloperahouse/chord 0.7.47 → 0.7.48

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## [0.7.48]
+- Add background themes to Information component
+
 ## [0.7.47]
 - PromoWithTags: Swap Content & ExtraContent divs to correct keyboard tab order
 

package/dist/chord.cjs.development.js

@@ -5250,40 +5250,48 @@ var TitleVariant;
   TitleVariant["AltHeader"] = "AltHeader";
 })(TitleVariant || (TitleVariant = {}));
 
+var BackgroundColour;
+
+(function (BackgroundColour) {
+  BackgroundColour["Cinema"] = "cinema";
+  BackgroundColour["Core"] = "core";
+  BackgroundColour["Stream"] = "stream";
+  BackgroundColour["White"] = "white";
+})(BackgroundColour || (BackgroundColour = {}));
+
 var _templateObject$K, _templateObject2$t, _templateObject3$l, _templateObject4$f;
 var InfoContent = /*#__PURE__*/styled__default('div')(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-altHeader);\n  font-feature-settings: var(--font-feature-settings-altHeader);\n  font-size: var(--font-size-altHeader-6);\n  font-weight: var(--font-weight-altHeader-6);\n  -webkit-letter-spacing: var(--letter-spacing-altHeader-6);\n  -moz-letter-spacing: var(--letter-spacing-altHeader-6);\n  -ms-letter-spacing: var(--letter-spacing-altHeader-6);\n  letter-spacing: var(--letter-spacing-altHeader-6);\n  line-height: var(--line-height-altHeader-6);\n  word-break: var(--word-break-altHeader);\n"])));
 var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  * {\n    margin-block: 0;\n  }\n"])));
 var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 32px 0;\n\n  ", "}\n"])), function (props) {
-  if (!props.important) {
+  if (!props.infoThemed) {
     return;
   } else {
     if (props.variant === CtaVariant.Primary || props.variant === CtaVariant.Secondary) {
-      return "a {\n              color: var(--base-color-black);\n              background: var(--base-color-white);\n            }";
+      return "a {\n              color: var(--base-color-black);\n              background: var(--base-color-white);\n              border-color: var(--base-color-transparent);\n            }";
     } else {
-      return "a {\n              color: var(--base-color-white);\n              background: var(--base-color-core);\n            }\n              svg > path {\n                fill: var(--base-color-white);\n                stroke: var(--base-color-white);\n                stroke-width: 1;\n              }\n            ";
+      return "a {\n              color: var(--base-color-white);\n              background: var(--base-color-transparent});\n            }\n              svg > path {\n                fill: var(--base-color-white);\n                stroke: var(--base-color-white);\n                stroke-width: 1;\n              }\n            ";
     }
   }
 });
-var InfoWrapper$1 = /*#__PURE__*/styled__default(Grid)(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 60px 0;\n  color: ", ";\n  background: ", ";\n"])), function (props) {
-  return props.important ? 'var(--base-color-white)' : 'var(--base-color-black)';
+var InfoWrapper$1 = /*#__PURE__*/styled__default(Grid)(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 60px 0;\n  color: ", ";\n  background: ", "\n  }};\n"])), function (props) {
+  return props.background !== BackgroundColour.White ? 'var(--base-color-white)' : 'var(--base-color-black)';
 }, function (props) {
-  return props.important ? 'var(--base-color-core)' : 'var(--base-color-white)';
+  return "var(--base-color-" + props.background + ")";
 });
 
 var InfoCta = function InfoCta(_ref) {
-  var _ref$important = _ref.important,
-      important = _ref$important === void 0 ? false : _ref$important,
-      _ref$variant = _ref.variant,
+  var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? CtaVariant.Primary : _ref$variant,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? CtaTheme.Core : _ref$theme,
       link = _ref.link,
       text = _ref.text,
       iconName = _ref.iconName,
-      iconDirection = _ref.iconDirection;
+      iconDirection = _ref.iconDirection,
+      infoThemed = _ref.infoThemed;
   return /*#__PURE__*/React__default.createElement(InfoCTAWrapper, {
     variant: variant,
-    important: important,
+    infoThemed: infoThemed,
     theme: theme
   }, variant === CtaVariant.Secondary ? /*#__PURE__*/React__default.createElement(SecondaryButton, {
     color: exports.Colors[theme],
@@ -5341,7 +5349,7 @@ var renderTitle = function renderTitle(props) {
 var Information = function Information(_ref) {
   var body = _ref.body,
       title = _ref.title,
-      important = _ref.important,
+      background = _ref.background,
       cta = _ref.cta;
   var titleWords = title.text.split(' ');
   var titleWordLengths = titleWords.map(function (word) {
@@ -5349,8 +5357,9 @@ var Information = function Information(_ref) {
   });
   var maxTitleWordLength = Math.max.apply(Math, titleWordLengths);
   var titleColumnSpan = getColumnSpan(title.variant, title.textSize, maxTitleWordLength);
+  var bgColour = background != null ? background : BackgroundColour.White;
   return /*#__PURE__*/React__default.createElement(InfoWrapper$1, {
-    important: important,
+    background: bgColour,
     "data-testid": "infoWrapper"
   }, /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 2,
@@ -5370,7 +5379,7 @@ var Information = function Information(_ref) {
     link: cta.link,
     variant: cta.variant,
     theme: cta.theme,
-    important: important,
+    infoThemed: bgColour !== BackgroundColour.White,
     text: cta.text,
     iconName: cta.iconName,
     iconDirection: cta.iconDirection
@@ -5789,7 +5798,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
     },
     tabIndex: 0,
     onKeyPress: function onKeyPress(e) {
-      e.key === "Enter" && setShowExtraContent(false);
+      e.key === 'Enter' && setShowExtraContent(false);
     }
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Close",