fix: minor updates to vue tutorial (carbon-design-system#2352)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
emyarod · Jun 10, 2021 · ef01c29 · ef01c29
1 parent f156fba
commit ef01c29
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 25 deletions.
diff --git a/src/pages/developing/vue-tutorial/step-1.mdx b/src/pages/developing/vue-tutorial/step-1.mdx
@@ -156,7 +156,7 @@ using the Vue CLI. These include:
 - `@vue/cli-plugin-babel`: To ensure we produce well supported code.
 - `@vue/cli-plugin-eslint`: To allow us to catch potential errors.
 - `@vue/cli-plugin-unit-jest`: To allow us to unit test our code.
-- `node-sass`: To allow us to use the sass css precompiler.
+- `sass-loader`: To allow us to use the sass css precompiler.
 
 NOTE: We could have installed these separately but using the CLI to set this up
 for us ensures a good base config for these dependencies.
@@ -422,9 +422,7 @@ each individual icon we will use.
 <!-- prettier-ignore-start -->
 ```javascript path=src/components/TutorialHeader/TutorialHeader.vue
 <script>
-import Notification20 from "@carbon/icons-vue/es/notification/20";
-import UserAvatar20 from "@carbon/icons-vue/es/user--avatar/20";
-import AppSwitcher20 from "@carbon/icons-vue/es/app-switcher/20";
+import { Notification20, UserAvatar20, AppSwitcher20 } from '@carbon/icons-vue';
 
 export default {
   name: "TutorialHeader",

diff --git a/src/pages/developing/vue-tutorial/step-2.mdx b/src/pages/developing/vue-tutorial/step-2.mdx
@@ -215,21 +215,6 @@ You may notice that the styles look off. Don't worry, we'll fix these later.
 
 In our second row we'll use `CvTabs` and `CvButton` components.
 
-```javascript path=src/views/LandingPage/LandingPage.vue
-const props = {
-  tabs: {
-    selected: 0,
-    triggerHref: '#',
-    role: 'navigation',
-  },
-  tab: {
-    href: '#',
-    role: 'presentation',
-    tabIndex: 0,
-  },
-};
-```
-
 Modify the second row to use the `Tab` component.
 
 ```html path=src/views/LandingPage/LandingPage.vue
@@ -471,12 +456,16 @@ setting the background in an absolutely positioned pseudo element.
   &::before {
     content: '';
     position: absolute;
-    left: -$spacing-05;
+    left: -$spacing-06;
     top: 0;
-    right: -$spacing-05;
+    right: -$spacing-06;
     bottom: 0;
     background: $ui-01;
-    z-index: -1;
+  }
+
+  > * {
+    /* lift above position absolute */
+    position: relative;
   }
 }
 ```

diff --git a/src/pages/developing/vue-tutorial/step-4.mdx b/src/pages/developing/vue-tutorial/step-4.mdx
@@ -286,9 +286,7 @@ While we're here next to the component imports, let's import the icons that
 we'll need as well.
 
 ```javascript path=src/views/LandingPage/LandingPage.vue
-import Globe32 from '@carbon/icons-vue/lib/globe/32';
-import PersonFavorite32 from '@carbon/icons-vue/lib/person--favorite/32';
-import Application32 from '@carbon/icons-vue/lib/application/32';
+import { Globe32, PersonFavorite32, Application32 } from '@carbon/icons-vue';
 ```
 
 <InlineNotification>