@royaloperahouse/chord 0.1.0

package/dist/styles/viewports.d.ts

@@ -0,0 +1,13 @@
+export declare const breakpoints: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+};
+export declare const devices: {
+    mobile: string;
+    tablet: string;
+    mobileAndTablet: string;
+    desktop: string;
+    largeDesktop: string;
+};

package/dist/types/buttonTypes.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode, AnchorHTMLAttributes, MouseEventHandler } from 'react';
+import { IconNameType, DirectionType } from './iconTypes';
+import { Colors } from './types';
+export interface IButtonProps 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;
+}
+export interface IPrimaryButtonProps extends IButtonProps {
+    /**
+     * Button background color
+     */
+    bgColor?: Colors;
+}
+export interface ITertiaryButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Color of text and icon
+     */
+    color?: Colors;
+    /**
+     * Function to be called when a button is clicked
+     */
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    children: ReactNode;
+}

package/dist/types/editorial.d.ts

@@ -0,0 +1,80 @@
+import { AnchorHTMLAttributes, MouseEventHandler, ReactElement } from 'react';
+import { DirectionType, IconNameType } from './iconTypes';
+import { Colors } from './types';
+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;
+}
+export declare type PromoWithTitleLink = 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 PromoLinks = [PromoWithTitleLink, PromoWithTitleLink?];
+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 or component to be displayed in the editorial component with aspect ratio 4:3
+     */
+    children: ReactElement<HTMLImageElement>;
+    /**
+     * Array of buttons props. First one should have PrimaryButton attributes, second one Tertiary button attributes
+     */
+    links?: PromoLinks;
+}

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/iconTypes.d.ts

@@ -0,0 +1,33 @@
+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;
+}
+export interface IconSVGProps {
+    color?: 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;
+}

package/dist/types/image.d.ts

