@royaloperahouse/chord 0.3.5 → 0.3.9

package/dist/types/carousel.d.ts

@@ -0,0 +1,48 @@
+import { ReactElement } from 'react';
+import { ICardProps } from './card';
+import { IImageWithCaptionProps } from './image';
+export declare enum CarouselType {
+    Image = "image",
+    SmallCard = "SmallCard",
+    LargeCard = "LargeCard"
+}
+export interface ICarouselProps {
+    /**
+     * Carousel title
+     */
+    title: string;
+    /**
+     * Carousel type.
+     */
+    type: CarouselType;
+    /**
+     * Only for image type. It sets the height in pixels of the slides in devices(default 300)
+     */
+    imagesHeightDevice?: number;
+    /**
+     * Only for image type. It sets the height in pixels of the slides in desktop(default 500)
+     */
+    imagesHeightDesktop?: number;
+    /**
+     * Carousel children (only Card and ImageAspectRatioWrapper children are allowed).
+     */
+    children: ReactElement<ICardProps | IImageWithCaptionProps>[];
+}
+export interface ICarouselWrapperProps {
+    /**
+     * Carousel has been activated or not
+     */
+    active: boolean;
+    /**
+     * Carousel type.
+     */
+    type: CarouselType;
+    /**
+     * Only for image type. It sets the height in pixels of the slides in devices(default 300)
+     */
+    imagesHeightDevice?: number;
+    /**
+     * Only for image type. It sets the height in pixels of the slides in desktop(default 500)
+     */
+    imagesHeightDesktop?: number;
+}

package/dist/types/editorial.d.ts

