@royaloperahouse/chord 0.4.1 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,7 @@
1
1
  import { IControlledDropdownHeaderProps } from '../../../types/types';
2
2
  export declare const ControlledDropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
3
- export declare const ControlledDropdownHeaderContainer: import("styled-components").StyledComponent<"a", any, IControlledDropdownHeaderProps, never>;
3
+ export declare const ControlledDropdownHeaderContainer: import("styled-components").StyledComponent<"span", any, IControlledDropdownHeaderProps, never>;
4
+ export declare const ControlledDropdownHeaderContainerLink: import("styled-components").StyledComponent<"span", any, IControlledDropdownHeaderProps & {
5
+ as: string;
6
+ }, "as">;
4
7
  export declare const IconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
@@ -1,4 +1,4 @@
1
- import { IDropdownProps } from '../../../types/types';
1
+ import { IDropdowItemProps, IDropdownProps } from '../../../types/types';
2
2
  export declare const TabContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
3
- export declare const OptionItem: import("styled-components").StyledComponent<"a", any, IDropdownProps, never>;
3
+ export declare const OptionItem: import("styled-components").StyledComponent<"a", any, IDropdowItemProps, never>;
4
4
  export declare const OptionsContainer: import("styled-components").StyledComponent<"div", any, IDropdownProps, never>;
@@ -1,3 +1,3 @@
1
1
  import { ITabProps } from '../../../types/types';
2
- declare const Tab: ({ title, titleLink, onClick, selected, iconName, withIcon, withTextInMobile, colorPrimary, }: ITabProps) => JSX.Element;
2
+ declare const Tab: ({ title, titleLink, onClick, onFocus, onReset, selected, iconName, withIcon, withTextInMobile, colorPrimary, }: ITabProps) => JSX.Element;
3
3
  export default Tab;
@@ -1,6 +1,6 @@
1
1
  import { AltHeader, BodyText, CinemaBadge, Grid, GridItem, Header, Icon, Overline, PrimaryButton, RotatorButtons, SecondaryButton, SecondaryLogo, TertiaryButton, SectionSplitter, Sponsorship, StreamBadge, Subtitle, TabLink, TypeTags } from './atoms';
2
- import { AnchorTapBar, Carousel, Footer, Navigation } from './organisms';
2
+ import { AnchorTapBar, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Carousel, Footer, Navigation } from './organisms';
3
3
  import { Accordion, Accordions, Card, Cards, Editorial, ImageWithCaption, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PromoWithTitle, SectionTitle, Tabs, TextOnly } from './molecules';
4
4
  import ThemeProvider from '../styles/ThemeProvider';
5
5
  import GlobalStyles from '../styles/GlobalStyles';
6
- 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, };
6
+ 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, };
@@ -0,0 +1,5 @@
1
+ import { FunctionComponent } from 'react';
2
+ import 'swiper/swiper-bundle.css';
3
+ import { IHighlightsCarouselProps } from '../../../types/carousel';
4
+ declare const HighlightsCarousel: FunctionComponent<IHighlightsCarouselProps>;
5
+ export default HighlightsCarousel;
@@ -0,0 +1,10 @@
1
+ export declare const HighlightsGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ export declare const CarouselTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
3
+ export declare const InfoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
4
+ export declare const InfoLogoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
5
+ export declare const InfoTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
6
+ export declare const InfoTextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
7
+ export declare const InfoLinkWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
8
+ export declare const CarouselWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
9
+ export declare const RotatorButtonsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
10
+ export declare const RotatorButtonsWrapperMobile: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -0,0 +1,4 @@
1
+ import { FunctionComponent } from 'react';
2
+ import { IHighlightsCinemaCarouselProps } from '../../../types/carousel';
3
+ declare const HighlightsCinema: FunctionComponent<IHighlightsCinemaCarouselProps>;
4
+ export default HighlightsCinema;
@@ -0,0 +1,4 @@
1
+ import { FunctionComponent } from 'react';
2
+ import { IHighlightsCoreCarouselProps } from '../../../types/carousel';
3
+ declare const HighlightsCore: FunctionComponent<IHighlightsCoreCarouselProps>;
4
+ export default HighlightsCore;
@@ -0,0 +1,4 @@
1
+ import { FunctionComponent } from 'react';
2
+ import { IHighlightsStreamCarouselProps } from '../../../types/carousel';
3
+ declare const HighlightsStream: FunctionComponent<IHighlightsStreamCarouselProps>;
4
+ export default HighlightsStream;
@@ -0,0 +1,5 @@
1
+ import HighlightsCarouselCinema from './HighlightsCinema';
2
+ import HighlightsCarouselCore from './HighlightsCore';
3
+ import HighlightsCarouselStream from './HighlightsStream';
4
+ import HighlightsCarousel from './HighlightsCarousel';
5
+ export { HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream };
@@ -2,4 +2,5 @@ import Navigation from './Navigation';
2
2
  import Footer from './Footer';
3
3
  import AnchorTapBar from './AnchorTapBar';
4
4
  import Carousel from './Carousel';
5
- export { AnchorTapBar, Carousel, Navigation, Footer };
5
+ import { HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream } from './HighlightsCarousel';
6
+ export { AnchorTapBar, Carousel, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Navigation, Footer, };
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- 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';
1
+ 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';
2
2
  import { devices } from './styles/viewports';
