@royaloperahouse/harmonic 0.17.0-l → 0.17.1

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 (35) hide show
  1. package/CHANGELOG.md +3 -0
  2. package/README.GIT +294 -0
  3. package/README.md +43 -268
  4. package/dist/components/atoms/Dropdown/Dropdown.d.ts +1 -1
  5. package/dist/components/atoms/ImageAspectRatioWrapper/ImageAspectRatioWrapper.d.ts +1 -1
  6. package/dist/components/atoms/RotatorButtons/RotatorButtons.d.ts +1 -1
  7. package/dist/components/atoms/Tab/Tab.d.ts +1 -1
  8. package/dist/components/index.d.ts +2 -2
  9. package/dist/components/molecules/ImageWithCaption/ImageWithCaption.d.ts +2 -2
  10. package/dist/components/molecules/ImageWithCaption/ImageWithCaption.style.d.ts +1 -2
  11. package/dist/components/molecules/PageHeading/index.d.ts +1 -2
  12. package/dist/components/molecules/PeopleListing/PeopleListing.d.ts +1 -1
  13. package/dist/components/molecules/PeopleListing/PeopleListing.style.d.ts +2 -2
  14. package/dist/components/molecules/SkipToMain/SkipToMain.style.d.ts +1 -1
  15. package/dist/components/molecules/UpsellCard/UpsellCard.style.d.ts +11 -276
  16. package/dist/components/molecules/index.d.ts +2 -2
  17. package/dist/components/organisms/AnchorTabBar/AnchorTabBar.style.d.ts +1 -1
  18. package/dist/components/organisms/UpsellSection/UpsellSection.style.d.ts +1 -272
  19. package/dist/harmonic.cjs.development.css +12 -344
  20. package/dist/harmonic.cjs.development.js +4011 -4089
  21. package/dist/harmonic.cjs.development.js.map +1 -1
  22. package/dist/harmonic.cjs.production.min.js +1 -1
  23. package/dist/harmonic.cjs.production.min.js.map +1 -1
  24. package/dist/harmonic.esm.js +4060 -4140
  25. package/dist/harmonic.esm.js.map +1 -1
  26. package/dist/index.d.ts +2 -2
  27. package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +0 -1
  28. package/dist/types/anchorBar.d.ts +0 -3
  29. package/dist/types/image.d.ts +11 -15
  30. package/dist/types/types.d.ts +4 -16
  31. package/dist/types/upsell.d.ts +15 -7
  32. package/package.json +3 -2
  33. package/dist/components/molecules/PageHeading/HighlightCarousel/HighlightCarousel.d.ts +0 -4
  34. package/dist/components/molecules/PageHeading/HighlightCarousel/HighlightCarousel.style.d.ts +0 -14
  35. package/dist/components/molecules/PageHeading/HighlightCarousel/index.d.ts +0 -2
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, Carousel, CinemaBadge, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Navigation, MinimalCarousel, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Paywall, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, SignUpForm, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, TertiaryButton, ThemeProvider, TitleWithCTA, Tab, Table, TabLink, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls } from './components';
1
+ import { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, Carousel, CinemaBadge, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Navigation, MinimalCarousel, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, SignUpForm, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, TertiaryButton, ThemeProvider, TitleWithCTA, Tab, Table, TabLink, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls } from './components';
2
2
  import BodyContent from './components/molecules/BodyContent';
3
3
  import Quote from './components/molecules/Quote';
4
4
  import { devices, breakpoints } from './styles/viewports';
@@ -11,4 +11,4 @@ import HarmonicThemeProvider, { useHarmonicTheme } from './styles/HarmonicThemeP
11
11
  import { HarmonicSize } from './types/typography';
12
12
  import { HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText } from './components/Typography';
13
13
  export { useHarmonicTheme };
