@royaloperahouse/harmonic 0.1.7 → 0.1.8-b

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-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, 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, SignUpForm } from './components';
+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, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, 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, SignUpForm } from './components';
 import { devices, breakpoints } from './styles/viewports';
 import zIndexes from './styles/zIndexes';
-import { AspectRatio, ButtonType, CarouselType, Colors, IconNameType, IntegratedTimerProps, ITimerProps, TickboxMode, ThemeType, EditorialLink, IInformationTitleProps, IInformationCTAProps, IInformationBackgroundColour } from './types';
+import { AspectRatio, ButtonType, CarouselType, Colors, IconNameType, IntegratedTimerProps, ITimerProps, TickboxMode, ThemeType, EditorialLink, IInformationTitleProps, IInformationCTAProps } from './types';
 import { MiniCard } from './components/molecules';
 import { ModalWindow } from './components/organisms';
 import AuxiliaryButton from './components/atoms/Buttons/Auxiliary/AuxiliaryButton';
 import HarmonicThemeProvider from './styles/HarmonicThemeProvider';
-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, HarmonicThemeProvider, Header, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, IInformationBackgroundColour, IInformationCTAProps, IInformationTitleProps, ITimerProps, IntegratedTimerProps, 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, SignUpForm, };
+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, HarmonicThemeProvider, Header, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, IInformationCTAProps, IInformationTitleProps, ITimerProps, IntegratedTimerProps, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, 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, SignUpForm, };

package/dist/types/buttonTypes.d.ts

@@ -29,13 +29,17 @@ declare type StyleProps = {
     backgroundColor?: ThemeColor;
     /** Border color from theme */
     borderColor?: ThemeColor;
+    /** Hovered color from theme */
+    hoveredColor?: ThemeColor;
+    /** Pressed element color from theme */
+    pressedColor?: ThemeColor;
     /** Disabled state */
     disabled?: boolean;
 };
 export declare type ButtonProps = BaseProps & IconProps & AnchorHTMLAttributes<HTMLAnchorElement>;
 export declare type AuxiliaryButtonProps = ButtonProps & Pick<StyleProps, 'textColor' | 'backgroundColor'>;
