@royaloperahouse/harmonic 0.18.2-a → 0.18.2-c

package/CHANGELOG.md

@@ -1,15 +1,3 @@
-## [0.18.1]
-- Accordion/Accordions: Add icon customization
-
-## [0.18.0]
-- Page Heading: Add PageHeadingHighlightCarousel component
-
-## [0.17.5]
-- Text Links: changed underline gap from 6px to 4px
-
-## [0.17.4]
-- Promo with Tags, Highlight Carousel: added progress bar
-
 ## [0.17.3]
 - AnchorBar: extend to accept optional grid
 

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { IDropdownProps } from '../../../types/types';
-declare const Dropdown: ({ title, titleLink, selected, options, onChange, iconName, isMobileBehaviour, withOptionsInMobile, withIcon, className, role, ariaLabel, trimTabText, }: IDropdownProps) => React.JSX.Element;
+declare const Dropdown: ({ title, titleLink, selected, options, onChange, iconName, isMobileBehaviour, withOptionsInMobile, withIcon, className, role, ariaLabel, tabLinkId, trimTabText, }: IDropdownProps) => React.JSX.Element;
 export default Dropdown;

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ITabProps } from '../../../types/types';
-declare const Tab: ({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, color, dataTestId, isOpen, }: ITabProps) => React.JSX.Element;
+declare const Tab: ({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, tabLinkId, color, dataTestId, isOpen, }: ITabProps) => React.JSX.Element;
 export default Tab;

package/dist/components/index.d.ts

@@ -1,8 +1,8 @@
 import { DisplayHeader, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText } from './Typography';
 import { AltHeader, BodyText, CinemaBadge, ControlledDropdown, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, Overline, PrimaryButton, Progress, Radio, Radio2, RotatorButtons, SecondaryButton, SecondaryLogo, TertiaryButton, SectionSplitter, SponsorLogo, Sponsorship, Stepper, StreamBadge, Subtitle, Tab, TabLink, TextLogo, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, VideoControls } from './atoms';
 import { AnchorTabBar, Footer, Navigation, StickyBar, TitleWithCTA, UpsellSection, Carousel, MinimalCarousel, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream } from './organisms';
-import { Accordion, Accordions, AnchorBar, AnnouncementBanner, AuxiliaryNav, Card, Cards, CastFilter, ContactCard, ContentSummary, CreditListing, Editorial, HotFilters, ImageWithCaption, Information, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlight, PageHeadingHighlightCarousel, PasswordStrength, Pagination, Paywall, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, SignUpForm, Table, Tabs, UpsellCard, VideoWithControls, SkipToMain } from './molecules';
+import { Accordion, Accordions, AnchorBar, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, HotFilters, ImageWithCaption, Information, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlight, PageHeadingHighlightCarousel, PasswordStrength, Pagination, Paywall, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, SignUpForm, Table, Tabs, UpsellCard, VideoWithControls, SkipToMain } from './molecules';
 import ThemeProvider from '../styles/ThemeProvider';
 import GlobalStyles from '../styles/GlobalStyles';
 export { DisplayHeader, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText, SkipToMain, };
-export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, Carousel, CastFilter, ContactCard, ContentSummary, CinemaBadge, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Header, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MinimalCarousel, Navigation, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Paywall, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SecondaryButton, SecondaryLogo, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, SponsorLogo, SignUpForm, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Table, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, TextLogo, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls, };
+export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, Carousel, ContactCard, ContentSummary, CinemaBadge, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Header, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MinimalCarousel, Navigation, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Paywall, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SecondaryButton, SecondaryLogo, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, SponsorLogo, SignUpForm, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Table, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, TextLogo, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls, };

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

