Summit Design System

scu-button

released v0.0.7

component

parameters

states

scu-button contains available buttons.

Button

<scu-button label="Submit" onclick="alert('coming from the outside')"></scu-button>

Outline Button

<scu-button label="Submit" outline></scu-button>

Grey Button

<scu-button label="Submit" grey></scu-button>

Link Button

<scu-button label="Submit" link></scu-button>

Icon Button

<scu-button label="Submit" icon="relationship"></scu-button>

Icon Button Outline

<scu-button label="Submit" icon="relationship" outline></scu-button>

Icon Only

<scu-button label="Submit" icon="relationship" icon_only></scu-button>

Outline Icon Only

<scu-button label="Submit" icon="relationship" icon_only outline></scu-button>

Properties

Property	Attribute	Type	Default
`disabled`	`disabled`	`boolean`	`false`
`grey`	`grey`	`boolean`	`false`
`icon`	`icon`	`string`	`undefined`
`icon_only`	`icon_only`	`boolean`	`false`
`label`	`label`	`string`	`"!No Label Sent!"`
`link`	`link`	`boolean`	`false`
`outline`	`outline`	`boolean`	`false`
`type`	`type`	`ButtonTypes.grey \| ButtonTypes.link \| ButtonTypes.outline \| ButtonTypes.primary`	`ButtonTypes.primary`

Dependencies

Used by

scu-form

Depends on

scu-icon

Graph

graph TD;
  scu-button --> scu-icon
  scu-form --> scu-button
  style scu-button fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

Icon Button - Icon Variations

<scu-button label="Submit" icon="relationship"></scu-button>
<scu-button label="Submit" icon="insights"></scu-button>
<scu-button label="Submit" icon="error"></scu-button>

Disabled Button

<scu-button label="Submit" disabled></scu-button>
<scu-button label="Submit" disabled outline></scu-button>
<scu-button label="Submit" disabled grey></scu-button>
<scu-button label="Submit" disabled link></scu-button>
<scu-button label="Submit" disabled icon="relationship"></scu-button>
<scu-button label="Submit" disabled icon="relationship" outline></scu-button>
<scu-button label="Submit" disabled icon="relationship" outline icon_only></scu-button>

Button without Label

A default should show up without the label set.

<scu-button></scu-button>
<scu-button outline></scu-button>
<scu-button grey></scu-button>
<scu-button link></scu-button>
<scu-button icon="relationship"></scu-button>
<scu-button icon="relationship" outline></scu-button>

Button with a Long Label

<scu-button label='A Really Long Label That Should Make Button Wide'></scu-button>
<scu-button label='A Really Long Label That Should Make Button Wide' outline></scu-button>
<scu-button label='A Really Long Label That Should Make Button Wide' grey></scu-button>
<scu-button label='A Really Long Label That Should Make Button Wide' link></scu-button>
<scu-button label='A Really Long Label That Should Make Button Wide' icon="relationship"></scu-button>
<scu-button label='A Really Long Label That Should Make Button Wide' icon="relationship" outline></scu-button>

Resized Button

The button should fit the width that you give it, but not the height ...that should stay autosized.

<scu-button label="Submit" style='width: 300px;'></scu-button>
<scu-button label="Submit" outline style='width: 300px;'></scu-button>
<scu-button label="Submit" grey style='width: 300px;'></scu-button>
<scu-button label="Submit" link style='width: 300px;'></scu-button>
<scu-button label="Submit" icon="relationship" style='width: 300px;'></scu-button>
<scu-button label="Submit" icon="relationship" style='width: 300px;' outline></scu-button>

Summit Design System

The Summit Design System is our design process. It is composed of a shared design library for designers built in Figma, tokens driven from that Figma library, and a reusable JavaScript component library built with web components using StencilJS. This should work within any development framework (Vue, Angular, etc).

Implementation

HTML

To build a simple static HTML page, like a prototype, add these two lines to an HTML page running within a server (see "Server" if you don't have a server running locally)


    <script src="https://unpkg.com/scu-components-beta/dist/scu/scu.esm.js" type="module"></script>

    <link href="https://unpkg.com/scu-components-beta/dist/scu/scu.css" rel="stylesheet">

Within the HTML page you can just start dropping components:


    <scu-button label='Submit' outline></scu-button>

Server

When you run a local file in a browser, most won't let you load in any external files. Even simple scripts like the CSS and JS files from the Design System won't load. An easy (and really useful) solution is to install http-server which allows you to run an ad hoc server from any folder on your computer with one command line. Open your terminal (assuming you are using a Mac) and do the following:

http-server installs via npm which runs node.js, so we need to install these two dependancies:
( full instructions )


    brew install node

Install http-server globally


    npm install --global http-server

Go to the folder you want to serve, type the below, then copy/paste the url it prints back. Usually this looks like http://localhost:8080 This will start a process within that terminal that runs the server, so don't close the terminal window unless you are done. Otherwise hit CTRL-C to end.


    http-server

Vue

Stencil Vue Documentation

With Vue you need to first add the SCU Design System to your project then add the custom element definitions and tell Vue to ignore all components with the "scu-" prefix. This is an example of the main.js file of a simple Vue app.


    npm install --save scu-components-beta


    import Vue from 'vue'
    import App from './App.vue'
    import { applyPolyfills, defineCustomElements } from 'scu-components-beta/loader';

    Vue.config.productionTip = false

    // Tell Vue to ignore all components prefixed 'scu-'
    Vue.config.ignoredElements = [/scu-\w*/];

    // Bind the custom elements to the window object
    applyPolyfills().then(() => {
      defineCustomElements();
    });

    new Vue({
      render: h => h(App),
    }).$mount('#app')

Angular

Stencil Angular Documentation

Other

Stencil Documentation