@royaloperahouse/chord 0.7.27 → 0.7.28

package/dist/chord.esm.js

@@ -5262,7 +5262,7 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
 };
 
 var _templateObject$L, _templateObject2$u, _templateObject3$n, _templateObject4$h, _templateObject5$d, _templateObject6$a;
-var PeopleListingGrid = /*#__PURE__*/styled(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(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.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.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.div(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
@@ -5282,7 +5282,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
@@ -5298,14 +5302,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));