diff --git a/package.json b/package.json
index a2d848095..fca8906a7 100644
--- a/package.json
+++ b/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"
diff --git a/src/components/TutorialHeader/TutorialHeader.vue b/src/components/TutorialHeader/TutorialHeader.vue
index 38f43bd2f..88921ed66 100644
--- a/src/components/TutorialHeader/TutorialHeader.vue
+++ b/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>
diff --git a/src/styles/_carbon-fixes.scss b/src/styles/_carbon-fixes.scss
index 3bc61fdd0..bc4158f04 100644
--- a/src/styles/_carbon-fixes.scss
+++ b/src/styles/_carbon-fixes.scss
@@ -14,3 +14,4 @@
.bx--content {
padding: 0;
}
+
diff --git a/src/styles/_carbon-utils.scss b/src/styles/_carbon-utils.scss
new file mode 100644
index 000000000..33cc42953
--- /dev/null
+++ b/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';
diff --git a/src/styles/_carbon.scss b/src/styles/_carbon.scss
index b6a292d0c..295fe27e3 100644
--- a/src/styles/_carbon.scss
+++ b/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
+);
\ No newline at end of file
diff --git a/src/views/LandingPage/LandingPage.vue b/src/views/LandingPage/LandingPage.vue
index d2ab93188..7c78e5832 100644
--- a/src/views/LandingPage/LandingPage.vue
+++ b/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 & 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>
diff --git a/src/views/LandingPage/_carbon-overrides.scss b/src/views/LandingPage/_carbon-overrides.scss
new file mode 100644
index 000000000..1d23a2140
--- /dev/null
+++ b/src/views/LandingPage/_carbon-overrides.scss
@@ -0,0 +1,3 @@
+.landing-page__r2 .bx--tabs__nav {
+ right: 0;
+}
\ No newline at end of file
diff --git a/src/views/LandingPage/_mixins.scss b/src/views/LandingPage/_mixins.scss
new file mode 100644
index 000000000..a0aa8f59a
--- /dev/null
+++ b/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;
+ }
+ }
\ No newline at end of file
diff --git a/src/views/RepoPage/RepoPage.vue b/src/views/RepoPage/RepoPage.vue
index e82a6e6a9..71c701201 100644
--- a/src/views/RepoPage/RepoPage.vue
+++ b/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>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 91c41bb78..696776d73 100644
--- a/yarn.lock
+++ b/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/telemetry@0.0.0-alpha.6", "@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"