@royaloperahouse/harmonic 1.0.0-b → 1.0.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 (58) hide show
  1. package/CHANGELOG.md +3 -6
  2. package/README.GIT +293 -0
  3. package/README.md +43 -267
  4. package/dist/components/atoms/Icons/StorybookSupport/Iconography.d.ts +2 -10
  5. package/dist/components/atoms/Icons/StorybookSupport/Iconography.types.d.ts +10 -0
  6. package/dist/components/atoms/TextLogo/TextLogo.d.ts +3 -10
  7. package/dist/components/atoms/TextLogo/TextLogo.types.d.ts +10 -0
  8. package/dist/components/atoms/index.d.ts +7 -2
  9. package/dist/components/index.d.ts +4 -4
  10. package/dist/components/molecules/BodyContent/BodyContent.d.ts +1 -4
  11. package/dist/components/molecules/BodyContent/BodyContent.types.d.ts +4 -0
  12. package/dist/components/molecules/Information/InfoCta.types.d.ts +11 -0
  13. package/dist/components/molecules/PageHeading/Compact/Compact.types.d.ts +14 -0
  14. package/dist/components/molecules/PageHeading/Compact/components/CompactHeaderBranding.d.ts +1 -7
  15. package/dist/components/molecules/PageHeading/Compact/components/CompactHeaderBranding.types.d.ts +7 -0
  16. package/dist/components/molecules/PageHeading/Promo/components/Badge.d.ts +2 -8
  17. package/dist/components/molecules/PageHeading/Promo/components/Badge.types.d.ts +7 -0
  18. package/dist/components/molecules/PageHeading/Promo/components/Button.d.ts +2 -8
  19. package/dist/components/molecules/PageHeading/Promo/components/Button.types.d.ts +7 -0
  20. package/dist/components/molecules/Pagination/Pagination.d.ts +2 -13
  21. package/dist/components/molecules/Pagination/Pagination.types.d.ts +13 -0
  22. package/dist/components/molecules/Paywall/Paywall.styles.d.ts +1 -4
  23. package/dist/components/molecules/PromoWithTitle/PromoChild.d.ts +2 -7
  24. package/dist/components/molecules/PromoWithTitle/PromoChild.types.d.ts +7 -0
  25. package/dist/components/molecules/Select2/Select2.d.ts +1 -3
  26. package/dist/components/molecules/Select2/Select2.types.d.ts +6 -0
  27. package/dist/components/molecules/SignUpForm/components/SignUpFormButton.d.ts +2 -6
  28. package/dist/components/molecules/SignUpForm/components/SignUpFormButton.types.d.ts +6 -0
  29. package/dist/components/molecules/Swipe/Swipe.d.ts +2 -6
  30. package/dist/components/molecules/Swipe/Swipe.types.d.ts +17 -0
  31. package/dist/components/molecules/Table/Table.style.d.ts +1 -1
  32. package/dist/components/molecules/Table/components/HeaderCells.d.ts +1 -4
  33. package/dist/components/molecules/Table/components/HeaderCells.types.d.ts +5 -0
  34. package/dist/components/molecules/index.d.ts +10 -3
  35. package/dist/components/organisms/Carousels/HighlightsCarousel/components/Buttons.d.ts +2 -3
  36. package/dist/components/organisms/Carousels/HighlightsCarousel/components/Buttons.types.d.ts +2 -0
  37. package/dist/components/organisms/Carousels/HighlightsCarousel/components/InfoSection.d.ts +3 -9
  38. package/dist/components/organisms/Carousels/HighlightsCarousel/components/InfoSection.types.d.ts +8 -0
  39. package/dist/components/organisms/Carousels/HighlightsCarousel/components/SwipeCarousel.d.ts +3 -12
  40. package/dist/components/organisms/Carousels/HighlightsCarousel/components/SwipeCarousel.types.d.ts +11 -0
  41. package/dist/harmonic.cjs.development.js +3549 -3954
  42. package/dist/harmonic.cjs.development.js.map +1 -1
  43. package/dist/harmonic.cjs.production.min.js +1 -1
  44. package/dist/harmonic.cjs.production.min.js.map +1 -1
  45. package/dist/harmonic.esm.js +3536 -3951
  46. package/dist/harmonic.esm.js.map +1 -1
  47. package/dist/index.d.ts +2 -2
  48. package/dist/types/types.d.ts +1 -10
  49. package/package.json +1 -1
  50. package/dist/components/atoms/Radio/Radio.d.ts +0 -7
  51. package/dist/components/atoms/Radio/Radio.style.d.ts +0 -4
  52. package/dist/components/atoms/Radio/index.d.ts +0 -2
  53. package/dist/components/molecules/RadioGroup/RadioGroup.d.ts +0 -7
  54. package/dist/components/molecules/RadioGroup/RadioGroup.style.d.ts +0 -1
  55. package/dist/components/molecules/RadioGroup/index.d.ts +0 -2
  56. package/dist/components/molecules/Select/Select.d.ts +0 -101
  57. package/dist/components/molecules/Select/Select.style.d.ts +0 -13
  58. package/dist/components/molecules/Select/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, CastFilter, 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 { Account, Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, Basket, BodyText, Card, Cards, Carousel, CastFilter, CinemaBadge, ContactCard, ContactNewsletter, ContentSummary, ControlledDropdown, Dropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Logo, Navigation, NavTop, MinimalCarousel, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Person, Paywall, PersonDetails, PeopleListing, PolicyLinks, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio2, RadioGroup2, ReadMore, RotatorButtons, Search, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SocialLinks, SectionSplitter, SectionTitle, Select2, Select2Async, SignUpForm, Swipe, SwipeRef, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, TertiaryButton, ThemeProvider, TitleWithCTA, Tab, Table, TabLink, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellCards, 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';
@@ -12,4 +12,4 @@ import HarmonicThemeProvider, { useHarmonicTheme } from './styles/HarmonicThemeP
12
12
  import { HarmonicSize } from './types/typography';
13
13
  import { HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText } from './components/Typography';
14
14
  export { useHarmonicTheme };
15
- export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, AuxiliaryNav, AspectRatio, BodyContent, BodyText, breakpoints, ButtonType, Card, Cards, CarouselType, Carousel, CastFilter, 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, PersonCard, 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, };
15
+ export { Account, Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, AuxiliaryNav, AspectRatio, Basket, BodyContent, BodyText, breakpoints, ButtonType, Card, Cards, CarouselType, Carousel, CastFilter, CinemaBadge, Colors, ContactCard, ContactNewsletter, ContentSummary, ControlledDropdown, Dropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, HarmonicSize, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, HotFilters, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, Logo, IInformationCTAProps, IInformationTitleProps, ITimerProps, IntegratedTimerProps, MinimalCarousel, MiniCard, ModalWindow, Navigation, NavTop, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Person, PersonCard, PersonDetails, Paywall, PeopleListing, PolicyLinks, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio2, RadioGroup2, ReadMore, RotatorButtons, Search, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SocialLinks, SectionSplitter, SectionTitle, Select2, Select2Async, SignUpForm, Swipe, SwipeRef, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, Tab, Table, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, Tickbox2, TickboxMode, Timer, TypeTags, UpsellCard, UpsellCards, UpsellSection, Quote, VideoControls, VideoWithControls, zIndexes, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText, };
@@ -429,7 +429,7 @@ export declare type IHotFilterProps = {
429
429
  selectedIndex?: number;
430
430
  onSelect?: (index: number) => void;
431
431
  };
