@royaloperahouse/chord 0.7.18 → 0.7.21

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # CHANGELOG
 
+## [0.7.21]
+- PageHeading: add a possibility to handle bold and italic in text
+- Header-2: fix font size and line-height
+
+## [0.7.20]
+- TextOnly: fix spacing between the elements
+
+## [0.7.19]
+- TextOnly: extend styles for embedded headers and links
+
 ## [0.7.18]
 - Quote: fix qoute signs
 

package/dist/chord.cjs.development.js

@@ -278,7 +278,7 @@ var common = {
       sizes: {
         headers: {
           1: '38px',
-          2: '32px',
+          2: '30px',
           3: '26px',
           4: '24px',
           5: '20px',
@@ -342,7 +342,7 @@ var common = {
       lineHeights: {
         headers: {
           1: '42px',
-          2: '36px',
+          2: '34px',
           3: '30px',
           4: '28px',
           5: '28px',
@@ -4964,7 +4964,7 @@ var Editorial = function Editorial(_ref) {
   })))));
 };
 
-var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$5;
+var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$5, _templateObject8$5;
 var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  h2 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
@@ -4972,9 +4972,10 @@ var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$H || (
 var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content;\n  grid-template-areas:\n    '. . title title title title title title title title title title . . logo .'\n    '. . text text text text text text text text text button button button . .';\n\n  @media ", " {\n    & {\n      grid-template-rows: 20px min-content min-content min-content 20px;\n      grid-template-areas:\n        '. . . . . . . . . . . . . .'\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text text text text .'\n        '. button button button button button button button button button button button button .'\n        '. . . . . . . . . . . . . .';\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-areas:\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text button button button .';\n    }\n  }\n"])), devices.mobile, devices.tablet);
 var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: title;\n  margin-top: 80px;\n\n  @media ", " {\n    & {\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
 var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 20px;\n  width: fit-content;\n  height: 36px;\n\n  @media ", " {\n    & {\n      height: 30px;\n    }\n  }\n"])), devices.mobile);
-var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  align-self: end;\n  margin-top: 12px;\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n"])));
+var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  align-self: end;\n  margin-top: 12px;\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n"])));
 var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  justify-self: end;\n  margin-top: 20px;\n  position: relative;\n\n  > div {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  @media ", " {\n    & {\n      align-self: start;\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
 var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  justify-self: end;\n  align-self: end;\n\n  @media ", " {\n    & {\n      justify-self: center;\n      align-self: center;\n      width: 100%;\n      margin-top: 16px;\n    }\n  }\n"])), devices.mobile);
+var PageHeadingText = /*#__PURE__*/styled__default.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-altHeader-6);\n  font-weight: var(--font-weight-altHeader-6);\n  letter-spacing: var(--letter-spacing-altHeader-6);\n  line-height: var(--line-height-altHeader-6);\n  font-feature-settings: var(--font-feature-settings-altHeader);\n  font-family: var(--font-family-altHeader);\n  text-transform: var(--text-transform-altHeader);\n  word-break: var(--word-break-altHeader);\n"])));
 
 var _excluded$d = ["text"];
 
@@ -5000,9 +5001,11 @@ var PageHeading = function PageHeading(_ref) {
     level: 2
   }, truncatedTitle)), text ? /*#__PURE__*/React__default.createElement(TextWrapper, {
     "data-testid": "page-heading-text"
-  }, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 6
-  }, truncatedText)) : null, sponsor ? /*#__PURE__*/React__default.createElement(LogoWrapper$1, {
+  }, /*#__PURE__*/React__default.createElement(PageHeadingText, {
+    dangerouslySetInnerHTML: {
+      __html: truncatedText
+    }
+  })) : null, sponsor ? /*#__PURE__*/React__default.createElement(LogoWrapper$1, {
     "data-testid": "page-heading-sponsor"
   }, /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, link ? /*#__PURE__*/React__default.createElement(ButtonWrapper$1, {
     "data-testid": "page-heading-link"
@@ -5311,7 +5314,10 @@ var SectionTitle = function SectionTitle(_ref) {
 };
 
 var _templateObject$M;
-var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$M || (_templateObject$M = /*#__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    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  }\n\n  & h2 {\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  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\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-left: 20px;\n  }\n\n  & ul > li:before {\n    display: inline-block;\n    content: '\u2014';\n    width: 0px;\n    margin-left: 20px;\n  }\n\n  & li {\n    text-indent: -20px;\n    line-height: var(--line-height-listing);\n  }\n"])));
+var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$M || (_templateObject$M = /*#__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: 60px 0 0;\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: 30px 0 10px;\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"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.colors.primary;
+});
 
 var TextOnly = function TextOnly(_ref) {
   var _ref$text = _ref.text,