3
- import { Colors, ThemeType } from './types';
4
- export { Accordion, Accordions, AltHeader, AnchorTapBar, BodyText, Card, Cards, Carousel, CinemaBadge, Colors, 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, };
3
+ import { CarouselType, Colors, ThemeType } from './types';
4
+ 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, };
@@ -1,6 +1,8 @@
1
1
  import { ReactElement } from 'react';
2
2
  import { ICardProps } from './card';
3
+ import { EditorialLink } from './editorial';
3
4
  import { IImageWithCaptionProps } from './image';
5
+ import { ILogosProps } from './types';
4
6
  export declare enum CarouselType {
5
7
  Image = "image",
6
8
  SmallCard = "SmallCard",
@@ -46,3 +48,51 @@ export interface ICarouselWrapperProps {
46
48
  */
47
49
  imagesHeightDesktop?: number;
48
50
  }
51
+ export interface IHighlightsCarouselProps {
52
+ /**
53
+ * Carousel title
54
+ */
55
+ carouselTitle?: string;
56
+ /**
57
+ * Logo element
58
+ */
59
+ logo?: ReactElement<ILogosProps> | null;
60
+ /**
61
+ * heder in info section
62
+ */
63
+ infoTitle: string;
64
+ /**
65
+ * Timeframe subtitle in info section
66
+ */
67
+ infoTimeframe: string;
68
+ /**
69
+ * text subtitle in info section
70
+ */
71
+ infoSubtitle?: string;
72
+ /**
73
+ * text in info section
74
+ */
75
+ infoText?: string;
76
+ /**
77
+ * Link in info section
78
+ */
79
+ link: EditorialLink;
80
+ /**
81
+ * Images to be displayed in the carousel
82
+ */
83
+ children: ReactElement<HTMLImageElement>[];
84
+ }
85
+ export interface IHighlightsCoreCarouselProps extends Omit<IHighlightsCarouselProps, 'logo'> {
86
+ }
87
+ export interface IHighlightsCinemaCarouselProps extends Omit<IHighlightsCarouselProps, 'logo'> {
88
+ /**
89
+ * Renders logo or not
90
+ */
91
+ logo: boolean;
92
+ }
93
+ export interface IHighlightsStreamCarouselProps extends Omit<IHighlightsCarouselProps, 'logo'> {
94
+ /**
95
+ * Renders logo or not
96
+ */
97
+ logo: boolean;
98
+ }
@@ -1,4 +1,5 @@
1
1
  import { FooterData } from './footer';
2
2
  import { Colors, ThemeType } from './types';
3
3
  import { INavigationProps, INavTopProps } from './navigation';
4
- export { Colors, FooterData, INavigationProps, INavTopProps, ThemeType };
4
+ import { CarouselType } from './carousel';
5
+ export { CarouselType, Colors, FooterData, INavigationProps, INavTopProps, ThemeType };
@@ -58,7 +58,7 @@ export interface ISearchProps {
58
58
  /**
59
59
  * Function to be called when is clicked
60
60
  */
61
- onClick?: (e: MouseEvent) => void;
61
+ onClick?: () => void;
62
62
  /**
63
63
  * The primary color
64
64
  */
@@ -97,7 +97,7 @@ export interface INavTopProps {
97
97
  /**
98
98
  * Function to be called when Search component is clicked
99
99
  */
100
- onClickSearch?: (e: MouseEvent) => void;
100
+ onClickSearch?: () => void;
101
101
  /**
102
102
  * Function to be called when is clicked
103
103
  */
@@ -98,6 +98,14 @@ export interface ITabProps {
98
98
  * Function to be called when click
99
99
  */
100
100
  onClick?: (e: string) => void;
101
+ /**
102
+ * Function to be called when focus event is fired
103
+ */
104
+ onFocus?: () => void;
105
+ /**
106
+ * Function to be called when it is needed to back to initial state
107
+ */
108
+ onReset?: () => void;
101
109
  /**
102
110
  * The primary color
103
111
  */
@@ -167,6 +175,12 @@ export interface IDropdownProps {
167
175
  */
168
176
  colorPrimary?: string;
169
177
  }
178
+ export interface IDropdowItemProps extends StyledProps<AnchorHTMLAttributes<HTMLAnchorElement>> {
179
+ /**
180
+ * The primary color
181
+ */
182
+ colorPrimary?: string;
183
+ }
170
184
  export interface IControlledDropdownProps {
171
185
  /**
172
186
  * Text displayed as heading in the dropdown
@@ -204,6 +218,14 @@ export interface IControlledDropdownProps {
204
218
  * Callback called to reset dropdown behaviour
205
219
  */
206
220
  onReset?: () => void;
221
+ /**
222
+ * Callback called when main link or option are focused
223
+ */
224
+ onFocus?: () => void;
225
+ /**
226
+ * Callback called when main link or last option lose focus
227
+ */
228
+ onBlur?: () => void;
207
229
  }
208
230
  export interface IControlledDropdownHeaderProps extends StyledProps<any> {
209
231
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@royaloperahouse/chord",
3
- "version": "0.4.1",
3
+ "version": "0.4.2",
4
4
  "author": "Royal Opera House",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",