@royaloperahouse/chord 0.7.24 → 0.7.25
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 +2 -0
- package/dist/chord.cjs.development.js +37 -31
- 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 +37 -31
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/molecules/PeopleListing/PeopleListing.style.d.ts +3 -0
- package/dist/types/types.d.ts +8 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2611,7 +2611,7 @@ var SponsorLogo = function SponsorLogo(_ref) {
|
|
|
2611
2611
|
};
|
|
2612
2612
|
|
|
2613
2613
|
var _templateObject$d;
|
|
2614
|
-
var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/rolex.html?size=80';
|
|
2614
|
+
var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v3/rolex.html?size=80';
|
|
2615
2615
|
var DEFAULT_SPONSORSHIP_TITLE = 'rolex';
|
|
2616
2616
|
var DEFAULT_DATA_ROH = 'ImgAdvert';
|
|
2617
2617
|
var SponsorshipStyled = /*#__PURE__*/styled__default.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: transparent;\n height: 80px;\n margin: 0px;\n overflow: hidden;\n padding: 0;\n width: 80px;\n\n & > iframe {\n border: 0;\n display: block;\n margin: 0px;\n padding: 0px;\n overflow: hidden;\n width: 100%;\n height: 100%;\n }\n\n @media ", " {\n & {\n height: 40px;\n width: 40px;\n }\n & iframe {\n height: 80px;\n transform: scale(0.5) translate(-40px, -40px);\n width: 80px;\n }\n }\n"])), devices.mobile);
|
|
@@ -5238,10 +5238,13 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
5238
5238
|
}), /*#__PURE__*/React__default.createElement(StreamBadge, null)));
|
|
5239
5239
|
};
|
|
5240
5240
|
|
|
5241
|
-
var _templateObject$L, _templateObject2$u, _templateObject3$n;
|
|
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"])));
|
|
5243
|
-
var
|
|
5244
|
-
var
|
|
5241
|
+
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);
|
|
5243
|
+
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
|
+
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
|
+
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"])));
|
|
5246
|
+
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n"])));
|
|
5247
|
+
var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n text-decoration: underline;\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
|
|
5245
5248
|
|
|
5246
5249
|
var Person = function Person(_ref) {
|
|
5247
5250
|
var person = _ref.person,
|
|
@@ -5256,34 +5259,37 @@ var Person = function Person(_ref) {
|
|
|
5256
5259
|
}, name), personSeparator ? /*#__PURE__*/React__default.createElement("span", null, separator) : null) : /*#__PURE__*/React__default.createElement("span", null, name, personSeparator));
|
|
5257
5260
|
};
|
|
5258
5261
|
|
|
5262
|
+
var textSection = function textSection(role) {
|
|
5263
|
+
return /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
|
|
5264
|
+
title: "role",
|
|
5265
|
+
"data-roh": role.dataROH
|
|
5266
|
+
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
5267
|
+
level: 1
|
|
5268
|
+
}, role.name)), /*#__PURE__*/React__default.createElement(BodyText, {
|
|
5269
|
+
level: 1,
|
|
5270
|
+
tag: "p"
|
|
5271
|
+
}, role.people.map(function (person, personIndex) {
|
|
5272
|
+
return /*#__PURE__*/React__default.createElement(Person, {
|
|
5273
|
+
key: "" + person.name + personIndex,
|
|
5274
|
+
person: person,
|
|
5275
|
+
withSeparator: role.people.length !== personIndex + 1
|
|
5276
|
+
});
|
|
5277
|
+
})));
|
|
5278
|
+
};
|
|
5279
|
+
|
|
5259
5280
|
var PeopleListing = function PeopleListing(_ref) {
|
|
5260
5281
|
var roles = _ref.roles;
|
|
5261
5282
|
return /*#__PURE__*/React__default.createElement(PeopleListingGrid, null, roles.map(function (role, index) {
|
|
5262
5283
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
5263
|
-
key: role.name + "-" + index
|
|
5264
|
-
|
|
5265
|
-
|
|
5266
|
-
|
|
5267
|
-
|
|
5268
|
-
}, /*#__PURE__*/React__default.createElement(RoleWrapper, {
|
|
5269
|
-
title: "role",
|
|
5270
|
-
"data-roh": role.dataROH
|
|
5271
|
-
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
5272
|
-
level: 1
|
|
5273
|
-
}, role.name)), /*#__PURE__*/React__default.createElement(BodyText, {
|
|
5274
|
-
level: 1,
|
|
5275
|
-
tag: "p"
|
|
5276
|
-
}, role.people.map(function (person, personIndex) {
|
|
5277
|
-
return /*#__PURE__*/React__default.createElement(Person, {
|
|
5278
|
-
key: "" + person.name + personIndex,
|
|
5279
|
-
person: person,
|
|
5280
|
-
withSeparator: role.people.length !== personIndex + 1
|
|
5281
|
-
});
|
|
5282
|
-
})));
|
|
5284
|
+
key: role.name + "-" + index
|
|
5285
|
+
}, 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", {
|
|
5286
|
+
src: role.people[0].headshot,
|
|
5287
|
+
alt: role.people[0].name
|
|
5288
|
+
})), textSection(role)) : textSection(role));
|
|
5283
5289
|
}));
|
|
5284
5290
|
};
|
|
5285
5291
|
|
|
5286
|
-
var _templateObject$M, _templateObject2$v, _templateObject3$o, _templateObject4$
|
|
5292
|
+
var _templateObject$M, _templateObject2$v, _templateObject3$o, _templateObject4$i, _templateObject5$e, _templateObject6$b, _templateObject7$7;
|
|
5287
5293
|
var LENGTH_TEXT = 28;
|
|
5288
5294
|
var LENGTH_TEXT_TABLET$1 = 10;
|
|
5289
5295
|
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
@@ -5301,9 +5307,9 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
|
|
|
5301
5307
|
var imageToLeft = _ref4.imageToLeft;
|
|
5302
5308
|
return imageToLeft ? 'right' : 'left';
|
|
5303
5309
|
}, devices.mobile);
|
|
5304
|
-
var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
5305
|
-
var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$
|
|
5306
|
-
var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
5310
|
+
var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 32px 0;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n & {\n margin: 0 0 24px 0;\n }\n }\n"])), devices.mobile);
|
|
5311
|
+
var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
5312
|
+
var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref5) {
|
|
5307
5313
|
var theme = _ref5.theme;
|
|
5308
5314
|
return theme.colors.black;
|
|
5309
5315
|
}, function (_ref6) {
|
|
@@ -5506,7 +5512,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
5506
5512
|
};
|
|
5507
5513
|
|
|
5508
5514
|
var _templateObject$Q, _templateObject2$x, _templateObject3$p;
|
|
5509
|
-
var TextWrapper$
|
|
5515
|
+
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
5510
5516
|
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
5511
5517
|
var displayAttribution = _ref.displayAttribution;
|
|
5512
5518
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
@@ -5521,7 +5527,7 @@ var Quote = function Quote(_ref) {
|
|
|
5521
5527
|
columnSpanDesktop: 8,
|
|
5522
5528
|
columnStartDevice: 2,
|
|
5523
5529
|
columnSpanDevice: 12
|
|
5524
|
-
}, /*#__PURE__*/React__default.createElement(TextWrapper$
|
|
5530
|
+
}, /*#__PURE__*/React__default.createElement(TextWrapper$3, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
5525
5531
|
level: 4
|
|
5526
5532
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
5527
5533
|
dangerouslySetInnerHTML: {
|