@royaloperahouse/chord 0.3.9 → 0.4.3

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

@@ -1,4 +1,7 @@
 import { IControlledDropdownHeaderProps } from '../../../types/types';
 export declare const ControlledDropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ControlledDropdownHeaderContainer: import("styled-components").StyledComponent<"a", any, IControlledDropdownHeaderProps, never>;
+export declare const ControlledDropdownHeaderContainer: import("styled-components").StyledComponent<"span", any, IControlledDropdownHeaderProps, never>;
+export declare const ControlledDropdownHeaderContainerLink: import("styled-components").StyledComponent<"span", any, IControlledDropdownHeaderProps & {
+    as: string;
+}, "as">;
 export declare const IconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -1,4 +1,4 @@
-import { IDropdownProps } from '../../../types/types';
+import { IDropdowItemProps, IDropdownProps } from '../../../types/types';
 export declare const TabContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const OptionItem: import("styled-components").StyledComponent<"a", any, IDropdownProps, never>;
+export declare const OptionItem: import("styled-components").StyledComponent<"a", any, IDropdowItemProps, never>;
 export declare const OptionsContainer: import("styled-components").StyledComponent<"div", any, IDropdownProps, never>;

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

@@ -1,3 +1,3 @@
 import { ILogoProps } from '../../../types/types';
-declare const Logo: ({ id, dataRoh, urlLink }: ILogoProps) => JSX.Element;
+declare const Logo: ({ id, dataRoh, urlLink, desktopImage, devicesImage, title, }: ILogoProps) => JSX.Element;
 export default Logo;

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

@@ -1,6 +1 @@
-export declare const Svg: import("styled-components").StyledComponent<"svg", any, {
-    version: "1.1";
-    xmlns: "http://www.w3.org/2000/svg";
-    xmlnsXlink: "http://www.w3.org/1999/xlink";
-}, "version" | "xmlns" | "xmlnsXlink">;
-export declare const SvgWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LogoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,3 +1,3 @@
 import { ITabProps } from '../../../types/types';
-declare const Tab: ({ title, titleLink, onClick, selected, iconName, withIcon, withTextInMobile, colorPrimary, }: ITabProps) => JSX.Element;
+declare const Tab: ({ title, titleLink, onClick, onFocus, onReset, selected, iconName, withIcon, withTextInMobile, colorPrimary, }: ITabProps) => JSX.Element;
 export default Tab;

package/dist/components/index.d.ts

@@ -1,6 +1,6 @@
 import { AltHeader, BodyText, CinemaBadge, Grid, GridItem, Header, Icon, Overline, PrimaryButton, RotatorButtons, SecondaryButton, SecondaryLogo, TertiaryButton, SectionSplitter, Sponsorship, StreamBadge, Subtitle, TabLink, TypeTags } from './atoms';
-import { AnchorTapBar, Carousel, Footer, Navigation } from './organisms';
+import { AnchorTapBar, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Carousel, Footer, Navigation } 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, Icon, 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, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionTitle, Sponsorship, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, SectionSplitter, TabLink, Tabs, TypeTags, };

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

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

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

@@ -0,0 +1,10 @@
+export declare const HighlightsGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CarouselTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InfoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InfoLogoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InfoTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InfoTextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InfoLinkWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CarouselWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RotatorButtonsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RotatorButtonsWrapperMobile: import("styled-components").StyledComponent<"div", any, {}, never>;

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+import HighlightsCarouselCinema from './HighlightsCinema';
+import HighlightsCarouselCore from './HighlightsCore';
+import HighlightsCarouselStream from './HighlightsStream';
+import HighlightsCarousel from './HighlightsCarousel';
+export { HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream };

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

@@ -1,3 +1,3 @@
 import { INavigationProps } from '../../../types/navigation';
