@royaloperahouse/harmonic 0.4.1 → 0.5.0-a

package/dist/types/quote.d.ts

@@ -1,19 +1,8 @@
-import { StyledProps } from 'styled-components';
 export interface IQuoteProps {
-    /**
-     * Text placed in the Quote component
-     */
+    /** Text placed in the Quote component */
     text: string;
-    /**
-     * Attribution under the main text
-     */
+    /** Attribution under the main text */
     attribution?: string;
-}
-export interface IQuoteAttributionBlockProps extends StyledProps<{
-    displayAttribution: boolean;
-}> {
-    /**
-     * Set visibility of the attribution block
-     */
-    displayAttribution: boolean;
+    /** Custom CSS classes */
+    className?: string;
 }

package/dist/types/tableTypes.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { Colors } from './types';
 export interface ContentProps {
     content: string | ReactNode;
 }
@@ -7,42 +6,26 @@ export interface CellProps {
     cell: ReactNode;
     cellIndex: number;
     columns: number;
-    lineColor: Colors;
 }
 export declare type TableRowData = Array<Record<string, unknown>>;
 export interface RowProps {
     row: TableRowData;
     rowIndex: number;
     columns: number;
-    lineColor: Colors;
 }
 export interface ITableProps {
-    /**
-     * Number of columns in table
-     */
+    /** Number of columns in table */
     columns: number;
-    /**
-     * Headings array
-     */
+    /** Headings array */
     headings?: string[];
-    /**
-     * Table content
-     */
+    /** Table content */
     children: ReactNode;
-    /**
-     * Line divider color
-     */
-    lineColors?: Colors;
-    /**
-     * Rows in table per page for pagination
-     */
+    /** Rows in table per page for pagination */
     rowsPerPage: number;
-    /**
-     * Pagination
-     */
+    /** Enable pagination */
     pagination?: boolean;
-    /**
-     * Description - for Accessibility, aria-describedby prop
-     */
+    /** Description for accessibility (aria-describedby) */
     description?: string;
+    /** Custom CSS classes */
+    className?: string;
 }

package/dist/types/types.d.ts

@@ -1,7 +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",
     Black = "black",
@@ -52,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;
 }
@@ -117,6 +111,10 @@ export interface ITabProps {
      * To keep selected the title of the Tab
      */
     selected?: boolean;
+    /**
+     * Icon direction
+     */
+    iconDirection?: DirectionType;
     /**
      * The name of the icon
      */
@@ -149,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.
      */
@@ -157,6 +159,22 @@ export interface ITabProps {
      * Provides an accessible label for screen readers to describe the element's purpose.
      */
     ariaLabel?: string;
+    /**
+     * 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 {
     /**
@@ -207,6 +225,14 @@ export interface IDropdownProps {
      * Provides an accessible label for screen readers to describe the element's purpose.
      */
     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
+     */
+    trimTabText?: boolean;
 }
 export interface ITabsProps {
     /**
@@ -268,6 +294,10 @@ export interface IControlledDropdownProps {
      * Callback called when main link or option are focused
      */
     onFocus?: () => void;
+    /**
+     * Callback called when focus leaves element
+     */
+    onFocusLeave?: () => void;
     /**
      * Callback called when main link or last option lose focus
      */
@@ -324,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 {
     /**
@@ -375,29 +405,100 @@ export interface IGridItemProps extends StyledProps<any> {
      */
     columnSpanSmallDevice?: number;
 }
-export interface ISponsorLogoProps {
-    /**
-     * Color for the logo
-     */
-    colorLogo?: string;
+export interface ISponsorLogoProps extends ExternalLink {
     /**
-     * Color for the background of the logo
+     * S3 Image source
      */
-    colorBackground?: string;
+    imageSource?: string;
     /**
      * Alternative text for the logo (used for accessibility)
      */
     alt?: string;
+    /**
+     * Content to be displayed within the component.
+     */
+    children?: ReactNode;
+    /**
+     * Additional CSS class names to apply to the navigation component.
+     */
+    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.
      */
     src?: string;
-    /**
-     * Alt Text for image.
-     */
-    altText?: string;
     /**
      * Used for Analytics.
      */
@@ -406,10 +507,6 @@ export interface ISponsorshipProps {
      * Used for Accessibility.
      */
     title?: string;
-    /**
-     * Used to determine that there is custom data for Sponsorship
-     */
-    isCustomImage?: boolean;
 }
 export interface ITextLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     children: ReactNode;
@@ -431,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 {
     /**
@@ -442,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 {
     /**
@@ -504,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";
@@ -676,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",
+  "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"
 }