Merge pull request chromaui#70 from alejandroiglesias/patch-1

Various fixes to the Vue english tutorial

content/vue/en/composite-component.md

@@ -38,7 +38,7 @@ Start with a rough implementation of the `TaskList`. You’ll need to import the
 </template>
 
 <script>
-import Task from "@/components/Task";
+import Task from "./Task";
 export default {
  name: "task-list",
  props: {
@@ -133,7 +133,7 @@ storiesOf('TaskList', module)
 <a href="https://storybook.js.org/addons/introduction/#1-decorators"><b>Decorators</b></a> are a way to provide arbitrary wrappers to stories. In this case we’re using a decorator to add styling. They can also be used to add other context to components, as we'll see later.
 </div>
 
-`task` supplies the shape of a `Task` that we created and exported from the `Task.stories.js` file. Similarly, `actions` defines the actions (mocked callbacks) that a `Task` component expects, which the `TaskList` also needs.
+`task` supplies the shape of a `Task` that we created and exported from the `Task.stories.js` file. Similarly, `methods` defines the actions (mocked callbacks) that a `Task` component expects, which the `TaskList` also needs.
 
 Now check Storybook for the new `TaskList` stories.
 
@@ -151,11 +151,13 @@ Our component is still rough but now we have an idea of the stories to work towa
 ```html
 <template>
  <div>
- <div class="loading-item" v-if="loading" v-for="(n, index) in 5" :key="index">
- <span class="glow-checkbox" />
- <span class="glow-text">
- <span>Loading</span> <span>cool</span> <span>state</span>
- </span>
+ <div v-if="loading">
+ <div class="loading-item" v-for="(n, index) in 5" :key="index">
+ <span class="glow-checkbox" />
+ <span class="glow-text">
+ <span>Loading</span> <span>cool</span> <span>state</span>
+ </span>
+ </div>
  </div>
  <div class="list-items" v-if="noTasks && !this.loading">
  <div class="wrapper-message">
@@ -172,7 +174,7 @@ Our component is still rough but now we have an idea of the stories to work towa
 </template>
 
 <script>
-import Task from "@/components/Task";
+import Task from "./Task";
 export default {
  name: "task-list",
  props: {

content/vue/en/data.md

@@ -70,7 +70,7 @@ In our top-level app component (`src/App.vue`) we can wire the store into our co
 
 <script>
 import store from "./store";
-import TaskList from "./containers/TaskList.vue";
+import TaskList from "./components/TaskList.vue";
 import "../src/index.css";
 
 export default {
@@ -85,21 +85,21 @@ export default {
 
 Then we'll update our `TaskList` to read data out of the store. First let's move our existing presentational version to the file `src/components/PureTaskList.vue` (renaming the component to `pure-task-list`), and wrap it with a container.
 
-In `src/containers/PureTaskList.vue`:
+In `src/components/PureTaskList.vue`:
 
 ```html
 /* This file moved from TaskList.vue */
 <template>/* as before */
 
 <script>
-import Task from "@/components/Task";
+import Task from "./Task";
 export default {
  name: "pure-task-list",
  ...
 }
 ```
 
-In `src/containers/TaskList.vue`:
+In `src/components/TaskList.vue`:
 
 ```html
 <template>
@@ -109,7 +109,7 @@ In `src/containers/TaskList.vue`:
 </template>
 
 <script>
-import PureTaskList from "@/components/PureTaskList";
+import PureTaskList from "./PureTaskList";
 import { mapState } from "vuex";
 
 export default {
@@ -124,7 +124,7 @@ export default {
 </script>
 ```
 
-The reason to keep the presentational version of the `TaskList` separate is because it is easier to test and isolate. As it doesn't rely on the presence of a store it is much easier to deal with from a testing perspective. We can ensure our stories use the presentational version:
+The reason to keep the presentational version of the `TaskList` separate is because it is easier to test and isolate. As it doesn't rely on the presence of a store it is much easier to deal with from a testing perspective. Let's rename `src/components/TaskList.stories.js` into `src/components/PureTaskList.stories.js`, and ensure our stories use the presentational version:
 
 ```javascript
 import { storiesOf } from '@storybook/vue';

content/vue/en/deploy.md

@@ -21,12 +21,12 @@ To deploy Storybook we first need to export it as a static web app. This functio
 ```javascript
 {
  "scripts": {
- "storybook": "build-storybook -c .storybook -o .storybook-static"
+ "build-storybook": "build-storybook -c .storybook -s public -o storybook-static"
  }
 }
 ```
 
-Now when you run Storybook via `npm run storybook`, it will output a static Storybook in the `storybook-static` directory.
+Now when you run Storybook via `npm run build-storybook`, it will output a static Storybook in the `storybook-static` directory.
 
 ## Continuous deploy
 

content/vue/en/screen.md

@@ -13,7 +13,7 @@ In this chapter we continue to increase the sophistication by combining componen
 
 ## Nested container components
 
-As our app is very simple, the screen we’ll build is pretty trivial, simply wrapping the `TaskList` container component (which supplies its own data via Redux) in some layout and pulling a top-level `error` field out of redux (let's assume we'll set that field if we have some problem connecting to our server). Let's create a presentational `PureInboxScreen.vue` in your `src/components` folder:
+As our app is very simple, the screen we’ll build is pretty trivial, simply wrapping the `TaskList` container component (which supplies its own data via Vuex) in some layout and pulling a top-level `error` field out of the store (let's assume we'll set that field if we have some problem connecting to our server). Let's create a presentational `PureInboxScreen.vue` in your `src/components/` folder:
 
 ```html
 <template>
@@ -37,7 +37,7 @@ As our app is very simple, the screen we’ll build is pretty trivial, simply wr
 </template>
 
 <script>
-import TaskList from "@/containers/TaskList.vue";
+import TaskList from "./TaskList.vue";
 
 export default {
  name: "pure-inbox-screen",
@@ -54,7 +54,7 @@ export default {
 </script>
 ```
 
-Then, we can create a container, which again grabs the data for the `PureInboxScreen` in `src/containers`:
+Then, we can create a container, which again grabs the data for the `PureInboxScreen` in `src/components/InboxScreen.vue`:
 
 ```html
 <template>
@@ -64,7 +64,7 @@ Then, we can create a container, which again grabs the data for the `PureInboxSc
 </template>
 
 <script>
-import PureInboxScreen from "@/components/PureInboxScreen";
+import PureInboxScreen from "./PureInboxScreen";
 import { mapState } from "vuex";
 
 export default {
@@ -90,7 +90,7 @@ We also change the `App` component to render the `InboxScreen` (eventually we wo
 
 <script>
 import store from "./store";
-import InboxScreen from "@/containers/InboxScreen.vue";
+import InboxScreen from "./components/InboxScreen.vue";
 import "../src/index.css";
 
 export default {

content/vue/en/simple-component.md

@@ -39,8 +39,10 @@ We’ll begin with a basic implementation of the `Task`, simply taking in the at
 export default {
  name: "task",
  props: {
- task: Object,
- required: true
+ task: {
+ type: Object,
+ required: true
+ }
  }
 };
 </script>
@@ -177,8 +179,10 @@ The component is still basic at the moment. First write the code that achieves t
 export default {
  name: "task",
  props: {
- task: Object,
- required: true
+ task: {
+ type: Object,
+ required: true
+ }
  },
  computed: {
  taskClass() {
@@ -225,7 +229,7 @@ With the [Storyshots addon](https://github.com/storybooks/storybook/tree/master/
 yarn add --dev @storybook/addon-storyshots jest-vue-preprocessor babel-plugin-require-context-hook
 ```
 
-Then create an `tests/unit/storybook.spec.js` file with the following in it:
+Then create a `tests/unit/storybook.spec.js` file with the following in it:
 
 ```javascript
 import registerRequireContextHook from 'babel-plugin-require-context-hook/register';