@royaloperahouse/harmonic 0.1.0

package/dist/types/impactHeader.d.ts

@@ -0,0 +1,135 @@
+import { ReactNode } from 'react';
+import { EditorialLink } from '../types';
+import { TypographyLevel } from './typography';
+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;
+    /**
+     * Logo to be placed in page heading component
+     */
+    children?: ReactNode;
+    /**
+     * Internal anchor ref
+     */
+    scrollHref?: string;
+    /**
+     * Semantic level of the header
+     */
+    semanticLevel?: TypographyLevel;
+}
+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 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;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,14 @@
+import { FooterData } from './footer';
+import { Colors, ThemeType } 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, IAuxiliaryButtonProps } from './buttonTypes';
+import { EditorialLink } from './editorial';
+import { IPageHeadingCompactProps } from './impactHeader';
+import { IntegratedTimerProps, ITimerProps } from './timer';
+import { ICreditListing } from './creditListing';
+import { ModalWindowProps } from './modalWindow';
+export { AspectRatio, ButtonType, CarouselType, Colors, EditorialLink, FooterData, IconNameType, IAuxiliaryButtonProps, ICreditListing, IPageHeadingCompactProps, INavigationProps, INavTopProps, IntegratedTimerProps, ITimerProps, ModalWindowProps, TickboxMode, ThemeType, };

package/dist/types/information.d.ts

@@ -0,0 +1,85 @@
+import { DirectionType, IconNameType } from './iconTypes';
+export declare enum CtaVariant {
+    Primary = "Primary",
+    Secondary = "Secondary",
+    Tertiary = "Tertiary",
+    TextLink = "TextLink"
+}
+export declare enum CtaTheme {
+    Cinema = "Cinema",
+    Core = "Core",
+    Stream = "Stream"
+}
+export declare enum TitleVariant {
+    Header = "Header",
+    AltHeader = "AltHeader"
+}
+export declare enum BackgroundColour {
+    Cinema = "cinema",
+    Core = "core",
+    Stream = "stream",
+    White = "white"
+}
+export declare type TitleTextSize = 3 | 4 | 5 | 6;
+export interface CTAProps {
+    /**
+     * Text to display on the CTA
+     */
+    text: string;
+    /**
+     * Link for the CTA
+     */
+    link: string;
+    /**
+     * Style of the CTA. Choices are "Primary" (solid button background), "Secondary" (transparent button background) or "Tertiary" (text only)
+     */
+    variant?: CtaVariant;
+    /**
+     * Theme to use for the CTA. Choices are "Core" (red), "Stream" (blue), or "Cinema" (black)
+     */
+    theme?: CtaTheme;
+    /**
+     * Flag to decide whether to adjust the CTA colours for display on coloured backgrounds
+     */
+    infoThemed: boolean;
+    /**
+     * Name of the icon to be used in the button
+     */
+    iconName?: IconNameType;
+    /**
+     * Direction of the icon used in the button
+     */
+    iconDirection?: DirectionType;
+}
+export interface TitleProps {
+    /**
+     * Title text to display
+     */
+    text: string;
+    /**
+     * Title typography type. Choices are Heading or AltHeader
+     */
+    variant: TitleVariant;
+    /**
+     * The size of the title text
+     */
+    textSize: TitleTextSize;
+}
+export interface IInformationProps {
+    /**
+     * Main body text to display in the Information Component
+     */
+    body: string;
+    /**
+     * Optional CTA to display underneath the body text
+     */
+    cta?: CTAProps;
+    /**
+     * Title options for the component
+     */
+    title: TitleProps;
+    /**
+     * Background Colour. Choices: None, Core, Cinema, Stream
+     */
+    background?: BackgroundColour;
+}

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;
+}

package/dist/types/navigation.d.ts

