@royaloperahouse/chord 0.7.25 → 0.7.28

package/CHANGELOG.md

@@ -1,7 +1,21 @@
 # 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
+
+## [0.7.26]
+- Add storybook-deployer package
+- Update README with instructions for deployment
+
 ## [0.7.25]
 - PeopleListing: add headshot
+
 ## [0.7.24]
 - Add new ContactCard component
 

package/README.GIT

@@ -42,6 +42,29 @@ yarn build-storybook
 
 This will create a static copy in `./storybook-static`, and there is an index.html page inside the core directory. This allows the site to be previewed directly in the git repository via serving pages (it needs to be configured for that branch).
 
+To deploy the storybook publically:
+
+### Prerequisites
+
+Make sure you have credentials for the *parent* 'Royal Opera House' AWS account in your `~/.aws/credentials` file. The deploy script expects these to be called `[parent]`.
+
+You can get these values at:
+
+AWS 'Your Applications' page -> 'Royal Opera House' -> 'Developer Access' ->
+'Command line or programmatic access'
+
+### Deployment
+
+To deploy, first *build* the storybook as above
+
+then use:
+
+```bash
+yarn deploy-storybook
+```
+
+This will deploy the contents of `./storybook-static` to S3 as a static site accessible at [chord.roh.org.uk](chord.roh.org.uk)
+
 To build the package use:
 
 ```bash

package/dist/chord.cjs.development.js

@@ -2118,7 +2118,7 @@ var TertiaryButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$5 ||
   var color = _ref.color;
   return color;
 });
-var TertiaryIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n  display: inline-block;\n"])));
+var TertiaryIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  min-width: 20px;\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n  display: inline-block;\n"])));
 
 var _excluded$3 = ["children", "color"];
 
@@ -2127,7 +2127,7 @@ var Button$1 = function Button(_ref) {
       color = _ref.color,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
-  var truncatedString = children.substring(0, 30);
+  var truncatedString = children.substring(0, 100);
   return /*#__PURE__*/React__default.createElement(TertiaryButtonWrapper, Object.assign({}, rest, {
     color: color
   }), truncatedString, /*#__PURE__*/React__default.createElement(TertiaryIconWrapper, {
@@ -4988,10 +4988,16 @@ var Cards = function Cards(_ref) {
 
 var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$d, _templateObject5$9;
 var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > div {\n    margin-bottom: 2px;\n\n    &:first-child {\n      margin-bottom: 4px;\n\n      @media ", " {\n        margin-bottom: 6px;\n      }\n    }\n  }\n\n  @media ", " {\n    grid-column: 2 / span 12;\n  }\n"])), devices.mobile, devices.mobileAndTablet);
-var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-top: 2px solid var(--base-color-lightgrey);\n  border-bottom: 2px solid var(--base-color-lightgrey);\n  padding: 30px 0;\n\n  @media ", " {\n    display: grid;\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: max-content;\n    gap: var(--grid-column-gap);\n    margin: 0;\n  }\n"])), devices.mobileAndTablet);
+var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  padding: 30px 0;\n\n  @media ", " {\n    display: grid;\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: max-content;\n    gap: var(--grid-column-gap);\n    margin: 0;\n  }\n"])), function (_ref) {
+  var hideBottomBorder = _ref.hideBottomBorder;
+  return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
+}, function (_ref2) {
+  var hideTopBorder = _ref2.hideTopBorder;
+  return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
+}, devices.mobileAndTablet);
 var AddressWrapperDesktop = /*#__PURE__*/styled__default.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
 var AddressWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  & > div {\n    margin-bottom: 2px;\n  }\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
-var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n\n  @media ", " {\n    flex-direction: column;\n    margin: 4px 0;\n  }\n\n  div {\n    text-decoration: underline;\n\n    &:before {\n      display: inline-block;\n      content: '';\n      background-color: var(--base-color-black);\n      width: 1px;\n      height: 18px;\n      margin: 0 8px -4px;\n\n      @media ", " {\n        display: none;\n      }\n    }\n\n    &:first-child:before {\n      display: none;\n    }\n  }\n"])), devices.mobile, devices.mobile);
+var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n\n  @media ", " {\n    flex-direction: column;\n    margin: 4px 0;\n  }\n\n  a {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n    font-feature-settings: var(--font-feature-settings-body);\n    font-weight: var(--font-weight-body-1);\n    letter-spacing: var(--letter-spacing-body-1);\n    line-height: var(--line-height-body-1);\n    text-transform: var(--text-transform-body);\n    color: var(--base-color-black);\n    text-decoration: underline;\n\n    &:before {\n      display: inline-block;\n      content: '';\n      background-color: var(--base-color-black);\n      width: 1px;\n      height: 18px;\n      margin: 0 8px -4px;\n\n      @media ", " {\n        display: none;\n      }\n    }\n\n    &:first-child:before {\n      display: none;\n    }\n  }\n"])), devices.mobile, devices.mobile);
 
 var divideAddressString = function divideAddressString(address) {
   return address.split(',').map(function (chunk) {
@@ -5007,30 +5013,45 @@ var ContactCard = function ContactCard(_ref) {
       email = _ref.email,
       phone = _ref.phone,
       website = _ref.website,
-      address = _ref.address;
+      address = _ref.address,
+      _ref$hideBottomBorder = _ref.hideBottomBorder,
+      hideBottomBorder = _ref$hideBottomBorder === void 0 ? false : _ref$hideBottomBorder,
+      _ref$hideTopBorder = _ref.hideTopBorder,
+      hideTopBorder = _ref$hideTopBorder === void 0 ? false : _ref$hideTopBorder;
   var hasDetails = email || phone || website;
+  var addressString = address == null ? void 0 : address.substring(0, 110);
+  var descriptionText = description == null ? void 0 : description.substring(0, 110);
   return /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 3,
     columnSpanDesktop: 8,
     columnStartDevice: 1,
     columnSpanDevice: 14
-  }, /*#__PURE__*/React__default.createElement(Wrapper$2, null, /*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
+  }, /*#__PURE__*/React__default.createElement(Wrapper$2, {
+    "data-testid": "contact-card-wrapper",
+    hideBottomBorder: hideBottomBorder,
+    hideTopBorder: hideTopBorder
+  }, /*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
     level: 1
-  }, name), description && /*#__PURE__*/React__default.createElement(Subtitle, {
+  }, name), descriptionText && /*#__PURE__*/React__default.createElement(Subtitle, {
     level: 2
-  }, description), hasDetails && /*#__PURE__*/React__default.createElement(DetailsWrapper, {
+  }, descriptionText), hasDetails && /*#__PURE__*/React__default.createElement(DetailsWrapper, {
     "data-testid": "contact-card-details-block"
-  }, email && /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1
-  }, email), phone && /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1
-  }, phone), website && /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1
-  }, website)), address && /*#__PURE__*/React__default.createElement("div", {
+  }, email && /*#__PURE__*/React__default.createElement("a", {
+    tabIndex: 0,
+    href: "mailto:" + email
+  }, email), phone && /*#__PURE__*/React__default.createElement("a", {
+    tabIndex: 0,
+    href: "tel:" + phone
+  }, phone), website && /*#__PURE__*/React__default.createElement("a", {
+    tabIndex: 0,
+    href: website,
+    target: "_blank",
+    rel: "noreferrer"
+  }, website)), addressString && /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "contact-card-address-block"
   }, /*#__PURE__*/React__default.createElement(AddressWrapperDesktop, null, /*#__PURE__*/React__default.createElement(BodyText, {
     level: 1
-  }, address)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(address)))))));
+  }, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
 };
 
 var _templateObject$I, _templateObject2$r, _templateObject3$k, _templateObject4$e, _templateObject5$a;
@@ -5239,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"])));
@@ -5259,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
@@ -5275,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));