@royaloperahouse/harmonic 0.15.0 → 0.16.0

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## [0.16.0]
+- SkiptoMain: Add SkipToMain component.
+
 ## [0.15.0]
 - PageHeading: Add PageHeadingHighlight component
 

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, isOpen, }: ITabProps) => React.JSX.Element;
+declare const Tab: ({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, color, dataTestId, isOpen, }: ITabProps) => React.JSX.Element;
 export default Tab;

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

@@ -7,4 +7,4 @@ export declare const Input: import("styled-components").StyledComponent<"input",
 export declare const ShowHideButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const TextLabel: import("styled-components").StyledComponent<"div", any, Pick<ITextFieldProps, "darkMode">, never>;
 export declare const ErrorLabel: import("styled-components").StyledComponent<"div", any, Pick<ITextFieldProps, "darkMode">, never>;
-export declare const BodyCopyHarmonicWithWrapper: import("styled-components").StyledComponent<({ children, size, color, className, bold, tag: Tag, ...props }: import("../../../types/typography").ITaggedTypographyProps) => import("react").JSX.Element, any, {}, never>;
+export declare const BodyCopyHarmonicWithWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../types/typography").ITaggedTypographyProps & import("react").RefAttributes<HTMLParagraphElement>>, any, {}, never>;

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, ContactCard, ContentSummary, CreditListing, Editorial, HotFilters, ImageWithCaption, Information, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlight, PasswordStrength, Pagination, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, SignUpForm, Table, Tabs, UpsellCard, VideoWithControls } from './molecules';
+import { Accordion, Accordions, AnchorBar, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, HotFilters, ImageWithCaption, Information, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlight, PasswordStrength, Pagination, 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, };
+export { DisplayHeader, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText, SkipToMain, };
 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, Pagination, PasswordStrength, 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/Card/Card.style.d.ts

@@ -11,7 +11,7 @@ export declare const ProgressContainer: import("styled-components").StyledCompon
 export declare const ContentContainer: import("styled-components").StyledComponent<"div", any, ICardContentContainerProps, never>;
 export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TitleContainerMobile: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TextContainer: import("styled-components").StyledComponent<({ children, size, color, className, bold, tag: Tag, ...props }: import("../../../types/typography").ITaggedTypographyProps) => import("react").JSX.Element, any, {}, never>;
+export declare const TextContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../types/typography").ITaggedTypographyProps & import("react").RefAttributes<HTMLParagraphElement>>, any, {}, never>;
 export declare const HighlightTextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SubtitleContainer: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const LabelContainer: import("styled-components").StyledComponent<"div", any, {

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

@@ -7,7 +7,7 @@ interface ContentSummaryProps {
 interface Clickable {
     clickable?: boolean;
 }
-export declare const BodyTextRelative: import("styled-components").StyledComponent<({ children, size, color, className, bold, tag: Tag, ...props }: import("../../../types/typography").ITaggedTypographyProps) => import("react").JSX.Element, any, {}, never>;
+export declare const BodyTextRelative: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../types/typography").ITaggedTypographyProps & import("react").RefAttributes<HTMLParagraphElement>>, any, {}, never>;
 export declare const ContentSummaryWrapper: import("styled-components").StyledComponent<"article", any, Clickable, never>;
 export declare const ContentSummaryImageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContentSummaryTextWrapper: import("styled-components").StyledComponent<"div", any, ContentSummaryProps, never>;

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

@@ -2,4 +2,4 @@ import type { InformationCTAWrapperProps } from '../../../types/information';
 export declare const InfoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const InfoTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const InfoCTAWrapper: import("styled-components").StyledComponent<"div", any, InformationCTAWrapperProps, never>;
-export declare const InfoBodyWrapper: import("styled-components").StyledComponent<({ children, size, color, className, bold, tag: Tag, ...props }: import("../../../types/typography").ITaggedTypographyProps) => import("react").JSX.Element, any, {}, never>;
+export declare const InfoBodyWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../types/typography").ITaggedTypographyProps & import("react").RefAttributes<HTMLParagraphElement>>, any, {}, never>;

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

@@ -4,6 +4,6 @@ export declare const MorePages: import("styled-components").StyledComponent<"spa
 export declare const PageNumberWrapper: import("styled-components").StyledComponent<"ol", any, {}, never>;
 export declare const LastPageItem: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const PreviousPageItem: import("styled-components").StyledComponent<"li", any, {}, never>;
-export declare const TextLinkPagination: import("styled-components").StyledComponent<({ children, size, color, className, bold, tag: Tag, ...props }: import("../../../types/typography").ITaggedTypographyProps) => import("react").JSX.Element, any, {
+export declare const TextLinkPagination: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../types/typography").ITaggedTypographyProps & import("react").RefAttributes<HTMLParagraphElement>>, any, {
     active?: boolean | undefined;
 }, never>;

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

@@ -15,5 +15,5 @@ export declare const PromoWithTagsContentWrapper: import("styled-components").St
 export declare const TimerWrapper: 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, }: import("../../../types/typography").IHarmonicHeaderProps) => import("react").JSX.Element, any, {}, never>;
