@royaloperahouse/harmonic 0.1.1-c → 0.1.1-d

package/dist/components/Typography/Typography.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IGenericTypographyProps, IHarmonicHeaderProps } from '../../types/typography';
+import '../../styles/GlobalStyles.css';
 import './styles.css';
 export declare const DisplayHeader: ({ children, size, em, color, serif }: IGenericTypographyProps) => React.JSX.Element;
 export declare const HarmonicHeader: ({ children, size, em, color, serif, hierarchy: Tag }: IHarmonicHeaderProps) => React.JSX.Element;

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

@@ -1,3 +1,2 @@
 import { DisplayHeader, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText } from './Typography';
-import TextLinkHarmonic from './TextLink/TextLink';
-export { DisplayHeader, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText, TextLinkHarmonic, };
+export { DisplayHeader, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText, };

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/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;
-  }
-
-  .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;
-  }
-
-  /* Typography Sizes - Mobile */
-  .styles_display__VgnTB {
-    &.styles_large__vqVxY { font-size: 38px; }
-    &.styles_small__e7YDe { font-size: 32px; }
+    --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_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_subtitle__os3DH {
-    &.styles_large__vqVxY { font-size: 17px; line-height: 24px; }
-    &.styles_small__e7YDe { font-size: 14px; line-height: 20px; }
+/* 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);
   }
-
-  .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_color-red__zwTZW {
+    color: var(--harmonic-red);
   }
 
-  .styles_overline__5xGDa {
-    &.styles_large__vqVxY { font-size: 14px; line-height: 17px; }
-    &.styles_small__e7YDe { font-size: 12px; line-height: 14px; }
+  .styles_em__v4FoO {
+    font-style: italic;
   }
+/* ~~~ */
 
-  .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 */
@@ -180,20 +238,9 @@
   font-weight: 500;
   text-transform: uppercase;
   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;
-}
+  @media (max-width: 600px) {
+    font-size: 14px;
+    line-height: 17px;
+  }
+}