@@ -0,0 +1,12 @@
+export declare enum AspectRatio {
+    '1:1' = "1 / 1",
+    '3:4' = "3 / 4",
+    '4:3' = "4 / 3",
+    '16:9' = "16 / 9"
+}
+export interface IImageAspectRatioWrapperProps {
+    /**
+     * Aspect ratio of the contained image
+     */
+    aspectRatio?: AspectRatio;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+import { FooterData } from './footer';
+import { ThemeType } from './types';
+import { INavigationProps, INavTopProps } from './navigation';
+export { FooterData, INavigationProps, INavTopProps, ThemeType };

package/dist/types/navigation.d.ts

@@ -0,0 +1,141 @@
+import { MouseEvent } from 'react';
+import { IconNameType } from './iconTypes';
+import { 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 linknk of the title
+     */
+    titleLink?: string;
+}
+export interface IBasketProps {
+    /**
+     * The value of the text
+     */
+    text?: string;
+    /**
+     * To keep selected the text of the Basket
+     */
+    selected?: boolean;
+    /**
+     * The number of items of the Basket
+     */
+    numItems?: number;
+    /**
+     * Function to be called when is clicked
+     */
+    onClick?: (e: string) => void;
+}
+export interface ISearchProps {
+    /**
+     * To keep selected the text of the Basket
+     */
+    selected?: boolean;
+    /**
+     * Function to be called when is clicked
+     */
+    onClick?: (e: MouseEvent) => void;
+}
+export interface INavTopProps {
+    children?: ReactNode;
+    /**
+     * The text of Account component
+     */
+    accountText?: string;
+    /**
+     * The icon of Account component
+     */
+    accountIcon?: IconNameType;
+    /**
+     * The options of Account component
+     */
+    accountOptions?: IOptionItem[];
+    /**
+     * The text of Basket component
+     */
+    basketText?: string;
+    /**
+     * The number of items of Basket component
+     */
+    basketNumItems?: number;
+    /**
+     * To know if search component is showed or not
+     */
+    isShowSearch?: boolean;
+    /**
+     * Function to be called when Search component is clicked
+     */
+    onClickSearch?: (e: MouseEvent) => void;
+    /**
+     * Function to be called when is clicked
+     */
+    onLink?: (e: string) => void;
+}
+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 {
+    /**
+     * 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;
+}
+export interface ISearchBarProps {
+    /**
+     * Function to be called when is clicked
+     */
+    onClick: (e: string) => void;
+    /**
+     * Function to be called when is closed
+     */
+    onClose: () => void;
+    /**
+     * Function to be called when is changed the data of the search
+     */
+    onChange: (e: boolean) => void;
+}

package/dist/types/types.d.ts

@@ -0,0 +1,256 @@
+import { ReactNode, AnchorHTMLAttributes, MouseEventHandler } from 'react';
+import { StyledProps } from 'styled-components';
+import { IconNameType, DirectionType } from './iconTypes';
+export declare enum HeadingLevel {
+    H1 = 1,
+    H2 = 2,
+    H3 = 3,
+    H4 = 4,
+    H5 = 5,
+    H6 = 6
+}
+export declare enum Colors {
+    White = "white",
+    Black = "black",
+    DarkGrey = "darkgrey",
+    MidGrey = "midgrey",
+    LightGrey = "lightgrey",
+    Trasparent = "transparent",
+    ErrorState = "errorstate",
+    MediumState = "mediumstate",
+    GoodState = "goodstate",
+    Primary = "primary"
+}
+export interface IHeadingProps {
+    level: HeadingLevel;
+    children: ReactNode;
+}
+export interface IHeadingWrapperProps extends StyledProps<any> {
+    level: HeadingLevel;
+}
+export declare enum ThemeType {
+    Core = "core",
+    Stream = "stream",
+    Cinema = "cinema"
+}
+export interface IThemeProviderProps {
+    /**
+     * The theme to use for the child elements
+     */
+    theme: ThemeType;
+    children: ReactNode;
+}
+export interface ILogoProps {
+    /**
+     * The id value
+     */
+    id?: string;
+    /**
+     * The data-roh value
+     */
+    dataRoh?: string;
+    /**
+     * The anchor of the logo
+     */
+    anchor?: string;
+}
+export interface IOptionItem {
+    /**
+     * The text of the option
+     */
+    option: string;
+    /**
+     * The link of the option
+     */
+    optionLink: string;
+}
+export interface ITabProps {
+    children?: ReactNode;
+    /**
+     * The value of the title
+     */
+    title?: string;
+    /**
+     * The link of the title
+     */
+    titleLink?: string;
+    /**
+     * To keep selected the title of the Tab
+     */
+    selected?: boolean;
+    /**
+     * The name of the icon
+     */
+    iconName?: IconNameType;
+    /**
+     * If options are available in mobile devices
+     */
+    withOptionsInMobile?: boolean;
+    /**
+     * The orientation of the icon
+     */
+    withIcon?: 'right' | 'left' | 'none';
+    /**
+     * If show text in mobile devices
+     */
+    withTextInMobile?: boolean;
+    /**
+     * Function to be called when click
+     */
+    onClick?: (e: string) => void;
+}
+export interface ITabsProps {
+    /**
+     * An Array with Dropdown components
+     */
+    items?: IDropdownProps[];
+    /**
+     * Function to be called when click on showmenu
+     */
+    onShowMenu?: (e: boolean) => void;
+    /**
+     * Show menu in mobile devices
+     */
+    showMenu?: boolean;
+    /**
+     * Function to be called when click
+     */
+    onChange?: (e: string) => void;
+}
+export interface IDropdownProps {
+    /**
+     * The value of the title
+     */
+    title?: string;
+    /**
+     * The orientation of the icon
+     */
+    withIcon?: 'right' | 'left' | 'none';
+    /**
+     * The link of the title
+     */
+    titleLink?: string;
+    /**
+     * To keep selected the title of the Dropdown
+     */
+    selected?: boolean;
+    /**
+     * An Array with the options in the Dropdown
+     */
+    options?: IOptionItem[];
+    /**
+     * The name of the icon
+     */
+    iconName?: IconNameType;
+    /**
+     * Set if the behaviour of Dropdown change in mobile devices
+     */
+    isMobileBehaviour?: boolean;
+    /**
+     * If options are available in mobile devices
+     */
+    withOptionsInMobile?: boolean;
+    /**
+     * Function to be called when click
+     */
+    onChange?: (e: string) => void;
+}
+export interface IIndividualListing {
+    role: string;
+    name: string;
+    link?: string;
+    dataROH?: string;
+}
+export interface IPeopleListing {
+    people: IIndividualListing[];
+}
+export interface INodeProps {
+    /**
+     * The current object of Node
+     */
+    current: any;
+}
+export interface IGridItemProps extends StyledProps<any> {
+    /**
+     * The column in which to place the child elements
+     */
+    columnStartDesktop: number;
+    /**
+     * The number of columns over which the child elements will span
+     */
+    columnSpanDesktop?: number;
+    /**
+     * The column in which to place the child elements in mobile devices
+     */
+    columnStartDevice: number;
+    /**
+     * The number of columns over which the child elements will span in mobile devices
+     */
+    columnSpanDevice?: number;
+}
+export interface ISponsorshipProps {
+    /**
+     * Source URL for Sponsorship IFRAME.
+     */
+    src?: string;
+    /**
+     * Used for Analytics.
+     */
+    dataRoh?: string;
+    /**
+     * Used for Accessibility.
+     */
+    title?: string;
+}
+export interface ITextLinkProps 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;
+}
+export interface ISectionSplitterProps {
+    /**
+     * Set the width of the Section to full
+     */
+    fullWidth?: boolean;
+}
+export interface ITypeTagsProps {
+    /**
+     * List of Type Tags to display.
+     */
+    list: string[];
+}
+export interface ITextOnlyProps {
+    /**
+     * Text placed in the TextOnly component
+     */
+    text: string;
+}
+export declare type SectionTitleSize = 'small' | 'large';
+export interface ISectionTitleProps {
+    /**
+     * Title to display.
+     */
+    title: string;
+    /**
+     * Size of title to display - by default small, which renders as an H2 (and large is an H1).
+     */
+    size?: SectionTitleSize;
+    /**
+     * Optional description that can be rendered below the title.
+     */
+    description?: string;
+}