@royaloperahouse/harmonic 0.4.1-j → 0.5.0-a

package/dist/types/types.d.ts

@@ -1,7 +1,6 @@
 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",
@@ -53,14 +52,8 @@ 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;
 }
@@ -170,6 +163,18 @@ export interface ITabProps {
      * Text color
      */
     color?: ThemeColor;
+    /**
+     * 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.
+     */
+    isOpen?: boolean;
 }
 export interface IDropdownProps {
     /**
@@ -224,6 +229,10 @@ export interface IDropdownProps {
      * 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;
 }
 export interface ITabsProps {
     /**
@@ -345,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 {
     /**
@@ -414,6 +423,77 @@ export interface ISponsorLogoProps extends ExternalLink {
      */
     className?: string;
 }
+export declare type IHotFilterItem = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'aria-label' | 'role'> & {
+    text: string;
+    onClick?: () => void;
+};
+export declare type IHotFilterProps = {
+    items: IHotFilterItem[];
+    className?: string;
+    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.
@@ -448,10 +528,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 {
     /**
@@ -459,46 +539,34 @@ export interface ITypeTagsProps {
      */
     list: string[];
 }
-export interface ITextOnlyProps {
-    /**
-     * Text placed in the TextOnly component
-     */
+export interface IBodyContentProps {
+    /** Text placed in the BodyContent 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 columnSpam in Device
-     */
+    /** Set columnSpan in Device */
     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 {
-    /**
-     * 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;
-    /**
-     * Semantic level of the title.
-     */
-    semanticLevel?: TypographyLevel;
+    /** Custom CSS classes */
+    className?: string;
 }
 export interface ILogosProps {
     /**
@@ -521,44 +589,22 @@ 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;
-    /**
-     * Components wrapped into the accordion that are always visible
-     */
-    visibleStandfirst?: ReactNode;
-    /**
-     * Set if accordions are stacked
-     */
+    /** Set if accordions are stacked */
     showLine?: boolean;
-    /**
-     * Set init open
-     */
+    /** Set init open */
     initOpen?: boolean;
-    /**
-     * 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;
+    /** Custom CSS classes */
+    className?: string;
 }
 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";
@@ -693,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/typography.d.ts

@@ -22,8 +22,16 @@ export interface IGenericTypographyProps<T extends HTMLElement = HTMLParagraphEl
     bold?: boolean;
     className?: string;
 }
-export interface IHarmonicHeaderProps extends IGenericTypographyProps {
+export declare type HarmonicHeaderProps = (IGenericTypographyProps<HTMLHeadingElement> & {
     hierarchy: HeaderHierarchy;
+    tag?: never;
+}) | (IGenericTypographyProps<HTMLHeadingElement> & {
+    tag?: React.ElementType;
+    hierarchy?: never;
+});
+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;

package/dist/types/upsell.d.ts

@@ -39,9 +39,23 @@ export interface IUpsellCardProps {
      */
     link?: EditorialLink;
     /**
-     * Theme: Core, Stream, or Cinema
+     * Optional link for secondary CTA
+     */
+    secondaryLink?: EditorialLink;
+    /**
+     * If true, switch to stacked CTAs earlier than usual to avoid button text spanning
+     * two lines. Useful when this component is rendered within in a narrow parent
+     * such as as an item in the Upsell Section.
+     */
+    stackCtasEarly?: boolean;
+    /**
+     * Theme for primary CTA: Core, Stream, or Cinema
      */
     theme?: ThemeType;
+    /**
+     * Theme for secondary CTA: Core, Stream, or Cinema
+     */
+    secondaryTheme?: ThemeType;
 }
 export interface IUpsellCardsProps {
     /**
@@ -54,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.4.1-j",
+  "version": "0.5.0-a",
   "author": "Royal Opera House",
   "license": "MIT",
   "main": "dist/index.js",
@@ -142,5 +142,6 @@
       "npx eslint src --fix ",
       "npx prettier src --write --uncommitted"
     ]
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

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

@@ -1,4 +0,0 @@
-import { FunctionComponent } from 'react';
-import { ITextOnlyProps } from '../../../types/types';
-declare const TextOnly: FunctionComponent<ITextOnlyProps>;
-export default TextOnly;

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

@@ -1 +0,0 @@
-export declare const TextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

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