@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.
- package/CHANGELOG.md +4 -0
- package/README.md +2 -2
- package/dist/chord.cjs.development.js +669 -289
- package/dist/chord.cjs.development.js.map +1 -1
- package/dist/chord.cjs.production.min.js +1 -1
- package/dist/chord.cjs.production.min.js.map +1 -1
- package/dist/chord.esm.js +661 -283
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/atoms/ControlledDropdown/ControlledDropdown.style.d.ts +4 -1
- package/dist/components/atoms/Dropdown/Dropdown.style.d.ts +2 -2
- package/dist/components/atoms/Tab/Tab.d.ts +1 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/components/organisms/HighlightsCarousel/HighlightsCarousel.d.ts +5 -0
- package/dist/components/organisms/HighlightsCarousel/HighlightsCarousel.style.d.ts +10 -0
- package/dist/components/organisms/HighlightsCarousel/HighlightsCinema.d.ts +4 -0
- package/dist/components/organisms/HighlightsCarousel/HighlightsCore.d.ts +4 -0
- package/dist/components/organisms/HighlightsCarousel/HighlightsStream.d.ts +4 -0
- package/dist/components/organisms/HighlightsCarousel/index.d.ts +5 -0
- package/dist/components/organisms/index.d.ts +2 -1
- package/dist/index.d.ts +3 -3
- package/dist/types/carousel.d.ts +50 -0
- package/dist/types/index.d.ts +2 -1
- package/dist/types/navigation.d.ts +2 -2
- package/dist/types/types.d.ts +22 -0
- package/package.json +1 -1
|
@@ -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<"
|
|
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,
|
|
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,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,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
|
-
|
|
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,
|
|
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, };
|
package/dist/types/carousel.d.ts
CHANGED
|
@@ -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
|
+
}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -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
|
-
|
|
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?: (
|
|
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?: (
|
|
100
|
+
onClickSearch?: () => void;
|
|
101
101
|
/**
|
|
102
102
|
* Function to be called when is clicked
|
|
103
103
|
*/
|
package/dist/types/types.d.ts
CHANGED
|
@@ -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
|
/**
|