@royaloperahouse/harmonic 0.13.1-g → 0.13.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.
Files changed (36) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/README.GIT +278 -0
  3. package/README.md +43 -252
  4. package/dist/components/atoms/Dropdown/Dropdown.d.ts +1 -1
  5. package/dist/components/atoms/Tab/Tab.d.ts +1 -1
  6. package/dist/components/index.d.ts +3 -3
  7. package/dist/components/molecules/PageHeading/index.d.ts +1 -2
  8. package/dist/components/molecules/PeopleListing/PeopleListing.d.ts +1 -1
  9. package/dist/components/molecules/PeopleListing/PeopleListing.style.d.ts +2 -2
  10. package/dist/components/molecules/PromoWithTags/PromoWithTags.style.d.ts +271 -1
  11. package/dist/components/molecules/PromoWithTitle/PromoWithTitle.style.d.ts +271 -1
  12. package/dist/components/molecules/index.d.ts +2 -3
  13. package/dist/components/organisms/Carousels/Carousel/Carousel.style.d.ts +271 -1
  14. package/dist/components/organisms/Navigation/Navigation.d.ts +1 -1
  15. package/dist/harmonic.cjs.development.css +7 -325
  16. package/dist/harmonic.cjs.development.js +6665 -6807
  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 +6678 -6822
  21. package/dist/harmonic.esm.js.map +1 -1
  22. package/dist/index.d.ts +2 -2
  23. package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +0 -1
  24. package/dist/types/impactHeader.d.ts +2 -20
  25. package/dist/types/navigation.d.ts +0 -4
  26. package/dist/types/types.d.ts +4 -78
  27. package/package.json +1 -1
  28. package/dist/components/molecules/CastFilter/CastFilters.d.ts +0 -4
  29. package/dist/components/molecules/CastFilter/CastFilters.style.d.ts +0 -14
  30. package/dist/components/molecules/CastFilter/index.d.ts +0 -2
  31. package/dist/components/molecules/PageHeading/Highlight/Highlight.d.ts +0 -4
  32. package/dist/components/molecules/PageHeading/Highlight/Highlight.style.d.ts +0 -9
  33. package/dist/components/molecules/PageHeading/Highlight/index.d.ts +0 -2
  34. package/dist/components/molecules/SkipToMain/SkipToMain.d.ts +0 -4
  35. package/dist/components/molecules/SkipToMain/SkipToMain.style.d.ts +0 -6
  36. package/dist/components/molecules/SkipToMain/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, Pagination, PasswordStrength, 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, PageHeadingPromo, Pagination, PasswordStrength, 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, Pagination, PasswordStrength, 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, PageHeadingPromo, Pagination, PasswordStrength, 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,5 +1,5 @@
1
- import { ImgHTMLAttributes, ReactNode } from 'react';
2
- import { EditorialLink, ThemeColor } from '../types';
1
+ import { ReactNode } from 'react';
2
+ import { EditorialLink } from '../types';
3
3
  import { HeaderHierarchy, TypographyLevel } from './typography';
4
4
  export interface CustomSponsorImageData {
5
5
  /**
@@ -190,21 +190,3 @@ export interface IPageHeadingPromoProps {
190
190
  /** Custom CSS classes */
191
191
  className?: string;
192
192
  }
193
- export interface IPageHeadingHighlightProps {
194
- /**
195
- * Image to display in the right hand panel, aspect ratio 4:3
196
- */
197
- image: ImgHTMLAttributes<HTMLImageElement>;
198
- /**
199
- * Optional change to background color
200
- */
201
- background?: ThemeColor;
202
- /**
203
- * The component(s) to be wrapped in the page header
204
- */
205
- children: ReactNode;
206
- /**
207
- * Custom CSS classes
208
- */
209
- className?: string;
210
- }
@@ -203,10 +203,6 @@ export interface INavigationProps {
203
203
  * Additional CSS class names to apply to the navigation component.
204
204
  */
205
205
  className?: string;
206
- /**
207
- * Defines which tag the button should skip to. Default: 'main-content'.
208
- */
209
- skipToId?: string;
210
206
  }
