@royaloperahouse/harmonic 1.0.1-c → 1.0.1-e

package/dist/types/typography.d.ts

@@ -0,0 +1,126 @@
+import { ReactNode } from 'react';
+import { StyledProps } from 'styled-components';
+export declare const HarmonicSize: {
+    readonly Small: "small";
+    readonly Medium: "medium";
+    readonly Large: "large";
+};
+export declare type HarmonicSize = (typeof HarmonicSize)[keyof typeof HarmonicSize];
+export declare const HeaderHierarchy: {
+    readonly H1: "h1";
+    readonly H2: "h2";
+    readonly H3: "h3";
+};
+export declare type HeaderHierarchy = (typeof HeaderHierarchy)[keyof typeof HeaderHierarchy];
+export declare type HarmonicColors = 'primary' | 'black' | 'white' | 'red' | 'grey' | 'inherit';
+export interface IGenericTypographyProps<T extends HTMLElement = HTMLParagraphElement> extends React.HTMLAttributes<T> {
+    children?: ReactNode;
+    size?: HarmonicSize;
+    serif?: boolean;
+    color?: HarmonicColors;
+    em?: boolean;
+    bold?: boolean;
+    className?: string;
+}
+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;
+export declare type BodyLevel = 1 | 2 | 3;
+export declare type SubtitleLevel = 1 | 2;
+export declare type OverlineLevel = 1 | 2 | 3 | 4;
+export declare type TypographyType = 'header' | 'altHeader' | 'body' | 'subtitle' | 'overline';
+interface IStyledTypographyProps {
+    level: TypographyLevel;
+    typography: TypographyType;
+}
+export interface ITypographyWrapperProps extends StyledProps<IStyledTypographyProps> {
+    /**
+     * Typography level to use for generic Typography subcomponent.
+     */
+    level: TypographyLevel;
+    /**
+     * Typography type to use for generic Typography subcomponent.
+     */
+    typography: TypographyType;
+}
+interface IGenericTypography {
+    /**
+     * Text or HTML content to wrap in a styled tag.
+     */
+    children: ReactNode;
+}
+export interface IStyledTag extends Omit<ITypographyWrapperProps, 'theme'>, IGenericTypography {
+    /**
+     * HTML tag to use to render component, by default div.
+     */
+    tag?: React.ElementType;
+}
+export interface IHeaderProps extends IGenericTypography {
+    /**
+     * Display Header level, 1, 2, 3, 4, 5 or 6.
+     */
+    level: TypographyLevel;
+    /**
+     * Semantic Header level, 1, 2, 3, 4, 5 or 6. - Not to be used for aeshetics.
+     */
+    semanticLevel?: TypographyLevel;
+}
+export interface IAltHeaderProps extends IGenericTypography {
+    /**
+     * AltHeader level, 3, 4, 5 or 6.
+     */
+    level: AltHeaderLevel;
+    /**
+     * Semantic Header level, 1, 2, 3, 4, 5 or 6. - Not to be used for aeshetics.
+     */
+    semanticLevel?: TypographyLevel;
+}
+export interface IBodyTextProps extends IGenericTypography {
+    /**
+     * BodyText level, 1, 2 or 3.
+     */
+    level: BodyLevel;
+    /**
+     * HTML tag to use to render BodyText, by default div.
+     */
+    tag?: React.ElementType;
+}
+export interface ISubtitleProps extends IGenericTypography {
+    /**
+     * Subtitle level, 1 or 2.
+     */
+    level: SubtitleLevel;
+    /**
+     * Semantic Header level, 1, 2, 3, 4, 5 or 6. - Not to be used for aeshetics.
+     */
+    semanticLevel?: TypographyLevel;
+    /**
+     * HTML tag to use to render Subtitle, by default div.
+     */
+    tag?: React.ElementType;
+}
+export interface IOverlineProps extends IGenericTypography {
+    /**
+     * Overline level, 1 or 2.
+     */
+    level: OverlineLevel;
+    /**
+     * Semantic Header level, 1, 2, 3, 4, 5 or 6. - Not to be used for aeshetics.
+     */
+    semanticLevel?: TypographyLevel;
+    /**
+     * HTML tag to use to render Overline, by default div.
+     */
+    tag?: React.ElementType;
+}
+export {};

package/dist/types/upsell.d.ts

@@ -0,0 +1,85 @@
+import { EditorialLink, ThemeType } from '.';
+export interface IOfferTextProps {
+    /**
+     * Repeatable element title
+     */
+    title?: string;
+    /**
+     * Repeatable element description
+     */
+    description?: string;
+}
+export interface IUpsellCardProps {
+    /**
+     * Card title
+     */
+    title?: string;
+    /**
+     * Card subtitle
+     */
+    subTitle?: string;
+    /**
+     * Card price
+     */
+    price?: string;
+    /**
+     * Promo price
+     */
+    promoPrice?: string;
+    /**
+     * Flag for featurette (e.g. "best offer")
+     */
+    flag?: string;
+    /**
+     * Offer texts repeatable elements
+     */
+    offerTexts?: IOfferTextProps[];
+    /**
+     *
+     */
+    link?: EditorialLink;
+    /**
+     * 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 {
+    /**
+     * Array of upsellCards
+     */
+    upsellCards?: IUpsellCardProps[];
+    /**
+     * Theme options
+     */
+    theme?: ThemeType;
+}
+export interface IUpsellSectionProps {
+    /** Upsell Section title */
+    title?: string;
+    /** Richtext section */
+    richText?: string;
+    /** CTA link. Eg. for sign in. */
+    link?: EditorialLink;
+    /** Array of upsellCards */
+    upsellCards?: IUpsellCardProps[];
+    /** Theme options */
+    theme?: ThemeType;
+    /** Custom CSS classes */
+    className?: string;
+    /** Sets Font Family by default Grey */
+    titleFontFamily?: 'Victor' | 'Grey' | undefined;
+}

package/dist/types/utility.d.ts

@@ -0,0 +1,4 @@
+import { themes } from '../styles/themes';
+declare type Themes = typeof themes;
+export declare type Theme = Themes[keyof Omit<Themes, 'fontFamilies'>];
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@royaloperahouse/harmonic",
-  "version": "1.0.1-c",
+  "version": "1.0.1-e",
   "author": "Royal Opera House",
   "license": "MIT",
   "main": "dist/index.js",
@@ -22,6 +22,7 @@
     "test:watch": "jest --watch --verbose --passWithNoTests",
     "lint": "eslint src",
     "format": "prettier --write src",
+    "prepare": "tsdx build",
     "size": "size-limit",
     "analyze": "size-limit --why",
     "storybook": "storybook dev -p 6006",