@royaloperahouse/harmonic 1.0.1-c → 1.0.1-d

package/dist/types/image.d.ts

@@ -0,0 +1,72 @@
+import React from 'react';
+export declare enum AspectRatio {
+    '1:1' = "1 / 1",
+    '3:4' = "3 / 4",
+    '4:3' = "4 / 3",
+    '8:3' = "8 / 3",
+    '16:9' = "16 / 9",
+    '90:17' = "90 / 17",
+    '75:32' = "75 / 32"
+}
+export declare enum AspectRatioLegacy {
+    '1 / 1' = "100",
+    '3 / 4' = "133",
+    '4 / 3' = "75",
+    '8 / 3' = "37.5",
+    '16 / 9' = "56.25",
+    '90 / 17' = "18.88",
+    '75 / 32' = "15"
+}
+export declare enum AspectRatioWidth {
+    '1 / 1' = "1",
+    '3 / 4' = "0.75",
+    '4 / 3' = "1.33",
+    '8 / 3' = "2.67",
+    '16 / 9' = "1.78",
+    '90 / 17' = "5.29",
+    '75 / 32' = "2.34"
+}
+export interface IImageAspectRatioWrapperProps {
+    /**
+     * Aspect ratio of the contained image
+     */
+    aspectRatio?: AspectRatio;
+    /**
+     * Alternative text describing the image content for accessibility purposes.
+     */
+    alt?: string;
+}
+export interface IImageWithCaptionProps {
+    /** Aspect ratio of the contained image */
+    aspectRatio?: AspectRatio;
+    /** Image caption or credit */
+    caption: string;
+    /** Alternative text describing the image content for accessibility purposes. */
+    altText?: string;
+    /** Image source */
+    src: string;
+    /** Optional srcSet for responsive images */
+    srcSet?: string;
+    /** Optional sizes for responsive images */
+    sizes?: string;
+    /** Optional loading strategy */
+    loading?: 'lazy' | 'eager';
+    /** Custom CSS classes */
+    className?: string;
+}
+export interface IImageWithCaptionWrapperProps {
+    /**
+     * Aspect ratio of the contained image
+     */
+    aspectRatio?: AspectRatio;
+    /**
+     * Height of the wrapper
+     */
+    height?: number;
+}
+export interface ImageAspectRatioWrapperProps extends IImageAspectRatioWrapperProps, React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Image elements
+     */
+    children: React.ReactNode;
+}

package/dist/types/impactHeader.d.ts

