@royaloperahouse/harmonic 0.1.0

package/dist/styles/viewports.d.ts

@@ -0,0 +1,16 @@
+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/styles/zIndexes.d.ts

@@ -0,0 +1,4 @@
+declare const zIndexes: {
+    [level: string]: number;
+};
+export default zIndexes;

package/dist/types/auxiliaryNav.d.ts

@@ -0,0 +1,39 @@
+export interface IAuxiliaryNavProps {
+    /**
+     * Menu items
+     */
+    items: IItem[];
+    /**
+     * Item will be marked as active.
+     * Should be equal to text prop from one of the items
+     */
+    activeItem: string;
+    /**
+     * If component should render the mobile view
+     */
+    isMobile?: boolean;
+    /**
+     * aria-label attribute for nav element
+     */
+    ariaLabel?: string;
+}
+export declare type INavProps = Pick<IAuxiliaryNavProps, 'items' | 'activeItem' | 'ariaLabel'>;
+export interface IItem {
+    /**
+     * Item text
+     */
+    text: string;
+    /**
+     * Href for item link
+     */
+    href: string;
+    /**
+     * Item click handler
+     * Default link behavior will be prevented if this specified
+     */
+    onClick?: (e: MouseEvent) => void;
+}
+export interface IItemProps extends IItem {
+    isActive: boolean;
+    isMobile?: boolean;
+}

package/dist/types/buttonTypes.d.ts

@@ -0,0 +1,80 @@
+import { ReactNode, AnchorHTMLAttributes, MouseEventHandler } from 'react';
+import { IconNameType, DirectionType } from './iconTypes';
+import { Colors } from './types';
+export declare enum ButtonType {
+    Primary = "Primary",
+    Secondary = "Secondary",
+    Tertiary = "Tertiary"
+}
+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;
+    /**
+     * ClassName for the icon to be used in the button
+     */
+    iconClassName?: string;
+    /**
+     * Color of text and icon
+     */
+    color?: Colors;
+}
+export interface IPrimaryButtonProps extends IButtonProps {
+    /**
+     * Button background color
+     */
+    bgColor?: Colors;
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+}
+export interface IAuxiliaryButtonProps extends IButtonProps {
+    /**
+     * Button background color
+     */
+    bgColor?: Colors;
+    /**
+     * Function to be called when a button is clicked
+     */
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+}
+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;
+}
+export interface IRotatorButtonsProps {
+    /**
+     * Set available Prev button
+     */
+    availablePrev?: boolean;
+    /**
+     * Set available Next button
+     */
+    availableNext?: boolean;
+    /**
+     * Function to be called when a button is clicked
+     */
+    onClickPrev?: Function;
+    /**
+     * Function to be called when a button is clicked
+     */
+    onClickNext?: Function;
+}

package/dist/types/card.d.ts

