@royaloperahouse/harmonic 1.0.5-b → 1.0.5-d

package/CHANGELOG.md

@@ -1,9 +1,18 @@
+## [1.0.5-c]
+- Harmonic :
+  - Added new CustomStrategy  filter
+  - Fixed alignment between title and sponsor logo upon Header
+  - extended HighlightsCarousel to change infinit from false to true
+
 ## [Proposed: 1.0.5]
 - CastFilter: prevent duplicate screen reader announcements for actor images and ensure tapping an actor image ring toggles selection.
 
-## [Proposed: 1.0.3]
+## [Proposed: 1.0.4]
 - Castfilter: fix NDVA issues
 
+## [1.0.3]
+- Carousel title realignment following font change
+
 ## [Proposed: 1.0.2]
 - CastFilter: fix VoiceOver selection semantics and option activation (desktop/iOS).
 - CastFilter: add stable id-based selection support (`selectedIds`, `onSelectId`, `onApplyIds`) with backward compatibility for legacy index-based API.

package/dist/components/index.d.ts

@@ -1,8 +1,8 @@
 import { DisplayHeader, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText } from './Typography';
 import { Account, AltHeader, BodyText, CinemaBadge, ControlledDropdown, Dropdown, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, Logo, Overline, Person, PrimaryButton, Progress, Radio2, RotatorButtons, Search, SecondaryButton, SecondaryLogo, TertiaryButton, SectionSplitter, SocialLinks, SponsorLogo, Sponsorship, Stepper, StreamBadge, Subtitle, Tab, TabLink, TextLogo, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, VideoControls } from './atoms';
 import { AnchorTabBar, Footer, Navigation, StickyBar, TitleWithCTA, UpsellSection, Carousel, MinimalCarousel, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, ModalWindow } from './organisms';
-import { Accordion, Accordions, AnchorBar, AnnouncementBanner, AuxiliaryNav, Basket, BodyContent, Card, Cards, CastFilter, ContactNewsletter, ContactCard, ContentSummary, CreditListing, Editorial, HotFilters, ImageWithCaption, Information, MiniCard, NavTop, PersonDetails, PersonCard, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlight, PageHeadingHighlightCarousel, PasswordStrength, Pagination, Paywall, PeopleListing, PolicyLinks, PromoWithTags, PromoWithTitle, Quote, RadioGroup2, ReadMore, StatusBanner, SearchBar, SectionTitle, Select2, Select2Async, SignUpForm, Swipe, SwipeRef, Table, Tabs, UpsellCard, UpsellCards, VideoWithControls, SkipToMain } from './molecules';
+import { Accordion, Accordions, AnchorBar, AnnouncementBanner, AuxiliaryNav, Basket, BodyContent, Card, Cards, CastFilter, ContactNewsletter, ContactCard, ContentSummary, CreditListing, Editorial, HotFilters, ImageWithCaption, Information, MiniCard, CustomStrategyTabsFilter, NavTop, PersonDetails, PersonCard, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlight, PageHeadingHighlightCarousel, PasswordStrength, Pagination, Paywall, PeopleListing, PolicyLinks, PromoWithTags, PromoWithTitle, Quote, RadioGroup2, ReadMore, StatusBanner, SearchBar, SectionTitle, Select2, Select2Async, SignUpForm, Swipe, SwipeRef, Table, Tabs, UpsellCard, UpsellCards, VideoWithControls, SkipToMain } from './molecules';
 import ThemeProvider from '../styles/ThemeProvider';
 import GlobalStyles from '../styles/GlobalStyles';
 export { DisplayHeader, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText, SkipToMain, };
