Initial angular app

app/components/band/band.html

@@ -0,0 +1,5 @@
+<section class="band--layout" ng-attr-id="{{ $ctrl.anchor }}" ng-attr-data-background="{{ $ctrl.background }}">
+  <div class="band-container" ng-attr-data-layout="{{ $ctrl.layout }}">
+    <ng-content></ng-content>
+  </div>
+</section>

app/components/band/band.js

@@ -0,0 +1,14 @@
+import angular from "angular";
+
+// Styles
+import styles from "./band.scss";
+
+export default angular.module("rhGitHub.band", [])
+    .component("band", {
+        template: require("./band.html"),
+        bindings: {
+          anchor: "=",
+          background: "=",
+          layout: "="
+        }
+    });

app/components/band/band.scss

@@ -0,0 +1,36 @@
+@import "../../public/styles/global";
+
+.band {
+  &--layout {
+    @extend %default--band;
+    &[data-background="gray"] {
+      background-color: $gallery;
+    }
+  }
+  &-container {
+    @extend %default-container;
+    &[data-layout="stack"] {
+      &:not(:last-child) {
+        padding-bottom: 15px;
+      }
+    }
+    &[data-layout="3-up"] {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-auto-rows: 1fr;
+      grid-gap: 15px;
+      > * {
+        display: grid;
+      }
+    }
+    &[data-layout="2-up"] {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-auto-rows: 1fr;
+      grid-gap: 15px;
+      > * {
+        display: grid;
+      }
+    }
+  }
+}

app/components/bandheader/bandheader.html

@@ -0,0 +1,5 @@
+<div class="band-header--component" ng-show="$ctrl.title || $ctrl.heading || $ctrl.summary">
+  <h2 class="band-header-title" ng-show="$ctrl.title">{{ $ctrl.title }}</h2>
+  <h3 class="band-header-heading" ng-show="$ctrl.heading">{{ $ctrl.heading }}</h3>
+  <p class="band-header-summary" ng-show="$ctrl.summary">{{ $ctrl.summary }}</p>
+</div>

app/components/bandheader/bandheader.js

@@ -0,0 +1,14 @@
+import angular from "angular";
+
+// Styles
+import styles from "./bandheader.scss";
+
+export default angular.module("rhGitHub.bandheader", [])
+  .component("bandheader", {
+    template: require("./bandheader.html"),
+    bindings: {
+      title: "=",
+      heading: "=",
+      summary: "="
+    }
+  });

app/components/bandheader/bandheader.scss

@@ -0,0 +1,13 @@
+@import "../../public/styles/global";
+
+.band-header {
+  &-title {
+    @extend %band-title;
+  }
+  &-heading {
+    @extend %band-heading;
+  }
+  &-summary {
+    @extend %band-summary;
+  }
+}

app/components/card/card.html

@@ -0,0 +1,23 @@
+<div class="card--component" ng-show="$ctrl.feature.name" ng-attr-data-background="{{ $ctrl.background ? $ctrl.background : 'white' }}">
+  <div class="card-header" ng-show="$ctrl.feature.logo">
+      <img class="card-header-img" ng-src="{{ $ctrl.feature.logo }}">
+  </div>
+  <div class="card-body" data-align="center">
+      <h3 class="card-body-headline">{{ $ctrl.feature.name }}</h3>
+      <p class="card-body-copy">{{ $ctrl.feature.description }}</p>
+  </div>
+  <div class="card-footer" ng-attr-data-layout="{{ $ctrl.feature.website && $ctrl.feature.repo ? '2-up' : 'center' }}" ng-show="$ctrl.feature.website || $ctrl.feature.repo">
+      <div class="card-footer-content" data-align="right" ng-show="$ctrl.feature.website">
+        <a class="card-footer-link" href="{{ $ctrl.feature.website }}">
+          <i class="card-footer-icon fa fa-fw fa-globe"></i>
+          Website
+        </a>
+      </div>
+      <div class="card-footer-content" data-align="left" ng-show="$ctrl.feature.repo">
+        <a class="card-footer-link" href="{{ $ctrl.feature.repo }}">
+          <i class="card-footer-icon fab fa-github"></i>
+          Repo
+        </a>
+      </div>
+  </div>
+</div>

