@royaloperahouse/chord 1.2.0 → 1.2.1-a-chord-development

package/dist/types/types.d.ts

@@ -1,6 +1,7 @@
-import { ReactNode, AnchorHTMLAttributes, MouseEventHandler } from 'react';
+import { ReactNode, AnchorHTMLAttributes, MouseEventHandler, ReactElement } from 'react';
 import { StyledProps } from 'styled-components';
 import { IconNameType, DirectionType } from './iconTypes';
+import { TypographyLevel, TypographyType } from './typography';
 export declare enum Colors {
     White = "white",
     Black = "black",
@@ -19,7 +20,8 @@ export declare enum Colors {
 export declare enum ThemeType {
     Core = "core",
     Stream = "stream",
-    Cinema = "cinema"
+    Cinema = "cinema",
+    Schools = "schools"
 }
 export interface IThemeProviderProps {
     /**
@@ -53,6 +55,10 @@ export interface ILogoProps {
      * The title of the image
      */
     title?: string;
+    /**
+     * The title of the image
+     */
+    altText?: string;
 }
 export interface IOptionItem {
     /**
@@ -258,6 +264,10 @@ export declare type ListingPerson = {
      * Use headshot or not
      */
     useHeadshot: boolean;
+    /**
+     * Replacement text
+     */
+    replacement?: string;
 };
 export declare type ListingRole = {
     /**
@@ -279,6 +289,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 +319,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 +350,10 @@ export interface ISponsorshipProps {
      * Source URL for Sponsorship IFRAME.
      */
     src?: string;
+    /**
+     * Alt Text for image.
+     */
+    altText?: string;
     /**
      * Used for Analytics.
      */
@@ -326,6 +362,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;
@@ -394,12 +434,24 @@ export interface ISectionTitleProps {
      * Optional description that can be rendered below the title.
      */
     description?: string;
+    /**
+     * Semantic level of the title.
+     */
+    semanticLevel?: TypographyLevel;
 }
 export interface ILogosProps {
     /**
      * Color used to fill logos.
      */
     fillColor?: Colors.White | Colors.Black;
+    /**
+     * Text aligned logo variants.
+     */
+    align?: 'left' | 'center';
+    /**
+     * Fill color inversion.
+     */
+    invert?: boolean;
 }
 export interface ILogosStyledProps extends StyledProps<any> {
     /**
@@ -416,6 +468,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
      */
@@ -424,6 +480,18 @@ export interface IAccordionProps {
      * 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;
 }
 export interface IAccordionsProps {
     /**
@@ -431,12 +499,6 @@ export interface IAccordionsProps {
      */
     items: IAccordionProps[];
 }
-export interface IProgressProps {
-    /**
-     * The progress percentage
-     */
-    progress?: number;
-}
 export interface IAnnouncementBannerProps {
     /**
      * Announcement banner title
@@ -455,4 +517,100 @@ export interface IAnnouncementBannerProps {
      */
     icon: 'Info' | 'Clock' | 'Location' | 'Reminder' | 'Star';
 }
+export interface IReadMoreProps {
+    /**
+     * Read More Component title
+     */
+    title?: string;
+    /**
+     * Intro text to be truncated
+     */
+    introText: ReactNode;
+    /**
+     * Component to be wrapped in ReadMore comp
+     */
+    fullText: ReactNode;
+    /**
+     * Set init open
+     */
+    initOpen: boolean;
+    /**
+     * Custom text for link when closed
+     */
+    showMoreText: string;
+    /**
+     * Custom text for link when opened
+     */
+    hideText: string;
+    /**
+     * Character limit
+     */
+    characterLimit?: number;
+    /**
+     * Optional truncation
+     */
+    truncate?: boolean;
+}
+export interface IStatusBannerProps {
+    /**
+     * Status banner text
+     */
+    statusText: string;
+    /**
+     * Set init visibility
+     */
+    visibility: boolean;
+}
+export interface IVideoControlsProps {
+    /**
+     * Video element id
+     */
+    videoElementId: string;
+    /**
+     * Id of an element containing both the VideoControls and the video HTML element
+     * Used to request fullscreen.
+     */
+    videoContainerId?: string;
+    /**
+     * Default muted
+     */
+    muted: boolean;
+    /**
+     * Default playing
+     */
+    autoPlay: boolean;
+    /**
+     * Hide volume
+     */
+    soundControl?: boolean;
+    /**
+     * Hide fullscreen. If false, provide a videoContainerId.
+     */
+    fullScreenOption?: boolean;
+    /**
+     * Loops
+     */
+    loop?: boolean;
+}
+export declare type IVideoWithControlsSettings = Omit<IVideoControlsProps, 'videoElementId' | 'videoContainerId'>;
+export interface IVideoWithControlsProps {
+    /**
+     * Video element
+     */
+    video: ReactElement<HTMLVideoElement>;
+    /**
+     * Settings for video controls
+     */
+    settings: IVideoWithControlsSettings;
+}
 export declare type Image = Pick<HTMLImageElement, 'alt' | 'src'>;
+export declare enum LinkTarget {
+    /**
+     * Opens the link in the same frame or tab as the current page.
+     */
+    Self = "_self",
+    /**
+     * Opens the link in a new browser tab or window, depending on the browser settings.
+     */
+    Blank = "_blank"
+}

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.2.0",
+  "version": "1.2.1-a-chord-development",
   "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,7 @@
       "<rootDir>/src/jest.setup.ts"
     ],
     "moduleNameMapper": {
-      "^react$": "<rootDir>/node_modules/react"
+      "\\.(png|jpg|jpeg)$": "<rootDir>/external/images/mock-image.js"
     },
     "modulePathIgnorePatterns": [
       "<rootDir>/storybook-static"
@@ -84,27 +86,36 @@
     "@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-modal": "^3.16.3",
+    "@types/react-select": "^5.0.1",
     "@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": "^11.5.5",
     "husky": "^7.0.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
+    "react-router-dom": "^6.22.3",
+    "react-test-renderer": "^17.0.2",
     "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",
+    "react-modal": "^3.16.1",
+    "react-scrolllock": "^5.0.1",
+    "react-select": "^5.8.0"
   }
 }

package/README.GIT

@@ -1,122 +0,0 @@
-# Royal Opera House - Front End Design System
-
-Welcome to the Royal Opera House Front End Design System, `@royaloperahouse/chord`.
-
-This package is a library of UI components intended to be used in the ROH website.
-
-It uses React, TypeScript, TSDX and Storybook.
-
-## Commands
-
-The required package dependencies need to be insalled using `yarn`. Once ready you can issue the following:
-
-To run Lint on the package use:
-
-```bash
-yarn lint # you can also use the --fix option to perform automatic fixes
-```
-
-To run the unit tests (using Jest) use:
-
-```bash
-yarn test # you can also use the -u option to update snapshots if needed
-```
-
-To run the unit tests (using Jest) and store them for display in storybook use:
-
-```bash
-yarn test-storybook # you can also use the -u option to update snapshots if needed
-```
-
-To run storybook use:
-
-```bash
-yarn storybook
-```
-
-To build a static version of storybook use:
-
-```bash
-yarn build-storybook
-```
-
-This will create a static copy in `./storybook-static`, and there is an index.html page inside the core directory. This allows the site to be previewed directly in the git repository via serving pages (it needs to be configured for that branch).
-
-To deploy the storybook publically:
-
-### Prerequisites
-
-Make sure you have credentials for the *parent* 'Royal Opera House' AWS account in your `~/.aws/credentials` file. The deploy script expects these to be called `[parent]`.
-
-You can get these values at:
-
-AWS 'Your Applications' page -> 'Royal Opera House' -> 'Developer Access' ->
-'Command line or programmatic access'
-
-### Deployment
-
-To deploy, first *build* the storybook as above
-
-then use:
-
-```bash
-yarn deploy-storybook
-```
-
-This will deploy the contents of `./storybook-static` to S3 as a static site accessible at [chord.roh.org.uk](chord.roh.org.uk)
-
-To build the package use:
-
-```bash
-yarn build
-```
-
-To release a new version.
-
-Release will be published in npm (NPM_TOKEN will be required)
-Storybook will be pushed to bitbucket. *** Push will be done Ensure you don't have things pendint to push
-
-```bash
- NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-release
-```
-
-
-MORE INFO TO FOLLOW - PARTICULARLY FOR THE CI SETUP AND HOW PACKAGES ARE PUSHED.
-
-# Recommended Use of Package
-
-The package is deployed to NPM, and can be installed using yarn or npm:
-
-```bash
-    npm i --save @royaloperahouse/chord
-```
-```bash
-    yarn add @royaloperahouse/chord
-```
-
-# Processes to follow prior to commits
-
-Before a commit is made you need to do the following:
-
-- Make sure that you are in your own work branch (properly named, including the JIRA ticket number and a short description)
-- `yarn lint` - ensure that you are not introducing errors
-- `yarn test` - ensure that tests are running as expected
-- `yarn test-storybook` - Save the test results to for the static site
-- `yarn build-storybook` - Update the static site
-- Commit your changes in your branch locally
-
-Next, if you are ready to merge into the main development branch then:
-
-- _*ensure that you pull the latest changes from that branch into your new branch, resolving any merge conflicts that may arise*_
-- Commit any merge changes locally
-- Push your branch changes to the origin repo
-- Raise a Pull Request to merge back into the main development branch, AND ensure that the required reviewers are assigned.
-- The reviewers may raise issues, and once resolved, they will be responsible for performing the merge.
-
-### Example
-
-There is an example implementation in the example folder. Alternatively there are also integration examples in storybook. Make sure to keep these updated so as to showcase the current components available.
-
-### Bundle analysis
-
-Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `yarn size` and visulize it with `yarn analyze`.

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;

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

@@ -1,12 +0,0 @@
-export declare const HighlightsGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CarouselTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InfoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InfoLogoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InfoTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InfoTextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InfoLinkWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CarouselWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const RotatorButtonsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const RotatorButtonsWrapperMobile: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HtmlBodyText: import("styled-components").StyledComponent<"p", any, {}, never>;
-export declare const FirstButtonComponentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

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

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

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

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

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

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

@@ -1,5 +0,0 @@
-import HighlightsCarouselCinema from './HighlightsCinema';
-import HighlightsCarouselCore from './HighlightsCore';
-import HighlightsCarouselStream from './HighlightsStream';
-import HighlightsCarousel from './HighlightsCarousel';
-export { HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream };