@royaloperahouse/chord 0.5.4 → 0.5.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # CHANGELOG
 
+## [0.5.8]
+- PromoWithTitle links style
+
+## [0.5.7]
+- Added Star icon to Iconography
+
+## [0.5.6]
+- Added Favourite and Favourite Full icons to Iconography
+
+## [0.5.5]
+- Export ImageAspectRatioWrapper component and AspectRatio enum
+
 ## [0.5.4]
 - Fix Card typography
 - Fix Carousel title typography

package/dist/chord.cjs.development.js

@@ -742,6 +742,36 @@ var EditMyList = (function (_ref) {
   }));
 });
 
+var Favourite = (function (_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 4.69994L13.88 8.51994L14.12 8.98994L14.64 9.06994L18.85 9.67994L15.8 12.6799L15.43 13.0499L15.51 13.5599L16.23 17.7599L12.47 15.7599L12 15.5099L11.53 15.7499L7.77 17.7499L8.49 13.5499L8.57 13.0399L8.2 12.6699L5.15 9.66994L9.36 9.05994L9.88 8.97994L10.12 8.50994L12 4.69994ZM12 2.43994L9.22 8.07994L3 8.99994L7.5 13.3899L6.44 19.5799L12 16.6399L17.56 19.5599L16.5 13.3699L21 8.99994L14.78 8.09994L12 2.43994Z",
+    fill: color
+  }));
+});
+
+var FavouriteFull = (function (_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M9.22 8.07994L12 2.43994L14.78 8.09994L21 8.99994L16.5 13.3699L17.56 19.5599L12 16.6399L6.44 19.5799L7.5 13.3899L3 8.99994L9.22 8.07994Z",
+    fill: color
+  }));
+});
+
 var Filter = (function (_ref) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
@@ -1606,6 +1636,21 @@ var Refresh = (function (_ref) {
   }));
 });
 
+var Star = (function (_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 48 46",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M24 0L30.0248 16.7076L47.7764 17.2746L33.7483 28.1674L38.6946 45.2254L24 35.25L9.30537 45.2254L14.2517 28.1674L0.223587 17.2746L17.9752 16.7076L24 0Z",
+    fill: color
+  }));
+});
+
 var AudioDescription = (function (_ref) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
@@ -1905,6 +1950,8 @@ var IconLibrary = {
   Expand: Expand,
   ExternalLink: ExternalLink,
   Facebook: Facebook,
+  Favourite: Favourite,
+  FavouriteFull: FavouriteFull,
   Filter: Filter,
   FindAScreening: FindAScreening,
   Forward10: Forward10,
@@ -1936,6 +1983,7 @@ var IconLibrary = {
   Settings: Settings,
   Shift: Shift,
   Space: Space,
+  Star: Star,
   Subscribe: Subscribe,
   Subtitles: Subtitles,
   Tick: Tick,
@@ -2424,19 +2472,17 @@ var SectionSplitter = function SectionSplitter(_ref) {
   }, /*#__PURE__*/React__default.createElement(Splitter, null)));
 };
 
-var AspectRatio;
-
 (function (AspectRatio) {
   AspectRatio["1:1"] = "1 / 1";
   AspectRatio["3:4"] = "3 / 4";
   AspectRatio["4:3"] = "4 / 3";
   AspectRatio["16:9"] = "16 / 9";
-})(AspectRatio || (AspectRatio = {}));
+})(exports.AspectRatio || (exports.AspectRatio = {}));
 
 var _templateObject$d;
 var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: ", ";\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n"])), function (_ref) {
   var _ref$aspectRatio = _ref.aspectRatio,
-      aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
+      aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
 });
 
@@ -4378,7 +4424,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
     return /*#__PURE__*/React__default.createElement(swiperReact_js.SwiperSlide, {
       key: image.key
     }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
-      aspectRatio: AspectRatio['4:3']
+      aspectRatio: exports.AspectRatio['4:3']
     }, /*#__PURE__*/React__default.createElement("img", Object.assign({}, image))));
   }))));
 };
