Skip to content

Commit

Permalink
Storybook (#45)
Browse files Browse the repository at this point in the history
* install storybook and addons

* Configure storybook

Base configuration: https://storybook.js.org/docs/guides/guide-vue/#step-3-create-the-config-file (see details)
Add SASS support: https://storybook.js.org/docs/configurations/custom-webpack-config/#full-control-mode
Global styles: storybookjs/storybook#1653 (comment)
Accessibility addon: https://github.com/storybookjs/storybook/tree/master/addons/a11y

* CTALink stories

* Blog List stories

* BlogListItem stories

* ContentColumn stories

* tweak styling

* HeroHeader stories

* Navigation stories

And fixed a11y issue with nav links' text

* start working on PageHeader stories

* cleaned up page header styles

* ReadingTime stories

* TalkList stories

* more tweaks

* fix tests
  • Loading branch information
mercedesb authored Sep 28, 2019
1 parent 30d9727 commit c888e41
Show file tree
Hide file tree
Showing 39 changed files with 4,743 additions and 332 deletions.
1 change: 1 addition & 0 deletions .storybook/addons.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import "@storybook/addon-a11y/register";
3 changes: 3 additions & 0 deletions .storybook/component-stub.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<template>
<div></div>
</template>
30 changes: 30 additions & 0 deletions .storybook/config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
// Import styles
import "!style-loader!css-loader!sass-loader!./scss-loader.scss";

// Import Storybook
import { configure, addDecorator } from "@storybook/vue";

// Import storybook addons
import { withA11y } from "@storybook/addon-a11y";

// Import Vue
import Vue from "vue";

// Import Vue plugins
import Vuex from "vuex";
import Meta from "vue-meta";
import Router from "vue-router";

// Import your global components.
import SmartLink from "../src/components/SmartLink.vue";

// Install Vue plugins.
Vue.use(Vuex);
Vue.use(Meta);
Vue.use(Router);

// Register global components.
Vue.component("smart-link", SmartLink);

configure(require.context("../tests", true, /\.stories\.js$/), module);
addDecorator(withA11y);
1 change: 1 addition & 0 deletions .storybook/scss-loader.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import "../src/assets/styles/app.scss";
33 changes: 33 additions & 0 deletions .storybook/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
const path = require("path");
const webpack = require("webpack");
const fs = require("fs");

// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
// `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.

// Make whatever fine-grained changes you need
config.module.rules.push({
test: /\.scss$/,
use: ["vue-style-loader", "css-loader", "sass-loader"],
include: path.resolve(__dirname, "../")
});

config.plugins.push(
new webpack.NormalModuleReplacementPlugin(/\.vue$/, resource => {
const resPath = resource.request;
const mockPath = resPath.slice(0, -3) + "mock.vue";
const absMockPath = path.resolve(resource.context, mockPath);
const absRootMockPath = path.resolve(__dirname, "./component-stub.vue");
if (fs.existsSync(absMockPath)) {
resource.request = mockPath;
} else if (resPath.endsWith("Container.vue")) {
resource.request = absRootMockPath;
}
})
);
// Return the altered config
return config;
};
12 changes: 11 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
"build": "vue-cli-service build:prerender",
"start": "node server.js",
"lint": "vue-cli-service lint",
"test": "TZ=America/Chicago vue-cli-service test:unit"
"test": "TZ=America/Chicago vue-cli-service test:unit",
"storybook": "start-storybook"
},
"dependencies": {
"connect-history-api-fallback": "^1.6.0",
Expand All @@ -28,6 +29,9 @@
"vuex": "^3.1.1"
},
"devDependencies": {
"@babel/core": "^7.6.0",
"@storybook/addon-a11y": "^5.2.1",
"@storybook/vue": "^5.2.1",
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-plugin-eslint": "^3.8.0",
"@vue/cli-plugin-unit-jest": "^3.8.0",
Expand All @@ -36,10 +40,16 @@
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.6",
"babel-preset-vue": "^2.0.2",
"css-loader": "^3.2.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.12.0",
"sass": "^1.21.0",
"sass-loader": "^7.1.0",
"storybook-vue-router": "^1.0.7",
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
Expand Down
37 changes: 25 additions & 12 deletions src/assets/styles/_typography.scss
Original file line number Diff line number Diff line change
@@ -1,56 +1,69 @@
#app {
body {
font-family: $base-font-family;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: $black;
font-size: $base-font-size;
}

h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-family: $header-font-family;
font-weight: $base-font-weight;
}

