@royaloperahouse/harmonic 1.0.1-a → 1.0.1-d

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-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';
+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';
 import BodyContent from './components/molecules/BodyContent';
 import Quote from './components/molecules/Quote';
 import { devices, breakpoints } from './styles/viewports';
@@ -12,4 +12,4 @@ import HarmonicThemeProvider, { useHarmonicTheme } from './styles/HarmonicThemeP
 import { HarmonicSize } from './types/typography';
 import { HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText } from './components/Typography';
 export { useHarmonicTheme };
-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, };
+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/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ThemeType } from '../../types';
 import './theme/fonts.css';
+import './theme/typography.css';
 export declare const DEFAULT_THEME = ThemeType.Core;
 interface HarmonicThemeProviderProps {
     theme: ThemeType;

package/dist/types/types.d.ts

@@ -147,6 +147,10 @@ export interface ITabProps {
      * Additional CSS class names to apply to the navigation component.
      */
     className?: string;
+    /**
+     * The unique ID to assign to the link element.
+     */
+    tabLinkId?: string;
     /**
      * Defines the ARIA role of the element for accessibility purposes.
      */
@@ -222,7 +226,11 @@ export interface IDropdownProps {
      */
     ariaLabel?: string;
     /**
-     *  Defines if it is needed to trim the text of the Tab and add 3 dots in the end
+     * The unique ID to assign to the link element inside the tab.
+     */
+    tabLinkId?: string;
+    /**
+     * Defines if it is needed to trim the text of the Tab and add 3 dots in the end
      */
     trimTabText?: boolean;
 }
@@ -429,7 +437,7 @@ export declare type IHotFilterProps = {
     selectedIndex?: number;
     onSelect?: (index: number) => void;
 };
-export declare type ICastFilterItem = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'aria-label' | 'role'> & {
+export declare type ICastFilterItem = {
     /**
      * Name of the cast member shown below the image circle. Required.
      */
@@ -438,6 +446,15 @@ export declare type ICastFilterItem = Pick<AnchorHTMLAttributes<HTMLAnchorElemen
      * Image source for the image to be shown. Optional but if not included an unaesthetic placeholder will show.
      */
     image?: string;
+    /**
+     * Optional accessible name for the option. If omitted, `name` is used.
+     */
+    'aria-label'?: string;
+    /**
+     * Kept for backwards compatibility with existing integrations.
+     * CastFilter always renders option semantics and ignores this value at runtime.
+     */
+    role?: string;
     onClick?: () => void;
 };
 export declare type ICastFiltersProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@royaloperahouse/harmonic",
-  "version": "1.0.1-a",
+  "version": "1.0.1-d",
   "author": "Royal Opera House",
   "license": "MIT",
   "main": "dist/index.js",
@@ -22,6 +22,7 @@
     "test:watch": "jest --watch --verbose --passWithNoTests",
     "lint": "eslint src",
     "format": "prettier --write src",
+    "prepare": "tsdx build",
     "size": "size-limit",
     "analyze": "size-limit --why",
     "storybook": "storybook dev -p 6006",

package/dist/components/atoms/Radio/Radio.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { IRadioProps } from '../../../types/formTypes';
-/**
- * DEPRECATED. Use Radio2 instead
- */
-declare const Radio: ({ checked, error, label, onChange }: IRadioProps) => React.JSX.Element;
-export default Radio;

package/dist/components/atoms/Radio/Radio.style.d.ts

@@ -1,4 +0,0 @@
-import { IRadioProps } from '../../../types/formTypes';
-export declare const RadioContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const RadioLine: import("styled-components").StyledComponent<"div", any, IRadioProps, never>;
-export declare const RadioError: import("styled-components").StyledComponent<"div", any, IRadioProps, never>;

package/dist/components/atoms/Radio/index.d.ts

@@ -1,2 +0,0 @@
-import Radio from './Radio';
-export default Radio;

package/dist/components/molecules/RadioGroup/RadioGroup.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { IRadioGroupProps } from '../../../types/formTypes';
-/**
- * DEPRECATED. Use RadioGroup2 instead
- */
-declare const RadioGroup: ({ radios, columnStartDesktop, columnStartDevice, columnSpanDesktop, columnSpanDevice, columnStartSmallDevice, columnSpanSmallDevice, onChange, }: IRadioGroupProps) => React.JSX.Element;
-export default RadioGroup;

package/dist/components/molecules/RadioGroup/RadioGroup.style.d.ts

@@ -1 +0,0 @@
-export declare const RadioGroupContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/molecules/RadioGroup/index.d.ts

@@ -1,2 +0,0 @@
-import RadioGroup from './RadioGroup';
-export default RadioGroup;

package/dist/components/molecules/Select/Select.d.ts

@@ -1,101 +0,0 @@
-import React from 'react';
-import { ISelectProps } from '../../../types/formTypes';
-/**
- * DEPRECATED. Use Select2 instead.
- * A select component, created using <ul> and <li> elements, with bespoke accessibility
- * logic.
- *
- * # Usage
- * ## Defining a component that uses a typical Select element
- * ```tsx
- * const MyComponent = () => {
- *   const handleSelect = (value: number, text: string) => {
- *     console.log("Selected", value);
- *   };
- *
- *   return <>
- *     <Select
- *       label="This is a label"
- *       options={[
- *         { text: "Option 1", value: 1 },
- *         { text: "Option 2", value: 2 },
- *       ]}
- *       onSelect={handleSelect}
- *     />
- *   </>
- * }
- * ```
- *
- * ## Defining a component that uses a disabled Select element
- * ```tsx
- * const MyComponent = () => {
- *   const handleSelect = (value: number, text: string) => {
- *     console.log("Selected", value);
- *   };
- *
- *   return <>
- *     <Select
- *       disabled // Select component disabled explicitely
- *       label="This is a label"
- *       options={[
- *         { text: "Option 1", value: 1 },
- *         { text: "Option 2", value: 2 },
- *       ]}
- *       onSelect={handleSelect}
- *     />
- *     <Select
- *       label="This is a label"
- *       options={[]} // Select component disabled implicitely by passing an empty array of options
- *       onSelect={handleSelect}
- *     />
- *   </>
- * }
- * ```
- *
- * ## Defining a component with a non-labelled Select element
- * ```tsx
- * const MyComponent = () => {
- *   const handleSelect = (value: number, text: string) => {
- *     console.log("Selected", value);
- *   };
- *
- *   return <>
- *     <Select
- *       label=""
- *       options={[
- *         { text: "Option 1", value: 1 },
- *         { text: "Option 2", value: 2 },
- *       ]}
- *       onSelect={handleSelect}
- *     />
- *   </>
- * }
- * ```
- *
- * ## Changing the dimensions of a Select element (px)
- * ```tsx
- * const MyComponent = () => {
- *   const handleSelect = (value: number, text: string) => {
- *     console.log("Selected", value);
- *   };
- *
- *   const selectWidthPx = 100;
- *   const selectHeightPx = 27;
- *
- *   return <>
- *     <Select
- *       label="This is a label"
- *       options={[
- *         { text: "Option 1", value: 1 },
- *         { text: "Option 2", value: 2 },
- *       ]}
- *       onSelect={handleSelect}
- *       width={selectWidthPx}
- *       height={selectHeightPx}
- *     />
- *   </>
- * }
- * ```
- */
-declare function Select<T>({ label, options, onSelect, disabled, resetWhenOptionsUpdate, width, height, }: ISelectProps<T>): React.JSX.Element;
-export default Select;

package/dist/components/molecules/Select/Select.style.d.ts

@@ -1,13 +0,0 @@
-import { ISelectProps } from '../../../types/formTypes';
-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, {
-    iconName: "DropdownArrow";
-    color: string;
-    title: "Select Arrow";
-}, "title" | "color" | "iconName">;
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Options: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Option: import("styled-components").StyledComponent<"li", any, {
-    hover: boolean;
-}, never>;
-export declare const SelectList: import("styled-components").StyledComponent<"ul", any, Pick<Required<ISelectProps<unknown>>, "height" | "width">, never>;

package/dist/components/molecules/Select/index.d.ts

@@ -1,2 +0,0 @@
-import Select from './Select';
-export default Select;