@royaloperahouse/harmonic 0.19.1-a → 0.19.1-b

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, Carousel, CastFilter, 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, Radio2, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, 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 { 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 BodyContent from './components/molecules/BodyContent';
 import Quote from './components/molecules/Quote';
 import { devices, breakpoints } from './styles/viewports';
@@ -12,4 +12,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, CastFilter, 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, PersonCard, Paywall, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio2, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, 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 { 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, 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, };

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/card.d.ts

@@ -144,4 +144,6 @@ export interface RoleComponentProps {
     role: ListingRole;
     /** Custom CSS classes */
     className?: string;
+    /** Render person headshot in greyscale */
+    greyscale?: boolean;
 }

package/dist/types/impactHeader.d.ts

@@ -20,46 +20,28 @@ export interface CustomSponsorImageData {
     title: string;
 }
 export interface IPageHeadingImpactProps {
-    /**
-     * Text placed in the impact component
-     */
+    /** Text placed in the impact component */
     text?: string;
-    /**
-     * Link placed in the impact component
-     */
+    /**  Link placed in the impact component */
     link?: EditorialLink;
-    /**
-     * Boolean to show/hide sponsorship logo (default true)
-     */
+    /** Boolean to show/hide sponsorship logo (default true) */
     sponsor?: boolean;
-    /**
-     * Data for custom sponsor
-     */
+    /** Data for custom sponsor */
     customSponsorImage?: CustomSponsorImageData;
-    /**
-     * Background url for desktops
-     */
+    /**  Background url for desktops */
     bgUrlDesktop: string;
-    /**
-     * Background url for devices
-     */
+    /**  Background url for devices */
     bgUrlDevice?: string;
-    /**
-     * Alt text for the main image
-     */
+    /** Alt text for the main image */
     bgImageAltText?: string;
-    /**
-     * Logo to be placed in page heading component
-     */
+    /** Desktop video url */
+    videoUrlDesktop?: string;
+    /** Mobile video url */
+    videoUrlMobile?: string;
+    /** Logo to be placed in page heading component */
     children?: ReactNode;
-    /**
-     * Internal anchor ref
-     */
-    scrollHref?: string;
-    /**
-     * Semantic level of the header
-     */
-    semanticLevel?: TypographyLevel;
+    /** Custom CSS classes */
+    className?: string;
 }
 export declare type BrandingStyle = 'BlockText' | 'BodyText' | 'StreamLogo' | 'CinemaLogo' | 'TextLink';
 export interface IPageHeadingCompactProps {

package/dist/types/signUpForm.d.ts

@@ -68,6 +68,7 @@ export interface ISignUpFormProps {
 export declare type SignUpFormComponentTitleProps = {
     title: string;
     isMobile?: boolean;
+    titleFontFamily?: 'Grey' | 'Victor' | undefined;
 };
 export declare type SignUpFormComponentMessageProps = {
     message: 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;
 }
@@ -350,6 +358,10 @@ export interface IPeopleListing {
     roles: ListingRole[];
     /** Custom CSS classes */
     className?: string;
+    /** Render person headshots in greyscale */
+    greyscale?: boolean;
+    /** Optional number of people per row on large desktop */
+    largeDesktopColumns?: 3 | 4;
 }
 export interface IPagination {
     /**
@@ -485,6 +497,10 @@ export declare type ICastFiltersProps = {
      * Handle clicking the text link.
      */
     onClear?: () => void;
+    /**
+     * Render person images in greyscale
+     */
+    greyscale?: boolean;
 };
 export interface ISponsorshipProps {
     /**
@@ -717,6 +733,12 @@ export interface IVideoControlsProps {
      */
     loop?: boolean;
 }
+export interface IVideoControlsImpactProps {
+    /** Video element id */
+    videoElementId: string;
+    /** Loops */
+    loop?: boolean;
+}
 export declare type IVideoWithControlsSettings = Omit<IVideoControlsProps, 'videoElementId' | 'videoContainerId'>;
 export interface IVideoWithControlsProps {
     /**

package/dist/types/upsell.d.ts

@@ -80,4 +80,6 @@ export interface IUpsellSectionProps {
     theme?: ThemeType;
     /** Custom CSS classes */
     className?: string;
+    /** Sets Font Family by default Grey */
+    titleFontFamily?: 'Victor' | 'Grey' | undefined;
 }

package/package.json

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