@royaloperahouse/harmonic 0.12.0-g → 0.12.0-i

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 }: IPeopleListing) => React.JSX.Element;
+declare const PeopleListing: ({ roles, className }: IPeopleListing) => React.JSX.Element;
 export default PeopleListing;

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

@@ -1,7 +1,7 @@
 export declare const PeopleListingGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
 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 RoleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RoleContent: import("styled-components").StyledComponent<({ children, size, color, className, tag: Tag, }: import("../../../types/typography").ITaggedTypographyProps) => import("react").JSX.Element, any, {}, never>;
 export declare const TextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PersonLink: import("styled-components").StyledComponent<"a", any, {}, never>;
-export declare const ReplacementWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ReplacementContent: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/harmonic.cjs.development.js

@@ -10279,13 +10279,13 @@ var Pagination = function Pagination(_ref) {
 };
 
 var _templateObject$18, _templateObject2$T, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$m, _templateObject7$i;
-var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  p {\n    margin: 0;\n  }\n\n  grid-template-columns: 1fr 1fr 1fr;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
-var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 60px 1fr;\n  grid-template-areas: 'headshot role-person';\n  grid-column-gap: 10px;\n"])));
-var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 60px;\n    height: 60px;\n  }\n"])));
-var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-dark-grey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
-var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
-var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n  text-decoration: underline;\n\n  :hover {\n    color: var(--base-color-primary);\n    :after {\n      color: var(--base-color-black);\n    }\n  }\n\n  :visited {\n    color: var(--base-color-black);\n  }\n"])));
-var ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-dark-grey);\n"])));
+var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 40px 36px;\n\n  grid-template-columns: 1fr 1fr 1fr;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
+var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__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(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 82px;\n    height: 82px;\n  }\n"])));
+var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-base-dark-grey);\n  overflow-wrap: break-word;\n  padding-bottom: 4px;\n"])));
+var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-primary-black);\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
+var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-primary-black);\n  text-decoration: underline;\n  text-underline-offset: 6px;\n\n  :hover {\n    color: var(--color-rbo-black-hovered);\n    :after {\n      color: var(--color-primary-black);\n    }\n  }\n\n  :visited {\n    color: var(--color-primary-black);\n  }\n"])));
+var ReplacementContent = /*#__PURE__*/styled__default.span(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-dark-grey);\n"])));
 
 var Person = function Person(_ref) {
   var person = _ref.person,
@@ -10301,10 +10301,7 @@ var Person = function Person(_ref) {
       href: link
     }, name), personSeparator ? /*#__PURE__*/React__default.createElement("span", null, separator) : null);
   }
-  return /*#__PURE__*/React__default.createElement("span", null, name, replacement && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', /*#__PURE__*/React__default.createElement(ReplacementWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1,
-    tag: "span"
-  }, replacement)))), personSeparator);
+  return /*#__PURE__*/React__default.createElement("span", null, name, replacement && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', /*#__PURE__*/React__default.createElement(ReplacementContent, null, replacement))), personSeparator);
 };
 
 /* eslint-disable no-extra-boolean-cast */
@@ -10312,13 +10309,10 @@ function hasHeadshot(role) {
   return +(!!role.people[0].headshot && role.people[0].useHeadshot);
 }
 function textSection(role) {
-  return /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
+  return /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleContent, {
     title: "role",
     "data-roh": role.dataROH
-  }, /*#__PURE__*/React__default.createElement(Overline, {
-    level: 1
-  }, role.name)), /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1,
+  }, role.name), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
     tag: "p"
   }, role.people.map(function (person, personIndex) {
     return /*#__PURE__*/React__default.createElement(Person, {
@@ -10329,8 +10323,11 @@ function textSection(role) {
   })));
 }
 var PeopleListing = function PeopleListing(_ref) {
-  var roles = _ref.roles;
-  return /*#__PURE__*/React__default.createElement(PeopleListingGrid, null, roles.sort(function (a, b) {
+  var roles = _ref.roles,
+    className = _ref.className;
+  return /*#__PURE__*/React__default.createElement(PeopleListingGrid, {
+    className: className
+  }, roles.sort(function (a, b) {
     return hasHeadshot(b) - hasHeadshot(a);
   }).map(function (role, index) {
     return /*#__PURE__*/React__default.createElement(GridItem, {
@@ -10343,13 +10340,13 @@ var PeopleListing = function PeopleListing(_ref) {
 };
 
 var _templateObject$19, _templateObject2$U, _templateObject3$I, _templateObject4$A;
-var ReplacementWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
+var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
 var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  p {\n    line-height: 1.5;\n  }\n\n  grid-template-columns: ", ";\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: repeat(2, 1fr);\n  }\n"])), function (_ref) {
   var columnCount = _ref.columnCount;
   return "repeat(" + columnCount + ", 1fr)";
 }, devices.mobile, devices.tablet);
 var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  p {\n    line-height: 25px;\n    margin-bottom: 3px;\n  }\n"])));
-var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  min-height: 1.5em;\n"])));
+var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  min-height: 1.5em;\n"])));
 
 // Get the total character length of a property in an array of objects
 var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
@@ -10438,7 +10435,7 @@ var CreditListing = function CreditListing(_ref) {
       columnSpanSmallDevice: 1,
       key: "credit-entry-" + name + "-" + index,
       "data-testid": "credit-entry"
-    }, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper$1, {
+    }, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
       title: "role",
       "data-roh": dataROH
     }, /*#__PURE__*/React__default.createElement(Overline, {
@@ -10459,7 +10456,7 @@ var CreditListing = function CreditListing(_ref) {
           withSeparator: personArray.length !== personIndex + 1
         });
       }));
-    }), replacement && (/*#__PURE__*/React__default.createElement(ReplacementWrapper$1, null, /*#__PURE__*/React__default.createElement(BodyText, {
+    }), replacement && (/*#__PURE__*/React__default.createElement(ReplacementWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
       level: 1,
       tag: "p"
     }, replacement))), musicTitle && musicTitle.length > 0 && (/*#__PURE__*/React__default.createElement(BodyText, {
@@ -13768,22 +13765,26 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1q || (
 var _templateObject$1r, _templateObject2$16, _templateObject3$V;
 var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
 var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
-var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 32px 0;\n\n  @media ", " {\n    padding: 24px 0;\n  }\n"])), devices.mobile);
+var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 32px 0;\n\n  & cite {\n    font-style: normal;\n  }\n\n  @media ", " {\n    padding: 24px 0;\n  }\n"])), devices.mobile);
 
 /* eslint-disable react/no-danger */
 var Quote = function Quote(_ref) {
   var text = _ref.text,
     attribution = _ref.attribution,
     className = _ref.className;
+  var _useViewport = useViewport(),
+    isMobile = _useViewport.isMobile,
+    hydrated = _useViewport.hydrated;
+  if (!hydrated) return null;
   return /*#__PURE__*/React__default.createElement(Grid, {
     className: className
   }, /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 3,
-    columnSpanDesktop: 8,
+    columnSpanDesktop: 9,
     columnStartDevice: 2,
     columnSpanDevice: 12
   }, /*#__PURE__*/React__default.createElement(FigureBlock, null, /*#__PURE__*/React__default.createElement(BlockquoteBlock, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
-    size: "small",
+    size: isMobile ? 'medium' : 'small',
     tag: "p",
     dangerouslySetInnerHTML: {
       __html: "‘" + text + "’"