@royaloperahouse/harmonic 0.1.0 → 0.1.1-b-test

package/dist/helpers/arrays.d.ts

@@ -1,6 +1,2 @@
-export declare const truncateArrayByPropLength: (array: {
-    [key: string]: string;
-}[], prop: string, maxChars: number, elipsis?: boolean) => {
-    [key: string]: string;
-}[];
-export declare const getConcatenatedPropLength: (array: any[], prop: string) => any;
+export declare const getConcatenatedPropLength: <K extends string, T extends Record<K, string>>(array: T[], prop: K) => number;
+export declare const truncateArrayByPropLength: <K extends string, T extends Record<K, string>>(array: T[], prop: K, maxChars: number, ellipsis?: boolean) => T[];

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, CinemaBadge, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, Tab, Table, TabLink, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls } from './components';
 import { devices, breakpoints } from './styles/viewports';
 import zIndexes from './styles/zIndexes';
-import { AspectRatio, ButtonType, CarouselType, Colors, IconNameType, IntegratedTimerProps, ITimerProps, TickboxMode, ThemeType, EditorialLink } from './types';
+import { AspectRatio, ButtonType, CarouselType, Colors, IconNameType, IntegratedTimerProps, ITimerProps, TickboxMode, ThemeType, EditorialLink, IInformationTitleProps, IInformationCTAProps, IInformationBackgroundColour } from './types';
 import { MiniCard } from './components/molecules';
 import { ModalWindow } from './components/organisms';
 import AuxiliaryButton from './components/atoms/Buttons/Auxiliary/AuxiliaryButton';
-export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, AuxiliaryNav, AspectRatio, BodyText, breakpoints, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, Header, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, ITimerProps, IntegratedTimerProps, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, Tab, Table, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, Tickbox2, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls, zIndexes, };
+export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, AuxiliaryNav, AspectRatio, BodyText, breakpoints, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, Header, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, IInformationBackgroundColour, IInformationCTAProps, IInformationTitleProps, ITimerProps, IntegratedTimerProps, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, Tab, Table, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, Tickbox2, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls, zIndexes, };

package/dist/styles/ThemeProvider.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { IThemeProviderProps } from '../types/types';
-declare const Theme: ({ children, theme }: IThemeProviderProps) => JSX.Element;
+declare const Theme: ({ children, theme }: IThemeProviderProps) => React.JSX.Element;
 export default Theme;

package/dist/types/auxiliaryNav.d.ts

@@ -1,3 +1,18 @@
+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 IAuxiliaryNavProps {
     /**
      * Menu items
@@ -18,21 +33,6 @@ export interface IAuxiliaryNavProps {
     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

@@ -72,9 +72,9 @@ export interface IRotatorButtonsProps {
     /**
      * Function to be called when a button is clicked
      */
-    onClickPrev?: Function;
+    onClickPrev?: () => void;
     /**
      * Function to be called when a button is clicked
      */
-    onClickNext?: Function;
+    onClickNext?: () => void;
 }

package/dist/types/card.d.ts

@@ -98,7 +98,9 @@ export interface ICardProps {
      */
     auxiliaryCTA?: EditorialLink;
 }
