@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.
- package/CHANGELOG.md +3 -6
- package/README.GIT +293 -0
- package/README.md +43 -267
- package/dist/components/atoms/Icons/StorybookSupport/Iconography.d.ts +2 -10
- package/dist/components/atoms/Icons/StorybookSupport/Iconography.types.d.ts +10 -0
- package/dist/components/atoms/TextLogo/TextLogo.d.ts +3 -10
- package/dist/components/atoms/TextLogo/TextLogo.types.d.ts +10 -0
- package/dist/components/atoms/index.d.ts +7 -2
- package/dist/components/index.d.ts +4 -4
- package/dist/components/molecules/BodyContent/BodyContent.d.ts +1 -4
- package/dist/components/molecules/BodyContent/BodyContent.types.d.ts +4 -0
- package/dist/components/molecules/Information/InfoCta.types.d.ts +11 -0
- package/dist/components/molecules/PageHeading/Compact/Compact.types.d.ts +14 -0
- package/dist/components/molecules/PageHeading/Compact/components/CompactHeaderBranding.d.ts +1 -7
- package/dist/components/molecules/PageHeading/Compact/components/CompactHeaderBranding.types.d.ts +7 -0
- package/dist/components/molecules/PageHeading/Promo/components/Badge.d.ts +2 -8
- package/dist/components/molecules/PageHeading/Promo/components/Badge.types.d.ts +7 -0
- package/dist/components/molecules/PageHeading/Promo/components/Button.d.ts +2 -8
- package/dist/components/molecules/PageHeading/Promo/components/Button.types.d.ts +7 -0
- package/dist/components/molecules/Pagination/Pagination.d.ts +2 -13
- package/dist/components/molecules/Pagination/Pagination.types.d.ts +13 -0
- package/dist/components/molecules/Paywall/Paywall.styles.d.ts +1 -4
- package/dist/components/molecules/PromoWithTitle/PromoChild.d.ts +2 -7
- package/dist/components/molecules/PromoWithTitle/PromoChild.types.d.ts +7 -0
- package/dist/components/molecules/Select2/Select2.d.ts +1 -3
- package/dist/components/molecules/Select2/Select2.types.d.ts +6 -0
- package/dist/components/molecules/SignUpForm/components/SignUpFormButton.d.ts +2 -6
- package/dist/components/molecules/SignUpForm/components/SignUpFormButton.types.d.ts +6 -0
- package/dist/components/molecules/Swipe/Swipe.d.ts +2 -6
- package/dist/components/molecules/Swipe/Swipe.types.d.ts +17 -0
- package/dist/components/molecules/Table/Table.style.d.ts +1 -1
- package/dist/components/molecules/Table/components/HeaderCells.d.ts +1 -4
- package/dist/components/molecules/Table/components/HeaderCells.types.d.ts +5 -0
- package/dist/components/molecules/index.d.ts +10 -3
- package/dist/components/organisms/Carousels/HighlightsCarousel/components/Buttons.d.ts +2 -3
- package/dist/components/organisms/Carousels/HighlightsCarousel/components/Buttons.types.d.ts +2 -0
- package/dist/components/organisms/Carousels/HighlightsCarousel/components/InfoSection.d.ts +3 -9
- package/dist/components/organisms/Carousels/HighlightsCarousel/components/InfoSection.types.d.ts +8 -0
- package/dist/components/organisms/Carousels/HighlightsCarousel/components/SwipeCarousel.d.ts +3 -12
- package/dist/components/organisms/Carousels/HighlightsCarousel/components/SwipeCarousel.types.d.ts +11 -0
- package/dist/harmonic.cjs.development.js +3549 -3954
- package/dist/harmonic.cjs.development.js.map +1 -1
- package/dist/harmonic.cjs.production.min.js +1 -1
- package/dist/harmonic.cjs.production.min.js.map +1 -1
- package/dist/harmonic.esm.js +3536 -3951
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/types/types.d.ts +1 -10
- package/package.json +1 -1
- package/dist/components/atoms/Radio/Radio.d.ts +0 -7
- package/dist/components/atoms/Radio/Radio.style.d.ts +0 -4
- package/dist/components/atoms/Radio/index.d.ts +0 -2
- package/dist/components/molecules/RadioGroup/RadioGroup.d.ts +0 -7
- package/dist/components/molecules/RadioGroup/RadioGroup.style.d.ts +0 -1
- package/dist/components/molecules/RadioGroup/index.d.ts +0 -2
- package/dist/components/molecules/Select/Select.d.ts +0 -101
- package/dist/components/molecules/Select/Select.style.d.ts +0 -13
- 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,
|
|
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,
|
|
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, };
|
package/dist/types/types.d.ts
CHANGED
|
@@ -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,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,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,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>;
|