@royaloperahouse/harmonic 0.17.0-a → 0.17.0-b

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, Carousel, CinemaBadge, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Navigation, MinimalCarousel, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, SignUpForm, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, TertiaryButton, ThemeProvider, TitleWithCTA, Tab, Table, TabLink, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls } from './components';
+import { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, Carousel, CinemaBadge, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Navigation, MinimalCarousel, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Paywall, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, SignUpForm, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, TertiaryButton, ThemeProvider, TitleWithCTA, Tab, Table, TabLink, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls } from './components';
 import BodyContent from './components/molecules/BodyContent';
 import Quote from './components/molecules/Quote';
 import { devices, breakpoints } from './styles/viewports';
@@ -11,4 +11,4 @@ import HarmonicThemeProvider, { useHarmonicTheme } from './styles/HarmonicThemeP
 import { HarmonicSize } from './types/typography';
 import { HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText } from './components/Typography';
 export { useHarmonicTheme };
-export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, AuxiliaryNav, AspectRatio, BodyContent, BodyText, breakpoints, ButtonType, Card, Cards, CarouselType, Carousel, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, HarmonicSize, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, HotFilters, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, IInformationCTAProps, IInformationTitleProps, ITimerProps, IntegratedTimerProps, MinimalCarousel, MiniCard, ModalWindow, Navigation, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, SignUpForm, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, Tab, Table, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, Tickbox2, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls, zIndexes, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText, };
+export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, AuxiliaryNav, AspectRatio, BodyContent, BodyText, breakpoints, ButtonType, Card, Cards, CarouselType, Carousel, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, HarmonicSize, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, HotFilters, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, IInformationCTAProps, IInformationTitleProps, ITimerProps, IntegratedTimerProps, MinimalCarousel, MiniCard, ModalWindow, Navigation, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Paywall, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, SignUpForm, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, Tab, Table, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, Tickbox2, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls, zIndexes, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText, };

package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ThemeType } from '../../types';
 import './theme/fonts.css';