app/components/card/card.js

@@ -0,0 +1,12 @@
+import angular from "angular";
+
+// Styles
+import styles from "./card.scss";
+
+export default angular.module("rhGitHub.card", [])
+  .component("card", {
+    template: require("./card.html"),
+    bindings: {
+        feature: "="
+    }
+  });

app/components/card/card.scss

@@ -0,0 +1,49 @@
+@import "../../public/styles/global";
+
+.card {
+  &--component {
+    @extend %default--card;
+  }
+  &-header {
+    &-img {
+      display: block;
+      margin: 0 auto;
+      padding: 0 10px;
+    }
+  }
+  &-body {
+    > *:not(:last-child) {
+      padding-bottom: 20px;
+    }
+    &-headline {
+      @extend %card-heading;
+    }
+    &-copy {
+      @extend %card-copy;
+    }
+  }
+  &-footer {
+    padding: 0 40px;
+    &[data-layout="2-up"] {
+      display: grid;
+      grid-template-columns: repeat(2, 50%);
+      grid-auto-rows: 1fr;
+      grid-gap: 10px;
+    }
+    &[data-layout="center"] {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: center;
+    }
+    [data-layout="2-up"] &-content:last-child {
+      border-left: 2px solid $iron;
+    }
+    &-link {
+      @extend %subtle-link;
+    }
+    &-icon {
+      @extend %link-icon;
+    }
+  }
+}

app/components/dynamictable/dynamictable.html

@@ -0,0 +1,47 @@
+<div class="table--component">
+
+  <div class="table-filters">
+    <div class="table-search">
+      <input class="table-search-input"
+              type="text"
+              placeholder="Search by project name..."
+              ng-model="searchInputValue"
+              ng-change="searchTable()">
+      <button class="table-search-button"
+        ng-submit="searchTable()">Search</button>
+    </div>
+    <div class="table-dropdown"
+      ng-show="{{ categories.length > 0 }}">
+      <label for="category" class="table-dropdown-label">Categories</label>
+      <select class="table-dropdown-select"
+        name="category"
+        ng-model="searchCategory">
+        <option selected="selected"></option>
+        <option value="{{ category }}"
+          ng-repeat="category in categories">
+          {{ category }}
+        </option>
+      </select>
+    </div>
+  </div>
+
+  <table class="table-main">
+    <thead class="table-header">
+      <tr>
+        <th>Project name</th>
+        <th>Project website</th>
+        <th>Project repository</th>
+        <th>Category</th>
+      </tr>
+    </thead>
+    <tbody class="table-body">
+      <tr class="table-row"
+        ng-repeat="project in projects | orderBy:'+projectName' | filter:{category:searchCategory} | filter:{name:searchQuery}:startsWith">
+        <td>{{ project.projectName }}</td>
+        <td><a href="{{ project.projectWebsite }}">{{ project.projectWebsite }}</a></td>
+        <td><a href="{{ project.projectRepository }}">{{ project.projectRepository }}</a></td>
+        <td>{{ project.category }}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>

app/components/dynamictable/dynamictable.js

@@ -0,0 +1,38 @@
+import angular from "angular";
+
+// Styles
+import styles from "./dynamictable.scss";
+
+// Data
+import projects from "../../data/projects";
+
+export default angular.module("rhGitHub.dynamictable", [])
+    .component("dynamictable", {
+        template: require("./dynamictable.html"),
+        controller: "dynamictableCtrl"
+    })
+    .controller("dynamictableCtrl", ["$scope", function($scope) {
+        // Initial
+        $scope.searchQuery = "";
+        $scope.projects = projects;
+        // Get unique category lists
+        let flags = [];
+        $scope.categories = [];
+        for (let i = 0; i < projects.length; i++) {
+          if ( flags[ projects[i].category ] ) continue;
+          flags[ projects[i].category ] = true;
+          if (projects[i].category) {
+            $scope.categories.push( projects[i].category );
+          }
+
+        }
+        // Search the table
+        $scope.searchTable = () => {
+            $scope.searchQuery = $scope.searchInputValue;
+        };
+        // Helper function
+        $scope.startsWith = (actual, expected) => {
+            let lowerStr = (actual + "").toLowerCase();
+            return lowerStr.indexOf(expected.toLowerCase()) === 0;
+        };
+    }]);

