@royaloperahouse/harmonic 0.19.2 → 1.0.0

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;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@royaloperahouse/harmonic",
-  "version": "0.19.2",
+  "version": "1.0.0",
   "author": "Royal Opera House",
   "license": "MIT",
   "main": "dist/index.js",
@@ -9,7 +9,7 @@
     "dist"
   ],
   "engines": {
-    "node": ">=10"
+    "node": ">=18"
   },
   "repository": {
     "type": "git",
@@ -22,7 +22,6 @@
     "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",
@@ -30,9 +29,10 @@
     "build-storybook": "rm -rf ./storybook-static; storybook build -o ./storybook-static; cp -r ./external/ ./storybook-static/",
     "deploy-storybook-dev": "chromatic --build-script-name build-storybook-dev",
     "deploy-storybook": "storybook-to-aws-s3 --bucket-path=harmonic.roh.org.uk --aws-profile=parent --existing-output-dir=storybook-static --s3-sync-options=--acl=public-read",
+    "test:save-results": "jest --json --passWithNoTests --outputFile=./test/jest-test-results.json",
     "test-storybook": "jest --json --passWithNoTests --outputFile=./test/jest-test-results.json",
-    "publish-release": "make prepare-release-candidate; make publish-release",
-    "publish-snapshot": "make prepare-release-candidate; make publish-npm-snapshot"
+    "publish-release": "make prepare-release-candidate && make publish-release",
+    "publish-snapshot": "make prepare-release-candidate && make publish-npm-snapshot"
   },
   "keywords": [
     "React",
@@ -43,11 +43,6 @@
   "peerDependencies": {
     "react": ">=16"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "module": "dist/harmonic.esm.js",
   "size-limit": [
     {
@@ -91,7 +86,6 @@
     "@types/react-test-renderer": "^17.0.1",
     "@types/resize-observer-browser": "^0.1.11",
     "@types/styled-components": "5.1.26",
-    "@types/testing-library__jest-dom": "^5.9.1",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
     "autoprefixer": "^10.4.20",
@@ -108,11 +102,9 @@
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-storybook": "^0.12.0",
-    "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.0.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "^15.2.10",
     "prettier": "^3.3.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -138,11 +130,5 @@
     "@types/react": "^17.0.34",
     "@types/react-dom": "^17.0.11"
   },
-  "lint-staged": {
-    "*.{js,jsx,json,css,md,ts,tsx,html}": [
-      "npx eslint src --fix ",
-      "npx prettier src --write --uncommitted"
-    ]
-  },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

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;