@royaloperahouse/harmonic 0.1.8-p → 0.1.9-a

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.
Files changed (64) hide show
  1. package/dist/components/Typography/Typography.d.ts +2 -1
  2. package/dist/components/atoms/Buttons/Primary/utils.d.ts +0 -2
  3. package/dist/components/atoms/Buttons/Secondary/utils.d.ts +1 -2
  4. package/dist/components/atoms/Buttons/Tertiary/utils.d.ts +1 -1
  5. package/dist/components/atoms/SponsorLogo/SponsorLogo.d.ts +1 -1
  6. package/dist/components/atoms/SponsorLogo/SponsorLogo.style.d.ts +2 -1
  7. package/dist/components/index.d.ts +4 -4
  8. package/dist/components/molecules/AnnouncementBanner/AnnouncementBanner.style.d.ts +1 -1
  9. package/dist/components/molecules/Card/Card.style.d.ts +1 -1
  10. package/dist/components/molecules/Information/Information.style.d.ts +12 -3
  11. package/dist/components/molecules/PageHeading/index.d.ts +1 -2
  12. package/dist/components/molecules/index.d.ts +2 -2
  13. package/dist/components/organisms/Footer/Footer.style.d.ts +1 -0
  14. package/dist/components/organisms/index.d.ts +1 -4
  15. package/dist/harmonic.cjs.development.css +135 -175
  16. package/dist/harmonic.cjs.development.js +761 -2149
  17. package/dist/harmonic.cjs.development.js.map +1 -1
  18. package/dist/harmonic.cjs.production.min.js +1 -1
  19. package/dist/harmonic.cjs.production.min.js.map +1 -1
  20. package/dist/harmonic.esm.js +793 -2171
  21. package/dist/harmonic.esm.js.map +1 -1
  22. package/dist/index.d.ts +3 -5
  23. package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +0 -1
  24. package/dist/types/buttonTypes.d.ts +2 -6
  25. package/dist/types/card.d.ts +2 -2
  26. package/dist/types/carousel.d.ts +9 -68
  27. package/dist/types/editorial.d.ts +3 -15
  28. package/dist/types/image.d.ts +3 -9
  29. package/dist/types/impactHeader.d.ts +1 -52
  30. package/dist/types/index.d.ts +3 -3
  31. package/dist/types/information.d.ts +41 -18
  32. package/dist/types/progress.d.ts +0 -4
  33. package/dist/types/types.d.ts +9 -5
  34. package/dist/types/typography.d.ts +5 -11
  35. package/package.json +1 -2
  36. package/dist/components/Typography/utils.d.ts +0 -7
  37. package/dist/components/molecules/Information/utils.d.ts +0 -11
  38. package/dist/components/molecules/PageHeading/Promo/Promo.d.ts +0 -5
  39. package/dist/components/molecules/PageHeading/Promo/Promo.style.d.ts +0 -28
  40. package/dist/components/molecules/PageHeading/Promo/components/Badge.d.ts +0 -10
  41. package/dist/components/molecules/PageHeading/Promo/components/Button.d.ts +0 -10
  42. package/dist/components/molecules/PageHeading/Promo/components/Image.d.ts +0 -4
  43. package/dist/components/molecules/PageHeading/Promo/index.d.ts +0 -2
  44. package/dist/components/molecules/Swipe/Swipe.d.ts +0 -13
  45. package/dist/components/molecules/Swipe/Swipe.style.d.ts +0 -8
  46. package/dist/components/molecules/Swipe/helper.d.ts +0 -2
  47. package/dist/components/molecules/Swipe/index.d.ts +0 -2
  48. package/dist/components/organisms/Carousels/Carousel/Carousel.d.ts +0 -4
  49. package/dist/components/organisms/Carousels/Carousel/Carousel.style.d.ts +0 -11
  50. package/dist/components/organisms/Carousels/Carousel/helper.d.ts +0 -26
  51. package/dist/components/organisms/Carousels/Carousel/index.d.ts +0 -2
  52. package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.d.ts +0 -4
  53. package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.style.d.ts +0 -21
  54. package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCinema.d.ts +0 -4
  55. package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCore.d.ts +0 -4
  56. package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsStream.d.ts +0 -4
  57. package/dist/components/organisms/Carousels/HighlightsCarousel/components/Buttons.d.ts +0 -5
  58. package/dist/components/organisms/Carousels/HighlightsCarousel/components/InfoSection.d.ts +0 -10
  59. package/dist/components/organisms/Carousels/HighlightsCarousel/components/SwipeCarousel.d.ts +0 -12
  60. package/dist/components/organisms/Carousels/HighlightsCarousel/helper.d.ts +0 -291
  61. package/dist/components/organisms/Carousels/HighlightsCarousel/index.d.ts +0 -5
  62. package/dist/components/organisms/Carousels/MinimalCarousel/MinimalCarousel.d.ts +0 -4
  63. package/dist/components/organisms/Carousels/MinimalCarousel/MinimalCarousel.style.d.ts +0 -4
  64. package/dist/components/organisms/Carousels/MinimalCarousel/index.d.ts +0 -2