211
207
  export interface ISearchBarProps {
212
208
  /**
@@ -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
  */
@@ -222,11 +218,7 @@ export interface IDropdownProps {
222
218
  */
223
219
  ariaLabel?: string;
224
220
  /**
225
- * The unique ID to assign to the link element inside the tab.
226
- */
227
- tabLinkId?: string;
228
- /**
229
- * Defines if it is needed to trim the text of the Tab and add 3 dots in the end
221
+ * Defines if it is needed to trim the text of the Tab and add 3 dots in the end
230
222
  */
231
223
  trimTabText?: boolean;
232
224
  }
@@ -350,10 +342,10 @@ export declare type ListingRole = {
350
342
  dataROH?: string;
351
343
  };
352
344
  export interface IPeopleListing {
353
- /** List of roles to be displayed */
345
+ /**
346
+ * List of roles to be displayed
347
+ */
354
348
  roles: ListingRole[];
355
- /** Custom CSS classes */
356
- className?: string;
357
349
  }
358
350
  export interface IPagination {
359
351
  /**
@@ -429,62 +421,6 @@ export declare type IHotFilterProps = {
429
421
  selectedIndex?: number;
430
422
  onSelect?: (index: number) => void;
431
423
  };
432
- export declare type ICastFilterItem = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'aria-label' | 'role'> & {
433
- /**
434
- * Name of the cast member shown below the image circle. Required.
435
- */
436
- name: string;
437
- /**
438
- * Image source for the image to be shown. Optional but if not included an unaesthetic placeholder will show.
439
- */
440
- image?: string;
441
- onClick?: () => void;
442
- };
443
- export declare type ICastFiltersProps = {
444
- /**
445
- * Array of cast to filter by.
446
- */
447
- cast: ICastFilterItem[];
448
- /**
449
- * A classname is required for the HarmonicThemeProvider to provide styles properly.
450
- * If it is not provided here it will default to 'cast-filters'.
451
- */
452
- className?: string;
453
- /**
454
- * Indices of currently selected cast in the `cast` array.
455
- */
456
- selectedIndices?: number[];
457
- /**
458
- * Text shown at the top of the component, e.g. 'Filter by cast'. If this is not provided
459
- * the component will render without any.
460
- */
461
- headingText?: string;
462
- /**
463
- * Override the text of the primary CTA. Default is 'Apply'.
464
- */
465
- ctaText?: string;
466
- /**
467
- * Override the text of the text link. Default is 'Clear'.
468
- */
469
- textLinkText?: string;
470
- /**
471
- * Default image to show in cases where a cast member image prop is missing.
472
- * If this is undefined then a light grey background will be displayed instead.
473
- */
474
- placeholderImage?: string;
475
- /**
476
- * Handle selecting individual cast filters.
477
- */
478
- onSelect?: (index: number) => void;
479
- /**
480
- * Handle clicking the primary CTA.
481
- */
482
- onApply?: (indices: number[]) => void;
483
- /**
484
- * Handle clicking the text link.
485
- */
486
- onClear?: () => void;
487
- };
488
424
  export interface ISponsorshipProps {
489
425
  /**
490
426
  * Source URL for Sponsorship IFRAME.
@@ -543,10 +479,6 @@ export interface IBodyContentProps {
543
479
  columnSpanDevice?: number;
544
480
  /** Custom CSS classes */
545
481
  className?: string;
546
- /** Set to true to wrap the content in a Grid component */
547
- renderGrid?: boolean;
548
- /** Set to true to render the GridItem component */
549
- renderGridItem?: boolean;
550
482
  }
551
483
  export declare type SectionTitleSize = 'small' | 'large';
552
484
  export interface ISectionTitleProps {
@@ -730,9 +662,3 @@ export declare enum LinkTarget {
730
662
  */
731
663
  Blank = "_blank"
732
664
  }
733
- export interface ISkipToMainProps {
734
- /**
735
- * Defines which tag the button should skip to.
736
- */
737
- skipToId?: string;
738
- }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@royaloperahouse/harmonic",
3
- "version": "0.13.1-g",
3
+ "version": "0.13.2",
4
4
  "author": "Royal Opera House",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
@@ -1,4 +0,0 @@
1
- import { FunctionComponent } from 'react';
2
- import { ICastFiltersProps } from '../../../types/types';
3
- declare const CastFilters: FunctionComponent<ICastFiltersProps>;
4
- export default CastFilters;
@@ -1,14 +0,0 @@
1
- export declare const CastFiltersComponentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
2
- export declare const CastFiltersWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
3
- export declare const CastWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
4
- export declare const ActionButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
5
- export declare const PersonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
6
- export declare const PersonToggle: import("styled-components").StyledComponent<"div", any, {
7
- isSelected: boolean;
8
- }, never>;
9
- export declare const PersonImage: import("styled-components").StyledComponent<"img", any, {}, never>;
10
- export declare const MissingImage: import("styled-components").StyledComponent<"div", any, {}, never>;
11
- export declare const PersonName: import("styled-components").StyledComponent<"div", any, {}, never>;
12
- export declare const Decal: import("styled-components").StyledComponent<"div", any, {
13
- isSelected: boolean;
14
- }, never>;
@@ -1,2 +0,0 @@
1
- import CastFilters from './CastFilters';
2
- export default CastFilters;
@@ -1,4 +0,0 @@
1
- import { FunctionComponent } from 'react';
2
- import { IPageHeadingHighlightProps } from '../../../../types/impactHeader';
3
- declare const PageHeadingHighlight: FunctionComponent<IPageHeadingHighlightProps>;
4
- export default PageHeadingHighlight;
@@ -1,9 +0,0 @@
1
- import { ThemeColor } from '../../../../types';
2
- export declare const HighlightPanelGrid: import("styled-components").StyledComponent<"div", any, {
3
- $background: ThemeColor;
4
- }, never>;
5
- export declare const LeftPanel: import("styled-components").StyledComponent<"div", any, {
6
- hasImage: boolean;
7
- }, never>;
8
- export declare const RightPanel: import("styled-components").StyledComponent<"div", any, {}, never>;
9
- export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -1,2 +0,0 @@
1
- import PageHeadingHighlight from './Highlight';
2
- export default PageHeadingHighlight;
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import { ISkipToMainProps } from '../../../types/types';
3
- declare const SkipToMain: ({ skipToId }: ISkipToMainProps) => React.JSX.Element | null;
4
- export default SkipToMain;
@@ -1,6 +0,0 @@
1
- interface FocusableTabProps {
2
- $hide?: boolean;
3
- }
4
- export declare const FocusableTab: import("styled-components").StyledComponent<({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, tabLinkId, color, isOpen, }: import("../../../types/types").ITabProps) => import("react").JSX.Element, any, FocusableTabProps, never>;
5
- export declare const HiddenBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
6
- export {};
@@ -1,2 +0,0 @@
1
- import SkipToMain from './SkipToMain';
2
- export default SkipToMain;