@royaloperahouse/chord 0.5.8 → 0.6.0

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

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

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

@@ -0,0 +1,4 @@
+import { TickboxLabelProps, TickboxInputProps, TickboxCheckmarkProps } from '../../../types/tickbox';
+export declare const TickboxLabel: import("styled-components").StyledComponent<"label", any, TickboxLabelProps, never>;
+export declare const TickboxCheckmark: import("styled-components").StyledComponent<"span", any, TickboxCheckmarkProps, never>;
+export declare const TickboxInput: import("styled-components").StyledComponent<"input", any, TickboxInputProps, never>;

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

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

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

@@ -9,7 +9,8 @@ import SectionSplitter from './SectionSplitter';
 import ImageAspectRatioWrapper from './ImageAspectRatioWrapper';
 import Tab from './Tab';
 import TabLink from './TabLink';
+import Tickbox from './Tickbox';
 import TypeTags from './TypeTags';
 import RotatorButtons from './RotatorButtons';
 import { AltHeader, BodyText, Header, Overline, Subtitle } from './Typography';
-export { AltHeader, BodyText, CinemaBadge, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, Overline, PrimaryButton, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SponsorLogo, Sponsorship, StreamBadge, Subtitle, Tab, TabLink, TertiaryButton, TypeTags, };
+export { AltHeader, BodyText, CinemaBadge, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, Overline, PrimaryButton, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SponsorLogo, Sponsorship, StreamBadge, Subtitle, Tab, TabLink, TertiaryButton, Tickbox, TypeTags, };

package/dist/components/index.d.ts

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

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

@@ -1,2 +1,3 @@
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { IImageWithCaptionWrapperProps } from '../../../types/image';
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, IImageWithCaptionWrapperProps, never>;
 export declare const CaptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,13 +1,7 @@
-/// <reference types="react" />
 import { IAnchorTabsListProps } from '../../../types/navigation';
 export declare const AnchorTapbarWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TitleCTAGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AnchorTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ButtonsDesktopGridItem: import("styled-components").StyledComponent<"div", any, import("../../../types/types").IGridItemProps, 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>;
 export declare const ArrowsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ArrowWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ButtonsMobileWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PrimaryButtonReverse: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../../../types/buttonTypes").IPrimaryButtonProps>, any, {}, never>;

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

@@ -6,4 +6,5 @@ export declare const NavigationGridMobile: import("styled-components").StyledCom
 export declare const LogoContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MenuContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const NavContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NavContainerGridItem: import("styled-components").StyledComponent<"div", any, import("../../../types/types").IGridItemProps, never>;
 export declare const NavTopContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ITitleCTAProps } from '../../../types/navigation';
+export declare const TitleCTAGridWrapper: import("styled-components").StyledComponent<"div", any, ITitleCTAProps, never>;
+export declare const CTAGridWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AnchorTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ButtonsDesktopGridItem: import("styled-components").StyledComponent<"div", any, import("../../../types/types").IGridItemProps, never>;
+export declare const ButtonsMobileWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PrimaryButtonReverse: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../../../types/buttonTypes").IPrimaryButtonProps>, any, {}, never>;

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

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

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

@@ -3,4 +3,5 @@ import Footer from './Footer';
 import AnchorTapBar from './AnchorTapBar';
 import Carousel from './Carousel';
 import { HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream } from './HighlightsCarousel';
-export { AnchorTapBar, Carousel, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Navigation, Footer, };
+import TitleWithCTA from './TitleWithCTA';
+export { AnchorTapBar, Carousel, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Navigation, Footer, TitleWithCTA, };

package/dist/index.d.ts

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

package/dist/types/image.d.ts

@@ -1,10 +1,23 @@
 import { ReactElement } from 'react';
+import { StyledProps } from 'styled-components';
 export declare enum AspectRatio {
     '1:1' = "1 / 1",
     '3:4' = "3 / 4",
     '4:3' = "4 / 3",
     '16:9' = "16 / 9"
 }
