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

Vue Install

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