@royaloperahouse/chord 1.1.0 → 1.2.10

package/dist/styles/viewports.d.ts

@@ -2,12 +2,15 @@ export declare const breakpoints: {
     xs: number;
     sm: number;
     md: number;
+    ml: number;
     lg: number;
 };
 export declare const devices: {
+    smallMobile: string;
     mobile: string;
     tablet: string;
     mobileAndTablet: string;
     desktop: string;
+    smallDesktop: string;
     largeDesktop: string;
 };

package/dist/types/card.d.ts

@@ -1,5 +1,29 @@
 import { StyledProps } from 'styled-components';
+import { Colors, IconNameType } from '.';
 import { PromoLinks } from './editorial';
+import { DirectionType } from './iconTypes';
+export interface CardLabelProps {
+    /**
+     * Label text
+     */
+    text: string;
+    /**
+     * Name of the icon to be used in the label
+     */
+    iconName?: IconNameType;
+    /**
+     * Direction of the icon used in the label
+     */
+    iconDirection?: DirectionType;
+    /**
+     * Icon color
+     */
+    color?: Colors;
+    /**
+     * Background color
+     */
+    bgColor?: Colors;
+}
 export interface ICardProps {
     /**
      * The progress percentage
@@ -49,10 +73,22 @@ export interface ICardProps {
      * Defines if buttons are hidden; True by default;
      */
     onlyShowButtonsOnHover?: boolean;
+    /**
+     * Defines the color for a line that appears on hover
+     */
+    hoverLineColor?: Colors;
     /**
      * A callback to be called when the
      */
     onClick?: VoidFunction;
+    /**
+     * Renders label at the top of the card. E.g. Coming soon
+     */
+    labelParams?: CardLabelProps;
+    /**
+     * Defines if it is Card in the Grid or in the Carousel
+     */
+    isGridCard?: boolean;
 }
 export interface ICardContentContainerProps extends StyledProps<any> {
     /**
@@ -87,4 +123,8 @@ export interface ICardButtonContainerProps {
      * Hides buttons by default using opacity; shows buttons on
      */
     onlyShowButtonsOnHover?: boolean;
+    /**
+     * Set if content gets full width (same as image)
+     */
+    fullWidth?: boolean;
 }

package/dist/types/carousel.d.ts

@@ -2,6 +2,7 @@ import { ImgHTMLAttributes, ReactElement } from 'react';
 import { ICardProps } from './card';
 import { EditorialLink } from './editorial';
 import { IImageWithCaptionProps } from './image';
