@royaloperahouse/harmonic 0.1.0

package/dist/types/editorial.d.ts

@@ -0,0 +1,255 @@
+import { AnchorHTMLAttributes, ImgHTMLAttributes, MouseEventHandler, ReactElement, ReactNode } from 'react';
+import { StyledProps } from 'styled-components';
+import { ButtonType } from './buttonTypes';
+import { DirectionType, IconNameType } from './iconTypes';
+import { Colors, IVideoWithControlsSettings } from './types';
+import { TypographyLevel } from './typography';
+export interface IEditorialProps {
+    /**
+     * Text placed in the editorial component
+     */
+    text: string;
+    /**
+     * Subtitle placed in the editorial component
+     */
+    subtitle?: string;
+    /**
+     * Position of the image in the editorial component
+     */
+    imagePosition?: 'left' | 'right';
+    /**
+     * Image tag or component to be displayed in the editorial component with aspect ratio 1:1
+     */
+    children: ReactElement<HTMLImageElement>;
+}
+export interface IEditorialGridProps {
+    /**
+     * Sets if the image will be placed in the right (false) or the left (true)
+     */
+    imageToLeft?: boolean;
+    /**
+     * Set the length of primary button text
+     */
+    primaryButtonTextLength?: number;
+    /**
+     * Set the length of tertiary button text
+     */
+    tertiaryButtonTextLength?: number;
+    /**
+     * Indicates if component has block for the text links
+     */
+    hasTextLinks?: boolean;
+    /**
+     * Indicates if component should be hidden
+     */
+    hideSection?: boolean;
+    /**
+     * Modifies styles to fixed height card
+     */
+    asCard?: boolean;
+}
+export declare type EditorialLink = 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;
+    /**
+     * background color
+     */
+    bgColor?: Colors;
+    /**
+     * type of the button to be rendered; When not passed the Primary and Tetriary are displayed by default;
+     */
+    buttonType?: ButtonType;
+};
+export declare type PromoLinks = [EditorialLink, EditorialLink?];
+export interface IPromoWithTitleProps {
+    /**
+     * Text placed in the editorial component
+     */
+    text?: string;
+    /**
+     * Text placed in the editorial component
+     */
+    title: string;
+    /**
+     * Text placed in the editorial component
+     */
+    titleSize?: 'small' | 'large';
+    /**
+     * Subtitle placed in the editorial component
+     */
+    subtitle?: string;
+    /**
+     * Position of the image in the editorial component
+     */
+    imagePosition?: 'left' | 'right';
+    /**
+     * Image tag with aspect ratio 4:3 or video tag with aspect ratio 16:9 (desktop) or 1:1 (mobile)
+     */
+    children: ReactElement<HTMLImageElement | HTMLVideoElement>;
+    /**
+     * Settings for the VideoWithControls component.
+     */
+    videoSettings?: IVideoWithControlsSettings;
+    /**
+     * Array of buttons props. First one should have PrimaryButton attributes, second one Tertiary button attributes
+     */
+    links?: PromoLinks;
+    /**
+     * Semantic level of the title. Default is 2.
+     */
+    titleSemanticLevel?: TypographyLevel;
+}
+export interface IThemePageHeadingProps {
+    /**
+     * Title placed in the page heading component
+     */
+    title: string;
+    /**
+     * Text placed in the page heading component
+     */
+    text?: string;
+    /**
+     * Link placed in the page heading component
+     */
+    link?: EditorialLink;
+    /**
+     * Boolean to show/hide sponsorship logo (default true)
+     */
+    sponsor?: boolean;
+    /**
+     * Semantic level of the title. Default is 1.
+     */
+    semanticLevel?: TypographyLevel;
+    /**
+     * Character limit for the text
+     */
+    copyCharLimit?: number;
+    /**
+     * Character limit for the title
+     */
+    titleCharLimit?: number;
+}
+export interface IPageHeadingProps extends IThemePageHeadingProps {
+    /**
+     * Logo to be placed in page heading component
+     */
+    children?: ReactNode;
+}
+export interface IImpactWrappersStyledProps extends StyledProps<any> {
+    /**
+     * Background url for desktops
+     */
+    bgUrlDesktop: string;
+    /**
+     * Background url for devices
+     */
+    bgUrlDevice?: string;
+}
+export interface IHighlightsHeaderProps {
+    /**
+     * Text placed in the editorial component
+     */
+    title: string;
+    /**
+     * Subtitle placed in the editorial component
+     */
+    subtitle?: string;
+    /**
+     * Text placed in the editorial component
+     */
+    text?: string;
+    /**
+     * Explanation
+     */
+    images?: Array<ImgHTMLAttributes<HTMLImageElement>>;
+}
+export declare type IContentSummaryLink = Omit<EditorialLink, 'buttonType' | 'bgColor' | 'iconName' | 'iconDirection'>;
+interface IContentSummaryImageProps {
+    /**
+     * URL of the content summary image
+     */
+    src: string;
+    /**
+     * Alt text of the content summary image
+     */
+    alt?: string;
+}
+export interface IContentSummaryProps {
+    /**
+     * Title for content summary
+     */
+    title?: string;
+    /**
+     * Subtitle field, used, e.g. for date in News summaries
+     */
+    subtitle?: string;
+    /**
+     * Main text area for content summary item
+     */
+    bodyText?: string;
+    /**
+     * Link object with text for cta, can also have <a> tag attributes href, target etc...
+     */
+    link?: IContentSummaryLink;
+    /**
+     * Image to display in the component with aspect ratio 1.3:1
+     */
+    image?: IContentSummaryImageProps;
+    /**
+     * Show an image to the left of the text or not
+     */
+    showImage?: boolean;
+    /**
+     * Display a larger title for e.g. displaying search results
+     */
+    largeTitle?: boolean;
+    /**
+     * Truncate the body text after the given number of lines
+     */
+    truncate?: number;
+    /**
+     * Option to make the entire component clickable for search results
+     */
+    fullyClickable?: boolean;
+    /**
+     * The base semantic header level for the component: 1 | 2 | 3 | 4 | 5 | 6
+     */
+    baseSemanticLevel?: TypographyLevel;
+}
+export interface IPanelHeadingProps {
+    /**
+     * Content to display in the left hand panel
+     */
+    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;
+    /**
+     * Reference of the div to scroll to when clicking on Scroll Down
+     */
+    scrollTo?: string;
+}
+export {};

