@royaloperahouse/harmonic 0.18.4-a → 0.18.4-b

package/CHANGELOG.md

@@ -2,6 +2,9 @@
 - Carousel, Typography, HighlightCarousels added font changed prop
 
 
+## [0.18.6]
+- CastFilter: Add greyscale option to cast filter
+
 ## [0.18.5]
 - PeopleListing, PersonCard: Added person-headshot-grayscale class to display headshots in grayscale
 

package/dist/components/molecules/CastFilter/CastFilters.style.d.ts

@@ -10,6 +10,7 @@ export declare const PersonToggle: import("styled-components").StyledComponent<"
 }, never>;
 export declare const PersonImage: import("styled-components").StyledComponent<"img", any, {
     isDefaultPlaceholder?: boolean | undefined;
+    greyscale?: boolean | undefined;
 }, never>;
 export declare const PersonName: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Decal: import("styled-components").StyledComponent<"div", any, {

package/dist/harmonic.cjs.development.js

@@ -6624,17 +6624,20 @@ var PersonToggle = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_temp
   var isSelected = _ref.isSelected;
   return isSelected ? 'var(--color-primary-red)' : 'var(--color-base-light-grey)';
 });
-var PersonImage = /*#__PURE__*/styled__default.img(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: calc(100% - 8px);\n  height: calc(100% - 8px);\n  margin: 4px;\n  object-fit: cover;\n  border-radius: 50%;\n\n  // This is really specific to the SVG that we have been provided\n  // as a fallback person image. I don't think there's a simpler and\n  // more general way to handle this, so if we're given a new placeholder\n  // image later, we may have to change the scale here\n  ", "\n"])), function (_ref2) {
-  var isDefaultPlaceholder = _ref2.isDefaultPlaceholder;
+var PersonImage = /*#__PURE__*/styled__default.img(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: calc(100% - 8px);\n  height: calc(100% - 8px);\n  margin: 4px;\n  object-fit: cover;\n  border-radius: 50%;\n  filter: ", ";\n\n  // This is really specific to the SVG that we have been provided\n  // as a fallback person image. I don't think there's a simpler and\n  // more general way to handle this, so if we're given a new placeholder\n  // image later, we may have to change the scale here\n  ", "\n"])), function (_ref2) {
+  var greyscale = _ref2.greyscale;
+  return greyscale ? 'grayscale(100%)' : 'none';
+}, function (_ref3) {
+  var isDefaultPlaceholder = _ref3.isDefaultPlaceholder;
   return isDefaultPlaceholder && "\n    transform: scale(1.24);\n  ";
 });
 var PersonName = /*#__PURE__*/styled__default.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 86px;\n  display: flex;\n  flex-wrap: wrap;\n  text-align: center;\n\n  @media ", " {\n    max-width: unset;\n    text-align: left;\n    font-size: 17px;\n    line-height: 24px;\n  }\n"])), devices.mobile);
-var Decal = /*#__PURE__*/styled__default.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--color-primary-red);\n  display: ", ";\n  position: absolute;\n  top: 6px;\n  right: -6px;\n  align-items: center;\n  justify-content: center;\n\n  span {\n    display: ", ";\n    width: 65%;\n    height: 65%;\n  }\n"])), function (_ref3) {
-  var isSelected = _ref3.isSelected;
-  return isSelected ? 'flex' : 'none';
-}, function (_ref4) {
+var Decal = /*#__PURE__*/styled__default.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--color-primary-red);\n  display: ", ";\n  position: absolute;\n  top: 6px;\n  right: -6px;\n  align-items: center;\n  justify-content: center;\n\n  span {\n    display: ", ";\n    width: 65%;\n    height: 65%;\n  }\n"])), function (_ref4) {
   var isSelected = _ref4.isSelected;
   return isSelected ? 'flex' : 'none';
+}, function (_ref5) {
+  var isSelected = _ref5.isSelected;
+  return isSelected ? 'flex' : 'none';
 });
 var EmptySelectionTextSpacer = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: hidden;\n\n  @media ", " {\n    visibility: visible;\n    min-height: var(--button-height);\n  }\n"])), devices.mobile);
 
@@ -7042,6 +7045,8 @@ var CastFilters = function CastFilters(_ref) {
     onSelect = _ref.onSelect,
     onApply = _ref.onApply,
     onClear = _ref.onClear,
+    _ref$greyscale = _ref.greyscale,
+    greyscale = _ref$greyscale === void 0 ? false : _ref$greyscale,
     _ref$selectedIndices = _ref.selectedIndices,
     selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
   var _useViewport = useViewport(),
@@ -7182,7 +7187,8 @@ var CastFilters = function CastFilters(_ref) {
         src: personImage,
         alt: image ? name : "Placeholder image for " + name,
         draggable: false,
-        isDefaultPlaceholder: !(!!image || !!placeholderImage)
+        isDefaultPlaceholder: !(!!image || !!placeholderImage),
+        greyscale: greyscale
       }), /*#__PURE__*/React__default.createElement(Decal, {
         isSelected: isSelected
       }, /*#__PURE__*/React__default.createElement(Icon, {
@@ -11210,7 +11216,9 @@ var themeToColor = function themeToColor(theme) {
 var SignUpTitle = function SignUpTitle(_ref) {
   var title = _ref.title,
     _ref$isMobile = _ref.isMobile,
-    isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
+    isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile,
+    _ref$titleFontFamily = _ref.titleFontFamily,
+    titleFontFamily = _ref$titleFontFamily === void 0 ? false : _ref$titleFontFamily;
   return /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 3,
     columnSpanDesktop: 10,
@@ -11219,7 +11227,7 @@ var SignUpTitle = function SignUpTitle(_ref) {
   }, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
     color: "black",
     hierarchy: "h3",
-    serif: true,
+    serif: titleFontFamily === 'Victor',
     size: isMobile ? 'small' : 'medium'
   }, title)));
 };