@@ -13,7 +13,6 @@ export declare const MobileTitleWrapper: import("styled-components").StyledCompo
 export declare const PromoWithTagsExtraContentWrapper: import("styled-components").StyledComponent<"div", any, IEditorialGridProps, never>;
 export declare const PromoWithTagsContentWrapper: import("styled-components").StyledComponent<"div", any, IEditorialGridProps, never>;
 export declare const TimerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ProgressWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const EndDateText: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HarmonicHeaderWithWrapper: import("styled-components").StyledComponent<({ children, size, em, color, serif, hierarchy, tag, className, ...props }: import("../../../types/typography").HarmonicHeaderProps) => import("react").DOMElement<{
     defaultChecked?: boolean | undefined;

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

@@ -1,6 +1,6 @@
 interface FocusableTabProps {
     hide?: boolean;
 }
-export declare const FocusableTab: import("styled-components").StyledComponent<({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, color, dataTestId, isOpen, }: import("../../../types/types").ITabProps) => import("react").JSX.Element, any, FocusableTabProps, never>;
+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>;
 export declare const HiddenBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

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

@@ -35,5 +35,4 @@ import SignUpForm from './SignUpForm';
 import AnchorBar from './AnchorBar';
 import SkipToMain from './SkipToMain';
 import Paywall from './Paywall';
-import CastFilter from './CastFilter';
-export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AuxiliaryNav, Card, Cards, CastFilter, ContactCard, ContentSummary, CreditListing, Editorial, HotFilters, ImageWithCaption, Information, MiniCard, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingHighlight, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlightCarousel, PasswordStrength, Pagination, Paywall, PeopleListing, PolicyLinks, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, StatusBanner, SectionTitle, SearchBar, Select, Select2, Select2Async, SignUpForm, Tabs, Table, UpsellCard, VideoWithControls, SkipToMain, };
+export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, HotFilters, ImageWithCaption, Information, MiniCard, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingHighlight, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlightCarousel, PasswordStrength, Pagination, Paywall, PeopleListing, PolicyLinks, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, StatusBanner, SectionTitle, SearchBar, Select, Select2, Select2Async, SignUpForm, Tabs, Table, UpsellCard, VideoWithControls, SkipToMain, };

package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.style.d.ts

@@ -18,5 +18,4 @@ export declare const TimerWrapper: import("styled-components").StyledComponent<"
 export declare const AdditionalInfoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const InfoSubtitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const VideoWithControlsWrapper: import("styled-components").StyledComponent<"div", any, StyledProps, never>;
-export declare const ProgressContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/dist/harmonic.cjs.development.css

@@ -350,6 +350,325 @@
   font-display: swap;
 }
 
