@royaloperahouse/harmonic 0.1.8-g → 0.1.8-i

package/dist/components/molecules/Information/Information.style.d.ts

@@ -1,7 +1,4 @@
-import type { InformationCtaVariant } from '../../../types/information';
 export declare const InfoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const InfoTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InfoCTAWrapper: import("styled-components").StyledComponent<"div", any, {
-    variant: InformationCtaVariant;
-}, never>;
+export declare const InfoCTAWrapper: import("styled-components").StyledComponent<"div", any, Pick<import("../../../types/information").IInformationCTAProps, "theme" | "variant">, never>;
 export declare const InfoBodyWrapper: import("styled-components").StyledComponent<({ children, size, color, className, ...props }: import("../../../types/typography").IGenericTypographyProps<HTMLParagraphElement>) => import("react").JSX.Element, any, {}, never>;

package/dist/components/molecules/Information/utils.d.ts

@@ -1,10 +1,11 @@
 import type { InformationCtaVariant } from '../../../types/information';
+import { ThemeType } from '../../../types/types';
 export declare const COLORS: {
     readonly default: "var(--information-panel-button-color)";
     readonly background: "var(--information-panel-button-bg-color)";
     readonly hover: "var(--information-panel-button-hover-color)";
     readonly pressed: "var(--information-panel-button-pressed-color)";
 };
-export declare const getTextColor: (variant: InformationCtaVariant, colorValue: string) => string;
-export declare const getBackgroundColor: (variant: InformationCtaVariant, colorValue: string) => string;
-export declare const getBorderColor: (variant: InformationCtaVariant, colorValue: string) => string;
+export declare const getTextColor: (variant: InformationCtaVariant | undefined, theme: ThemeType, colorValue: string) => string;
+export declare const getBackgroundColor: (variant: InformationCtaVariant | undefined, colorValue: string) => string;
+export declare const getBorderColor: (variant: InformationCtaVariant | undefined, colorValue: string) => string;

package/dist/harmonic.cjs.development.js

@@ -8608,22 +8608,29 @@ var COLORS$4 = {
   hover: 'var(--information-panel-button-hover-color)',
   pressed: 'var(--information-panel-button-pressed-color)'
 };
