@royaloperahouse/harmonic 0.1.1-c → 0.1.1

package/dist/components/index.d.ts

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

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

@@ -1,3 +1,3 @@
 import { IImageWithCaptionWrapperProps } from '../../../types/image';
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, IImageWithCaptionWrapperProps, never>;
-export declare const CaptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"figure", any, IImageWithCaptionWrapperProps, never>;
+export declare const CaptionWrapper: import("styled-components").StyledComponent<"figcaption", any, {}, never>;

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

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
-import { IPolicyLinksProps } from '../../../types/footer';
-declare const PolicyLinks: FunctionComponent<IPolicyLinksProps>;
+import React from 'react';
+import { PolicyLinksProps } from '../../../types/footer';
+declare const PolicyLinks: React.FC<PolicyLinksProps>;
 export default PolicyLinks;

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

@@ -1,3 +1 @@
-export declare const PolicyLinksList: import("styled-components").StyledComponent<"ul", any, {}, never>;
-export declare const PolicyLinkItem: import("styled-components").StyledComponent<"li", any, {}, never>;
-export declare const PolicyLink: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const PolicyLinksTextLinkWrapper: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../../../types/types").ITextLinkProps>, any, {}, never>;

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

@@ -10,6 +10,7 @@ import Information from './Information';
 import { PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, PageHeadingCompact } from './PageHeading';
 import Pagination from './Pagination';
 import { PeopleListing, CreditListing } from './PeopleListing';
+import PolicyLinks from './PolicyLinks';
 import PromoWithTags from './PromoWithTags';
 import PromoWithTitle from './PromoWithTitle';
 import RadioGroup from './RadioGroup';
@@ -31,4 +32,4 @@ import AuxiliaryNav from './AuxiliaryNav';
 import PasswordStrength from './PasswordStrength';
 import Table from './Table';
 import VideoWithControls from './VideoWithControls';
-export { Accordion, Accordions, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, ImageWithCaption, Information, MiniCard, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, PasswordStrength, Pagination, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, Quote, StatusBanner, SectionTitle, SearchBar, Select, Select2, Select2Async, Tabs, Table, TextOnly, UpsellCard, VideoWithControls, };
+export { Accordion, Accordions, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, ImageWithCaption, Information, MiniCard, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, PasswordStrength, Pagination, PeopleListing, PolicyLinks, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, Quote, StatusBanner, SectionTitle, SearchBar, Select, Select2, Select2Async, Tabs, Table, TextOnly, UpsellCard, VideoWithControls, };

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

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import React from 'react';
 import { IFooterProps } from '../../../types/footer';
-declare const Footer: FunctionComponent<IFooterProps>;
+declare const Footer: React.FC<IFooterProps>;
 export default Footer;

package/dist/components/organisms/Footer/Footer.style.d.ts

@@ -1,6 +1,6 @@
-export declare const FooterSection: import("styled-components").StyledComponent<"section", any, {}, never>;
+export declare const FooterSection: import("styled-components").StyledComponent<"footer", any, {}, never>;
 export declare const FooterContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PolicyLinksRow: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ContactNewsletterRow: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ArtsLogoRow: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AdditionalInfo: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const PolicyLinksSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SocialAndNewsletterSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LogoAndDescriptionSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NewsletterBodyTextWrapper: import("styled-components").StyledComponent<({ level, children, tag }: import("../../../types/typography").IBodyTextProps) => import("react").JSX.Element, any, {}, never>;

package/dist/harmonic.cjs.development.css