-export { Accordion, Accordions, Account, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, Basket, BodyContent, BodyText, Card, Cards, Carousel, CastFilter, ContactNewsletter, ContactCard, ContentSummary, CinemaBadge, ControlledDropdown, Dropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Header, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Logo, MinimalCarousel, MiniCard, ModalWindow, NavTop, Navigation, Overline, Person, PersonCard, PersonDetails, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Paywall, PeopleListing, PolicyLinks, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio2, RadioGroup2, ReadMore, RotatorButtons, Search, SecondaryButton, SecondaryLogo, SocialLinks, StatusBanner, SearchBar, SectionTitle, Select2, Select2Async, SponsorLogo, SignUpForm, Swipe, SwipeRef, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Table, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, TextLogo, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellCards, UpsellSection, VideoControls, VideoWithControls, };
+export { Accordion, Accordions, Account, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, Basket, BodyContent, BodyText, Card, Cards, Carousel, CastFilter, ContactNewsletter, ContactCard, ContentSummary, CinemaBadge, ControlledDropdown, CustomStrategyTabsFilter, Dropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Header, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Logo, MinimalCarousel, MiniCard, ModalWindow, NavTop, Navigation, Overline, Person, PersonCard, PersonDetails, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Paywall, PeopleListing, PolicyLinks, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio2, RadioGroup2, ReadMore, RotatorButtons, Search, SecondaryButton, SecondaryLogo, SocialLinks, StatusBanner, SearchBar, SectionTitle, Select2, Select2Async, SponsorLogo, SignUpForm, Swipe, SwipeRef, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Table, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, TextLogo, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellCards, UpsellSection, VideoControls, VideoWithControls, };

package/dist/components/molecules/CustomStrategyTabsFilter/CustomStrategyTabsFilter.d.ts

@@ -0,0 +1,77 @@
+import { FunctionComponent } from 'react';
+import { TCustomStrategyTabsFilterProps } from '../../../types';
+/**
+ * A horizontally scrollable tabs filter component used to display
+ * selectable strategy tabs with configurable styling and selection behavior.
+ *
+ * Features:
+ * - Supports both single-select and multi-select tab scenarios
+ * - Displays an optional icon on selected tabs
+ * - Allows customization of colors and selected icon through `customViewConfig`
+ * - Applies default styling when configuration values are omitted
+ * - Emits the clicked tab item through `onClick`
+ *
+ * @component
+ *
+ * @param {TCustomStrategyTabsFilterProps['items']} items
+ * Collection of tabs to render.
+ *
+ * @param {string} [className]
+ * Optional CSS class name applied to the root scroll container.
+ *
+ * @param {<T>(item: TCustomStrategyTabsFilterProps['items'][number]) => T} onClick
+ * Generic callback invoked when a tab is clicked.
+ *
+ * @param [customViewConfig]
+ * Optional visual configuration used to customize:
+ * - selected tab icon
+ * - selected/unselected background colors
+ * - selected/unselected text colors
+ * - hover color
+ * - pressed color
+ *
+ * Any omitted configuration values will fall back to the component defaults.
+ *
+ * @returns { React.JSX.Element}
+ *
+ * @example
+ * ```tsx
+ * <CustomStrategyTabsFilter
+ *   items={[
+ *     {
+ *       id: 'all',
+ *       text: 'All',
+ *       isSelected: true,
+ *       allowedSelectedWith: [],
+ *     },
+ *     {
+ *       id: 'open',
+ *       text: 'Open',
+ *       isSelected: false,
+ *     },
+ *   ]}
+ *   onClick={(item) => console.log(item)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <CustomStrategyTabsFilter
+ *   items={items}
+ *   onClick={handleFilterClick}
+ *   customViewConfig={{
+ *     selectIcon: 'Check',
+ *     backgroundColor: {
+ *       select: 'primary',
+ *       unselect: 'base-white',
+ *     },
+ *     textColor: {
+ *       select: 'base-white',
+ *       unselect: 'base-black',
+ *     },
+ *   }}
+ * />
+ * ```
+ */
+declare const CustomStrategyTabsFilter: FunctionComponent<TCustomStrategyTabsFilterProps>;
+export default CustomStrategyTabsFilter;

package/dist/components/molecules/CustomStrategyTabsFilter/index.d.ts

@@ -0,0 +1,2 @@
+import CustomStrategyTabsFilter from './CustomStrategyTabsFilter';
+export default CustomStrategyTabsFilter;

package/dist/components/molecules/CustomStrategyTabsFilter/styled.d.ts

