@royaloperahouse/harmonic 1.0.6-a → 1.0.6-c

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-import { Account, Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, Basket, BodyText, Card, Cards, Carousel, CastFilter, CinemaBadge, ContactCard, ContactNewsletter, ContentSummary, ControlledDropdown, Dropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Logo, Navigation, NavTop, MinimalCarousel, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Person, Paywall, PersonDetails, PeopleListing, PolicyLinks, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio2, RadioGroup2, ReadMore, RotatorButtons, Search, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SocialLinks, SectionSplitter, SectionTitle, Select2, Select2Async, SignUpForm, Swipe, SwipeRef, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, TertiaryButton, ThemeProvider, TitleWithCTA, Tab, Table, TabLink, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellCards, UpsellSection, VideoControls, VideoWithControls } from './components';
+import { Account, Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, Basket, BodyText, Card, Cards, Carousel, CastFilter, CinemaBadge, ContactCard, ContactNewsletter, ContentSummary, ControlledDropdown, Dropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Logo, Navigation, NavTop, MinimalCarousel, CustomStrategyTabsFilter, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Person, Paywall, PersonDetails, PeopleListing, PolicyLinks, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio2, RadioGroup2, ReadMore, RotatorButtons, Search, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SocialLinks, SectionSplitter, SectionTitle, Select2, Select2Async, SignUpForm, Swipe, SwipeRef, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, TertiaryButton, ThemeProvider, TitleWithCTA, Tab, Table, TabLink, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellCards, UpsellSection, VideoControls, VideoWithControls } from './components';
 import BodyContent from './components/molecules/BodyContent';
 import Quote from './components/molecules/Quote';
 import { devices, breakpoints } from './styles/viewports';
 import zIndexes from './styles/zIndexes';
-import { AspectRatio, ButtonType, CarouselType, Colors, IconNameType, IntegratedTimerProps, ITimerProps, TickboxMode, ThemeColor, ThemeType, EditorialLink, IInformationTitleProps, IInformationCTAProps } from './types';
+import { AspectRatio, ButtonType, CarouselType, Colors, IconNameType, IntegratedTimerProps, ITimerProps, TickboxMode, ThemeColor, ThemeType, EditorialLink, IInformationTitleProps, IInformationCTAProps, TCustomStrategyTabsFilterProps, TCustomStrategyTabsFilterItem } from './types';
 import { MiniCard } from './components/molecules';
 import { ModalWindow } from './components/organisms';
 import AuxiliaryButton from './components/atoms/Buttons/Auxiliary/AuxiliaryButton';
@@ -12,4 +12,4 @@ import HarmonicThemeProvider, { useHarmonicTheme } from './styles/HarmonicThemeP
 import { HarmonicSize } from './types/typography';
 import { DisplayHeader, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText } from './components/Typography';
 export { useHarmonicTheme };
