@royaloperahouse/harmonic 0.2.3-h → 0.2.3-j

package/dist/components/Typography/utils.d.ts

@@ -3,5 +3,8 @@ export declare const createClassNames: (baseClass: string, options: {
     color?: string;
     serif?: boolean;
     em?: boolean;
+    bold?: boolean;
     className?: string;
+}, styles: {
+    [key: string]: string;
 }) => string;

package/dist/harmonic.cjs.development.css

@@ -1,3 +1,293 @@
+/* Base classes */
+.typography-module_display__ZHsz9 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  line-height: 100%;
+}
+
+.typography-module_header__FVsLI {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+}
+
+.typography-module_subtitle__x3sSn {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+}
+
+.typography-module_bodycopy__-BY2U {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 400;
+}
+
+.typography-module_overline__y1yCC {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.typography-module_buttontext__Gp0W- {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 400;
+}
+
+.typography-module_captiontext__zyA-- {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 400;
+}
+
+.typography-module_navigationtext__Qj6Zw {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+}
+
+/* Size modifiers */
+.typography-module_display--large__RwPQD {
+  font-size: 96px;
+  font-weight: 700;
+  letter-spacing: -5px;
+}
+
+.typography-module_display--small__XWUSJ {
+  font-size: 68px;
+  font-weight: 500;
+  letter-spacing: -3px;
+}
+
+.typography-module_header--large__2vP3p {
+  font-size: 44px;
+  line-height: 48px;
+  letter-spacing: -1.5px;
+}
+
+.typography-module_header--medium__OgzlB {
+  font-size: 34px;
+  line-height: 40px;
+  letter-spacing: -1px;
+}
+
+.typography-module_header--small__zLuFf {
+  font-size: 26px;
+  line-height: 32px;
+  letter-spacing: -0.5px;
+}
+
+.typography-module_subtitle--large__1Ep9J {
+  font-size: 24px;
+  line-height: 32px;
+  letter-spacing: -0.5px;
+}
+
+.typography-module_subtitle--medium__8FxeU {
+  font-size: 20px;
+  line-height: 28px;
+  letter-spacing: -0.5px;
+}
+
+.typography-module_subtitle--small__Vt9bZ {
+  font-size: 17px;
+  line-height: 24px;
+  letter-spacing: -0.5px;
+}
+
+.typography-module_bodycopy--large__BNzf2 {
+  font-size: 20px;
+  line-height: 28px;
+  letter-spacing: -0.5px;
+}
+
+.typography-module_bodycopy--medium__cwJEu {
+  font-size: 17px;
+  line-height: 24px;
+  letter-spacing: -0.5px;
+}
+
+.typography-module_bodycopy--small__fTLSM {
+  font-size: 15px;
+  line-height: 20px;
+  letter-spacing: -0.25px;
+}
+
+.typography-module_overline--large__79WUM {
+  font-size: 17px;
+  line-height: 24px;
+  letter-spacing: 1.7px;
+}
+
+.typography-module_overline--medium__Y5z3w {
+  font-size: 15px;
+  line-height: 20px;
+  letter-spacing: 1.5px;
+}
+
+.typography-module_overline--small__MGEG6 {
+  font-size: 13px;
+  line-height: 16px;
+  letter-spacing: 1.3px;
+}
+
+/* Button, Caption, Navigation text */
+.typography-module_buttontext__Gp0W- {
+  font-size: 17px;
+  line-height: 20px;
+  letter-spacing: -0.5px;
+}
+
+.typography-module_captiontext__zyA-- {
+  font-size: 17px;
+  line-height: 24px;
+  letter-spacing: -0.5px;
+}
+
+.typography-module_navigationtext__Qj6Zw {
+  font-size: 19px;
+  line-height: 19px;
+  letter-spacing: 0.4px;
+}
+
+/* Color modifiers */
+.typography-module_display--primary__9sTwU,
+.typography-module_header--primary__KF0PJ,
+.typography-module_subtitle--primary__yL-hS,
+.typography-module_bodycopy--primary__5Uo2D,
+.typography-module_overline--primary__a2NSa,
+.typography-module_buttontext--primary__HnmE3,
+.typography-module_captiontext--primary__mmafI,
+.typography-module_navigationtext--primary__vIsUl {
+  color: var(--color-primary);
+}
+
+
+.typography-module_display--black__8hmsx,
+.typography-module_header--black__M3I14,
+.typography-module_subtitle--black__IQRSo,
+.typography-module_bodycopy--black__J8BNP,
+.typography-module_overline--black__RUDoj,
+.typography-module_buttontext--black__irjmz,
+.typography-module_captiontext--black__7axhP,
+.typography-module_navigationtext--black__wDz-G {
+  color: var(--color-base-black);
+}
+
+.typography-module_display--white__3QA6W,
+.typography-module_header--white__mm-ex,
+.typography-module_subtitle--white__VzQ3K,
+.typography-module_bodycopy--white__NJ8J8,
+.typography-module_overline--white__cV5QV,
+.typography-module_buttontext--white__rrr8U,
+.typography-module_captiontext--white__OMFwW,
+.typography-module_navigationtext--white__5YDdY {
+  color: var(--color-base-white);
+}
+
+.typography-module_display--red__khdLJ,
+.typography-module_header--red__hxuj9,
+.typography-module_subtitle--red__gSK7d,
+.typography-module_bodycopy--red__P5Mau,
+.typography-module_overline--red__OW5dE,
+.typography-module_buttontext--red__mlRi2,
+.typography-module_captiontext--red__jMQIK,
+.typography-module_navigationtext--red__-QADV {
+  color: var(--color-primary-red);
+}
+
+.typography-module_display--grey__RsgTf,
+.typography-module_header--grey__rC0vN,
+.typography-module_subtitle--grey__1nkEx,
+.typography-module_bodycopy--grey__SNnaU,
+.typography-module_overline--grey__lGOsK,
+.typography-module_buttontext--grey__1Y4oX,
+.typography-module_captiontext--grey__V0MLc,
+.typography-module_navigationtext--grey__xi3sz {
+  color: var(--color-base-dark-grey);
+}
+
+.typography-module_display--inherit__ZNOHM,
+.typography-module_header--inherit__qmHQE,
+.typography-module_subtitle--inherit__mly-X, 
+.typography-module_bodycopy--inherit__CoC-f,
+.typography-module_overline--inherit__Cq4ni,
+.typography-module_buttontext--inherit__vguWx,
+.typography-module_captiontext--inherit__ya6gm,
+.typography-module_navigationtext--inherit__cJLWf {
+  color: inherit;
+}
+
+/* Typography variants */
+.typography-module_display--serif__C0-Ve,
+.typography-module_header--serif__uTGCc {
+  font-family: var(--font-family-serif);
+}
+
+.typography-module_display--em__h2bPV,
+.typography-module_header--em__UFQIA {
+  font-family: var(--font-family-serif);
+  font-style: italic;
+}
+
+.typography-module_display--bold__PG-8g,
+.typography-module_header--bold__InvJk,
+.typography-module_subtitle--bold__Subov,
+.typography-module_bodycopy--bold__nZX3C,
+.typography-module_overline--bold__3mUXy,
+.typography-module_buttontext--bold__rBKIJ,
+.typography-module_captiontext--bold__ebTyV,
+.typography-module_navigationtext--bold__SRlV2 {
+  font-weight: 700;
+}
+
+/* Media queries */
+@media (max-width: 699px) {
+  .typography-module_display--large__RwPQD {
+    font-size: 38px;
+    letter-spacing: -1.5px;
+  }
+
+  .typography-module_display--small__XWUSJ {
+    font-size: 32px;
+    letter-spacing: -1.5px;
+  }
+
+  .typography-module_header--large__2vP3p {
+    font-size: 28px;
+    line-height: 34px;
+    letter-spacing: -1.5px;
+  }
+
+  .typography-module_header--medium__OgzlB {
+    font-size: 24px;
+    line-height: 28px;
+    letter-spacing: -1px;
+  }
+
+  .typography-module_header--small__zLuFf {
+    font-size: 20px;
+    line-height: 26px;
+    letter-spacing: -0.75px;
+  }
+
+  .typography-module_subtitle--large__1Ep9J {
+    font-size: 20px;
+    line-height: 28px;
+  }
+  
+  .typography-module_subtitle--medium__8FxeU {
+    font-size: 17px;
+    line-height: 24px;
+  }
+  
+  .typography-module_bodycopy--large__BNzf2 {
+    font-size: 17px;
+    line-height: 24px;
+  }
+}
 @font-face {
   font-family: 'GreyLLTT';
   src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');

package/dist/harmonic.cjs.development.js

@@ -365,16 +365,39 @@ function _taggedTemplateLiteralLoose(e, t) {
 }
 
 // Utility function for creating className strings
-var createClassNames = function createClassNames(baseClass, options) {
-  var size = options.size,
-    _options$color = options.color,
-    color = _options$color === void 0 ? 'primary' : _options$color,
-    serif = options.serif,
-    em = options.em,
-    className = options.className;
-  return [baseClass, size, "color-" + color, serif ? 'serif' : '', em ? 'em' : '', className || ''].filter(Boolean).join(' ');
+var createClassNames = function createClassNames(baseClass, options, styles) {
+  var classes = [];
+  // Base class
+  if (styles[baseClass]) {
+    classes.push(styles[baseClass]);
+  }
+  // Size modifier
+  if (options.size && styles[baseClass + "--" + options.size]) {
+    classes.push(styles[baseClass + "--" + options.size]);
+  }
+  // Color modifier
+  if (options.color && styles[baseClass + "--" + options.color]) {
+    classes.push(styles[baseClass + "--" + options.color]);
+  }
+  // Typography variants
+  if (options.serif && styles[baseClass + "--serif"]) {
+    classes.push(styles[baseClass + "--serif"]);
+  }
+  if (options.em && styles[baseClass + "--em"]) {
+    classes.push(styles[baseClass + "--em"]);
+  }
+  if (options.bold && styles[baseClass + "--bold"]) {
+    classes.push(styles[baseClass + "--bold"]);
+  }
+  // External className (not from CSS modules)
+  if (options.className) {
+    classes.push(options.className);
+  }
+  return classes.filter(Boolean).join(' ');
 };
 
+var styles = {"display":"typography-module_display__ZHsz9","header":"typography-module_header__FVsLI","subtitle":"typography-module_subtitle__x3sSn","bodycopy":"typography-module_bodycopy__-BY2U","overline":"typography-module_overline__y1yCC","buttontext":"typography-module_buttontext__Gp0W-","captiontext":"typography-module_captiontext__zyA--","navigationtext":"typography-module_navigationtext__Qj6Zw","display--large":"typography-module_display--large__RwPQD","display--small":"typography-module_display--small__XWUSJ","header--large":"typography-module_header--large__2vP3p","header--medium":"typography-module_header--medium__OgzlB","header--small":"typography-module_header--small__zLuFf","subtitle--large":"typography-module_subtitle--large__1Ep9J","subtitle--medium":"typography-module_subtitle--medium__8FxeU","subtitle--small":"typography-module_subtitle--small__Vt9bZ","bodycopy--large":"typography-module_bodycopy--large__BNzf2","bodycopy--medium":"typography-module_bodycopy--medium__cwJEu","bodycopy--small":"typography-module_bodycopy--small__fTLSM","overline--large":"typography-module_overline--large__79WUM","overline--medium":"typography-module_overline--medium__Y5z3w","overline--small":"typography-module_overline--small__MGEG6","display--primary":"typography-module_display--primary__9sTwU","header--primary":"typography-module_header--primary__KF0PJ","subtitle--primary":"typography-module_subtitle--primary__yL-hS","bodycopy--primary":"typography-module_bodycopy--primary__5Uo2D","overline--primary":"typography-module_overline--primary__a2NSa","buttontext--primary":"typography-module_buttontext--primary__HnmE3","captiontext--primary":"typography-module_captiontext--primary__mmafI","navigationtext--primary":"typography-module_navigationtext--primary__vIsUl","display--black":"typography-module_display--black__8hmsx","header--black":"typography-module_header--black__M3I14","subtitle--black":"typography-module_subtitle--black__IQRSo","bodycopy--black":"typography-module_bodycopy--black__J8BNP","overline--black":"typography-module_overline--black__RUDoj","buttontext--black":"typography-module_buttontext--black__irjmz","captiontext--black":"typography-module_captiontext--black__7axhP","navigationtext--black":"typography-module_navigationtext--black__wDz-G","display--white":"typography-module_display--white__3QA6W","header--white":"typography-module_header--white__mm-ex","subtitle--white":"typography-module_subtitle--white__VzQ3K","bodycopy--white":"typography-module_bodycopy--white__NJ8J8","overline--white":"typography-module_overline--white__cV5QV","buttontext--white":"typography-module_buttontext--white__rrr8U","captiontext--white":"typography-module_captiontext--white__OMFwW","navigationtext--white":"typography-module_navigationtext--white__5YDdY","display--red":"typography-module_display--red__khdLJ","header--red":"typography-module_header--red__hxuj9","subtitle--red":"typography-module_subtitle--red__gSK7d","bodycopy--red":"typography-module_bodycopy--red__P5Mau","overline--red":"typography-module_overline--red__OW5dE","buttontext--red":"typography-module_buttontext--red__mlRi2","captiontext--red":"typography-module_captiontext--red__jMQIK","navigationtext--red":"typography-module_navigationtext--red__-QADV","display--grey":"typography-module_display--grey__RsgTf","header--grey":"typography-module_header--grey__rC0vN","subtitle--grey":"typography-module_subtitle--grey__1nkEx","bodycopy--grey":"typography-module_bodycopy--grey__SNnaU","overline--grey":"typography-module_overline--grey__lGOsK","buttontext--grey":"typography-module_buttontext--grey__1Y4oX","captiontext--grey":"typography-module_captiontext--grey__V0MLc","navigationtext--grey":"typography-module_navigationtext--grey__xi3sz","display--inherit":"typography-module_display--inherit__ZNOHM","header--inherit":"typography-module_header--inherit__qmHQE","subtitle--inherit":"typography-module_subtitle--inherit__mly-X","bodycopy--inherit":"typography-module_bodycopy--inherit__CoC-f","overline--inherit":"typography-module_overline--inherit__Cq4ni","buttontext--inherit":"typography-module_buttontext--inherit__vguWx","captiontext--inherit":"typography-module_captiontext--inherit__ya6gm","navigationtext--inherit":"typography-module_navigationtext--inherit__cJLWf","display--serif":"typography-module_display--serif__C0-Ve","header--serif":"typography-module_header--serif__uTGCc","display--em":"typography-module_display--em__h2bPV","header--em":"typography-module_header--em__UFQIA","display--bold":"typography-module_display--bold__PG-8g","header--bold":"typography-module_header--bold__InvJk","subtitle--bold":"typography-module_subtitle--bold__Subov","bodycopy--bold":"typography-module_bodycopy--bold__nZX3C","overline--bold":"typography-module_overline--bold__3mUXy","buttontext--bold":"typography-module_buttontext--bold__rBKIJ","captiontext--bold":"typography-module_captiontext--bold__ebTyV","navigationtext--bold":"typography-module_navigationtext--bold__SRlV2"};
+
 var _excluded = ["children", "size", "color", "className"],
   _excluded2 = ["children", "size", "color", "className"];
 /* ~~~ Headers - size and hierarchy set separately ~~~ */
@@ -393,7 +416,7 @@ var HarmonicHeader = function HarmonicHeader(_ref2) {
     serif: serif,
     em: em,
     className: className
-  });
+  }, styles);
   return /*#__PURE__*/React__default.createElement(Tag, {
     className: classNames
   }, children);
