Merge pull request #5 from vtex-apps/fix/step-correction-translation

Improvements on course
vtex-apps · May 4, 2020 · c1f3cf9 · c1f3cf9
2 parents ec780e7 + 502ec94
commit c1f3cf9
Show file tree

Hide file tree

Showing 47 changed files with 1,165 additions and 1,017 deletions.
diff --git a/course/steps/csshandles/en.md b/course/steps/csshandles/en.md
@@ -19,22 +19,22 @@ Analyzing the [recipe](https://vtex.io/docs/recipes/style/using-css-handles-for-
 1. Create a new file in the `CSS` folder, naming it `vtex.{AppName}.css`
 2. Use the CSS Handle of the component that will be customized in this file in the following format: 
 
-```css
-.{CSSHandle} {
-    {PropriedadeDeCSS}: {ValorDesejado};
-    {PropriedadeDeCSS}: {ValorDesejado};
-}
-```
+    ```css
+    .{CSSHandle} {
+        {PropriedadeDeCSS}: {ValorDesejado};
+        {PropriedadeDeCSS}: {ValorDesejado};
+    }
+    ```
 
 3. Lacking CSS Handles, apply permitted CSS Selectors, such as `:global(vtex-{componentName})`.
 4. To apply CSS to a specific block and not to every block of that type, use the blockClass resource, which appears next to the CSS Handles when inspecting your code. The blockClass must be declared as a prop in the block in question, and thus be referenced in the style file as shown below:
 
-```css
-.{CSSHandle}--{blockClass} {
-    {PropriedadeDeCSS}: {ValorDesejado};
-    {PropriedadeDeCSS}: {ValorDesejado};
-}
-```
+    ```css
+    .{CSSHandle}--{blockClass} {
+        {PropriedadeDeCSS}: {ValorDesejado};
+        {PropriedadeDeCSS}: {ValorDesejado};
+    }
+    ```
 
 ## Customizing the Info Card
 

diff --git a/course/steps/csshandles/es.md b/course/steps/csshandles/es.md
@@ -19,22 +19,22 @@ Analizando el [recipe](https://vtex.io/docs/recipes/style/using-css-handles-for-
 1. Cree un nuevo archivo dentro de la carpeta `CSS` con el nombre `vtex.{AppName}.css`.
 2. Utilice el CSS Handle del componente que se personalizará dentro de este archivo siguiendo el formato a continuación:
 
-```css
-.{CSSHandle} {
-    {PropriedadeDeCSS}: {ValorDesejado};
-    {PropriedadeDeCSS}: {ValorDesejado};
-}
-```
+    ```css
+    .{CSSHandle} {
+        {PropriedadeDeCSS}: {ValorDesejado};
+        {PropriedadeDeCSS}: {ValorDesejado};
+    }
+    ```
 
 3. En ausencia de CSS Handles, aplicar CSS Selectors permitidos, como es el caso de  `:global(vtex-{componentName})`.
 4. Para aplicar CSS en un bloque específico y no a todos los bloques de aquel tipo, se utiliza el recurso de blockClass, que aparece junto a los handles de css al inspeccionar el código. Los blockClass deben ser declarados como una prop en el bloque en cuestión, y luego hacer referencia en el archivo de estilo como se muestra a continuación:
 
-```css
-.{CSSHandle}--{blockClass} {
-    {PropriedadeDeCSS}: {ValorDesejado};
-    {PropriedadeDeCSS}: {ValorDesejado};
-}
-```
+    ```css
+    .{CSSHandle}--{blockClass} {
+        {PropriedadeDeCSS}: {ValorDesejado};
+        {PropriedadeDeCSS}: {ValorDesejado};
+    }
+    ```
 
 ## Personalizando el Info Card
 

diff --git a/course/steps/csshandles/pt.md b/course/steps/csshandles/pt.md
@@ -19,22 +19,22 @@ Analisando a [recipe](https://vtex.io/docs/recipes/style/using-css-handles-for-s
 1. Criar um novo arquivo dentro da pasta `CSS` com o nome `vtex.{AppName}.css`
 2. Usar o CSS Handle do componente que será customizado dentro deste arquivo seguindo o formato abaixo:
 
-```css
-.{CSSHandle} {
-    {PropriedadeDeCSS}: {ValorDesejado};
-    {PropriedadeDeCSS}: {ValorDesejado};
-}
-```
+    ```css
+    .{CSSHandle} {
+        {PropriedadeDeCSS}: {ValorDesejado};
+        {PropriedadeDeCSS}: {ValorDesejado};
+    }
+    ```
 
 3. Na falta de CSS Handles, aplicar CSS Selectors permitidos, como é o caso do `:global(vtex-{componentName})`.
 4. Para aplicar CSS em um bloco específico e não a todos os blocos daquele tipo, usa-se o recurso de blockClass, que aparece ao lado dos handles de css ao inspecionar seu código. As blockClass devem ser declaradas como uma prop no bloco em questão, e então referenciado no arquivo de estilo como mostrado abaixo:
 
-```css
-.{CSSHandle}--{blockClass} {
-    {PropriedadeDeCSS}: {ValorDesejado};
-    {PropriedadeDeCSS}: {ValorDesejado};
-}
-```
+    ```css
+    .{CSSHandle}--{blockClass} {
+        {PropriedadeDeCSS}: {ValorDesejado};
+        {PropriedadeDeCSS}: {ValorDesejado};
+    }
+    ```
 
 ## Customizando o Info Card
 

diff --git a/course/steps/flexlayout/en.md b/course/steps/flexlayout/en.md
@@ -39,7 +39,7 @@ Below, we have an example of a flex layout comprised of a `flex-layout.row` with
     }
   },
 
-  "rich-text#deletar": {
+  "rich-text#delete": {
     "props": {
       "text": "I'll be deleted soon"
     }
@@ -54,21 +54,21 @@ Below, we have an example of a flex layout comprised of a `flex-layout.row` with
 4. Declare the `flex-layout.col` block in your `home.jsonc` file with two image components as children: `image#electronics` and `image#major-appliance`, *in this order*.
 5. Define the `image` blocks with the following props:
 
-```json
-...
-"image#electronics": {
-  "props": {
-    "src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/electronics_banner___25d69b49f8224b369375e68513b4d593.png",
-    "maxWidth": "100%"
-  }
-},
-"image#major-appliance": {
-  "props": {
-    "src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/major_appliance_banner___bb10093866a127345ddfbcca3efa5022.png",
-    "maxWidth": "100%"
-  }
-}
-```
+    ```json
+    ...
+    "image#electronics": {
+      "props": {
+        "src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/electronics_banner___25d69b49f8224b369375e68513b4d593.png",
+        "maxWidth": "100%"
+      }
+    },
+    "image#major-appliance": {
+      "props": {
+        "src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/major_appliance_banner___bb10093866a127345ddfbcca3efa5022.png",
+        "maxWidth": "100%"
+      }
+    }
+    ```
 
 The result should be similar to this:
 

diff --git a/course/steps/flexlayout/es.md b/course/steps/flexlayout/es.md
@@ -55,21 +55,21 @@ A continuación, tenemos un ejemplo de flex layout compuesto de un `flex-layout.
 4. Declare el bloque `flex-layout.col` en su archivo `home.jsonc` con dos componentes de imagen como children: `image#electronics` y `image#major-appliance`, *en este orden*.
 5. Defina los bloques `image` con las siguientes props:
 
-```json
-...
-"image#electronics": {
-  "props": {
-    "src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/electronics_banner___25d69b49f8224b369375e68513b4d593.png",
-    "maxWidth": "100%"
-  }
-},
-"image#major-appliance": {
-  "props": {
-    "src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/major_appliance_banner___bb10093866a127345ddfbcca3efa5022.png",
-    "maxWidth": "100%"
-  }
-}
-```
+    ```json
+    ...
+    "image#electronics": {
+      "props": {
+        "src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/electronics_banner___25d69b49f8224b369375e68513b4d593.png",
+        "maxWidth": "100%"
+      }
+    },
+    "image#major-appliance": {
+      "props": {
+        "src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/major_appliance_banner___bb10093866a127345ddfbcca3efa5022.png",
+        "maxWidth": "100%"
+      }
+    }
+    ```
 
 El resultado obtenido debe ser semejante a este:
 

diff --git a/course/steps/flexlayout/pt.md b/course/steps/flexlayout/pt.md
@@ -54,21 +54,21 @@ Abaixo, temos um exemplo de flex layout composto de um `flex-layout.row` com doi
 4. Declare o bloco `flex-layout.col` no seu arquivo `home.jsonc` com dois componentes de imagem como children: `image#electronics` e `image#major-appliance`, *nesta ordem*.
 5. Defina os blocos `image` com as seguintes props:
 
-```json
-...
-"image#electronics": {
-  "props": {
-    "src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/electronics_banner___25d69b49f8224b369375e68513b4d593.png",
-    "maxWidth": "100%"
-  }
-},
-"image#major-appliance": {
-  "props": {
-    "src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/major_appliance_banner___bb10093866a127345ddfbcca3efa5022.png",
-    "maxWidth": "100%"
-  }
-}
-```
+    ```json
+    ...
+    "image#electronics": {
+      "props": {
+        "src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/electronics_banner___25d69b49f8224b369375e68513b4d593.png",
+        "maxWidth": "100%"
+      }
+    },
+    "image#major-appliance": {
+      "props": {
+        "src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/major_appliance_banner___bb10093866a127345ddfbcca3efa5022.png",
+        "maxWidth": "100%"
+      }
+    }
+    ```
 
 O resultado obtido deve ser semelhante a este:
 

diff --git a/course/steps/footer/en.md b/course/steps/footer/en.md
@@ -38,19 +38,19 @@ We will not implement the menu during this activity, since it's already be dealt
 1. In the `footer.jsonc` file, copy the code above and to use in your theme; 
 2. Thereafter, declare the following block:
 
-```json
-  "flex-layout.row#footer-1-desktop": {
-    "children": [
-      "flex-layout.col#footer-left-desktop",
-      "flex-layout.col#footer-right-desktop"
-    ],
-    "props": {
-      "blockClass": "footer-row",
-      "paddingTop": 7,
-      "paddingBottom": 7
-    }
-  }
-```
+    ```json
+      "flex-layout.row#footer-1-desktop": {
+        "children": [
+          "flex-layout.col#footer-left-desktop",
+          "flex-layout.col#footer-right-desktop"
+        ],
+        "props": {
+          "blockClass": "footer-row",
+          "paddingTop": 7,
+          "paddingBottom": 7
+        }
+      }
+    ```
 
 3. Based on the block above, build the `flex-layout.col#footer-left-desktop`, having the following children: `accepted-payment-methods`;
 

diff --git a/course/steps/footer/es.md b/course/steps/footer/es.md
@@ -38,19 +38,19 @@ No vamos a implementar el menú en esta actividad, porque ya fue visto en el con
 1. En el archivo `footer.jsonc`, copie el código anterior para utilizarlo en su tema.
 2. Declare el siguiente bloque en seguida:
 
-```json
-  "flex-layout.row#footer-1-desktop": {
-    "children": [
-      "flex-layout.col#footer-left-desktop",
-      "flex-layout.col#footer-right-desktop"
-    ],
-    "props": {
-      "blockClass": "footer-row",
-      "paddingTop": 7,
-      "paddingBottom": 7
-    }
-  }
-```
+    ```json
+      "flex-layout.row#footer-1-desktop": {
+        "children": [
+          "flex-layout.col#footer-left-desktop",
+          "flex-layout.col#footer-right-desktop"
+        ],
+        "props": {
+          "blockClass": "footer-row",
+          "paddingTop": 7,
+          "paddingBottom": 7
+        }
+      }
+    ```
 
 3. Basado en el bloque anterior, construya el `flex-layout.col#footer-left-desktop` con el siguiente children: `accepted-payment-methods` .
 

diff --git a/course/steps/footer/pt.md b/course/steps/footer/pt.md
@@ -38,19 +38,19 @@ Não implementaremos o menu nessa atividade, pois ele já foi visto no contexto
 1. No arquivo `footer.jsonc`, copie o código acima para usá-lo no seu tema;
 2. Declare o seguinte bloco em seguida:
 
-```json
-  "flex-layout.row#footer-1-desktop": {
-    "children": [
-      "flex-layout.col#footer-left-desktop",
-      "flex-layout.col#footer-right-desktop"
-    ],
-    "props": {
-      "blockClass": "footer-row",
-      "paddingTop": 7,
-      "paddingBottom": 7
-    }
-  }
-```
+    ```json
+      "flex-layout.row#footer-1-desktop": {
+        "children": [
+          "flex-layout.col#footer-left-desktop",
+          "flex-layout.col#footer-right-desktop"
+        ],
+        "props": {
+          "blockClass": "footer-row",
+          "paddingTop": 7,
+          "paddingBottom": 7
+        }
+      }
+    ```
 
 3. Com base no bloco acima, construa o `flex-layout.col#footer-left-desktop` com a seguinte children: `accepted-payment-methods`;