-export { Account, Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, AuxiliaryNav, AspectRatio, Basket, BodyContent, BodyText, breakpoints, ButtonType, Card, Cards, CarouselType, Carousel, CastFilter, CinemaBadge, Colors, ContactCard, ContactNewsletter, ContentSummary, ControlledDropdown, DisplayHeader, Dropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, HarmonicSize, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, HotFilters, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, Logo, IInformationCTAProps, IInformationTitleProps, ITimerProps, IntegratedTimerProps, MinimalCarousel, MiniCard, ModalWindow, Navigation, NavTop, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Person, PersonCard, PersonDetails, Paywall, PeopleListing, PolicyLinks, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio2, RadioGroup2, ReadMore, RotatorButtons, Search, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SocialLinks, SectionSplitter, SectionTitle, Select2, Select2Async, SignUpForm, Swipe, SwipeRef, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, Tab, Table, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, Tickbox2, TickboxMode, Timer, TypeTags, UpsellCard, UpsellCards, UpsellSection, Quote, VideoControls, VideoWithControls, zIndexes, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText, };
+export { Account, Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, AuxiliaryNav, AspectRatio, Basket, BodyContent, BodyText, breakpoints, ButtonType, Card, Cards, CarouselType, Carousel, CastFilter, CinemaBadge, Colors, ContactCard, ContactNewsletter, ContentSummary, ControlledDropdown, DisplayHeader, Dropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, HarmonicSize, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, HotFilters, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, Logo, IInformationCTAProps, IInformationTitleProps, ITimerProps, IntegratedTimerProps, MinimalCarousel, MiniCard, CustomStrategyTabsFilter, ModalWindow, Navigation, NavTop, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Person, PersonCard, PersonDetails, Paywall, PeopleListing, PolicyLinks, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio2, RadioGroup2, ReadMore, RotatorButtons, Search, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SocialLinks, SectionSplitter, SectionTitle, Select2, Select2Async, SignUpForm, Swipe, SwipeRef, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, Tab, Table, TabLink, Tabs, TCustomStrategyTabsFilterProps, TCustomStrategyTabsFilterItem, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, Tickbox2, TickboxMode, Timer, TypeTags, UpsellCard, UpsellCards, 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/carousel.d.ts

@@ -4,7 +4,7 @@ import { IImageWithCaptionProps } from './image';
 import { IntegratedTimerProps } from './timer';
 import { ILogosProps } from './types';
 import { EditorialLink } from './editorial';
-import { TypographyLevel } from './typography';
+import { HarmonicSize, TypographyLevel } from './typography';
 export declare enum CarouselType {
     Image = "image",
     SmallCard = "SmallCard",
@@ -52,6 +52,20 @@ export interface ICarouselProps {
      * CSS class name
      */
     className?: string;
+    /**
+     * Enables infinite scroll once user interacts with buttons
+     */
+    enableInfiniteOnInteraction?: boolean;
+    /**
+     * Custom Title grid position
+     */
+    titleGrid?: {
+        columnStartDesktop: number;
+        columnSpanDesktop: number;
+        columnStartDevice: number;
+        columnSpanDevice: number;
+    };
+    titleFontFamily?: 'Victor' | 'Grey' | undefined;
 }
 export interface ICarouselWrapperProps {
     /**
@@ -177,6 +191,15 @@ export interface IHighlightsCarouselProps {
      * Additional CSS class names to apply to the navigation component.
      */
     className?: string;
+    /**
+     * Title size to be applied no title.
+     */
+    titleSize?: HarmonicSize;
+    /**
+     * Additional CSS class names to apply to the title component.
+     */
+    titleClassName?: string;
+    titleFontFamily?: 'Victor' | 'Grey' | undefined;
 }
 export declare type IHighlightsCoreCarouselProps = Omit<IHighlightsCarouselProps, 'logo'>;
 export interface IHighlightsCinemaCarouselProps extends Omit<IHighlightsCarouselProps, 'logo'> {

package/dist/types/creditListing.d.ts

@@ -1,16 +1,17 @@
 import { ListingPerson } from './types';
 export interface ICreditListing {
     roles: {
-        name: string;
+        name?: string;
         people: ListingPerson[] | ListingPerson[][];
-        description: string;
-        musicTitle: string[];
-        replacement: string;
-        additionalInfo: string;
-        dataROH: string;
+        description?: string;
+        musicTitle?: string[];
+        replacement?: string;
+        additionalInfo?: string;
+        dataROH?: string;
     }[];
     columnCount?: number;
     expandLargeEntries?: boolean;
     largeColumnSpan?: number;
     characterThreshold?: number;
+    className?: string;
 }

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 import type { FooterData } from './footer';
-import { Colors, ThemeType, ThemeColor } from './types';
+import { Colors, ThemeType, ThemeColor, TCustomStrategyTabsFilterProps, TCustomStrategyTabsFilterItem } from './types';
 import { INavigationProps, INavTopProps } from './navigation';
 import { CarouselType } from './carousel';
 import { IconNameType } from './iconTypes';
@@ -12,5 +12,5 @@ import { IntegratedTimerProps, ITimerProps } from './timer';
 import { ICreditListing } from './creditListing';
 import { ModalWindowProps } from './modalWindow';
 import { IInformationTitleProps, IInformationCTAProps } from './information';
-export { AspectRatio, ButtonType, CarouselType, Colors, EditorialLink, IconNameType, ICreditListing, IPageHeadingCompactProps, INavigationProps, INavTopProps, IntegratedTimerProps, ITimerProps, ModalWindowProps, TickboxMode, ThemeColor, ThemeType, IInformationTitleProps, IInformationCTAProps, };
+export { AspectRatio, ButtonType, CarouselType, Colors, EditorialLink, IconNameType, ICreditListing, IPageHeadingCompactProps, INavigationProps, INavTopProps, IntegratedTimerProps, ITimerProps, ModalWindowProps, TickboxMode, ThemeColor, ThemeType, IInformationTitleProps, IInformationCTAProps, TCustomStrategyTabsFilterProps, TCustomStrategyTabsFilterItem, };
 export type { FooterData };

package/dist/types/modalWindow.d.ts

@@ -17,4 +17,8 @@ export interface ModalWindowProps extends Modal.Props {
      * ID of the app element to assist with accessibility.
      */
     appElementId?: string;
+    /**
+     * Accessible label for the close button.
+     */
+    closeButtonAriaLabel?: string;
 }

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.
      */
@@ -222,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;
 }
@@ -429,7 +437,65 @@ export declare type IHotFilterProps = {
     selectedIndex?: number;
     onSelect?: (index: number) => void;
 };
-export declare type ICastFilterItem = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'aria-label' | 'role'> & {
+/**
+ * Represents a single tab item rendered by the
+ * {@link CustomStrategyTabsFilter} component.
+ */
+export declare type TCustomStrategyTabsFilterItem = Omit<IHotFilterItem, 'onClick'> & {
+    /**
+     * Indicates whether the tab is currently selected.
+     */
+    isSelected: boolean;
+    /**
+     * Unique identifier for the tab.
+     */
+    id: string;
+    /**
+     * Optional list of tab IDs that are allowed to be selected
+     * simultaneously with this tab.
+     *
+     * Useful for implementing multi-select filter behavior.
+     */
+    allowedSelectedWith?: string[];
+};
+/**
+ * Props for the {@link CustomStrategyTabsFilter} component.
+ */
+export declare type TCustomStrategyTabsFilterProps = Omit<IHotFilterProps, 'items' | 'selectedIndex' | 'onSelect'> & {
+    /**
+     * Collection of tabs to display.
+     */
+    items: TCustomStrategyTabsFilterItem[];
+    /**
+     * Callback invoked when a tab is clicked.
+     *
+     * @param item The selected tab item.
+     * @returns Any value required by the consuming implementation.
+     */
+    onClick: <T>(item: TCustomStrategyTabsFilterItem) => T;
+    customViewConfig?: Partial<{
+        selectIcon: IconNameType;
+        backgroundColor: {
+            select: ThemeColor;
+            unselect: ThemeColor;
+        };
+        textColor: {
+            select: ThemeColor;
+            unselect: ThemeColor;
+        };
+        hoveredColor: ThemeColor;
+        pressedColor: ThemeColor;
+    }>;
+};
+export declare type ICastFilterItem = {
+    /**
+     * Stable identifier for selection mapping and rendering keys.
+     */
+    id?: string | number;
+    /**
+     * Alternative stable identifier for selection mapping and rendering keys.
+     */
+    slug?: string;
     /**
      * Name of the cast member shown below the image circle. Required.
      */
@@ -438,6 +504,15 @@ export declare type ICastFilterItem = Pick<AnchorHTMLAttributes<HTMLAnchorElemen
      * Image source for the image to be shown. Optional but if not included an unaesthetic placeholder will show.
      */
     image?: string;
+    /**
+     * Optional accessible name for the option. If omitted, `name` is used.
+     */
+    'aria-label'?: string;
+    /**
+     * Kept for backwards compatibility with existing integrations.
+     * CastFilter always renders option semantics and ignores this value at runtime.
+     */
+    role?: string;
     onClick?: () => void;
 };
 export declare type ICastFiltersProps = {
@@ -448,8 +523,14 @@ export declare type ICastFiltersProps = {
     cast: ICastFilterItem[];
     /**
      * Indices of currently selected cast in the `cast` array.
+     * Legacy API kept for backwards compatibility.
      */
     selectedIndices?: number[];
+    /**
+     * Stable IDs/slugs of currently selected cast items.
+     * Prefer this over `selectedIndices` for stable selection across reordering.
+     */
+    selectedIds?: Array<string | 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.
@@ -479,12 +560,22 @@ export declare type ICastFiltersProps = {
     listRoleDescription?: string;
     /**
      * Handle selecting individual cast filters.
+     * Legacy API kept for backwards compatibility.
      */
     onSelect?: (index: number) => void;
+    /**
+     * Handle selecting individual cast filters using stable item ID/slug.
+     */
+    onSelectId?: (id: string) => void;
     /**
      * Handle clicking the primary CTA.
+     * Legacy API kept for backwards compatibility.
      */
     onApply?: (indices: number[]) => void;
+    /**
+     * Handle clicking the primary CTA using stable selected IDs/slugs.
+     */
+    onApplyIds?: (ids: string[]) => void;
     /**
      * Handle clicking the text link.
      */

package/package.json

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