`\n- Added `info-card` classes\n- Used `props` to render the heading, body copy, and icon\n- Set columns to match the grid\n\n_Note: At extra large viewports, we are using _`bx--col-xlg-3 bx--offset-xlg-1`_ so each column takes up 3 of the 16 grid columns, with a 1 column offset._\n\n## Use components\n\nOur styling is not complete yet, but with our components built let's put them to use. In `LandingPage.vue`, import the components towards the top of the script section. If you haven't added a script section, do so now.\n\n##### src/views/LandingPage/LandingPage.vue\n\n```javascript\n\n```\n\nWhile we're here next to the component imports, let's import the icons that we'll need as well.\n\n##### src/views/LandingPage/LandingPage.vue\n\n```javascript\nimport Globe32 from '@carbon/icons-vue/lib/globe/32';\nimport PersonFavorite32 from '@carbon/icons-vue/lib/person--favorite/32';\nimport Application32 from '@carbon/icons-vue/lib/application/32';\n```\n\n_Note: You'll notice that these 32px icons aren't the pictograms as designed. The Carbon team is currently working on adding pictograms to the icons packages. Until then, we'll use the biggest SVGs._\n\nDon't forget to add the icons to the list of components used in our template. Wait a minute, are they being used by our template? Well, yes and no. The components are going to be passed as an attribute rather than being used as a DOM element. Vue treats this use case differently and instead of adding to the components property, we need to assign the icons directly to the `this` object. We can achieve this in a number of different ways, for example as data or computed properties. The following is our preferred method when reactivity is not needed.\n\nIn the script section of the component add the lifecycle method `created()` to add the icons to the component.\n\n##### src/views/LandingPage/LandingPage.vue\n\n```javascript\n created() {\n // Add icons to this\n Object.assign(this, {\n Globe32,\n PersonFavorite32,\n Application32\n });\n }\n```\n\nWith everything imported, replace the current template content:\n\n##### src/views/LandingPage/LandingPage.vue\n\n```html\n\n \n```\n\n\nThen slot the `InfoCard` content inside the `InfoSection` tag to give.\n\n##### src/views/LandingPage/LandingPage.vue\n\n\n```html\n\n \n```\n\n\n_Note: Now is a good time to resize your browser from phone to extra large viewport widths to see how the responsive grid is working before we add further styling._\n\n## Add styling\n\nHere's our design showing the spacing tokens that we need to add. We also need to set the type style and borders.\n\n\n\nInfo section spacing \n\n### Layout\n\nStarting with layout, add the style section to `src/components/InfoSection/InfoCard.vue`.\n\n##### src/components/InfoSection/InfoCard.vue\n\n```scss\n\n```\n\nOnce you save, go ahead and resize your browser to see the responsive layout at the different breakpoints. Make sure to review these color and spacing tokens. There are also a few breakpoint mixins that may be new to you. The `@carbon/layout` [SassDoc](https://github.com/carbon-design-system/carbon/blob/master/packages/layout/docs/sass.md) is a great reference to see what all is available.\n\n### Type\n\nOur `InfoCard` headings look to be too small. We need to increase their font sizes according to the design spec with:\n\n##### src/components/InfoSection/InfoCard.vue\n\n```scss\n.info-card__heading {\n @include carbon--type-style('productive-heading-03');\n}\n```\n\nAlso, the design has the last word in each subheading as bold. To accomplish that, add this computed property to `InfoCard.vue`.\n\n##### src/components/InfoSection/InfoCard.vue\n\n```javascript\ncomputed: {\n // Take in a phrase and separate the third word in an array\n splitHeading() {\n const splitHeading = this.heading.split(\" \");\n const finalWord = splitHeading.pop();\n return [splitHeading.join(\" \"), finalWord];\n }\n}\n```\n\nThen, update `InfoCard.vue` to use `splitHeading`.\n\n##### src/components/InfoSection/InfoCard.vue\n\nReplacing\n\n```html\nDAP violations \n\nThat first violation is for the off-screen \"skip to content\" link. This link isn't shown and is used to assist screen reading, so the color contrast violation can be ignored.\n\nBut, those three other violations came from the `` element used in new `InfoCard`. Since the `` element requires a label, it seems like we may be using the wrong semantic element. A humble `
\n
\n```\n\nWith the new components:\n\n##### src/views/LandingPage/LandingPage.vue\n\n\n```html\n\n
\n The Principles
\nCarbon is Open
\n Carbon is Modular
\n Carbon is Consistent
\n\n {{heading}}\n
\n```\n\nwith\n\n##### src/components/InfoSection/InfoCard.vue\n\n```html\n\n {{ splitHeading[0] }}\n {{ splitHeading[1] }}\n
\n```\n\nFinally, add the following declaration block in the style section of `InfoCard.vue` to set body copy styles and to bottom-align the icons.\n\n##### src/components/InfoSection/InfoCard.vue\n\n```scss\n.info-card__body {\n margin-top: $spacing-06;\n flex-grow: 1; // fill space so icons are bottom aligned\n @include type-style('body-long-01');\n\n // prevent large line lengths between small and medium viewports\n @include carbon--breakpoint-between(321px, md) {\n max-width: 75%;\n }\n}\n```\n\n## Check accessibility\n\nWe've added new markup and styles, so it's a good practice to check [DAP](https://www.ibm.com/able/dynamic-assessment-plug-in.html) and make sure our rendered markup is on the right track for accessibility.\n\nWith the browser extension installed, Chrome in this example, open Dev Tools and run DAP.\n\n\n\n` will suffice.\n\nIn `InfoCard.vue`, replace the `` opening and closing tags with `
` tags.\n\nAlso it's time to fix it if you didn't but I'm sure you can manage that by yourself.\n\n## Submit pull request\n\nWe're going to submit a pull request to verify completion of this tutorial step.\n\n### Continuous integration (CI) check\n\nRun the CI check to make sure we're all set to submit a pull request.\n\n```bash\n$ yarn ci-check\n```\n\n_Note: Having issues running the CI check? [Step 1](/tutorial/vue/step-1#continuous-integration-ci-check) has troubleshooting notes that may help._\n\n### Git commit and push\n\nBefore we can create a pull request, stage and commit all of your changes:\n\n```bash\n$ git add --all && git commit -m \"feat(tutorial): complete step 4\"\n```\n\nThen, push to your repository:\n\n```bash\n$ git push origin vue-step-4\n```\n\n_Note: Having issues pushing your changes? [Step 1](/tutorial/vue/step-1#git-commit-and-push) has troubleshooting notes that may help._\n\n### Pull request (PR)\n\nFinally, visit [carbon-tutorial](https://github.com/carbon-design-system/carbon-tutorial) to \"Compare & pull request\". In doing so, make sure that you are comparing to `vue-step-4` into `base: vue-step-4`.\n\n_Note: Expect your tutorial step PRs to be reviewed by the Carbon team but not merged. We'll close your PR so we can keep the repository's remote branches pristine and ready for the next person!_\n","type":"Mdx","contentDigest":"17a43c0be353daa2b71d1463cd67ff48","counter":1460,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"4. Creating components","description":"Welcome to Carbon! This tutorial will guide you in creating a Vue app with the Carbon Design System.","internal":false,"tabs":["Overview","Step 1","Step 2","Step 3","Step 4","Step 5","Wrapping up"]},"exports":{},"rawBody":"---\ntitle: 4. Creating components\ndescription: Welcome to Carbon! This tutorial will guide you in creating a Vue app with the Carbon Design System.\ninternal: false\ntabs:\n ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']\n---\n\n### With two pages comprised entirely of Carbon components, let's revisit the landing page and build a couple components of our own by using Carbon icons and tokens.\n\n\n\nFork, clone and branch \nReview design \nCreate components \nUse components \nAdd styling \nCheck accessibility \nSubmit pull request \n\n \n\n## Preview\n\nCarbon provides a solid foundation for building web applications through its color palette, layout, spacing, type, as well as common building blocks in the form of components. So far, we've only used Carbon components to build out two pages.\n\nNext, we're going to use Carbon assets to build application-specific components. We'll do so by including accessibility and responsive considerations all throughout.\n\nA [preview](https://vue-step-5--carbon-tutorial-vue.netlify.com) of what you'll build (see bottom of page):\n\nInfo section layout \n\n## Create components\n\nFirst we need files for the components, so create an `InfoSection` folder in `src/components`. Even though we're building multiple components, their names all start with `Info`, so it makes sense to have them share one folder in components. Create these files:\n\n### Add files\n\n```bash\nsrc/components/InfoSection\n├──index.js\n└──InfoCard.vue\n└──InfoSection.vue\n```\n\nLike our other components, `index.js` will serve as an entrypoint.\n\n_Note: To adhere to the [Vue style guide](https://vuejs.org/v2/style-guide/) we have used multi word component names. This style guide stipulation is why all `@carbon/vue` components have a `cv` prefix._\n\n##### src/components/InfoSection/index.js\n\n```javascript\nimport InfoSection from './InfoSection';\nimport InfoCard from './InfoCard';\n\nexport { InfoSection, InfoCard };\n```\n\n### InfoSection component\n\nLet's create the parent component that includes the \"The Principles\" heading. That markup currently looks like this in `LandingPage.vue`:\n\n##### src/views/LandingPage/LandingPage.vue\n\n```html\n` instead of `
\n
\n```\n\nWe want to do a few things when abstracting it to a component. First, we only want Carbon (`bx--`) and this component's class names; we don't want to include `landing-page__r3` as that's specific to the landing page. That will be passed in as a property to the component.\n\nWe'll also:\n\n- Add component class names like `info-section` and `info-section__heading`\n- Semantically use `\n
\n The Principles
\nCarbon is Open
\n Carbon is Modular
\n Carbon is Consistent
\n`\n- Update the grid columns to match the design\n- Replace `The Principles` with `{{heading}}`\n- Replace columns 2 - 4 with a slot.\n\nUsing `props` we can render any heading and any number of children components (`InfoCard` that we'll build soon.)\n\n##### src/components/InfoSection/InfoSection.vue\n\n```html\n\n \n \n\n```\n\nThen name our component and add a property to the script section.\n\n##### src/components/InfoSection/InfoSection.vue\n\n```javascript\n\n```\n\nAt this point let's add styling for the new class names that we just added.\n\n##### src/components/InfoSection/InfoSection.vue\n\n```scss\n\n```\n\n### InfoCard component\n\nNext up we're going to build a component for columns 2 - 4, which currently looks like `\n \n```\n\nGive it a name and add props\n\n```javascript\n\n```\n\n_Note: Make sure to export the two components from index.js!_\n\nIn doing so, we:\n\n- Used the semantic `` instead of `
\n
\n {{ heading }}
\nCarbon is Open
`. Create a new file InfoCard.vue, add:\n\n##### src/components/InfoSection/InfoCard.vue\n\n```html\n\n {{ heading }}
\n{{ body }}
\n`\n- Added `info-card` classes\n- Used `props` to render the heading, body copy, and icon\n- Set columns to match the grid\n\n_Note: At extra large viewports, we are using _`bx--col-xlg-3 bx--offset-xlg-1`_ so each column takes up 3 of the 16 grid columns, with a 1 column offset._\n\n## Use components\n\nOur styling is not complete yet, but with our components built let's put them to use. In `LandingPage.vue`, import the components towards the top of the script section. If you haven't added a script section, do so now.\n\n##### src/views/LandingPage/LandingPage.vue\n\n```javascript\n\n```\n\nWhile we're here next to the component imports, let's import the icons that we'll need as well.\n\n##### src/views/LandingPage/LandingPage.vue\n\n```javascript\nimport Globe32 from '@carbon/icons-vue/lib/globe/32';\nimport PersonFavorite32 from '@carbon/icons-vue/lib/person--favorite/32';\nimport Application32 from '@carbon/icons-vue/lib/application/32';\n```\n\n_Note: You'll notice that these 32px icons aren't the pictograms as designed. The Carbon team is currently working on adding pictograms to the icons packages. Until then, we'll use the biggest SVGs._\n\nDon't forget to add the icons to the list of components used in our template. Wait a minute, are they being used by our template? Well, yes and no. The components are going to be passed as an attribute rather than being used as a DOM element. Vue treats this use case differently and instead of adding to the components property, we need to assign the icons directly to the `this` object. We can achieve this in a number of different ways, for example as data or computed properties. The following is our preferred method when reactivity is not needed.\n\nIn the script section of the component add the lifecycle method `created()` to add the icons to the component.\n\n##### src/views/LandingPage/LandingPage.vue\n\n```javascript\n created() {\n // Add icons to this\n Object.assign(this, {\n Globe32,\n PersonFavorite32,\n Application32\n });\n }\n```\n\nWith everything imported, replace the current template content:\n\n##### src/views/LandingPage/LandingPage.vue\n\n```html\n\n \n```\n\n\nThen slot the `InfoCard` content inside the `InfoSection` tag to give.\n\n##### src/views/LandingPage/LandingPage.vue\n\n\n```html\n\n \n```\n\n\n_Note: Now is a good time to resize your browser from phone to extra large viewport widths to see how the responsive grid is working before we add further styling._\n\n## Add styling\n\nHere's our design showing the spacing tokens that we need to add. We also need to set the type style and borders.\n\n\n\nInfo section spacing \n\n### Layout\n\nStarting with layout, add the style section to `src/components/InfoSection/InfoCard.vue`.\n\n##### src/components/InfoSection/InfoCard.vue\n\n```scss\n\n```\n\nOnce you save, go ahead and resize your browser to see the responsive layout at the different breakpoints. Make sure to review these color and spacing tokens. There are also a few breakpoint mixins that may be new to you. The `@carbon/layout` [SassDoc](https://github.com/carbon-design-system/carbon/blob/master/packages/layout/docs/sass.md) is a great reference to see what all is available.\n\n### Type\n\nOur `InfoCard` headings look to be too small. We need to increase their font sizes according to the design spec with:\n\n##### src/components/InfoSection/InfoCard.vue\n\n```scss\n.info-card__heading {\n @include carbon--type-style('productive-heading-03');\n}\n```\n\nAlso, the design has the last word in each subheading as bold. To accomplish that, add this computed property to `InfoCard.vue`.\n\n##### src/components/InfoSection/InfoCard.vue\n\n```javascript\ncomputed: {\n // Take in a phrase and separate the third word in an array\n splitHeading() {\n const splitHeading = this.heading.split(\" \");\n const finalWord = splitHeading.pop();\n return [splitHeading.join(\" \"), finalWord];\n }\n}\n```\n\nThen, update `InfoCard.vue` to use `splitHeading`.\n\n##### src/components/InfoSection/InfoCard.vue\n\nReplacing\n\n```html\nDAP violations \n\nThat first violation is for the off-screen \"skip to content\" link. This link isn't shown and is used to assist screen reading, so the color contrast violation can be ignored.\n\nBut, those three other violations came from the `` element used in new `InfoCard`. Since the `` element requires a label, it seems like we may be using the wrong semantic element. A humble `
\n
\n```\n\nWith the new components:\n\n##### src/views/LandingPage/LandingPage.vue\n\n\n```html\n\n
\n The Principles
\nCarbon is Open
\n Carbon is Modular
\n Carbon is Consistent
\n\n {{heading}}\n
\n```\n\nwith\n\n##### src/components/InfoSection/InfoCard.vue\n\n```html\n\n {{ splitHeading[0] }}\n {{ splitHeading[1] }}\n
\n```\n\nFinally, add the following declaration block in the style section of `InfoCard.vue` to set body copy styles and to bottom-align the icons.\n\n##### src/components/InfoSection/InfoCard.vue\n\n```scss\n.info-card__body {\n margin-top: $spacing-06;\n flex-grow: 1; // fill space so icons are bottom aligned\n @include type-style('body-long-01');\n\n // prevent large line lengths between small and medium viewports\n @include carbon--breakpoint-between(321px, md) {\n max-width: 75%;\n }\n}\n```\n\n## Check accessibility\n\nWe've added new markup and styles, so it's a good practice to check [DAP](https://www.ibm.com/able/dynamic-assessment-plug-in.html) and make sure our rendered markup is on the right track for accessibility.\n\nWith the browser extension installed, Chrome in this example, open Dev Tools and run DAP.\n\n\n\n` will suffice.\n\nIn `InfoCard.vue`, replace the `` opening and closing tags with `
` tags.\n\nAlso it's time to fix it if you didn't but I'm sure you can manage that by yourself.\n\n## Submit pull request\n\nWe're going to submit a pull request to verify completion of this tutorial step.\n\n### Continuous integration (CI) check\n\nRun the CI check to make sure we're all set to submit a pull request.\n\n```bash\n$ yarn ci-check\n```\n\n_Note: Having issues running the CI check? [Step 1](/tutorial/vue/step-1#continuous-integration-ci-check) has troubleshooting notes that may help._\n\n### Git commit and push\n\nBefore we can create a pull request, stage and commit all of your changes:\n\n```bash\n$ git add --all && git commit -m \"feat(tutorial): complete step 4\"\n```\n\nThen, push to your repository:\n\n```bash\n$ git push origin vue-step-4\n```\n\n_Note: Having issues pushing your changes? [Step 1](/tutorial/vue/step-1#git-commit-and-push) has troubleshooting notes that may help._\n\n### Pull request (PR)\n\nFinally, visit [carbon-tutorial](https://github.com/carbon-design-system/carbon-tutorial) to \"Compare & pull request\". In doing so, make sure that you are comparing to `vue-step-4` into `base: vue-step-4`.\n\n_Note: Expect your tutorial step PRs to be reviewed by the Carbon team but not merged. We'll close your PR so we can keep the repository's remote branches pristine and ready for the next person!_\n","fileAbsolutePath":"/fargate/7b444b50/src/pages/tutorial/vue/step-4.mdx"}}}}