@royaloperahouse/harmonic 0.12.0-c → 0.12.1

package/dist/index.d.ts

@@ -1,13 +1,11 @@
-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, 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, Quote, VideoControls, VideoWithControls } from './components';
-import BodyContent from './components/molecules/BodyContent';
+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, 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, TextOnly, ThemeProvider, TitleWithCTA, Tab, Table, TabLink, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls } from './components';
 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 { MiniCard } from './components/molecules';
 import { ModalWindow } from './components/organisms';
 import AuxiliaryButton from './components/atoms/Buttons/Auxiliary/AuxiliaryButton';
-import HarmonicThemeProvider, { useHarmonicTheme } from './styles/HarmonicThemeProvider';
+import HarmonicThemeProvider from './styles/HarmonicThemeProvider';
 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, PageHeadingHighlight, PageHeadingPromo, 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, 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, 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, TextOnly, 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,13 +1,9 @@
 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;
     children: React.ReactNode;
 }
-export declare const HarmonicThemeContext: React.Context<ThemeType>;
-export declare const useHarmonicTheme: () => ThemeType;
 declare const HarmonicThemeProvider: React.FC<HarmonicThemeProviderProps>;
 export default HarmonicThemeProvider;

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

@@ -1,3 +1,2 @@
-import HarmonicThemeProvider, { useHarmonicTheme } from './HarmonicThemeProvider';
+import HarmonicThemeProvider from './HarmonicThemeProvider';
 export default HarmonicThemeProvider;
-export { useHarmonicTheme };

package/dist/types/buttonTypes.d.ts

