Add button component

gulpfile.babel.js

@@ -123,6 +123,7 @@ gulp.task('hbs', () => {
         bustCache: true,
         helpers: [
           './src/hbs/helpers/repeat.js',
+          './src/hbs/helpers/svg-icon.js',
           './node_modules/handlebars-helpers/lib/fs.js',
           './node_modules/handlebars-helpers/lib/comparison.js',
           './node_modules/handlebars-helpers/lib/collection.js',

package-lock.json

@@ -10301,6 +10301,15 @@
         "es5-ext": "0.10.37"
       }
     },
+    "ltx": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/ltx/-/ltx-2.7.1.tgz",
+      "integrity": "sha1-Dly9y1vxeM+ngx6kHcMj2XQiMVo=",
+      "dev": true,
+      "requires": {
+        "inherits": "2.0.3"
+      }
+    },
     "make-dir": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.1.0.tgz",

package.json

@@ -51,6 +51,7 @@
     "handlebars-helper-repeat": "^0.3.1",
     "handlebars-helpers": "^0.7.5",
     "handlebars-layouts": "^3.1.4",
+    "ltx": "^2.7.1",
     "opn": "^4.0.2",
     "rollupify": "^0.3.5",
     "sass-module-importer": "^1.4.0",

src/hbs/helpers/svg-icon.js

@@ -0,0 +1,32 @@
+import fs from 'fs';
+import path from 'path';
+import ltx from 'ltx';
+
+const nameToModule = {};
+const cache = {};
+
+function parse(xml) {
+  const svg = ltx.parse(xml);
+  if (svg.name !== 'svg') {
+    throw new TypeError('Input must be an SVG');
+  }
+
+  delete svg.attrs.xmlns;
+  delete svg.attrs['xmlns:xlink'];
+
+  return svg;
+}
+
+function svgHelper(name, opts, Handlebars) {
+  const filePath = nameToModule[name] || (nameToModule[name] = path.resolve(__dirname, '..', '..', name));
+  const content = cache[name] || (cache[name] = fs.readFileSync(filePath, 'utf-8'));
+  const svg = parse(content);
+
+  Object.assign(svg.attrs, opts.hash);
+
+  return new Handlebars.SafeString(svg.root().toString());
+}
+
+module.exports.register = (Handlebars) => {
+  Handlebars.registerHelper('svg', (name, options) => svgHelper(name, options, Handlebars));
+};

src/hbs/layouts/base.hbs

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width">
     <title>truebit | Art Project</title>
 
-    <link href="https://fonts.googleapis.com/css?family=Rubik+Mono+One|Work+Sans:400,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Rubik+Mono+One|Work+Sans:400,500,700" rel="stylesheet">
     <!-- build:css css/main.css -->
     <link rel="stylesheet" href="/css/main.css">
     <!-- endbuild -->

src/hbs/partials/components/button.hbs

@@ -0,0 +1,18 @@
+<div
+  class="button"
+  style="
+    {{#if outlineColor }}
+      color: {{ outlineColor }};
+    {{/if}}
+    {{#if backgroundColor }}
+      background-color: {{ backgroundColor }};
+    {{/if}}
+  "
+>
+  {{#if icon}}
+    <div class="button__icon">
+      {{icon}}
+    </div>
+  {{/if}}
+  {{label}}
+</div>

src/hbs/partials/components/project.hbs

@@ -1,3 +1,8 @@
 <section class="section project">
-
+  {{> components/button
+    label="Signup for newsletter"
+    outlineColor="#FFF"
+    backgroundColor="#000"
+    icon=(svg 'images/telegram-logo.svg' width="24px" height="24px")
+  }}
 </section>

src/images/telegram-logo.svg

@@ -0,0 +1,5 @@
+<svg version="1.1" x="0px" y="0px" viewBox="0 0 189.473 189.473" style="enable-background:new 0 0 189.473 189.473;" xml:space="preserve" width="512px" height="512px">
+  <g>
+    <path fill="currentColor" d="M152.531,179.476c-1.48,0-2.95-0.438-4.211-1.293l-47.641-32.316l-25.552,18.386c-2.004,1.441-4.587,1.804-6.914,0.972   c-2.324-0.834-4.089-2.759-4.719-5.146l-12.83-48.622L4.821,93.928c-2.886-1.104-4.8-3.865-4.821-6.955   c-0.021-3.09,1.855-5.877,4.727-7.02l174.312-69.36c0.791-0.336,1.628-0.53,2.472-0.582c0.302-0.018,0.605-0.018,0.906-0.001   c1.748,0.104,3.465,0.816,4.805,2.13c0.139,0.136,0.271,0.275,0.396,0.42c1.11,1.268,1.72,2.814,1.835,4.389   c0.028,0.396,0.026,0.797-0.009,1.198c-0.024,0.286-0.065,0.571-0.123,0.854L159.898,173.38c-0.473,2.48-2.161,4.556-4.493,5.523   C154.48,179.287,153.503,179.476,152.531,179.476z M104.862,130.579l42.437,28.785L170.193,39.24l-82.687,79.566l17.156,11.638   C104.731,130.487,104.797,130.533,104.862,130.579z M69.535,124.178l5.682,21.53l12.242-8.809l-16.03-10.874   C70.684,125.521,70.046,124.893,69.535,124.178z M28.136,86.782l31.478,12.035c2.255,0.862,3.957,2.758,4.573,5.092l3.992,15.129   c0.183-1.745,0.974-3.387,2.259-4.624L149.227,38.6L28.136,86.782z" />
+  </g>
+</svg>

src/styles/components/_button.scss

@@ -0,0 +1,16 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 25px;
+  font-family: 'Work Sans';
+  font-size: 16px;
+  font-weight: 500;
+  color: white;
+  text-transform: uppercase;
+  border: 2px solid currentColor;
+
+  &__icon {
+    margin-right: 10px;
+  }
+}

src/styles/main.scss

@@ -23,3 +23,4 @@
 @import './components/structure';
 @import './components/team';
 @import './components/footer';
+@import './components/button';