@royaloperahouse/harmonic 0.11.0 → 0.12.0-a
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 +7 -0
- package/README.md +252 -43
- package/dist/components/Typography/Typography.d.ts +4 -4
- package/dist/components/atoms/Buttons/Secondary/utils.d.ts +4 -4
- package/dist/components/atoms/Dropdown/Dropdown.d.ts +1 -1
- package/dist/components/atoms/RotatorButtons/RotatorButtons.d.ts +1 -1
- package/dist/components/atoms/RotatorButtons/RotatorButtons.style.d.ts +1 -0
- package/dist/components/atoms/SectionSplitter/SectionSplitter.d.ts +1 -1
- package/dist/components/atoms/Tab/Tab.d.ts +1 -1
- package/dist/components/atoms/TextField/TextField.style.d.ts +1 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/AnchorBar/AnchorBar.style.d.ts +5 -1
- package/dist/components/molecules/BodyContent/BodyContent.d.ts +4 -0
- package/dist/components/molecules/BodyContent/index.d.ts +2 -0
- package/dist/components/molecules/Card/Card.style.d.ts +1 -1
- package/dist/components/molecules/CastFilter/CastFilters.d.ts +4 -0
- package/dist/components/molecules/CastFilter/CastFilters.style.d.ts +14 -0
- package/dist/components/molecules/CastFilter/index.d.ts +2 -0
- package/dist/components/molecules/ContactCard/ContactCard.style.d.ts +5 -4
- package/dist/components/molecules/ContentSummary/ContentSummary.style.d.ts +1 -1
- package/dist/components/molecules/ImageWithCaption/ImageWithCaption.style.d.ts +1 -1
- package/dist/components/molecules/Information/Information.style.d.ts +3 -2
- package/dist/components/molecules/PageHeading/Promo/Promo.d.ts +1 -2
- package/dist/components/molecules/Pagination/Pagination.style.d.ts +1 -1
- package/dist/components/molecules/PromoWithTags/PromoWithTags.style.d.ts +3 -6
- package/dist/components/molecules/PromoWithTitle/PromoWithTitle.style.d.ts +1 -1
- package/dist/components/molecules/SectionTitle/SectionTitle.d.ts +1 -1
- package/dist/components/molecules/index.d.ts +1 -2
- package/dist/components/organisms/AnchorTabBar/AnchorTabBar.style.d.ts +8 -3
- package/dist/components/organisms/Carousels/Carousel/Carousel.style.d.ts +1 -0
- package/dist/components/organisms/Footer/Footer.style.d.ts +5 -5
- package/dist/components/organisms/StickyBar/StickyBar.style.d.ts +1 -1
- package/dist/harmonic.cjs.development.css +348 -16
- package/dist/harmonic.cjs.development.js +855 -852
- 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 +870 -865
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +5 -3
- package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +4 -0
- package/dist/styles/HarmonicThemeProvider/index.d.ts +2 -1
- package/dist/types/anchorBar.d.ts +2 -0
- package/dist/types/buttonTypes.d.ts +6 -2
- package/dist/types/contactCard.d.ts +8 -22
- package/dist/types/impactHeader.d.ts +2 -0
- package/dist/types/information.d.ts +23 -43
- package/dist/types/navigation.d.ts +31 -61
- package/dist/types/promoWithTags.d.ts +9 -1
- package/dist/types/types.d.ts +82 -40
- package/dist/types/typography.d.ts +4 -0
- package/package.json +1 -1
- package/README.GIT +0 -278
- package/dist/components/molecules/TextOnly/TextOnly.d.ts +0 -4
- package/dist/components/molecules/TextOnly/index.d.ts +0 -2
- /package/dist/components/molecules/{TextOnly/TextOnly.style.d.ts → BodyContent/BodyContent.style.d.ts} +0 -0
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
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,
|
|
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, Quote, VideoControls, VideoWithControls } from './components';
|
|
2
|
+
import BodyContent from './components/molecules/BodyContent';
|
|
2
3
|
import { devices, breakpoints } from './styles/viewports';
|
|
3
4
|
import zIndexes from './styles/zIndexes';
|
|
4
5
|
import { AspectRatio, ButtonType, CarouselType, Colors, IconNameType, IntegratedTimerProps, ITimerProps, TickboxMode, ThemeColor, ThemeType, EditorialLink, IInformationTitleProps, IInformationCTAProps } from './types';
|
|
5
6
|
import { MiniCard } from './components/molecules';
|
|
6
7
|
import { ModalWindow } from './components/organisms';
|
|
7
8
|
import AuxiliaryButton from './components/atoms/Buttons/Auxiliary/AuxiliaryButton';
|
|
8
|
-
import HarmonicThemeProvider from './styles/HarmonicThemeProvider';
|
|
9
|
+
import HarmonicThemeProvider, { useHarmonicTheme } from './styles/HarmonicThemeProvider';
|
|
9
10
|
import { HarmonicSize } from './types/typography';
|
|
10
11
|
import { HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText } from './components/Typography';
|
|
11
|
-
export {
|
|
12
|
+
export { useHarmonicTheme };
|
|
13
|
+
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,9 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ThemeType } from '../../types';
|
|
3
3
|
import './theme/fonts.css';
|
|
4
|
+
import './theme/typography.css';
|
|
5
|
+
export declare const DEFAULT_THEME = ThemeType.Core;
|
|
4
6
|
interface HarmonicThemeProviderProps {
|
|
5
7
|
theme: ThemeType;
|
|
6
8
|
children: React.ReactNode;
|
|
7
9
|
}
|
|
10
|
+
export declare const HarmonicThemeContext: React.Context<ThemeType>;
|
|
11
|
+
export declare const useHarmonicTheme: () => ThemeType;
|
|
8
12
|
declare const HarmonicThemeProvider: React.FC<HarmonicThemeProviderProps>;
|
|
9
13
|
export default HarmonicThemeProvider;
|
|
@@ -13,8 +13,6 @@ declare type BaseProps = {
|
|
|
13
13
|
onClick?: MouseEventHandler<HTMLAnchorElement>;
|
|
14
14
|
/** Custom CSS classes */
|
|
15
15
|
className?: string;
|
|
16
|
-
/** Styled Components theme */
|
|
17
|
-
theme?: unknown;
|
|
18
16
|
};
|
|
19
17
|
declare type IconProps = {
|
|
20
18
|
/** Icon identifier */
|
|
@@ -52,6 +50,12 @@ export declare type RotatorButtonsProps = {
|
|
|
52
50
|
onClickPrev?: () => void;
|
|
53
51
|
/** Next button click handler */
|
|
54
52
|
onClickNext?: () => void;
|
|
53
|
+
/** Show fullscreen button */
|
|
54
|
+
showFullscreen?: boolean;
|
|
55
|
+
/** Fullscreen button click handler */
|
|
56
|
+
onClickFullscreen?: () => void;
|
|
57
|
+
/** Is in fullscreen mode */
|
|
58
|
+
isFullscreen?: boolean;
|
|
55
59
|
/** Custom CSS classes */
|
|
56
60
|
className?: string;
|
|
57
61
|
};
|
|
@@ -1,9 +1,12 @@
|
|
|
1
|
-
import { StyledProps } from 'styled-components';
|
|
2
1
|
export interface IContactCardProps {
|
|
3
2
|
/**
|
|
4
|
-
*
|
|
3
|
+
* Title
|
|
5
4
|
*/
|
|
6
|
-
|
|
5
|
+
title: string;
|
|
6
|
+
/**
|
|
7
|
+
* Title suffix
|
|
8
|
+
*/
|
|
9
|
+
titleSuffix?: string;
|
|
7
10
|
/**
|
|
8
11
|
* Description
|
|
9
12
|
*/
|
|
@@ -25,24 +28,7 @@ export interface IContactCardProps {
|
|
|
25
28
|
*/
|
|
26
29
|
address?: string;
|
|
27
30
|
/**
|
|
28
|
-
*
|
|
29
|
-
*/
|
|
30
|
-
hideTopBorder?: boolean;
|
|
31
|
-
/**
|
|
32
|
-
* Set visibility of the top border
|
|
33
|
-
*/
|
|
34
|
-
hideBottomBorder?: boolean;
|
|
35
|
-
}
|
|
36
|
-
export interface IContactCardWrapperProps extends StyledProps<{
|
|
37
|
-
hideTopBorder: boolean;
|
|
38
|
-
hideBottomBorder: boolean;
|
|
39
|
-
}> {
|
|
40
|
-
/**
|
|
41
|
-
* Set visibility of the top border
|
|
42
|
-
*/
|
|
43
|
-
hideTopBorder: boolean;
|
|
44
|
-
/**
|
|
45
|
-
* Set visibility of the bottom border
|
|
31
|
+
* The component's class name
|
|
46
32
|
*/
|
|
47
|
-
|
|
33
|
+
className?: string;
|
|
48
34
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { DirectionType, IconNameType } from './iconTypes';
|
|
2
|
-
import { LinkTarget } from './types';
|
|
3
|
-
import type { ThemeChildProps } from './types';
|
|
2
|
+
import { LinkTarget, ThemeType } from './types';
|
|
4
3
|
import type { HarmonicSize } from './typography';
|
|
5
4
|
export declare const InformationCtaVariants: {
|
|
6
5
|
readonly Primary: "Primary";
|
|
@@ -9,60 +8,41 @@ export declare const InformationCtaVariants: {
|
|
|
9
8
|
readonly TextLink: "TextLink";
|
|
10
9
|
};
|
|
11
10
|
export declare type InformationCtaVariant = keyof typeof InformationCtaVariants;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Text to display on the CTA
|
|
16
|
-
*/
|
|
11
|
+
export interface IInformationCTAProps {
|
|
12
|
+
/** Text to display on the CTA */
|
|
17
13
|
text: string;
|
|
18
|
-
/**
|
|
19
|
-
* Link for the CTA
|
|
20
|
-
*/
|
|
14
|
+
/** Link for the CTA */
|
|
21
15
|
link: string;
|
|
22
|
-
/**
|
|
23
|
-
* Style of the CTA
|
|
24
|
-
*/
|
|
16
|
+
/** Style of the CTA */
|
|
25
17
|
variant?: InformationCtaVariant;
|
|
26
|
-
/**
|
|
27
|
-
* Name of the icon to be used in the button
|
|
28
|
-
*/
|
|
18
|
+
/** Name of the icon to be used in the button */
|
|
29
19
|
iconName?: IconNameType;
|
|
30
|
-
/**
|
|
31
|
-
* Direction of the icon used in the button
|
|
32
|
-
*/
|
|
20
|
+
/** Direction of the icon used in the button */
|
|
33
21
|
iconDirection?: DirectionType;
|
|
34
|
-
/**
|
|
35
|
-
* Attribute to specify where to open the link
|
|
36
|
-
*/
|
|
22
|
+
/** Attribute to specify where to open the link */
|
|
37
23
|
target?: LinkTarget;
|
|
24
|
+
/** Custom CSS classes */
|
|
25
|
+
className?: string;
|
|
38
26
|
}
|
|
39
|
-
export declare type InformationCTAWrapperProps =
|
|
27
|
+
export declare type InformationCTAWrapperProps = {
|
|
28
|
+
/** Style of the CTA */
|
|
29
|
+
variant: InformationCtaVariant;
|
|
30
|
+
/** Theme options */
|
|
31
|
+
theme?: ThemeType;
|
|
32
|
+
};
|
|
40
33
|
export interface IInformationTitleProps {
|
|
41
|
-
/**
|
|
42
|
-
* Title text to display
|
|
43
|
-
*/
|
|
34
|
+
/** Title text to display */
|
|
44
35
|
text: string;
|
|
45
|
-
/**
|
|
46
|
-
* The size of the title text
|
|
47
|
-
*/
|
|
36
|
+
/** The size of the title text */
|
|
48
37
|
textSize: HarmonicSize;
|
|
49
38
|
}
|
|
50
|
-
export interface IInformationProps
|
|
51
|
-
/**
|
|
52
|
-
* Main body text to display in the Information Component
|
|
53
|
-
*/
|
|
39
|
+
export interface IInformationProps {
|
|
40
|
+
/** Main body text to display in the Information Component */
|
|
54
41
|
body: string;
|
|
55
|
-
/**
|
|
56
|
-
* Optional CTA to display underneath the body text
|
|
57
|
-
*/
|
|
42
|
+
/** Optional CTA to display underneath the body text */
|
|
58
43
|
cta?: IInformationCTAProps;
|
|
59
|
-
/**
|
|
60
|
-
* Title options for the component
|
|
61
|
-
*/
|
|
44
|
+
/** Title options for the component */
|
|
62
45
|
title?: IInformationTitleProps;
|
|
63
|
-
/**
|
|
64
|
-
* Additional CSS class names to apply to component.
|
|
65
|
-
*/
|
|
46
|
+
/** Custom CSS classes */
|
|
66
47
|
className?: string;
|
|
67
48
|
}
|
|
68
|
-
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { AnchorHTMLAttributes,
|
|
1
|
+
import React, { AnchorHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
|
|
2
2
|
import { DirectionType, IconNameType } from './iconTypes';
|
|
3
3
|
import { Colors, IOptionItem, ThemeColor } from './types';
|
|
4
4
|
export interface IAccountProps {
|
|
@@ -275,26 +275,20 @@ export interface IAnchorBarAbsolutePositionParams {
|
|
|
275
275
|
topOffset: number;
|
|
276
276
|
}
|
|
277
277
|
export interface IAnchorBarProps {
|
|
278
|
-
/**
|
|
279
|
-
* Tabs displayed in the anchor bar
|
|
280
|
-
*/
|
|
278
|
+
/** Tabs displayed in the anchor bar */
|
|
281
279
|
tabs: AnchorBarTab[];
|
|
282
|
-
/**
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
onTabClick?: (e: MouseEvent, id: string) => void;
|
|
286
|
-
/**
|
|
287
|
-
* Set the id of the tab actived
|
|
288
|
-
*/
|
|
280
|
+
/** Function to be called when a tab is clicked */
|
|
281
|
+
onTabClick?: (e: React.MouseEvent<HTMLAnchorElement>, id: string) => void;
|
|
282
|
+
/** Set the id of the active tab */
|
|
289
283
|
activeTab?: string;
|
|
290
|
-
/**
|
|
291
|
-
* Only for IOS devices that do not fully support sticky position, in case a keyboard is opened on the device
|
|
292
|
-
*/
|
|
284
|
+
/** Only for IOS devices that do not fully support sticky position, in case a keyboard is opened on the device */
|
|
293
285
|
absolutePositionParams?: IAnchorBarAbsolutePositionParams;
|
|
294
|
-
/**
|
|
295
|
-
* Boolean to set bottom border
|
|
296
|
-
*/
|
|
286
|
+
/** Boolean to set bottom border */
|
|
297
287
|
bottomBorder?: boolean;
|
|
288
|
+
/** Flag indicating whether the bar should have a shadow */
|
|
289
|
+
withShadow?: boolean;
|
|
290
|
+
/** Custom CSS classes */
|
|
291
|
+
className?: string;
|
|
298
292
|
}
|
|
299
293
|
export interface ITitleCTAProps {
|
|
300
294
|
/**
|
|
@@ -331,64 +325,40 @@ export interface IAnchorTabsListProps {
|
|
|
331
325
|
hasTwoArrows: boolean;
|
|
332
326
|
}
|
|
333
327
|
export interface IAnchorTabBarBorderProps {
|
|
334
|
-
/**
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
}
|
|
339
|
-
export interface IAnchorTabArrowsBoxProps {
|
|
340
|
-
/**
|
|
341
|
-
* Boolean to determine width of the arrows container
|
|
342
|
-
*/
|
|
343
|
-
fullWidth: boolean;
|
|
328
|
+
/** Boolean to set bottom border */
|
|
329
|
+
bottomBorder?: boolean;
|
|
330
|
+
/** Flag indicating whether the anchor bar should have a shadow */
|
|
331
|
+
withShadow?: boolean;
|
|
344
332
|
}
|
|
345
333
|
export interface ITabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
346
334
|
children: ReactNode;
|
|
347
|
-
/**
|
|
348
|
-
* Function to be called when a button is clicked
|
|
349
|
-
*/
|
|
335
|
+
/** Function to be called when a button is clicked */
|
|
350
336
|
onClick?: MouseEventHandler<HTMLAnchorElement>;
|
|
351
|
-
/**
|
|
352
|
-
* Name of the icon to be used in the button
|
|
353
|
-
*/
|
|
337
|
+
/** Name of the icon to be used in the button */
|
|
354
338
|
iconName?: IconNameType;
|
|
355
|
-
/**
|
|
356
|
-
* Direction of the icon used in the button
|
|
357
|
-
*/
|
|
339
|
+
/** Direction of the icon used in the button */
|
|
358
340
|
iconDirection?: DirectionType;
|
|
359
|
-
/**
|
|
360
|
-
* Color of text and icon
|
|
361
|
-
*/
|
|
341
|
+
/** Color of text and icon */
|
|
362
342
|
color?: ThemeColor;
|
|
363
|
-
/**
|
|
364
|
-
* Color of text and icon on hover
|
|
365
|
-
*/
|
|
343
|
+
/** Color of text and icon on hover */
|
|
366
344
|
hoverColor?: ThemeColor;
|
|
367
|
-
/**
|
|
368
|
-
* Set if tab is selected or not
|
|
369
|
-
*/
|
|
345
|
+
/** Set if tab is selected or not */
|
|
370
346
|
selected?: boolean;
|
|
347
|
+
/** Custom CSS classes */
|
|
348
|
+
className?: string;
|
|
371
349
|
}
|
|
372
350
|
export interface IStickyBarProps {
|
|
373
351
|
children: ReactNode;
|
|
374
|
-
/**
|
|
375
|
-
* Set columnstart in Desktop
|
|
376
|
-
*/
|
|
352
|
+
/** Set columnStart in Desktop */
|
|
377
353
|
columnStartDesktop?: number;
|
|
378
|
-
/**
|
|
379
|
-
* Set columnSpan in Desktop
|
|
380
|
-
*/
|
|
354
|
+
/** Set columnSpan in Desktop */
|
|
381
355
|
columnSpanDesktop?: number;
|
|
382
|
-
/**
|
|
383
|
-
* Set columnstart in Device
|
|
384
|
-
*/
|
|
356
|
+
/** Set columnStart in Device */
|
|
385
357
|
columnStartDevice?: number;
|
|
386
|
-
/**
|
|
387
|
-
* Set columnSpam in Device
|
|
388
|
-
*/
|
|
358
|
+
/** Set columnSpan in Device */
|
|
389
359
|
columnSpanDevice?: number;
|
|
390
|
-
/**
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
360
|
+
/** Boolean to set bottom border */
|
|
361
|
+
bottomBorder?: boolean;
|
|
362
|
+
/** Custom CSS classes */
|
|
363
|
+
className?: string;
|
|
394
364
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
|
-
import { EditorialLink, PromoLinks } from './editorial';
|
|
2
|
+
import { EditorialLink, PromoLinks, PromoTitleHierarchy } from './editorial';
|
|
3
3
|
import { IntegratedTimerProps } from './timer';
|
|
4
4
|
import { Image } from './types';
|
|
5
5
|
export interface IPromoWithTagsProps {
|
|
@@ -15,6 +15,10 @@ export interface IPromoWithTagsProps {
|
|
|
15
15
|
* Title size
|
|
16
16
|
*/
|
|
17
17
|
titleSize?: 'small' | 'large';
|
|
18
|
+
/**
|
|
19
|
+
* Semantic level of the promo title header - h2 or h3.
|
|
20
|
+
*/
|
|
21
|
+
titleHierarchy: PromoTitleHierarchy;
|
|
18
22
|
/**
|
|
19
23
|
* Subtitle placed in the editorial component
|
|
20
24
|
*/
|
|
@@ -82,4 +86,8 @@ export interface IPromoWithTagsStyledProps {
|
|
|
82
86
|
* Sets margin for the tags container
|
|
83
87
|
*/
|
|
84
88
|
marginBottom?: number;
|
|
89
|
+
/**
|
|
90
|
+
* Sets mobile margin for the tags container
|
|
91
|
+
*/
|
|
92
|
+
mobileMarginBottom?: number;
|
|
85
93
|
}
|
package/dist/types/types.d.ts
CHANGED
|
@@ -53,14 +53,8 @@ export declare enum ThemeType {
|
|
|
53
53
|
Cinema = "cinema",
|
|
54
54
|
Schools = "schools"
|
|
55
55
|
}
|
|
56
|
-
export declare type ThemeChildProps = {
|
|
57
|
-
className?: string;
|
|
58
|
-
theme?: ThemeType;
|
|
59
|
-
};
|
|
60
56
|
export interface IThemeProviderProps {
|
|
61
|
-
/**
|
|
62
|
-
* The theme to use for the child elements
|
|
63
|
-
*/
|
|
57
|
+
/** The theme to use for the child elements */
|
|
64
58
|
theme: ThemeType;
|
|
65
59
|
children: ReactNode;
|
|
66
60
|
}
|
|
@@ -154,6 +148,10 @@ export interface ITabProps {
|
|
|
154
148
|
* Additional CSS class names to apply to the navigation component.
|
|
155
149
|
*/
|
|
156
150
|
className?: string;
|
|
151
|
+
/**
|
|
152
|
+
* The unique ID to assign to the link element.
|
|
153
|
+
*/
|
|
154
|
+
tabLinkId?: string;
|
|
157
155
|
/**
|
|
158
156
|
* Defines the ARIA role of the element for accessibility purposes.
|
|
159
157
|
*/
|
|
@@ -221,7 +219,11 @@ export interface IDropdownProps {
|
|
|
221
219
|
*/
|
|
222
220
|
ariaLabel?: string;
|
|
223
221
|
/**
|
|
224
|
-
*
|
|
222
|
+
* The unique ID to assign to the link element inside the tab.
|
|
223
|
+
*/
|
|
224
|
+
tabLinkId?: string;
|
|
225
|
+
/**
|
|
226
|
+
* Defines if it is needed to trim the text of the Tab and add 3 dots in the end
|
|
225
227
|
*/
|
|
226
228
|
trimTabText?: boolean;
|
|
227
229
|
}
|
|
@@ -424,6 +426,62 @@ export declare type IHotFilterProps = {
|
|
|
424
426
|
selectedIndex?: number;
|
|
425
427
|
onSelect?: (index: number) => void;
|
|
426
428
|
};
|
|
429
|
+
export declare type ICastFilterItem = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'aria-label' | 'role'> & {
|
|
430
|
+
/**
|
|
431
|
+
* Name of the cast member shown below the image circle. Required.
|
|
432
|
+
*/
|
|
433
|
+
name: string;
|
|
434
|
+
/**
|
|
435
|
+
* Image source for the image to be shown. Optional but if not included an unaesthetic placeholder will show.
|
|
436
|
+
*/
|
|
437
|
+
image?: string;
|
|
438
|
+
onClick?: () => void;
|
|
439
|
+
};
|
|
440
|
+
export declare type ICastFiltersProps = {
|
|
441
|
+
/**
|
|
442
|
+
* Array of cast to filter by.
|
|
443
|
+
*/
|
|
444
|
+
cast: ICastFilterItem[];
|
|
445
|
+
/**
|
|
446
|
+
* A classname is required for the HarmonicThemeProvider to provide styles properly.
|
|
447
|
+
* If it is not provided here it will default to 'cast-filters'.
|
|
448
|
+
*/
|
|
449
|
+
className?: string;
|
|
450
|
+
/**
|
|
451
|
+
* Indices of currently selected cast in the `cast` array.
|
|
452
|
+
*/
|
|
453
|
+
selectedIndices?: number[];
|
|
454
|
+
/**
|
|
455
|
+
* Text shown at the top of the component, e.g. 'Filter by cast'. If this is not provided
|
|
456
|
+
* the component will render without any.
|
|
457
|
+
*/
|
|
458
|
+
headingText?: string;
|
|
459
|
+
/**
|
|
460
|
+
* Override the text of the primary CTA. Default is 'Apply'.
|
|
461
|
+
*/
|
|
462
|
+
ctaText?: string;
|
|
463
|
+
/**
|
|
464
|
+
* Override the text of the text link. Default is 'Clear'.
|
|
465
|
+
*/
|
|
466
|
+
textLinkText?: string;
|
|
467
|
+
/**
|
|
468
|
+
* Default image to show in cases where a cast member image prop is missing.
|
|
469
|
+
* If this is undefined then a light grey background will be displayed instead.
|
|
470
|
+
*/
|
|
471
|
+
placeholderImage?: string;
|
|
472
|
+
/**
|
|
473
|
+
* Handle selecting individual cast filters.
|
|
474
|
+
*/
|
|
475
|
+
onSelect?: (index: number) => void;
|
|
476
|
+
/**
|
|
477
|
+
* Handle clicking the primary CTA.
|
|
478
|
+
*/
|
|
479
|
+
onApply?: (indices: number[]) => void;
|
|
480
|
+
/**
|
|
481
|
+
* Handle clicking the text link.
|
|
482
|
+
*/
|
|
483
|
+
onClear?: () => void;
|
|
484
|
+
};
|
|
427
485
|
export interface ISponsorshipProps {
|
|
428
486
|
/**
|
|
429
487
|
* Source URL for Sponsorship IFRAME.
|
|
@@ -458,10 +516,10 @@ export interface ITextLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>
|
|
|
458
516
|
textColor?: ThemeColor;
|
|
459
517
|
}
|
|
460
518
|
export interface ISectionSplitterProps {
|
|
461
|
-
/**
|
|
462
|
-
* Set the width of the Section to full
|
|
463
|
-
*/
|
|
519
|
+
/** Set the width of the Section to full */
|
|
464
520
|
fullWidth?: boolean;
|
|
521
|
+
/** Custom CSS classes */
|
|
522
|
+
className?: string;
|
|
465
523
|
}
|
|
466
524
|
export interface ITypeTagsProps {
|
|
467
525
|
/**
|
|
@@ -469,46 +527,30 @@ export interface ITypeTagsProps {
|
|
|
469
527
|
*/
|
|
470
528
|
list: string[];
|
|
471
529
|
}
|
|
472
|
-
export interface
|
|
473
|
-
/**
|
|
474
|
-
* Text placed in the TextOnly component
|
|
475
|
-
*/
|
|
530
|
+
export interface IBodyContentProps {
|
|
531
|
+
/** Text placed in the BodyContent component */
|
|
476
532
|
text: string;
|
|
477
|
-
/**
|
|
478
|
-
* Set columnstart in Desktop
|
|
479
|
-
*/
|
|
533
|
+
/** Set columnStart in Desktop */
|
|
480
534
|
columnStartDesktop?: number;
|
|
481
|
-
/**
|
|
482
|
-
* Set columnSpan in Desktop
|
|
483
|
-
*/
|
|
535
|
+
/** Set columnSpan in Desktop */
|
|
484
536
|
columnSpanDesktop?: number;
|
|
485
|
-
/**
|
|
486
|
-
* Set columnstart in Device
|
|
487
|
-
*/
|
|
537
|
+
/** Set columnStart in Device */
|
|
488
538
|
columnStartDevice?: number;
|
|
489
|
-
/**
|
|
490
|
-
* Set columnSpam in Device
|
|
491
|
-
*/
|
|
539
|
+
/** Set columnSpan in Device */
|
|
492
540
|
columnSpanDevice?: number;
|
|
541
|
+
/** Custom CSS classes */
|
|
542
|
+
className?: string;
|
|
493
543
|
}
|
|
494
544
|
export declare type SectionTitleSize = 'small' | 'large';
|
|
495
545
|
export interface ISectionTitleProps {
|
|
496
|
-
/**
|
|
497
|
-
* Title to display.
|
|
498
|
-
*/
|
|
546
|
+
/** Title to display. */
|
|
499
547
|
title: string;
|
|
500
|
-
/**
|
|
501
|
-
* Size of title to display - by default small, which renders as an H2 (and large is an H1).
|
|
502
|
-
*/
|
|
548
|
+
/** Size of title to display - by default small, which renders as an H2 (and large is an H1). */
|
|
503
549
|
size?: SectionTitleSize;
|
|
504
|
-
/**
|
|
505
|
-
* Optional description that can be rendered below the title.
|
|
506
|
-
*/
|
|
550
|
+
/** Optional description that can be rendered below the title. */
|
|
507
551
|
description?: string;
|
|
508
|
-
/**
|
|
509
|
-
|
|
510
|
-
*/
|
|
511
|
-
semanticLevel?: TypographyLevel;
|
|
552
|
+
/** Custom CSS classes */
|
|
553
|
+
className?: string;
|
|
512
554
|
}
|
|
513
555
|
export interface ILogosProps {
|
|
514
556
|
/**
|
|
@@ -25,6 +25,10 @@ export interface IGenericTypographyProps<T extends HTMLElement = HTMLParagraphEl
|
|
|
25
25
|
export interface IHarmonicHeaderProps extends IGenericTypographyProps {
|
|
26
26
|
hierarchy: HeaderHierarchy;
|
|
27
27
|
}
|
|
28
|
+
export interface ITaggedTypographyProps extends IGenericTypographyProps {
|
|
29
|
+
/** Specifies the HTML tag for rendering typography. The default is 'p'. */
|
|
30
|
+
tag?: React.ElementType;
|
|
31
|
+
}
|
|
28
32
|
export declare type TypographyLevel = 1 | 2 | 3 | 4 | 5 | 6;
|
|
29
33
|
export declare type AltHeaderLevel = 3 | 4 | 5 | 6;
|
|
30
34
|
export declare type BodyLevel = 1 | 2 | 3;
|