@royaloperahouse/chord 0.7.441 → 0.9.0

package/dist/components/index.d.ts

@@ -1,6 +1,6 @@
 import { AltHeader, BodyText, CinemaBadge, ControlledDropdown, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, Overline, PrimaryButton, RotatorButtons, SecondaryButton, SecondaryLogo, TertiaryButton, SectionSplitter, Sponsorship, StreamBadge, Subtitle, Tab, TabLink, TextLink, Tickbox, TypeTags } from './atoms';
 import { AnchorTabBar, Carousel, Footer, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, LiveChat, Navigation, StickyBar, TitleWithCTA } from './organisms';
-import { Accordion, Accordions, AnnouncementBanner, Card, Cards, ContactCard, Editorial, ImageWithCaption, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PromoWithTags, PromoWithTitle, SectionTitle, Tabs, TextOnly, Quote } from './molecules';
+import { Accordion, Accordions, AnnouncementBanner, Card, Cards, ContactCard, Editorial, ImageWithCaption, Information, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PromoWithTags, PromoWithTitle, SectionTitle, Tabs, TextOnly, Quote } from './molecules';
 import ThemeProvider from '../styles/ThemeProvider';
 import GlobalStyles from '../styles/GlobalStyles';
-export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, BodyText, Card, Cards, ContactCard, Carousel, CinemaBadge, ControlledDropdown, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTags, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionTitle, Sponsorship, StickyBar, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Tabs, TextLink, Tickbox, TypeTags, Quote, LiveChat, };
+export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, BodyText, Card, Cards, ContactCard, Carousel, CinemaBadge, ControlledDropdown, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTags, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionTitle, Sponsorship, StickyBar, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Tabs, TextLink, Tickbox, TypeTags, Quote, LiveChat, };

package/dist/components/molecules/Card/Card.style.d.ts

@@ -1,5 +1,7 @@
 import { ICardButtonContainerProps, ICardContentContainerProps } from '../../../types/card';
-export declare const CardContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardContainer: import("styled-components").StyledComponent<"div", any, {
+    onlyShowButtonsOnHover: boolean;
+}, never>;
 export declare const HoverContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ProgressContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContentContainer: import("styled-components").StyledComponent<"div", any, ICardContentContainerProps, never>;

package/dist/components/molecules/Information/InfoCta.d.ts

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

package/dist/components/molecules/Information/Information.d.ts

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

package/dist/components/molecules/Information/Information.style.d.ts

@@ -0,0 +1,10 @@
+import { BackgroundColour, CtaVariant } from '../../../types/information';
+export declare const InfoContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InfoTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InfoCTAWrapper: import("styled-components").StyledComponent<"div", any, {
+    variant: CtaVariant;
+    infoThemed: boolean;
+}, never>;
+export declare const InfoWrapper: import("styled-components").StyledComponent<"div", any, {
+    background: BackgroundColour;
+}, never>;

package/dist/components/molecules/Information/index.d.ts

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

package/dist/components/molecules/PromoWithTags/PromoWithTags.style.d.ts

@@ -1,6 +1,6 @@
 import { IEditorialGridProps, IPromoWithTagsStyledProps } from '../../../types/editorial';
 export declare const PromoWithTagsGrid: import("styled-components").StyledComponent<"div", any, IEditorialGridProps, never>;
-export declare const PromoWithTagsImageWrapper: import("styled-components").StyledComponent<"div", any, IEditorialGridProps, never>;
+export declare const PromoWithTagsExtraContentWrapper: import("styled-components").StyledComponent<"div", any, IEditorialGridProps, never>;
 export declare const PromoWithTagsContentWrapper: import("styled-components").StyledComponent<"div", any, IEditorialGridProps, never>;
 export declare const PromoWithTagsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PromoWithTagsSubtitle: import("styled-components").StyledComponent<"span", any, {}, never>;
@@ -10,3 +10,7 @@ export declare const PromoWithTagsTagWrapper: import("styled-components").Styled
 export declare const PromoWithTagsAdditionalText: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextLinksContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextLinkWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ExtraContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PrimaryButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MobileTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/molecules/index.d.ts

@@ -5,6 +5,7 @@ import Card from './Card';
 import Cards from './Cards';
 import ContactCard from './ContactCard';
 import Editorial from './Editorial';
+import Information from './Information';
 import { PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream } from './PageHeading';
 import PeopleListing from './PeopleListing';
 import PromoWithTags from './PromoWithTags';