+/* ~~~~~ General Styling Classes ~~~~~ */
+.typography_color-primary__LOfDi {
+  color: var(--color-primary);
+}
+
+.typography_color-black__6MHRL {
+  color: var(--color-base-black);
+}
+
+.typography_color-white__PfW5s {
+  color: var(--color-base-white);
+}
+
+.typography_color-red__iPlbG {
+  color: var(--color-primary-red);
+}
+
+.typography_color-grey__GA1c2 {
+  color: var(--color-base-dark-grey);
+}
+
+.typography_color-inherit__RDd0Y {
+  color: inherit;
+}
+
+.typography_em__E6tX- {
+  font-style: italic;
+}
+/* ~~~ */
+
+/* Display Headers */
+.typography_display__-F3p4 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  line-height: 100%;
+
+  &.typography_large__uq0zC {
+    font-size: 96px;
+    font-weight: 700;
+    letter-spacing: -5px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 68px;
+    font-weight: 500;
+    letter-spacing: -3px;
+  }
+
+  /* Serif and Italic styles */
+  &.typography_serif__VSO38,
+  &.typography_em__E6tX- {
+    font-family: var(--font-family-serif);
+    font-weight: 500;
+  }
+
+  /* Serif and Italic adjustments */
+  &.typography_large__uq0zC.typography_serif__VSO38,
+  &.typography_large__uq0zC.typography_em__E6tX- {
+    letter-spacing: -3px;
+  }
+
+  &.typography_small__wfQ0K.typography_serif__VSO38,
+  &.typography_small__wfQ0K.typography_em__E6tX- {
+    letter-spacing: -2px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      font-size: 38px;
+      letter-spacing: -1.5px;
+    }
+
+    &.typography_small__wfQ0K {
+      font-size: 32px;
+      letter-spacing: -1.5px;
+    }
+
+    &.typography_large__uq0zC.typography_serif__VSO38,
+    &.typography_large__uq0zC.typography_em__E6tX-,
+    &.typography_small__wfQ0K.typography_serif__VSO38,
+    &.typography_small__wfQ0K.typography_em__E6tX- {
+      letter-spacing: -0.5px;
+    }
+  }
+}
+
+/* Headers */
+.typography_header__BexiD {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+
+  &.typography_large__uq0zC {
+    font-size: 44px;
+    line-height: 48px;
+    letter-spacing: -1.5px;
+  }
+
+  &.typography_medium__K0uZD {
+    font-size: 34px;
+    line-height: 40px;
+    letter-spacing: -1px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 26px;
+    line-height: 32px;
+    letter-spacing: -0.5px;
+  }
+
+  /* Serif and Italic styles */
+  &.typography_serif__VSO38,
+  &.typography_em__E6tX- {
+    font-family: var(--font-family-serif);
+  }
+
+  /* Serif and Italic letter-spacing overrides */
+  &.typography_large__uq0zC.typography_serif__VSO38,
+  &.typography_large__uq0zC.typography_em__E6tX- {
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_medium__K0uZD.typography_serif__VSO38,
+  &.typography_medium__K0uZD.typography_em__E6tX- {
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_small__wfQ0K.typography_serif__VSO38,
+  &.typography_small__wfQ0K.typography_em__E6tX- {
+    letter-spacing: -0.5px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      font-size: 28px;
+      line-height: 34px;
+      letter-spacing: -1.5px;
+    }
+
+    &.typography_medium__K0uZD {
+      font-size: 24px;
+      line-height: 28px;
+      letter-spacing: -1px;
+    }
+
+    &.typography_small__wfQ0K {
+      font-size: 20px;
+      line-height: 26px;
+      letter-spacing: -0.75px;
+    }
+
+    /* Mobile overrides for serif/italic letter-spacing */
+    &.typography_large__uq0zC.typography_serif__VSO38,
+    &.typography_large__uq0zC.typography_em__E6tX-,
+    &.typography_medium__K0uZD.typography_serif__VSO38,
+    &.typography_medium__K0uZD.typography_em__E6tX-,
+    &.typography_small__wfQ0K.typography_serif__VSO38,
+    &.typography_small__wfQ0K.typography_em__E6tX- {
+      letter-spacing: -0.5px;
+    }
+  }
+}
+
+/* Subtitle */
+.typography_subtitle__aoFTV {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+
+  &.typography_large__uq0zC {
+    font-size: 19px;
+    line-height: 26px;
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 17px;
+    line-height: 24px;
+    letter-spacing: -0.5px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      font-size: 17px;
+      line-height: 24px;
+      letter-spacing: -0.5px;
+    }
+
+    &.typography_small__wfQ0K {
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: -0.2px;
+    }
+  }
+}
+
+/* Body Copy */
+.typography_bodycopy__vYtQ8 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 400;
+
+  &.typography_large__uq0zC {
+    font-size: 19px;
+    line-height: 26px;
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_medium__K0uZD {
+    font-size: 17px;
+    line-height: 24px;
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: -0.5px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      font-size: 17px;
+      line-height: 24px;
+      letter-spacing: -0.5px;
+    }
+
+    &.typography_medium__K0uZD {
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: -0.2px;
+    }
+
+    &.typography_small__wfQ0K {
+      font-size: 11px;
+      line-height: 16px;
+      letter-spacing: -0.2px;
+    }
+  }
+}
+
+/* Overline */
+.typography_overline__EnUK3 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+  text-transform: uppercase;
+
+  &.typography_large__uq0zC {
+    font-size: 14px;
+    line-height: 18px;
+    letter-spacing: 0.3px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 12px;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      line-height: 17px;
+      letter-spacing: 0.3px; /* Added to ensure it stays */
+    }
+
+    &.typography_small__wfQ0K {
+      line-height: 14px;
+      letter-spacing: 0.3px;
+    }
+  }
+}
+
+/* Button Text */
+.typography_buttontext__vcxNi {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: 17px;
+  line-height: 20px;
+  letter-spacing: -0.5px;
+  font-weight: 400;
+
+  @media (max-width: 699px) {
+    font-weight: 500;
+    line-height: 17px;
+  }
+}
+
+/* Caption Text */
+.typography_captiontext__91UFb {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 24px;
+  letter-spacing: -0.5px;
+
+  @media (max-width: 699px) {
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: -0.2px;
+  }
+}
+
+/* Navigation Text */
+.typography_navigationtext__YfGf7 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: 19px;
+  line-height: 19px;
+  letter-spacing: 0.4px;
+  font-weight: 500;
+
+  @media (max-width: 699px) {
+    font-size: 17px;
+    line-height: 17px;
+  }
+}
+
 .core-theme-module_coreTheme__pWxYB {
   /* RBO Red */
   /* Primary Palette */