+import { IntegratedTimerProps } from './timer';
 import { ILogosProps } from './types';
 export declare enum CarouselType {
     Image = "image",
@@ -12,7 +13,7 @@ export interface ICarouselProps {
     /**
      * Carousel title
      */
-    title: string;
+    title?: string;
     /**
      * Carousel type.
      */
@@ -29,6 +30,10 @@ export interface ICarouselProps {
      * Carousel children (only Card and ImageAspectRatioWrapper children are allowed).
      */
     children: ReactElement<ICardProps | IImageWithCaptionProps>[];
+    /**
+     * Defines if there should be offset added at the beginning of the container. True by default;
+     */
+    useOffset?: boolean;
 }
 export interface ICarouselWrapperProps {
     /**
@@ -47,6 +52,14 @@ export interface ICarouselWrapperProps {
      * Only for image type. It sets the height in pixels of the slides in desktop(default 500)
      */
     imagesHeightDesktop?: number;
+    /**
+     * Additional top padding for slides in the carousel
+     */
+    slidesTopPadding?: number;
+    /**
+     * Sets overflow to swiper when specified
+     */
+    overflow?: string;
 }
 export declare type HighlightsCarouselSlideImage = ImgHTMLAttributes<HTMLImageElement> & {
     key: string;
@@ -68,6 +81,10 @@ export declare type HighlightsCarouselSlide = {
      * text in info section
      */
     infoText?: string;
+    /**
+     * additional info section
+     */
+    additionalInfo?: string;
     /**
      * Link in info section
      */
@@ -76,6 +93,10 @@ export declare type HighlightsCarouselSlide = {
      * Slide image
      */
     image: HighlightsCarouselSlideImage;
+    /**
+     * Params for Timer component
+     */
+    timerParams?: IntegratedTimerProps;
 };
 export interface IHighlightsCarouselProps {
     /**

package/dist/types/creditListing.d.ts

@@ -0,0 +1,12 @@
+import { ListingPerson } from './types';
+export interface ICreditListing {
+    roles: {
+        name: string;
+        people: ListingPerson[];
+        description: string;
+        musicTitle: string[];
+        replacement: string;
+        additionalInfo: string;
+        dataROH: string;
+    }[];
+}

package/dist/types/editorial.d.ts

@@ -1,8 +1,9 @@
-import { AnchorHTMLAttributes, MouseEventHandler, ReactElement, ReactNode } from 'react';
+import { AnchorHTMLAttributes, ImgHTMLAttributes, MouseEventHandler, ReactElement, ReactNode } from 'react';
 import { StyledProps } from 'styled-components';
 import { ButtonType } from './buttonTypes';
 import { DirectionType, IconNameType } from './iconTypes';
-import { Colors, Image } from './types';
+import { Colors } from './types';
+import { TypographyLevel } from './typography';
 export interface IEditorialProps {
     /**
      * Text placed in the editorial component
@@ -42,12 +43,10 @@ export interface IEditorialGridProps {
      * Indicates if component should be hidden
      */
     hideSection?: boolean;
-}
-export interface IPromoWithTagsStyledProps {
     /**
-     * Sets margin for the tags container
+     * Modifies styles to fixed height card
      */
-    marginBottom?: number;
+    asCard?: boolean;
 }
 export declare type EditorialLink = AnchorHTMLAttributes<HTMLAnchorElement> & {
     /**
@@ -134,19 +133,7 @@ export interface IPageHeadingProps extends IThemePageHeadingProps {
      */
     children?: ReactNode;
 }
-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;
+export interface IImpactWrappersStyledProps extends StyledProps<any> {
     /**
      * Background url for desktops
      */
@@ -155,77 +142,94 @@ export interface IPageHeadingImpactProps {
      * Background url for devices
      */
     bgUrlDevice?: string;
+}
+export interface IHighlightsHeaderProps {
     /**
-     * Logo to be placed in page heading component
+     * Text placed in the editorial component
      */
-    children?: ReactNode;
+    title: string;
     /**
-     * Internal anchor ref
+     * Subtitle placed in the editorial component
      */
-    scrollHref?: string;
-}
-export interface IImpactWrappersStyledProps extends StyledProps<any> {
+    subtitle?: string;
     /**
-     * Background url for desktops
+     * Text placed in the editorial component
      */
-    bgUrlDesktop: string;
+    text?: string;
     /**
-     * Background url for devices
+     * Explanation
      */
-    bgUrlDevice?: string;
+    images?: Array<ImgHTMLAttributes<HTMLImageElement>>;
 }
-export interface IPromoWithTagsProps {
+export declare type IContentSummaryLink = Omit<EditorialLink, 'buttonType' | 'bgColor' | 'iconName' | 'iconDirection'>;
+interface IContentSummaryImageProps {
     /**
-     * Text placed in the editorial component
+     * URL of the content summary image
      */
-    text?: string;
+    src: string;
     /**
-     * Title placed in the editorial component
+     * Alt text of the content summary image
      */
-    title: string;
+    alt?: string;
+}
+export interface IContentSummaryProps {
     /**
-     * Title size
+     * Title for content summary
      */
-    titleSize?: 'small' | 'large';
+    title?: string;
     /**
-     * Subtitle placed in the editorial component
+     * Subtitle field, used, e.g. for date in News summaries
      */
     subtitle?: string;
     /**
-     * Position of the image in the editorial component
+     * Main text area for content summary item
      */
-    imagePosition?: 'left' | 'right';
+    bodyText?: string;
     /**
-     * Image to be displayed in the editorial component with aspect ratio 4:3
+     * Link object with text for cta, can also have <a> tag attributes href, target etc...
      */
-    image?: Image;
+    link?: IContentSummaryLink;
     /**
-     * Component to be displayed instead of the image after clicking on the button
+     * Image to display in the component with aspect ratio 1.3:1
      */
-    children?: ReactElement<HTMLElement>;
+    image?: IContentSummaryImageProps;
     /**
-     * Array of buttons props. First one should have PrimaryButton attributes, second one Tertiary button attributes
+     * Show an image to the left of the text or not
      */
-    links?: PromoLinks;
+    showImage?: boolean;
     /**
-     * Array of buttons props that will be displayed above the main buttons
+     * Display a larger title for e.g. displaying search results
      */
-    textLinks?: EditorialLink[];
+    largeTitle?: boolean;
     /**
+     * Truncate the body text after the given number of lines
+     */
+    truncate?: number;
     /**
-     * Array of tags in the editorial component
+     * Option to make the entire component clickable for search results
      */
-    aboveTitleTags?: string[];
+    fullyClickable?: boolean;
     /**
-     * Array of tags in the editorial component
+     * The base semantic header level for the component: 1 | 2 | 3 | 4 | 5 | 6
      */
-    belowTitleTags?: string[];
+    baseSemanticLevel?: TypographyLevel;
+}
+export interface IPanelHeadingProps {
     /**
-     * Text in the middle
+     * Content to display in the left hand panel
      */
-    middleText?: string;
+    info: ReactElement<HTMLElement>;
+    /**
+     * Image to display in the right hand panel, aspect ratio 4:3
+     */
+    image?: ImgHTMLAttributes<HTMLImageElement>;
+    /**
+     * Colour of the info panel background
+     */
+    color?: Colors;
     /**
-     * Text in the bottom
+     * Reference of the div to scroll to when clicking on Scroll Down
      */
-    bottomText?: string;
+    scrollTo?: string;
 }
+export {};

package/dist/types/formTypes.d.ts

@@ -0,0 +1,170 @@
+import { InputHTMLAttributes } from 'react';
+import { IGridItemProps } from './types';
+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 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.
+     */
+    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;
+    /**
+     * Width in pixels.
+     *
+     * Default: `196px`
+     *
+     */
+    width?: number;
+}
+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;
+}
+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.
+     *
+     * Default: `undefined`
+     */
+    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;
+    /**
+     * Set disapled state
+     */
+    disabled?: boolean;
+    /**
+     * Minimum value allowed in the stepper
+     */
+    min?: number;
+    /**
+     * 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;
+}

package/dist/types/impactHeader.d.ts

@@ -0,0 +1,122 @@
+import { ReactNode } from 'react';
+import { EditorialLink } from '../types';
+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;
+}
+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;
+}
+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

@@ -7,4 +7,7 @@ import { AspectRatio } from './image';
 import { TickboxMode } from './tickbox';
 import { ButtonType } 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';
+export { AspectRatio, ButtonType, CarouselType, Colors, ICreditListing, EditorialLink, FooterData, IconNameType, IPageHeadingCompactProps, INavigationProps, INavTopProps, IntegratedTimerProps, ITimerProps, TickboxMode, ThemeType, };

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