@@ -14,4 +15,4 @@ import Tabs from './Tabs';
 import TextOnly from './TextOnly';
 import ImageWithCaption from './ImageWithCaption';
 import Quote from './Quote';
-export { Accordion, Accordions, AnnouncementBanner, Card, Cards, ContactCard, Editorial, ImageWithCaption, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PromoWithTags, PromoWithTitle, SectionTitle, Tabs, TextOnly, Quote, };
+export { Accordion, Accordions, AnnouncementBanner, Card, Cards, ContactCard, Editorial, ImageWithCaption, Information, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PromoWithTags, PromoWithTitle, SectionTitle, Tabs, TextOnly, Quote, };

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

@@ -9,3 +9,4 @@ export declare const CarouselWrapper: import("styled-components").StyledComponen
 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/index.d.ts

@@ -1,4 +1,4 @@
-import { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, BodyText, Card, Cards, Carousel, CinemaBadge, ContactCard, ControlledDropdown, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, LiveChat, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTags, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StickyBar, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, Tab, TabLink, Tabs, TextLink, Tickbox, TypeTags, Quote } from './components';
+import { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, BodyText, Card, Cards, Carousel, CinemaBadge, ContactCard, ControlledDropdown, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTags, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StickyBar, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, Tab, TabLink, Tabs, TextLink, Tickbox, TypeTags, Quote } from './components';
 import { devices } from './styles/viewports';
-import { AspectRatio, CarouselType, Colors, IconNameType, TickboxMode, ThemeType } from './types';
-export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AspectRatio, BodyText, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, ContactCard, ControlledDropdown, devices, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, LiveChat, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTags, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Tabs, TertiaryButton, TextLink, TextOnly, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, TickboxMode, TypeTags, Quote, };
+import { AspectRatio, CarouselType, Colors, IconNameType, TickboxMode, ThemeType, ButtonType } from './types';
+export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AspectRatio, BodyText, ButtonType, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, ContactCard, ControlledDropdown, devices, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTags, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Tabs, TertiaryButton, TextLink, TextOnly, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, TickboxMode, TypeTags, Quote, };

package/dist/types/buttonTypes.d.ts

@@ -1,6 +1,11 @@
 import { ReactNode, AnchorHTMLAttributes, MouseEventHandler } from 'react';
 import { IconNameType, DirectionType } from './iconTypes';
 import { Colors } from './types';
+export declare enum ButtonType {
+    Primary = "Primary",
+    Secondary = "Secondary",
+    Tertiary = "Tertiary"
+}
 export interface IButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     children: ReactNode;
     /**

package/dist/types/card.d.ts

@@ -1,5 +1,5 @@
 import { StyledProps } from 'styled-components';
-import { PromoLinks } from '../types/editorial';
+import { PromoLinks } from './editorial';
 export interface ICardProps {
     /**
      * The progress percentage
@@ -33,7 +33,6 @@ export interface ICardProps {
      * Image to render
      */
     image?: string;
-    /**
     /**
      * Image alt text
      */
@@ -46,6 +45,14 @@ export interface ICardProps {
      * Set if content gets full width (same as image)
      */
     fullWidth?: boolean;
+    /**
+     * Defines if buttons are hidden; True by default;
+     */
+    onlyShowButtonsOnHover?: boolean;
+    /**
+     * A callback to be called when the
+     */
+    onClick?: VoidFunction;
 }
 export interface ICardContentContainerProps extends StyledProps<any> {
     /**
@@ -76,4 +83,8 @@ export interface ICardButtonContainerProps {
      * Set the length of tertiary button text
      */
     tertiaryButtonTextLength: number;
+    /**
+     * Hides buttons by default using opacity; shows buttons on
+     */
+    onlyShowButtonsOnHover?: boolean;
 }

package/dist/types/carousel.d.ts

