@royaloperahouse/harmonic 0.19.2-a → 0.19.2-c

package/dist/types/editorial.d.ts

@@ -1,278 +0,0 @@
-import { AnchorHTMLAttributes, ImgHTMLAttributes, MouseEventHandler, ReactElement, ReactNode } from 'react';
-import { StyledProps } from 'styled-components';
-import { ButtonType } from './buttonTypes';
-import { DirectionType, IconNameType } from './iconTypes';
-import { IVideoWithControlsSettings, ThemeColor, ThemeType } from './types';
-import { HarmonicSize, HeaderHierarchy } 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>;
-    /** Custom CSS classes */
-    className?: string;
-}
-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
-     */
-    textColor?: ThemeColor;
-    /**
-     * background color
-     */
-    backgroundColor?: ThemeColor;
-    /**
-     * Border color
-     */
-    borderColor?: ThemeColor;
-    /**
-     * Hovered color
-     */
-    hoveredColor?: ThemeColor;
-    /**
-     * Pressed color
-     */
-    pressedColor?: ThemeColor;
-    /**
-     * 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 declare type PromoTitleSize = Exclude<HarmonicSize, 'small'>;
-export declare type PromoTitleHierarchy = Exclude<HeaderHierarchy, 'H1'>;
-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?: PromoTitleSize;
-    /**
-     * 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 promo title header - h2 or h3.
-     */
-    titleHierarchy: PromoTitleHierarchy;
-    /**
-     * Additional CSS class names to apply to component.
-     */
-    className?: string;
-}
-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;
-    /**
-     * Header Hierarchy for the title. Default is h1.
-     */
-    hierarchy: HeaderHierarchy;
-    /**
-     * Class name for theme styling
-     */
-    className?: string;
-    /**
-     * Show Cinema / Stream badge
-     */
-    showBadge?: boolean;
-    /**
-     * Theme for badge
-     */
-    theme: ThemeType;
-}
-export interface IPageHeadingProps extends IThemePageHeadingProps {
-    /**
-     * Logo to be placed in page heading component
-     */
-    children?: ReactNode;
-}
-export interface IImpactWrappersStyledProps extends StyledProps<{
-    bgUrlDesktop: string;
-    bgUrlDevice?: string;
-}> {
-    /**
-     * 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 semantic header level for the component
-     */
-    headerSemanticLevel?: HeaderHierarchy;
-    /**
-     * The component's class name
-     */
-    className?: string;
-}
-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?: ThemeColor;
-    /**
-     * Reference of the div to scroll to when clicking on Scroll Down
-     */
-    scrollTo?: string;
-}
-export {};

package/dist/types/footer.d.ts

@@ -1,33 +0,0 @@
-import { CommonLink, ExternalLink, PolicyLink, SocialMediaLink } from './links';
-export declare type Newsletter = {
-    text: string;
-    link: CommonLink;
-};
-export declare type FooterData = {
-    policyLinks: PolicyLink[];
-    socialMediaLinks: SocialMediaLink[];
-    newsletter: Newsletter;
-    contact: CommonLink;
-    artsLogo: ExternalLink;
-    additionalInfo: string;
-    sponsorImageSource?: string;
-};
-export interface IFooterProps {
-    data: FooterData;
-    className?: string;
-}
-export interface IPolicyLinksProps {
-    items: PolicyLink[];
-}
-export interface IContactNewsletterProps {
-    signUpText: string;
-    signUpLink: CommonLink;
-    socialMediaLinks: SocialMediaLink[];
-    contact: CommonLink;
-}
-export interface PolicyLinksProps {
-    items: PolicyLink[];
-}
-export interface SocialLinksProps {
-    items: SocialMediaLink[];
-}

package/dist/types/formTypes.d.ts

@@ -1,325 +0,0 @@
-import { InputHTMLAttributes } from 'react';
-import Select from 'react-select';
-import SelectAsync from 'react-select/async';
-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 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

@@ -1,39 +0,0 @@
-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;
-}