@royaloperahouse/harmonic 0.13.3-b → 0.13.4
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 +5 -2
- package/README.GIT +278 -0
- package/README.md +43 -252
- package/dist/components/atoms/Dropdown/Dropdown.d.ts +1 -1
- package/dist/components/atoms/Tab/Tab.d.ts +1 -1
- package/dist/components/index.d.ts +3 -3
- package/dist/components/molecules/PageHeading/index.d.ts +1 -2
- package/dist/components/molecules/PeopleListing/PeopleListing.d.ts +1 -1
- package/dist/components/molecules/PeopleListing/PeopleListing.style.d.ts +2 -2
- package/dist/components/molecules/UpsellCard/UpsellCard.style.d.ts +11 -276
- package/dist/components/molecules/index.d.ts +2 -3
- package/dist/components/organisms/Navigation/Navigation.d.ts +1 -1
- package/dist/components/organisms/UpsellSection/UpsellSection.style.d.ts +1 -272
- package/dist/harmonic.cjs.development.css +8 -340
- package/dist/harmonic.cjs.development.js +6720 -6912
- 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 +6727 -6921
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +0 -1
- package/dist/types/impactHeader.d.ts +2 -20
- package/dist/types/navigation.d.ts +0 -4
- package/dist/types/types.d.ts +4 -82
- package/dist/types/upsell.d.ts +15 -7
- package/package.json +3 -2
- package/dist/components/molecules/CastFilter/CastFilters.d.ts +0 -4
- package/dist/components/molecules/CastFilter/CastFilters.style.d.ts +0 -14
- package/dist/components/molecules/CastFilter/index.d.ts +0 -2
- package/dist/components/molecules/PageHeading/Highlight/Highlight.d.ts +0 -4
- package/dist/components/molecules/PageHeading/Highlight/Highlight.style.d.ts +0 -9
- package/dist/components/molecules/PageHeading/Highlight/index.d.ts +0 -2
- package/dist/components/molecules/SkipToMain/SkipToMain.d.ts +0 -20
- package/dist/components/molecules/SkipToMain/SkipToMain.style.d.ts +0 -6
- 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,
|
|
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,
|
|
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,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { EditorialLink
|
|
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
|
/**
|
package/dist/types/types.d.ts
CHANGED
|
@@ -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
|
*/
|
|
@@ -167,10 +163,6 @@ export interface ITabProps {
|
|
|
167
163
|
* Defines if it is needed to trim the text of the Tab and add 3 dots in the end
|
|
168
164
|
*/
|
|
169
165
|
trimText?: boolean;
|
|
170
|
-
/**
|
|
171
|
-
* data-testid string for easier testing
|
|
172
|
-
*/
|
|
173
|
-
dataTestId?: string;
|
|
174
166
|
/**
|
|
175
167
|
* Boolean indicating if the Tab is open.
|
|
176
168
|
*/
|
|
@@ -226,11 +218,7 @@ export interface IDropdownProps {
|
|
|
226
218
|
*/
|
|
227
219
|
ariaLabel?: string;
|
|
228
220
|
/**
|
|
229
|
-
*
|
|
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
|
|
221
|
+
* Defines if it is needed to trim the text of the Tab and add 3 dots in the end
|
|
234
222
|
*/
|
|
235
223
|
trimTabText?: boolean;
|
|
236
224
|
}
|
|
@@ -354,10 +342,10 @@ export declare type ListingRole = {
|
|
|
354
342
|
dataROH?: string;
|
|
355
343
|
};
|
|
356
344
|
export interface IPeopleListing {
|
|
357
|
-
/**
|
|
345
|
+
/**
|
|
346
|
+
* List of roles to be displayed
|
|
347
|
+
*/
|
|
358
348
|
roles: ListingRole[];
|
|
359
|
-
/** Custom CSS classes */
|
|
360
|
-
className?: string;
|
|
361
349
|
}
|
|
362
350
|
export interface IPagination {
|
|
363
351
|
/**
|
|
@@ -433,62 +421,6 @@ export declare type IHotFilterProps = {
|
|
|
433
421
|
selectedIndex?: number;
|
|
434
422
|
onSelect?: (index: number) => void;
|
|
435
423
|
};
|
|
436
|
-
export declare type ICastFilterItem = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'aria-label' | 'role'> & {
|
|
437
|
-
/**
|
|
438
|
-
* Name of the cast member shown below the image circle. Required.
|
|
439
|
-
*/
|
|
440
|
-
name: string;
|
|
441
|
-
/**
|
|
442
|
-
* Image source for the image to be shown. Optional but if not included an unaesthetic placeholder will show.
|
|
443
|
-
*/
|
|
444
|
-
image?: string;
|
|
445
|
-
onClick?: () => void;
|
|
446
|
-
};
|
|
447
|
-
export declare type ICastFiltersProps = {
|
|
448
|
-
/**
|
|
449
|
-
* Array of cast to filter by.
|
|
450
|
-
*/
|
|
451
|
-
cast: ICastFilterItem[];
|
|
452
|
-
/**
|
|
453
|
-
* A classname is required for the HarmonicThemeProvider to provide styles properly.
|
|
454
|
-
* If it is not provided here it will default to 'cast-filters'.
|
|
455
|
-
*/
|
|
456
|
-
className?: string;
|
|
457
|
-
/**
|
|
458
|
-
* Indices of currently selected cast in the `cast` array.
|
|
459
|
-
*/
|
|
460
|
-
selectedIndices?: number[];
|
|
461
|
-
/**
|
|
462
|
-
* Text shown at the top of the component, e.g. 'Filter by cast'. If this is not provided
|
|
463
|
-
* the component will render without any.
|
|
464
|
-
*/
|
|
465
|
-
headingText?: string;
|
|
466
|
-
/**
|
|
467
|
-
* Override the text of the primary CTA. Default is 'Apply'.
|
|
468
|
-
*/
|
|
469
|
-
ctaText?: string;
|
|
470
|
-
/**
|
|
471
|
-
* Override the text of the text link. Default is 'Clear'.
|
|
472
|
-
*/
|
|
473
|
-
textLinkText?: string;
|
|
474
|
-
/**
|
|
475
|
-
* Default image to show in cases where a cast member image prop is missing.
|
|
476
|
-
* If this is undefined then a light grey background will be displayed instead.
|
|
477
|
-
*/
|
|
478
|
-
placeholderImage?: string;
|
|
479
|
-
/**
|
|
480
|
-
* Handle selecting individual cast filters.
|
|
481
|
-
*/
|
|
482
|
-
onSelect?: (index: number) => void;
|
|
483
|
-
/**
|
|
484
|
-
* Handle clicking the primary CTA.
|
|
485
|
-
*/
|
|
486
|
-
onApply?: (indices: number[]) => void;
|
|
487
|
-
/**
|
|
488
|
-
* Handle clicking the text link.
|
|
489
|
-
*/
|
|
490
|
-
onClear?: () => void;
|
|
491
|
-
};
|
|
492
424
|
export interface ISponsorshipProps {
|
|
493
425
|
/**
|
|
494
426
|
* Source URL for Sponsorship IFRAME.
|
|
@@ -547,10 +479,6 @@ export interface IBodyContentProps {
|
|
|
547
479
|
columnSpanDevice?: number;
|
|
548
480
|
/** Custom CSS classes */
|
|
549
481
|
className?: string;
|
|
550
|
-
/** Set to true to wrap the content in a Grid component */
|
|
551
|
-
renderGrid?: boolean;
|
|
552
|
-
/** Set to true to render the GridItem component */
|
|
553
|
-
renderGridItem?: boolean;
|
|
554
482
|
}
|
|
555
483
|
export declare type SectionTitleSize = 'small' | 'large';
|
|
556
484
|
export interface ISectionTitleProps {
|
|
@@ -734,9 +662,3 @@ export declare enum LinkTarget {
|
|
|
734
662
|
*/
|
|
735
663
|
Blank = "_blank"
|
|
736
664
|
}
|
|
737
|
-
export interface ISkipToMainProps {
|
|
738
|
-
/**
|
|
739
|
-
* Defines which tag the button should skip to.
|
|
740
|
-
*/
|
|
741
|
-
skipToId?: string;
|
|
742
|
-
}
|
package/dist/types/upsell.d.ts
CHANGED
|
@@ -68,16 +68,24 @@ export interface IUpsellCardsProps {
|
|
|
68
68
|
theme?: ThemeType;
|
|
69
69
|
}
|
|
70
70
|
export interface IUpsellSectionProps {
|
|
71
|
-
/**
|
|
71
|
+
/**
|
|
72
|
+
* Upsell Section title
|
|
73
|
+
*/
|
|
72
74
|
title?: string;
|
|
73
|
-
/**
|
|
75
|
+
/**
|
|
76
|
+
* Richtext section
|
|
77
|
+
*/
|
|
74
78
|
richText?: string;
|
|
75
|
-
/**
|
|
79
|
+
/**
|
|
80
|
+
* CTA link. Eg. for sign in.
|
|
81
|
+
*/
|
|
76
82
|
link?: EditorialLink;
|
|
77
|
-
/**
|
|
83
|
+
/**
|
|
84
|
+
* Array of upsellCards
|
|
85
|
+
*/
|
|
78
86
|
upsellCards?: IUpsellCardProps[];
|
|
79
|
-
/**
|
|
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.13.
|
|
3
|
+
"version": "0.13.4",
|
|
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,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,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,20 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ISkipToMainProps } from '../../../types/types';
|
|
3
|
-
/**
|
|
4
|
-
* An accessible component which allows Assistive Technology users to move the focus
|
|
5
|
-
* to main content, skipping the Nav bar. On desktop, it will remain invisible until focused.
|
|
6
|
-
* On mobile, it will remain invisible even when focused.
|
|
7
|
-
*
|
|
8
|
-
* It's default functionality is to skip to the <main> tag.
|
|
9
|
-
* However, skipToId may be passed as a prop to target any element with corresponding id.
|
|
10
|
-
* If neither of those is found in the document, the component will be hidden and not focusable.
|
|
11
|
-
*
|
|
12
|
-
* To prevent SSR errors, the component will return `null` when document object is undefined.
|
|
13
|
-
* In practice, testing reveals that this component renders correctly on most SSR'd pages,
|
|
14
|
-
* but this check serves as an additional safeguard.
|
|
15
|
-
*
|
|
16
|
-
* @param skipToId - an optional id of the element to be skipped to, instead of the default <main> tag target.
|
|
17
|
-
* @returns JSX.Element | null
|
|
18
|
-
*/
|
|
19
|
-
declare const SkipToMain: ({ skipToId }: ISkipToMainProps) => React.JSX.Element | null;
|
|
20
|
-
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, dataTestId, 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 {};
|