@royaloperahouse/harmonic 0.1.7-d → 0.1.8-a

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

@@ -4,8 +4,8 @@ import './styles.css';
 export declare const DisplayHeader: ({ children, size, em, color, serif, className }: IGenericTypographyProps) => React.JSX.Element;
 export declare const HarmonicHeader: ({ children, size, em, color, serif, hierarchy: Tag, className, }: IHarmonicHeaderProps) => React.JSX.Element;
 export declare const HarmonicSubtitle: ({ children, size, color, className }: IGenericTypographyProps) => React.JSX.Element;
-export declare const BodyCopyHarmonic: ({ children, size, color, className }: IGenericTypographyProps) => React.JSX.Element;
-export declare const HarmonicOverline: ({ children, size, color, className }: IGenericTypographyProps) => React.JSX.Element;
+export declare const BodyCopyHarmonic: ({ children, size, color, className, ...props }: IGenericTypographyProps) => React.JSX.Element;
+export declare const HarmonicOverline: ({ children, size, color, className, ...props }: IGenericTypographyProps) => React.JSX.Element;
 export declare const ButtonText: ({ children, color, className }: IGenericTypographyProps) => React.JSX.Element;
 export declare const Caption: ({ children, color, className }: IGenericTypographyProps) => React.JSX.Element;
 export declare const NavigationText: ({ children, color, className }: IGenericTypographyProps) => React.JSX.Element;

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

@@ -0,0 +1,7 @@
+export declare const createClassNames: (baseClass: string, options: {
+    size?: string;
+    color?: string;
+    serif?: boolean;
+    em?: boolean;
+    className?: string;
+}) => string;

package/dist/components/atoms/Buttons/Secondary/utils.d.ts

@@ -9,5 +9,4 @@ export declare const COLORS: {
     readonly pressed: "var(--button-secondary-pressed-color)";
 };
 export declare const getTextColor: ({ disabled, textColor }: SecondaryButtonProps) => string;
-export declare const getBackgroundColor: ({ disabled }: SecondaryButtonProps) => string;
 export declare const getBorderColor: ({ disabled, borderColor }: SecondaryButtonProps) => string;

package/dist/components/atoms/Buttons/Tertiary/utils.d.ts

@@ -5,4 +5,4 @@ export declare const COLORS: {
     readonly hover: "var(--button-tertiary-hover-color)";
     readonly pressed: "var(--button-tertiary-pressed-color)";
 };
-export declare const getButtonColor: ({ disabled, textColor }: TertiaryButtonProps) => string;
+export declare const getTextColor: ({ disabled, textColor }: TertiaryButtonProps) => string;

package/dist/components/atoms/Buttons/index.d.ts

@@ -1,4 +1,4 @@
 import PrimaryButton from './Primary/PrimaryButton';
 import SecondaryButton from './Secondary/SecondaryButton';
 import TertiaryButton from './Tertiary/TertiaryButton';
-export { SecondaryButton, PrimaryButton, TertiaryButton };
+export { PrimaryButton, SecondaryButton, TertiaryButton };

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

@@ -1,3 +1,10 @@
+import { BannerVariant } from '../../../types/types';
 export declare const AnnouncementBannerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SvgContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SvgContainer: import("styled-components").StyledComponent<"div", any, {
+    isClickable?: boolean | undefined;
+}, never>;
 export declare const ContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const OverlineWrapper: import("styled-components").StyledComponent<({ children, size, color, className, ...props }: import("../../../types/typography").IGenericTypographyProps<HTMLParagraphElement>) => import("react").JSX.Element, any, {}, never>;
+export declare const BannerContentWrapper: import("styled-components").StyledComponent<"div", any, import("../../../types/types").IGridItemProps & {
+    variant: BannerVariant;
+}, never>;

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

@@ -1,5 +1,5 @@
 import { ICardButtonContainerProps, ICardContentContainerProps } from '../../../types/card';
-import { Colors } from '../../..';
+import { Colors } from '../../../types/types';
 export declare const CardContainer: import("styled-components").StyledComponent<"div", any, {
     onlyShowButtonsOnHover: boolean;
     isCardClickable: boolean;

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

@@ -1,13 +1,7 @@
-import { IInformationBackgroundColour, IInformationCtaVariant } from '../../../types/information';
-export declare const InfoContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+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: IInformationCtaVariant;
-    infoThemed: boolean;
-}, never>;
-export declare const InfoWrapper: import("styled-components").StyledComponent<"div", any, {
-    background: IInformationBackgroundColour;
-}, never>;
-export declare const InfoBodyWrapper: import("styled-components").StyledComponent<"div", any, {
-    background: IInformationBackgroundColour;
+    variant: InformationCtaVariant;
 }, 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

@@ -0,0 +1,10 @@
+import type { InformationCtaVariant } from '../../../types/information';
+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;

package/dist/harmonic.cjs.development.css

@@ -19,6 +19,10 @@
   color: var(--color-base-dark-grey);
 }
 
+.styles_color-inherit__Y12df {
+  color: inherit;
+}
+
 .styles_em__v4FoO {
   font-style: italic;
 }
