@royaloperahouse/chord 0.5.9 → 0.7.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/PeopleListing/PeopleListing.d.ts

@@ -1,3 +1,3 @@
 import { IPeopleListing } from '../../../types/types';
-declare const PeopleListing: ({ people }: IPeopleListing) => JSX.Element;
+declare const PeopleListing: ({ roles }: IPeopleListing) => JSX.Element;
 export default PeopleListing;

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

@@ -1,2 +1,4 @@
-declare const PeopleListingGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
-export default PeopleListingGrid;
+export declare const PeopleListingGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RoleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PersonLink: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const PersonText: import("styled-components").StyledComponent<"span", 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/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/dist/types/types.d.ts

@@ -237,14 +237,35 @@ export interface IControlledDropdownHeaderProps extends StyledProps<any> {
      */
     active: boolean;
 }
-export interface IIndividualListing {
-    role: string;
+export declare type ListingPerson = {
+    /**
+     * Person name
+     */
     name: string;
+    /**
+     * Link to person profile
+     */
     link?: string;
+};
+export declare type ListingRole = {
+    /**
+     * Role name
+     */
+    name: string;
+    /**
+     * List of people in the role
+     */
+    people: ListingPerson[];
+    /**
+     * Data roh param
+     */
     dataROH?: string;
-}
+};
 export interface IPeopleListing {
-    people: IIndividualListing[];
+    /**
+     * List of roles to be displayed
+     */
+    roles: ListingRole[];
 }
 export interface INodeProps {
     /**

package/package.json

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

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

@@ -1,3 +0,0 @@
-import { IIndividualListing } from '../../../types/types';
-declare const IndividualListing: ({ role, name, link, dataROH }: IIndividualListing) => JSX.Element;
-export default IndividualListing;

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

@@ -1,2 +0,0 @@
-export declare const RoleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const NameWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

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