-export interface ICardContentContainerProps extends StyledProps<any> {
+export interface ICardContentContainerProps extends StyledProps<{
+    fullWidth?: boolean;
+}> {
     /**
      * Set if content gets full width (same as image)
      */

package/dist/types/contactCard.d.ts

@@ -33,7 +33,10 @@ export interface IContactCardProps {
      */
     hideBottomBorder?: boolean;
 }
-export interface IContactCardWrapperProps extends StyledProps<any> {
+export interface IContactCardWrapperProps extends StyledProps<{
+    hideTopBorder: boolean;
+    hideBottomBorder: boolean;
+}> {
     /**
      * Set visibility of the top border
      */

package/dist/types/creditListing.d.ts

@@ -9,4 +9,5 @@ export interface ICreditListing {
         additionalInfo: string;
         dataROH: string;
     }[];
+    columnCount?: number;
 }

package/dist/types/editorial.d.ts

@@ -153,7 +153,10 @@ export interface IPageHeadingProps extends IThemePageHeadingProps {
      */
     children?: ReactNode;
 }
-export interface IImpactWrappersStyledProps extends StyledProps<any> {
+export interface IImpactWrappersStyledProps extends StyledProps<{
+    bgUrlDesktop: string;
+    bgUrlDevice?: string;
+}> {
     /**
      * Background url for desktops
      */

package/dist/types/formTypes.d.ts

@@ -1,7 +1,7 @@
 import { InputHTMLAttributes } from 'react';
-import { IGridItemProps } from './types';
 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.

package/dist/types/image.d.ts

@@ -41,7 +41,10 @@ export interface IImageWithCaptionProps {
      */
     children: ReactElement<HTMLImageElement>;
 }
-export interface IImageWithCaptionWrapperProps extends StyledProps<any> {
+export interface IImageWithCaptionWrapperProps extends StyledProps<{
+    aspectRatio?: AspectRatio;
+    height: number;
+}> {
     /**
      * Aspect ratio of the contained image
      */

package/dist/types/impactHeader.d.ts

@@ -1,6 +1,24 @@
 import { ReactNode } from 'react';
 import { EditorialLink } from '../types';
 import { TypographyLevel } from './typography';
+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;
+}
 export interface IPageHeadingImpactProps {
     /**
      * Text placed in the impact component
@@ -115,21 +133,3 @@ export interface IPageHeadingCompactProps {
      */
     semanticLevel?: TypographyLevel;
 }
-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

@@ -11,4 +11,5 @@ import { IPageHeadingCompactProps } from './impactHeader';
 import { IntegratedTimerProps, ITimerProps } from './timer';
 import { ICreditListing } from './creditListing';
 import { ModalWindowProps } from './modalWindow';
-export { AspectRatio, ButtonType, CarouselType, Colors, EditorialLink, FooterData, IconNameType, IAuxiliaryButtonProps, ICreditListing, IPageHeadingCompactProps, INavigationProps, INavTopProps, IntegratedTimerProps, ITimerProps, ModalWindowProps, TickboxMode, ThemeType, };
+import { IInformationTitleProps, IInformationCTAProps, IInformationBackgroundColour } from './information';
+export { AspectRatio, ButtonType, CarouselType, Colors, EditorialLink, FooterData, IconNameType, IAuxiliaryButtonProps, ICreditListing, IPageHeadingCompactProps, INavigationProps, INavTopProps, IntegratedTimerProps, ITimerProps, ModalWindowProps, TickboxMode, ThemeType, IInformationTitleProps, IInformationCTAProps, IInformationBackgroundColour, };

package/dist/types/information.d.ts

@@ -1,27 +1,28 @@
 import { DirectionType, IconNameType } from './iconTypes';
-export declare enum CtaVariant {
+import { LinkTarget } from './types';
+export declare enum IInformationCtaVariant {
     Primary = "Primary",
     Secondary = "Secondary",
     Tertiary = "Tertiary",
     TextLink = "TextLink"
 }
-export declare enum CtaTheme {
+export declare enum IInformationCtaTheme {
     Cinema = "Cinema",
     Core = "Core",
     Stream = "Stream"
 }
-export declare enum TitleVariant {
+export declare enum IInformationTitleVariant {
     Header = "Header",
     AltHeader = "AltHeader"
 }
-export declare enum BackgroundColour {
+export declare enum IInformationBackgroundColour {
     Cinema = "cinema",
     Core = "core",
     Stream = "stream",
     White = "white"
 }
 export declare type TitleTextSize = 3 | 4 | 5 | 6;
-export interface CTAProps {
+export interface IInformationCTAProps {
     /**
      * Text to display on the CTA
      */
@@ -31,13 +32,14 @@ export interface CTAProps {
      */
     link: string;
     /**
-     * Style of the CTA. Choices are "Primary" (solid button background), "Secondary" (transparent button background) or "Tertiary" (text only)
+     * Style of the CTA. Choices are "Primary" (solid button background), "Secondary" (transparent button background)
+     * or "Tertiary" (text only)
      */
-    variant?: CtaVariant;
+    variant?: IInformationCtaVariant;
     /**
      * Theme to use for the CTA. Choices are "Core" (red), "Stream" (blue), or "Cinema" (black)
      */
-    theme?: CtaTheme;
+    theme?: IInformationCtaTheme;
     /**
      * Flag to decide whether to adjust the CTA colours for display on coloured backgrounds
      */
@@ -50,8 +52,12 @@ export interface CTAProps {
      * Direction of the icon used in the button
      */
     iconDirection?: DirectionType;
+    /**
+     * Attribute to specify where to open the link
+     */
+    target?: LinkTarget;
 }
-export interface TitleProps {
+export interface IInformationTitleProps {
     /**
      * Title text to display
      */
@@ -59,7 +65,7 @@ export interface TitleProps {
     /**
      * Title typography type. Choices are Heading or AltHeader
      */
-    variant: TitleVariant;
+    variant: IInformationTitleVariant;
     /**
      * The size of the title text
      */
@@ -73,13 +79,13 @@ export interface IInformationProps {
     /**
      * Optional CTA to display underneath the body text
      */
-    cta?: CTAProps;
+    cta?: IInformationCTAProps;
     /**
      * Title options for the component
      */
-    title: TitleProps;
+    title: IInformationTitleProps;
     /**
      * Background Colour. Choices: None, Core, Cinema, Stream
      */
-    background?: BackgroundColour;
+    background?: IInformationBackgroundColour;
 }

package/dist/types/navigation.d.ts

@@ -1,7 +1,6 @@
-import React, { AnchorHTMLAttributes, MouseEvent, MouseEventHandler } from 'react';
+import React, { AnchorHTMLAttributes, MouseEvent, MouseEventHandler, ReactNode } from 'react';
 import { DirectionType, IconNameType } from './iconTypes';
 import { Colors, IOptionItem } from './types';
-import { ReactNode } from 'react';
 export interface IAccountProps {
     /**
      * The text of the title
@@ -147,7 +146,7 @@ export interface INavTopProps {
      */
     colorPrimary?: string;
 }
-export interface iMenuOptionProps {
+export interface IMenuOptionProps {
     /**
      * The text of the title
      */
@@ -165,7 +164,7 @@ export interface IMenuProps {
     /**
      * An Array of menu items
      */
-    items: iMenuOptionProps[];
+    items: IMenuOptionProps[];
 }
 export interface INavigationProps {
     /**

package/dist/types/quote.d.ts

@@ -9,7 +9,9 @@ export interface IQuoteProps {
      */
     attribution?: string;
 }
-export interface IQuoteAttributionBlockProps extends StyledProps<any> {
+export interface IQuoteAttributionBlockProps extends StyledProps<{
+    displayAttribution: boolean;
+}> {
     /**
      * Set visibility of the attribution block
      */

package/dist/types/tableTypes.d.ts

@@ -9,8 +9,9 @@ export interface CellProps {
     columns: number;
     lineColor: Colors;
 }
+export declare type TableRowData = Array<Record<string, unknown>>;
 export interface RowProps {
-    row: any[];
+    row: TableRowData;
     rowIndex: number;
     columns: number;
     lineColor: Colors;

package/dist/types/types.d.ts

@@ -117,28 +117,6 @@ export interface ITabProps {
      */
     colorPrimary?: string;
 }
-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;
-    /**
-     * The primary color
-     */
-    colorPrimary?: string;
-}
 export interface IDropdownProps {
     /**
      * The value of the title
@@ -181,6 +159,28 @@ export interface IDropdownProps {
      */
     colorPrimary?: string;
 }
+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;
+    /**
+     * The primary color
+     */
+    colorPrimary?: string;
+}
 export interface IDropdowItemProps extends StyledProps<AnchorHTMLAttributes<HTMLAnchorElement>> {
     /**
      * The primary color
@@ -264,6 +264,10 @@ export declare type ListingPerson = {
      * Use headshot or not
      */
     useHeadshot: boolean;
+    /**
+     * Replacement text
+     */
+    replacement?: string;
 };
 export declare type ListingRole = {
     /**
@@ -600,3 +604,13 @@ export interface IVideoWithControlsProps {
     settings: IVideoWithControlsSettings;
 }
 export declare type Image = Pick<HTMLImageElement, 'alt' | 'src'>;
+export declare enum LinkTarget {
+    /**
+     * Opens the link in the same frame or tab as the current page.
+     */
+    Self = "_self",
+    /**
+     * Opens the link in a new browser tab or window, depending on the browser settings.
+     */
+    Blank = "_blank"
+}

package/dist/types/typography.d.ts

@@ -1,12 +1,42 @@
-import { ReactNode } from 'react';
+import { ReactNode, AnchorHTMLAttributes, MouseEventHandler } from 'react';
 import { StyledProps } from 'styled-components';
+import { DirectionType, IconNameType } from './iconTypes';
+export declare type HarmonicSize = 'small' | 'medium' | 'large';
+export declare type HarmonicColors = 'black' | 'red' | 'grey';
+export interface IGenericTypographyProps {
+    children: ReactNode;
+    size?: HarmonicSize;
+    serif?: boolean;
+    color?: HarmonicColors;
+    em?: boolean;
+    bold?: boolean;
+}
+export interface IHarmonicHeaderProps extends IGenericTypographyProps {
+    hierarchy: 'h1' | 'h2' | 'h3';
+}
+export interface IAltHeaderHarmonicProps extends IGenericTypographyProps {
+    text1: string;
+    text2?: string;
+    text3?: string;
+}
+export interface ITextLinkHarmonicProps extends Omit<IGenericTypographyProps, 'children' | 'color'>, AnchorHTMLAttributes<HTMLAnchorElement> {
+    onClick: MouseEventHandler<HTMLAnchorElement>;
+    iconName?: IconNameType;
+    iconDirection?: DirectionType;
+    children?: ReactNode;
+    color?: HarmonicColors;
+}
 export declare type TypographyLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export declare type AltHeaderLevel = 3 | 4 | 5 | 6;
 export declare type BodyLevel = 1 | 2 | 3;
 export declare type SubtitleLevel = 1 | 2;
 export declare type OverlineLevel = 1 | 2 | 3 | 4;
 export declare type TypographyType = 'header' | 'altHeader' | 'body' | 'subtitle' | 'overline';
-export interface ITypographyWrapperProps extends StyledProps<any> {
+interface IStyledTypographyProps {
+    level: TypographyLevel;
+    typography: TypographyType;
+}
+export interface ITypographyWrapperProps extends StyledProps<IStyledTypographyProps> {
     /**
      * Typography level to use for generic Typography subcomponent.
      */
@@ -22,7 +52,7 @@ interface IGenericTypography {
      */
     children: ReactNode;
 }
-export interface IStyledTag extends ITypographyWrapperProps, IGenericTypography {
+export interface IStyledTag extends Omit<ITypographyWrapperProps, 'theme'>, IGenericTypography {
     /**
      * HTML tag to use to render component, by default div.
      */

package/dist/types/upsell.d.ts

@@ -1,5 +1,4 @@
-import { EditorialLink } from '.';
-import { ThemeType } from '.';
+import { EditorialLink, ThemeType } from '.';
 export interface IOfferTextProps {
     /**
      * Repeatable element title