@@ -4644,7 +4690,7 @@ var Card = function Card(_ref) {
   }, hovered && /*#__PURE__*/React__default.createElement(HoverContainer, {
     "data-testid": "hovercontainer"
   }), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
-    aspectRatio: AspectRatio['4:3']
+    aspectRatio: exports.AspectRatio['4:3']
   }, /*#__PURE__*/React__default.createElement("img", {
     src: image,
     alt: "test"
@@ -4748,7 +4794,7 @@ var Editorial = function Editorial(_ref) {
     "data-testid": "image-wrapper",
     imageToLeft: imageToLeft
   }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
-    aspectRatio: AspectRatio['1:1']
+    aspectRatio: exports.AspectRatio['1:1']
   }, children)), /*#__PURE__*/React__default.createElement(EditorialTextWrapper, {
     "data-testid": "text-wrapper",
     imageToLeft: imageToLeft
@@ -4974,12 +5020,21 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
 }, devices.mobile);
 var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 32px 0;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      margin: 0 0 24px 0;\n    }\n  }\n"])), devices.mobile);
 var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n"])));
-var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 32px;\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref5) {
-  var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
-      primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
-      _ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
-      tertiaryButtonTextLength = _ref5$tertiaryButtonT === void 0 ? 0 : _ref5$tertiaryButtonT;
+var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.colors.black;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.colors.darkgrey;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.colors.primary;
+});
+var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 32px;\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref8) {
+  var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
+      primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
+      _ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
+      tertiaryButtonTextLength = _ref8$tertiaryButtonT === void 0 ? 0 : _ref8$tertiaryButtonT;
   var isLinksLayoutColumn = primaryButtonTextLength >= LENGTH_TEXT || tertiaryButtonTextLength >= LENGTH_TEXT;
 
   if (isLinksLayoutColumn) {
@@ -4987,11 +5042,11 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 ||
   }
 
   return '';
-}, devices.mobile, devices.tablet, function (_ref6) {
-  var _ref6$primaryButtonTe = _ref6.primaryButtonTextLength,
-      primaryButtonTextLength = _ref6$primaryButtonTe === void 0 ? 0 : _ref6$primaryButtonTe,
-      _ref6$tertiaryButtonT = _ref6.tertiaryButtonTextLength,
-      tertiaryButtonTextLength = _ref6$tertiaryButtonT === void 0 ? 0 : _ref6$tertiaryButtonT;
+}, devices.mobile, devices.tablet, function (_ref9) {
+  var _ref9$primaryButtonTe = _ref9.primaryButtonTextLength,
+      primaryButtonTextLength = _ref9$primaryButtonTe === void 0 ? 0 : _ref9$primaryButtonTe,
+      _ref9$tertiaryButtonT = _ref9.tertiaryButtonTextLength,
+      tertiaryButtonTextLength = _ref9$tertiaryButtonT === void 0 ? 0 : _ref9$tertiaryButtonT;
   var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET$1 || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET$1;
 
   if (isLinksLayoutColumnTablet) {
@@ -5045,7 +5100,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
     "data-testid": "image-wrapper",
     imageToLeft: imageToLeft
   }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
-    aspectRatio: AspectRatio['4:3']
+    aspectRatio: exports.AspectRatio['4:3']
   }, children)), /*#__PURE__*/React__default.createElement(PromoWithTitleContentWrapper, {
     "data-testid": "content-wrapper",
     imageToLeft: imageToLeft
@@ -6027,6 +6082,7 @@ exports.HighlightsCarouselCinema = HighlightsCinema;
 exports.HighlightsCarouselCore = HighlightsCore;
 exports.HighlightsCarouselStream = HighlightsStream;
 exports.Icon = Icon;
+exports.ImageAspectRatioWrapper = ImageAspectRatioWrapper;
 exports.ImageWithCaption = ImageWithCaption;
 exports.Navigation = Navigation;
 exports.Overline = Overline;