@royaloperahouse/chord 1.1.0 → 1.2.10

package/dist/types/navigation.d.ts

@@ -1,4 +1,4 @@
-import { AnchorHTMLAttributes, MouseEvent, MouseEventHandler } from 'react';
+import React, { AnchorHTMLAttributes, MouseEvent, MouseEventHandler } from 'react';
 import { DirectionType, IconNameType } from './iconTypes';
 import { Colors, IOptionItem } from './types';
 import { ReactNode } from 'react';
@@ -20,7 +20,7 @@ export interface IAccountProps {
      */
     iconName?: IconNameType;
     /**
-     * The linknk of the title
+     * The link of the title
      */
     titleLink?: string;
     /**
@@ -33,6 +33,10 @@ export interface IBasketProps {
      * The value of the text
      */
     text?: string;
+    /**
+     * The unix timestamp when basket items will be released.
+     */
+    expiryTime?: number;
     /**
      * The value of the link
      */
@@ -42,9 +46,14 @@ export interface IBasketProps {
      */
     selected?: boolean;
     /**
-     * The number of items of the Basket
+     * The number of items of the Basket (eg. Tickets)
      */
     numItems?: number;
+    /**
+     * The number of 'virtual' items of the Basket (eg. Stream subscription)
+     * These items remain in the basket after expiryTime is reached
+     */
+    numVirtualItems?: number;
     /**
      * Function to be called when is clicked
      */
@@ -53,6 +62,10 @@ export interface IBasketProps {
      * The primary color
      */
     colorPrimary?: string;
+    /**
+     * For changing the color of the basket icon & text (when not in hover state)
+     */
+    isActive?: boolean;
 }
 export interface ISearchProps {
     /**
@@ -96,6 +109,10 @@ export interface INavTopProps {
      * The text of Basket component
      */
     basketText?: string;
+    /**
+     * The unix timestamp when basket items will be released.
+     */
+    basketExpiryUnixTimestamp?: number;
     /**
      * The link of Basket component
      */
@@ -104,6 +121,15 @@ export interface INavTopProps {
      * The number of items of Basket component
      */
     basketNumItems?: number;
+    /**
+     * The number of 'virtual' items of the Basket (eg. Stream subscription)
+     * These items remain in the basket after expiryTime is reached
+     */
+    basketNumVirtualItems?: number;
+    /**
+     * For changing the color of the basket icon & text (when not in hover state)
+     */
+    basketIsActive?: boolean;
     /**
      * To know if search component is showed or not
      */
@@ -179,7 +205,7 @@ export interface ISearchBarProps {
     /**
      * Function to be called when is closed
      */
-    onClose: () => void;
+    onClose?: (e?: React.MouseEvent) => void;
 }
 export declare type TitleCTALink = AnchorHTMLAttributes<HTMLAnchorElement> & {
     /**
@@ -218,6 +244,16 @@ export declare type AnchorBarTab = AnchorHTMLAttributes<HTMLAnchorElement> & {
      */
     color?: Colors;
 };
+export interface IAnchorBarAbsolutePositionParams {
+    /**
+     * Navigation height that we need to calculate AnchorTabBar position properly
+     */
+    navigationHeight: number;
+    /**
+     * Height of the content that is located in place before AnchorTabBar
+     */
+    topOffset: number;
+}
 export interface IAnchorBarProps {
     /**
      * Tabs displayed in the anchor bar
@@ -231,6 +267,14 @@ export interface IAnchorBarProps {
      * 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
+     */
+    absolutePositionParams?: IAnchorBarAbsolutePositionParams;
+    /**
+     * Boolean to set bottom border
+     */
+    bottomBorder?: boolean;
 }
 export interface ITitleCTAProps {
     /**
@@ -261,6 +305,22 @@ export interface IAnchorTabsListProps {
      * Boolean to determine that the list tab is overflowed
      */
     tabsOverflow: boolean;
+    /**
+     * Boolean to determine if there are two arrows displayed
+     */
+    hasTwoArrows: boolean;
+}
+export interface IAnchorTabBarBorderProps {
+    /**
+     * 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;
@@ -307,4 +367,8 @@ export interface IStickyBarProps {
      * Set columnSpam in Device
      */
     columnSpanDevice?: number;
+    /**
+     * Hide bottom border line
+     */
+    hideBottomBorder?: boolean;
 }

package/dist/types/progress.d.ts

@@ -0,0 +1,33 @@
+import { Colors } from './types';
+export interface IProgressSteps {
+    /**
+     * Number of the steps
+     */
+    quantity: number;
+    /**
+     * Current step
+     */
+    current: number;
+}
+export interface IProgressProps {
+    /**
+     * The progress percentage
+     */
+    progress?: number;
+    /**
+     * The progress bar height
+     */
+    height?: number;
+    /**
+     * Color of the elapsed line
+     */
+    elapsedLineColor?: Colors;
+    /**
+     * Color of the pending line
+     */
+    pendingLineColor?: Colors;
+    /**
+     * Number of the steps
+     */
+    steps?: IProgressSteps;
+}

package/dist/types/promoWithTags.d.ts

@@ -0,0 +1,81 @@
+import { ReactElement } from 'react';
+import { EditorialLink, PromoLinks } from './editorial';
+import { IntegratedTimerProps } from './timer';
+import { Image } from './types';
+export interface IPromoWithTagsProps {
+    /**
+     * Text placed in the editorial component
+     */
+    text?: string;
+    /**
+     * Title placed in the editorial component
+     */
+    title: string;
+    /**
+     * Title size
+     */
+    titleSize?: 'small' | 'large';
+    /**
+     * Subtitle placed in the editorial component
+     */
+    subtitle?: string;
+    /**
+     * Position of the image in the editorial component
+     */
+    imagePosition?: 'left' | 'right';
+    /**
+     * Image to be displayed in the editorial component with aspect ratio 4:3
+     */
+    image?: Image;
+    /**
+     * Component to be displayed instead of the image after clicking on the button
+     */
+    children?: ReactElement<HTMLElement>;
+    /**
+     * Array of buttons props. First one should have PrimaryButton attributes, second one Tertiary button attributes
+     */
+    links?: PromoLinks;
+    /**
+     * Array of buttons props that will be displayed above the main buttons
+     */
+    textLinks?: EditorialLink[];
+    /**
+    /**
+     * Array of tags in the editorial component
+     */
+    aboveTitleTags?: string[];
+    /**
+     * Array of tags in the editorial component
+     */
+    belowTitleTags?: string[];
+    /**
+     * Text in the middle
+     */
+    middleText?: string;
+    /**
+     * Text in the bottom
+     */
+    bottomText?: string;
+    /**
+     * Display with reduced height & font size for use as card
+     */
+    asCard?: boolean;
+    /**
+     * Make CTA appear disabled
+     */
+    disableCTA?: boolean;
+    /**
+     * Copy to show on disabled CTA
+     */
+    disabledCTACopy?: string;
+    /**
+     * Params for Timer component
+     */
+    timerParams?: IntegratedTimerProps;
+}
+export interface IPromoWithTagsStyledProps {
+    /**
+     * Sets margin for the tags container
+     */
+    marginBottom?: number;
+}

package/dist/types/tickbox.d.ts

@@ -15,6 +15,12 @@ export interface ITickboxProps {
      * Mode to determine colors of text and checkmark
      */
     mode?: TickboxMode;
+    /**
+     * Use a white background and black checkmark for the tickbox,
+     * regardless of mode?
+     * PREFERRED in new components, but not default
+     */
+    whiteBox?: boolean;
     /**
      * Callback called when tickbox change
      */
@@ -23,22 +29,51 @@ export interface ITickboxProps {
      * Data label for tickbox
      */
     dataLabel?: string;
+    /**
+     * Element is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Error message, default is undefined. To show the tickbox
+     * in an error state without any text, pass in an empty string.
+     */
+    error?: string;
 }
 export interface TickboxLabelProps {
     /**
      * Dark mode or not
      */
     dark: boolean;
+    /**
+     * Element is disabled
+     */
+    disabled?: boolean;
 }
 export interface TickboxInputProps {
     /**
      * Dark mode or not
      */
     dark: boolean;
+    /**
+     * Use a white background for the tickbox (regardless of mode)
+     */
+    whiteBox?: boolean;
+    /**
+     * Element is disabled
+     */
+    disabled?: boolean;
 }
 export interface TickboxCheckmarkProps {
     /**
      * Dark mode or not
      */
     dark: boolean;
+    /**
+     * Element is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Display the border of the tickbox in errorstate style
+     */
+    error?: boolean;
 }

package/dist/types/timer.d.ts

@@ -0,0 +1,37 @@
+import { Colors } from './types';
+export interface IntegratedTimerProps {
+    /**
+     * End date
+     */
+    endDate: string;
+    /**
+     * Text that appears once end date is reached
+     */
+    endDateText?: string;
+    /**
+     * Title that is diplayed when timer is active
+     */
+    title?: string;
+}
+export interface ITimerProps {
+    /**
+     * Timer title
+     */
+    title?: string;
+    /**
+     * Timer bottom border
+     */
+    bottomLine?: boolean;
+    /**
+     * End date
+     */
+    endDate: string;
+    /**
+     * Timer color theme
+     */
+    color?: Colors;
+    /**
+     * Function to fire once end date is reached
+     */
+    endDateHandler?: VoidFunction;
+}

package/dist/types/types.d.ts

@@ -19,7 +19,8 @@ export declare enum Colors {
 export declare enum ThemeType {
     Core = "core",
     Stream = "stream",
-    Cinema = "cinema"
+    Cinema = "cinema",
+    Schools = "schools"
 }
 export interface IThemeProviderProps {
     /**
@@ -279,6 +280,20 @@ export interface IPeopleListing {
      */
     roles: ListingRole[];
 }
+export interface IPagination {
+    /**
+     * The total number of pages
+     */
+    pageCount: 10;
+    /**
+     * The current page
+     */
+    currentPage: 1;
+    /**
+     * The url to base page links on
+     */
+    baseUrl: '/';
+}
 export interface INodeProps {
     /**
      * The current object of Node
@@ -295,13 +310,21 @@ export interface IGridItemProps extends StyledProps<any> {
      */
     columnSpanDesktop?: number;
     /**
-     * The column in which to place the child elements in mobile devices
+     * The column in which to place the child elements in tablet devices
      */
     columnStartDevice: number;
     /**
-     * The number of columns over which the child elements will span in mobile devices
+     * The number of columns over which the child elements will span in tablet devices
      */
     columnSpanDevice?: number;
+    /**
+     * The column in which to place the child elements in small mobile devices
+     */
+    columnStartSmallDevice?: number;
+    /**
+     * The number of columns over which the child elements will span in small mobile devices
+     */
+    columnSpanSmallDevice?: number;
 }
 export interface ISponsorLogoProps {
     /**
@@ -318,6 +341,10 @@ export interface ISponsorshipProps {
      * Source URL for Sponsorship IFRAME.
      */
     src?: string;
+    /**
+     * Alt Text for image.
+     */
+    altText?: string;
     /**
      * Used for Analytics.
      */
@@ -326,6 +353,10 @@ 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;
@@ -416,6 +447,10 @@ export interface IAccordionProps {
      * 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
      */
@@ -431,12 +466,6 @@ export interface IAccordionsProps {
      */
     items: IAccordionProps[];
 }
-export interface IProgressProps {
-    /**
-     * The progress percentage
-     */
-    progress?: number;
-}
 export interface IAnnouncementBannerProps {
     /**
      * Announcement banner title

package/dist/types/typography.d.ts

@@ -4,7 +4,7 @@ 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;
+export declare type OverlineLevel = 1 | 2 | 3 | 4;
 export declare type TypographyType = 'header' | 'altHeader' | 'body' | 'subtitle' | 'overline';
 export interface ITypographyWrapperProps extends StyledProps<any> {
     /**
@@ -30,15 +30,23 @@ export interface IStyledTag extends ITypographyWrapperProps, IGenericTypography
 }
 export interface IHeaderProps extends IGenericTypography {
     /**
-     * Header level, 1, 2, 3, 4, 5 or 6.
+     * 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 {
     /**
@@ -55,6 +63,10 @@ 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.
      */
@@ -65,6 +77,10 @@ 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.
      */

package/dist/types/upsell.d.ts

@@ -0,0 +1,78 @@
+import { EditorialLink } from '.';
+import { 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;
+    /**
+     * Theme: Core, Stream, or Cinema
+     */
+    theme?: 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;
+}

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/chord",
-  "version": "1.1.0",
+  "version": "1.2.10",
   "author": "Royal Opera House",
   "license": "MIT",
   "main": "dist/index.js",
@@ -21,7 +21,9 @@
     "size": "size-limit",
     "analyze": "size-limit --why",
     "storybook": "start-storybook -s ./external -p 6006",
+    "build-storybook-dev": "build-storybook",
     "build-storybook": "rm -rf ./storybook-static; build-storybook -s ./src -o ./storybook-static; cp -r ./external/ ./storybook-static/",
+    "deploy-storybook-dev": "chromatic --build-script-name build-storybook-dev",
     "deploy-storybook": "storybook-to-aws-s3 --bucket-path=chord.roh.org.uk --aws-profile=parent --existing-output-dir=storybook-static --s3-sync-options=--acl=public-read",
     "test-storybook": "tsdx test --json --passWithNoTests --outputFile=./test/jest-test-results.json",
     "publish-release": "make prepare-release-candidate; make publish-release",
@@ -63,7 +65,8 @@
       "<rootDir>/src/jest.setup.ts"
     ],
     "moduleNameMapper": {
-      "^react$": "<rootDir>/node_modules/react"
+      "^react$": "<rootDir>/node_modules/react",
+      "\\.(png|jpg|jpeg)$": "<rootDir>/external/images/mock-image.js"
     },
     "modulePathIgnorePatterns": [
       "<rootDir>/storybook-static"
@@ -84,14 +87,15 @@
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "@types/dompurify": "^2.4.0",
     "@types/jest": "^27.0.2",
     "@types/react": "^17.0.34",
     "@types/react-dom": "^17.0.11",
     "@types/react-test-renderer": "^17.0.1",
     "@types/styled-components": "^5.1.15",
-    "@types/swiper": "^5.4.3",
     "@types/testing-library__jest-dom": "^5.14.1",
     "babel-loader": "^8.2.3",
+    "chromatic": "^6.11.4",
     "husky": "^7.0.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -99,12 +103,13 @@
     "size-limit": "^6.0.4",
     "storybook-addon-designs": "^6.2.0",
     "storybook-addon-pseudo-states": "^1.0.0",
+    "styled-components": "^5.3.9",
     "ts-jest": "^27.0.7",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",
     "typescript": "^4.4.4"
   },
   "dependencies": {
-    "swiper": "^7.3.3"
+    "moment": "^2.29.4"
   }
 }

package/dist/components/atoms/Basket/Basket.d.ts

@@ -1,3 +0,0 @@
-import { IBasketProps } from '../../../types/navigation';
-declare const Basket: ({ text, link, selected, numItems, onClick, colorPrimary }: IBasketProps) => JSX.Element;
-export default Basket;

package/dist/components/organisms/Carousel/Carousel.d.ts

@@ -1,5 +0,0 @@
-import { FunctionComponent } from 'react';
-import 'swiper/swiper-bundle.css';
-import { ICarouselProps } from '../../../types/carousel';
-declare const Carousel: FunctionComponent<ICarouselProps>;
-export default Carousel;

package/dist/components/organisms/Carousel/Carousel.style.d.ts

@@ -1,6 +0,0 @@
-import { ICarouselWrapperProps } from '../../../types/carousel';
-export declare const CarouselWrapper: import("styled-components").StyledComponent<"div", any, ICarouselWrapperProps, never>;
-export declare const TitleButtonsGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ButtonsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TitleGridItem: import("styled-components").StyledComponent<"div", any, import("../../../types/types").IGridItemProps, never>;

package/dist/components/organisms/Carousel/index.d.ts

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

package/dist/components/organisms/HighlightsCarousel/HighlightsCarousel.d.ts

@@ -1,5 +0,0 @@
-import { FunctionComponent } from 'react';
-import 'swiper/swiper-bundle.css';
-import { IHighlightsCarouselProps } from '../../../types/carousel';
-declare const HighlightsCarousel: FunctionComponent<IHighlightsCarouselProps>;
-export default HighlightsCarousel;