@royaloperahouse/harmonic 0.1.1-b-test → 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/atoms/Typography/Typography.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Typography.css';
 import { IAltHeaderProps, IBodyTextProps, IHeaderProps, IOverlineProps, IStyledTag, ISubtitleProps } from '../../../types/typography';
 export declare const StyledTag: ({ tag, typography, children, level }: IStyledTag) => React.JSX.Element;
 export declare const AltHeader: ({ semanticLevel, level, children }: IAltHeaderProps) => React.JSX.Element;

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,275 +1,216 @@
-/* TEMPORARY CSS 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;
-}
-
-/* ~~~~~ Color Classes ~~~~~ */
-.styles_color-black__a05Fo {
-  color: var(--harmonic-black);
-}
-
-.styles_color-red__zwTZW {
-  color: var(--harmonic-red)
-}
-
-
-/* ~~~~~ Mobile ~~~~~ */
-
-@media (max-width: 600px) {
-
-  /* ~~~ Letter Spacing - Mobile ~~~ */
-  .styles_display__VgnTB.styles_large__vqVxY, .styles_display__VgnTB.styles_small__e7YDe {
-    letter-spacing: -1.5px;
-  }
-
-  .styles_header-small__W-GSS {
-    letter-spacing: -0.75px;
   }
 
-  .styles_display__VgnTB.styles_large__vqVxY.styles_serif__b-ZjM, .styles_display__VgnTB.styles_large__vqVxY.styles_em__v4FoO, .styles_display__VgnTB.styles_small__e7YDe.styles_serif__b-ZjM, .styles_display__VgnTB.styles_small__e7YDe.styles_em__v4FoO, .styles_header__UDH-H.styles_small__e7YDe.styles_serif__b-ZjM, .styles_header__UDH-H.styles_small__e7YDe.styles_em__v4FoO, .styles_captiontext__-TA6x {
-    letter-spacing: -0.5px;
-  }
 
-  .styles_subtitle__os3DH.styles_small__e7YDe, .styles_bodycopy__uEx9r.styles_medium__WQPZj, .styles_bodycopy__uEx9r.styles_small__e7YDe {
-    letter-spacing: -0.2px;
+/* 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_overline__5xGDa.styles_small__e7YDe {
-    letter-spacing: -0.3px;
-  }
-
-  /* Display */
-  .styles_display__VgnTB.styles_large__vqVxY {
-    font-size: 38px;
+  
+  .styles_color-red__zwTZW {
+    color: var(--harmonic-red);
   }
 
-  .styles_display__VgnTB.styles_small__e7YDe {
-    font-size: 32px;
+  .styles_em__v4FoO {
+    font-style: italic;
   }
+/* ~~~ */
 
-  /* Header */
-  .styles_header__UDH-H.styles_large__vqVxY {
-    font-size: 28px;
-    line-height: 34px;
-  }
+/* Display Headers */
+.styles_display__VgnTB {
+  font-family: var(--font-family-sans);
 
-  .styles_header__UDH-H.styles_medium__WQPZj {
-    font-size: 24px;
-    line-height: 28px;
+  &.styles_large__vqVxY {
+    font-size: 96px;
+    letter-spacing: -5px;
   }
 
-  .styles_header__UDH-H.styles_small__e7YDe {
-    font-size: 20px;
-    line-height: 26px;
+  &.styles_small__e7YDe {
+    font-size: 68px;
+    letter-spacing: -3px;
+    font-weight: 500;
   }
 
-  /* Subtitle */
-  .styles_subtitle__os3DH.styles_large__vqVxY {
-    font-size: 17px;
-    line-height: 24px;
+  &.styles_serif__b-ZjM, &.styles_em__v4FoO {
+    font-family: var(--font-family-serif);
+    font-weight: 500;
   }
 
-  .styles_subtitle__os3DH.styles_small__e7YDe {
-    font-size: 14px;
-    line-height: 20px;
-  }
+  @media (max-width: 600px) {
+    &.styles_large__vqVxY {
+      font-size: 38px;
+      letter-spacing: -1.5px;  
+    }
+    
+    &.styles_small__e7YDe {
+      font-size: 32px;
+      letter-spacing: -1.5px;
+    }
 
-  /* Body Copy */
-  .styles_bodycopy__uEx9r.styles_large__vqVxY {
-    font-size: 17px;
-    line-height: 24px;
+    &.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_bodycopy__uEx9r.styles_medium__WQPZj {
-    font-size: 14px;
-    line-height: 20px;
-  }
+/* Headers */
+.styles_header__UDH-H {
+  font-family: var(--font-family-sans);
+  font-weight: 500;
 
-  .styles_bodycopy__uEx9r.styles_small__e7YDe {
-    font-size: 11px;
-    line-height: 16px;
+  &.styles_large__vqVxY {
+    font-size: 44px;
+    line-height: 48px;
+    letter-spacing: -1.5px;
   }
 
-  /* Overline */
-  .styles_overline__5xGDa.styles_large__vqVxY {
-    font-size: 14px;
-    line-height: 17px;
-   }
-  
-  .styles_overline__5xGDa.styles_small__e7YDe {
-   font-size: 12px;
-   line-height: 14px;
+  &.styles_medium__WQPZj {
+    font-size: 34px;
+    line-height: 40px;
+    letter-spacing: -1.5px;
   }
 
-  /* Caption */
-  .styles_captiontext__-TA6x {
-    font-size: 14px;
-    line-height: 17px;
+  &.styles_small__e7YDe {
+    font-size: 26px;
+    line-height: 32px;
+    letter-spacing: -0.5px;
   }
 
-  /* Navigation Text */
-  .styles_navigationtext__qnnIo {
-    font-size: 14px;
-    line-height: 17px;
+  &.styles_serif__b-ZjM, &.styles_em__v4FoO {
+    font-family: var(--font-family-serif);
+    font-weight: 500;
   }
 
-  /* Text Link */
-  .styles_textlinkharmonic__S77lE {
-    font-size: 14px;
-    line-height: 14px;
+  @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;
+    }
   }
 }
 
-
-/* ~~~~~ Desktop ~~~~~~*/
-
-/* ~~~ Letter Spacing - Desktop ~~~ */
-.styles_display__VgnTB.styles_large__vqVxY {
-  letter-spacing: -5px;
-}
-
-.styles_header__UDH-H.styles_large__vqVxY {
-  letter-spacing: -1.5px;
-}
-
-.styles_header__UDH-H.styles_medium__WQPZj {
-  letter-spacing: -1.5px;
-}
-
-.styles_display__VgnTB.styles_large__vqVxY.styles_serif__b-ZjM, .styles_display__VgnTB.styles_large__vqVxY.styles_em__v4FoO, .styles_display__VgnTB.styles_small__e7YDe {
-  letter-spacing: -3px; 
-}
-
-.styles_display__VgnTB.styles_small__e7YDe.styles_serif__b-ZjM, .styles_display__VgnTB.styles_small__e7YDe.styles_em__v4FoO {
-  letter-spacing: -2px;
-}
-
-.styles_header__UDH-H.styles_large__vqVxY.styles_serif__b-ZjM, .styles_header__UDH-H.styles_large__vqVxY.styles_em__v4FoO, .styles_header__UDH-H.styles_medium__WQPZj.styles_serif__b-ZjM, .styles_header__UDH-H.styles_medium__WQPZj.styles_em__v4FoO, .styles_header__UDH-H.styles_small__e7YDe, .styles_header__UDH-H.styles_small__e7YDe.styles_serif__b-ZjM, .styles_header__UDH-H.styles_small__e7YDe.styles_em__v4FoO, .styles_subtitle__os3DH, .styles_bodycopy__uEx9r, .styles_buttontext__UPumF, .styles_captiontext__-TA6x, .styles_navigationtext__qnnIo, .styles_textlinkharmonic__S77lE {
-  letter-spacing: -0.5px;
-}
-
-.styles_overline-large__nRJSl {
-  letter-spacing: -0.3px;
-}
-
-.styles_overline-small__iF6Pd {
-  letter-spacing: -0.2px;
-}
-
-
-/* ~~~ Display Headers - 1 (Large) , 2 (Small) ~~~ */
-.styles_display__VgnTB {
-  font-family: var(--font-family-sans);
-  font-weight: 700;
-}
-
-.styles_display__VgnTB em,
-.styles_display__VgnTB.styles_serif__b-ZjM {
-  font-family: var(--font-family-serif);
-  font-weight: 500;
-}
-
-.styles_display__VgnTB.styles_large__vqVxY {
-  font-size: 96px;
-}
-
-.styles_display__VgnTB.styles_small__e7YDe {
-  font-size: 68px;
-  font-weight: 500;
-}
-
-
-/* ~~~ Header - 1 (Large) , 2 (Medium) , 3 (Small) ~~~ */
-.styles_header__UDH-H {
-  font-family: var(--font-family-sans);
-  font-weight: 500;
-}
-
-.styles_header__UDH-H em,
-.styles_header__UDH-H.styles_serif__b-ZjM {
-  font-family: var(--font-family-serif);
-  font-weight: 500;
-}
-
-.styles_header__UDH-H.styles_large__vqVxY {
-  font-size: 44px;
-  line-height: 48px;
-}
-
-.styles_header__UDH-H.styles_medium__WQPZj {
-  font-size: 34px;
-  line-height: 40px;
-}
-
-.styles_header__UDH-H.styles_small__e7YDe {
-  font-size: 26px;
-  line-height: 32px;
-}
-
-
-/* ~~~ Subtitle ~~~ */
+/* Subtitle */
 .styles_subtitle__os3DH {
   font-family: var(--font-family-sans);
   font-weight: 500;
-}
 
-.styles_subtitle__os3DH.styles_large__vqVxY {
-  font-size: 19px;
-  line-height: 26px;
-}
+  &.styles_large__vqVxY {
+    font-size: 19px;
+    line-height: 26px;
+  }
 
-.styles_subtitle__os3DH.styles_small__e7YDe {
-  font-size: 17px;
-  line-height: 24px;
-}
+  &.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 ~~~ */
+/* Body Copy */
 .styles_bodycopy__uEx9r {
   font-family: var(--font-family-sans);
   font-weight: 400;
-}
+  letter-spacing: -0.5px;
 
-.styles_bodycopy__uEx9r.styles_large__vqVxY {
-  font-size: 19px;
-  line-height: 26px;
-}
+  &.styles_large__vqVxY {
+    font-size: 19px;
+    line-height: 26px;
+  }
 
-.styles_bodycopy__uEx9r.styles_medium__WQPZj {
-  font-size: 17px;
-  line-height: 24px;
-}
+  &.styles_medium__WQPZj {
+    font-size: 17px;
+    line-height: 24px;
+  }
 
-.styles_bodycopy__uEx9r.styles_small__e7YDe {
-  font-size: 14px;
-  line-height: 20px;
-}
+  &.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 ~~~ */
+/* Overline */
 .styles_overline__5xGDa {
   font-family: var(--font-family-sans);
   font-weight: 500;
   text-transform: uppercase;
-}
 
-.styles_overline__5xGDa.styles_large__vqVxY {
-  font-size: 14px;
-  line-height: 18px;
- }
+  &.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_overline__5xGDa.styles_small__e7YDe {
- font-size: 12px;
- line-height: 14px;
+  @media (max-width: 600px) {
+    &.styles_large__vqVxY {
+      line-height: 17px;
+    }
+    
+    &.styles_small__e7YDe {
+      letter-spacing: 0.3px;
+      line-height: 14px;
+    }
+  }
 }
 
-
-/* ~~~ Button text ~~~ */
+/* Button Text */
 .styles_buttontext__UPumF {
   font-family: var(--font-family-sans);
   font-weight: 400;
@@ -277,44 +218,29 @@
   line-height: 20px;
 }
 
-
-/* ~~~ Caption text ~~~ */
+/* Caption Text */
 .styles_captiontext__-TA6x {
   font-size: 17px;
   font-weight: 400;
   font-style: italic;
   line-height: 24px;
-}
 
+  @media (max-width: 600px) {
+    font-size: 14px;
+    line-height: 17px;
+  }    
+}
 
-/* ~~~ Navigation text ~~~ */
+/* Navigation Text */
 .styles_navigationtext__qnnIo {
   font-family: var(--font-family-sans);
   font-size: 17px;
   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;
-  border-bottom: solid 1px;
-  width: -moz-fit-content;
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  text-decoration: none;
-  line-height: 14px;
-}
-
-/* Typography.css */
-.Typography_test__1llmb {
-  /* Add your styles here */
-  color: red!important;
+  @media (max-width: 600px) {
+    font-size: 14px;
+    line-height: 17px;
+  }
 }