Skip to content

laflower/ember-frost-button

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ember-frost-button
Travis Coveralls NPM

Installation

ember install ember-frost-button

API

Attribute Type Value Description
autofocus boolean false default: Nothing to see here, just your average button
true Look at me!
disabled boolean false default: Click to your heart's content
true 🚫 Can't click this! 🎶
on-click string <action-name> triggers associated action when the button is clicked
icon string <icon-name> the name of a frost icon from ember-frost-icons
text string <button-text> text do display on the button
subtext string <button-subtext> subtext do display on the button underneath main text
size string small The smallest button you ever did see
medium Not quite as small as small, but not very big either
large Now that's what I call a button!
extra-large My grandma, what a big button you have!
Recommended when icon, text, and subtext are used together
priority string primary Call-to-action ☎️
secondary Run of the mill, garden variety
tertiary Low-key, subdued
confirm An alias for primary
normal An alias for secondary
cancel An alias for tertiary
design string tab Custom styling for applications that use buttons but don't follow the button styling. Requires text or icon to be specified. Should not be used with priority and size.

Examples

Text

{{frost-button
  autofocus
  disabled=isDisabled
  on-click=(action 'closure')
  priroty='primary'
  size='small'
  text='Text'
}}

Icon

{{frost-button
  icon='frost/add'
  on-click=(action 'closure')
  priority='tertiary'
  size='medium'
}}

Icon Text

{{frost-button
  icon='frost/add'
  on-click=(action 'closure')
  priority='secondary'
  size='large'
  text='Text'
}}

Info

{{frost-button
  icon='frost/add'
  on-click=(action 'closure')
  priority='primary'
  size='extra-large'
  subtext='Subtext'
  text='Main Text'
}}

Design

{{frost-button
  design='tab'
  text='Tab'
}}

## Development

### Setup

git clone git@github.com:ciena-frost/ember-frost-button.git cd ember-frost-button npm install && bower install


### Development Server
A dummy application for development is available under `ember-frost-button/tests/dummy`.
To run the server run `ember server` (or `npm start`) from the root of the repository and
visit the app at http://localhost:4200.

### Testing
Run `npm test` from the root of the project to run linting checks as well as execute the test suite
and output code coverage.

Packages

No packages published

Languages

  • JavaScript 46.0%
  • HTML 32.3%
  • CSS 19.0%
  • Shell 2.7%