@@ -313,7 +317,6 @@
   }
 }
 
-
 @font-face {
   font-family: 'GreyLLTT';
   src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');
@@ -340,7 +343,8 @@
 
 @font-face {
   font-family: 'VictorSerif';
-  src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2') format('woff2');
+  src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')
+    format('woff2');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
@@ -348,13 +352,15 @@
 
 @font-face {
   font-family: 'VictorSerif';
-  src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2') format('woff2');
+  src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')
+    format('woff2');
   font-weight: 500;
   font-style: italic;
   font-display: swap;
 }
 
 .core-theme-module_coreTheme__pWxYB {
+  /* RBO Red */
   /* Primary Palette */
   --color-primary: #1a1a1a;
   --color-primary-red: #eb0a0a;
@@ -629,6 +635,18 @@
   --harmonic-text-link-underline-offset: 6px;
   --harmonic-font-size-navigation: 19px;
 
+  --announcement-banner-color: var(--color-base-white);
+  --announcement-banner-bg-color: var(--color-primary-red);
+  --announcement-banner-hover-color: var(--color-white-hovered);
+  --announcement-banner-pressed-color: var(--color-white-pressed);
+
+  --information-panel-color: var(--color-base-white);
+  --information-panel-bg-color: var(--color-primary-red);
+  --information-panel-button-color: var(--color-primary-black);
+  --information-panel-button-bg-color: var(--color-base-white);
+  --information-panel-button-hover-color: var(--color-white-hovered);
+  --information-panel-button-pressed-color: var(--color-white-pressed);
+
   @media (max-width: 699px) {
     --font-size-header-1: 38px;
     --font-weight-header-1: 500;
@@ -789,7 +807,7 @@
 }
 
 .stream-theme-module_streamTheme__lTfqQ {
-  /* Stream theme overrides */
+  /* RBO Black */
   --base-color-primary: #1866dc;
   --color-primary: #1866dc;
   --color-primary-button: #1866dc;
@@ -806,18 +824,26 @@
   --button-secondary-color: var(--color-primary-black);
   --button-secondary-hover-color: var(--color-black-hovered);
   --button-secondary-pressed-color: var(--color-black-pressed);
-  --button-tertiary-color: var(--color-primary-red);
-  --button-tertiary-hover-color: var(--color-rbo-red-hovered);
-  --button-tertiary-pressed-color: var(--color-rbo-red-pressed);
+  --button-tertiary-color: var(--color-primary-black);
+  --button-tertiary-hover-color: var(--color-rbo-black-hovered);
+  --button-tertiary-pressed-color: var(--color-rbo-black-pressed);
 
   --rotator-button-color: var(--color-base-white);
   --rotator-button-bg-color: var(--color-base-black);
   --rotator-button-hover-color: var(--color-base-white);
   --rotator-button-hover-bg-color: var(--color-primary-red);
+
+  --announcement-banner-color: var(--color-base-white);
+  --announcement-banner-bg-color: var(--color-primary-black);
+  --announcement-banner-hover-color: var(--color-white-hovered);
+  --announcement-banner-pressed-color: var(--color-white-pressed);
+
+  --information-panel-color: var(--color-base-white);
+  --information-panel-bg-color: var(--color-primary-black);
 }
 
 .cinema-theme-module_cinemaTheme__f5QFs {
-  /* Cinema theme overrides */
+  /* White */
   --base-color-primary: #1a1a1a;
   --color-primary: #1a1a1a;
   --color-primary-button: #ffffff;
@@ -831,10 +857,10 @@
 
   --button-color: var(--color-primary-black);
   --button-bg-color: var(--color-base-white);
-  --button-hover-color: var( --color-white-hovered);
+  --button-hover-color: var(--color-white-hovered);
   --button-pressed-color: var(--color-white-pressed);
   --button-secondary-color: var(--color-base-white);
-  --button-secondary-hover-color: var( --color-white-hovered);
+  --button-secondary-hover-color: var(--color-white-hovered);
   --button-secondary-pressed-color: var(--color-white-pressed);
   --button-tertiary-color: var(--color-base-white);
   --button-tertiary-hover-color: var(--color-white-hovered);
@@ -844,6 +870,18 @@
   --rotator-button-bg-color: var(--color-base-light-grey);
   --rotator-button-hover-color: var(--color-base-white);
   --rotator-button-hover-bg-color: var(--color-primary-black);
+
+  --announcement-banner-color: var(--color-primary-red);
+  --announcement-banner-bg-color: var(--color-base-white);
+  --announcement-banner-hover-color: var(--color-rbo-red-hovered);
+  --announcement-banner-pressed-color: var(--color-rbo-red-pressed);
+
+  --information-panel-color: var(--color-primary-black);
+  --information-panel-bg-color: var(--color-base-white);
+  --information-panel-button-color: var(--color-base-white);
+  --information-panel-button-bg-color: var(--color-primary-red);
+  --information-panel-button-hover-color: var(--color-rbo-red-hovered);
+  --information-panel-button-pressed-color: var(--color-rbo-red-pressed);
 }
 
 .schools-theme-module_schoolsTheme__CWHba {