Make UI components more reusable -- add more style nuance

components/jambonz-ui.js

@@ -43,43 +43,53 @@ export function MXS({ children }) {
   return <div className="mxs">{children}</div>;
 }
 
-export function Button({children, href, style = 'jambonz', target = '_blank'}) {
+// Extra {props} get passed to the <a> element
+export function Button({ children, href, style = 'fill', subStyle = null, ...props}) {
   const classes = {
     'btn': true,
     [`btn--${style}`]: true,
   };
 
+  if (subStyle) {
+    classes[`btn--${style}--${subStyle}`] = true;
+  }
+
   return (
     <Link href={href}>
-      <a target={target} className={classNames(classes)}>{children}</a>
+      <a {...props} className={classNames(classes)}>{children}</a>
     </Link>
   );
 }
 
-export function Icon({name, size = 24, style = 'inline'}) {
+// Extra {props} get passed to the feather Component
+// See react-feather for all 286 icons available
+// https://github.com/feathericons/react-feather
+export function Icon({name, style = 'inline', subStyle = null, ...props}) {
   const Component = Icons[name];
   const classes = {
     'icon': true,
     [`icon--${style}`]: true,
   };
 
-  // See react-feather for all 286 icons available
-  // https://github.com/feathericons/react-feather
+  if (subStyle) {
+    classes[`icon--${style}--${subStyle}`] = true;
+  }
+
   if (!Component) {
     return null;
   }
 
-  // Circle icon with fill or pill style
+  // Stylized icon
   if (style !== 'inline') {
     return (
       <div className={classNames(classes)}>
-        <Component size={size} />
+        <Component {...props} />
       </div>
     );
   }
 
-  // Inline SVG icon
-  return <Component size={size} />;
+  // Inline icon
+  return <Component {...props} />;
 }
 
 export function Layout({children, title = "jambonz"}) {

components/kitofparts.js

@@ -7,65 +7,99 @@ export default function Kitofparts() {
 
   return (
     <>
+      {/* High-level design information */}
       <div className="wrap padr">
         <div className="pad">
           <img src="/svg/jambonz.svg" width="128" />
+          <MS>Kit of Parts</MS>
         </div>
         <div className="pad">
           <H5>
             <div><strong>docs</strong></div>
             <div>
               <Link href="/docs">
-                <a>nextra docs</a>
+                <a>
+                  <Icon name="Code" />
+                  <span>jambonz nextra docs</span>
+                </a>
               </Link>
             </div>
             <div>&nbsp;</div>
             <div><strong>font</strong></div>
             <div>Objectivity (free, large family—16 styles)</div>
-            <div>&nbsp;</div>
-            <div><strong>specimen</strong></div>
             <div>
-              <Link href="https://www.fontsquirrel.com/fonts/objectivity">
-                <a target="_blank">www.fontsquirrel.com/fonts/objectivity</a>
+              <Link href="https://www.behance.net/gallery/60530395/Objectivity-Free-Font-Family">
+                <a target="_blank">
+                  <span>design</span>
+                  <Icon name="ExternalLink" />
+                </a>
               </Link>
             </div>
             <div>
-              <Link href="https://www.behance.net/gallery/60530395/Objectivity-Free-Font-Family">
-                <a target="_blank">www.behance.net/gallery/60530395/Objectivity-Free-Font-Family</a>
+              <Link href="https://www.fontsquirrel.com/fonts/objectivity">
+                <a target="_blank">
+                  <span>specimen</span>
+                  <Icon name="ExternalLink" />
+                </a>
               </Link>
             </div>
             <div>&nbsp;</div>
             <div><strong>icons</strong></div>
             <div>Feather (free, large set—286 icons)</div>
-            <div>&nbsp;</div>
-            <div><strong>specimen</strong></div>
             <div>
               <Link href="https://feathericons.com">
-                <a target="_blank">feathericons.com</a>
+                <a target="_blank">
+                  <span>specimen</span>
+                  <Icon name="ExternalLink" />
+                </a>
               </Link>
             </div>
             <div>
               <Link href="https://github.com/feathericons/react-feather">
-                <a target="_blank">github.com/feathericons/react-feather</a>
+                <a target="_blank">
+                  <span>react-feather</span>
+                  <Icon name="ExternalLink" />
+                </a>
               </Link>
             </div>
           </H5>
         </div>
-        <div className="wrap-text pad">
-          <H1>{text}</H1>
+      </div>
+      {/* Show black background style */}
+      <div className="pad bg-black">
+        <div className="wrap padr">
+          <div className="wrap-text pad">
+            <H1>{text}</H1>
+          </div>
         </div>
+      </div>
+      <div className="wrap padr">
         <div className="wrap-text pad">
           <H2>{text}</H2>
         </div>
-        <div className="wrap-text pad">
-          <H3>{text}</H3>
+      </div>
+      {/* Show pink background style */}
+      <div className="pad bg-pink">
+        <div className="wrap padr">
+          <div className="wrap-text pad">
+            <H3>{text}</H3>
+          </div>
         </div>
+      </div>
+      <div className="wrap padr">
         <div className="wrap-text pad">
           <H4>{text}</H4>
         </div>
-        <div className="wrap-text pad">
-          <H5>{text}</H5>
+      </div>
+      {/* Show grey background style */}
+      <div className="pad bg-grey">
+        <div className="wrap padr">
+          <div className="wrap-text pad">
+            <H5>{text}</H5>
+          </div>
         </div>
+      </div>
+      <div className="wrap padr">
         <div className="wrap-text pad">
           <H6>{text}</H6>
         </div>
@@ -84,24 +118,35 @@ export default function Kitofparts() {
         <div className="pad">
           <Image src="/images/Jambonz_app_screenshot.png" width={1280 / 2} height={842 / 2} />
         </div>
-        <div className="icons pad">
-          <Icon style="fill" name="Server" />
-          <Icon style="fill" name="PhoneCall" />
-          <Icon style="fill" name="Folder" />
-          <Icon style="fill" name="Cloud" />
-          <Icon style="pill" name="Heart" />
+        <div className="pad">
+          <div className="icons">
+            <Icon style="fill" name="Server" />
+            <Icon style="fill" name="Folder" />
+            <Icon style="fill" name="Cloud" />
+            <Icon style="fill" name="Layers" />
+            <Icon style="fill" name="UserCheck" />
+            <Icon style="fill" name="Lock" />
+            <Icon style="fill" name="ThumbsUp" />
+            <Icon style="fill" subStyle="purple" name="Phone" />
+            <Icon style="fill" subStyle="teal" name="PhoneCall" />
+            <Icon style="fill" subStyle="blue" name="Activity" />
+            <Icon style="pill" name="Heart" />
+          </div>
         </div>
         <div className="pad">
           <img src="/svg/drachtio.svg" width="128" />
         </div>
         <div className="pad">
-          <Button href="#" target="_blank" style="login">Log In</Button>
+          <Button href="#" style="login">Log In</Button>
         </div>
-        <div className="pad">
-          <Button href="#" target="_blank">Sign up for free</Button>
+        <div className="btns pad">
+          <Button href="#">Button</Button>
+          <Button href="#" subStyle="dark">styles...</Button>
         </div>
-        <div className="pad">
-          <Button href="#" target="_blank" style="dark">Sign up for free</Button>
+        <div className="btns pad">
+          <Button href="#" subStyle="purple">Optional</Button>
+          <Button href="#" subStyle="teal">button</Button>
+          <Button href="#" subStyle="blue">styles...</Button>
         </div>
         <div className="btns pad">
           <Button href="https://github.com/jambonz" target="_blank" style="pill">
@@ -113,10 +158,17 @@ export default function Kitofparts() {
             <span>github.com/drachtio</span>
           </Button>
         </div>
+        <div className="pad">
+          <Button href="#" style="pill" subStyle="jambonz">
+            <Icon size={18} name="Send" />
+            <span>Contact us to get started</span>
+          </Button>
+        </div>
       </div>
+      {/* Show jambonz background style */}
       <div className="pad bg-jambonz">
         <div className="wrap padr">
-          <Button href="#" target="_blank" style="light">Sign up for free</Button>
+          <Button href="#" target="_blank" subStyle="light">Footer button...</Button>
         </div>
       </div>
     </>

styles/_colors.scss

@@ -1,6 +1,8 @@
 $black: #000;
 $white: #fff;
+$grey: #f8f8f8;
 $jambonz: #da1c5c;
+$pink: #fff3f6;
 $charcoal: #231f20;
 $purple: #9662b2;
 $teal: #30beb0;

styles/_jambonz-ui.scss

@@ -10,6 +10,19 @@ body {
 
 a {
   color: $jambonz;
+
+  svg, span {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  svg:last-child {
+    margin-left: 8px;
+  }
+
+  svg:first-child {
+    margin-right: 8px;
+  }
 }
 
 strong {
@@ -105,13 +118,27 @@ em {
   border-radius: 30px;
   display: inline-block;
 
-  &--dark {
-    background-color: $charcoal;
-  }
+  &--fill {
+    &--dark {
+      background-color: $charcoal;
+    }
 
-  &--light {
-    background-color: $white;
-    color: $jambonz;
+    &--purple {
+      background-color: $purple;
+    }
+
+    &--teal {
+      background-color: $teal;
+    }
+
+    &--blue {
+      background-color: $blue;
+    }
+
+    &--light {
+      background-color: $white;
+      color: $jambonz;
+    }
   }
 
   &--pill {
@@ -129,6 +156,15 @@ em {
     svg {
       margin-right: 16px;
     }
+
+    &--jambonz {
+      border-color: $jambonz;
+      color: $jambonz;
+
+      svg {
+        stroke: $jambonz;
+      }
+    }
   }
 
   &--login {
@@ -176,6 +212,20 @@ em {
       stroke: $jambonz;
     }
   }
+
+  &--fill {
+    &--purple {
+      background-color: $purple;
+    }
+
+    &--blue {
+      background-color: $blue;
+    }
+
+    &--teal {
+      background-color: $teal;
+    }
+  }
 }
 
 .icons {
@@ -187,12 +237,27 @@ em {
 }
 
 /******************************************************************************
- * Layout
+ * Backgrounds
 *******************************************************************************/
 .bg-jambonz {
   background-color: $jambonz;
+  color: $white;
+}
+
+.bg-black {
+  background-color: $black;
+  color: $white;
 }
 
 .bg-charcoal {
   background-color: $charcoal;
+  color: $white;
+}
+
+.bg-grey {
+  background-color: $grey;
+}
+
+.bg-pink {
+  background-color: $pink;
 }