package/dist/types/footer.d.ts

@@ -0,0 +1,41 @@
+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;
+};
+export declare type Newsletter = {
+    text: string;
+    link: CommonLink;
+};
+export declare type FooterData = {
+    policyLinks: PolicyLink[];
+    socialMediaLinks: SocialMediaLink[];
+    newsletter: Newsletter;
+    contact: CommonLink;
+    artsLogo: ExternalLink;
+    additionalInfo: string;
+};
+export interface IFooterProps {
+    data: FooterData;
+}
+export interface IPolicyLinksProps {
+    items: PolicyLink[];
+}
+export interface IContactNewsletterProps {
+    signUpText: string;
+    signUpLink: CommonLink;
+    socialMediaLinks: SocialMediaLink[];
+    contact: CommonLink;
+}

package/dist/types/formTypes.d.ts

@@ -0,0 +1,325 @@
+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.
+     *
+     * 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;
+}
+export {};

package/dist/types/iconTypes.d.ts

@@ -0,0 +1,39 @@
+import { Directions } from '../components/atoms/Icons/Icons.style';
+import { IconLibrary } from '../components/atoms/Icons/SvgIcons';
+export declare type DirectionType = keyof typeof Directions;
+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 {
+    /**
+     * Extra CSS className to add to the element.
+     */
+    className?: string;
+    /**
+     * Colour override - for components it is better to use themes instead.
+     */
+    color?: string;
+    /**
+     * Used for accessibility.
+     */
+    title?: string;
+    /**
+     * Direction to use, 'right' by default.
+     */
+    direction?: DirectionType;
+    /**
+     * Icon to display.
+     */
+    iconName: IconNameType;
+    /**
+     * Descriptive alt text for Assistive Tech.
+     */
+    ariaLabel?: string;
+}

package/dist/types/image.d.ts

@@ -0,0 +1,53 @@
+import { ReactElement } from 'react';
+import { StyledProps } from 'styled-components';
+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 {
+    /**
+     * Aspect ratio of the contained image
+     */
+    aspectRatio?: AspectRatio;
+}
+export interface IImageWithCaptionProps {
+    /**
+     * Aspect ratio of the contained image
+     */
+    aspectRatio?: AspectRatio;
+    /**
+     * Image caption or credit
+     */
+    caption: string;
+    /**
+     * Image element
+     */
+    children: ReactElement<HTMLImageElement>;
+}
+export interface IImageWithCaptionWrapperProps extends StyledProps<any> {
+    /**
+     * Aspect ratio of the contained image
+     */
+    aspectRatio?: AspectRatio;
+    /**
+     * Height of the wrapper
+     */
+    height: number;
+}