@@ -13,6 +13,8 @@ declare type BaseProps = {
     onClick?: MouseEventHandler<HTMLAnchorElement>;
     /** Custom CSS classes */
     className?: string;
+    /** Styled Components theme */
+    theme?: unknown;
 };
 declare type IconProps = {
     /** Icon identifier */
@@ -50,12 +52,6 @@ export declare type RotatorButtonsProps = {
     onClickPrev?: () => void;
     /** Next button click handler */
     onClickNext?: () => void;
-    /** Show fullscreen button */
-    showFullscreen?: boolean;
-    /** Fullscreen button click handler */
-    onClickFullscreen?: () => void;
-    /** Is in fullscreen mode */
-    isFullscreen?: boolean;
     /** Custom CSS classes */
     className?: string;
 };

package/dist/types/contactCard.d.ts

@@ -1,12 +1,9 @@
+import { StyledProps } from 'styled-components';
 export interface IContactCardProps {
     /**
-     * Title
+     * Name
      */
-    title: string;
-    /**
-     * Title suffix
-     */
-    titleSuffix?: string;
+    name: string;
     /**
      * Description
      */
@@ -28,7 +25,24 @@ export interface IContactCardProps {
      */
     address?: string;
     /**
-     * The component's class name
+     * Set visibility of the top border
+     */
+    hideTopBorder?: boolean;
+    /**
+     * Set visibility of the top border
+     */
+    hideBottomBorder?: boolean;
+}
+export interface IContactCardWrapperProps extends StyledProps<{
+    hideTopBorder: boolean;
+    hideBottomBorder: boolean;
+}> {
+    /**
+     * Set visibility of the top border
+     */
+    hideTopBorder: boolean;
+    /**
+     * Set visibility of the bottom border
      */
-    className?: string;
+    hideBottomBorder: boolean;
 }

package/dist/types/editorial.d.ts

@@ -5,16 +5,22 @@ import { DirectionType, IconNameType } from './iconTypes';
 import { IVideoWithControlsSettings, ThemeColor, ThemeType } from './types';
 import { HarmonicSize, HeaderHierarchy } from './typography';
 export interface IEditorialProps {
-    /** Text placed in the editorial component */
+    /**
+     * Text placed in the editorial component
+     */
     text: string;
-    /** Subtitle placed in the editorial component */
+    /**
+     * Subtitle placed in the editorial component
+     */
     subtitle?: string;
-    /** Position of the image in the editorial component */
+    /**
+     * Position of the image in the editorial component
+     */
     imagePosition?: 'left' | 'right';
-    /** Image tag or component to be displayed in the editorial component with aspect ratio 1:1 */
+    /**
+     * Image tag or component to be displayed in the editorial component with aspect ratio 1:1
+     */
     children: ReactElement<HTMLImageElement>;
-    /** Custom CSS classes */
-    className?: string;
 }
 export interface IEditorialGridProps {
     /**

package/dist/types/impactHeader.d.ts

@@ -1,5 +1,5 @@
-import { ImgHTMLAttributes, ReactNode } from 'react';
-import { EditorialLink, ThemeColor } from '../types';
+import { ReactNode } from 'react';
+import { EditorialLink } from '../types';
 import { HeaderHierarchy, TypographyLevel } from './typography';
 export interface CustomSponsorImageData {
     /**
@@ -187,24 +187,4 @@ export interface IPageHeadingPromoProps {
      * Badge variant
      */
     badge?: PageHeadingPromoBadge;
-    /** 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/information.d.ts

@@ -1,5 +1,6 @@
 import { DirectionType, IconNameType } from './iconTypes';
-import { LinkTarget, ThemeType } from './types';
+import { LinkTarget } from './types';
+import type { ThemeChildProps } from './types';
 import type { HarmonicSize } from './typography';
 export declare const InformationCtaVariants: {
     readonly Primary: "Primary";
@@ -8,41 +9,60 @@ export declare const InformationCtaVariants: {
     readonly TextLink: "TextLink";
 };
 export declare type InformationCtaVariant = keyof typeof InformationCtaVariants;
-export interface IInformationCTAProps {
-    /** Text to display on the CTA */
+declare type ThemeProps = Pick<ThemeChildProps, 'theme'>;
+export interface IInformationCTAProps extends ThemeProps {
+    /**
+     * Text to display on the CTA
+     */
     text: string;
-    /** Link for the CTA */
+    /**
+     * Link for the CTA
+     */
     link: string;
-    /** Style of the CTA */
+    /**
+     * Style of the CTA
+     */
     variant?: InformationCtaVariant;
-    /** Name of the icon to be used in the button */
+    /**
+     * Name of the icon to be used in the button
+     */
     iconName?: IconNameType;
-    /** Direction of the icon used in the button */
+    /**
+     * Direction of the icon used in the button
+     */
     iconDirection?: DirectionType;
-    /** Attribute to specify where to open the link */
+    /**
+     * Attribute to specify where to open the link
+     */
     target?: LinkTarget;
-    /** Custom CSS classes */
-    className?: string;
 }
-export declare type InformationCTAWrapperProps = {
-    /** Style of the CTA */
-    variant: InformationCtaVariant;
-    /** Theme options */
-    theme?: ThemeType;
-};
+export declare type InformationCTAWrapperProps = Pick<IInformationCTAProps, 'variant' | 'theme'>;
 export interface IInformationTitleProps {
-    /** Title text to display */
+    /**
+     * Title text to display
+     */
     text: string;
-    /** The size of the title text */
+    /**
+     * The size of the title text
+     */
     textSize: HarmonicSize;
 }
-export interface IInformationProps {
-    /**  Main body text to display in the Information Component */
+export interface IInformationProps extends ThemeProps {
+    /**
+     * Main body text to display in the Information Component
+     */
     body: string;
-    /** Optional CTA to display underneath the body text */
+    /**
+     * Optional CTA to display underneath the body text
+     */
     cta?: IInformationCTAProps;
-    /** Title options for the component */
+    /**
+     * Title options for the component
+     */
     title?: IInformationTitleProps;
-    /** Custom CSS classes */
+    /**
+     * Additional CSS class names to apply to component.
+     */
     className?: string;
 }
+export {};

package/dist/types/navigation.d.ts

@@ -1,4 +1,4 @@
-import React, { AnchorHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import React, { AnchorHTMLAttributes, MouseEvent, MouseEventHandler, ReactNode } from 'react';
 import { DirectionType, IconNameType } from './iconTypes';
 import { Colors, IOptionItem, ThemeColor } from './types';
 export interface IAccountProps {
@@ -275,20 +275,26 @@ export interface IAnchorBarAbsolutePositionParams {
     topOffset: number;
 }
 export interface IAnchorBarProps {
-    /** Tabs displayed in the anchor bar */
+    /**
+     * Tabs displayed in the anchor bar
+     */
     tabs: AnchorBarTab[];
-    /** Function to be called when a tab is clicked */
-    onTabClick?: (e: React.MouseEvent<HTMLAnchorElement>, id: string) => void;
-    /** Set the id of the active tab */
+    /**
+     * Function to be called when a tab is clicked
+     */
+    onTabClick?: (e: MouseEvent, id: string) => void;
+    /**
+     * Set the id of the tab actived
+     */
     activeTab?: string;
-    /** Only for IOS devices that do not fully support sticky position, in case a keyboard is opened on the device */
+    /**
+     * Only for IOS devices that do not fully support sticky position, in case a keyboard is opened on the device
+     */
     absolutePositionParams?: IAnchorBarAbsolutePositionParams;
-    /** Boolean to set bottom border */
+    /**
+     * Boolean to set bottom border
+     */
     bottomBorder?: boolean;
-    /** Flag indicating whether the bar should have a shadow */
-    withShadow?: boolean;
-    /** Custom CSS classes */
-    className?: string;
 }
 export interface ITitleCTAProps {
     /**
@@ -325,40 +331,64 @@ export interface IAnchorTabsListProps {
     hasTwoArrows: boolean;
 }
 export interface IAnchorTabBarBorderProps {
-    /** Boolean to set bottom border */
-    bottomBorder?: boolean;
-    /** Flag indicating whether the anchor bar should have a shadow */
-    withShadow?: boolean;
+    /**
+     * Boolean to set bottom border
+     */
+    bottomBorder: boolean;
+}
+export interface IAnchorTabArrowsBoxProps {
+    /**
+     * Boolean to determine width of the arrows container
+     */
+    fullWidth: boolean;
 }
 export interface ITabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     children: ReactNode;
-    /** Function to be called when a button is clicked */
+    /**
+     * Function to be called when a button is clicked
+     */
     onClick?: MouseEventHandler<HTMLAnchorElement>;
-    /** Name of the icon to be used in the button */
+    /**
+     * Name of the icon to be used in the button
+     */
     iconName?: IconNameType;
-    /** Direction of the icon used in the button */
+    /**
+     * Direction of the icon used in the button
+     */
     iconDirection?: DirectionType;
-    /** Color of text and icon */
+    /**
+     * Color of text and icon
+     */
     color?: ThemeColor;
-    /** Color of text and icon on hover */
+    /**
+     * Color of text and icon on hover
+     */
     hoverColor?: ThemeColor;
-    /** Set if tab is selected or not */
+    /**
+     * Set if tab is selected or not
+     */
     selected?: boolean;
-    /** Custom CSS classes */
-    className?: string;
 }
 export interface IStickyBarProps {
     children: ReactNode;
-    /** Set columnStart in Desktop */
+    /**
+     * Set columnstart in Desktop
+     */
     columnStartDesktop?: number;
-    /** Set columnSpan in Desktop */
+    /**
+     * Set columnSpan in Desktop
+     */
     columnSpanDesktop?: number;
-    /** Set columnStart in Device */
+    /**
+     * Set columnstart in Device
+     */
     columnStartDevice?: number;
-    /** Set columnSpan in Device */
+    /**
+     * Set columnSpam in Device
+     */
     columnSpanDevice?: number;
-    /** Boolean to set bottom border */
-    bottomBorder?: boolean;
-    /** Custom CSS classes */
-    className?: string;
+    /**
+     * Hide bottom border line
+     */
+    hideBottomBorder?: boolean;
 }

package/dist/types/promoWithTags.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { EditorialLink, PromoLinks, PromoTitleHierarchy } from './editorial';
+import { EditorialLink, PromoLinks } from './editorial';
 import { IntegratedTimerProps } from './timer';
 import { Image } from './types';
 export interface IPromoWithTagsProps {
@@ -15,10 +15,6 @@ export interface IPromoWithTagsProps {
      * Title size
      */
     titleSize?: 'small' | 'large';
-    /**
-     * Semantic level of the promo title header - h2 or h3.
-     */
-    titleHierarchy: PromoTitleHierarchy;
     /**
      * Subtitle placed in the editorial component
      */
@@ -86,8 +82,4 @@ export interface IPromoWithTagsStyledProps {
      * Sets margin for the tags container
      */
     marginBottom?: number;
-    /**
-     * Sets mobile margin for the tags container
-     */
-    mobileMarginBottom?: number;
 }

package/dist/types/types.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode, AnchorHTMLAttributes, MouseEventHandler, ReactElement } from 'react';
 import { StyledProps } from 'styled-components';
 import { IconNameType, DirectionType } from './iconTypes';
+import { TypographyLevel, TypographyType } from './typography';
 import type { ExternalLink } from './links';
 export declare enum Colors {
     White = "white",
@@ -52,8 +53,14 @@ 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 */
+    /**
+     * The theme to use for the child elements
+     */
     theme: ThemeType;
     children: ReactNode;
 }
@@ -147,10 +154,6 @@ 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.
      */
@@ -218,11 +221,7 @@ export interface IDropdownProps {
      */
     ariaLabel?: string;
     /**
-     * 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
+     *  Defines if it is needed to trim the text of the Tab and add 3 dots in the end
      */
     trimTabText?: boolean;
 }
@@ -425,62 +424,6 @@ 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 = {
-    /**
-     * Array of cast to filter by.
-     */
-    cast: ICastFilterItem[];
-    /**
-     * A classname is required for the HarmonicThemeProvider to provide styles properly.
-     * If it is not provided here it will default to 'cast-filters'.
-     */
-    className?: string;
-    /**
-     * 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;
-    /**
-     * 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;
-    /**
-     * 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.
@@ -515,10 +458,10 @@ export interface ITextLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>
     textColor?: ThemeColor;
 }
 export interface ISectionSplitterProps {
-    /** Set the width of the Section to full */
+    /**
+     * Set the width of the Section to full
+     */
     fullWidth?: boolean;
-    /** Custom CSS classes */
-    className?: string;
 }
 export interface ITypeTagsProps {
     /**
@@ -526,30 +469,46 @@ export interface ITypeTagsProps {
      */
     list: string[];
 }
-export interface IBodyContentProps {
-    /** Text placed in the BodyContent component */
+export interface ITextOnlyProps {
+    /**
+     * Text placed in the TextOnly component
+     */
     text: string;
-    /** Set columnStart in Desktop */
+    /**
+     * Set columnstart in Desktop
+     */
     columnStartDesktop?: number;
-    /** Set columnSpan in Desktop */
+    /**
+     * Set columnSpan in Desktop
+     */
     columnSpanDesktop?: number;
-    /** Set columnStart in Device */
+    /**
+     * Set columnstart in Device
+     */
     columnStartDevice?: number;
-    /** Set columnSpan in Device */
+    /**
+     * Set columnSpam in Device
+     */
     columnSpanDevice?: number;
-    /** Custom CSS classes */
-    className?: string;
 }
 export declare type SectionTitleSize = 'small' | 'large';
 export interface ISectionTitleProps {
-    /** Title to display. */
+    /**
+     * Title to display.
+     */
     title: string;
-    /** Size of title to display - by default small, which renders as an H2 (and large is an H1). */
+    /**
+     * Size of title to display - by default small, which renders as an H2 (and large is an H1).
+     */
     size?: SectionTitleSize;
-    /** Optional description that can be rendered below the title. */
+    /**
+     * Optional description that can be rendered below the title.
+     */
     description?: string;
-    /** Custom CSS classes */
-    className?: string;
+    /**
+     * Semantic level of the title.
+     */
+    semanticLevel?: TypographyLevel;
 }
 export interface ILogosProps {
     /**
@@ -572,22 +531,44 @@ export interface ILogosStyledProps extends StyledProps<any> {
     fillColor?: Colors.White | Colors.Black;
 }
 export interface IAccordionProps {
-    /** Title to display. */
+    /**
+     * Title to display.
+     */
     title?: string;
-    /** The component to be wrapped into the accordion */
+    /**
+     * The component to be wrapped into the accordion
+     */
     children?: ReactNode;
-    /** Set if accordions are stacked */
+    /**
+     * Components wrapped into the accordion that are always visible
+     */
+    visibleStandfirst?: ReactNode;
+    /**
+     * Set if accordions are stacked
+     */
     showLine?: boolean;
-    /** Set init open */
+    /**
+     * Set init open
+     */
     initOpen?: boolean;
-    /** Custom CSS classes */
-    className?: string;
+    /**
+     * Set content type - header or subtitle
+     */
+    contentType?: TypographyType;
+    /**
+     * Set display level - aesthetic
+     */
+    displayLevel?: TypographyLevel;
+    /**
+     * Set semantic level - not to be used for aesthetic
+     */
+    semanticLevel?: TypographyLevel;
 }
 export interface IAccordionsProps {
-    /** Array of Accordion component */
+    /**
+     * Array of Accordion component
+     */
     items: IAccordionProps[];
-    /** Custom CSS classes */
-    className?: string;
 }
 export declare const BannerVariants: {
     readonly 'service-persistent': "service-persistent";

package/dist/types/typography.d.ts

@@ -25,10 +25,6 @@ export interface IGenericTypographyProps<T extends HTMLElement = HTMLParagraphEl
 export interface IHarmonicHeaderProps extends IGenericTypographyProps {
     hierarchy: HeaderHierarchy;
 }
-export interface ITaggedTypographyProps extends IGenericTypographyProps {
-    /** Specifies the HTML tag for rendering typography. The default is 'p'. */
-    tag?: React.ElementType;
-}
 export declare type TypographyLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export declare type AltHeaderLevel = 3 | 4 | 5 | 6;
 export declare type BodyLevel = 1 | 2 | 3;

package/package.json

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