Summit Credit Union Design System
- 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/
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...
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