-export declare const BodyCopyHarmonicWithWrapper: import("styled-components").StyledComponent<({ children, size, color, className, bold, tag: Tag, ...props }: import("../../../types/typography").ITaggedTypographyProps) => import("react").JSX.Element, any, {}, never>;
-export declare const HarmonicSubtitleWithWrapper: import("styled-components").StyledComponent<({ children, size, color, className }: import("../../../types/typography").IGenericTypographyProps<HTMLParagraphElement>) => import("react").JSX.Element, any, {}, never>;
+export declare const BodyCopyHarmonicWithWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../types/typography").ITaggedTypographyProps & import("react").RefAttributes<HTMLParagraphElement>>, any, {}, never>;
+export declare const HarmonicSubtitleWithWrapper: import("styled-components").StyledComponent<({ children, size, color, className, tag: Tag, }: import("../../../types/typography").ITaggedTypographyProps) => import("react").JSX.Element, any, {}, never>;

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

@@ -3,6 +3,6 @@ export declare const PromoWithTitleGrid: import("styled-components").StyledCompo
 export declare const PromoWithTitleImageWrapper: import("styled-components").StyledComponent<"div", any, IEditorialGridProps, never>;
 export declare const PromoWithTitleContentWrapper: import("styled-components").StyledComponent<"div", any, IEditorialGridProps, never>;
 export declare const HarmonicHeaderWithWrapper: import("styled-components").StyledComponent<({ children, size, em, color, serif, hierarchy: Tag, className, }: import("../../../types/typography").IHarmonicHeaderProps) => import("react").JSX.Element, any, {}, never>;
-export declare const HarmonicSubtitleWithWrapper: import("styled-components").StyledComponent<({ children, size, color, className }: import("../../../types/typography").IGenericTypographyProps<HTMLParagraphElement>) => import("react").JSX.Element, any, {}, never>;
-export declare const BodyCopyHarmonicWithWrapper: import("styled-components").StyledComponent<({ children, size, color, className, bold, tag: Tag, ...props }: import("../../../types/typography").ITaggedTypographyProps) => import("react").JSX.Element, any, {}, never>;
+export declare const HarmonicSubtitleWithWrapper: import("styled-components").StyledComponent<({ children, size, color, className, tag: Tag, }: import("../../../types/typography").ITaggedTypographyProps) => import("react").JSX.Element, any, {}, never>;
+export declare const BodyCopyHarmonicWithWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../types/typography").ITaggedTypographyProps & import("react").RefAttributes<HTMLParagraphElement>>, any, {}, never>;
 export declare const ButtonsContainer: import("styled-components").StyledComponent<"div", any, IEditorialGridProps, never>;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ISkipToMainProps } from '../../../types/types';
+/**
+ * An accessible component which allows Assistive Technology users to move the focus
+ * to main content, skipping the Nav bar. On desktop, it will remain invisible until focused.
+ * On mobile, it will remain invisible even when focused.
+ *
+ * It's default functionality is to skip to the <main> tag.
+ * However, skipToId may be passed as a prop to target any element with corresponding id.
+ * If neither of those is found in the document, the component will be hidden and not focusable.
+ *
+ * To prevent SSR errors, the component will return `null` when document object is undefined.
+ * In practice, testing reveals that this component renders correctly on most SSR'd pages,
+ * but this check serves as an additional safeguard.
+ *
+ * @param skipToId - an optional id of the element to be skipped to, instead of the default <main> tag target.
+ * @returns JSX.Element | null
+ */
+declare const SkipToMain: ({ skipToId }: ISkipToMainProps) => React.JSX.Element | null;
+export default SkipToMain;

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

@@ -0,0 +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 HiddenBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

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

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

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

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

package/dist/components/organisms/Navigation/Navigation.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { INavigationProps } from '../../../types/navigation';
-declare const Navigation: ({ dataNavTop, menuData, onSearch, onLink, crest, className, logoLink, }: INavigationProps) => React.JSX.Element;
+declare const Navigation: ({ dataNavTop, menuData, onSearch, onLink, crest, className, logoLink, skipToId, }: INavigationProps) => React.JSX.Element;
 export default Navigation;