@@ -409,7 +432,7 @@ var HarmonicSubtitle = function HarmonicSubtitle(_ref3) {
     size: size,
     color: color,
     className: className
-  });
+  }, styles);
   return /*#__PURE__*/React__default.createElement("p", {
     className: classNames
   }, children);
@@ -427,7 +450,7 @@ var BodyCopyHarmonic = function BodyCopyHarmonic(_ref4) {
     size: size,
     color: color,
     className: className
-  });
+  }, styles);
   return /*#__PURE__*/React__default.createElement("p", Object.assign({
     className: classNames
   }, props), children);
@@ -444,11 +467,51 @@ var HarmonicOverline = function HarmonicOverline(_ref5) {
     size: size,
     color: color,
     className: className
-  });
+  }, styles);
   return /*#__PURE__*/React__default.createElement("p", Object.assign({
     className: classNames
   }, props), children);
 };
+/* ~~~ Other - (might relocate these) ~~~ */
+var ButtonText = function ButtonText(_ref6) {
+  var children = _ref6.children,
+    _ref6$color = _ref6.color,
+    color = _ref6$color === void 0 ? 'primary' : _ref6$color,
+    className = _ref6.className;
+  var classNames = createClassNames('buttontext', {
+    color: color,
+    className: className
+  }, styles);
+  return /*#__PURE__*/React__default.createElement("p", {
+    className: classNames
+  }, children);
+};
+var Caption = function Caption(_ref7) {
+  var children = _ref7.children,
+    _ref7$color = _ref7.color,
+    color = _ref7$color === void 0 ? 'primary' : _ref7$color,
+    className = _ref7.className;
+  var classNames = createClassNames('captiontext', {
+    color: color,
+    className: className
+  }, styles);
+  return /*#__PURE__*/React__default.createElement("p", {
+    className: classNames
+  }, children);
+};
+var NavigationText = function NavigationText(_ref8) {
+  var children = _ref8.children,
+    _ref8$color = _ref8.color,
+    color = _ref8$color === void 0 ? 'primary' : _ref8$color,
+    className = _ref8.className;
+  var classNames = createClassNames('navigationtext', {
+    color: color,
+    className: className
+  }, styles);
+  return /*#__PURE__*/React__default.createElement("p", {
+    className: classNames
+  }, children);
+};
 
 // eslint-disable-next-line no-shadow
 (function (Colors) {
@@ -10177,8 +10240,8 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
   var imageToLeft = _ref4.imageToLeft;
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
-var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n\n  @media ", " {\n    margin-bottom: 24px;\n  }\n"])), devices.mobile);
-var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  overflow-wrap: break-word;\n  margin-bottom: 16px;\n"])));
+var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 32px;\n\n  @media ", " {\n    padding-bottom: 24px;\n  }\n"])), devices.mobile);
+var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-wrap: break-word;\n  margin-bottom: 16px;\n"])));
 var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  margin-bottom: 32px;\n  whiete-space: break-spaces;\n  overflow-wrap: break-word;\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: var(--color-primary-black);\n    }\n\n    &:visited {\n      color: var(--color-base-dark-grey);\n    }\n\n    &:hover {\n      color: var(--color-primary-red);\n    }\n  }\n  @media ", " {\n    margin-bottom: 24px;\n  }\n"])), devices.mobile);
 var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 32px;\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref5) {
   var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
@@ -13459,7 +13522,10 @@ exports.AnchorTabBar = AnchorTabBar;
 exports.AnnouncementBanner = AnnouncementBanner;
 exports.AuxiliaryButton = AuxiliaryButton;
 exports.AuxiliaryNav = AuxiliaryNav;
+exports.BodyCopyHarmonic = BodyCopyHarmonic;
 exports.BodyText = BodyText;
+exports.ButtonText = ButtonText;
+exports.Caption = Caption;
 exports.Card = Card;
 exports.Cards = Cards;
 exports.Carousel = Carousel;
@@ -13473,7 +13539,10 @@ exports.Footer = Footer;
 exports.GlobalStyles = GlobalStyles;
 exports.Grid = Grid;
 exports.GridItem = GridItem;
+exports.HarmonicHeader = HarmonicHeader;
+exports.HarmonicOverline = HarmonicOverline;
 exports.HarmonicSize = HarmonicSize;
+exports.HarmonicSubtitle = HarmonicSubtitle;
 exports.HarmonicThemeProvider = HarmonicThemeProvider;
 exports.Header = Header;
 exports.HighlightsCarousel = HighlightsCarousel;
@@ -13488,6 +13557,7 @@ exports.MiniCard = MiniCard;
 exports.MinimalCarousel = MinimalCarousel;
 exports.ModalWindow = ModalWindow;
 exports.Navigation = Navigation;
+exports.NavigationText = NavigationText;
 exports.Overline = Overline;
 exports.PageHeadingCinema = PageHeadingCinema;
 exports.PageHeadingCompact = PageHeadingCompact;