feat(tutorial): complete step 4

src/components/InfoSection/InfoCard.vue

@@ -0,0 +1,83 @@
+<template>
+  <div
+    class="info-card cds--col-md-4 cds--col-lg-4 cds--col-xlg-3 cds--offset-xlg-1"
+  >
+    <h4 class="info-card__heading">
+      {{ splitHeading[0] }}
+      <strong>{{ splitHeading[1] }}</strong>
+    </h4>
+    <p class="info-card__body">{{ body }}</p>
+    <component :is="icon" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InfoCard',
+  props: {
+    heading: String,
+    body: String,
+    icon: Object
+  },
+  computed: {
+    // Take in a phrase and separate the third word in an array
+    splitHeading() {
+      const splitHeading = this.heading.split(' ');
+      const finalWord = splitHeading.pop();
+      return [splitHeading.join(' '), finalWord];
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import '../../styles/carbon-utils';
+
+.info-card {
+  margin-top: $spacing-09;
+  display: flex;
+  flex-direction: column;
+
+  svg {
+    margin-top: $spacing-09;
+  }
+
+  // top border in only small breakpoints to prevent overrides
+  @include carbon--breakpoint-down(md) {
+    &:not(:nth-child(2)) {
+      border-top: 1px solid $ui-03;
+      padding-top: $spacing-09;
+    }
+  }
+
+  // left border in just the 2nd column items
+  @include carbon--breakpoint(md) {
+    &:nth-child(odd) {
+      border-left: 1px solid $ui-03;
+    }
+  }
+
+  // left border in all items
+  @include carbon--breakpoint(lg) {
+    margin-top: 0;
+    border-left: 1px solid $ui-03;
+
+    svg {
+      margin-top: $layout-06;
+    }
+  }
+}
+.info-card__heading {
+  @include type-style('productive-heading-03');
+}
+.info-card__body {
+  margin-top: $spacing-06;
+  flex-grow: 1; // fill space so icons are bottom aligned
+  @include type-style('body-long-01');
+
+  // prevent large line lengths between small and medium viewports
+  @include carbon--breakpoint-between(321px, md) {
+    max-width: 75%;
+  }
+}
+</style>

src/components/InfoSection/InfoSection.vue

@@ -0,0 +1,25 @@
+<template>
+  <section class="cds--row info-section">
+    <div class="cds--col-md-8 cds--col-lg-4 cds--col-xlg-3">
+      <h3 class="info-section__heading">{{ heading }}</h3>
+    </div>
+    <slot />
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'InfoSection',
+  props: {
+    heading: String
+  }
+};
+</script>
+
+<style lang="scss">
+@import '../../styles/_carbon-utils';
+
+.info-section__heading {
+  @include type-style('heading-01');
+}
+</style>

src/components/InfoSection/index.js

@@ -0,0 +1,4 @@
+import InfoSection from './InfoSection';
+import InfoCard from './InfoCard';
+
+export { InfoSection, InfoCard };

src/styles/_carbon.scss

@@ -1,5 +1,5 @@
 $feature-flags: (
-  grid-columns-16: true,
+  grid-columns-16: true
 );
 
 @import 'carbon-components/scss/globals/scss/styles';

src/views/LandingPage/LandingPage.vue

@@ -60,14 +60,23 @@
         </cv-tabs>
       </div>
     </div>
-    <div class="bx--row landing-page__r3">
-      <div class="bx--col-md-4 bx--col-lg-4">
-        <h3 class="landing-page__label">The Principles</h3>
-      </div>
-      <div class="bx--col-md-4 bx--col-lg-4">Carbon is Open</div>
-      <div class="bx--col-md-4 bx--col-lg-4">Carbon is Modular</div>
-      <div class="bx--col-md-4 bx--col-lg-4">Carbon is Consistent</div>
-    </div>
+    <info-section heading="The Principles" class="landing-page__r3">
+      <info-card
+        heading="Carbon is Open"
+        body="It's a distributed effort, guided by the principles of the open-source movement. Carbon's users are also it's makers, and everyone is encouraged to contribute."
+        :icon="PersonFavorite32"
+      />
+      <info-card
+        heading="Carbon is Modular"
+        body="Carbon's modularity ensures maximum flexibility in execution. It's components are designed to work seamlessly with each other, in whichever combination suits the needs of the user."
+        :icon="Application32"
+      />
+      <info-card
+        heading="Carbon is Consistent"
+        body="Based on the comprehensive IBM Design Language, every element and component of Carbon was designed from the ground up to work elegantly together to ensure consistent, cohesive user experiences."
+        :icon="Globe32"
+      />
+    </info-section>
   </div>
 </template>
 
@@ -124,3 +133,24 @@
   @include carbon--type-style('heading-01');
 }
 </style>
+
+<script>
+import { InfoSection, InfoCard } from '../../components/InfoSection';
+import { Globe32, PersonFavorite32, Application32 } from '@carbon/icons-vue';
+
+export default {
+  name: 'LandingPage',
+  components: {
+    InfoSection,
+    InfoCard
+  },
+  created() {
+    // Add icons to this
+    Object.assign(this, {
+      Globe32,
+      PersonFavorite32,
+      Application32
+    });
+  }
+};
+</script>

src/views/LandingPage/_mixins.scss

@@ -14,6 +14,6 @@
 
   > * {
     // lift above position absolute
-    position: relative;;
+    position: relative;
   }
 }

src/views/RepoPage/RepoPage.vue

@@ -23,7 +23,7 @@ import gql from 'graphql-tag';
 const REPO_QUERY = gql`
   query REPO_QUERY {
     # Let's use carbon as our organization
-    organization(login: "carbon-design-system") {
+    organization(login: "amiyou-project") {
       # We'll grab all the repositories in one go. To load more resources
       # continuously, see the advanced topics.
       repositories(first: 75, orderBy: { field: UPDATED_AT, direction: DESC }) {
@@ -115,7 +115,7 @@ export default {
   methods: {
     onPagination(val) {
       this.pageSize = val.length;
-      this.pageStart = val.start;
+      this.pageStart = val.start - 1;
       this.page = val.page;
     }
   },