Hero altStyle and children support, notes on BEM

README.md

@@ -64,6 +64,10 @@ This app is being composed in the manor of `module > component > element`, where
 
 You can view examples of the Jambonz UI component elements on this page [here](https://jambonz.org/jambonz-ui).
 
+### Jambonz Styling
+
+We are using the [BEM](http://getbem.com/) style for our CSS/SASS system. Please review current implementations in `src/styles` and take the time to understand the BEM style in order to properly name and design your components styling.
+
 ### Jambonz Typography
 
 You should always use the reusable components from the `jambonz-ui` component library. These typographic components implement our type-scale for our design system. When styling pages in which we want to adjust or tweak the type-scale you should always use the `mixins` provided in the SASS. This ensures when we decide to break out of our standard type-scale implementation for any given element(s) we retain a harmonious nature to our type sizing as it retains its responsive nature provided by the `mixins`. A perfect example of how we have already done this is for the `docs` page(s) wherein we've chosen to have the `h1` element implement the `h2()` mixin and likewise the `h2` element to implement the `h3()` mixin. We even have the `li` element(s) implementing the `ms()` mixin.

pages/jambonz-ui.js

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 
 import Layout from '../src/components/layout';
-import { P, M, MS, MXS, H1, H2, H3, H4, H5, H6, Button, Icon } from '../src/components/jambonz-ui';
+import { P, M, MS, MXS, H1, H2, H3, H4, H5, H6, Button, Icon, Hero } from '../src/components/jambonz-ui';
 import { getData } from '../src/lib/data';
 
 export default function JambonzUI({ data }) {
@@ -11,7 +11,7 @@ export default function JambonzUI({ data }) {
     <Layout siteData={data.site}>
       <div className="jambonz-ui">
         {/* High-level design information */}
-        <div className="hero pad">
+        <Hero subStyle="jambonz-ui" altStyle="pink">
           <div className="wrap">
             <H1>
               <div>Jambonz UI</div>
@@ -57,7 +57,7 @@ export default function JambonzUI({ data }) {
               </div>
             </H5>
           </div>
-        </div>
+        </Hero>
         {/* Show black background style */}
         <div className="pad bg-black">
           <div className="wrap">

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;