14
- export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, AuxiliaryNav, AspectRatio, BodyContent, BodyText, breakpoints, ButtonType, Card, Cards, CarouselType, Carousel, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, HarmonicSize, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, HotFilters, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, IInformationCTAProps, IInformationTitleProps, ITimerProps, IntegratedTimerProps, MinimalCarousel, MiniCard, ModalWindow, Navigation, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Paywall, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, SignUpForm, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, Tab, Table, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, Tickbox2, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls, zIndexes, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText, };
14
+ export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, AuxiliaryNav, AspectRatio, BodyContent, BodyText, breakpoints, ButtonType, Card, Cards, CarouselType, Carousel, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, HarmonicSize, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, HotFilters, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, IInformationCTAProps, IInformationTitleProps, ITimerProps, IntegratedTimerProps, MinimalCarousel, MiniCard, ModalWindow, Navigation, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, SignUpForm, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, Tab, Table, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, Tickbox2, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls, zIndexes, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText, };
@@ -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
  export declare const DEFAULT_THEME = ThemeType.Core;
6
5
  interface HarmonicThemeProviderProps {
7
6
  theme: ThemeType;
@@ -1,6 +1,5 @@
1
1
  import React from 'react';
2
2
  import { EditorialLink } from './editorial';
3
- import { IGridItemProps } from './types';
4
3
  export interface IAnchorBarProps {
5
4
  /** CTA for anchor bar */
6
5
  cta: EditorialLink;
@@ -14,6 +13,4 @@ export interface IAnchorBarProps {
14
13
  className?: string;
15
14
  /** Flag indicating whether the anchor bar should have a shadow */
16
15
  withShadow?: boolean;
17
- /** Optional grid item props to allow for different page alignments */
18
- grid?: IGridItemProps;
19
16
  }
@@ -1,4 +1,5 @@
1
- import React from 'react';
1
+ import { ReactElement, ReactNode } from 'react';
2
+ import { StyledProps } from 'styled-components';
2
3
  export declare enum AspectRatio {
3
4
  '1:1' = "1 / 1",
4
5
  '3:4' = "3 / 4",
@@ -43,18 +44,13 @@ export interface IImageWithCaptionProps {
43
44
  caption: string;
44
45
  /** Alternative text describing the image content for accessibility purposes. */
45
46
  altText?: string;
46
- /** Image source */
47
- src: string;
48
- /** Optional srcSet for responsive images */
49
- srcSet?: string;
50
- /** Optional sizes for responsive images */
51
- sizes?: string;
52
- /** Optional loading strategy */
53
- loading?: 'lazy' | 'eager';
54
- /** Custom CSS classes */
55
- className?: string;
47
+ /** Image element */
48
+ children: ReactElement<HTMLImageElement>;
56
49
  }
57
- export interface IImageWithCaptionWrapperProps {
50
+ export interface IImageWithCaptionWrapperProps extends StyledProps<{
51
+ aspectRatio?: AspectRatio;
52
+ height: number;
53
+ }> {
58
54
  /**
59
55
  * Aspect ratio of the contained image
60
56
  */
@@ -62,11 +58,11 @@ export interface IImageWithCaptionWrapperProps {
62
58
  /**
63
59
  * Height of the wrapper
64
60
  */
65
- height?: number;
61
+ height: number;
66
62
  }
67
- export interface ImageAspectRatioWrapperProps extends IImageAspectRatioWrapperProps, React.HTMLAttributes<HTMLDivElement> {
63
+ export interface ImageAspectRatioWrapperProps extends IImageAspectRatioWrapperProps {
68
64
  /**
69
65
  * Image elements
70
66
  */
71
- children: React.ReactNode;
67
+ children: ReactNode;
72
68
  }
@@ -147,10 +147,6 @@ export interface ITabProps {
147
147
  * Additional CSS class names to apply to the navigation component.
148
148
  */
149
149
  className?: string;
150
- /**
151
- * The unique ID to assign to the link element.
152
- */
153
- tabLinkId?: string;
154
150
  /**
155
151
  * Defines the ARIA role of the element for accessibility purposes.
156
152
  */
@@ -226,11 +222,7 @@ export interface IDropdownProps {
226
222
  */
227
223
  ariaLabel?: string;
228
224
  /**
229
- * The unique ID to assign to the link element inside the tab.
230
- */
231
- tabLinkId?: string;
232
- /**
233
- * Defines if it is needed to trim the text of the Tab and add 3 dots in the end
225
+ * Defines if it is needed to trim the text of the Tab and add 3 dots in the end
234
226
  */
235
227
  trimTabText?: boolean;
236
228
  }
@@ -354,10 +346,10 @@ export declare type ListingRole = {
354
346
  dataROH?: string;
355
347
  };
356
348
  export interface IPeopleListing {
357
- /** List of roles to be displayed */
349
+ /**
350
+ * List of roles to be displayed
351
+ */
358
352
  roles: ListingRole[];
359
- /** Custom CSS classes */
360
- className?: string;
361
353
  }
362
354
  export interface IPagination {
363
355
  /**
@@ -552,10 +544,6 @@ export interface IBodyContentProps {
552
544
  columnSpanDevice?: number;
553
545
  /** Custom CSS classes */
554
546
  className?: string;
555
- /** Set to true to wrap the content in a Grid component */
556
- renderGrid?: boolean;
557
- /** Set to true to render the GridItem component */
558
- renderGridItem?: boolean;
559
547
  }
560
548
  export declare type SectionTitleSize = 'small' | 'large';
561
549
  export interface ISectionTitleProps {
@@ -68,16 +68,24 @@ export interface IUpsellCardsProps {
68
68
  theme?: ThemeType;
69
69
  }
70
70
  export interface IUpsellSectionProps {
71
- /** Upsell Section title */
71
+ /**
72
+ * Upsell Section title
73
+ */
72
74
  title?: string;
73
- /** Richtext section */
75
+ /**
76
+ * Richtext section
77
+ */
74
78
  richText?: string;
75
- /** CTA link. Eg. for sign in. */
79
+ /**
80
+ * CTA link. Eg. for sign in.
81
+ */
76
82
  link?: EditorialLink;
77
- /** Array of upsellCards */
83
+ /**
84
+ * Array of upsellCards
85
+ */
78
86
  upsellCards?: IUpsellCardProps[];
79
- /** Theme options */
87
+ /**
88
+ * Theme options
89
+ */
80
90
  theme?: ThemeType;
81
- /** Custom CSS classes */
82
- className?: string;
83
91
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@royaloperahouse/harmonic",
3
- "version": "0.17.0-l",
3
+ "version": "0.17.1",
4
4
  "author": "Royal Opera House",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
@@ -142,5 +142,6 @@
142
142
  "npx eslint src --fix ",
143
143
  "npx prettier src --write --uncommitted"
144
144
  ]
145
- }
145
+ },
146
+ "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
146
147
  }
@@ -1,4 +0,0 @@
1
- import { FunctionComponent } from 'react';
2
- import { IHighlightsHeaderProps } from '../../../../types/editorial';
3
- declare const PageHeadingHighlightCarousel: FunctionComponent<IHighlightsHeaderProps>;
4
- export default PageHeadingHighlightCarousel;
@@ -1,14 +0,0 @@
1
- interface HighlightsInfoWrapperProps {
2
- hasImages: boolean;
3
- }
4
- interface HighlightsCarouselWrapperProps {
5
- hasMultipleImages: boolean;
6
- }
7
- export declare const HighlightsGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
8
- export declare const HighlightTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
9
- export declare const HighlightTextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
10
- export declare const HighlightsInfoWrapper: import("styled-components").StyledComponent<"div", any, HighlightsInfoWrapperProps, never>;
11
- export declare const HighlightsCarouselWrapper: import("styled-components").StyledComponent<"div", any, HighlightsCarouselWrapperProps, never>;
12
- export declare const RotatorButtonsWrapperMobile: import("styled-components").StyledComponent<"div", any, {}, never>;
13
- export declare const RotatorButtonsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
14
- export {};
@@ -1,2 +0,0 @@
1
- import PageTitleHighlightCarousel from './HighlightCarousel';
2
- export default PageTitleHighlightCarousel;