@royaloperahouse/chord 2.4.8-c-chord-development → 2.4.8-e-chord-development

package/dist/chord.cjs.development.js

@@ -8895,7 +8895,13 @@ var PeopleListing = function PeopleListing(_ref) {
 
 var _templateObject$12, _templateObject2$L, _templateObject3$C, _templateObject4$u;
 var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
-var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  p {\n    line-height: 1.5;\n  }\n"])));
+var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$L || (_templateObject2$L = /*#__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\n  @media ", " {\n    grid-template-columns: ", ";\n  }\n"])), function (_ref) {
+  var columnCount = _ref.columnCount;
+  return "repeat(" + columnCount + ", 1fr)";
+}, devices.mobile, devices.tablet, devices.desktop, function (_ref2) {
+  var columnCount = _ref2.columnCount;
+  return "repeat(" + columnCount + ", 1fr)";
+});
 var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  p {\n    line-height: 1.5;\n    margin-bottom: 4px;\n  }\n"])));
 var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n"])));
 
@@ -8924,9 +8930,13 @@ var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
 };
 
 var CreditListing = function CreditListing(_ref) {
-  var roles = _ref.roles;
+  var roles = _ref.roles,
+      _ref$columnCount = _ref.columnCount,
+      columnCount = _ref$columnCount === void 0 ? 4 : _ref$columnCount;
   var charThreshold = 180;
-  return /*#__PURE__*/React__default.createElement(CreditListingWrapper, null, roles.map(function (_ref2, index) {
+  return /*#__PURE__*/React__default.createElement(CreditListingWrapper, {
+    columnCount: columnCount
+  }, roles.map(function (_ref2, index) {
     var name = _ref2.name,
         people = _ref2.people,
         description = _ref2.description,
@@ -8935,9 +8945,11 @@ var CreditListing = function CreditListing(_ref) {
         additionalInfo = _ref2.additionalInfo,
         dataROH = _ref2.dataROH;
     var namesLength = getConcatenatedPropLength(people, 'name');
+    var columnSpanDesktop = namesLength > charThreshold ? people.length > 2 ? 4 : 2 : 1;
+    var columnSpanBodyText = namesLength > charThreshold ? 6 : 2;
     return /*#__PURE__*/React__default.createElement(GridItem, {
-      columnSpanDesktop: namesLength > charThreshold ? 2 : 1,
-      columnSpanDevice: namesLength > charThreshold ? 2 : 1,
+      columnSpanDesktop: columnSpanDesktop,
+      columnSpanDevice: columnSpanDesktop,
       columnSpanSmallDevice: 2,
       key: name + "-" + index
     }, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper$1, {
@@ -8966,7 +8978,8 @@ var CreditListing = function CreditListing(_ref) {
       tag: "p"
     }, concatenateMusicTitle(musicTitle)), additionalInfo && /*#__PURE__*/React__default.createElement(BodyText, {
       level: 1,
-      tag: "p"
+      tag: "p",
+      columnSpanDesktop: columnSpanBodyText
     }, additionalInfo)));
   }));
 };