@royaloperahouse/chord 2.2.1 → 2.2.3-chord-development

package/dist/chord.esm.js

@@ -5621,8 +5621,8 @@ var _templateObject$K, _templateObject2$u, _templateObject3$n, _templateObject4$
 var AccordionContainer = /*#__PURE__*/styled.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.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.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.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.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.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.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,
@@ -5632,7 +5632,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 = useState(initOpen),
       openAccordion = _useState[0],
@@ -5685,6 +5691,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
@@ -5695,9 +5729,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",
@@ -5728,7 +5763,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);
   }));
 };
@@ -6848,7 +6886,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
 var isIOS = function isIOS() {
   try {
     console.warn('Do not use this on server side rendering, it may throw an error.');
-    if (typeof navigator === undefined) return false;
+    if (typeof navigator === 'undefined') return false;
     return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
     navigator.userAgent.includes('Mac') && 'ontouchend' in document;
   } catch (e) {
@@ -6864,7 +6902,7 @@ var useIOS = function useIOS() {
       setIOS = _useState[1];
 
   useEffect(function () {
-    if (typeof navigator === undefined) return;
+    if (typeof navigator === 'undefined') return;
     setIOS(isIOS());
   }, []);
   return IOS;
@@ -7185,8 +7223,8 @@ var PeopleListing = function PeopleListing(_ref) {
 var _templateObject$_, _templateObject2$I, _templateObject3$A, _templateObject4$s;
 var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
 var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  p {\n    line-height: 1.5;\n  }\n"])));
-var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  p {\n    line-height: 25px;\n    margin-bottom: 3px;\n  }\n"])));
-var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  min-height: 1.5em;\n"])));
+var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  p {\n    line-height: 1.5;\n    margin-bottom: 4px;\n  }\n"])));
+var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n"])));
 
 var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
   return array.reduce(function (acc, item) {
@@ -7197,12 +7235,18 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
 var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
     if (musicTitle.length > 1 && index === musicTitle.length - 1) {
-      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", null, title));
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
+        key: index
+      }, title));
     } else if (index > 0) {
-      return /*#__PURE__*/React__default.createElement("i", null, ", ", title);
+      return /*#__PURE__*/React__default.createElement("i", {
+        key: index
+      }, ", ", title);
     }
 
-    return /*#__PURE__*/React__default.createElement("i", null, title);
+    return /*#__PURE__*/React__default.createElement("i", {
+      key: index
+    }, title);
   }));
 };