@royaloperahouse/chord 0.7.26 → 0.7.29
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/CHANGELOG.md +12 -0
- package/dist/chord.cjs.development.js +49 -22
- package/dist/chord.cjs.development.js.map +1 -1
- package/dist/chord.cjs.production.min.js +1 -1
- package/dist/chord.cjs.production.min.js.map +1 -1
- package/dist/chord.esm.js +49 -22
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/molecules/ContactCard/ContactCard.d.ts +1 -1
- package/dist/components/molecules/ContactCard/ContactCard.style.d.ts +2 -1
- package/dist/types/contactCard.d.ts +45 -0
- package/dist/types/types.d.ts +0 -26
- package/package.json +1 -1
package/dist/chord.esm.js
CHANGED
|
@@ -2114,7 +2114,7 @@ var TertiaryButtonWrapper = /*#__PURE__*/styled.a(_templateObject$5 || (_templat
|
|
|
2114
2114
|
var color = _ref.color;
|
|
2115
2115
|
return color;
|
|
2116
2116
|
});
|
|
2117
|
-
var TertiaryIconWrapper = /*#__PURE__*/styled.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"])));
|
|
2117
|
+
var TertiaryIconWrapper = /*#__PURE__*/styled.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"])));
|
|
2118
2118
|
|
|
2119
2119
|
var _excluded$3 = ["children", "color"];
|
|
2120
2120
|
|
|
@@ -2123,7 +2123,7 @@ var Button$1 = function Button(_ref) {
|
|
|
2123
2123
|
color = _ref.color,
|
|
2124
2124
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
2125
2125
|
|
|
2126
|
-
var truncatedString = children.substring(0,
|
|
2126
|
+
var truncatedString = children.substring(0, 100);
|
|
2127
2127
|
return /*#__PURE__*/React__default.createElement(TertiaryButtonWrapper, Object.assign({}, rest, {
|
|
2128
2128
|
color: color
|
|
2129
2129
|
}), truncatedString, /*#__PURE__*/React__default.createElement(TertiaryIconWrapper, {
|
|
@@ -4990,10 +4990,16 @@ var Cards = function Cards(_ref) {
|
|
|
4990
4990
|
|
|
4991
4991
|
var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$d, _templateObject5$9;
|
|
4992
4992
|
var ContentWrapper = /*#__PURE__*/styled.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);
|
|
4993
|
-
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n
|
|
4993
|
+
var Wrapper$2 = /*#__PURE__*/styled.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) {
|
|
4994
|
+
var hideBottomBorder = _ref.hideBottomBorder;
|
|
4995
|
+
return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
4996
|
+
}, function (_ref2) {
|
|
4997
|
+
var hideTopBorder = _ref2.hideTopBorder;
|
|
4998
|
+
return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
4999
|
+
}, devices.mobileAndTablet);
|
|
4994
5000
|
var AddressWrapperDesktop = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
4995
5001
|
var AddressWrapperMobile = /*#__PURE__*/styled.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);
|
|
4996
|
-
var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n\n @media ", " {\n flex-direction: column;\n margin: 4px 0;\n }\n\n
|
|
5002
|
+
var DetailsWrapper = /*#__PURE__*/styled.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);
|
|
4997
5003
|
|
|
4998
5004
|
var divideAddressString = function divideAddressString(address) {
|
|
4999
5005
|
return address.split(',').map(function (chunk) {
|
|
@@ -5009,30 +5015,45 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
5009
5015
|
email = _ref.email,
|
|
5010
5016
|
phone = _ref.phone,
|
|
5011
5017
|
website = _ref.website,
|
|
5012
|
-
address = _ref.address
|
|
5018
|
+
address = _ref.address,
|
|
5019
|
+
_ref$hideBottomBorder = _ref.hideBottomBorder,
|
|
5020
|
+
hideBottomBorder = _ref$hideBottomBorder === void 0 ? false : _ref$hideBottomBorder,
|
|
5021
|
+
_ref$hideTopBorder = _ref.hideTopBorder,
|
|
5022
|
+
hideTopBorder = _ref$hideTopBorder === void 0 ? false : _ref$hideTopBorder;
|
|
5013
5023
|
var hasDetails = email || phone || website;
|
|
5024
|
+
var addressString = address == null ? void 0 : address.substring(0, 110);
|
|
5025
|
+
var descriptionText = description == null ? void 0 : description.substring(0, 110);
|
|
5014
5026
|
return /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
5015
5027
|
columnStartDesktop: 3,
|
|
5016
5028
|
columnSpanDesktop: 8,
|
|
5017
5029
|
columnStartDevice: 1,
|
|
5018
5030
|
columnSpanDevice: 14
|
|
5019
|
-
}, /*#__PURE__*/React__default.createElement(Wrapper$2,
|
|
5031
|
+
}, /*#__PURE__*/React__default.createElement(Wrapper$2, {
|
|
5032
|
+
"data-testid": "contact-card-wrapper",
|
|
5033
|
+
hideBottomBorder: hideBottomBorder,
|
|
5034
|
+
hideTopBorder: hideTopBorder
|
|
5035
|
+
}, /*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
5020
5036
|
level: 1
|
|
5021
|
-
}, name),
|
|
5037
|
+
}, name), descriptionText && /*#__PURE__*/React__default.createElement(Subtitle, {
|
|
5022
5038
|
level: 2
|
|
5023
|
-
},
|
|
5039
|
+
}, descriptionText), hasDetails && /*#__PURE__*/React__default.createElement(DetailsWrapper, {
|
|
5024
5040
|
"data-testid": "contact-card-details-block"
|
|
5025
|
-
}, email && /*#__PURE__*/React__default.createElement(
|
|
5026
|
-
|
|
5027
|
-
|
|
5028
|
-
|
|
5029
|
-
|
|
5030
|
-
|
|
5031
|
-
},
|
|
5041
|
+
}, email && /*#__PURE__*/React__default.createElement("a", {
|
|
5042
|
+
tabIndex: 0,
|
|
5043
|
+
href: "mailto:" + email
|
|
5044
|
+
}, email), phone && /*#__PURE__*/React__default.createElement("a", {
|
|
5045
|
+
tabIndex: 0,
|
|
5046
|
+
href: "tel:" + phone
|
|
5047
|
+
}, phone), website && /*#__PURE__*/React__default.createElement("a", {
|
|
5048
|
+
tabIndex: 0,
|
|
5049
|
+
href: website,
|
|
5050
|
+
target: "_blank",
|
|
5051
|
+
rel: "noreferrer"
|
|
5052
|
+
}, website)), addressString && /*#__PURE__*/React__default.createElement("div", {
|
|
5032
5053
|
"data-testid": "contact-card-address-block"
|
|
5033
5054
|
}, /*#__PURE__*/React__default.createElement(AddressWrapperDesktop, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
5034
5055
|
level: 1
|
|
5035
|
-
},
|
|
5056
|
+
}, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
|
|
5036
5057
|
};
|
|
5037
5058
|
|
|
5038
5059
|
var _templateObject$I, _templateObject2$r, _templateObject3$k, _templateObject4$e, _templateObject5$a;
|
|
@@ -5241,7 +5262,7 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
5241
5262
|
};
|
|
5242
5263
|
|
|
5243
5264
|
var _templateObject$L, _templateObject2$u, _templateObject3$n, _templateObject4$h, _templateObject5$d, _templateObject6$a;
|
|
5244
|
-
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);
|
|
5265
|
+
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);
|
|
5245
5266
|
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"])));
|
|
5246
5267
|
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"])));
|
|
5247
5268
|
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"])));
|
|
@@ -5261,7 +5282,11 @@ var Person = function Person(_ref) {
|
|
|
5261
5282
|
}, name), personSeparator ? /*#__PURE__*/React__default.createElement("span", null, separator) : null) : /*#__PURE__*/React__default.createElement("span", null, name, personSeparator));
|
|
5262
5283
|
};
|
|
5263
5284
|
|
|
5264
|
-
|
|
5285
|
+
function hasHeadshot(role) {
|
|
5286
|
+
return +(!!role.people[0].headshot && role.people[0].useHeadshot);
|
|
5287
|
+
}
|
|
5288
|
+
|
|
5289
|
+
function textSection(role) {
|
|
5265
5290
|
return /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
|
|
5266
5291
|
title: "role",
|
|
5267
5292
|
"data-roh": role.dataROH
|
|
@@ -5277,14 +5302,16 @@ var textSection = function textSection(role) {
|
|
|
5277
5302
|
withSeparator: role.people.length !== personIndex + 1
|
|
5278
5303
|
});
|
|
5279
5304
|
})));
|
|
5280
|
-
}
|
|
5305
|
+
}
|
|
5281
5306
|
|
|
5282
5307
|
var PeopleListing = function PeopleListing(_ref) {
|
|
5283
5308
|
var roles = _ref.roles;
|
|
5284
|
-
return /*#__PURE__*/React__default.createElement(PeopleListingGrid, null, roles.
|
|
5309
|
+
return /*#__PURE__*/React__default.createElement(PeopleListingGrid, null, roles.sort(function (a, b) {
|
|
5310
|
+
return hasHeadshot(b) - hasHeadshot(a);
|
|
5311
|
+
}).map(function (role, index) {
|
|
5285
5312
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
5286
5313
|
key: role.name + "-" + index
|
|
5287
|
-
}, role
|
|
5314
|
+
}, !!hasHeadshot(role) ? /*#__PURE__*/React__default.createElement(PersonWrapper, null, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
|
|
5288
5315
|
src: role.people[0].headshot,
|
|
5289
5316
|
alt: role.people[0].name
|
|
5290
5317
|
})), textSection(role)) : textSection(role));
|
|
@@ -5436,7 +5463,7 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
5436
5463
|
};
|
|
5437
5464
|
|
|
5438
5465
|
var _templateObject$O;
|
|
5439
|
-
var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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\n & h1,\n h2,\n h3,\n h4 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin:
|
|
5466
|
+
var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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\n & h1,\n h2,\n h3,\n h4 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 80px 0 16px;\n\n @media ", " {\n margin-top: 60px;\n }\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 80px 0 16px;\n\n @media ", " {\n margin-top: 60px;\n }\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n }\n\n p {\n margin: 30px 0;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & strong {\n font-weight: bold;\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n & ul {\n padding: 0;\n list-style: none;\n margin: 0 0 0 30px;\n\n li {\n text-indent: -24px;\n line-height: var(--line-height-listing);\n }\n }\n\n & ol {\n padding: 0;\n margin: 0 0 0 20px;\n\n li {\n line-height: var(--line-height-listing);\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n width: 0px;\n margin-left: 20px;\n }\n"])), devices.mobileAndTablet, devices.mobileAndTablet, function (_ref) {
|
|
5440
5467
|
var theme = _ref.theme;
|
|
5441
5468
|
return theme.colors.primary;
|
|
5442
5469
|
});
|