fix : change snippet in english

chromaui · May 5, 2021 · 4320024 · 4320024
1 parent bbed349
commit 4320024
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 112 deletions.
diff --git a/content/intro-to-storybook/vue/fr/composite-component.md b/content/intro-to-storybook/vue/fr/composite-component.md
@@ -135,26 +135,25 @@ Vérifiez maintenant Storybook pour les nouvelles histoires de `Tasklist`.
 Notre composant est encore difficile, mais nous avons maintenant une idée des histoires sur lesquelles travailler. Vous pensez peut-être que le wrapper `.list-items est` trop simpliste. Vous avez raison: dans la plupart des cas, nous ne créerions pas de nouveau composant uniquement pour ajouter un wrapper. Mais la **vraie complexité** du composant `TaskList` est révélée dans les cas marginaux `WithPinnedTasks`, `loading` et `empty`.
 
 ```diff:title=src/components/TaskList.vue
-
 <template>
   <div class="list-items">
     <template v-if="loading">
-      <div v-for="n in 6" :key="n" class="loading-item">
-        <span class="glow-checkbox" />
-        <span class="glow-text"> <span>Loading</span> <span>cool</span> <span>state</span> </span>
-      </div>
++     <div v-for="n in 6" :key="n" class="loading-item">
++       <span class="glow-checkbox" />
++       <span class="glow-text"> <span>Loading</span> <span>cool</span> <span>state</span> </span>
++     </div>
     </template>
 
     <div v-else-if="isEmpty" class="list-items">
-      <div class="wrapper-message">
-        <span class="icon-check" />
-        <div class="title-message">You have no tasks</div>
-        <div class="subtitle-message">Sit back and relax</div>
-      </div>
++     <div class="wrapper-message">
++       <span class="icon-check" />
++       <div class="title-message">You have no tasks</div>
++       <div class="subtitle-message">Sit back and relax</div>
++     </div>
     </div>
 
     <template v-else>
-      <Task v-for="task in tasksInOrder" :key="task.id" :task="task" v-on="$listeners" />
++     <Task v-for="task in tasksInOrder" :key="task.id" :task="task" v-on="$listeners" />
     </template>
   </div>
 </template>
@@ -169,12 +168,12 @@ Notre composant est encore difficile, mais nous avons maintenant une idée des h
       loading: { type: Boolean, default: false },
     },
     computed: {
-      tasksInOrder() {
-        return [
-          ...this.tasks.filter(t => t.state === 'TASK_PINNED'),
-          ...this.tasks.filter(t => t.state !== 'TASK_PINNED'),
-        ];
-      },
++     tasksInOrder() {
++       return [
++         ...this.tasks.filter(t => t.state === 'TASK_PINNED'),
++         ...this.tasks.filter(t => t.state !== 'TASK_PINNED'),
++       ];
++     },
       isEmpty() {
         return this.tasks.length === 0;
       },

diff --git a/content/intro-to-storybook/vue/fr/data.md b/content/intro-to-storybook/vue/fr/data.md
@@ -90,14 +90,14 @@ Dans `src/components/PureTaskList.vue`:
 
 ```html:title=src/components/PureTaskList.vue
 <template>
-  <!-- même contenu qu'avant -->
+  <!-- same content as before -->
 </template>
 
 <script>
   import Task from './Task';
   export default {
     name: 'PureTaskList',
-    // même contenu qu'avant
+    // same content as before
   };
 </script>
 ```
@@ -126,28 +126,28 @@ In `src/components/TaskList.vue`:
 La raison pour laquelle la version de présentation de `TaskList` est séparée est qu'il est plus facile à tester et à isoler. Comme il ne dépend pas de la présence d'un magasin, il est beaucoup plus facile de le gérer du point de vue des tests. Renommons `src/components/TaskList.stories.js` en `src/components/PureTaskList.stories.js`, et assurons nous que nos stories utilisent la version de présentation :
 
 ```diff:title=src/components/PureTaskList.stories.js
