@royaloperahouse/chord 2.4.9 → 2.4.10

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## [2.4.10]
+- Credit Listing component: extend column count
+
 ## [2.4.9]
 - Information component: fix UI issues
 

package/dist/chord.cjs.development.js

@@ -8862,7 +8862,10 @@ var PeopleListing = function PeopleListing(_ref) {
 
 var _templateObject$11, _templateObject2$L, _templateObject3$C, _templateObject4$u;
 var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$11 || (_templateObject$11 = /*#__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"])), function (_ref) {
+  var columnCount = _ref.columnCount;
+  return "repeat(" + columnCount + ", 1fr)";
+}, devices.mobile, devices.tablet);
 var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__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$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  min-height: 1.5em;\n"])));
 
@@ -8885,9 +8888,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,
@@ -8896,9 +8903,10 @@ 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;
     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, {