@@ -0,0 +1,192 @@
+import { ImgHTMLAttributes, ReactNode } from 'react';
+import { EditorialLink, ThemeColor } from '../types';
+import { HeaderHierarchy, TypographyLevel } from './typography';
+export interface CustomSponsorImageData {
+    /**
+     * Source URL for Sponsorship logo
+     */
+    src: string;
+    /**
+     * Alt Text for image.
+     */
+    altText?: string;
+    /**
+     * Used for Analytics.
+     */
+    dataRoh: string;
+    /**
+     * Used for Accessibility.
+     */
+    title: string;
+}
+export interface IPageHeadingImpactProps {
+    /** Text placed in the impact component */
+    text?: string;
+    /**  Link placed in the impact component */
+    link?: EditorialLink;
+    /** Boolean to show/hide sponsorship logo (default true) */
+    sponsor?: boolean;
+    /** Data for custom sponsor */
+    customSponsorImage?: CustomSponsorImageData;
+    /**  Background url for desktops */
+    bgUrlDesktop: string;
+    /**  Background url for devices */
+    bgUrlDevice?: string;
+    /** Alt text for the main image */
+    bgImageAltText?: string;
+    /** Desktop video url */
+    videoUrlDesktop?: string;
+    /** Mobile video url */
+    videoUrlMobile?: string;
+    /** Logo to be placed in page heading component */
+    children?: ReactNode;
+    /** Custom CSS classes */
+    className?: string;
+}
+export declare type BrandingStyle = 'BlockText' | 'BodyText' | 'StreamLogo' | 'CinemaLogo' | 'TextLink';
+export interface IPageHeadingCompactProps {
+    /**
+     * Text placed in the impact component
+     */
+    title?: string;
+    /**
+     * Render title as small for long titles
+     */
+    smallTitle?: boolean;
+    /**
+     * Link placed in the impact component
+     */
+    link?: EditorialLink;
+    /**
+     * Boolean to show/hide sponsorship logo (default true)
+     */
+    sponsor?: boolean;
+    /**
+     * Data for custom sponsor
+     */
+    customSponsorImage?: CustomSponsorImageData;
+    /**
+     * Background url for desktops
+     */
+    bgUrlDesktop: string;
+    /**
+     * Background url for devices
+     */
+    bgUrlDevice?: string;
+    /**
+     * Alt text for the main image
+     */
+    bgImageAltText?: string;
+    /**
+     * Logo or Text to be placed in page heading component
+     * @type {string}
+     */
+    brandingStyle: BrandingStyle;
+    /**
+     * Link for the TextLink branding style option
+     */
+    brandingLink?: string;
+    /**
+     * Text to be placed in the branding section - BlockText, BodyText, or TextLink
+     */
+    brandingText?: string;
+    /**
+     * Flag whether to show inverted colors
+     * @default false
+     * @type {boolean}
+     * */
+    invert?: boolean;
+    /**
+     * Desktop video url
+     * @type {string}
+     * */
+    videoUrlDesktop?: string;
+    /**
+     * Mobile video url
+     * @type {string}
+     * */
+    videoUrlMobile?: string;
+    /**
+     * If true, shows the copy section (title, CTAs etc.). If false, only the video banner is visible. True by default.
+     */
+    showCopy?: boolean;
+    /**
+     * Semantic level of the header
+     */
+    semanticLevel?: TypographyLevel;
+}
+export declare type PageHeadingPromoImageProps = {
+    /**
+     * Image url for desktops
+     */
+    desktop: string;
+    /**
+     * Image url for devices
+     */
+    mobile: string;
+    /**
+     * Alt text for the main image
+     */
+    alt: string;
+    /**
+     * Screen size indicator
+     */
+    isMobile?: boolean;
+};
+export declare enum PageHeadingPromoBadge {
+    Stream = "Stream",
+    Cinema = "Cinema"
+}
+export declare type PageHeadingPromoAdditionalLink = EditorialLink & {
+    isTextLink?: boolean;
+};
+export interface IPageHeadingPromoProps {
+    /**
+     * Title text
+     */
+    title?: string;
+    /**
+     * Semantic level of the header
+     */
+    titleSemanticLevel?: HeaderHierarchy;
+    /**
+     * Boolean to show/hide sponsorship logo (default true)
+     */
+    sponsor?: boolean;
+    /**
+     * Link placed in the impact component
+     */
+    mainLink?: EditorialLink;
+    /**
+     * Link placed in the impact component
+     */
+    additionalLink?: PageHeadingPromoAdditionalLink;
+    /**
+     * Heading image
+     */
+    image: PageHeadingPromoImageProps;
+    /**
+     * Badge variant
+     */
+    badge?: PageHeadingPromoBadge;
+    /** Custom CSS classes */
+    className?: string;
+}
+export interface IPageHeadingHighlightProps {
+    /**
+     * Image to display in the right hand panel, aspect ratio 4:3
+     */
+    image: ImgHTMLAttributes<HTMLImageElement>;
+    /**
+     * Optional change to background color
+     */
+    background?: ThemeColor;
+    /**
+     * The component(s) to be wrapped in the page header
+     */
+    children: ReactNode;
+    /**
+     * Custom CSS classes
+     */
+    className?: string;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,16 @@
+import type { FooterData } from './footer';
+import { Colors, ThemeType, ThemeColor } from './types';
+import { INavigationProps, INavTopProps } from './navigation';
+import { CarouselType } from './carousel';
+import { IconNameType } from './iconTypes';
+import { AspectRatio } from './image';
+import { TickboxMode } from './tickbox';
+import { ButtonType } from './buttonTypes';
+import { EditorialLink } from './editorial';
+import { IPageHeadingCompactProps } from './impactHeader';
+import { IntegratedTimerProps, ITimerProps } from './timer';
+import { ICreditListing } from './creditListing';
+import { ModalWindowProps } from './modalWindow';
+import { IInformationTitleProps, IInformationCTAProps } from './information';
+export { AspectRatio, ButtonType, CarouselType, Colors, EditorialLink, IconNameType, ICreditListing, IPageHeadingCompactProps, INavigationProps, INavTopProps, IntegratedTimerProps, ITimerProps, ModalWindowProps, TickboxMode, ThemeColor, ThemeType, IInformationTitleProps, IInformationCTAProps, };
+export type { FooterData };

package/dist/types/information.d.ts

@@ -0,0 +1,48 @@
+import { DirectionType, IconNameType } from './iconTypes';
+import { LinkTarget, ThemeType } from './types';
+import type { HarmonicSize } from './typography';
+export declare const InformationCtaVariants: {
+    readonly Primary: "Primary";
+    readonly Secondary: "Secondary";
+    readonly Tertiary: "Tertiary";
+    readonly TextLink: "TextLink";
+};
+export declare type InformationCtaVariant = keyof typeof InformationCtaVariants;
+export interface IInformationCTAProps {
+    /** Text to display on the CTA */
+    text: string;
+    /** Link for the CTA */
+    link: string;
+    /** Style of the CTA */
+    variant?: InformationCtaVariant;
+    /** Name of the icon to be used in the button */
+    iconName?: IconNameType;
+    /** Direction of the icon used in the button */
+    iconDirection?: DirectionType;
+    /** Attribute to specify where to open the link */
+    target?: LinkTarget;
+    /** Custom CSS classes */
+    className?: string;
+}
+export declare type InformationCTAWrapperProps = {
+    /** Style of the CTA */
+    variant: InformationCtaVariant;
+    /** Theme options */
+    theme?: ThemeType;
+};
+export interface IInformationTitleProps {
+    /** Title text to display */
+    text: string;
+    /** The size of the title text */
+    textSize: HarmonicSize;
+}
+export interface IInformationProps {
+    /**  Main body text to display in the Information Component */
+    body: string;
+    /** Optional CTA to display underneath the body text */
+    cta?: IInformationCTAProps;
+    /** Title options for the component */
+    title?: IInformationTitleProps;
+    /** Custom CSS classes */
+    className?: string;
+}

package/dist/types/links.d.ts

@@ -0,0 +1,17 @@
+import { IconNameType } from './iconTypes';
+export declare type CommonLink = {
+    href: string;
+    title: string;
+    dataRoh: string;
+};
+export declare type PolicyLink = CommonLink & {
+    name: string;
+};
+export declare type SocialMediaLink = {
+    dataRoh: string;
+    name: IconNameType;
+    href: string;
+};
+export declare type ExternalLink = CommonLink & {
+    target?: string;
+};

package/dist/types/miniCard.d.ts

@@ -0,0 +1,27 @@
+import { IconNameType } from './iconTypes';
+export interface IMiniCardProps {
+    /**
+     * Title placed in the component
+     */
+    title: string;
+    /**
+     * Subtitle placed in the component
+     */
+    subtitle?: string;
+    /**
+     * Image to render
+     */
+    image: string;
+    /**
+     * Image alt text
+     */
+    imageAltText: string;
+    /**
+     * An icon to be rendered in the middle of the image
+     */
+    iconName?: IconNameType;
+    /**
+     * A color for the icon
+     */
+    iconColor?: string;
+}

package/dist/types/modalWindow.d.ts

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react';
+import Modal from 'react-modal';
+export interface ModalWindowProps extends Modal.Props {
+    /**
+     * Boolean indicating if the modal is open.
+     */
+    isOpen: boolean;
+    /**
+     * Function to set the open state of the modal.
+     */
+    setIsOpen: (isOpen: boolean) => void;
+    /**
+     * Content to be displayed within the modal.
+     */
+    children: ReactElement;
+    /**
+     * ID of the app element to assist with accessibility.
+     */
+    appElementId?: string;
+}