h1, h2, h3 {
h1,
h2,
h3 {
margin: $large-spacing 0 $small-spacing;

}

h4, h5 {
h4,
h5 {
margin: $large-spacing 0 $small-spacing;
}

h6 {
margin: $base-spacing 0 $small-spacing;
}

h1, .h1 {
h1,
.h1 {
font-size: $largest-font-size;
font-weight: $heavy-font-weight;
}

h2, .h2 {
h2,
.h2 {
font-size: $larger-font-size;
font-weight: $heavy-font-weight;
}

h3, .h3 {
h3,
.h3 {
font-size: $larger-font-size;
}

h4, .h4 {
h4,
.h4 {
font-family: $base-font-family;
font-size: $large-font-size;
font-weight: $heavy-font-weight;
}

h5, .h5 {
h5,
.h5 {
font-family: $base-font-family;
font-size: $large-font-size;
}

h6, .h6 {
h6,
.h6 {
font-family: $base-font-family;
font-size: $base-font-size;
font-weight: $heavy-font-weight;
Expand Down Expand Up @@ -78,7 +91,7 @@ blockquote {
padding: $base-spacing;
display: flex;
align-items: center;
justify-content: center;
justify-content: center;

p {
margin: 0;
Expand Down
10 changes: 9 additions & 1 deletion src/assets/styles/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ li {
}

.PageContent {
width: 100%;
max-width: $content-width;
/*width: 100%;*/
padding: 0 $base-spacing;

a {
Expand All @@ -69,6 +69,14 @@ li {
max-width: 75%;
}

ul {
list-style-type: disc;
margin-left: $base-spacing;
}
li {
display: list-item;
}

&--wide {
max-width: $wide-content-width;
}
Expand Down
2 changes: 2 additions & 0 deletions src/components/BlogList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@
<BlogListItem v-if="featuredPost"
v-bind="featuredPost"
:key="featuredPost.id"
:color="color"
></BlogListItem>
<BlogListItem v-for="blogPost in remainingPosts"
v-bind="blogPost"
:key="blogPost.id"
:color="color"
></BlogListItem>
</div>
</transition>
Expand Down
15 changes: 12 additions & 3 deletions src/components/BlogListItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
<smart-link :class="classes" :to="{ name: 'blogPost', params: { urlSegment: urlSegment, color: color } }">
<div class='BlogItem-container'>
<div class='BlogItem-date'>
<span>{{ publishMonth }}</span>
<span class='BlogItem-publishMonth'>{{ publishMonth }}</span>
<span class='BlogItem-publishDay'>{{ publishDay }}</span>
<span>{{ publishYear }}</span>
<span class='BlogItem-publishYear'>{{ publishYear }}</span>
</div>
<div class='BlogItem-text'>
<h3 class='BlogItem-title h5'>{{ title }}</h3>
Expand All @@ -31,7 +31,10 @@ export default {
featured: Boolean,
title: String,
preamble: String,
mainContent: String,
mainContent: {
type: String,
required: true
},
date: Date,
urlSegment: {
type: String,
Expand Down Expand Up @@ -67,6 +70,8 @@ export default {
<style lang="scss">
@import '../assets/styles/variables.scss';
$publish-font-size: 1.35rem;
.BlogItem {
a {
text-decoration: none
Expand Down Expand Up @@ -103,6 +108,10 @@ export default {
font-size: $giant-font-size;
}
&-publishMonth, &-publishYear {
font-size: $publish-font-size;
}
&-text {
flex: 1 1 100%;
display: flex;
Expand Down
3 changes: 2 additions & 1 deletion src/components/CTALink.vue
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export default {
@import '../assets/styles/variables.scss';
$icon-width: 75px;
$icon-spacing: 15px;
.CTA {
flex: 1 1 50%;
Expand All @@ -56,7 +57,7 @@ export default {
&-icon {
margin-right: $small-spacing;
padding: $small-spacing;
padding: $icon-spacing;
max-width: 120px;
width: $icon-width;
Expand Down
5 changes: 4 additions & 1 deletion src/components/ContentColumn.vue
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,10 @@ export default {
preamble: String,
iconSvg: String,
externalLink: String,
urlSegment: String
urlSegment: {
type: String,
required: true
},
},
computed: {
isExternal: function () {
Expand Down
20 changes: 10 additions & 10 deletions src/components/Navigation.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
:to="navLink.parsedLink"
:isExternal="!!navLink.externalLink"
>
<span class='Navigation-title'>{{navLink.title}}</span>
{{navLink.title}}
<div class="Navigation-icon" v-html="navLink.iconSvg"></div>
</smart-link>
</li>
Expand Down Expand Up @@ -63,12 +63,10 @@ $icon-hover-width: 75px;
&:hover {
cursor: pointer;
color: $white;
line-height: initial;
font-size: initial;
.Navigation {
&-title {
display: block;
}
&-icon {
width: $icon-hover-width;
-webkit-transition: width $transition-time;
Expand All @@ -84,17 +82,19 @@ $icon-hover-width: 75px;
}
}
&-title {
display: none;
a {
padding-bottom: $small-spacing;
color: $white;
}
line-height: 0;
font-size: 0;
color: transparent;
}
&-icon {
margin: 0 $small-spacing;
width: $icon-initial-width;
-webkit-transition: width $transition-time;
transition: width $transition-time;
line-height: 0;
@include light-svg;
}
Expand Down
Loading

0 comments on commit c888e41

Please sign in to comment.