-declare const Navigation: ({ dataNavTop, menuData, onSearch, onLink, logoLink }: INavigationProps) => JSX.Element;
+declare const Navigation: ({ dataNavTop, menuData, onSearch, onLink, logoLink, desktopLogoUrl, devicesLogoUrl, }: INavigationProps) => JSX.Element;
 export default Navigation;

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

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

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, Icon, 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, 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 { devices } from './styles/viewports';
-import { ThemeType } from './types/types';
-export { Accordion, Accordions, AltHeader, AnchorTapBar, BodyText, Card, Cards, Carousel, CinemaBadge, devices, Editorial, Footer, GlobalStyles, Grid, GridItem, Icon, ImageWithCaption, Header, 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 { CarouselType, Colors, ThemeType } from './types';
+export { Accordion, Accordions, AltHeader, AnchorTapBar, BodyText, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, devices, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Icon, 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, };

package/dist/types/carousel.d.ts

@@ -1,6 +1,8 @@
 import { ReactElement } from 'react';
 import { ICardProps } from './card';
+import { EditorialLink } from './editorial';
 import { IImageWithCaptionProps } from './image';
+import { ILogosProps } from './types';
 export declare enum CarouselType {
     Image = "image",
     SmallCard = "SmallCard",
@@ -46,3 +48,51 @@ export interface ICarouselWrapperProps {
      */
     imagesHeightDesktop?: number;
 }
+export interface IHighlightsCarouselProps {
+    /**
+     * Carousel title
+     */
+    carouselTitle?: string;
+    /**
+     * Logo element
+     */
+    logo?: ReactElement<ILogosProps> | null;
+    /**
+     * heder in info section
+     */
+    infoTitle: string;
+    /**
+     * Timeframe subtitle in info section
+     */
+    infoTimeframe: string;
+    /**
+     * text subtitle in info section
+     */
+    infoSubtitle?: string;
+    /**
+     * text in info section
+     */
+    infoText?: string;
+    /**
+     * Link in info section
+     */
+    link: EditorialLink;
+    /**
+     * Images to be displayed in the carousel
+     */
+    children: ReactElement<HTMLImageElement>[];
+}
+export interface IHighlightsCoreCarouselProps extends Omit<IHighlightsCarouselProps, 'logo'> {
+}
+export interface IHighlightsCinemaCarouselProps extends Omit<IHighlightsCarouselProps, 'logo'> {
+    /**
+     * Renders logo or not
+     */
+    logo: boolean;
+}
+export interface IHighlightsStreamCarouselProps extends Omit<IHighlightsCarouselProps, 'logo'> {
+    /**
+     * Renders logo or not
+     */
+    logo: boolean;
+}

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 import { FooterData } from './footer';
-import { ThemeType } from './types';
+import { Colors, ThemeType } from './types';
 import { INavigationProps, INavTopProps } from './navigation';
-export { FooterData, INavigationProps, INavTopProps, ThemeType };
+import { CarouselType } from './carousel';
+export { CarouselType, Colors, FooterData, INavigationProps, INavTopProps, ThemeType };

package/dist/types/navigation.d.ts

@@ -58,7 +58,7 @@ export interface ISearchProps {
     /**
      * Function to be called when is clicked
      */
-    onClick?: (e: MouseEvent) => void;
+    onClick?: () => void;
     /**
      * The primary color
      */
@@ -97,7 +97,7 @@ export interface INavTopProps {
     /**
      * Function to be called when Search component is clicked
      */
-    onClickSearch?: (e: MouseEvent) => void;
+    onClickSearch?: () => void;
     /**
      * Function to be called when is clicked
      */
@@ -148,6 +148,14 @@ export interface INavigationProps {
      * A set of data to make a menu
      */
     menuData: IMenuProps;
+    /**
+     * The url for the Desktop version of the logo
+     */
+    desktopLogoUrl: string;
+    /**
+     * The url for the Mobile and Tablet version of the logo
+     */
+    devicesLogoUrl?: string;
 }
 export interface ISearchBarProps {
     /**
@@ -209,6 +217,14 @@ export interface IAnchorBarProps {
      * 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
+     */
+    onTabClick?: (e: MouseEvent, id: string) => void;
+    /**
+     * Set the id of the tab actived
+     */
+    activeTab?: string;
 }
 export interface IAnchorTabsListProps {
     /**

package/dist/types/types.d.ts

@@ -41,6 +41,18 @@ export interface ILogoProps {
      * The link of the logo
      */
     urlLink?: string;
+    /**
+     * The image for desktop
+     */
+    desktopImage: string;
+    /**
+     * The image for other devices
+     */
+    devicesImage?: string;
+    /**
+     * The title of the image
+     */
+    title?: string;
 }
 export interface IOptionItem {
     /**
@@ -86,6 +98,14 @@ export interface ITabProps {
      * Function to be called when click
      */
     onClick?: (e: string) => void;
+    /**
+     * Function to be called when focus event is fired
+     */
+    onFocus?: () => void;
+    /**
+     * Function to be called when it is needed to back to initial state
+     */
+    onReset?: () => void;
     /**
      * The primary color
      */
@@ -155,6 +175,12 @@ export interface IDropdownProps {
      */
     colorPrimary?: string;
 }
+export interface IDropdowItemProps extends StyledProps<AnchorHTMLAttributes<HTMLAnchorElement>> {
+    /**
+     * The primary color
+     */
+    colorPrimary?: string;
+}
 export interface IControlledDropdownProps {
     /**
      * Text displayed as heading in the dropdown
@@ -192,6 +218,14 @@ export interface IControlledDropdownProps {
      * Callback called to reset dropdown behaviour
      */
     onReset?: () => void;
+    /**
+     * Callback called when main link or option are focused
+     */
+    onFocus?: () => void;
+    /**
+     * Callback called when main link or last option lose focus
+     */
+    onBlur?: () => void;
 }
 export interface IControlledDropdownHeaderProps extends StyledProps<any> {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@royaloperahouse/chord",
-  "version": "0.3.9",
+  "version": "0.4.3",
   "author": "Royal Opera House",
   "license": "MIT",
   "main": "dist/index.js",
@@ -97,10 +97,12 @@
     "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",
     "typescript": "^4.4.4"
+  },
+  "dependencies": {
+    "swiper": "^7.3.3"
   }
 }