+import './theme/typography.css';
 export declare const DEFAULT_THEME = ThemeType.Core;
 interface HarmonicThemeProviderProps {
     theme: ThemeType;

package/dist/types/anchorBar.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { EditorialLink } from './editorial';
+import { IGridItemProps } from './types';
 export interface IAnchorBarProps {
     /** CTA for anchor bar */
     cta: EditorialLink;
@@ -13,4 +14,6 @@ export interface IAnchorBarProps {
     className?: string;
     /** Flag indicating whether the anchor bar should have a shadow */
     withShadow?: boolean;
+    /** Optional grid item props to allow for different page alignments */
+    grid?: IGridItemProps;
 }

package/dist/types/image.d.ts

@@ -1,5 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
-import { StyledProps } from 'styled-components';
+import React from 'react';
 export declare enum AspectRatio {
     '1:1' = "1 / 1",
     '3:4' = "3 / 4",
@@ -44,13 +43,18 @@ export interface IImageWithCaptionProps {
     caption: string;
     /** Alternative text describing the image content for accessibility purposes. */
     altText?: string;
-    /** Image element */
-    children: ReactElement<HTMLImageElement>;
+    /** Image source */
+    src: string;
+    /** Optional srcSet for responsive images */
+    srcSet?: string;
+    /** Optional sizes for responsive images */
+    sizes?: string;
+    /** Optional loading strategy */
+    loading?: 'lazy' | 'eager';
+    /** Custom CSS classes */
+    className?: string;
 }
-export interface IImageWithCaptionWrapperProps extends StyledProps<{
-    aspectRatio?: AspectRatio;
-    height: number;
-}> {
+export interface IImageWithCaptionWrapperProps {
     /**
      * Aspect ratio of the contained image
      */
@@ -58,11 +62,11 @@ export interface IImageWithCaptionWrapperProps extends StyledProps<{
     /**
      * Height of the wrapper
      */
-    height: number;
+    height?: number;
 }
-export interface ImageAspectRatioWrapperProps extends IImageAspectRatioWrapperProps {
+export interface ImageAspectRatioWrapperProps extends IImageAspectRatioWrapperProps, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Image elements
      */
-    children: ReactNode;
+    children: React.ReactNode;
 }

package/dist/types/impactHeader.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { EditorialLink } from '../types';
+import { ImgHTMLAttributes, ReactNode } from 'react';
+import { EditorialLink, ThemeColor } from '../types';
 import { HeaderHierarchy, TypographyLevel } from './typography';
 export interface CustomSponsorImageData {
     /**
@@ -190,3 +190,21 @@ export interface IPageHeadingPromoProps {
     /** Custom CSS classes */
     className?: string;
 }
+export interface IPageHeadingHighlightProps {
+    /**
+     * Image to display in the right hand panel, aspect ratio 4:3
+     */
+    image: ImgHTMLAttributes<HTMLImageElement>;
+    /**
+     * Optional change to background color
+     */
+    background?: ThemeColor;
+    /**
+     * The component(s) to be wrapped in the page header
+     */
+    children: ReactNode;
+    /**
+     * Custom CSS classes
+     */
+    className?: string;
+}

package/dist/types/navigation.d.ts

@@ -203,6 +203,10 @@ export interface INavigationProps {
      * Additional CSS class names to apply to the navigation component.
      */
     className?: string;
+    /**
+     * Defines which tag the button should skip to. Default: 'main-content'.
+     */
+    skipToId?: string;
 }
 export interface ISearchBarProps {
     /**

package/dist/types/types.d.ts

@@ -147,6 +147,10 @@ export interface ITabProps {
      * Additional CSS class names to apply to the navigation component.
      */
     className?: string;
+    /**
+     * The unique ID to assign to the link element.
+     */
+    tabLinkId?: string;
     /**
      * Defines the ARIA role of the element for accessibility purposes.
      */
@@ -163,6 +167,10 @@ export interface ITabProps {
      * Defines if it is needed to trim the text of the Tab and add 3 dots in the end
      */
     trimText?: boolean;
+    /**
+     * data-testid string for easier testing
+     */
+    dataTestId?: string;
     /**
      * Boolean indicating if the Tab is open.
      */
@@ -218,7 +226,11 @@ export interface IDropdownProps {
      */
     ariaLabel?: string;
     /**
-     *  Defines if it is needed to trim the text of the Tab and add 3 dots in the end
+     * The unique ID to assign to the link element inside the tab.
+     */
+    tabLinkId?: string;
+    /**
+     * Defines if it is needed to trim the text of the Tab and add 3 dots in the end
      */
     trimTabText?: boolean;
 }
@@ -342,10 +354,10 @@ export declare type ListingRole = {
     dataROH?: string;
 };
 export interface IPeopleListing {
-    /**
-     * List of roles to be displayed
-     */
+    /** List of roles to be displayed */
     roles: ListingRole[];
+    /** Custom CSS classes */
+    className?: string;
 }
 export interface IPagination {
     /**
@@ -421,6 +433,67 @@ export declare type IHotFilterProps = {
     selectedIndex?: number;
     onSelect?: (index: number) => void;
 };
+export declare type ICastFilterItem = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'aria-label' | 'role'> & {
+    /**
+     * Name of the cast member shown below the image circle. Required.
+     */
+    name: string;
+    /**
+     * Image source for the image to be shown. Optional but if not included an unaesthetic placeholder will show.
+     */
+    image?: string;
+    onClick?: () => void;
+};
+export declare type ICastFiltersProps = {
+    className?: string;
+    /**
+     * Array of cast to filter by.
+     */
+    cast: ICastFilterItem[];
+    /**
+     * Indices of currently selected cast in the `cast` array.
+     */
+    selectedIndices?: number[];
+    /**
+     * Text shown at the top of the component, e.g. 'Filter by cast'. If this is not provided
+     * the component will render without any.
+     */
+    headingText?: string;
+    /**
+     * Override the text of the primary CTA. Default is 'Apply'.
+     */
+    ctaText?: string;
+    /**
+     * Override the text of the text link. Default is 'Clear'.
+     */
+    textLinkText?: string;
+    /**
+     * Text to show if no selection is made.
+     */
+    emptySelectionText?: string;
+    /**
+     * Default image to show in cases where a cast member image prop is missing.
+     * If this is undefined then a light grey background will be displayed instead.
+     */
+    placeholderImage?: string;
+    /**
+     * Description to be used as aria-roledescription of the cast filter listbox.
+     * Read out by screen readers to describe the contents of the list.
+     */
+    listRoleDescription?: string;
+    /**
+     * Handle selecting individual cast filters.
+     */
+    onSelect?: (index: number) => void;
+    /**
+     * Handle clicking the primary CTA.
+     */
+    onApply?: (indices: number[]) => void;
+    /**
+     * Handle clicking the text link.
+     */
+    onClear?: () => void;
+};
 export interface ISponsorshipProps {
     /**
      * Source URL for Sponsorship IFRAME.
@@ -479,6 +552,10 @@ export interface IBodyContentProps {
     columnSpanDevice?: number;
     /** Custom CSS classes */
     className?: string;
+    /** Set to true to wrap the content in a Grid component */
+    renderGrid?: boolean;
+    /** Set to true to render the GridItem component */
+    renderGridItem?: boolean;
 }
 export declare type SectionTitleSize = 'small' | 'large';
 export interface ISectionTitleProps {
@@ -662,3 +739,27 @@ export declare enum LinkTarget {
      */
     Blank = "_blank"
 }
+export interface ISkipToMainProps {
+    /**
+     * Defines which tag the button should skip to.
+     */
+    skipToId?: string;
+}
+export declare type PaywallProps = {
+    /** Custom CSS classes */
+    className?: string;
+    /** Heading text */
+    title: string;
+    /** Introduction text */
+    intro?: string;
+    /** Body HTML */
+    description: string;
+    /** CTA text */
+    buttonText: string;
+    /** CTA URL */
+    buttonUrl: string;
+    /** Text before sign-in link (required to show sign-in link) */
+    signInPromptText?: string;
+    /** Sign-in link URL (required to show sign-in link) */
+    signInLinkUrl?: string;
+};

package/dist/types/upsell.d.ts

@@ -68,24 +68,16 @@ export interface IUpsellCardsProps {
     theme?: ThemeType;
 }
 export interface IUpsellSectionProps {
-    /**
-     * Upsell Section title
-     */
+    /** Upsell Section title */
     title?: string;
-    /**
-     * Richtext section
-     */
+    /** Richtext section */
     richText?: string;
-    /**
-     * CTA link. Eg. for sign in.
-     */
+    /** CTA link. Eg. for sign in. */
     link?: EditorialLink;
-    /**
-     * Array of upsellCards
-     */
+    /** Array of upsellCards */
     upsellCards?: IUpsellCardProps[];
-    /**
-     * Theme options
-     */
+    /** Theme options */
     theme?: ThemeType;
+    /** Custom CSS classes */
+    className?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@royaloperahouse/harmonic",
-  "version": "0.17.0-a",
+  "version": "0.17.0-b",
   "author": "Royal Opera House",
   "license": "MIT",
   "main": "dist/index.js",