Homepage dilemma toggles on mobile

components/jambonz-ui.js

@@ -14,6 +14,11 @@ export function normalizeSubtext(subtext) {
   return subtext;
 }
 
+// Simple method to normalize string as slug
+export function normalizeSlug(key) {
+  return String(key.toLowerCase()).split(' ').join('-');
+}
+
 // Normalize how we listen for mobile media queries
 export function useMobileMedia() {
   const [mobile, setMobile] = useState(false);
@@ -87,8 +92,6 @@ export function Hero({ data, subStyle }) {
     classes[`hero--${subStyle}`] = true;
   }
 
-  data.subtext = normalizeSubtext(data.subtext);
-
   return (
     <div className={classNames(classes)}>
       <div className="wrap hero__wrap">
@@ -96,7 +99,7 @@ export function Hero({ data, subStyle }) {
           <H1>{data.headline}</H1>
         </div>
         <div className="hero__subtext">
-          {data.subtext.map((subtext) => {
+          {normalizeSubtext(data.subtext).map((subtext) => {
             return <H5 key={nanoid()}>{subtext}</H5>;
           })}
         </div>

data/home.yml

@@ -63,6 +63,7 @@ dilemma:
           icon: XCircle
           text: costly to manage over time
     -
+      title: jambonz
       logo: /svg/jambonz.svg
       points:
         -

pages/index.js

@@ -1,8 +1,9 @@
 import { nanoid } from 'nanoid';
 import classNames from 'classnames';
 import Layout from '../components/layout';
-import { Hero, Icon, Button, H6, H5, H2, P, MS, normalizeSubtext } from '../components/jambonz-ui';
+import { Hero, Icon, Button, H6, H5, H2, P, MS, normalizeSubtext, normalizeSlug, useMobileMedia } from '../components/jambonz-ui';
 import { getData } from '../lib/data';
+import { useState, useEffect, useRef } from 'react';
 
 function Tech({data}) {
   return (
@@ -27,7 +28,28 @@ function Tech({data}) {
 }
 
 function Dilemma({data}) {
-  data.subtext = normalizeSubtext(data.subtext);
+  const mobile = useMobileMedia();
+  const initialRef = useRef();
+  const [active, setActive] = useState(null);
+
+  const handleToggle = (e) => {
+    const toggleData = e.target.dataset;
+
+    if (toggleData.key === active) {
+      setActive(null);
+
+    } else {
+      setActive(toggleData.key);
+    }
+  };
+
+  // Make sure jambonz is the default open toggle on mobile...
+  useEffect(() => {
+    if (mobile && !active && !initialRef.current) {
+      initialRef.current = true;
+      setActive('jambonz');
+    }
+  }, [mobile, active, setActive, initialRef]);
 
   return (
     <div className="bg-grey dilemma pad">
@@ -37,7 +59,7 @@ function Dilemma({data}) {
         </div>
         <div className="dilemma__subtext">
           <H5>
-            {data.subtext.map((subtext) => {
+            {normalizeSubtext(data.subtext).map((subtext) => {
               {/* Use dangerouslySetInnerHTML to render inline spans from YAML data */}
               return <div key={nanoid()} dangerouslySetInnerHTML={{ __html: subtext }} />;
             })}
@@ -49,26 +71,33 @@ function Dilemma({data}) {
               'dilemma__table': true,
               'dilemma__table--jambonz': table.logo ? true : false,
             };
+            const slug = normalizeSlug(table.title);
+            const isActiveToggle = (active === slug);
+            const pointsClasses = {
+              'dilemma__table__points': true,
+              'active': isActiveToggle,
+            };
 
             return (
-              <div key={nanoid()} className={classNames(classes)}>
+              <div key={slug} className={classNames(classes)}>
                 <div className="dilemma__table__title">
                   {table.logo ? <img src={table.logo} /> : <P><strong>{table.title}</strong></P>}
+                  <span data-key={slug} className="dilemma__table__toggle" onClick={handleToggle}>
+                    {isActiveToggle ? <Icon name="ChevronUp" /> : <Icon name="ChevronDown" />}
+                  </span>
                 </div>
-                <div className="dilemma__table__points">
+                <div className={classNames(pointsClasses)}>
                   {table.points.map((point) => {
                     const classes = {
                       'dilemma__table__point': true,
                       [point.icon.toLowerCase()]: true,
                     };
 
-                    point.text = normalizeSubtext(point.text);
-
                     return (
                       <div key={nanoid()} className={classNames(classes)}>
                         <Icon name={point.icon} />
                         <MS>
-                          {point.text.map((text) => {
+                          {normalizeSubtext(point.text).map((text) => {
                             return <div key={nanoid()}>{text}</div>;
                           })}
                         </MS>

styles/_homepage.scss

@@ -111,6 +111,10 @@
     }
 
     &__title {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
       img {
         width: 50%;
 
@@ -120,12 +124,36 @@
       }
     }
 
-    &__title,
-    &__point {
-      margin-bottom: 16px;
+    &__toggle {
+      margin-left: auto;
+      display: none;
+      cursor: pointer;
+
+      svg {
+        pointer-events: none;
+      }
+
+      @media (max-width: $width-tablet-2) {
+        display: block;
+      }
+    }
+
+    &__points {
+      margin-top: 16px;
+
+      @media (max-width: $width-tablet-2) {
+        display: none;
+      }
+
+      &.active {
+        @media (max-width: $width-tablet-2) {
+          display: block;
+        }
+      }
     }
 
     &__point {
+      margin-bottom: 16px;
       display: flex;
       align-items: flex-start;
       text-align: left;