Hero altStyle and children support, notes on BEM

src/components/jambonz-ui.js

@@ -110,7 +110,7 @@ export function Latest({ data }) {
   );
 }
 
-export function Hero({ data, subStyle }) {
+export function Hero({ data = {}, subStyle, altStyle, children }) {
   const classes = {
     'hero': true,
     'pad': true,
@@ -120,24 +120,33 @@ export function Hero({ data, subStyle }) {
     classes[`hero--${subStyle}`] = true;
   }
 
+  if (altStyle) {
+    classes[`hero--${altStyle}`] = true;
+  }
+
   return (
     <section className={classNames(classes)}>
       <div className="wrap hero__wrap">
-        <div className="hero__headline">
-          <H1>{data.headline}</H1>
-        </div>
-        <div className="hero__subtext">
-          <H2 className="h5">
-            {normalizeSubtext(data.subtext).map((subtext) => {
-              return <div key={nanoid()}>{subtext}</div>;
-            })}
-          </H2>
-        </div>
+        {data.headline && (
+          <div className="hero__headline">
+            <H1>{data.headline}</H1>
+          </div>
+        )}
+        {data.subtext && (
+          <div className="hero__subtext">
+            <H2 className="h5">
+              {normalizeSubtext(data.subtext).map((subtext) => {
+                return <div key={nanoid()}>{subtext}</div>;
+              })}
+            </H2>
+          </div>
+        )}
         {data.cta && (
           <div className="hero__cta">
             <Button href={data.url} target="_blank">{data.cta}</Button>
           </div>
         )}
+        {children}
       </div>
     </section>
   );

src/styles/_layout.scss

@@ -140,11 +140,6 @@
   &--pricing {
     padding-bottom: 0;
 
-    .hero__wrap {
-      position: relative;
-      z-index: 2;
-    }
-
     .hero__subtext {
       max-width: 770px;
     }
@@ -154,6 +149,28 @@
     padding-bottom: 16px;
   }
 
+  &--pink {
+    position: relative;
+
+    .hero__wrap {
+      position: relative;
+      z-index: 2;
+    }
+
+    &:before {
+      content: '';
+      background-color: $pink;
+      width: 100%;
+      height: calc(100% + #{$navi-height});
+      transform: translateY(-#{$navi-height});
+      z-index: 1;
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+  }
+
   &__wrap {
     @include flex-cols();
   }

src/styles/_navi.scss

@@ -1,5 +1,6 @@
 .navi {
-  padding: 16px 0;
+  height: $navi-height;
+  display: flex;
   position: relative;
   z-index: $navi-index;
 

src/styles/_vars.scss

@@ -60,7 +60,7 @@ $icon-size-3: $h3-size;
  * Sizes
 *******************************************************************************/
 $navi-index: 999;
-$navi-height: 75px;
+$navi-height: 76px;
 $width-max: 1440px;
 $width-tablet-1: 1024px;
 $width-tablet-2: 768px;