@royaloperahouse/chord 1.2.0 → 1.2.1-a-chord-development

package/dist/types/formTypes.d.ts

@@ -0,0 +1,328 @@
+import { InputHTMLAttributes } from 'react';
+import { IGridItemProps } from './types';
+import Select from 'react-select';
+import SelectAsync from 'react-select/async';
+export interface ITextAreaProps extends Partial<IGridItemProps>, InputHTMLAttributes<HTMLTextAreaElement> {
+    /**
+     * A text label to be shown above the text area input box.
+     *
+     * Default: `undefined`
+     */
+    label?: string;
+    /**
+     * An error message to be shown below the text area input box.
+     *
+     * Default: `undefined`
+     */
+    error?: string;
+    /**
+     * Width in pixels.
+     *
+     * Default: 100% container width
+     */
+    width?: number;
+    /**
+     * Height in pixels..
+     *
+     * Default: `200px`
+     */
+    height?: number;
+    /**
+     * Specify whether or not the containing element has a dark background.
+     * This property affects the border colours for focused and error states.
+     *
+     * Default: `false`
+     */
+    darkMode?: boolean;
+}
+export declare type ITextFieldType = 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
+export interface ITextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * A text label to be shown above the text input field.
+     */
+    label?: string;
+    /**
+     * An error label to be shown below the text input field.
+     * Input will be rendered with a red border if this prop exist.
+     * Empty string can be passed to render only error state without
+     * error message.
+     */
+    error?: string;
+    /**
+     * Type of text field.
+     * It can be one of: `text`, `email`, `password`,
+     * `number`, `search`, `tel`, `url`.
+     * `password` type adds `Show/Hide` button over the input element.
+     * Any other types don't change the view of the element, just change
+     * accessibility stuff
+     */
+    type?: ITextFieldType;
+    /**
+     * A style prop that allows us to change what colours to
+     * use for light or dark mode (e.g. text color, border color, etc...)
+     * based on the background color.
+     *
+     * Defaults to `false`.
+     */
+    darkMode?: boolean;
+    /**
+     * Width in pixels.
+     * This will limit the maximum width of input element.
+     * By default it will take all available space.
+     */
+    width?: number;
+}
+export interface ITickbox2Props extends InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * The content of tickbox
+     */
+    children: React.ReactNode;
+    /**
+     * An error label to be shown below the tickbox.
+     * Tickbox will be rendered with a red border if this prop exist.
+     * Empty string can be passed to render only error state without
+     * error message.
+     */
+    error?: string;
+    /**
+     * A style prop that allows us to change what colours to
+     * use for light or dark mode (e.g. text color, border color, etc...)
+     * based on the background color.
+     *
+     * Defaults to `false`.
+     */
+    darkMode?: boolean;
+    /**
+     * Use a black background and white checkmark for the tickbox.
+     * This style was used before as a default. Not preferred in new components.
+     *
+     * Defaults to `false`.
+     */
+    blackBox?: boolean;
+}
+export interface IRadio2Props extends InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * The content of radio
+     */
+    children: React.ReactNode;
+    /**
+     * An error label to be shown below the radio.
+     * Radio will be rendered with a red border if this prop exist.
+     * Empty string can be passed to render only error state without
+     * error message.
+     */
+    error?: string;
+    /**
+     * A style prop that allows us to change what colours to
+     * use for light or dark mode (e.g. text color, border color, etc...)
+     * based on the background color.
+     *
+     * Defaults to `false`.
+     */
+    darkMode?: boolean;
+    /**
+     * Use a black background and white checkmark for the radio.
+     * This style was used before as a default. Not preferred in new components.
+     *
+     * Defaults to `false`.
+     */
+    blackBox?: boolean;
+}
+export interface IRadioGroup2Radio {
+    content: React.ReactNode;
+    value: string | number;
+}
+export interface IRadioGroup2Props {
+    /**
+     * Array of radios
+     */
+    radios: IRadioGroup2Radio[];
+    /**
+     * Name property for radios.
+     */
+    name: string;
+    /**
+     * Render radios horizontally.
+     *
+     * Defaults to `false`.
+     */
+    horizontalMode?: boolean;
+    /**
+     * Callback on change of radio.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Value of default checked radio.
+     */
+    defaultValue?: string | number;
+    /**
+     * Distance between radio elements in px.
+     *
+     * Defaults to `30`.
+     */
+    gap?: number;
+    /**
+     * An error label to be shown below the radiogroup.
+     * Radios will be rendered with a red border if this prop exist.
+     * Empty string can be passed to render only error state without
+     * error message.
+     */
+    error?: string;
+    /**
+     * A style prop that allows us to change what colours to
+     * use for light or dark mode (e.g. text color, border color, etc...)
+     * based on the background color.
+     *
+     * Defaults to `false`.
+     */
+    darkMode?: boolean;
+    /**
+     * Use a black background and white checkmark for the radio.
+     * This style was used before as a default. Not preferred in new components.
+     *
+     * Defaults to `false`.
+     */
+    blackBox?: boolean;
+}
+export interface IOption<T> {
+    text: string;
+    readonly value: T;
+}
+export interface ISelectProps<T = unknown> {
+    /** The text label to be shown above the select component. */
+    label: string;
+    /**
+     * The options of the select component.
+     * If not provided OR provided an empty array,
+     * the component will be disabled.
+     */
+    options: readonly IOption<T>[];
+    /**
+     * Function to be ran when an option is selected.
+     */
+    onSelect: (value: IOption<T>['value'], text: IOption<T>['text']) => void;
+    /**
+     * Disables the select component
+     */
+    disabled?: boolean;
+    /**
+     * Style prop - sets the width of the select component in px.
+     */
+    width?: number | 'default';
+    /**
+     * Style prop - sets the height of the select component in px.
+     */
+    height?: number | 'default';
+    /**
+     * Opt-in to resetting the selected value to the first option,
+     * when the options change.
+     * Defaults to `false`;
+     */
+    resetWhenOptionsUpdate?: boolean;
+}
+interface ISelect2MainProps {
+    /**
+     * A text label to be shown above the text input field.
+     */
+    label?: string;
+    /**
+     * An error label to be shown below the text input field.
+     * Input will be rendered with a red border if this prop exist.
+     * Empty string can be passed to render only error state without
+     * error message.
+     */
+    error?: string;
+    /**
+     * Width in pixels.
+     * This will limit the maximum width of input element.
+     * By default it will take all available space.
+     */
+    width?: number;
+    /**
+     * Specify whether or not the containing element has a dark background.
+     * This property affects the border colours for focused and error states.
+     *
+     * Default: `false`
+     */
+    darkMode?: boolean;
+}
+export declare type ISelect2Props = ISelect2MainProps & React.ComponentProps<typeof Select>;
+export declare type ISelect2AsyncProps = ISelect2MainProps & React.ComponentProps<typeof SelectAsync>;
+export interface IStepperProps {
+    /** The initial value to display in the center of the element */
+    initialValue?: number;
+    /**
+     * Function to call when the left, minus button is clicked
+     */
+    minusAction?: () => void;
+    /**
+     * Function to call when the right, plus button is clicked
+     */
+    plusAction?: () => void;
+    /**
+     * Amount to increment and decrement by
+     */
+    step?: number;
+    /** An error message to be shown below the stepper.
+     *
+     */
+    error?: string;
+    /**
+     * Set disapled state
+     */
+    disabled?: boolean;
+    /**
+     * Minimum value allowed in the stepper
+     */
+    min?: number;
+    /**
+     * A style prop that allows us to change what colours to
+     * use for light or dark mode (e.g. text color, border color, etc...)
+     * based on the background color.
+     *
+     * Defaults to `false`.
+     * Specify whether or not the containing element has a dark background.
+     * This property affects the border colours for focused and error states.
+     *
+     * Default: `false`
+     */
+    darkMode?: boolean;
+    /**
+     * Maximum value allowed in the stepper
+     */
+    max?: number;
+    /**
+     * Description of the stepper function for screen readers,
+     * e.g. "Number of tickets"
+     */
+    accessibleName?: string;
+}
+export interface IRadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    /**
+     * A text label to be shown to the right of the radio.
+     *
+     * Default: `undefined`
+     */
+    label?: string;
+    /**
+     * An error message to be shown to the right of the radio button.
+     *
+     * Default: `undefined`
+     */
+    error?: string;
+    /**
+     * Callback on change of radio checked state.
+     */
+    onChange?: (label: string) => void;
+}
+export interface IRadioGroupProps extends Partial<IGridItemProps> {
+    /**
+     * Array of Radio Props
+     */
+    radios?: IRadioProps[];
+    /**
+     * Callback on change of radio group checked state.
+     */
+    onChange?: (checkedRadio: IRadioProps | undefined) => void;
+}
+export {};

