@royaloperahouse/harmonic 1.0.1-c → 1.0.1-d

package/dist/types/types.d.ts

@@ -0,0 +1,800 @@
+import { ReactNode, AnchorHTMLAttributes, MouseEventHandler, ReactElement } from 'react';
+import { StyledProps } from 'styled-components';
+import { IconNameType, DirectionType, IIconProps } from './iconTypes';
+import type { ExternalLink } from './links';
+export declare enum Colors {
+    White = "white",
+    Black = "black",
+    DarkGrey = "darkgrey",
+    MidGrey = "midgrey",
+    LightGrey = "lightgrey",
+    Trasparent = "transparent",
+    ErrorState = "errorstate",
+    MediumState = "mediumstate",
+    GoodState = "goodstate",
+    Primary = "primary",
+    Core = "core",
+    Stream = "stream",
+    Cinema = "cinema"
+}
+export declare const ThemeColor: {
+    readonly primary: "primary";
+    readonly 'primary-red': "primary-red";
+    readonly 'primary-black': "primary-black";
+    readonly 'base-white': "base-white";
+    readonly 'base-black': "base-black";
+    readonly 'base-dark-grey': "base-dark-grey";
+    readonly 'base-mid-grey': "base-mid-grey";
+    readonly 'base-light-grey': "base-light-grey";
+    readonly 'base-transparent': "base-transparent";
+    readonly 'state-error': "state-error";
+    readonly 'state-medium': "state-medium";
+    readonly 'state-good': "state-good";
+    readonly 'state-focused': "state-focused";
+    readonly 'state-disabled': "state-disabled";
+    readonly 'rbo-red-hovered': "rbo-red-hovered";
+    readonly 'rbo-red-pressed': "rbo-red-pressed";
+    readonly 'rbo-black-hovered': "rbo-black-hovered";
+    readonly 'rbo-black-pressed': "rbo-black-pressed";
+    readonly 'black-hovered': "black-hovered";
+    readonly 'black-pressed': "black-pressed";
+    readonly 'white-hovered': "white-hovered";
+    readonly 'white-pressed': "white-pressed";
+    readonly 'secondary-yellow': "secondary-yellow";
+    readonly 'secondary-pink': "secondary-pink";
+    readonly 'secondary-orange': "secondary-orange";
+    readonly 'secondary-blue': "secondary-blue";
+};
+export declare type ThemeColor = keyof typeof ThemeColor;
+export declare enum ThemeType {
+    Core = "core",
+    Stream = "stream",
+    Cinema = "cinema",
+    Schools = "schools"
+}
+export interface IThemeProviderProps {
+    /** The theme to use for the child elements */
+    theme: ThemeType;
+    children: ReactNode;
+}
+export interface ILogoProps {
+    /**
+     * The id value
+     */
+    id?: string;
+    /**
+     * The data-roh value
+     */
+    dataRoh?: string;
+    /**
+     * The link of the logo
+     */
+    urlLink?: string;
+    /**
+     * The image for desktop
+     */
+    desktopImage: string;
+    /**
+     * The image for other devices
+     */
+    devicesImage?: string;
+    /**
+     * The title of the image
+     */
+    title?: string;
+    /**
+     * The title of the image
+     */
+    altText?: string;
+}
+export interface IOptionItem {
+    /**
+     * The text of the option
+     */
+    option: string;
+    /**
+     * The link of the option
+     */
+    optionLink: string;
+}
+export interface ITabProps {
+    children?: ReactNode;
+    /**
+     * The value of the title
+     */
+    title?: string;
+    /**
+     * The link of the title
+     */
+    titleLink?: string;
+    /**
+     * To keep selected the title of the Tab
+     */
+    selected?: boolean;
+    /**
+     * Icon direction
+     */
+    iconDirection?: DirectionType;
+    /**
+     * The name of the icon
+     */
+    iconName?: IconNameType;
+    /**
+     * If options are available in mobile devices
+     */
+    withOptionsInMobile?: boolean;
+    /**
+     * The orientation of the icon
+     */
+    withIcon?: 'right' | 'left' | 'none';
+    /**
+     * If show text in mobile devices
+     */
+    withTextInMobile?: boolean;
+    /**
+     * Function to be called when click
+     */
+    onClick?: (e: string) => void;
+    /**
+     * Function to be called when focus event is fired
+     */
+    onFocus?: () => void;
+    /**
+     * Function to be called when it is needed to back to initial state
+     */
+    onReset?: () => void;
+    /**
+     * Additional CSS class names to apply to the navigation component.
+     */
+    className?: string;
+    /**
+     * The unique ID to assign to the link element.
+     */
+    tabLinkId?: string;
+    /**
+     * Defines the ARIA role of the element for accessibility purposes.
+     */
+    role?: string;
+    /**
+     * Provides an accessible label for screen readers to describe the element's purpose.
+     */
+    ariaLabel?: string;
+    /**
+     * Text color
+     */
+    color?: ThemeColor;
+    /**
+     * Defines if it is needed to trim the text of the Tab and add 3 dots in the end
+     */
+    trimText?: boolean;
+    /**
+     * data-testid string for easier testing
+     */
+    dataTestId?: string;
+    /**
+     * Boolean indicating if the Tab is open.
+     */
+    isOpen?: boolean;
+}
+export interface IDropdownProps {
+    /**
+     * The value of the title
+     */
+    title?: string;
+    /**
+     * The orientation of the icon
+     */
+    withIcon?: 'right' | 'left' | 'none';
+    /**
+     * The link of the title
+     */
+    titleLink?: string;
+    /**
+     * To keep selected the title of the Dropdown
+     */
+    selected?: boolean;
+    /**
+     * An Array with the options in the Dropdown
+     */
+    options?: IOptionItem[];
+    /**
+     * The name of the icon
+     */
+    iconName?: IconNameType;
+    /**
+     * Set if the behaviour of Dropdown change in mobile devices
+     */
+    isMobileBehaviour?: boolean;
+    /**
+     * If options are available in mobile devices
+     */
+    withOptionsInMobile?: boolean;
+    /**
+     * Function to be called when click
+     */
+    onChange?: (e: string) => void;
+    /**
+     * Additional CSS class names to apply to the navigation component.
+     */
+    className?: string;
+    /**
+     * Defines the ARIA role of the element for accessibility purposes.
+     */
+    role?: string;
+    /**
+     * Provides an accessible label for screen readers to describe the element's purpose.
+     */
+    ariaLabel?: string;
+    /**
+     * The unique ID to assign to the link element inside the tab.
+     */
+    tabLinkId?: string;
+    /**
+     * Defines if it is needed to trim the text of the Tab and add 3 dots in the end
+     */
+    trimTabText?: boolean;
+}
+export interface ITabsProps {
+    /**
+     * An Array with Dropdown components
+     */
+    items?: IDropdownProps[];
+    /**
+     * Function to be called when click on showmenu
+     */
+    onShowMenu?: (e: boolean) => void;
+    /**
+     * Show menu in mobile devices
+     */
+    showMenu?: boolean;
+    /**
+     * Function to be called when click
+     */
+    onChange?: (e: string) => void;
+    /**
+     * Additional CSS class names to apply to the navigation component.
+     */
+    className?: string;
+}
+export declare type IDropdowItemProps = StyledProps<AnchorHTMLAttributes<HTMLAnchorElement>>;
+export interface IControlledDropdownProps {
+    /**
+     * Text displayed as heading in the dropdown
+     */
+    text: string;
+    /**
+     * options to display
+     */
+    options?: IOptionItem[];
+    /**
+     * Set if the dropdown is active or not
+     */
+    active?: boolean;
+    /**
+     * Callback called when header is clicked
+     */
+    onClick: () => void;
+    /**
+     * Callback called when an option is clicked
+     */
+    onOptionClick?: (s: string) => void;
+    /**
+     * Mouse enter event handler
+     */
+    onMouseEnter?: () => void;
+    /**
+     * Mouse leave event handler
+     */
+    onMouseLeave?: () => void;
+    /**
+     * Callback called to reset dropdown behaviour
+     */
+    onReset?: () => void;
+    /**
+     * Callback called when main link or option are focused
+     */
+    onFocus?: () => void;
+    /**
+     * Callback called when focus leaves element
+     */
+    onFocusLeave?: () => void;
+    /**
+     * Callback called when main link or last option lose focus
+     */
+    onBlur?: () => void;
+    /**
+     * Additional CSS class names to apply to the navigation component.
+     */
+    className?: string;
+}
+export interface IControlledDropdownHeaderProps extends StyledProps<any> {
+    /**
+     * Set if the dropdown is active or not
+     */
+    active: boolean;
+}
+export declare type ListingPerson = {
+    /**
+     * Person name
+     */
+    name: string;
+    /**
+     * Link to person profile
+     */
+    link?: string;
+    /**
+     * String separator
+     */
+    headshot?: string;
+    /**
+     * Headshot image url
+     */
+    separator?: string;
+    /**
+     * Use headshot or not
+     */
+    useHeadshot: boolean;
+    /**
+     * Replacement text
+     */
+    replacement?: string;
+};
+export declare type ListingRole = {
+    /**
+     * Role name
+     */
+    name: string;
+    /**
+     * List of people in the role
+     */
+    people: ListingPerson[];
+    /**
+     * Data roh param
+     */
+    dataROH?: string;
+};
+export interface IPeopleListing {
+    /** List of roles to be displayed */
+    roles: ListingRole[];
+    /** Custom CSS classes */
+    className?: string;
+    /** Render person headshots in greyscale */
+    greyscale?: boolean;
+    /** Optional number of people per row on large desktop */
+    largeDesktopColumns?: 3 | 4;
+}
+export interface IPagination {
+    /**
+     * The total number of pages
+     */
+    pageCount: 10;
+    /**
+     * The current page
+     */
+    currentPage: 1;
+    /**
+     * The url to base page links on
+     */
+    baseUrl: '/';
+}
+export interface INodeProps {
+    /**
+     * The current object of Node
+     */
+    current: any;
+}
+export interface IGridItemProps extends StyledProps<any> {
+    /**
+     * The column in which to place the child elements
+     */
+    columnStartDesktop: number;
+    /**
+     * The number of columns over which the child elements will span
+     */
+    columnSpanDesktop?: number;
+    /**
+     * The column in which to place the child elements in tablet devices
+     */
+    columnStartDevice: number;
+    /**
+     * The number of columns over which the child elements will span in tablet devices
+     */
+    columnSpanDevice?: number;
+    /**
+     * The column in which to place the child elements in small mobile devices
+     */
+    columnStartSmallDevice?: number;
+    /**
+     * The number of columns over which the child elements will span in small mobile devices
+     */
+    columnSpanSmallDevice?: number;
+}
+export interface ISponsorLogoProps extends ExternalLink {
+    /**
+     * S3 Image source
+     */
+    imageSource?: string;
+    /**
+     * Alternative text for the logo (used for accessibility)
+     */
+    alt?: string;
+    /**
+     * Content to be displayed within the component.
+     */
+    children?: ReactNode;
+    /**
+     * Additional CSS class names to apply to the navigation component.
+     */
+    className?: string;
+}
+export declare type IHotFilterItem = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'aria-label' | 'role'> & {
+    text: string;
+    onClick?: () => void;
+};
+export declare type IHotFilterProps = {
+    items: IHotFilterItem[];
+    className?: string;
+    selectedIndex?: number;
+    onSelect?: (index: number) => void;
+};
+export declare type ICastFilterItem = {
+    /**
+     * Name of the cast member shown below the image circle. Required.
+     */
+    name: string;
+    /**
+     * Image source for the image to be shown. Optional but if not included an unaesthetic placeholder will show.
+     */
+    image?: string;
+    /**
+     * Optional accessible name for the option. If omitted, `name` is used.
+     */
+    'aria-label'?: string;
+    /**
+     * Kept for backwards compatibility with existing integrations.
+     * CastFilter always renders option semantics and ignores this value at runtime.
+     */
+    role?: string;
+    onClick?: () => void;
+};
+export declare type ICastFiltersProps = {
+    className?: string;
+    /**
+     * Array of cast to filter by.
+     */
+    cast: ICastFilterItem[];
+    /**
+     * Indices of currently selected cast in the `cast` array.
+     */
+    selectedIndices?: number[];
+    /**
+     * Text shown at the top of the component, e.g. 'Filter by cast'. If this is not provided
+     * the component will render without any.
+     */
+    headingText?: string;
+    /**
+     * Override the text of the primary CTA. Default is 'Apply'.
+     */
+    ctaText?: string;
+    /**
+     * Override the text of the text link. Default is 'Clear'.
+     */
+    textLinkText?: string;
+    /**
+     * Text to show if no selection is made.
+     */
+    emptySelectionText?: string;
+    /**
+     * Default image to show in cases where a cast member image prop is missing.
+     * If this is undefined then a light grey background will be displayed instead.
+     */
+    placeholderImage?: string;
+    /**
+     * Description to be used as aria-roledescription of the cast filter listbox.
+     * Read out by screen readers to describe the contents of the list.
+     */
+    listRoleDescription?: string;
+    /**
+     * Handle selecting individual cast filters.
+     */
+    onSelect?: (index: number) => void;
+    /**
+     * Handle clicking the primary CTA.
+     */
+    onApply?: (indices: number[]) => void;
+    /**
+     * Handle clicking the text link.
+     */
+    onClear?: () => void;
+    /**
+     * Render person images in greyscale
+     */
+    greyscale?: boolean;
+};
+export interface ISponsorshipProps {
+    /**
+     * Source URL for Sponsorship IFRAME.
+     */
+    src?: string;
+    /**
+     * Used for Analytics.
+     */
+    dataRoh?: string;
+    /**
+     * Used for Accessibility.
+     */
+    title?: string;
+}
+export interface ITextLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    children: ReactNode;
+    /**
+     * Function to be called when a button is clicked
+     */
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    /**
+     * Name of the icon to be used in the button
+     */
+    iconName?: IconNameType;
+    /**
+     * Direction of the icon used in the button
+     */
+    iconDirection?: DirectionType;
+    /**
+     * Color of text and icon
+     */
+    textColor?: ThemeColor;
+    /**
+     * Disable default truncation
+     */
+    disableTruncation?: boolean;
+}
+export interface ISectionSplitterProps {
+    /** Set the width of the Section to full */
+    fullWidth?: boolean;
+    /** Custom CSS classes */
+    className?: string;
+}
+export interface ITypeTagsProps {
+    /**
+     * List of Type Tags to display.
+     */
+    list: string[];
+}
+export interface IBodyContentProps {
+    /** Text placed in the BodyContent component */
+    text: string;
+    /** Set columnStart in Desktop */
+    columnStartDesktop?: number;
+    /** Set columnSpan in Desktop */
+    columnSpanDesktop?: number;
+    /** Set columnStart in Device */
+    columnStartDevice?: number;
+    /** Set columnSpan in Device */
+    columnSpanDevice?: number;
+    /** Custom CSS classes */
+    className?: string;
+    /** Set to true to wrap the content in a Grid component */
+    renderGrid?: boolean;
+    /** Set to true to render the GridItem component */
+    renderGridItem?: boolean;
+}
+export declare type SectionTitleSize = 'small' | 'large';
+export interface ISectionTitleProps {
+    /** Title to display. */
+    title: string;
+    /** Size of title to display - by default small, which renders as an H2 (and large is an H1). */
+    size?: SectionTitleSize;
+    /** Optional description that can be rendered below the title. */
+    description?: string;
+    /** Custom CSS classes */
+    className?: string;
+}
+export interface ILogosProps {
+    /**
+     * Color used to fill logos.
+     */
+    fillColor?: Colors.White | Colors.Black;
+    /**
+     * Text aligned logo variants.
+     */
+    align?: 'left' | 'center';
+    /**
+     * Fill color inversion.
+     */
+    invert?: boolean;
+}
+export interface ILogosStyledProps extends StyledProps<any> {
+    /**
+     * Color used to fill logos.
+     */
+    fillColor?: Colors.White | Colors.Black;
+}
+export interface IAccordionProps {
+    /** Title to display. */
+    title?: string;
+    /** The component to be wrapped into the accordion */
+    children?: ReactNode;
+    /** Set if accordions are stacked */
+    showLine?: boolean;
+    /** Set init open */
+    initOpen?: boolean;
+    /** Custom CSS classes */
+    className?: string;
+    /** Harmonic icon name and direction for expanded state. Default is 'Detract' */
+    expandedStateIcon?: IIconProps;
+    /** Harmonic icon name and direction for collapsed state. Default is 'Expand' */
+    collapsedStateIcon?: IIconProps;
+}
+export interface IAccordionsProps {
+    /** Array of Accordion component */
+    items: IAccordionProps[];
+    /** Custom CSS classes */
+    className?: string;
+}
+export declare const BannerVariants: {
+    readonly 'service-persistent': "service-persistent";
+    readonly 'in-page-persistent': "in-page-persistent";
+    readonly 'in-page': "in-page";
+};
+export declare type BannerVariant = keyof typeof BannerVariants;
+export interface IAnnouncementBannerProps {
+    /**
+     * Announcement banner title
+     */
+    title: string;
+    /**
+     * Announcement message text
+     */
+    announcementText: string;
+    /**
+     * Date and time text
+     */
+    time?: string;
+    /**
+     * Icon graphic
+     */
+    icon?: 'Info' | 'Clock' | 'Location' | 'Reminder' | 'Star';
+    /**
+     * Custom CSS classes
+     */
+    className?: string;
+    /**
+     * Banner layout variant
+     */
+    variant?: BannerVariant;
+    /**
+     * Callback function to be executed when the banner is closed.
+     */
+    onClose?: () => void;
+}
+export interface IReadMoreProps {
+    /**
+     * Read More Component title
+     */
+    title?: string;
+    /**
+     * Intro text to be truncated
+     */
+    introText: ReactNode;
+    /**
+     * Component to be wrapped in ReadMore comp
+     */
+    fullText: ReactNode;
+    /**
+     * Set init open
+     */
+    initOpen: boolean;
+    /**
+     * Custom text for link when closed
+     */
+    showMoreText: string;
+    /**
+     * Custom text for link when opened
+     */
+    hideText: string;
+    /**
+     * Character limit
+     */
+    characterLimit?: number;
+    /**
+     * Optional truncation
+     */
+    truncate?: boolean;
+}
+export interface IStatusBannerProps {
+    /**
+     * Status banner text
+     */
+    statusText: string;
+    /**
+     * Set init visibility
+     */
+    visibility: boolean;
+}
+export interface IVideoControlsProps {
+    /**
+     * Video element id
+     */
+    videoElementId: string;
+    /**
+     * Id of an element containing both the VideoControls and the video HTML element
+     * Used to request fullscreen.
+     */
+    videoContainerId?: string;
+    /**
+     * Default muted
+     */
+    muted: boolean;
+    /**
+     * Default playing
+     */
+    autoPlay: boolean;
+    /**
+     * Hide volume
+     */
+    soundControl?: boolean;
+    /**
+     * Hide fullscreen. If false, provide a videoContainerId.
+     */
+    fullScreenOption?: boolean;
+    /**
+     * Loops
+     */
+    loop?: boolean;
+}
+export interface IVideoControlsImpactProps {
+    /** Video element id */
+    videoElementId: string;
+    /** Loops */
+    loop?: boolean;
+}
+export declare type IVideoWithControlsSettings = Omit<IVideoControlsProps, 'videoElementId' | 'videoContainerId'>;
+export interface IVideoWithControlsProps {
+    /**
+     * Video element
+     */
+    video: ReactElement<HTMLVideoElement>;
+    /**
+     * Settings for video controls
+     */
+    settings: IVideoWithControlsSettings;
+}
+export declare type Image = Pick<HTMLImageElement, 'alt' | 'src'>;
+export declare enum LinkTarget {
+    /**
+     * Opens the link in the same frame or tab as the current page.
+     */
+    Self = "_self",
+    /**
+     * Opens the link in a new browser tab or window, depending on the browser settings.
+     */
+    Blank = "_blank"
+}
+export interface ISkipToMainProps {
+    /**
+     * Defines which tag the button should skip to.
+     */
+    skipToId?: string;
+}
+export declare type PaywallProps = {
+    /** Custom CSS classes */
+    className?: string;
+    /** Heading text */
+    title: string;
+    /** Introduction text */
+    intro?: string;
+    /** Body HTML */
+    description: string;
+    /** Function called when CTA clicked */
+    buttonOnClick?: MouseEventHandler<HTMLAnchorElement>;
+    /** CTA text */
+    buttonText: string;
+    /** CTA URL */
+    buttonUrl: string;
+    /** Function called when sign-in link clicked */
+    signInLinkOnClick?: MouseEventHandler<HTMLAnchorElement>;
+    /** Text before sign-in link (required to show sign-in link) */
+    signInPromptText?: string;
+    /** Sign-in link URL (required to show sign-in link) */
+    signInLinkUrl?: string;
+};