-import PureTaskList from './PureTaskList';
++ import PureTaskList from './PureTaskList';
 
 import * as TaskStories from './Task.stories';
 
 export default {
-  component: PureTaskList,
-  title: 'PureTaskList',
++ component: PureTaskList,
++ title: 'PureTaskList',
   decorators: [() => '<div style="padding: 3rem;"><story /></div>'],
 };
 
 const Template = (args, { argTypes }) => ({
-  components: { PureTaskList },
++ components: { PureTaskList },
   props: Object.keys(argTypes),
-  // Nous réutilisons nos actions de task.stories.js
+  // We are reusing our actions from task.stories.js
   methods: TaskStories.actionsData,
-  template: '<PureTaskList v-bind="$props" @pin-task="onPinTask" @archive-task="onArchiveTask" />',
++ template: '<PureTaskList v-bind="$props" @pin-task="onPinTask" @archive-task="onArchiveTask" />',
 });
 
 export const Default = Template.bind({});
 Default.args = {
-  // Arranger les histoires à travers la composition d'arguments.
-  // Les données ont été héritées de l'histoire par défaut dans task.stories.js.
+  // Shaping the stories through args composition.
+  // The data was inherited from the Default story in task.stories.js.
   tasks: [
     { ...TaskStories.Default.args.task, id: '1', title: 'Task 1' },
     { ...TaskStories.Default.args.task, id: '2', title: 'Task 2' },
@@ -160,8 +160,8 @@ Default.args = {
 
 export const WithPinnedTasks = Template.bind({});
 WithPinnedTasks.args = {
-  // Arranger les histoires à travers la composition d'arguments.
-  // Les données ont été héritées de l'histoire par défaut dans task.stories.js.
+  // Shaping the stories through args composition.
+  // Inherited data coming from the Default story.stories.js.
   tasks: [
     ...Default.args.tasks.slice(0, 5),
     { id: '6', title: 'Task 6 (pinned)', state: 'TASK_PINNED' },
@@ -176,8 +176,8 @@ Loading.args = {
 
 export const Empty = Template.bind({});
 Empty.args = {
-  // Arranger les histoires à travers la composition d'arguments.
-  // Les données ont été héritées de l'histoire par défaut dans task.stories.js.
+  // Shaping the stories through args composition.
+  // Inherited data coming from the Loading story.stories.js.
   ...Loading.args,
   loading: false,
 };
@@ -193,23 +193,23 @@ Empty.args = {
 De même, nous devons utiliser `PureTaskList` dans notre test Jest :
 
 ```diff:title=tests/unit/PureTaskList.spec.js
-
 import Vue from 'vue';
 
-import PureTaskList from '../../src/components/PureTaskList.vue';
++ import PureTaskList from '../../src/components/PureTaskList.vue';
 
-import { WithPinnedTasks } from '../../src/components/PureTaskList.stories';
+//👇 Our story imported here
++ import { WithPinnedTasks } from '../../src/components/PureTaskList.stories';
 
-it('rend les tâches épinglées au début de la liste', () => {
-  // rendu PureTaskList
-  const Constructor = Vue.extend(PureTaskList);
+it('renders pinned tasks at the start of the list', () => {
+  // render PureTaskList
++ const Constructor = Vue.extend(PureTaskList);
   const vm = new Constructor({
-    // ... en utilisant WithPinnedTasks.args
+    //👇 Story's args used with our test
     propsData: WithPinnedTasks.args,
   }).$mount();
   const firstTaskPinned = vm.$el.querySelector('.list-item:nth-child(1).TASK_PINNED');
 
-  // Nous nous attendons à ce que la tâche épinglée soit rendue en premier, pas à la fin
+  // We expect the pinned task to be rendered first, not at the end
   expect(firstTaskPinned).not.toBe(null);
 });
 ```

diff --git a/content/intro-to-storybook/vue/fr/deploy.md b/content/intro-to-storybook/vue/fr/deploy.md
@@ -81,25 +81,26 @@ Dans le dossier racine de notre projet, créez un nouveau répertoire appelé `.
 Créez un nouveau fichier appelé `chromatic.yml` comme celui ci-dessous. Remplacez pour changer le `project-token` par votre jeton de projet.
 
 ```yaml:title=.github/workflows/chromatic.yml
-# Nom des opérations
+# Workflow name
 name: 'Chromatic Deployment'
-# évènement déclencheur
+
+# Event for the workflow
 on: push
 
-# List des actions
+# List of jobs
 jobs:
   test:
-    # Système d'exploitation
+    # Operating System
     runs-on: ubuntu-latest
-    # Etapes de travail
+    # Job steps
     steps:
       - uses: actions/checkout@v1
       - run: yarn
-        # 👇 Ajout de Chromatics comme une étape des opérations
+        #👇 Adds Chromatic as a step in the workflow
       - uses: chromaui/action@v1
-        # Options requises pour la GitHub Action de Chromatic
+        # Options required for Chromatic's GitHub Action
         with:
-          # 👇 jeton du projet Chromatic, voir https://www.learnstorybook.com/intro-to-storybook/ember/en/deploy/ pour l'obtenir
+          #👇 Chromatic projectToken, see https://www.learnstorybook.com/intro-to-storybook/vue/en/deploy/ to obtain it
           projectToken: project-token
           token: ${{ secrets.GITHUB_TOKEN }}
 ```

diff --git a/content/intro-to-storybook/vue/fr/get-started.md b/content/intro-to-storybook/vue/fr/get-started.md
@@ -16,12 +16,12 @@ Nous allons suivre quelques étapes pour configurer votre environnement. Pour co
 Exécutons les commandes suivantes :
 
 ```bash
-# Cloner le modèle
+# Clone the template
 npx degit chromaui/intro-storybook-vue-template taskbox
 
 cd taskbox
 
-# Installation des dépendances
+# Install dependencies
 yarn
 
 ```
@@ -33,13 +33,13 @@ yarn
 Nous pouvons maintenant vérifier rapidement que les différentes environnements de votre application fonctionnent correctement :
 
 ```bash
-# Exécutez les tests (Jest) dans un terminal :
+# Run the test runner (Jest) in a terminal:
 yarn test:unit
 
-# Exécutez le composant d'exploration sur le port 6006 :
+# Start the component explorer on port 6006:
 yarn storybook
 
-# Exécutez l'application sur le port 8080 :
+# Run the frontend app proper on port 8080:
 yarn serve
 ```
 

diff --git a/content/intro-to-storybook/vue/fr/screen.md b/content/intro-to-storybook/vue/fr/screen.md
@@ -19,8 +19,8 @@ Comme notre application est très simple, l'écran que nous allons créer est as
     <div v-if="error" class="page lists-show">
       <div class="wrapper-message">
         <span class="icon-face-sad" />
-        <div class="title-message">Oh non !</div>
-        <div class="subtitle-message">Un problème est survenu</div>
+        <div class="title-message">Oh no!</div>
+        <div class="subtitle-message">Something went wrong</div>
       </div>
     </div>
 
@@ -69,27 +69,27 @@ Ensuite, nous pouvons créer un conteneur, qui récupère à nouveau les donnée
 Nous modifions également le composant `App` pour intégrer `InboxScreen` (éventuellement, nous utiliserions un routeur pour choisir le bon écran, mais ne nous inquiétons pas à ce sujet ici) :
 
 ```diff:title=src/App.vue
-
 <template>
   <div id="app">
-    <task-list />
-    <InboxScreen />
+-   <task-list />
++   <InboxScreen />
   </div>
 </template>
 
 <script>
   import store from './store';
-  import TaskList from './components/TaskList.vue';
-  import InboxScreen from './components/InboxScreen.vue';
+- import TaskList from './components/TaskList.vue';
++ import InboxScreen from './components/InboxScreen.vue';
   export default {
     name: 'app',
     store,
     components: {
-      TaskList,
-      InboxScreen,
+-     TaskList
++     InboxScreen,
     },
   };
 </script>
+
 <style>
   @import './index.css';
 </style>
@@ -140,28 +140,29 @@ Cependant, les développeurs **devront** inévitablement rendre les conteneurs p
 La bonne nouvelle est qu'il est facile de fournir un magasin Vuex au composant `PureInboxScreen` dans une histoire ! Nous pouvons créer un nouveau magasin dans notre fichier d'histoire et le transmettre comme contexte de l'histoire :
 
 ```diff:title=src/components/PureInboxScreen.stories.js
++ import Vue from 'vue';
++ import Vuex from 'vuex';
 
-import Vue from 'vue';
-import Vuex from 'vuex';
 import PureInboxScreen from './PureInboxScreen.vue';
-import { action } from '@storybook/addon-actions';
-import * as TaskListStories from './PureTaskList.stories';
-
-Vue.use(Vuex);
-
-export const store = new Vuex.Store({
-  state: {
-    tasks: TaskListStories.Default.args.tasks,
-  },
-  actions: {
-    pinTask(context, id) {
-      action('pin-task')(id);
-    },
-    archiveTask(context, id) {
-      action('archive-task')(id);
-    },
-  },
-});
+
++ import { action } from '@storybook/addon-actions';
++ import * as TaskListStories from './PureTaskList.stories';
+
++Vue.use(Vuex);
+
++ export const store = new Vuex.Store({
++  state: {
++    tasks: TaskListStories.Default.args.tasks,
++  },
++  actions: {
++    pinTask(context, id) {
++      action('pin-task')(id);
++    },
++    archiveTask(context, id) {
++      action('archive-task')(id);
++    },
++  },
++ });
 
 export default {
   title: 'PureInboxScreen',