-export declare type PrimaryButtonProps = ButtonProps & Pick<StyleProps, 'textColor' | 'backgroundColor' | 'disabled'>;
-export declare type SecondaryButtonProps = ButtonProps & Pick<StyleProps, 'textColor' | 'borderColor' | 'disabled'>;
+export declare type PrimaryButtonProps = ButtonProps & Pick<StyleProps, 'textColor' | 'backgroundColor' | 'hoveredColor' | 'pressedColor' | 'disabled'>;
+export declare type SecondaryButtonProps = ButtonProps & Pick<StyleProps, 'textColor' | 'borderColor' | 'hoveredColor' | 'pressedColor' | 'disabled'>;
 export declare type TertiaryButtonProps = BaseProps & AnchorHTMLAttributes<HTMLAnchorElement> & Pick<StyleProps, 'textColor' | 'disabled'>;
 export declare type RotatorButtonsProps = {
     /** Enable/disable prev button */

package/dist/types/carousel.d.ts

@@ -1,9 +1,10 @@
 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';
+import { EditorialLink } from './editorial';
+import { TypographyLevel } from './typography';
 export declare enum CarouselType {
     Image = "image",
     SmallCard = "SmallCard",
@@ -14,6 +15,10 @@ export interface ICarouselProps {
      * Carousel title
      */
     title?: string;
+    /**
+     * Carousel description
+     */
+    description?: string;
     /**
      * Carousel type.
      */
@@ -34,12 +39,20 @@ export interface ICarouselProps {
      * 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
+     * Semantic level of the title
+     */
+    titleSemanticLevel?: TypographyLevel;
+    /**
+     * Sets infinite mode ON/OFF
      */
-    active: boolean;
+    infinite?: boolean;
+    /**
+     * CSS class name
+     */
+    className?: string;
+}
+export interface ICarouselWrapperProps {
     /**
      * Carousel type.
      */
@@ -64,6 +77,30 @@ export interface ICarouselWrapperProps {
 export declare type HighlightsCarouselSlideImage = ImgHTMLAttributes<HTMLImageElement> & {
     key: string;
 };
+interface SlideVideo {
+    desktop: string;
+    mobile: string;
+}
+interface SlidePoster {
+    desktop: string;
+    mobile: string;
+    altText: string;
+}
+export interface HighlightsCarouselSlideVideo {
+    video: SlideVideo;
+    poster: SlidePoster;
+    key: string;
+    autoPlay: boolean;
+    muted: boolean;
+    soundControl: boolean;
+    fullScreenOption: boolean;
+    loop: boolean;
+}
+export interface HighlightsCarouselVideoSlideProps {
+    index: number;
+    isCurrentSlide: boolean;
+    settings: HighlightsCarouselSlideVideo;
+}
 export declare type HighlightsCarouselSlide = {
     /**
      * heder in info section
@@ -90,13 +127,17 @@ export declare type HighlightsCarouselSlide = {
      */
     links: EditorialLink[];
     /**
-     * Slide image
+     * Slide media
      */
-    image: HighlightsCarouselSlideImage;
+    mediaContent: HighlightsCarouselSlideImage | HighlightsCarouselSlideVideo;
     /**
      * Params for Timer component
      */
     timerParams?: IntegratedTimerProps;
+    /**
+     * Renders an auxiliary button when passed
+     */
+    auxiliaryCTA?: EditorialLink;
 };
 export interface IHighlightsCarouselProps {
     /**
@@ -111,9 +152,16 @@ export interface IHighlightsCarouselProps {
      * slides to be displayed in the carousel
      */
     slides: HighlightsCarouselSlide[];
+    /**
+     * Semantic level of the title
+     */
+    titleSemanticLevel?: TypographyLevel;
+    /**
+     * Additional CSS class names to apply to the navigation component.
+     */
+    className?: string;
 }
-export interface IHighlightsCoreCarouselProps extends Omit<IHighlightsCarouselProps, 'logo'> {
-}
+export declare type IHighlightsCoreCarouselProps = Omit<IHighlightsCarouselProps, 'logo'>;
 export interface IHighlightsCinemaCarouselProps extends Omit<IHighlightsCarouselProps, 'logo'> {
     /**
      * Renders logo or not
@@ -126,3 +174,10 @@ export interface IHighlightsStreamCarouselProps extends Omit<IHighlightsCarousel
      */
     logo: boolean;
 }
+export interface IMinimalCarouselProps {
+    /**
+     * Carousel children (only Card and ImageAspectRatioWrapper children are allowed).
+     */
+    children: ReactElement[];
+}
+export {};

package/dist/types/editorial.d.ts

@@ -2,7 +2,7 @@ import { AnchorHTMLAttributes, ImgHTMLAttributes, MouseEventHandler, ReactElemen
 import { StyledProps } from 'styled-components';
 import { ButtonType } from './buttonTypes';
 import { DirectionType, IconNameType } from './iconTypes';
-import { Colors, IVideoWithControlsSettings } from './types';
+import { Colors, IVideoWithControlsSettings, ThemeColor } from './types';
 import { TypographyLevel } from './typography';
 export interface IEditorialProps {
     /**
@@ -68,11 +68,23 @@ export declare type EditorialLink = AnchorHTMLAttributes<HTMLAnchorElement> & {
     /**
      * Color of text and icon
      */
-    color?: Colors;
+    textColor?: ThemeColor;
     /**
      * background color
      */
-    bgColor?: Colors;
+    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;
      */

package/dist/types/image.d.ts

@@ -5,21 +5,27 @@ export declare enum AspectRatio {
     '3:4' = "3 / 4",
     '4:3' = "4 / 3",
     '8:3' = "8 / 3",
-    '16:9' = "16 / 9"
+    '16:9' = "16 / 9",
+    '90:17' = "90 / 17",
+    '75:32' = "75 / 32"
 }
 export declare enum AspectRatioLegacy {
     '1 / 1' = "100",
     '3 / 4' = "133",
     '4 / 3' = "75",
     '8 / 3' = "37.5",
-    '16 / 9' = "56.25"
+    '16 / 9' = "56.25",
+    '90 / 17' = "18.88",
+    '75 / 32' = "15"
 }
 export declare enum AspectRatioWidth {
     '1 / 1' = "1",
     '3 / 4' = "0.75",
     '4 / 3' = "1.33",
     '8 / 3' = "2.67",
-    '16 / 9' = "1.78"
+    '16 / 9' = "1.78",
+    '90 / 17' = "5.29",
+    '75 / 32' = "2.34"
 }
 export interface IImageAspectRatioWrapperProps {
     /**

package/dist/types/impactHeader.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { EditorialLink } from '../types';
-import { TypographyLevel } from './typography';
+import { TypographyHierarchy, TypographyLevel } from './typography';
 export interface CustomSponsorImageData {
     /**
      * Source URL for Sponsorship logo
@@ -133,3 +133,54 @@ export interface IPageHeadingCompactProps {
      */
     semanticLevel?: TypographyLevel;
 }
+export declare type PageHeadingPromoImageProps = {
+    /**
+     * Image url for desktops
+     */
+    desktop: string;
+    /**
+     * Image url for devices
+     */
+    mobile: string;
+    /**
+     * Alt text for the main image
+     */
+    alt: string;
+};
+export declare enum PageHeadingPromoBadge {
+    Stream = "Stream",
+    Cinema = "Cinema"
+}
+export declare type PageHeadingPromoAdditionalLink = EditorialLink & {
+    isTextLink?: boolean;
+};
+export interface IPageHeadingPromoProps {
+    /**
+     * Title text
+     */
+    title?: string;
+    /**
+     * Semantic level of the header
+     */
+    titleSemanticLevel?: TypographyHierarchy;
+    /**
+     * Boolean to show/hide sponsorship logo (default true)
+     */
+    sponsor?: boolean;
+    /**
+     * Link placed in the impact component
+     */
+    mainLink?: EditorialLink;
+    /**
+     * Link placed in the impact component
+     */
+    additionalLink?: PageHeadingPromoAdditionalLink;
+    /**
+     * Heading image
+     */
+    image: PageHeadingPromoImageProps;
+    /**
+     * Badge variant
+     */
+    badge?: PageHeadingPromoBadge;
+}

package/dist/types/index.d.ts

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

package/dist/types/information.d.ts

@@ -1,27 +1,13 @@
 import { DirectionType, IconNameType } from './iconTypes';
 import { LinkTarget } from './types';
-export declare enum IInformationCtaVariant {
-    Primary = "Primary",
-    Secondary = "Secondary",
-    Tertiary = "Tertiary",
-    TextLink = "TextLink"
-}
-export declare enum IInformationCtaTheme {
-    Cinema = "Cinema",
-    Core = "Core",
-    Stream = "Stream"
-}
-export declare enum IInformationTitleVariant {
-    Header = "Header",
-    AltHeader = "AltHeader"
-}
-export declare enum IInformationBackgroundColour {
-    Cinema = "cinema",
-    Core = "core",
-    Stream = "stream",
-    White = "white"
-}
-export declare type TitleTextSize = 3 | 4 | 5 | 6;
+import type { HarmonicSize } from './typography';
+export declare const InformationCtaVariants: {
+    readonly Primary: "Primary";
+    readonly Secondary: "Secondary";
+    readonly Tertiary: "Tertiary";
+    readonly TextLink: "TextLink";
+};
+export declare type InformationCtaVariant = keyof typeof InformationCtaVariants;
 export interface IInformationCTAProps {
     /**
      * Text to display on the CTA
@@ -35,11 +21,7 @@ export interface IInformationCTAProps {
      * Style of the CTA. Choices are "Primary" (solid button background), "Secondary" (transparent button background)
      * or "Tertiary" (text only)
      */
-    variant?: IInformationCtaVariant;
-    /**
-     * Flag to decide whether to adjust the CTA colours for display on coloured backgrounds
-     */
-    infoThemed: boolean;
+    variant?: InformationCtaVariant;
     /**
      * Name of the icon to be used in the button
      */
@@ -58,14 +40,10 @@ export interface IInformationTitleProps {
      * Title text to display
      */
     text: string;
-    /**
-     * Title typography type. Choices are Heading or AltHeader
-     */
-    variant: IInformationTitleVariant;
     /**
      * The size of the title text
      */
-    textSize: TitleTextSize;
+    textSize: HarmonicSize;
 }
 export interface IInformationProps {
     /**
@@ -79,11 +57,7 @@ export interface IInformationProps {
     /**
      * Title options for the component
      */
-    title: IInformationTitleProps;
-    /**
-     * Background Colour. Choices: None, Core, Cinema, Stream
-     */
-    background?: IInformationBackgroundColour;
+    title?: IInformationTitleProps;
     /**
      * Additional CSS class names to apply to component.
      */

package/dist/types/progress.d.ts

@@ -30,4 +30,8 @@ export interface IProgressProps {
      * Number of the steps
      */
     steps?: IProgressSteps;
+    /**
+     * The presence of a shadow under the progress bar
+     */
+    shadow?: boolean;
 }

package/dist/types/types.d.ts

@@ -52,6 +52,10 @@ export declare enum ThemeType {
     Cinema = "cinema",
     Schools = "schools"
 }
+export declare type ThemeChildProps = {
+    className?: string;
+    theme?: ThemeType;
+};
 export interface IThemeProviderProps {
     /**
      * The theme to use for the child elements
@@ -424,7 +428,7 @@ export interface ITextLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>
     /**
      * Color of text and icon
      */
-    color?: Colors;
+    textColor?: ThemeColor;
 }
 export interface ISectionSplitterProps {
     /**

package/dist/types/typography.d.ts

@@ -1,9 +1,14 @@
 import { ReactNode } from 'react';
 import { StyledProps } from 'styled-components';
-export declare type HarmonicSize = 'small' | 'medium' | 'large';
-export declare type HarmonicColors = 'primary' | 'black' | 'white' | 'red' | 'grey';
-export interface IGenericTypographyProps {
-    children: ReactNode;
+export declare const HarmonicSizes: {
+    readonly Small: "small";
+    readonly Medium: "medium";
+    readonly Large: "large";
+};
+export declare type HarmonicSize = (typeof HarmonicSizes)[keyof typeof HarmonicSizes];
+export declare type HarmonicColors = 'primary' | 'black' | 'white' | 'red' | 'grey' | 'inherit';
+export interface IGenericTypographyProps<T extends HTMLElement = HTMLParagraphElement> extends React.HTMLAttributes<T> {
+    children?: ReactNode;
     size?: HarmonicSize;
     serif?: boolean;
     color?: HarmonicColors;
@@ -11,8 +16,9 @@ export interface IGenericTypographyProps {
     bold?: boolean;
     className?: string;
 }
+export declare type TypographyHierarchy = 'h1' | 'h2' | 'h3';
 export interface IHarmonicHeaderProps extends IGenericTypographyProps {
-    hierarchy: 'h1' | 'h2' | 'h3';
+    hierarchy: TypographyHierarchy;
 }
 export declare type TypographyLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export declare type AltHeaderLevel = 3 | 4 | 5 | 6;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@royaloperahouse/harmonic",
-  "version": "0.1.7",
+  "version": "0.1.8-b",
   "author": "Royal Opera House",
   "license": "MIT",
   "main": "dist/index.js",
@@ -88,6 +88,7 @@
     "@types/react-modal": "^3.16.3",
     "@types/react-select": "^5.0.1",
     "@types/react-test-renderer": "^17.0.1",
+    "@types/resize-observer-browser": "^0.1.11",
     "@types/styled-components": "5.1.26",
     "@types/testing-library__jest-dom": "^5.9.1",
     "@typescript-eslint/eslint-plugin": "^5.0.0",