package/dist/index.d.ts CHANGED
@@ -1,11 +1,9 @@
1
- import { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, Carousel, CinemaBadge, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Navigation, MinimalCarousel, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, Tab, Table, TabLink, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls, SignUpForm } from './components';
1
+ import { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, CinemaBadge, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, Tab, Table, TabLink, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls, SignUpForm } from './components';
2
2
  import { devices, breakpoints } from './styles/viewports';
3
3
  import zIndexes from './styles/zIndexes';
4
- import { AspectRatio, ButtonType, CarouselType, Colors, IconNameType, IntegratedTimerProps, ITimerProps, TickboxMode, ThemeColor, ThemeType, EditorialLink, IInformationTitleProps, IInformationCTAProps } from './types';
4
+ import { AspectRatio, ButtonType, CarouselType, Colors, IconNameType, IntegratedTimerProps, ITimerProps, TickboxMode, ThemeType, EditorialLink, IInformationTitleProps, IInformationCTAProps, IInformationBackgroundColour } from './types';
5
5
  import { MiniCard } from './components/molecules';
6
6
  import { ModalWindow } from './components/organisms';
7
7
  import AuxiliaryButton from './components/atoms/Buttons/Auxiliary/AuxiliaryButton';
8
8
  import HarmonicThemeProvider from './styles/HarmonicThemeProvider';
9
- import { HarmonicSizes } from './types/typography';
10
- import type { HarmonicSize } from './types/typography';
11
- export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, AuxiliaryNav, AspectRatio, BodyText, breakpoints, ButtonType, Card, Cards, CarouselType, Carousel, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, HarmonicSize, HarmonicSizes, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, IInformationCTAProps, IInformationTitleProps, ITimerProps, IntegratedTimerProps, MinimalCarousel, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, Tab, Table, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, ThemeColor, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, Tickbox2, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls, zIndexes, SignUpForm, };
9
+ export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, AuxiliaryNav, AspectRatio, BodyText, breakpoints, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, HarmonicThemeProvider, Header, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, IInformationBackgroundColour, IInformationCTAProps, IInformationTitleProps, ITimerProps, IntegratedTimerProps, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, Tab, Table, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, Tickbox2, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls, zIndexes, SignUpForm, };
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ThemeType } from '../../types';
3
3
  import './theme/fonts.css';