app/components/dynamictable/dynamictable.scss

@@ -0,0 +1,74 @@
+@import '../../public/styles/global';
+
+.table {
+  &--component {
+    > *:not(:last-child) {
+      padding-bottom: 30px;
+    }
+  }
+
+  &-filters {
+    display: grid;
+    grid-auto-rows: 1fr;
+    grid-gap: 30px;
+    grid-template-columns: 8fr 4fr;
+  }
+
+  &-search {
+    display: grid;
+    grid-auto-rows: 1fr;
+    grid-gap: 0;
+    grid-template-columns: 7fr 1fr;
+
+    &-input {
+      @include make-input();
+    }
+
+    &-button {
+      @include make-button($btn-color: $brand-primary);
+    }
+  }
+
+  &-dropdown {
+    align-items: center;
+    display: grid;
+    grid-auto-rows: 1fr;
+    grid-gap: 10px;
+    grid-template-columns: 1fr 3fr;
+
+    &-label {
+      @extend %dropdown-label;
+    }
+
+    &-select {
+      height: 100%;
+    }
+  }
+
+  &-main {
+    border-collapse: collapse;
+    overflow: scroll;
+    width: 100%;
+
+    thead tr,
+    tbody tr:nth-child(even) {
+      background-color: $mercury;
+    }
+
+    tbody tr:nth-child(odd) {
+      background-color: $white;
+    }
+
+    td,
+    th {
+      @extend %group-copy;
+      background-color: transparent;
+      padding: 10px;
+      text-align: left;
+    }
+
+    a {
+      @extend %subtle-link-underline;
+    }
+  }
+}

app/components/group/group.html

@@ -0,0 +1,13 @@
+<div class="group--component" ng-show="$ctrl.item.heading || $ctrl.item.copy">
+  <div class="group-container" data-align="center">
+    <h3 class="group-heading">{{ $ctrl.item.heading }}</h3>
+    <div class="group-copy" ng-bind-html="$ctrl.item.copy"></div>
+    <p class="group-cta">
+      <a class="group-cta-anchor"
+        href="{{ $ctrl.item.cta.href }}"
+        title="{{ $ctrl.item.cta.title }}">
+        {{ $ctrl.item.cta.text }}
+      </a>
+    </p>
+  </div>
+</div>

app/components/group/group.js

@@ -0,0 +1,12 @@
+import angular from "angular";
+
+// Styles
+import styles from "./group.scss";
+
+export default angular.module("rhGitHub.group", ["ngSanitize"])
+  .component("group", {
+      template: require("./group.html"),
+      bindings: {
+          item: "="
+      }
+  });

app/components/group/group.scss

@@ -0,0 +1,21 @@
+@import "../../public/styles/global";
+
+.group {
+  &--component {
+    > *:not(:last-child) {
+      padding-bottom: 10px;
+    }
+  }
+
+  &-heading {
+    @extend %group-heading;
+  }
+
+  &-copy {
+    @extend %group-copy;
+  }
+
+  &-cta-anchor {
+    @extend %secondary-link;
+  }
+}

app/components/hero/hero.html

@@ -0,0 +1,6 @@
+<section class="hero--component">
+  <div class="hero-container" data-align="center">
+    <h2 class="hero-heading">{{ $ctrl.hero.heading }}</h2>
+    <div class="hero-copy" ng-bind-html="$ctrl.hero.copy"></div>
+  </div>
+</section>