+export declare enum AspectRatioLegacy {
+    '1 / 1' = "100",
+    '3 / 4' = "133",
+    '4 / 3' = "75",
+    '16 / 9' = "56.25"
+}
+export declare enum AspectRatioWidth {
+    '1 / 1' = "1",
+    '3 / 4' = "0.75",
+    '4 / 3' = "1.33",
+    '16 / 9' = "1.78"
+}
 export interface IImageAspectRatioWrapperProps {
     /**
      * Aspect ratio of the contained image
@@ -25,3 +38,13 @@ export interface IImageWithCaptionProps {
      */
     children: ReactElement<HTMLImageElement>;
 }
+export interface IImageWithCaptionWrapperProps extends StyledProps<any> {
+    /**
+     * Aspect ratio of the contained image
+     */
+    aspectRatio?: AspectRatio;
+    /**
+     * Height of the wrapper
+     */
+    height: number;
+}

package/dist/types/index.d.ts

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

package/dist/types/navigation.d.ts

@@ -167,7 +167,7 @@ export interface ISearchBarProps {
      */
     onClose: () => void;
 }
-export declare type AnchorBarLink = AnchorHTMLAttributes<HTMLAnchorElement> & {
+export declare type TitleCTALink = AnchorHTMLAttributes<HTMLAnchorElement> & {
     /**
      * Text inside the link
      */
@@ -189,7 +189,7 @@ export declare type AnchorBarLink = AnchorHTMLAttributes<HTMLAnchorElement> & {
      */
     color?: Colors;
 };
-export declare type AnchorBarLinks = [AnchorBarLink, AnchorBarLink?];
+export declare type TitleCTALinks = [TitleCTALink, TitleCTALink?];
 export declare type AnchorBarTab = AnchorHTMLAttributes<HTMLAnchorElement> & {
     /**
      * Visible text in a tab
@@ -205,18 +205,10 @@ export declare type AnchorBarTab = AnchorHTMLAttributes<HTMLAnchorElement> & {
     color?: Colors;
 };
 export interface IAnchorBarProps {
-    /**
-     * Text placed in the anchor bar component
-     */
-    title?: string;
     /**
      * Tabs displayed in the anchor bar
      */
     tabs: AnchorBarTab[];
-    /**
-     * Array of buttons props. First one should have PrimaryButton attributes, second one Tertiary button attributes
-     */
-    links?: AnchorBarLinks;
     /**
      * Function to be called when a tab is clicked
      */
@@ -226,6 +218,20 @@ export interface IAnchorBarProps {
      */
     activeTab?: string;
 }
+export interface ITitleCTAProps {
+    /**
+     * Array of buttons props. First one should have PrimaryButton attributes, second one Tertiary button attributes
+     */
+    links?: TitleCTALinks;
+    /**
+     * Text placed in the anchor bar component
+     */
+    title?: string;
+    /**
+     * Boolean to determine if is sticky
+     */
+    sticky?: boolean;
+}
 export interface IAnchorTabsListProps {
     /**
      * Boolean to determine that the list tab is overflowed

package/dist/types/tickbox.d.ts

@@ -0,0 +1,40 @@
+export declare enum TickboxMode {
+    Dark = "dark",
+    Light = "light"
+}
+export interface ITickboxProps {
+    /**
+     * The text of tickbox
+     */
+    children: string;
+    /**
+     * Tickbox is checked or not initially
+     */
+    checked?: boolean;
+    /**
+     * Mode to determine colors of text and checkmark
+     */
+    mode?: TickboxMode;
+    /**
+     * Callback called when tickbox change
+     */
+    onChange?: (checked: boolean) => void;
+}
+export interface TickboxLabelProps {
+    /**
+     * Dark mode or not
+     */
+    dark: boolean;
+}
+export interface TickboxInputProps {
+    /**
+     * Dark mode or not
+     */
+    dark: boolean;
+}
+export interface TickboxCheckmarkProps {
+    /**
+     * Dark mode or not
+     */
+    dark: boolean;
+}

package/package.json

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