-var getTextColor$4 = function getTextColor(variant, colorValue) {
-  return variant === InformationCtaVariants.Primary ? COLORS$4["default"] : colorValue;
+var getTextColor$4 = function getTextColor(variant, theme, colorValue) {
+  if (theme === exports.ThemeType.Cinema && (variant === InformationCtaVariants.Tertiary || variant === InformationCtaVariants.TextLink)) {
+    return 'var(--color-primary-black)';
+  }
+  if (variant === InformationCtaVariants.Primary) {
+    return COLORS$4["default"];
+  }
+  return colorValue;
 };
 var getBackgroundColor$2 = function getBackgroundColor(variant, colorValue) {
-  return variant === InformationCtaVariants.Primary ? "background-color: " + colorValue + ";" : '';
+  return variant === InformationCtaVariants.Primary || variant === undefined ? "background-color: " + colorValue + ";" : '';
 };
 var getBorderColor$1 = function getBorderColor(variant, colorValue) {
-  return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary ? "border-color: " + colorValue + ";" : '';
+  return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
 };
 
 var _templateObject$Z, _templateObject2$K, _templateObject3$w, _templateObject4$r;
 var InfoWrapper$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 60px 0;\n  color: var(--information-panel-color);\n  background-color: var(--information-panel-bg-color);\n\n  @media ", " {\n    padding: 40px 0;\n  }\n"])), devices.mobile);
 var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  * {\n    margin-block: 0;\n  }\n"])));
 var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n\n  @media ", " {\n    margin-top: 16px;\n  }\n\n  a {\n    color: ", ";\n    ", "\n    ", "\n\n    svg path {\n      fill: ", ";\n    }\n\n    :hover:not(:active) {\n      color: ", ";\n      ", "\n      ", "\n\n      svg path {\n        fill: ", ";\n      }\n    }\n\n    :active {\n      color: ", ";\n      ", "\n      ", "\n\n      svg path {\n        fill: ", ";\n      }\n    }\n  }\n"])), devices.mobile, function (_ref) {
-  var variant = _ref.variant;
-  return getTextColor$4(variant, COLORS$4.background);
+  var variant = _ref.variant,
+    theme = _ref.theme;
+  return getTextColor$4(variant, theme, COLORS$4.background);
 }, function (_ref2) {
   var variant = _ref2.variant;
   return getBackgroundColor$2(variant, COLORS$4.background);
@@ -8631,11 +8638,13 @@ var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$w || (
   var variant = _ref3.variant;
   return getBorderColor$1(variant, COLORS$4.background);
 }, function (_ref4) {
-  var variant = _ref4.variant;
-  return getTextColor$4(variant, COLORS$4.background);
+  var variant = _ref4.variant,
+    theme = _ref4.theme;
+  return getTextColor$4(variant, theme, COLORS$4.background);
 }, function (_ref5) {
-  var variant = _ref5.variant;
-  return getTextColor$4(variant, COLORS$4.hover);
+  var variant = _ref5.variant,
+    theme = _ref5.theme;
+  return getTextColor$4(variant, theme, COLORS$4.hover);
 }, function (_ref6) {
   var variant = _ref6.variant;
   return getBackgroundColor$2(variant, COLORS$4.hover);
@@ -8643,11 +8652,13 @@ var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$w || (
   var variant = _ref7.variant;
   return getBorderColor$1(variant, COLORS$4.hover);
 }, function (_ref8) {
-  var variant = _ref8.variant;
-  return getTextColor$4(variant, COLORS$4.hover);
+  var variant = _ref8.variant,
+    theme = _ref8.theme;
+  return getTextColor$4(variant, theme, COLORS$4.hover);
 }, function (_ref9) {
-  var variant = _ref9.variant;
-  return getTextColor$4(variant, COLORS$4.pressed);
+  var variant = _ref9.variant,
+    theme = _ref9.theme;
+  return getTextColor$4(variant, theme, COLORS$4.pressed);
 }, function (_ref10) {
   var variant = _ref10.variant;
   return getBackgroundColor$2(variant, COLORS$4.pressed);
@@ -8655,8 +8666,9 @@ var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$w || (
   var variant = _ref11.variant;
   return getBorderColor$1(variant, COLORS$4.pressed);
 }, function (_ref12) {
-  var variant = _ref12.variant;
-  return getTextColor$4(variant, COLORS$4.pressed);
+  var variant = _ref12.variant,
+    theme = _ref12.theme;
+  return getTextColor$4(variant, theme, COLORS$4.pressed);
 });
 var InfoBodyWrapper = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--information-panel-color);\n\n  a {\n    text-decoration: underline;\n    color: var(--information-panel-color);\n  }\n\n  @media ", " {\n    padding-top: 4px;\n  }\n"])), devices.mobile);
 
@@ -8709,9 +8721,11 @@ var InfoCta = function InfoCta(_ref2) {
     iconName = _ref2.iconName,
     iconDirection = _ref2.iconDirection,
     _ref2$target = _ref2.target,
-    target = _ref2$target === void 0 ? LinkTarget.Self : _ref2$target;
+    target = _ref2$target === void 0 ? LinkTarget.Self : _ref2$target,
+    theme = _ref2.theme;
   return /*#__PURE__*/React__default.createElement(InfoCTAWrapper, {
-    variant: variant
+    variant: variant,
+    theme: theme
   }, renderButton({
     variant: variant,
     link: link,
@@ -8736,7 +8750,8 @@ var Information = function Information(_ref) {
   var body = _ref.body,
     title = _ref.title,
     cta = _ref.cta,
-    className = _ref.className;
+    className = _ref.className,
+    theme = _ref.theme;
   var safeTitle = title || {
     text: '',
     textSize: 'medium'
@@ -8774,7 +8789,8 @@ var Information = function Information(_ref) {
     text: cta.text,
     iconName: cta.iconName,
     iconDirection: cta.iconDirection,
-    target: cta.target
+    target: cta.target,
+    theme: theme
   })))));
 };
 
@@ -13255,6 +13271,13 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1p || (
   return theme.footer.tablet.paddingBottom;
 }, devices.desktop, devices.largeDesktop);
 
+/* ~~~~~~~ new harmonic types ~~~~~~~ */
+var HarmonicSizes = {
+  Small: 'small',
+  Medium: 'medium',
+  Large: 'large'
+};
+
 exports.Accordion = Accordion;
 exports.Accordions = Accordions;
 exports.AltHeader = AltHeader;
@@ -13276,6 +13299,7 @@ exports.Footer = Footer;
 exports.GlobalStyles = GlobalStyles;
 exports.Grid = Grid;
 exports.GridItem = GridItem;
+exports.HarmonicSizes = HarmonicSizes;
 exports.HarmonicThemeProvider = HarmonicThemeProvider;
 exports.Header = Header;
 exports.HighlightsCarousel = HighlightsCarousel;