@@ -1,88 +1,39 @@
-/* TEMPORARY SCSS FILE - will relocate when CSS module issue is fixed */
-
+/* Global Styles for Harmonic CSS components */
 :root { 
-  --font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;
-  --font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;
-  --harmonic-red: #F40B0B;
-  --harmonic-black: #000000;
-  --text-link-underline-offset: 4px;
-}
-
-.styles_em__v4FoO {
-  font-style: italic;
-}
-
-/* ~~~~~ Color Classes ~~~~~ */
-.styles_color-black__a05Fo {
-  color: var(--harmonic-black);
-}
-
-.styles_color-red__zwTZW {
-  color: var(--harmonic-red);
-}
-
-/* ~~~~~ Mobile Styles ~~~~~ */
-@media (max-width: 600px) {
-  /* Letter Spacing - Mobile */
-  .styles_display__VgnTB {
-    &.styles_large__vqVxY, &.styles_small__e7YDe {
-      letter-spacing: -1.5px;
-    }
-    &.styles_large__vqVxY.styles_serif__b-ZjM, &.styles_large__vqVxY.styles_em__v4FoO,
-    &.styles_small__e7YDe.styles_serif__b-ZjM, &.styles_small__e7YDe.styles_em__v4FoO {
-      letter-spacing: -0.5px;
-    }
-  }
-
-  .styles_header-small__W-GSS {
-    letter-spacing: -0.75px;
+    --font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;
+    --font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;
+    --harmonic-red: #F40B0B;
+    --harmonic-black: #000000;
+    --text-link-underline-offset: 4px;
   }
 
-  .styles_subtitle__os3DH.styles_small__e7YDe, .styles_bodycopy__uEx9r.styles_medium__WQPZj, .styles_bodycopy__uEx9r.styles_small__e7YDe {
-    letter-spacing: -0.2px;
-  }
 
-  .styles_overline__5xGDa.styles_small__e7YDe {
-    letter-spacing: -0.3px;
+/* TODO: store breakpoints here for use in css components */  
+/* export const breakpoints = {
+    xs: 320,
+    sm: 700,
+    md: 1140,
+    ml: 1280,
+    lg: 1400,
+  }; */
+/* ~~~~~ General Styling Classes ~~~~~ */
+  .styles_color-black__a05Fo {
+    color: var(--harmonic-black);
   }
-
-  /* Typography Sizes - Mobile */
-  .styles_display__VgnTB {
-    &.styles_large__vqVxY { font-size: 38px; }
-    &.styles_small__e7YDe { font-size: 32px; }
+  
+  .styles_color-red__zwTZW {
+    color: var(--harmonic-red);
   }
 
-  .styles_header__UDH-H {
-    &.styles_large__vqVxY { font-size: 28px; line-height: 34px; }
-    &.styles_medium__WQPZj { font-size: 24px; line-height: 28px; }
-    &.styles_small__e7YDe { font-size: 20px; line-height: 26px; }
+  .styles_em__v4FoO {
+    font-style: italic;
   }
+/* ~~~ */
 
-  .styles_subtitle__os3DH {
-    &.styles_large__vqVxY { font-size: 17px; line-height: 24px; }
-    &.styles_small__e7YDe { font-size: 14px; line-height: 20px; }
-  }
-
-  .styles_bodycopy__uEx9r {
-    &.styles_large__vqVxY { font-size: 17px; line-height: 24px; }
-    &.styles_medium__WQPZj { font-size: 14px; line-height: 20px; }
-    &.styles_small__e7YDe { font-size: 11px; line-height: 16px; }
-  }
-
-  .styles_overline__5xGDa {
-    &.styles_large__vqVxY { font-size: 14px; line-height: 17px; }
-    &.styles_small__e7YDe { font-size: 12px; line-height: 14px; }
-  }
-
-  .styles_captiontext__-TA6x, .styles_navigationtext__qnnIo, .styles_textlinkharmonic__S77lE {
-    font-size: 14px;
-    line-height: 17px;
-  }
-}
-
-/* ~~~~~ Desktop Styles ~~~~~ */
+/* Display Headers */
 .styles_display__VgnTB {
   font-family: var(--font-family-sans);
+
   &.styles_large__vqVxY {
     font-size: 96px;
     letter-spacing: -5px;
@@ -98,8 +49,28 @@
     font-family: var(--font-family-serif);
     font-weight: 500;
   }
+
+  @media (max-width: 600px) {
+    &.styles_large__vqVxY {
+      font-size: 38px;
+      letter-spacing: -1.5px;  
+    }
+    
+    &.styles_small__e7YDe {
+      font-size: 32px;
+      letter-spacing: -1.5px;
+    }
+
+    &.styles_large__vqVxY.styles_serif__b-ZjM, 
+    &.styles_large__vqVxY.styles_em__v4FoO,
+    &.styles_small__e7YDe.styles_serif__b-ZjM,
+    &.styles_small__e7YDe.styles_em__v4FoO {
+      letter-spacing: -0.5px;
+    }
+  }
 }
 
+/* Headers */
 .styles_header__UDH-H {
   font-family: var(--font-family-sans);
   font-weight: 500;
@@ -126,6 +97,26 @@
     font-family: var(--font-family-serif);
     font-weight: 500;
   }
+
+  @media (max-width: 600px) {
+    &.styles_large__vqVxY {
+      font-size: 28px;
+      letter-spacing: -1.5px;
+      line-height: 34px;
+    }
+    
+    &.styles_medium__WQPZj {
+      font-size: 24px;
+      letter-spacing: -1px;
+      line-height: 28px;
+    }
+    
+    &.styles_small__e7YDe {
+      font-size: 20px;
+      letter-spacing: -0.75px;
+      line-height: 26px;
+    }
+  }
 }
 
 /* Subtitle */
@@ -133,18 +124,69 @@
   font-family: var(--font-family-sans);
   font-weight: 500;
 
-  &.styles_large__vqVxY { font-size: 19px; line-height: 26px; }
-  &.styles_small__e7YDe { font-size: 17px; line-height: 24px; }
+  &.styles_large__vqVxY {
+    font-size: 19px;
+    line-height: 26px;
+  }
+
+  &.styles_small__e7YDe {
+    font-size: 17px;
+    line-height: 24px;
+  }
+
+  @media (max-width: 600px) {
+    &.styles_large__vqVxY {
+      font-size: 17px;
+      line-height: 24px;
+    }
+    
+    &.styles_small__e7YDe {
+      font-size: 14px;
+      letter-spacing: -0.2px;
+      line-height: 20px;
+    }
+  }
 }
 
 /* Body Copy */
 .styles_bodycopy__uEx9r {
   font-family: var(--font-family-sans);
   font-weight: 400;
+  letter-spacing: -0.5px;
+
+  &.styles_large__vqVxY {
+    font-size: 19px;
+    line-height: 26px;
+  }
+
+  &.styles_medium__WQPZj {
+    font-size: 17px;
+    line-height: 24px;
+  }
+
+  &.styles_small__e7YDe {
+    font-size: 14px;
+    line-height: 20px;
+  }
 
-  &.styles_large__vqVxY { font-size: 19px; line-height: 26px; }
-  &.styles_medium__WQPZj { font-size: 17px; line-height: 24px; }
-  &.styles_small__e7YDe { font-size: 14px; line-height: 20px; }
+  @media (max-width: 600px) {
+    &.styles_large__vqVxY {
+      font-size: 17px;
+      line-height: 24px;
+    }
+    
+    &.styles_medium__WQPZj {
+      font-size: 14px;
+      letter-spacing: -0.2px;
+      line-height: 20px;
+    }
+    
+    &.styles_small__e7YDe {
+      font-size: 11px;
+      letter-spacing: -0.2px;
+      line-height: 16px;
+    }
+  }
 }
 
 /* Overline */
@@ -153,8 +195,19 @@
   font-weight: 500;
   text-transform: uppercase;
 
-  &.styles_large__vqVxY { font-size: 14px; line-height: 18px; letter-spacing: -0.3px; }
-  &.styles_small__e7YDe { font-size: 12px; line-height: 14px; letter-spacing: -0.2px; }
+  &.styles_large__vqVxY { font-size: 14px; line-height: 18px; letter-spacing: 0.3px; }
+  &.styles_small__e7YDe { font-size: 12px; line-height: 14px; letter-spacing: 0.2px; }
+
+  @media (max-width: 600px) {
+    &.styles_large__vqVxY {
+      line-height: 17px;
+    }
+    
+    &.styles_small__e7YDe {
+      letter-spacing: 0.3px;
+      line-height: 14px;
+    }
+  }
 }
 
 /* Button Text */
@@ -171,6 +224,11 @@
   font-weight: 400;
   font-style: italic;
   line-height: 24px;
+
+  @media (max-width: 600px) {
+    font-size: 14px;
+    line-height: 17px;
+  }    
 }
 
 /* Navigation Text */
@@ -179,21 +237,6 @@
   font-size: 17px;
   font-weight: 500;
   text-transform: uppercase;
+  letter-spacing: 0.4px;
   line-height: 17px;
-}
-
-/* Text Link */
-.styles_textlinkharmonic__S77lE {
-  font-family: var(--font-family-sans);
-  font-weight: 500;
-  text-transform: uppercase;
-  font-size: 17px;
-  line-height: 14px;
-  border-bottom: solid 1px;
-  width: -moz-fit-content;
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  text-decoration: none;
-}
+}