feat: removed the giant fucking image & fixed hero component for osi

NoisyTrumpet · Feb 24, 2021 · aa8de2c · aa8de2c
1 parent 637c720
commit aa8de2c
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 71 deletions.
diff --git a/.jest-test-results.json b/.jest-test-results.json
diff --git a/src/ContentComponents/Hero/Fragments/Headline.js b/src/ContentComponents/Hero/Fragments/Headline.js
@@ -1,19 +1,19 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useMediaQuery } from 'react-responsive';
-import { Typography } from '../../../components/Typography';
+import React from "react";
+import PropTypes from "prop-types";
+import { useMediaQuery } from "react-responsive";
+import { Typography } from "../../../components/Typography";
 
 const Headline = ({ text1, text2, text3, color, state, headlineTag }) => {
-  const isMobile = useMediaQuery({ query: '(max-width: 767px)' });
+  const isMobile = useMediaQuery({ query: "(max-width: 767px)" });
   const variantValue = () => {
     if (isMobile) {
-      return 'headline-4';
+      return "headline-4";
     }
-    return 'headline-3';
+    return "headline-1";
   };
   return (
     <Typography
-      variant={state ? 'body-medium' : variantValue()}
+      variant={state ? "body-medium" : variantValue()}
       addClass="typoOverride"
       htmlTagOverride={headlineTag}
       color={color}
@@ -34,11 +34,11 @@ const Headline = ({ text1, text2, text3, color, state, headlineTag }) => {
 };
 
 Headline.defaultProps = {
-  text1: '',
-  text2: '',
-  text3: '',
-  color: '',
-  headlineTag: 'h1',
+  text1: "",
+  text2: "",
+  text3: "",
+  color: "",
+  headlineTag: "h1"
 };
 
 Headline.propTypes = {
@@ -47,7 +47,7 @@ Headline.propTypes = {
   text3: PropTypes.string,
   color: PropTypes.string,
   state: PropTypes.bool,
-  headlineTag: PropTypes.oneOf(['h1', 'h2', 'p']),
+  headlineTag: PropTypes.oneOf(["h1", "h2", "p"])
 };
 
 export default Headline;
diff --git a/src/ContentComponents/Hero/Hero.js b/src/ContentComponents/Hero/Hero.js
@@ -10,7 +10,6 @@ import { VideoPlayer } from "../../components/Media/VideoPlayer";
 import CTA from "./Fragments/CTA";
 import Headline from "./Fragments/Headline";
 import { Typography } from "../../components/Typography";
-import { Infographic, HeroSVG } from "../../assets/svg";
 
 const Hero = ({
   // layout
@@ -29,6 +28,8 @@ const Hero = ({
   // Body
   bodySubtitle,
   bodySubtitleWidth,
+  // Osi Hero SVG
+  heroSVG,
   // Text
   textAlign,
   textPlacementDesktop,
@@ -170,6 +171,7 @@ const Hero = ({
 
   const classes = classNames(
     "hero",
+    { "osi-hero": presetLayout === "50/50, Osi" },
     { hero50: presetLayoutDetails[presetLayout].layout === "50/50" },
     {
       "hero-full": presetLayoutDetails[presetLayout].layout === "Full"
@@ -308,9 +310,9 @@ const Hero = ({
           <div className={ctaClasses}>
             {presetLayout === "50/50, Osi" && (
               <InlineSVG
-                path={Infographic}
+                path={heroSVG}
                 className="inline-svg infogrpahic-svg"
-                title={imageAltText}
+                title={headline1}
               />
             )}
             {primaryCTAText && primaryCTALink && (
@@ -342,25 +344,16 @@ const Hero = ({
         {video ? (
           <VideoPlayer isDecoration videoSrc={video} />
         ) : (
-          presetLayout !== "50/50, Osi" && (
-            <Image src={image.imageDesktop} alt={imageAltText}>
-              <Image.Source
-                media="(max-width:767px)"
-                srcSet={image.imageMobile}
-              />
-              <Image.Source
-                media="(max-width:1024px)"
-                srcSet={image.imageTablet}
-              />
-            </Image>
-          )
-        )}
-        {presetLayout === "50/50, Osi" && isDesktop && (
-          <InlineSVG
-            path={HeroSVG}
-            className={`hero-svg ${isDesktop && "hero-desktop-class"}`}
-            title={imageAltText}
-          />
+          <Image src={image.imageDesktop} alt={imageAltText}>
+            <Image.Source
+              media="(max-width:767px)"
+              srcSet={image.imageMobile}
+            />
+            <Image.Source
+              media="(max-width:1024px)"
+              srcSet={image.imageTablet}
+            />
+          </Image>
         )}
       </div>
       {wave && (
@@ -412,6 +405,7 @@ Hero.propTypes = {
     "Bottom-center",
     "Bottom-right"
   ]),
+  heroSVG: PropTypes.string,
   textPlacementMobile: PropTypes.oneOf(["Top", "Center", "Bottom"]),
   textShadow: PropTypes.bool,
   textBackgroundColor: PropTypes.oneOf([

diff --git a/src/ContentComponents/Hero/Hero.scss b/src/ContentComponents/Hero/Hero.scss
@@ -7,6 +7,14 @@
   position: relative;
   overflow-x: hidden;
 
+  &.osi-hero {
+    @include media($mq-mobile) {
+      .image {
+        display: none;
+      }
+    }
+  }
+
   .hero-svg {
     max-width: 100%;
     position: absolute;
@@ -19,7 +27,6 @@
     }
   }
 
-
   .body-sub {
     padding: 0 $space-24;
     margin-bottom: $space-32;
@@ -34,7 +41,6 @@
     max-width: 100%;
   }
 
-
   &.no-sub {
     .content {
       .typoWrapper {
@@ -54,7 +60,7 @@
   }
 
   .tint {
-    background-color: rgba(96, 64, 153, 0.3)
+    background-color: rgba(96, 64, 153, 0.3);
   }
 
   .typoWrapper {
@@ -79,7 +85,16 @@
 
     &.max {
       align-items: center;
-      max-width: rem(405px);
+      max-width: 100%;
+      @include media($mq-tablet-up) {
+        .typography {
+          line-height: 60px;
+        }
+      }
+
+      .inline-svg {
+        max-width: rem(405px);
+      }
     }
   }
 
@@ -168,9 +183,8 @@
 
   // // Safari Grid height fix
   /* Safari 10.1+ (alternate method) */
-  @media not all and (min-resolution:.001dpcm) {
-    @supports (-webkit-appearance:none) {
-
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) {
       &.hero50 {
         display: flex;
 
@@ -205,15 +219,11 @@
 
   // Default Hero 50/50
   &.hero50 {
-
-
-
     @include media($mq-mobile) {
       grid-template-rows: 1fr;
     }
 
     .image50 {
-
       @include media($mq-mobile) {
         width: 100%;
         order: 1;
@@ -313,7 +323,6 @@
         place-items: center;
         width: max-content;
 
-
         .ctaButton {
           padding: 0;
           width: max-content;
@@ -326,8 +335,6 @@
     }
   }
 
-
-
   //  Default Hero Full
   &.hero-full {
     display: grid;
@@ -340,15 +347,12 @@
 
     // Full Left
     &.hero-full-left {
-
       .content {
         @include media($mq-mobile) {
           padding-top: $space-48;
         }
       }
 
-
-
       .typoWrapper {
         width: 50%;
         display: grid;
@@ -365,7 +369,6 @@
 
         @include media($mq-mobile) {
           width: 100%;
-
         }
 
         .cta-wrapper {
@@ -394,16 +397,13 @@
       }
     }
 
-
-
     .typoWrapper {
       width: 50%;
       display: grid;
       place-items: center;
 
       @include media($mq-mobile) {
         width: 100%;
-
       }
 
       .typography-headline:last-of-type {
@@ -433,7 +433,6 @@
     }
   }
 
-
   // Headline Styles
   .typoOverride {
     line-height: $space-40;
@@ -453,4 +452,4 @@
       }
     }
   }
-}
+}
diff --git a/src/ContentComponents/Hero/Hero.stories.js b/src/ContentComponents/Hero/Hero.stories.js
@@ -3,7 +3,7 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import { withSmartKnobs } from "storybook-addon-smart-knobs";
 import { Hero } from "./";
-// import heroSVG from "../../../conf/storybook/images/hero-headline.svg";
+import { InfoGraph } from "../../assets/svg";
 
 const defaultImgSrc = {
   imageDesktop: "https://picsum.photos/645/640",
@@ -120,10 +120,13 @@ storiesOf("Content Components | Hero", module)
   .add("OsiLife Splash Hero", () => (
     <div className="sb-no-padding">
       <Hero
-        presetLayout="50/50, Osi"
+        image={defaultImgSrc}
+        heroSVG={InfoGraph}
+        headlineFontStyle="h1"
         imageAltText="Test Alt Text"
+        presetLayout="50/50, Osi"
         headline1="Remote patient monitoring technology with a human touch"
-        bodySubtitleWidth
+        bodySubtitleWidth="false"
         bodySubtitle=""
       />
     </div>

diff --git a/src/assets/svg/hero.svg b/src/assets/svg/hero.svg
diff --git a/src/assets/svg/index.js b/src/assets/svg/index.js
@@ -1,9 +1,6 @@
 import AccentCircle from "./accent-circle.svg";
 import DesktopModalCurveBottom from "./desktop-modal-curve-bottom.svg";
 import DesktopModalCurveTop from "./desktop-modal-curve-top.svg";
-
-import Infographic from "./infographic.svg";
-
 import LogoHoriz from "./logo_horiz.svg";
 import LogoHorizBlack from "./logo-horiz_black.svg";
 import LogoHorizWhite from "./logo-horiz_white.svg";
@@ -33,18 +30,16 @@ import LogoTaglineBlack from "./logo-tagline-black.svg";
 import LogoTaglineWhite from "./logo-tagline-white.svg";
 import LogoTaglineBlue from "./logo-tagline-blue.svg";
 import LogoTaglineOrange from "./logo-tagline-orange.svg";
-
+import InfoGraph from "./infographic.svg";
 import MobileModalCurveTop from "./mobile-modal-curve-top.svg";
 import TabBrushStroke from "./tabs-brush-stroke.svg";
 import WaveSVG from "./wave.svg";
-import HeroSVG from "./hero.svg";
 
 export {
   AccentCircle,
   DesktopModalCurveBottom,
   DesktopModalCurveTop,
-  HeroSVG,
-  Infographic,
+  InfoGraph,
   LogoHoriz,
   LogoHorizBlack,
   LogoHorizWhite,