@@ -0,0 +1,18 @@
+export declare const ScrollContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TabsContainerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTab: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    children: import("react").ReactNode;
+    onClick?: ((event: import("react").MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | undefined;
+    className?: string | undefined;
+} & {
+    iconName?: "AddToMyList" | "Arrow" | "ArrowPagination" | "AudioDescription" | "Back10" | "BalletAndDance" | "Basket" | "BasketFull" | "BritishSignLanguage" | "BookTickets" | "CarouselArrow" | "ChooseDates" | "Cinema" | "Clips" | "Clock" | "Close" | "Captioned" | "ClosedCaptions" | "Confirm" | "CreditCard" | "Delete" | "Detract" | "DropdownArrow" | "EditMyList" | "Email" | "Expand" | "Expand12px" | "ExternalLink" | "Facebook" | "FamilyFriendly" | "Favourite" | "FavouriteFull" | "Filter" | "FindAScreening" | "Forward10" | "FullScreen" | "GridView" | "Home" | "Info" | "Instagram" | "LastPageArrow" | "List" | "ListView" | "LiveStream" | "Location" | "Menu" | "Minimise" | "Muted" | "NavLogoMobile" | "NavLogoNoCrest" | "NavLogoWithCrest" | "OnMyList" | "OpenCaptions" | "OperaAndMusic" | "Pause" | "PDF" | "Phone" | "Play" | "Print" | "Refresh" | "RelaxedPerformance" | "Reminder" | "Remove" | "Remove12px" | "Restart" | "Search" | "Seat" | "Secure" | "Settings" | "Shift" | "Space" | "Standing" | "Star" | "Subscribe" | "Subtitles" | "Tick" | "Tickets" | "Tiktok" | "TouchTour" | "Trailer" | "Twitter" | "User" | "UserSignedIn" | "Volume" | "Watch" | "Wheelchair" | "X" | "Youtube" | undefined;
+    iconDirection?: "left" | "right" | "up" | "down" | "reverse" | undefined;
+    iconClassName?: string | undefined;
+} & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & Pick<{
+    textColor?: "primary" | "primary-red" | "primary-black" | "base-white" | "base-black" | "base-dark-grey" | "base-mid-grey" | "base-light-grey" | "base-transparent" | "state-error" | "state-medium" | "state-good" | "state-focused" | "state-disabled" | "rbo-red-hovered" | "rbo-red-pressed" | "rbo-black-hovered" | "rbo-black-pressed" | "black-hovered" | "black-pressed" | "white-hovered" | "white-pressed" | "secondary-yellow" | "secondary-pink" | "secondary-orange" | "secondary-blue" | undefined;
+    backgroundColor?: "primary" | "primary-red" | "primary-black" | "base-white" | "base-black" | "base-dark-grey" | "base-mid-grey" | "base-light-grey" | "base-transparent" | "state-error" | "state-medium" | "state-good" | "state-focused" | "state-disabled" | "rbo-red-hovered" | "rbo-red-pressed" | "rbo-black-hovered" | "rbo-black-pressed" | "black-hovered" | "black-pressed" | "white-hovered" | "white-pressed" | "secondary-yellow" | "secondary-pink" | "secondary-orange" | "secondary-blue" | undefined;
+    borderColor?: "primary" | "primary-red" | "primary-black" | "base-white" | "base-black" | "base-dark-grey" | "base-mid-grey" | "base-light-grey" | "base-transparent" | "state-error" | "state-medium" | "state-good" | "state-focused" | "state-disabled" | "rbo-red-hovered" | "rbo-red-pressed" | "rbo-black-hovered" | "rbo-black-pressed" | "black-hovered" | "black-pressed" | "white-hovered" | "white-pressed" | "secondary-yellow" | "secondary-pink" | "secondary-orange" | "secondary-blue" | undefined;
+    hoveredColor?: "primary" | "primary-red" | "primary-black" | "base-white" | "base-black" | "base-dark-grey" | "base-mid-grey" | "base-light-grey" | "base-transparent" | "state-error" | "state-medium" | "state-good" | "state-focused" | "state-disabled" | "rbo-red-hovered" | "rbo-red-pressed" | "rbo-black-hovered" | "rbo-black-pressed" | "black-hovered" | "black-pressed" | "white-hovered" | "white-pressed" | "secondary-yellow" | "secondary-pink" | "secondary-orange" | "secondary-blue" | undefined;
+    pressedColor?: "primary" | "primary-red" | "primary-black" | "base-white" | "base-black" | "base-dark-grey" | "base-mid-grey" | "base-light-grey" | "base-transparent" | "state-error" | "state-medium" | "state-good" | "state-focused" | "state-disabled" | "rbo-red-hovered" | "rbo-red-pressed" | "rbo-black-hovered" | "rbo-black-pressed" | "black-hovered" | "black-pressed" | "white-hovered" | "white-pressed" | "secondary-yellow" | "secondary-pink" | "secondary-orange" | "secondary-blue" | undefined;
+    disabled?: boolean | undefined;
+}, "textColor" | "backgroundColor" | "hoveredColor" | "pressedColor" | "disabled"> & import("react").RefAttributes<HTMLAnchorElement>>, any, {}, never>;

package/dist/components/molecules/PageHeading/PageHeading.style.d.ts

@@ -1,11 +1,12 @@
 export interface IPageHeadingWrapperProps {
     isPageHeadingWithoutTitle?: boolean;
+    isMultipleRow?: boolean;
 }
 export declare const PageHeadingWrapper: import("styled-components").StyledComponent<"div", any, IPageHeadingWrapperProps, never>;
-export declare const PageHeadingGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PageHeadingGrid: import("styled-components").StyledComponent<"div", any, IPageHeadingWrapperProps, never>;
 export declare const BadgeWrapper: import("styled-components").StyledComponent<"div", any, IPageHeadingWrapperProps, never>;
 export declare const TitleWrapper: import("styled-components").StyledComponent<"div", any, IPageHeadingWrapperProps, never>;
 export declare const ChildrenWrapper: import("styled-components").StyledComponent<"div", any, IPageHeadingWrapperProps, never>;
 export declare const TextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LogoWrapper: import("styled-components").StyledComponent<"div", any, IPageHeadingWrapperProps, never>;
-export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, IPageHeadingWrapperProps, never>;

package/dist/components/molecules/index.d.ts

@@ -11,6 +11,7 @@ import ContactNewsletter from './ContactNewsletter';
 import ContentSummary from './ContentSummary';
 import Editorial from './Editorial';
 import HotFilters from './HotFilters';
+import CustomStrategyTabsFilter from './CustomStrategyTabsFilter';
 import Information from './Information';
 import { PageHeading, PageHeadingImpact, PageHeadingPanel, PageHeadingCompact, PageHeadingPromo, PageHeadingHighlight, PageHeadingHighlightCarousel } from './PageHeading';
 import Pagination from './Pagination';
@@ -43,4 +44,4 @@ import AnchorBar from './AnchorBar';
 import SkipToMain from './SkipToMain';
 import Paywall from './Paywall';
 import UpsellCards from './UpsellCards';
-export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AuxiliaryNav, Basket, BodyContent, Card, Cards, CastFilter, ContactCard, ContactNewsletter, ContentSummary, CreditListing, Editorial, HotFilters, ImageWithCaption, Information, MiniCard, NavTop, PersonCard, PersonDetails, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingHighlight, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlightCarousel, PasswordStrength, Pagination, Paywall, PeopleListing, PolicyLinks, PromoWithTags, PromoWithTitle, Quote, RadioGroup2, ReadMore, StatusBanner, SectionTitle, SearchBar, Select2, Select2Async, SignUpForm, Swipe, SwipeRef, Tabs, Table, UpsellCard, UpsellCards, VideoWithControls, SkipToMain, };
+export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AuxiliaryNav, Basket, BodyContent, Card, Cards, CastFilter, ContactCard, ContactNewsletter, ContentSummary, CreditListing, CustomStrategyTabsFilter, Editorial, HotFilters, ImageWithCaption, Information, MiniCard, NavTop, PersonCard, PersonDetails, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingHighlight, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlightCarousel, PasswordStrength, Pagination, Paywall, PeopleListing, PolicyLinks, PromoWithTags, PromoWithTitle, Quote, RadioGroup2, ReadMore, StatusBanner, SectionTitle, SearchBar, Select2, Select2Async, SignUpForm, Swipe, SwipeRef, Tabs, Table, UpsellCard, UpsellCards, VideoWithControls, SkipToMain, };