@@ -71,7 +71,7 @@ export declare type HighlightsCarouselSlide = {
     /**
      * Link in info section
      */
-    link: EditorialLink;
+    links: EditorialLink[];
     /**
      * Slide image
      */

package/dist/types/editorial.d.ts

@@ -1,7 +1,8 @@
 import { AnchorHTMLAttributes, MouseEventHandler, ReactElement, ReactNode } from 'react';
 import { StyledProps } from 'styled-components';
+import { ButtonType } from './buttonTypes';
 import { DirectionType, IconNameType } from './iconTypes';
-import { Colors } from './types';
+import { Colors, Image } from './types';
 export interface IEditorialProps {
     /**
      * Text placed in the editorial component
@@ -37,6 +38,10 @@ export interface IEditorialGridProps {
      * Indicates if component has block for the text links
      */
     hasTextLinks?: boolean;
+    /**
+     * Indicates if component should be hidden
+     */
+    hideSection?: boolean;
 }
 export interface IPromoWithTagsStyledProps {
     /**
@@ -69,6 +74,10 @@ export declare type EditorialLink = AnchorHTMLAttributes<HTMLAnchorElement> & {
      * background color
      */
     bgColor?: Colors;
+    /**
+     * type of the button to be rendered; When not passed the Primary and Tetriary are displayed by default;
+     */
+    buttonType?: ButtonType;
 };
 export declare type PromoLinks = [EditorialLink, EditorialLink?];
 export interface IPromoWithTitleProps {
@@ -187,9 +196,13 @@ export interface IPromoWithTagsProps {
      */
     imagePosition?: 'left' | 'right';
     /**
-     * Image tag or component to be displayed in the editorial component with aspect ratio 4:3
+     * Image to be displayed in the editorial component with aspect ratio 4:3
      */
-    children: ReactElement<HTMLImageElement>;
+    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
      */

package/dist/types/index.d.ts

@@ -5,4 +5,6 @@ import { CarouselType } from './carousel';
 import { IconNameType } from './iconTypes';
 import { AspectRatio } from './image';
 import { TickboxMode } from './tickbox';
-export { AspectRatio, CarouselType, Colors, FooterData, IconNameType, INavigationProps, INavTopProps, TickboxMode, ThemeType, };
+import { ButtonType } from './buttonTypes';
+import { EditorialLink } from './editorial';
+export { AspectRatio, ButtonType, CarouselType, Colors, EditorialLink, FooterData, IconNameType, INavigationProps, INavTopProps, TickboxMode, ThemeType, };

package/dist/types/information.d.ts

@@ -0,0 +1,85 @@
+import { DirectionType, IconNameType } from './iconTypes';
+export declare enum CtaVariant {
+    Primary = "Primary",
+    Secondary = "Secondary",
+    Tertiary = "Tertiary",
+    TextLink = "TextLink"
+}
+export declare enum CtaTheme {
+    Cinema = "Cinema",
+    Core = "Core",
+    Stream = "Stream"
+}
+export declare enum TitleVariant {
+    Header = "Header",
+    AltHeader = "AltHeader"
+}
+export declare enum BackgroundColour {
+    Cinema = "cinema",
+    Core = "core",
+    Stream = "stream",
+    White = "white"
+}
+export declare type TitleTextSize = 3 | 4 | 5 | 6;
+export interface CTAProps {
+    /**
+     * Text to display on the CTA
+     */
+    text: string;
+    /**
+     * Link for the CTA
+     */
+    link: string;
+    /**
+     * Style of the CTA. Choices are "Primary" (solid button background), "Secondary" (transparent button background) or "Tertiary" (text only)
+     */
+    variant?: CtaVariant;
+    /**
+     * Theme to use for the CTA. Choices are "Core" (red), "Stream" (blue), or "Cinema" (black)
+     */
+    theme?: CtaTheme;
+    /**
+     * Flag to decide whether to adjust the CTA colours for display on coloured backgrounds
+     */
+    infoThemed: boolean;
+    /**
+     * Name of the icon to be used in the button
+     */
+    iconName?: IconNameType;
+    /**
+     * Direction of the icon used in the button
+     */
+    iconDirection?: DirectionType;
+}
+export interface TitleProps {
+    /**
+     * Title text to display
+     */
+    text: string;
+    /**
+     * Title typography type. Choices are Heading or AltHeader
+     */
+    variant: TitleVariant;
+    /**
+     * The size of the title text
+     */
+    textSize: TitleTextSize;
+}
+export interface IInformationProps {
+    /**
+     * Main body text to display in the Information Component
+     */
+    body: string;
+    /**
+     * Optional CTA to display underneath the body text
+     */
+    cta?: CTAProps;
+    /**
+     * Title options for the component
+     */
+    title: TitleProps;
+    /**
+     * Background Colour. Choices: None, Core, Cinema, Stream
+     */
+    background?: BackgroundColour;
+}

package/dist/types/types.d.ts

@@ -455,3 +455,4 @@ export interface IAnnouncementBannerProps {
      */
     icon: 'Info' | 'Clock' | 'Location' | 'Reminder' | 'Star';
 }
+export declare type Image = Pick<HTMLImageElement, 'alt' | 'src'>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@royaloperahouse/chord",
-  "version": "0.7.441",
+  "version": "0.9.0",
   "author": "Royal Opera House",
   "license": "MIT",
   "main": "dist/index.js",