@royaloperahouse/harmonic 0.19.1-b → 0.19.2

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-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 { 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 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 { 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, };
+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, };

package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts

@@ -1,7 +1,6 @@
 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,10 +147,6 @@ 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.
      */
@@ -226,11 +222,7 @@ export interface IDropdownProps {
      */
     ariaLabel?: string;
     /**
-     * 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
+     *  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.1-b",
+  "version": "0.19.2",
   "author": "Royal Opera House",
   "license": "MIT",
   "main": "dist/index.js",
@@ -9,7 +9,7 @@
     "dist"
   ],
   "engines": {
-    "node": ">=18"
+    "node": ">=10"
   },
   "repository": {
     "type": "git",
@@ -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",
@@ -29,10 +30,9 @@
     "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,6 +43,11 @@
   "peerDependencies": {
     "react": ">=16"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
   "module": "dist/harmonic.esm.js",
   "size-limit": [
     {
@@ -86,6 +91,7 @@
     "@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",
@@ -102,9 +108,11 @@
     "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",
@@ -130,5 +138,11 @@
     "@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/Icons/StorybookSupport/Iconography.types.d.ts

@@ -1,10 +0,0 @@
-import { DirectionType, IconNameType } from '../../../../types/iconTypes';
-export interface IStorybookIcon {
-    iconName: IconNameType;
-    label: string;
-    direction?: DirectionType;
-    ariaLabel?: string;
-}
-export interface IIconographyGridProps {
-    iconsArray: IStorybookIcon[];
-}

package/dist/components/atoms/TextLogo/TextLogo.types.d.ts

@@ -1,10 +0,0 @@
-import { Colors } from '../../../types';
-export declare enum TextLogoProduct {
-    Stream = "STREAM",
-    Cinema = "CINEMA"
-}
-export interface ITextLogoProps {
-    productName: TextLogoProduct;
-    color: Colors;
-    fontSize?: number;
-}

package/dist/components/molecules/BodyContent/BodyContent.types.d.ts

@@ -1,4 +0,0 @@
-export declare type BodyContentTextContainerProps = {
-    className?: string;
-    html: string;
-};

package/dist/components/molecules/Information/InfoCta.types.d.ts

@@ -1,11 +0,0 @@
-import { DirectionType, IconNameType } from '../../../types/iconTypes';
-import type { InformationCtaVariant } from '../../../types/information';
-import { LinkTarget } from '../../../types/types';
-export declare type RenderButtonProps = {
-    variant: InformationCtaVariant;
-    link: string;
-    text: string;
-    iconName?: IconNameType;
-    iconDirection?: DirectionType;
-    target: LinkTarget;
-};

package/dist/components/molecules/PageHeading/Compact/Compact.types.d.ts

@@ -1,14 +0,0 @@
-export declare type VideoPoster = {
-    desktop?: string;
-    mobile?: string;
-    alt: string;
-};
-export declare type Video = {
-    elementId: string;
-    desktop?: string;
-    mobile?: string;
-};
-export interface IVideoProps {
-    video: Video;
-    poster: VideoPoster;
-}

package/dist/components/molecules/PageHeading/Compact/components/CompactHeaderBranding.types.d.ts

@@ -1,7 +0,0 @@
-import { BrandingStyle } from '../../../../../types/impactHeader';
-export interface IBrandingProps {
-    brandingStyle: BrandingStyle;
-    brandingLink?: string;
-    brandingText?: string;
-    invert: boolean;
-}

package/dist/components/molecules/PageHeading/Promo/components/Badge.types.d.ts

@@ -1,7 +0,0 @@
-import { ThemeType } from '../../../../../types';
-import { PageHeadingPromoBadge } from '../../../../../types/impactHeader';
-export declare type BadgeProps = {
-    theme?: ThemeType;
-    badge?: PageHeadingPromoBadge;
-    isMobile: boolean;
-};

package/dist/components/molecules/PageHeading/Promo/components/Button.types.d.ts

@@ -1,7 +0,0 @@
-import { EditorialLink, ThemeType } from '../../../../../types';
-import { PageHeadingPromoAdditionalLink } from '../../../../../types/impactHeader';
-export declare type ButtonProps = {
-    link: PageHeadingPromoAdditionalLink | EditorialLink;
-    theme?: ThemeType;
-    isMobile?: boolean;
-};

package/dist/components/molecules/Pagination/Pagination.types.d.ts

@@ -1,13 +0,0 @@
-export declare type PageData = {
-    currentPage: number;
-    pageCount: number;
-    baseUrl: string;
-    onPageChange?: never;
-    className?: string;
-} | {
-    currentPage: number;
-    pageCount: number;
-    onPageChange: (page: number) => void;
-    baseUrl?: never;
-    className?: string;
-};

package/dist/components/molecules/PromoWithTitle/PromoChild.types.d.ts

@@ -1,7 +0,0 @@
-import { ReactElement } from 'react';
-import { IVideoWithControlsSettings } from '../../../types/types';
-export interface IPromoChildProps {
-    children: ReactElement<HTMLImageElement | HTMLVideoElement>;
-    videoSettings: IVideoWithControlsSettings;
-    imageToLeft: boolean;
-}

package/dist/components/molecules/Select2/Select2.types.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { ISelect2Props } from '../../../types/formTypes';
-export interface IWrapperProps extends Pick<ISelect2Props, 'label' | 'error' | 'width' | 'darkMode'> {
-    children: React.ReactNode;
-    className?: string;
-}

package/dist/components/molecules/SignUpForm/components/SignUpFormButton.types.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { ThemeType } from '../../../../types/types';
-export declare type SignUpFormButtonProps = {
-    theme: ThemeType;
-    onClick: (e: React.FormEvent) => Promise<void>;
-};

package/dist/components/molecules/Swipe/Swipe.types.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-export declare type SwipeProps = {
-    children: React.ReactNode[];
-    infinite?: boolean;
-    slidesOffsetBefore?: number;
-    slidesAriaHidden?: boolean;
-    onIndexChange?: (index: number) => void;
-    onActiveChange?: (value: boolean) => void;
-    onOverflowChange?: (overflow: boolean) => void;
-    limitDragToNavigableRange?: boolean;
-} & React.HTMLAttributes<HTMLDivElement>;
-export interface SwipeRef {
-    nextSlide: () => void;
-    prevSlide: () => void;
-    hasOverflow: () => boolean;
-    hasNext: () => boolean;
-}

package/dist/components/molecules/Table/components/HeaderCells.types.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export interface HeaderCellsProps {
-    headings: React.ReactNode[];
-    columns: number;
-}

package/dist/components/organisms/Carousels/HighlightsCarousel/components/Buttons.types.d.ts

@@ -1,2 +0,0 @@
-import { HighlightsCarouselSlide } from '../../../../../types/carousel';
-export declare type HighlightsCarouselButtonsProps = Pick<HighlightsCarouselSlide, 'links' | 'auxiliaryCTA'>;

package/dist/components/organisms/Carousels/HighlightsCarousel/components/InfoSection.types.d.ts

@@ -1,8 +0,0 @@
-import { ReactElement } from 'react';
-import { HighlightsCarouselSlide } from '../../../../../types/carousel';
-import { ILogosProps } from '../../../../../types/types';
-export declare type HighlightsCarouselInfoSectionProps = {
-    logo?: ReactElement<ILogosProps> | null;
-    slide: HighlightsCarouselSlide;
-    currentSlideIndex: number;
-};

package/dist/components/organisms/Carousels/HighlightsCarousel/components/SwipeCarousel.types.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { HighlightsCarouselSlideImage, HighlightsCarouselSlideVideo } from '../../../../../types/carousel';
-import { SwipeRef } from '../../../../molecules';
-export declare type HighlightsCarouselSwipeCarouselProps = {
-    slidesMedia: (HighlightsCarouselSlideImage | HighlightsCarouselSlideVideo)[];
-    currentSlide: number;
-    setCurrentSlide: React.Dispatch<React.SetStateAction<number>>;
-    carouselRef: React.RefObject<SwipeRef>;
-    hasMultipleSlides: boolean;
-    carouselTitle?: string;
-};