@royaloperahouse/chord 2.2.1 → 2.2.2

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## [2.2.2]
+- Allow accordions to take different display and semantic levels
+
 ## [2.2.1]
 - Read More Component
 

package/dist/chord.cjs.development.js

@@ -5617,8 +5617,8 @@ var _templateObject$K, _templateObject2$u, _templateObject3$n, _templateObject4$
 var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  div {\n    overflow: hidden;\n  }\n"])));
 var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2px;\n  background-color: var(--base-color-lightgrey);\n  width: 100%;\n"])));
 var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0px 20px 28px 20px;\n\n  @media ", " {\n    margin: 12px 0px 24px 0px;\n  }\n"])), devices.mobile);
-var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n\n  && a {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-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: 28px 20px;\n\n    @media ", " {\n      margin: 12px 20px 12px 0px;\n    }\n  }\n\n  && svg {\n    width: var(--navigation-middle-gap);\n    height: var(--navigation-middle-gap);\n    margin-right: 20px;\n\n    @media ", " {\n      margin-right: 0px;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])), devices.mobile, devices.mobile);
-var ContentContainer = /*#__PURE__*/styled__default.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.2s ease;\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"])));
+var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n\n  && h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  div {\n    margin: 21px 20px;\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n\n    @media ", " {\n      margin: 12px 20px 12px 0px;\n    }\n  }\n\n  && svg {\n    width: var(--navigation-middle-gap);\n    height: var(--navigation-middle-gap);\n    margin-right: 20px;\n\n    @media ", " {\n      margin-right: 0px;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])), devices.mobile, devices.mobile);
+var ContentContainer = /*#__PURE__*/styled__default.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.2s ease;\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  @media ", " {\n    transition: 100% 0.2s ease;\n  }\n"])), devices.mobile);
 
 var Accordion = function Accordion(_ref) {
   var _ref$title = _ref.title,
@@ -5628,7 +5628,13 @@ var Accordion = function Accordion(_ref) {
       children = _ref.children,
       visibleStandfirst = _ref.visibleStandfirst,
       _ref$initOpen = _ref.initOpen,
-      initOpen = _ref$initOpen === void 0 ? false : _ref$initOpen;
+      initOpen = _ref$initOpen === void 0 ? false : _ref$initOpen,
+      _ref$contentType = _ref.contentType,
+      contentType = _ref$contentType === void 0 ? 'subtitle' : _ref$contentType,
+      _ref$semanticLevel = _ref.semanticLevel,
+      semanticLevel = _ref$semanticLevel === void 0 ? 4 : _ref$semanticLevel,
+      _ref$displayLevel = _ref.displayLevel,
+      displayLevel = _ref$displayLevel === void 0 ? 1 : _ref$displayLevel;
 
   var _useState = React.useState(initOpen),
       openAccordion = _useState[0],
@@ -5681,6 +5687,34 @@ var Accordion = function Accordion(_ref) {
   };
 
   var contentContainerId = title + "-accordion-content";
+
+  var AccordionTitle = function AccordionTitle(_ref2) {
+    var level = _ref2.level,
+        semanticLevel = _ref2.semanticLevel;
+    var subtitleLevel = level;
+
+    if (contentType === 'header') {
+      return /*#__PURE__*/React__default.createElement(Header, {
+        semanticLevel: semanticLevel,
+        level: level
+      }, title);
+    } else if (contentType === 'subtitle') {
+      if (contentType === 'subtitle') {
+        if (![1, 2].includes(level)) {
+          console.warn('Invalid Subtitle level:', level);
+          subtitleLevel = level > 2 ? 2 : level;
+        }
+      }
+
+      return /*#__PURE__*/React__default.createElement(Subtitle, Object.assign({}, {
+        level: subtitleLevel,
+        semanticLevel: semanticLevel
+      }), title);
+    }
+
+    return null;
+  };
+
   return /*#__PURE__*/React__default.createElement(AccordionContainer, {
     tabIndex: 0,
     onKeyDown: keyDown
@@ -5691,9 +5725,10 @@ var Accordion = function Accordion(_ref) {
     "aria-label": title,
     "aria-expanded": openAccordion,
     "aria-controls": contentContainerId
-  }, /*#__PURE__*/React__default.createElement("h4", null, /*#__PURE__*/React__default.createElement("a", {
-    className: "accordion-title"
-  }, title)), children && /*#__PURE__*/React__default.createElement(Icon, {
+  }, /*#__PURE__*/React__default.createElement(AccordionTitle, {
+    level: displayLevel,
+    semanticLevel: semanticLevel
+  }, title), children && /*#__PURE__*/React__default.createElement(Icon, {
     iconName: iconName
   })), visibleStandfirst && /*#__PURE__*/React__default.createElement(Standfirst, null), /*#__PURE__*/React__default.createElement(ContentContainer, {
     "data-testid": "richcontainer",
@@ -5724,7 +5759,10 @@ var Accordions = function Accordions(_ref) {
       key: accordion.title + "-" + index,
       title: accordion.title,
       showLine: isLastAccordion(index),
-      visibleStandfirst: accordion.visibleStandfirst
+      visibleStandfirst: accordion.visibleStandfirst,
+      contentType: accordion.contentType,
+      displayLevel: accordion.displayLevel,
+      semanticLevel: accordion.semanticLevel
     }, accordion.children);
   }));
 };