@@ -0,0 +1,374 @@
+import React, { AnchorHTMLAttributes, MouseEvent, MouseEventHandler } from 'react';
+import { DirectionType, IconNameType } from './iconTypes';
+import { Colors, IOptionItem } from './types';
+import { ReactNode } from 'react';
+export interface IAccountProps {
+    /**
+     * The text of the title
+     */
+    title?: string;
+    /**
+     * An Array of Option components
+     */
+    options?: IOptionItem[];
+    /**
+     * Function to be called when is clicked
+     */
+    onClick?: (e: string) => void;
+    /**
+     * The name of the icon
+     */
+    iconName?: IconNameType;
+    /**
+     * The link of the title
+     */
+    titleLink?: string;
+    /**
+     * The primary color
+     */
+    colorPrimary?: string;
+}
+export interface IBasketProps {
+    /**
+     * The value of the text
+     */
+    text?: string;
+    /**
+     * The unix timestamp when basket items will be released.
+     */
+    expiryTime?: number;
+    /**
+     * The value of the link
+     */
+    link?: string;
+    /**
+     * To keep selected the text of the Basket
+     */
+    selected?: boolean;
+    /**
+     * The number of items of the Basket (eg. Tickets)
+     */
+    numItems?: number;
+    /**
+     * The number of 'virtual' items of the Basket (eg. Stream subscription)
+     * These items remain in the basket after expiryTime is reached
+     */
+    numVirtualItems?: number;
+    /**
+     * Function to be called when is clicked
+     */
+    onClick?: (e: string) => void;
+    /**
+     * The primary color
+     */
+    colorPrimary?: string;
+    /**
+     * For changing the color of the basket icon & text (when not in hover state)
+     */
+    isActive?: boolean;
+}
+export interface ISearchProps {
+    /**
+     * To keep selected the text of the Basket
+     */
+    selected?: boolean;
+    /**
+     * Function to be called when is clicked
+     */
+    onClick?: () => void;
+    /**
+     * The primary color
+     */
+    colorPrimary?: string;
+}
+export interface INavigationWrapperProps {
+    /**
+     * True if menu is open
+     */
+    isMenuOpen?: boolean;
+}
+export interface INavTopProps {
+    children?: ReactNode;
+    /**
+     * The text of Account component
+     */
+    accountText?: string;
+    /**
+     * The link of Account component
+     */
+    accountLink?: string;
+    /**
+     * The icon of Account component
+     */
+    accountIcon?: IconNameType;
+    /**
+     * The options of Account component
+     */
+    accountOptions?: IOptionItem[];
+    /**
+     * The text of Basket component
+     */
+    basketText?: string;
+    /**
+     * The unix timestamp when basket items will be released.
+     */
+    basketExpiryUnixTimestamp?: number;
+    /**
+     * The link of Basket component
+     */
+    basketLink?: string;
+    /**
+     * The number of items of Basket component
+     */
+    basketNumItems?: number;
+    /**
+     * The number of 'virtual' items of the Basket (eg. Stream subscription)
+     * These items remain in the basket after expiryTime is reached
+     */
+    basketNumVirtualItems?: number;
+    /**
+     * For changing the color of the basket icon & text (when not in hover state)
+     */
+    basketIsActive?: boolean;
+    /**
+     * To know if search component is showed or not
+     */
+    isShowSearch?: boolean;
+    /**
+     * Function to be called when Search component is clicked
+     */
+    onClickSearch?: () => void;
+    /**
+     * Function to be called when is clicked
+     */
+    onLink?: (e: string) => void;
+    /**
+     * The primary color
+     */
+    colorPrimary?: string;
+}
+export interface iMenuOptionProps {
+    /**
+     * The text of the title
+     */
+    title: string;
+    /**
+     * An Array of Option components
+     */
+    options: IOptionItem[];
+    /**
+     * The link of the title
+     */
+    titleLink?: string;
+}
+export interface IMenuProps {
+    /**
+     * An Array of menu items
+     */
+    items: iMenuOptionProps[];
+}
+export interface INavigationProps {
+    /**
+     * Link url to Logo component
+     */
+    logoLink?: string;
+    /**
+     * An Object to set NavTop data component
+     */
+    dataNavTop: INavTopProps;
+    /**
+     * Function to be called when is searched
+     */
+    onSearch: (e: string) => void;
+    /**
+     * Function to be called when is clicked
+     */
+    onLink: (e: string) => void;
+    /**
+     * A set of data to make a menu
+     */
+    menuData: IMenuProps;
+    /**
+     * The url for the Desktop version of the logo
+     */
+    desktopLogoUrl: string;
+    /**
+     * The url for the Mobile and Tablet version of the logo
+     */
+    devicesLogoUrl?: string;
+}
+export interface ISearchBarProps {
+    /**
+     * Function to be called when is clicked
+     */
+    onClick: (e: string) => void;
+    /**
+     * Function to be called when is closed
+     */
+    onClose?: (e?: React.MouseEvent) => void;
+}
+export declare type TitleCTALink = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    /**
+     * Text inside the link
+     */
+    text: string;
+    /**
+     * 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
+     */
+    color?: Colors;
+};
+export declare type TitleCTALinks = [TitleCTALink, TitleCTALink?];
+export declare type AnchorBarTab = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    /**
+     * Visible text in a tab
+     */
+    text: string;
+    /**
+     * Tab identifier, used to highlight items when user performs a scroll
+     */
+    id: string;
+    /**
+     * Color of text and icon
+     */
+    color?: Colors;
+};
+export interface IAnchorBarAbsolutePositionParams {
+    /**
+     * Navigation height that we need to calculate AnchorTabBar position properly
+     */
+    navigationHeight: number;
+    /**
+     * Height of the content that is located in place before AnchorTabBar
+     */
+    topOffset: number;
+}
+export interface IAnchorBarProps {
+    /**
+     * Tabs displayed in the anchor bar
+     */
+    tabs: AnchorBarTab[];
+    /**
+     * Function to be called when a tab is clicked
+     */
+    onTabClick?: (e: MouseEvent, id: string) => void;
+    /**
+     * Set the id of the tab actived
+     */
+    activeTab?: string;
+    /**
+     * Only for IOS devices that do not fully support sticky position, in case a keyboard is opened on the device
+     */
+    absolutePositionParams?: IAnchorBarAbsolutePositionParams;
+    /**
+     * Boolean to set bottom border
+     */
+    bottomBorder?: boolean;
+}
+export interface ITitleCTAProps {
+    /**
+     * Array of buttons props. First one should have PrimaryButton attributes, second one Tertiary button attributes
+     */
+    links?: TitleCTALinks;
+    /**
+     * Text placed in the anchor bar component
+     */
+    title?: string;
+    /**
+     * Boolean to determine if is sticky
+     */
+    sticky?: boolean;
+    /**
+     * Text in replacement of links
+     */
+    message?: string;
+}
+export interface ITitleCTAGridItemProps {
+    /**
+     * Text placed in the anchor bar component
+     */
+    title?: string;
+}
+export interface IAnchorTabsListProps {
+    /**
+     * Boolean to determine that the list tab is overflowed
+     */
+    tabsOverflow: boolean;
+    /**
+     * Boolean to determine if there are two arrows displayed
+     */
+    hasTwoArrows: boolean;
+}
+export interface IAnchorTabBarBorderProps {
+    /**
+     * Boolean to set bottom border
+     */
+    bottomBorder: boolean;
+}
+export interface IAnchorTabArrowsBoxProps {
+    /**
+     * Boolean to determine width of the arrows container
+     */
+    fullWidth: boolean;
+}
+export interface ITabLinkProps 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
+     */
+    color?: Colors;
+    /**
+     * Color of text and icon on hover
+     */
+    hoverColor?: Colors;
+    /**
+     * Set if tab is selected or not
+     */
+    selected?: boolean;
+}
+export interface IStickyBarProps {
+    children: ReactNode;
+    /**
+     * Set columnstart in Desktop
+     */
+    columnStartDesktop?: number;
+    /**
+     * Set columnSpan in Desktop
+     */
+    columnSpanDesktop?: number;
+    /**
+     * Set columnstart in Device
+     */
+    columnStartDevice?: number;
+    /**
+     * Set columnSpam in Device
+     */
+    columnSpanDevice?: number;
+    /**
+     * Hide bottom border line
+     */
+    hideBottomBorder?: boolean;
+}

package/dist/types/passwordStrength.d.ts

@@ -0,0 +1,51 @@
+import { Colors } from './types';
+export interface IPasswordStrengthProps {
+    /**
+     * Number of sections to show
+     *
+     * Default: 6
+     */
+    sections?: number;
+    /**
+     * Number of active sections
+     *
+     * Default: 0
+     */
+    activeSections?: number;
+    /**
+     * Color of non-active sections
+     *
+     * Default: Colors.MidGrey
+     */
+    sectionsColor?: Colors;
+    /**
+     * Color of active sections
+     *
+     * Default: Colors.Black
+     */
+    activeSectionsColor?: Colors;
+    /**
+     * Text
+     *
+     * Default: ""
+     */
+    text?: string;
+    /**
+     * Text color
+     *
+     * Default: Colors.Black
+     */
+    textColor?: Colors;
+    /**
+     * Strength label text
+     *
+     * Default: ""
+     */
+    strengthLabel?: string;
+    /**
+     * Strength label text
+     *
+     * Default: Colors.Black
+     */
+    strengthLabelColor?: Colors;
+}