@royaloperahouse/chord 1.5.0 → 1.6.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, Information, 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, PageHeadingHighlight, 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, 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, };
+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, PageHeadingHighlight, 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/PageHeading/Highlight/Highlight.d.ts

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

package/dist/components/molecules/PageHeading/Highlight/Highlight.style.d.ts

@@ -0,0 +1,14 @@
+interface HighlightsInfoWrapperProps {
+    hasImages: boolean;
+}
+interface HighlightsCarouselWrapperProps {
+    hasMultipleImages: boolean;
+}
+export declare const HighlightsGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HighlightTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HighlightTextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HighlightsInfoWrapper: import("styled-components").StyledComponent<"div", any, HighlightsInfoWrapperProps, never>;
+export declare const HighlightsCarouselWrapper: import("styled-components").StyledComponent<"div", any, HighlightsCarouselWrapperProps, never>;
+export declare const MobileRotatorButtonsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RotatorButtonsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

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

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

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

@@ -1,5 +1,6 @@
 import PageHeadingCore from './Core';
 import PageHeadingCinema from './Cinema';
+import PageHeadingHighlight from './Highlight';
 import PageHeadingImpact from './Impact';
 import PageHeadingStream from './Stream';
-export { PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream };
+export { PageHeadingCinema, PageHeadingCore, PageHeadingHighlight, PageHeadingImpact, PageHeadingStream };

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

@@ -6,7 +6,7 @@ import Cards from './Cards';
 import ContactCard from './ContactCard';
 import Editorial from './Editorial';
 import Information from './Information';
-import { PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream } from './PageHeading';
+import { PageHeadingCinema, PageHeadingCore, PageHeadingHighlight, PageHeadingImpact, PageHeadingStream } from './PageHeading';
 import PeopleListing from './PeopleListing';
 import PromoWithTags from './PromoWithTags';
 import PromoWithTitle from './PromoWithTitle';
@@ -15,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, Information, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PromoWithTags, PromoWithTitle, SectionTitle, Tabs, TextOnly, Quote, };
+export { Accordion, Accordions, AnnouncementBanner, Card, Cards, ContactCard, Editorial, ImageWithCaption, Information, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingHighlight, PageHeadingStream, PeopleListing, PromoWithTags, PromoWithTitle, SectionTitle, Tabs, TextOnly, Quote, };

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

@@ -1,5 +1,5 @@
 import { IAnchorTabsListProps } from '../../../types/navigation';
-export declare const AnchorTapbarWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AnchorTabbarWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TabsGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TabsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TabsList: import("styled-components").StyledComponent<"ul", any, IAnchorTabsListProps, never>;

package/dist/types/editorial.d.ts

@@ -1,4 +1,4 @@
-import { AnchorHTMLAttributes, MouseEventHandler, ReactElement, ReactNode } from 'react';
+import { AnchorHTMLAttributes, ImgHTMLAttributes, MouseEventHandler, ReactElement, ReactNode } from 'react';
 import { StyledProps } from 'styled-components';
 import { ButtonType } from './buttonTypes';
 import { DirectionType, IconNameType } from './iconTypes';
@@ -215,3 +215,21 @@ export interface IPromoWithTagsProps {
      */
     disabledCTACopy?: string;
 }
+export interface IHighlightsHeaderProps {
+    /**
+     * Text placed in the editorial component
+     */
+    title: string;
+    /**
+     * Subtitle placed in the editorial component
+     */
+    subtitle?: string;
+    /**
+     * Text placed in the editorial component
+     */
+    text?: string;
+    /**
+     * Explanation
+     */
+    images?: Array<ImgHTMLAttributes<HTMLImageElement>>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@royaloperahouse/chord",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "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",
@@ -92,6 +94,7 @@
     "@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",