@@ -1,4 +1,5 @@
-import { AnchorHTMLAttributes, MouseEventHandler, ReactElement } from 'react';
+import { AnchorHTMLAttributes, MouseEventHandler, ReactElement, ReactNode } from 'react';
+import { StyledProps } from 'styled-components';
 import { DirectionType, IconNameType } from './iconTypes';
 import { Colors } from './types';
 export interface IEditorialProps {
@@ -23,9 +24,17 @@ export interface IEditorialGridProps {
     /**
      * Sets if the image will be placed in the right (false) or the left (true)
      */
-    imageToLeft: boolean;
+    imageToLeft?: boolean;
+    /**
+     * Set the length of primary button text
+     */
+    primaryButtonTextLength?: number;
+    /**
+     * Set the length of tertiary button text
+     */
+    tertiaryButtonTextLength?: number;
 }
-export declare type PromoWithTitleLink = AnchorHTMLAttributes<HTMLAnchorElement> & {
+export declare type EditorialLink = AnchorHTMLAttributes<HTMLAnchorElement> & {
     /**
      * Text inside the link
      */
@@ -46,8 +55,12 @@ export declare type PromoWithTitleLink = AnchorHTMLAttributes<HTMLAnchorElement>
      * Color of text and icon
      */
     color?: Colors;
+    /**
+     * background color
+     */
+    bgColor?: Colors;
 };
-export declare type PromoLinks = [PromoWithTitleLink, PromoWithTitleLink?];
+export declare type PromoLinks = [EditorialLink, EditorialLink?];
 export interface IPromoWithTitleProps {
     /**
      * Text placed in the editorial component
@@ -78,3 +91,67 @@ export interface IPromoWithTitleProps {
      */
     links?: PromoLinks;
 }
+export interface IThemePageHeadingProps {
+    /**
+     * Title placed in the page heading component
+     */
+    title: string;
+    /**
+     * Text placed in the page heading component
+     */
+    text?: string;
+    /**
+     * Link placed in the page heading component
+     */
+    link?: EditorialLink;
+    /**
+     * Boolean to show/hide sponsorship logo (default true)
+     */
+    sponsor?: boolean;
+}
+export interface IPageHeadingProps extends IThemePageHeadingProps {
+    /**
+     * Logo to be placed in page heading component
+     */
+    children?: ReactNode;
+}
+export interface IPageHeadingImpactProps {
+    /**
+     * Text placed in the impact component
+     */
+    text?: string;
+    /**
+     * Link placed in the impact component
+     */
+    link?: EditorialLink;
+    /**
+     * Boolean to show/hide sponsorship logo (default true)
+     */
+    sponsor?: boolean;
+    /**
+     * Background url for desktops
+     */
+    bgUrlDesktop: string;
+    /**
+     * Background url for devices
+     */
+    bgUrlDevice?: string;
+    /**
+     * Logo to be placed in page heading component
+     */
+    children?: ReactNode;
+    /**
+     * Internal anchor ref
+     */
+    scrollHref?: string;
+}
+export interface IImpactWrappersStyledProps extends StyledProps<any> {
+    /**
+     * Background url for desktops
+     */
+    bgUrlDesktop: string;
+    /**
+     * Background url for devices
+     */
+    bgUrlDevice?: string;
+}

package/dist/types/image.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 export declare enum AspectRatio {
     '1:1' = "1 / 1",
     '3:4' = "3 / 4",
@@ -10,3 +11,17 @@ export interface IImageAspectRatioWrapperProps {
      */
     aspectRatio?: AspectRatio;
 }
+export interface IImageWithCaptionProps {
+    /**
+     * Aspect ratio of the contained image
+     */
+    aspectRatio?: AspectRatio;
+    /**
+     * Image caption or credit
+     */
+    caption: string;
+    /**
+     * Image element
+     */
+    children: ReactElement<HTMLImageElement>;
+}

package/dist/types/types.d.ts

@@ -1,14 +1,6 @@
 import { ReactNode, AnchorHTMLAttributes, MouseEventHandler } from 'react';
 import { StyledProps } from 'styled-components';
 import { IconNameType, DirectionType } from './iconTypes';
-export declare enum HeadingLevel {
-    H1 = 1,
-    H2 = 2,
-    H3 = 3,
-    H4 = 4,
-    H5 = 5,
-    H6 = 6
-}
 export declare enum Colors {
     White = "white",
     Black = "black",
@@ -24,13 +16,6 @@ export declare enum Colors {
     Stream = "stream",
     Cinema = "cinema"
 }
-export interface IHeadingProps {
-    level: HeadingLevel;
-    children: ReactNode;
-}
-export interface IHeadingWrapperProps extends StyledProps<any> {
-    level: HeadingLevel;
-}
 export declare enum ThemeType {
     Core = "core",
     Stream = "stream",
@@ -170,6 +155,54 @@ export interface IDropdownProps {
      */
     colorPrimary?: string;
 }
+export interface IControlledDropdownProps {
+    /**
+     * Text displayed as heading in the dropdown
+     */
+    text: string;
+    /**
+     * options to display
+     */
+    options?: IOptionItem[];
+    /**
+     * Color for active status (default primary)
+     */
+    activeColor?: string;
+    /**
+     * Set if the dropdown is active or not
+     */
+    active?: boolean;
+    /**
+     * Callback called when header is clicked
+     */
+    onClick: () => void;
+    /**
+     * Callback called when an option is clicked
+     */
+    onOptionClick?: (s: string) => void;
+    /**
+     * Mouse enter event handler
+     */
+    onMouseEnter?: () => void;
+    /**
+     * Mouse leave event handler
+     */
+    onMouseLeave?: () => void;
+    /**
+     * Callback called to reset dropdown behaviour
+     */
+    onReset?: () => void;
+}
+export interface IControlledDropdownHeaderProps extends StyledProps<any> {
+    /**
+     * Color for active status (default primary)
+     */
+    activeColor: string;
+    /**
+     * Set if the dropdown is active or not
+     */
+    active: boolean;
+}
 export interface IIndividualListing {
     role: string;
     name: string;
@@ -263,6 +296,22 @@ export interface ITextOnlyProps {
      * Text placed in the TextOnly component
      */
     text: string;
+    /**
+     * Set columnstart in Desktop
+     */
+    columnStartDesktop?: number;
+    /**
+     * Set columnSpan in Desktop
+     */
+    columnSpanDesktop?: number;
+    /**
+     * Set columnstart in Device
+     */
+    columnStartDevice?: number;
+    /**
+     * Set columnSpam in Device
+     */
+    columnSpanDevice?: number;
 }
 export declare type SectionTitleSize = 'small' | 'large';
 export interface ISectionTitleProps {
@@ -279,15 +328,27 @@ export interface ISectionTitleProps {
      */
     description?: string;
 }
+export interface ILogosProps {
+    /**
+     * Color used to fill logos.
+     */
+    fillColor?: Colors.White | Colors.Black;
+}
+export interface ILogosStyledProps extends StyledProps<any> {
+    /**
+     * Color used to fill logos.
+     */
+    fillColor?: Colors.White | Colors.Black;
+}
 export interface IAccordionProps {
     /**
      * Title to display.
      */
-    title: string;
+    title?: string;
     /**
-     * Text to render when accordion is opened
+     * The component to be wrapped into the accordion
      */
-    text: string;
+    children?: ReactNode;
     /**
      * Set if accordions are stacked
      */

package/dist/types/typography.d.ts

@@ -0,0 +1,73 @@
+import { ReactNode } from 'react';
+import { StyledProps } from 'styled-components';
+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 TypographyType = 'header' | 'altHeader' | 'body' | 'subtitle' | 'overline';
+export interface ITypographyWrapperProps extends StyledProps<any> {
+    /**
+     * 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 block to wrap in styled tag.
+     */
+    children: ReactNode;
+}
+export interface IStyledTag extends ITypographyWrapperProps, IGenericTypography {
+    /**
+     * HTML tag to use to render component, by default div.
+     */
+    tag?: React.ElementType;
+}
+export interface IHeaderProps extends IGenericTypography {
+    /**
+     * Header level, 1, 2, 3, 4, 5 or 6.
+     */
+    level: TypographyLevel;
+}
+export interface IAltHeaderProps extends IGenericTypography {
+    /**
+     * AltHeader level, 3, 4, 5 or 6.
+     */
+    level: AltHeaderLevel;
+}
+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;
+    /**
+     * 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;
+    /**
+     * HTML tag to use to render Overline, by default div.
+     */
+    tag?: React.ElementType;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@royaloperahouse/chord",
-  "version": "0.3.5",
+  "version": "0.3.9",
   "author": "Royal Opera House",
   "license": "MIT",
   "main": "dist/index.js",
@@ -70,6 +70,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.16.0",
     "@size-limit/preset-small-lib": "^6.0.4",
     "@storybook/addon-a11y": "^6.3.12",
     "@storybook/addon-essentials": "^6.3.12",
@@ -86,6 +87,7 @@
     "@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",
     "husky": "^7.0.4",
@@ -95,6 +97,7 @@
     "size-limit": "^6.0.4",
     "storybook-addon-designs": "^6.2.0",
     "storybook-addon-pseudo-states": "^1.0.0",
+    "swiper": "^7.3.1",
     "ts-jest": "^27.0.7",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",

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

@@ -1,3 +0,0 @@
-import { IHeadingProps } from '../../../types/types';
-declare const Heading: ({ level, children }: IHeadingProps) => JSX.Element;
-export default Heading;

package/dist/components/atoms/Heading/Heading.style.d.ts

@@ -1,3 +0,0 @@
-import { IHeadingWrapperProps } from '../../../types/types';
-declare const HeaderWrapper: import("styled-components").StyledComponent<"h1", any, IHeadingWrapperProps, never>;
-export default HeaderWrapper;

package/dist/components/atoms/Heading/index.d.ts

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