@@ -0,0 +1,138 @@
+import { StyledProps } from 'styled-components';
+import { Colors, EditorialLink, 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
+     */
+    progress?: number;
+    /**
+     * Text placed in the Card component
+     */
+    text?: string;
+    /**
+     * Highlighted small text
+     */
+    highlightText?: string;
+    /**
+     * List of Type Tags to display.
+     */
+    tags?: string[];
+    /**
+     * Text placed in the Card component
+     */
+    title?: string;
+    /**
+     * Subtitle placed in the Card component
+     */
+    subtitle?: string;
+    /**
+     * Array of buttons props. First one should have PrimaryButton attributes, second one Tertiary button attributes
+     */
+    links?: PromoLinks;
+    /**
+     * Set the visualization of progress bar
+     */
+    withContinueWatching?: boolean;
+    /**
+     * Image to render
+     */
+    image?: string;
+    /**
+     * Image alt text
+     */
+    imageAltText?: string;
+    /**
+     * Set the size of the Card component
+     */
+    size?: 'small' | 'large';
+    /**
+     * Set if content gets full width (same as image)
+     */
+    fullWidth?: boolean;
+    /**
+     * 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;
+    /**
+     * Renders an auxiliary button when passed
+     */
+    auxiliaryCTA?: EditorialLink;
+}
+export interface ICardContentContainerProps extends StyledProps<any> {
+    /**
+     * Set if content gets full width (same as image)
+     */
+    fullWidth?: boolean;
+}
+export interface ICardsProps {
+    /**
+     * Array of cards
+     */
+    cards: ICardProps[];
+    /**
+     * Set the size of the Cards component
+     */
+    size?: 'small' | 'large';
+}
+export interface ICardButtonContainerProps {
+    /**
+     * Set the size of the Cards component
+     */
+    size: 'small' | 'large';
+    /**
+     * Set the length of primary button text
+     */
+    primaryButtonTextLength: number;
+    /**
+     * Set the length of tertiary button text
+     */
+    tertiaryButtonTextLength: number;
+    /**
+     * 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

@@ -0,0 +1,128 @@
+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",
+    SmallCard = "SmallCard",
+    LargeCard = "LargeCard"
+}
+export interface ICarouselProps {
+    /**
+     * Carousel title
+     */
+    title?: string;
+    /**
+     * Carousel type.
+     */
+    type: CarouselType;
+    /**
+     * Only for image type. It sets the height in pixels of the slides in devices(default 300)
+     */
+    imagesHeightDevice?: number;
+    /**
+     * Only for image type. It sets the height in pixels of the slides in desktop(default 500)
+     */
+    imagesHeightDesktop?: number;
+    /**
+     * 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 {
+    /**
+     * Carousel has been activated or not
+     */
+    active: boolean;
+    /**
+     * Carousel type.
+     */
+    type: CarouselType;
+    /**
+     * Only for image type. It sets the height in pixels of the slides in devices(default 300)
+     */
+    imagesHeightDevice?: number;
+    /**
+     * 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;
+};
+export declare type HighlightsCarouselSlide = {
+    /**
+     * heder in info section
+     */
+    infoTitle: string;
+    /**
+     * Timeframe subtitle in info section
+     */
+    infoTimeframe: string;
+    /**
+     * text subtitle in info section
+     */
+    infoSubtitle?: string;
+    /**
+     * text in info section
+     */
+    infoText?: string;
+    /**
+     * additional info section
+     */
+    additionalInfo?: string;
+    /**
+     * Link in info section
+     */
+    links: EditorialLink[];
+    /**
+     * Slide image
+     */
+    image: HighlightsCarouselSlideImage;
+    /**
+     * Params for Timer component
+     */
+    timerParams?: IntegratedTimerProps;
+};
+export interface IHighlightsCarouselProps {
+    /**
+     * Carousel title
+     */
+    carouselTitle?: string;
+    /**
+     * Logo element
+     */
+    logo?: ReactElement<ILogosProps> | null;
+    /**
+     * slides to be displayed in the carousel
+     */
+    slides: HighlightsCarouselSlide[];
+}
+export interface IHighlightsCoreCarouselProps extends Omit<IHighlightsCarouselProps, 'logo'> {
+}
+export interface IHighlightsCinemaCarouselProps extends Omit<IHighlightsCarouselProps, 'logo'> {
+    /**
+     * Renders logo or not
+     */
+    logo: boolean;
+}
+export interface IHighlightsStreamCarouselProps extends Omit<IHighlightsCarouselProps, 'logo'> {
+    /**
+     * Renders logo or not
+     */
+    logo: boolean;
+}

package/dist/types/contactCard.d.ts

@@ -0,0 +1,45 @@
+import { StyledProps } from 'styled-components';
+export interface IContactCardProps {
+    /**
+     * Name
+     */
+    name: string;
+    /**
+     * Description
+     */
+    description?: string;
+    /**
+     * Email
+     */
+    email?: string;
+    /**
+     * Phone number
+     */
+    phone?: string;
+    /**
+     * Website
+     */
+    website?: string;
+    /**
+     * Address string
+     */
+    address?: string;
+    /**
+     * Set visibility of the top border
+     */
+    hideTopBorder?: boolean;
+    /**
+     * Set visibility of the top border
+     */
+    hideBottomBorder?: boolean;
+}
+export interface IContactCardWrapperProps extends StyledProps<any> {
+    /**
+     * Set visibility of the top border
+     */
+    hideTopBorder: boolean;
+    /**
+     * Set visibility of the bottom border
+     */
+    hideBottomBorder: boolean;
+}

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