@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/CHANGELOG.md
CHANGED
|
@@ -1,11 +1,23 @@
|
|
|
1
1
|
# CHANGELOG
|
|
2
2
|
|
|
3
|
+
## [0.7.29]
|
|
4
|
+
- TextOnly: change spacing for the headings
|
|
5
|
+
|
|
6
|
+
## [0.7.28]
|
|
7
|
+
- Order PeopleListing component by presence of headshot
|
|
8
|
+
- Show four listings per row on large desktop
|
|
9
|
+
|
|
10
|
+
## [0.7.27]
|
|
11
|
+
- Extend ContactCard capabilities
|
|
12
|
+
- Extend Tertiary Button text length
|
|
13
|
+
|
|
3
14
|
## [0.7.26]
|
|
4
15
|
- Add storybook-deployer package
|
|
5
16
|
- Update README with instructions for deployment
|
|
6
17
|
|
|
7
18
|
## [0.7.25]
|
|
8
19
|
- PeopleListing: add headshot
|
|
20
|
+
|
|
9
21
|
## [0.7.24]
|
|
10
22
|
- Add new ContactCard component
|
|
11
23
|
|
|
@@ -2118,7 +2118,7 @@ var TertiaryButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$5 ||
|
|
|
2118
2118
|
var color = _ref.color;
|
|
2119
2119
|
return color;
|
|
2120
2120
|
});
|
|
2121
|
-
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"])));
|
|
2121
|
+
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"])));
|
|
2122
2122
|
|
|
2123
2123
|
var _excluded$3 = ["children", "color"];
|
|
2124
2124
|
|
|
@@ -2127,7 +2127,7 @@ var Button$1 = function Button(_ref) {
|
|
|
2127
2127
|
color = _ref.color,
|
|
2128
2128
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
2129
2129
|
|
|
2130
|
-
var truncatedString = children.substring(0,
|
|
2130
|
+
var truncatedString = children.substring(0, 100);
|
|
2131
2131
|
return /*#__PURE__*/React__default.createElement(TertiaryButtonWrapper, Object.assign({}, rest, {
|
|
2132
2132
|
color: color
|
|
2133
2133
|
}), truncatedString, /*#__PURE__*/React__default.createElement(TertiaryIconWrapper, {
|
|
@@ -4988,10 +4988,16 @@ var Cards = function Cards(_ref) {
|
|
|
4988
4988
|
|
|
4989
4989
|
var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$d, _templateObject5$9;
|
|
4990
4990
|
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);
|
|
4991
|
-
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n
|
|
4991
|
+
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) {
|
|
4992
|
+
var hideBottomBorder = _ref.hideBottomBorder;
|
|
4993
|
+
return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
4994
|
+
}, function (_ref2) {
|
|
4995
|
+
var hideTopBorder = _ref2.hideTopBorder;
|
|
4996
|
+
return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
4997
|
+
}, devices.mobileAndTablet);
|
|
4992
4998
|
var AddressWrapperDesktop = /*#__PURE__*/styled__default.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
4993
4999
|
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);
|
|
4994
|
-
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
|
|
5000
|
+
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);
|
|
4995
5001
|
|
|
4996
5002
|
var divideAddressString = function divideAddressString(address) {
|
|
4997
5003
|
return address.split(',').map(function (chunk) {
|
|
@@ -5007,30 +5013,45 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
5007
5013
|
email = _ref.email,
|
|
5008
5014
|
phone = _ref.phone,
|
|
5009
5015
|
website = _ref.website,
|
|
5010
|
-
address = _ref.address
|
|
5016
|
+
address = _ref.address,
|
|
5017
|
+
_ref$hideBottomBorder = _ref.hideBottomBorder,
|
|
5018
|
+
hideBottomBorder = _ref$hideBottomBorder === void 0 ? false : _ref$hideBottomBorder,
|
|
5019
|
+
_ref$hideTopBorder = _ref.hideTopBorder,
|
|
5020
|
+
hideTopBorder = _ref$hideTopBorder === void 0 ? false : _ref$hideTopBorder;
|
|
5011
5021
|
var hasDetails = email || phone || website;
|
|
5022
|
+
var addressString = address == null ? void 0 : address.substring(0, 110);
|
|
5023
|
+
var descriptionText = description == null ? void 0 : description.substring(0, 110);
|
|
5012
5024
|
return /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
5013
5025
|
columnStartDesktop: 3,
|
|
5014
5026
|
columnSpanDesktop: 8,
|
|
5015
5027
|
columnStartDevice: 1,
|
|
5016
5028
|
columnSpanDevice: 14
|
|
5017
|
-
}, /*#__PURE__*/React__default.createElement(Wrapper$2,
|
|
5029
|
+
}, /*#__PURE__*/React__default.createElement(Wrapper$2, {
|
|
5030
|
+
"data-testid": "contact-card-wrapper",
|
|
5031
|
+
hideBottomBorder: hideBottomBorder,
|
|
5032
|
+
hideTopBorder: hideTopBorder
|
|
5033
|
+
}, /*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
5018
5034
|
level: 1
|
|
5019
|
-
}, name),
|
|
5035
|
+
}, name), descriptionText && /*#__PURE__*/React__default.createElement(Subtitle, {
|
|
5020
5036
|
level: 2
|
|
5021
|
-
},
|
|
5037
|
+
}, descriptionText), hasDetails && /*#__PURE__*/React__default.createElement(DetailsWrapper, {
|
|
5022
5038
|
"data-testid": "contact-card-details-block"
|
|
5023
|
-
}, email && /*#__PURE__*/React__default.createElement(
|
|
5024
|
-
|
|
5025
|
-
|
|
5026
|
-
|
|
5027
|
-
|
|
5028
|
-
|
|
5029
|
-
},
|
|
5039
|
+
}, email && /*#__PURE__*/React__default.createElement("a", {
|
|
5040
|
+
tabIndex: 0,
|
|
5041
|
+
href: "mailto:" + email
|
|
5042
|
+
}, email), phone && /*#__PURE__*/React__default.createElement("a", {
|
|
5043
|
+
tabIndex: 0,
|
|
5044
|
+
href: "tel:" + phone
|
|
5045
|
+
}, phone), website && /*#__PURE__*/React__default.createElement("a", {
|
|
5046
|
+
tabIndex: 0,
|
|
5047
|
+
href: website,
|
|
5048
|
+
target: "_blank",
|
|
5049
|
+
rel: "noreferrer"
|
|
5050
|
+
}, website)), addressString && /*#__PURE__*/React__default.createElement("div", {
|
|
5030
5051
|
"data-testid": "contact-card-address-block"
|
|
5031
5052
|
}, /*#__PURE__*/React__default.createElement(AddressWrapperDesktop, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
5032
5053
|
level: 1
|
|
5033
|
-
},
|
|
5054
|
+
}, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
|
|
5034
5055
|
};
|
|
5035
5056
|
|
|
5036
5057
|
var _templateObject$I, _templateObject2$r, _templateObject3$k, _templateObject4$e, _templateObject5$a;
|
|
@@ -5239,7 +5260,7 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
5239
5260
|
};
|
|
5240
5261
|
|
|
5241
5262
|
var _templateObject$L, _templateObject2$u, _templateObject3$n, _templateObject4$h, _templateObject5$d, _templateObject6$a;
|
|
5242
|
-
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);
|
|
5263
|
+
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);
|
|
5243
5264
|
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"])));
|
|
5244
5265
|
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"])));
|
|
5245
5266
|
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) {
|
|
|
5259
5280
|
}, name), personSeparator ? /*#__PURE__*/React__default.createElement("span", null, separator) : null) : /*#__PURE__*/React__default.createElement("span", null, name, personSeparator));
|
|
5260
5281
|
};
|
|
5261
5282
|
|
|
5262
|
-
|
|
5283
|
+
function hasHeadshot(role) {
|
|
5284
|
+
return +(!!role.people[0].headshot && role.people[0].useHeadshot);
|
|
5285
|
+
}
|
|
5286
|
+
|
|
5287
|
+
function textSection(role) {
|
|
5263
5288
|
return /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
|
|
5264
5289
|
title: "role",
|
|
5265
5290
|
"data-roh": role.dataROH
|
|
@@ -5275,14 +5300,16 @@ var textSection = function textSection(role) {
|
|
|
5275
5300
|
withSeparator: role.people.length !== personIndex + 1
|
|
5276
5301
|
});
|
|
5277
5302
|
})));
|
|
5278
|
-
}
|
|
5303
|
+
}
|
|
5279
5304
|
|
|
5280
5305
|
var PeopleListing = function PeopleListing(_ref) {
|
|
5281
5306
|
var roles = _ref.roles;
|
|
5282
|
-
return /*#__PURE__*/React__default.createElement(PeopleListingGrid, null, roles.
|
|
5307
|
+
return /*#__PURE__*/React__default.createElement(PeopleListingGrid, null, roles.sort(function (a, b) {
|
|
5308
|
+
return hasHeadshot(b) - hasHeadshot(a);
|
|
5309
|
+
}).map(function (role, index) {
|
|
5283
5310
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
5284
5311
|
key: role.name + "-" + index
|
|
5285
|
-
}, role
|
|
5312
|
+
}, !!hasHeadshot(role) ? /*#__PURE__*/React__default.createElement(PersonWrapper, null, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
|
|
5286
5313
|
src: role.people[0].headshot,
|
|
5287
5314
|
alt: role.people[0].name
|
|
5288
5315
|
})), textSection(role)) : textSection(role));
|
|
@@ -5434,7 +5461,7 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
5434
5461
|
};
|
|
5435
5462
|
|
|
5436
5463
|
var _templateObject$O;
|
|
5437
|
-
var TextContainer$1 = /*#__PURE__*/styled__default.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:
|
|
5464
|
+
var TextContainer$1 = /*#__PURE__*/styled__default.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) {
|
|
5438
5465
|
var theme = _ref.theme;
|
|
5439
5466
|
return theme.colors.primary;
|
|
5440
5467
|
});
|