package/dist/types/iconTypes.d.ts

@@ -5,9 +5,11 @@ export declare type IconNameType = keyof typeof IconLibrary;
 export interface IIconStyledProps {
     color?: string;
     direction?: DirectionType;
+    ariaLabel?: string;
 }
 export interface IconSVGProps {
     color?: string;
+    ariaLabel?: string;
 }
 export interface IIconProps {
     /**
@@ -30,4 +32,8 @@ export interface IIconProps {
      * Icon to display.
      */
     iconName: IconNameType;
+    /**
+     * Descriptive alt text for Assistive Tech.
+     */
+    ariaLabel?: string;
 }

package/dist/types/image.d.ts

@@ -4,18 +4,21 @@ export declare enum AspectRatio {
     '1:1' = "1 / 1",
     '3:4' = "3 / 4",
     '4:3' = "4 / 3",
+    '3:2' = "3 / 2",
     '16:9' = "16 / 9"
 }
 export declare enum AspectRatioLegacy {
     '1 / 1' = "100",
     '3 / 4' = "133",
     '4 / 3' = "75",
+    '3 / 2' = "66.67",
     '16 / 9' = "56.25"
 }
 export declare enum AspectRatioWidth {
     '1 / 1' = "1",
     '3 / 4' = "0.75",
     '4 / 3' = "1.33",
+    '3 / 2' = "1.5",
     '16 / 9' = "1.78"
 }
 export interface IImageAspectRatioWrapperProps {

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

@@ -5,6 +5,11 @@ import { CarouselType } from './carousel';
 import { IconNameType } from './iconTypes';
 import { AspectRatio } from './image';
 import { TickboxMode } from './tickbox';
-import { ButtonType } from './buttonTypes';
+import { ButtonType, IAuxiliaryButtonProps } from './buttonTypes';
 import { EditorialLink } from './editorial';
-export { AspectRatio, ButtonType, CarouselType, Colors, EditorialLink, FooterData, IconNameType, INavigationProps, INavTopProps, TickboxMode, ThemeType, };
+import { IPageHeadingCompactProps } from './impactHeader';
+import { IntegratedTimerProps, ITimerProps } from './timer';
+import { ICreditListing } from './creditListing';
+import { ModalWindowProps } from './modalWindow';
+import { IInformationTitleProps, IInformationCTAProps, IInformationBackgroundColour } from './information';
+export { AspectRatio, ButtonType, CarouselType, Colors, EditorialLink, FooterData, IconNameType, IAuxiliaryButtonProps, ICreditListing, IPageHeadingCompactProps, INavigationProps, INavTopProps, IntegratedTimerProps, ITimerProps, ModalWindowProps, TickboxMode, ThemeType, IInformationTitleProps, IInformationCTAProps, IInformationBackgroundColour, };

package/dist/types/information.d.ts

@@ -1,27 +1,28 @@
 import { DirectionType, IconNameType } from './iconTypes';
-export declare enum CtaVariant {
+import { LinkTarget } from './types';
+export declare enum IInformationCtaVariant {
     Primary = "Primary",
     Secondary = "Secondary",
     Tertiary = "Tertiary",
     TextLink = "TextLink"
 }
-export declare enum CtaTheme {
+export declare enum IInformationCtaTheme {
     Cinema = "Cinema",
     Core = "Core",
     Stream = "Stream"
 }
-export declare enum TitleVariant {
+export declare enum IInformationTitleVariant {
     Header = "Header",
     AltHeader = "AltHeader"
 }
-export declare enum BackgroundColour {
+export declare enum IInformationBackgroundColour {
     Cinema = "cinema",
     Core = "core",
     Stream = "stream",
     White = "white"
 }
 export declare type TitleTextSize = 3 | 4 | 5 | 6;
-export interface CTAProps {
+export interface IInformationCTAProps {
     /**
      * Text to display on the CTA
      */
@@ -33,11 +34,11 @@ export interface CTAProps {
     /**
      * Style of the CTA. Choices are "Primary" (solid button background), "Secondary" (transparent button background) or "Tertiary" (text only)
      */
-    variant?: CtaVariant;
+    variant?: IInformationCtaVariant;
     /**
      * Theme to use for the CTA. Choices are "Core" (red), "Stream" (blue), or "Cinema" (black)
      */
-    theme?: CtaTheme;
+    theme?: IInformationCtaTheme;
     /**
      * Flag to decide whether to adjust the CTA colours for display on coloured backgrounds
      */
@@ -50,8 +51,12 @@ export interface CTAProps {
      * Direction of the icon used in the button
      */
     iconDirection?: DirectionType;
+    /**
+     * Attribute to specify where to open the link
+     */
+    target?: LinkTarget;
 }
-export interface TitleProps {
+export interface IInformationTitleProps {
     /**
      * Title text to display
      */
@@ -59,7 +64,7 @@ export interface TitleProps {
     /**
      * Title typography type. Choices are Heading or AltHeader
      */
-    variant: TitleVariant;
+    variant: IInformationTitleVariant;
     /**
      * The size of the title text
      */
@@ -73,13 +78,13 @@ export interface IInformationProps {
     /**
      * Optional CTA to display underneath the body text
      */
-    cta?: CTAProps;
+    cta?: IInformationCTAProps;
     /**
      * Title options for the component
      */
-    title: TitleProps;
+    title: IInformationTitleProps;
     /**
      * Background Colour. Choices: None, Core, Cinema, Stream
      */
-    background?: BackgroundColour;
+    background?: IInformationBackgroundColour;
 }

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