@royaloperahouse/chord 0.7.27 → 0.7.28

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+
+## [0.7.28]
+- Order PeopleListing component by presence of headshot
+- Show four listings per row on large desktop
+
 ## [0.7.27]
 - Extend ContactCard capabilities
 - Extend Tertiary Button text length

package/dist/chord.cjs.development.js

@@ -5260,7 +5260,7 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
 };
 
 var _templateObject$L, _templateObject2$u, _templateObject3$n, _templateObject4$h, _templateObject5$d, _templateObject6$a;
-var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$L || (_templateObject$L = /*#__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  @media ", " {\n    grid-template-columns: 1fr 1fr;\n  }\n"])), devices.mobile, devices.tablet);
+var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$L || (_templateObject$L = /*#__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$u || (_templateObject2$u = /*#__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$n || (_templateObject3$n = /*#__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$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
@@ -5280,7 +5280,11 @@ var Person = function Person(_ref) {
   }, name), personSeparator ? /*#__PURE__*/React__default.createElement("span", null, separator) : null) : /*#__PURE__*/React__default.createElement("span", null, name, personSeparator));
 };
 
-var textSection = function textSection(role) {
+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, {
     title: "role",
     "data-roh": role.dataROH
@@ -5296,14 +5300,16 @@ var textSection = function textSection(role) {
       withSeparator: role.people.length !== personIndex + 1
     });
   })));
-};
+}
 
 var PeopleListing = function PeopleListing(_ref) {
   var roles = _ref.roles;
-  return /*#__PURE__*/React__default.createElement(PeopleListingGrid, null, roles.map(function (role, index) {
+  return /*#__PURE__*/React__default.createElement(PeopleListingGrid, null, roles.sort(function (a, b) {
+    return hasHeadshot(b) - hasHeadshot(a);
+  }).map(function (role, index) {
     return /*#__PURE__*/React__default.createElement(GridItem, {
       key: role.name + "-" + index
-    }, role.people[0].headshot && role.people[0].useHeadshot ? /*#__PURE__*/React__default.createElement(PersonWrapper, null, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
+    }, !!hasHeadshot(role) ? /*#__PURE__*/React__default.createElement(PersonWrapper, null, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
       src: role.people[0].headshot,
       alt: role.people[0].name
     })), textSection(role)) : textSection(role));