Summit Web Components for Applications

- How To Install
- Add to Packages
* Vue Install
- How To Use
+ Customization (designSystem.ts file)
- How To Deploy
- Build Information

---

__Project Abbreviation__: scu-web-components-applications

__URL Slug__: readme-project/summit-web-components-for-applications

__Developer Emails__: scott.rouse@summitcreditunion.com

__NPM URL__: https://www.npmjs.com/package/scu-components

__Repo URL__: https://bitbucket.org/summitcu/scu-design-system-app

__Documentation URL__: http://scu-components.s3-website.us-east-2.amazonaws.com/

__Design Source File__: https://www.figma.com/file/fyyyrkDxP3S6GOzNSCluwT/SCU-Summit-DSys-(Apps)?node-id=0%3A1

__Design Documentation File__: https://www.figma.com/file/dSTlIn5bgkNfgbvbHndI3r/SDS---Visuals?node-id=101%3A975

__Production URL__: http://scu-components.s3-website.us-east-2.amazonaws.com/

__Services Utilized__:

- Figma, https://www.figma.com/

How To Install

Add to Packages

``
npm install scu-components -D
`

$3

1. Copy/Paste the design system include file from scu-components/dist/import.example.js to a local file named designSystem.ts;

2. Add the design syste include file and styles into Vue's main file.
`
// main.ts
import "./designSystem";
import "scu-components/dist/scu/reference/tokens/styles.css";
`

3. With Vue 3 install you are probably using vite, so add the custom element filter
`
// vite.config.js
...
plugins:
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => {
return tag.includes("scu-");
},
},
},
}),
...
`

How To Use

#### Customization (designSystem.ts file)
- You can edit the suffix for localized components (scu-button-mine versus scu-button):
`
// designSystem.ts
const suffix = "mine";
// will create scu-button-mine versus scu-button
`
- You can comment out any component you know you won't use.

How To Deploy

`
npm deploy
``

__Body__:

- Create New Component (DSys App), Create New Component (DSys App), 1. Create Figma Component
2. Tokenize
3. Create new component files
4. Folder named after component in "/src/components/scu-toast"
5. scu-toast.tsx // Typescript
6. scu-toast.scss // SCSS
7. /usage/examples.md // documentation
8. Copy and paste starter HTML and SCSS into files
9. Run "yarn build" // This will integrate new component into build
10. Run "yarn start" and "yarn server" // the latter serves the former.
11. Prune DOM and SCSS and add interactivity...

Build Information

Dynamically built using contentful-readme-generator. Do not edit directly.

__updated__: 5/16/2023, 1:58:21 PM

__built__: 5/16/2023, 1:58:25 PM

__space__: 7gg213tt004u

__environment__: sandbox

__entity id__: 3wZl9DtqTZxg3PZU72xJbv

[Edit Contentful Entry