feat(tutorial): complete step 2

package.json

@@ -11,6 +11,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "@carbon/grid": "^11.1.0",
     "@carbon/icons-vue": "^10.30.0",
     "@carbon/vue": "^2.37.1",
     "carbon-components": "^10.33.0",
@@ -67,8 +68,10 @@
       "json",
       "vue"
     ],
-   "setupFiles": ["./tests/setup.js"],
-   "transform": {
+    "setupFiles": [
+      "./tests/setup.js"
+    ],
+    "transform": {
       "^.+\\.vue$": "vue-jest",
       ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
       "^.+\\.jsx?$": "babel-jest"

src/components/TutorialHeader/TutorialHeader.vue

@@ -18,17 +18,17 @@
         <user-avatar-20 />
       </cv-header-global-action>
       <cv-header-global-action aria-label="App switcher">
-        <app-switcher-20 />
+        <apps-20 />
       </cv-header-global-action>
     </template>
   </cv-header>
 </template>
 
 <script>
-import { Notification20, UserAvatar20, AppSwitcher20 } from '@carbon/icons-vue';
+import { Notification20, UserAvatar20, Apps20 } from '@carbon/icons-vue';
 
 export default {
   name: 'TutorialHeader',
-  components: { Notification20, UserAvatar20, AppSwitcher20 }
+  components: { Notification20, UserAvatar20, Apps20 }
 };
 </script>

src/styles/_carbon-fixes.scss

@@ -14,3 +14,4 @@
 .bx--content {
   padding: 0;
 }
+

src/styles/_carbon-utils.scss

@@ -0,0 +1,4 @@
+@import 'carbon-components/scss/globals/scss/vendor/@carbon/type/scss/font-family.scss';
+@import 'carbon-components/scss/globals/scss/vendor/@carbon/layout/scss/breakpoint.scss';
+@import 'carbon-components/scss/globals/scss/typography.scss';
+@import 'carbon-components/scss/globals/scss/vars.scss';

src/styles/_carbon.scss

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

src/views/LandingPage/LandingPage.vue

@@ -1,3 +1,118 @@
 <template>
-  <div>LANDING PAGE</div>
+    <div class="cds--grid cds--grid--full-width landing-page">
+        <div class="cds--row landing-page__banner">
+            <div class="cds--col-lg-16">
+                <cv-breadcrumb noTrailingSlash aria-label="Page navigation">
+                    <cv-breadcrumb-item>
+                        <cv-link href="/">Getting started</cv-link>
+                    </cv-breadcrumb-item>
+                </cv-breadcrumb>
+                <h1 class="landing-page__heading">Design &amp; build with Carbon</h1>
+            </div>
+        </div>
+
+        <div class="cds--row landing-page__r2">
+            <div class="cds--col cds--no-gutter">
+                <cv-tabs selected="0" aria-label="Tab navigation">
+                    <cv-tab label="About">
+                        <div class="cds--grid cds--grid--no-gutter cds--grid--full-width">
+                            <div class="cds--row landing-page__tab-content">
+                                <div class="cds--col-md-4 cds--col-lg-7">
+                                    <h2 class="landing-page__subheading">What is Carbon?</h2>
+                                    <p class="landing-page__p">
+                                        Carbon is IBM’s open-source design system for digital
+                                        products and experiences. With the IBM Design Language as
+                                        its foundation, the system consists of working code, design
+                                        tools and resources, human interface guidelines, and a
+                                        vibrant community of contributors.
+                                    </p>
+                                    <cv-button>Learn more</cv-button>
+                                </div>
+                                <div class="cds--col-md-4 cds--offset-lg-1 cds--col-lg-8">
+                                    <img class="landing-page__illo" src="../../assets/tab-illo.png"
+                                        alt="Carbon illustration" />
+                                </div>
+                            </div>
+                        </div>
+                    </cv-tab>
+                    <cv-tab label="Design">
+                        <div class="cds--grid cds--grid--no-gutter cds--grid--full-width">
+                            <div class="cds--row landing-page__tab-content">
+                                <div class="cds--col-lg-16">
+                                    Rapidly build beautiful and accessible experiences. The Carbon kit
+                                    contains all resources you need to get started.
+                                </div>
+                            </div>
+                        </div>
+                    </cv-tab>
+                    <cv-tab label="Develop">
+                        <div class="cds--grid cds--grid--no-gutter cds--grid--full-width">
+                            <div class="cds--row landing-page__tab-content">
+                                <div class="cds--col-lg-16">
+                                    Carbon provides styles and components in Vanilla, React, Angular,
+                                    and Vue for anyone building on the web.
+                                </div>
+                            </div>
+                        </div>
+                    </cv-tab>
+                </cv-tabs>
+            </div>
+        </div>
+
+        <div class="cds--row landing-page__r3">
+            <div class="cds--col-md-4 cds--col-lg-4">
+                <h3 class="landing-page__label">The Principles</h3>
+            </div>
+            <div class="cds--col-md-4 cds--col-lg-4">Carbon is Open</div>
+            <div class="cds--col-md-4 cds--col-lg-4">Carbon is Modular</div>
+            <div class="cds--col-md-4 cds--col-lg-4">Carbon is Consistent</div>
+        </div>
+
+    </div>
 </template>
+
+
+<style lang="scss">
+@import '../../styles/carbon-utils';
+@import './carbon-overrides';
+@import './mixins';
+
+
+.landing-page__illo {
+    max-width: 100%;
+}
+
+.landing-page__banner {
+    padding-top: $spacing-05;
+    padding-bottom: $spacing-07 * 4;
+    @include landing-page-background;
+}
+
+.landing-page__heading {
+  @include carbon--type-style('productive-heading-05');
+}
+
+.landing-page__r2 {
+    margin-top: rem(-40px);
+}
+
+.landing-page__tab-content {
+  padding-top: $layout-05;
+  padding-bottom: $layout-05;
+}
+
+.landing-page__subheading {
+  @include carbon--type-style('productive-heading-03');
+  @include carbon--font-weight('semibold');
+}
+
+.landing-page__r3 {
+  padding-top: $spacing-09;
+  padding-bottom: $spacing-09;
+  @include landing-page-background;
+}
+.landing-page__label {
+  @include carbon--type-style('heading-01');
+}
+
+</style>

src/views/LandingPage/_carbon-overrides.scss

@@ -0,0 +1,3 @@
+.landing-page__r2 .bx--tabs__nav {
+  right: 0;
+}

src/views/LandingPage/_mixins.scss

@@ -0,0 +1,20 @@
+
+@mixin landing-page-background() {
+    background-color: $ui-01;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: -$spacing-06;
+      top: 0;
+      right: -$spacing-06;
+      bottom: 0;
+      background: $ui-01;
+    }
+
+    > * {
+      /* lift above position absolute */
+      position: relative;
+    }
+  }

src/views/RepoPage/RepoPage.vue

@@ -1,3 +1,49 @@
 <template>
-  <div>REPO PAGE</div>
+  <cv-data-table :columns="columns" :title="title" :helper-text="helperText">
+    <template slot="data">
+      <cv-data-table-row v-for="(row, rowIndex) in data" :key="`${rowIndex}`">
+        <cv-data-table-cell
+          v-for="(cell, cellIndex) in row.data"
+          :key="`${cellIndex}`"
+        >
+          {{ cell }}
+        </cv-data-table-cell>
+        <template slot="expandedContent">
+          {{ row.description }}
+        </template>
+      </cv-data-table-row>
+    </template>
+  </cv-data-table>
 </template>
+
+<script>
+
+
+export default {
+  name: 'RepoTable',
+  props: {
+    headers: Array,
+    rows: Array,
+    title: String,
+    helperText: String
+  },
+  computed: {
+    columns() {
+      return this.headers.map(header => header.header);
+    },
+    data() {
+      return this.rows.map(row => ({
+        data: [
+          row.name,
+          row.createdAt,
+          row.updatedAt,
+          row.issueCount,
+          row.stars,
+          row.links
+        ],
+        description: 'Row description'
+      }));
+    }
+  }
+}
+</script>

yarn.lock

@@ -886,6 +886,13 @@
     "@babel/helper-validator-identifier" "^7.12.11"
     to-fast-properties "^2.0.0"
 
+"@carbon/grid@^11.1.0":
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/@carbon/grid/-/grid-11.1.0.tgz#6ffec0466c09f91fbfeca45de237e8e8dc2d5fba"
+  integrity sha512-AS78yH03bEqBysxRQ/zujAJTE69NLBsNezDiECUFf+VAS6hJQi0LSDxuuo6HOKQpLqUANj4d6eZdcnrIuw/Z5A==
+  dependencies:
+    "@carbon/layout" "^11.1.0"
+
 "@carbon/icon-helpers@^10.16.0", "@carbon/icon-helpers@^10.9.0":
   version "10.16.0"
   resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-10.16.0.tgz#66f20b9bba49c6ec4c956b8e9e7ec65bdf40da8f"
@@ -905,6 +912,11 @@
   dependencies:
     "@carbon/icon-helpers" "^10.16.0"
 
+"@carbon/layout@^11.1.0":
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/@carbon/layout/-/layout-11.1.0.tgz#7a2072495761b1c59ebfde4271166397d18ba2f5"
+  integrity sha512-aryW3p8nr4xjPtr8uN5oheV9ymtVf6SCYgSkDhCPFSIK8UZt1SCUMobaMVRi3stKTm/7B9WzC27T9nKGz336aA==
+
 "@carbon/[email protected]", "@carbon/telemetry@^0.0.0-alpha.6":
   version "0.0.0-alpha.6"
   resolved "https://registry.yarnpkg.com/@carbon/telemetry/-/telemetry-0.0.0-alpha.6.tgz#1d11e64f310e98f32c3db0c55f02e047f2398087"