432
- export declare type ICastFilterItem = {
432
+ export declare type ICastFilterItem = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'aria-label' | 'role'> & {
433
433
  /**
434
434
  * Name of the cast member shown below the image circle. Required.
435
435
  */
@@ -438,15 +438,6 @@ export declare type ICastFilterItem = {
438
438
  * Image source for the image to be shown. Optional but if not included an unaesthetic placeholder will show.
439
439
  */
440
440
  image?: string;
441
- /**
442
- * Optional accessible name for the option. If omitted, `name` is used.
443
- */
444
- 'aria-label'?: string;
445
- /**
446
- * Kept for backwards compatibility with existing integrations.
447
- * CastFilter always renders option semantics and ignores this value at runtime.
448
- */
449
- role?: string;
450
441
  onClick?: () => void;
451
442
  };
452
443
  export declare type ICastFiltersProps = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@royaloperahouse/harmonic",
3
- "version": "1.0.0-b",
3
+ "version": "1.0.1",
4
4
  "author": "Royal Opera House",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- import { IRadioProps } from '../../../types/formTypes';
3
- /**
4
- * DEPRECATED. Use Radio2 instead
5
- */
6
- declare const Radio: ({ checked, error, label, onChange }: IRadioProps) => React.JSX.Element;
7
- export default Radio;
@@ -1,4 +0,0 @@
1
- import { IRadioProps } from '../../../types/formTypes';
2
- export declare const RadioContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
3
- export declare const RadioLine: import("styled-components").StyledComponent<"div", any, IRadioProps, never>;
4
- export declare const RadioError: import("styled-components").StyledComponent<"div", any, IRadioProps, never>;
@@ -1,2 +0,0 @@
1
- import Radio from './Radio';
2
- export default Radio;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- import { IRadioGroupProps } from '../../../types/formTypes';
3
- /**
4
- * DEPRECATED. Use RadioGroup2 instead
5
- */
6
- declare const RadioGroup: ({ radios, columnStartDesktop, columnStartDevice, columnSpanDesktop, columnSpanDevice, columnStartSmallDevice, columnSpanSmallDevice, onChange, }: IRadioGroupProps) => React.JSX.Element;
7
- export default RadioGroup;
@@ -1 +0,0 @@
1
- export declare const RadioGroupContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -1,2 +0,0 @@
1
- import RadioGroup from './RadioGroup';
2
- export default RadioGroup;
@@ -1,101 +0,0 @@
1
- import React from 'react';
2
- import { ISelectProps } from '../../../types/formTypes';
3
- /**
4
- * DEPRECATED. Use Select2 instead.
5
- * A select component, created using <ul> and <li> elements, with bespoke accessibility
6
- * logic.
7
- *
8
- * # Usage
9
- * ## Defining a component that uses a typical Select element
10
- * ```tsx
11
- * const MyComponent = () => {
12
- * const handleSelect = (value: number, text: string) => {
13
- * console.log("Selected", value);
14
- * };
15
- *
16
- * return <>
17
- * <Select
18
- * label="This is a label"
19
- * options={[
20
- * { text: "Option 1", value: 1 },
21
- * { text: "Option 2", value: 2 },
22
- * ]}
23
- * onSelect={handleSelect}
24
- * />
25
- * </>
26
- * }
27
- * ```
28
- *
29
- * ## Defining a component that uses a disabled Select element
30
- * ```tsx
31
- * const MyComponent = () => {
32
- * const handleSelect = (value: number, text: string) => {
33
- * console.log("Selected", value);
34
- * };
35
- *
36
- * return <>
37
- * <Select
38
- * disabled // Select component disabled explicitely
39
- * label="This is a label"
40
- * options={[
41
- * { text: "Option 1", value: 1 },
42
- * { text: "Option 2", value: 2 },
43
- * ]}
44
- * onSelect={handleSelect}
45
- * />
46
- * <Select
47
- * label="This is a label"
48
- * options={[]} // Select component disabled implicitely by passing an empty array of options
49
- * onSelect={handleSelect}
50
- * />
51
- * </>
52
- * }
53
- * ```
54
- *
55
- * ## Defining a component with a non-labelled Select element
56
- * ```tsx
57
- * const MyComponent = () => {
58
- * const handleSelect = (value: number, text: string) => {
59
- * console.log("Selected", value);
60
- * };
61
- *
62
- * return <>
63
- * <Select
64
- * label=""
65
- * options={[
66
- * { text: "Option 1", value: 1 },
67
- * { text: "Option 2", value: 2 },
68
- * ]}
69
- * onSelect={handleSelect}
70
- * />
71
- * </>
72
- * }
73
- * ```
74
- *
75
- * ## Changing the dimensions of a Select element (px)
76
- * ```tsx
77
- * const MyComponent = () => {
78
- * const handleSelect = (value: number, text: string) => {
79
- * console.log("Selected", value);
80
- * };
81
- *
82
- * const selectWidthPx = 100;
83
- * const selectHeightPx = 27;
84
- *
85
- * return <>
86
- * <Select
87
- * label="This is a label"
88
- * options={[
89
- * { text: "Option 1", value: 1 },
90
- * { text: "Option 2", value: 2 },
91
- * ]}
92
- * onSelect={handleSelect}
93
- * width={selectWidthPx}
94
- * height={selectHeightPx}
95
- * />
96
- * </>
97
- * }
98
- * ```
99
- */
100
- declare function Select<T>({ label, options, onSelect, disabled, resetWhenOptionsUpdate, width, height, }: ISelectProps<T>): React.JSX.Element;
101
- export default Select;
@@ -1,13 +0,0 @@
1
- import { ISelectProps } from '../../../types/formTypes';
2
- export declare const ArrowIcon: import("styled-components").StyledComponent<import("react").MemoExoticComponent<(props: import("../../../types/iconTypes").IIconProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>>, any, {
3
- iconName: "DropdownArrow";
4
- color: string;
5
- title: "Select Arrow";
6
- }, "title" | "color" | "iconName">;
7
- export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
8
- export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
9
- export declare const Options: import("styled-components").StyledComponent<"div", any, {}, never>;
10
- export declare const Option: import("styled-components").StyledComponent<"li", any, {
11
- hover: boolean;
12
- }, never>;
13
- export declare const SelectList: import("styled-components").StyledComponent<"ul", any, Pick<Required<ISelectProps<unknown>>, "height" | "width">, never>;
@@ -1,2 +0,0 @@
1
- import Select from './Select';
2
- export default Select;