Scu-components NPM

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

Copy/Paste the design system include file from scu-components/dist/import.example.js to a local file named designSystem.ts;
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";

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

Tokenize
Create new component files
Folder named after component in "/src/components/scu-toast"
scu-toast.tsx // Typescript
scu-toast.scss // SCSS
/usage/examples.md // documentation
Copy and paste starter HTML and SCSS into files
Run "yarn build" // This will integrate new component into build
Run "yarn start" and "yarn server" // the latter serves the former.
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

@stencil/core scu-tokenizer yargs

@everything-registry/sub-chunk-2721

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago