@royaloperahouse/chord 2.4.9 → 2.4.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/chord.esm.js CHANGED
@@ -8867,7 +8867,10 @@ var PeopleListing = function PeopleListing(_ref) {
8867
8867
 
8868
8868
  var _templateObject$11, _templateObject2$L, _templateObject3$C, _templateObject4$u;
8869
8869
  var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
8870
- var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n"])));
8870
+ var CreditListingWrapper = /*#__PURE__*/styled(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) {
8871
+ var columnCount = _ref.columnCount;
8872
+ return "repeat(" + columnCount + ", 1fr)";
8873
+ }, devices.mobile, devices.tablet);
8871
8874
  var DescriptionWrapper = /*#__PURE__*/styled.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"])));
8872
8875
  var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
8873
8876
 
@@ -8890,9 +8893,13 @@ var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
8890
8893
  };
8891
8894
 
8892
8895
  var CreditListing = function CreditListing(_ref) {
8893
- var roles = _ref.roles;
8896
+ var roles = _ref.roles,
8897
+ _ref$columnCount = _ref.columnCount,
8898
+ columnCount = _ref$columnCount === void 0 ? 4 : _ref$columnCount;
8894
8899
  var charThreshold = 180;
8895
- return /*#__PURE__*/React__default.createElement(CreditListingWrapper, null, roles.map(function (_ref2, index) {
8900
+ return /*#__PURE__*/React__default.createElement(CreditListingWrapper, {
8901
+ columnCount: columnCount
8902
+ }, roles.map(function (_ref2, index) {
8896
8903
  var name = _ref2.name,
8897
8904
  people = _ref2.people,
8898
8905
  description = _ref2.description,
@@ -8901,9 +8908,10 @@ var CreditListing = function CreditListing(_ref) {
8901
8908
  additionalInfo = _ref2.additionalInfo,
8902
8909
  dataROH = _ref2.dataROH;
8903
8910
  var namesLength = getConcatenatedPropLength(people, 'name');
8911
+ var columnSpanDesktop = namesLength > charThreshold ? people.length > 2 ? 4 : 2 : 1;
8904
8912
  return /*#__PURE__*/React__default.createElement(GridItem, {
8905
- columnSpanDesktop: namesLength > charThreshold ? 2 : 1,
8906
- columnSpanDevice: namesLength > charThreshold ? 2 : 1,
8913
+ columnSpanDesktop: columnSpanDesktop,
8914
+ columnSpanDevice: columnSpanDesktop,
8907
8915
  columnSpanSmallDevice: 2,
8908
8916
  key: name + "-" + index
8909
8917
  }, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper$1, {