@royaloperahouse/harmonic 0.18.3-l → 0.18.3-n

package/dist/components/molecules/PeopleListing/PeopleListing.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { IPeopleListing } from '../../../types/types';
-declare const PeopleListing: ({ roles, className }: IPeopleListing) => React.JSX.Element;
+declare const PeopleListing: ({ roles, className, greyscale }: IPeopleListing) => React.JSX.Element;
 export default PeopleListing;

package/dist/components/molecules/PersonCard/PersonCard.style.d.ts

@@ -1,2 +1,4 @@
 export declare const PersonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HeadshotWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HeadshotWrapper: import("styled-components").StyledComponent<"div", any, {
+    greyscale?: boolean | undefined;
+}, never>;

package/dist/harmonic.cjs.development.js

@@ -8933,12 +8933,16 @@ var PersonDetails = function PersonDetails(_ref) {
 };
 
 var _templateObject$10, _templateObject2$P;
-var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 82px 1fr;\n  grid-template-areas: 'headshot role-person';\n  grid-column-gap: 16px;\n\n  &.person-headshot-grayscale img {\n    filter: grayscale(100%);\n  }\n"])));
-var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 82px;\n    height: 82px;\n  }\n"])));
+var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 82px 1fr;\n  grid-template-areas: 'headshot role-person';\n  grid-column-gap: 16px;\n"])));
+var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 82px;\n    height: 82px;\n    filter: ", ";\n  }\n"])), function (_ref) {
+  var greyscale = _ref.greyscale;
+  return greyscale ? 'grayscale(100%)' : 'none';
+});
 
 var PersonCard = function PersonCard(_ref) {
   var role = _ref.role,
-    className = _ref.className;
+    className = _ref.className,
+    greyscale = _ref.greyscale;
   var hasHeadshot = React__default.useMemo(function () {
     var _role$people;
     var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
@@ -8946,7 +8950,9 @@ var PersonCard = function PersonCard(_ref) {
   }, [role]);
   if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
     className: className
-  }, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
+  }, /*#__PURE__*/React__default.createElement(HeadshotWrapper, {
+    greyscale: greyscale
+  }, /*#__PURE__*/React__default.createElement("img", {
     src: role.people[0].headshot,
     alt: role.people[0].name
   })), /*#__PURE__*/React__default.createElement(PersonDetails, {
@@ -8960,7 +8966,8 @@ var PersonCard = function PersonCard(_ref) {
 
 var PeopleListing = function PeopleListing(_ref) {
   var roles = _ref.roles,
-    className = _ref.className;
+    className = _ref.className,
+    greyscale = _ref.greyscale;
   return /*#__PURE__*/React__default.createElement(PeopleListingGrid, {
     className: className
   }, roles.map(function (role, index) {
@@ -8968,7 +8975,8 @@ var PeopleListing = function PeopleListing(_ref) {
       key: role.name + "-" + index
     }, /*#__PURE__*/React__default.createElement(PersonCard, {
       role: role,
-      className: className
+      className: className,
+      greyscale: greyscale
     }));
   }));
 };