4
- import './theme/typography.css';
5
4
  interface HarmonicThemeProviderProps {
6
5
  theme: ThemeType;
7
6
  children: React.ReactNode;
@@ -29,17 +29,13 @@ declare type StyleProps = {
29
29
  backgroundColor?: ThemeColor;
30
30
  /** Border color from theme */
31
31
  borderColor?: ThemeColor;
32
- /** Hovered color from theme */
33
- hoveredColor?: ThemeColor;
34
- /** Pressed element color from theme */
35
- pressedColor?: ThemeColor;
36
32
  /** Disabled state */
37
33
  disabled?: boolean;
38
34
  };
39
35
  export declare type ButtonProps = BaseProps & IconProps & AnchorHTMLAttributes<HTMLAnchorElement>;
40
36
  export declare type AuxiliaryButtonProps = ButtonProps & Pick<StyleProps, 'textColor' | 'backgroundColor'>;
41
- export declare type PrimaryButtonProps = ButtonProps & Pick<StyleProps, 'textColor' | 'backgroundColor' | 'hoveredColor' | 'pressedColor' | 'disabled'>;
42
- export declare type SecondaryButtonProps = ButtonProps & Pick<StyleProps, 'textColor' | 'borderColor' | 'hoveredColor' | 'pressedColor' | 'disabled'>;
37
+ export declare type PrimaryButtonProps = ButtonProps & Pick<StyleProps, 'textColor' | 'backgroundColor' | 'disabled'>;
38
+ export declare type SecondaryButtonProps = ButtonProps & Pick<StyleProps, 'textColor' | 'borderColor' | 'disabled'>;
43
39
  export declare type TertiaryButtonProps = BaseProps & AnchorHTMLAttributes<HTMLAnchorElement> & Pick<StyleProps, 'textColor' | 'disabled'>;
44
40
  export declare type RotatorButtonsProps = {
45
41
  /** Enable/disable prev button */
@@ -1,5 +1,5 @@
1
1
  import { StyledProps } from 'styled-components';
2
- import { Colors, EditorialLink, IconNameType, ThemeColor } from '.';
2
+ import { Colors, EditorialLink, IconNameType } from '.';
3
3
  import { PromoLinks } from './editorial';
4
4
  import { DirectionType } from './iconTypes';
5
5
  export interface CardLabelProps {
@@ -80,7 +80,7 @@ export interface ICardProps {
80
80
  /**
81
81
  * Defines the color for a line that appears on hover
82
82
  */
83
- hoverLineColor?: ThemeColor;
83
+ hoverLineColor?: Colors;
84
84
  /**
85
85
  * A callback to be called when the
86
86
  */
@@ -1,10 +1,9 @@
1
1
  import { ImgHTMLAttributes, ReactElement } from 'react';
2
2
  import { ICardProps } from './card';
3
+ import { EditorialLink } from './editorial';
3
4
  import { IImageWithCaptionProps } from './image';
4
5
  import { IntegratedTimerProps } from './timer';
5
6
  import { ILogosProps } from './types';
6
- import { EditorialLink } from './editorial';
7
- import { TypographyLevel } from './typography';
8
7
  export declare enum CarouselType {
9
8
  Image = "image",
10
9
  SmallCard = "SmallCard",
@@ -15,10 +14,6 @@ export interface ICarouselProps {
15
14
  * Carousel title
16
15
  */
17
16
  title?: string;
18
- /**
19
- * Carousel description
20
- */
21
- description?: string;
22
17
  /**
23
18
  * Carousel type.
24
19
  */
@@ -39,20 +34,12 @@ export interface ICarouselProps {
39
34
  * Defines if there should be offset added at the beginning of the container. True by default;
40
35
  */
41
36
  useOffset?: boolean;
42
- /**
43
- * Semantic level of the title
44
- */
45
- titleSemanticLevel?: TypographyLevel;
46
- /**
47
- * Sets infinite mode ON/OFF
48
- */
49
- infinite?: boolean;
50
- /**
51
- * CSS class name
52
- */
53
- className?: string;
54
37
  }
55
38
  export interface ICarouselWrapperProps {
39
+ /**
40
+ * Carousel has been activated or not
41
+ */
42
+ active: boolean;
56
43
  /**
57
44
  * Carousel type.
58
45
  */
@@ -73,38 +60,10 @@ export interface ICarouselWrapperProps {
73
60
  * Sets overflow to swiper when specified
74
61
  */
75
62
  overflow?: string;
76
- /**
77
- * Carousel activation indicator
78
- */
79
- isActive?: boolean;
80
63
  }
81
64
  export declare type HighlightsCarouselSlideImage = ImgHTMLAttributes<HTMLImageElement> & {
82
65
  key: string;
83
66
  };
84
- interface SlideVideo {
85
- desktop: string;
86
- mobile: string;
87
- }
88
- interface SlidePoster {
89
- desktop: string;
90
- mobile: string;
91
- altText: string;
92
- }
93
- export interface HighlightsCarouselSlideVideo {
94
- video: SlideVideo;
95
- poster: SlidePoster;
96
- key: string;
97
- autoPlay: boolean;
98
- muted: boolean;
99
- soundControl: boolean;
100
- fullScreenOption: boolean;
101
- loop: boolean;
102
- }
103
- export interface HighlightsCarouselVideoSlideProps {
104
- index: number;
105
- isCurrentSlide: boolean;
106
- settings: HighlightsCarouselSlideVideo;
107
- }
108
67
  export declare type HighlightsCarouselSlide = {
109
68
  /**
110
69
  * heder in info section
@@ -131,17 +90,13 @@ export declare type HighlightsCarouselSlide = {
131
90
  */
132
91
  links: EditorialLink[];
133
92
  /**
134
- * Slide media
93
+ * Slide image
135
94
  */
136
- mediaContent: HighlightsCarouselSlideImage | HighlightsCarouselSlideVideo;
95
+ image: HighlightsCarouselSlideImage;
137
96
  /**
138
97
  * Params for Timer component
139
98
  */
140
99
  timerParams?: IntegratedTimerProps;
141
- /**
142
- * Renders an auxiliary button when passed
143
- */
144
- auxiliaryCTA?: EditorialLink;
145
100
  };
146
101
  export interface IHighlightsCarouselProps {
147
102
  /**
@@ -156,16 +111,9 @@ export interface IHighlightsCarouselProps {
156
111
  * slides to be displayed in the carousel
157
112
  */
158
113
  slides: HighlightsCarouselSlide[];
159
- /**
160
- * Semantic level of the title
161
- */
162
- titleSemanticLevel?: TypographyLevel;
163
- /**
164
- * Additional CSS class names to apply to the navigation component.
165
- */
166
- className?: string;
167
114
  }
168
- export declare type IHighlightsCoreCarouselProps = Omit<IHighlightsCarouselProps, 'logo'>;
115
+ export interface IHighlightsCoreCarouselProps extends Omit<IHighlightsCarouselProps, 'logo'> {
116
+ }
169
117
  export interface IHighlightsCinemaCarouselProps extends Omit<IHighlightsCarouselProps, 'logo'> {
170
118
  /**
171
119
  * Renders logo or not
@@ -178,10 +126,3 @@ export interface IHighlightsStreamCarouselProps extends Omit<IHighlightsCarousel
178
126
  */
179
127
  logo: boolean;
180
128
  }
181
- export interface IMinimalCarouselProps {
182
- /**
183
- * Carousel children (only Card and ImageAspectRatioWrapper children are allowed).
184
- */
185
- children: ReactElement[];
186
- }
187
- export {};
@@ -2,7 +2,7 @@ import { AnchorHTMLAttributes, ImgHTMLAttributes, MouseEventHandler, ReactElemen
2
2
  import { StyledProps } from 'styled-components';
3
3
  import { ButtonType } from './buttonTypes';
4
4
  import { DirectionType, IconNameType } from './iconTypes';
5
- import { Colors, IVideoWithControlsSettings, ThemeColor } from './types';
5
+ import { Colors, IVideoWithControlsSettings } from './types';
6
6
  import { TypographyLevel } from './typography';
7
7
  export interface IEditorialProps {
8
8
  /**
@@ -68,23 +68,11 @@ export declare type EditorialLink = AnchorHTMLAttributes<HTMLAnchorElement> & {
68
68
  /**
69
69
  * Color of text and icon
70
70
  */
71
- textColor?: ThemeColor;
71
+ color?: Colors;
72
72
  /**
73
73
  * background color
74
74
  */
75
- backgroundColor?: ThemeColor;
76
- /**
77
- * Border color
78
- */
79
- borderColor?: ThemeColor;
80
- /**
81
- * Hovered color
82
- */
83
- hoveredColor?: ThemeColor;
84
- /**
85
- * Pressed color
86
- */
87
- pressedColor?: ThemeColor;
75
+ bgColor?: Colors;
88
76
  /**
89
77
  * type of the button to be rendered; When not passed the Primary and Tetriary are displayed by default;
90
78
  */
@@ -5,27 +5,21 @@ export declare enum AspectRatio {
5
5
  '3:4' = "3 / 4",
6
6
  '4:3' = "4 / 3",
7
7
  '8:3' = "8 / 3",
8
- '16:9' = "16 / 9",
9
- '90:17' = "90 / 17",
10
- '75:32' = "75 / 32"
8
+ '16:9' = "16 / 9"
11
9
  }
12
10
  export declare enum AspectRatioLegacy {
13
11
  '1 / 1' = "100",
14
12
  '3 / 4' = "133",
15
13
  '4 / 3' = "75",
16
14
  '8 / 3' = "37.5",
17
- '16 / 9' = "56.25",
18
- '90 / 17' = "18.88",
19
- '75 / 32' = "15"
15
+ '16 / 9' = "56.25"
20
16
  }
21
17
  export declare enum AspectRatioWidth {
22
18
  '1 / 1' = "1",
23
19
  '3 / 4' = "0.75",
24
20
  '4 / 3' = "1.33",
25
21
  '8 / 3' = "2.67",
26
- '16 / 9' = "1.78",
27
- '90 / 17' = "5.29",
28
- '75 / 32' = "2.34"
22
+ '16 / 9' = "1.78"
29
23
  }
30
24
  export interface IImageAspectRatioWrapperProps {
31
25
  /**
@@ -1,6 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { EditorialLink } from '../types';
3
- import { TypographyHierarchy, TypographyLevel } from './typography';
3
+ import { TypographyLevel } from './typography';
4
4
  export interface CustomSponsorImageData {
5
5
  /**
6
6
  * Source URL for Sponsorship logo
@@ -133,54 +133,3 @@ export interface IPageHeadingCompactProps {
133
133
  */
134
134
  semanticLevel?: TypographyLevel;
135
135
  }
136
- export declare type PageHeadingPromoImageProps = {
137
- /**
138
- * Image url for desktops
139
- */
140
- desktop: string;
141
- /**
142
- * Image url for devices
143
- */
144
- mobile: string;
145
- /**
146
- * Alt text for the main image
147
- */
148
- alt: string;
149
- };
150
- export declare enum PageHeadingPromoBadge {
151
- Stream = "Stream",
152
- Cinema = "Cinema"
153
- }
154
- export declare type PageHeadingPromoAdditionalLink = EditorialLink & {
155
- isTextLink?: boolean;
156
- };
157
- export interface IPageHeadingPromoProps {
158
- /**
159
- * Title text
160
- */
161
- title?: string;
162
- /**
163
- * Semantic level of the header
164
- */
165
- titleSemanticLevel?: TypographyHierarchy;
166
- /**
167
- * Boolean to show/hide sponsorship logo (default true)
168
- */
169
- sponsor?: boolean;
170
- /**
171
- * Link placed in the impact component
172
- */
173
- mainLink?: EditorialLink;
174
- /**
175
- * Link placed in the impact component
176
- */
177
- additionalLink?: PageHeadingPromoAdditionalLink;
178
- /**
179
- * Heading image
180
- */
181
- image: PageHeadingPromoImageProps;
182
- /**
183
- * Badge variant
184
- */
185
- badge?: PageHeadingPromoBadge;
186
- }
@@ -1,5 +1,5 @@
1
1
  import type { FooterData } from './footer';
2
- import { Colors, ThemeType, ThemeColor } from './types';
2
+ import { Colors, ThemeType } from './types';
3
3
  import { INavigationProps, INavTopProps } from './navigation';
4
4
  import { CarouselType } from './carousel';
5
5
  import { IconNameType } from './iconTypes';
@@ -11,6 +11,6 @@ import { IPageHeadingCompactProps } from './impactHeader';
11
11
  import { IntegratedTimerProps, ITimerProps } from './timer';
12
12
  import { ICreditListing } from './creditListing';
13
13
  import { ModalWindowProps } from './modalWindow';
14
- import { IInformationTitleProps, IInformationCTAProps } from './information';
15
- export { AspectRatio, ButtonType, CarouselType, Colors, EditorialLink, IconNameType, ICreditListing, IPageHeadingCompactProps, INavigationProps, INavTopProps, IntegratedTimerProps, ITimerProps, ModalWindowProps, TickboxMode, ThemeColor, ThemeType, IInformationTitleProps, IInformationCTAProps, };
14
+ import { IInformationTitleProps, IInformationCTAProps, IInformationBackgroundColour } from './information';
15
+ export { AspectRatio, ButtonType, CarouselType, Colors, EditorialLink, IconNameType, ICreditListing, IPageHeadingCompactProps, INavigationProps, INavTopProps, IntegratedTimerProps, ITimerProps, ModalWindowProps, TickboxMode, ThemeType, IInformationTitleProps, IInformationCTAProps, IInformationBackgroundColour, };
16
16
  export type { FooterData };
@@ -1,16 +1,28 @@
1
1
  import { DirectionType, IconNameType } from './iconTypes';
2
2
  import { LinkTarget } from './types';
3
- import type { ThemeChildProps } from './types';
4
- import type { HarmonicSize } from './typography';
5
- export declare const InformationCtaVariants: {
6
- readonly Primary: "Primary";
7
- readonly Secondary: "Secondary";
8
- readonly Tertiary: "Tertiary";
9
- readonly TextLink: "TextLink";
10
- };
11
- export declare type InformationCtaVariant = keyof typeof InformationCtaVariants;
12
- declare type ThemeProps = Pick<ThemeChildProps, 'theme'>;
13
- export interface IInformationCTAProps extends ThemeProps {
3
+ export declare enum IInformationCtaVariant {
4
+ Primary = "Primary",
5
+ Secondary = "Secondary",
6
+ Tertiary = "Tertiary",
7
+ TextLink = "TextLink"
8
+ }
9
+ export declare enum IInformationCtaTheme {
10
+ Cinema = "Cinema",
11
+ Core = "Core",
12
+ Stream = "Stream"
13
+ }
14
+ export declare enum IInformationTitleVariant {
15
+ Header = "Header",
16
+ AltHeader = "AltHeader"
17
+ }
18
+ export declare enum IInformationBackgroundColour {
19
+ Cinema = "cinema",
20
+ Core = "core",
21
+ Stream = "stream",
22
+ White = "white"
23
+ }
24
+ export declare type TitleTextSize = 3 | 4 | 5 | 6;
25
+ export interface IInformationCTAProps {
14
26
  /**
15
27
  * Text to display on the CTA
16
28
  */
@@ -20,9 +32,14 @@ export interface IInformationCTAProps extends ThemeProps {
20
32
  */
21
33
  link: string;
22
34
  /**
23
- * Style of the CTA
35
+ * Style of the CTA. Choices are "Primary" (solid button background), "Secondary" (transparent button background)
36
+ * or "Tertiary" (text only)
37
+ */
38
+ variant?: IInformationCtaVariant;
39
+ /**
40
+ * Flag to decide whether to adjust the CTA colours for display on coloured backgrounds
24
41
  */
25
- variant?: InformationCtaVariant;
42
+ infoThemed: boolean;
26
43
  /**
27
44
  * Name of the icon to be used in the button
28
45
  */
@@ -36,18 +53,21 @@ export interface IInformationCTAProps extends ThemeProps {
36
53
  */
37
54
  target?: LinkTarget;
38
55
  }
39
- export declare type InformationCTAWrapperProps = Pick<IInformationCTAProps, 'variant' | 'theme'>;
40
56
  export interface IInformationTitleProps {
41
57
  /**
42
58
  * Title text to display
43
59
  */
44
60
  text: string;
61
+ /**
62
+ * Title typography type. Choices are Heading or AltHeader
63
+ */
64
+ variant: IInformationTitleVariant;
45
65
  /**
46
66
  * The size of the title text
47
67
  */
48
- textSize: HarmonicSize;
68
+ textSize: TitleTextSize;
49
69
  }
50
- export interface IInformationProps extends ThemeProps {
70
+ export interface IInformationProps {
51
71
  /**
52
72
  * Main body text to display in the Information Component
53
73
  */
@@ -59,10 +79,13 @@ export interface IInformationProps extends ThemeProps {
59
79
  /**
60
80
  * Title options for the component
61
81
  */
62
- title?: IInformationTitleProps;
82
+ title: IInformationTitleProps;
83
+ /**
84
+ * Background Colour. Choices: None, Core, Cinema, Stream
85
+ */
86
+ background?: IInformationBackgroundColour;
63
87
  /**
64
88
  * Additional CSS class names to apply to component.
65
89
  */
66
90
  className?: string;
67
91
  }
68
- export {};
@@ -30,8 +30,4 @@ export interface IProgressProps {
30
30
  * Number of the steps
31
31
  */
32
32
  steps?: IProgressSteps;
33
- /**
34
- * The presence of a shadow under the progress bar
35
- */
36
- shadow?: boolean;
37
33
  }
@@ -52,10 +52,6 @@ export declare enum ThemeType {
52
52
  Cinema = "cinema",
53
53
  Schools = "schools"
54
54
  }
55
- export declare type ThemeChildProps = {
56
- className?: string;
57
- theme?: ThemeType;
58
- };
59
55
  export interface IThemeProviderProps {
60
56
  /**
61
57
  * The theme to use for the child elements
@@ -376,6 +372,10 @@ export interface IGridItemProps extends StyledProps<any> {
376
372
  columnSpanSmallDevice?: number;
377
373
  }
378
374
  export interface ISponsorLogoProps {
375
+ /**
376
+ * The sponsor logo image source
377
+ */
378
+ children?: ReactNode;
379
379
  /**
380
380
  * Color for the logo
381
381
  */
@@ -388,6 +388,10 @@ export interface ISponsorLogoProps {
388
388
  * Alternative text for the logo (used for accessibility)
389
389
  */
390
390
  alt?: string;
391
+ /**
392
+ * S3 Image source
393
+ */
394
+ imageSource?: string;
391
395
  }
392
396
  export interface ISponsorshipProps {
393
397
  /**
@@ -428,7 +432,7 @@ export interface ITextLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>
428
432
  /**
429
433
  * Color of text and icon
430
434
  */
431
- textColor?: ThemeColor;
435
+ color?: Colors;
432
436
  }
433
437
  export interface ISectionSplitterProps {
434
438
  /**
@@ -1,14 +1,9 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { StyledProps } from 'styled-components';
3
- export declare const HarmonicSizes: {
4
- readonly Small: "small";
5
- readonly Medium: "medium";
6
- readonly Large: "large";
7
- };
8
- export declare type HarmonicSize = (typeof HarmonicSizes)[keyof typeof HarmonicSizes];
9
- export declare type HarmonicColors = 'primary' | 'black' | 'white' | 'red' | 'grey' | 'inherit';
10
- export interface IGenericTypographyProps<T extends HTMLElement = HTMLParagraphElement> extends React.HTMLAttributes<T> {
11
- children?: ReactNode;
3
+ export declare type HarmonicSize = 'small' | 'medium' | 'large';
4
+ export declare type HarmonicColors = 'primary' | 'black' | 'white' | 'red' | 'grey';
5
+ export interface IGenericTypographyProps {
6
+ children: ReactNode;
12
7
  size?: HarmonicSize;
13
8
  serif?: boolean;
14
9
  color?: HarmonicColors;
@@ -16,9 +11,8 @@ export interface IGenericTypographyProps<T extends HTMLElement = HTMLParagraphEl
16
11
  bold?: boolean;
17
12
  className?: string;
18
13
  }
19
- export declare type TypographyHierarchy = 'h1' | 'h2' | 'h3';
20
14
  export interface IHarmonicHeaderProps extends IGenericTypographyProps {
21
- hierarchy: TypographyHierarchy;
15
+ hierarchy: 'h1' | 'h2' | 'h3';
22
16
  }
23
17
  export declare type TypographyLevel = 1 | 2 | 3 | 4 | 5 | 6;
24
18
  export declare type AltHeaderLevel = 3 | 4 | 5 | 6;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@royaloperahouse/harmonic",
3
- "version": "0.1.8-p",
3
+ "version": "0.1.9-a",
4
4
  "author": "Royal Opera House",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
@@ -88,7 +88,6 @@
88
88
  "@types/react-modal": "^3.16.3",
89
89
  "@types/react-select": "^5.0.1",
90
90
  "@types/react-test-renderer": "^17.0.1",
91
- "@types/resize-observer-browser": "^0.1.11",
92
91
  "@types/styled-components": "5.1.26",
93
92
  "@types/testing-library__jest-dom": "^5.9.1",
94
93
  "@typescript-eslint/eslint-plugin": "^5.0.0",
@@ -1,7 +0,0 @@
1
- export declare const createClassNames: (baseClass: string, options: {
2
- size?: string;
3
- color?: string;
4
- serif?: boolean;
5
- em?: boolean;
6
- className?: string;
7
- }) => string;
@@ -1,11 +0,0 @@
1
- import type { InformationCtaVariant } from '../../../types/information';
2
- import { ThemeType } from '../../../types/types';
3
- export declare const COLORS: {
4
- readonly default: "var(--information-panel-button-color)";
5
- readonly background: "var(--information-panel-button-bg-color)";
6
- readonly hover: "var(--information-panel-button-hover-color)";
7
- readonly pressed: "var(--information-panel-button-pressed-color)";
8
- };
9
- export declare const getTextColor: (variant: InformationCtaVariant | undefined, theme: ThemeType, colorValue: string) => string;
10
- export declare const getBackgroundColor: (variant: InformationCtaVariant | undefined, colorValue: string) => string;
11
- export declare const getBorderColor: (variant: InformationCtaVariant | undefined, colorValue: string) => string;
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- import { IPageHeadingPromoProps } from '../../../../types/impactHeader';
3
- import { ThemeChildProps } from '../../../../types/types';
4
- declare const PageHeadingPromo: React.FC<IPageHeadingPromoProps & ThemeChildProps>;
5
- export default PageHeadingPromo;
@@ -1,28 +0,0 @@
1
- import { ThemeType } from '../../../../types';
2
- declare type ThemeProps = {
3
- theme: ThemeType;
4
- };
5
- declare type TitleWrapperProps = ThemeProps & {
6
- isButtonPresent: boolean;
7
- };
8
- declare type MainButtonProps = {
9
- isAdditionalButtonPresent: boolean;
10
- };
11
- declare type ContentSectionProps = ThemeProps & {
12
- showBlock: boolean;
13
- };
14
- declare type AdditionalContentProps = {
15
- isBadgePresent: boolean;
16
- };
17
- export declare const Wrapper: import("styled-components").StyledComponent<"section", any, {}, never>;
18
- export declare const ImageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
19
- export declare const SponsorWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
20
- export declare const ImageButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
21
- export declare const ContentSection: import("styled-components").StyledComponent<"div", any, ContentSectionProps, never>;
22
- export declare const BadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
23
- export declare const AdditionalContentWrapper: import("styled-components").StyledComponent<"div", any, AdditionalContentProps, never>;
24
- export declare const MainButtonWrapper: import("styled-components").StyledComponent<"div", any, MainButtonProps, never>;
25
- export declare const AdditionalButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
26
- export declare const TitleWrapper: import("styled-components").StyledComponent<"div", any, TitleWrapperProps, never>;
27
- export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
28
- export {};
@@ -1,10 +0,0 @@
1
- import React from 'react';
2
- import { ThemeType } from '../../../../../types';
3
- import { PageHeadingPromoBadge } from '../../../../../types/impactHeader';
4
- declare type Props = {
5
- theme?: ThemeType;
6
- badge?: PageHeadingPromoBadge;
7
- isMobile: boolean;
8
- };
9
- declare const Badge: React.FC<Props>;
10
- export default Badge;
@@ -1,10 +0,0 @@
1
- import React from 'react';
2
- import { EditorialLink, ThemeType } from '../../../../../types';
3
- import { PageHeadingPromoAdditionalLink } from '../../../../../types/impactHeader';
4
- declare type Props = {
5
- link: PageHeadingPromoAdditionalLink | EditorialLink;
6
- theme?: ThemeType;
7
- isMobile?: boolean;
8
- };
9
- declare const Button: React.FC<Props>;
10
- export default Button;
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import { PageHeadingPromoImageProps } from '../../../../../types/impactHeader';
3
- declare const Image: React.FC<PageHeadingPromoImageProps>;
4
- export default Image;
@@ -1,2 +0,0 @@
1
- import PageHeadingPromo from './Promo';
2
- export default PageHeadingPromo;
@@ -1,13 +0,0 @@
1
- import React from 'react';
2
- export interface SwipeRef {
3
- nextSlide: () => void;
4
- prevSlide: () => void;
5
- }
6
- declare const Swipe: React.ForwardRefExoticComponent<{
7
- children: React.ReactNode[];
8
- infinite?: boolean | undefined;
9
- slidesOffsetBefore?: number | undefined;
10
- onIndexChange?: ((index: number) => void) | undefined;
11
- onActiveChange?: ((value: boolean) => void) | undefined;
12
- } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<SwipeRef>>;
13
- export default Swipe;