@repositive/ui-library NPM

Repositive UI Library

A set of ember components to allow frontend applications to be composed quickly and consistently. Developed by Repositive.io.

Publishing a new version

Make your changes and commit them
Run npm version <new versino> to bump the version number in package.json and create a new Git tag. This will be published automatically by CI.

Prerequisites

This library requires the Repositive CSS library, Liz-Skin. Please ensure you have this setup before continuing.

Getting started

Install addon

$ ember install @repositive/ui-library

This will put the latest version of the library into your project's package.json.

Import SCSS

Add the line @import 'ui-library'; to the end of your app.scss file. This SCSS extends the Liz-Skin CSS library with custom component styles.

Usage

Buttons

There are several button components:

Regular button for synchronous actions: r-button.
Button for asynchronous actions: r-async-button.
Link button for linking to external resources: r-link-button.

All buttons are extended with the r-button-mixin and therefore share a base set of properties.

Base properties of each button component:

variant - Specifies the style of the button. Options include:
- primary
- secondary
- cancel
E.g.
```
{{r-button variant='primary'}}
```

size - Specifies the size of the button. Options include:
- big
- small
E.g.
```
{{r-button size='big'}}
```

By default a button has:

Size: small
Variant: secondary

r-button

As well as the variant and size options detailed above, the r-button can also take the following options:

label - The button text. E.g.

label = "Cancel"

clickHandler - The name of the action the button will call on click. E.g.

clickHandler = (action 'cancel')

disabled - Boolean value to specify whether the button is disabled. E.g.

disabled = (not validations.valid)

Typical usage of r-button may look like:

{{r-button
    clickHandler=(action "reset")
    variant="secondary"
    size="big"
    disabled=isFormUnchanged
    label="Reset"
}}

r-async-button

Build on Dockyards async-buttons. Async-buttons are similar to regular r-buttons but can take a few extra options:

action - The name of the action which will be called on click. E.g.

action = (action 'signup')

default - Default text of the button. E.g.

default = "Signup"

pending - Text displayed when the promise is running i.e. not yet fulfilled or rejected. E.g.

pending = "Signing up..."

disableWhen - Boolean value which allows for the button be be disabled when in a state other than pending.

disableWhen = isInvalid

reset - Boolean value which tells the button whether or not to reset to default state once the promise has been fulfilled or rejected. E.g.

reset = true

Typical usage of r-async-button may look like:

{{r-async-button
    action=(action 'save')
    default="Save Changes"
    disableWhen=(not validations.isValid)
    pending="Saving..."
    reset=true
    size="big"
    variant="primary"
}}

r-link-button

r-link-buttons are extended from r-button and have 2 extra arguments:

href - The link to open. E.g.

href= "https://blog.repositive.io"

target - Where the linked document will open. E.g.

target='_blank'

Typical usage of r-link-button may look like:

{{r-link-button
    clickHandler=(action "trackExit")
    href= model.url
    label= "Access Data"
    variant="primary"
    size="big"
    target="_blank"
}}

Pagination

r-pagination takes the following parameters:

totalPages - The total number of response results / resultsPerPage. E.g.

totalPages=totalPages

currentPageNumber - Number signifying which page the user is on. E.g.

currentPageNumber=currentPage

nextPage - Action to be called when the 'Next' button is pressed. E.g.

nextPage=(action 'nextPage')

previousPage - Action to be called when the 'Previous' button is pressed. E.g.

previousPage=(action 'previousPage')

goToPage - Action to be called when a page number is pressed. E.g.

goToPage=(action 'goToPage')

Typical usage of r-pagination may look like:

{{r-pagination
    totalPages=totalPages
    currentPageNumber=page
    nextPage=(action 'nextPage')
    previousPage=(action 'previousPage')
    goToPage=(action 'goToPage')
}}

Avatar

r-avatar takes the following parameters:

size - Specifies the size of the avatar. Options include:
- small
- medium (default)
- large
- x-large
E.g.
```
{{r-avatar size='large'}}
```

src - Specifies the url of the avatar image.

{{r-avatar src='https://cdn.catimages.com/massive-cat.jpg'}}

fallbackSrc - Specifies an alternate URL to use if src fails (e.g. returns 404).

{{r-avatar src="https://example.com/404" fallbackSrc='https://cdn.catimages.com/massive-cat.jpg'}}

Typical usage of the r-avatar may look like:

{{r-avatar
    src=user.profile.avatar
    size="large"
}}

Tabs

Tabs consist of two sub-components:

r-tab-list - A block component in which you nest any number of r-tab-list-items. This does not take any parameters.
r-tab-list-item - An individual tab component

r-tab-list-item takes the following parameters:

tabName - Tab text or label to be displayed E.g.
```
{{r-tab-item tabName="Settings"}}
```
target - The target route of the tab E.g.
```
{{r-tab-item target="settings"}}
```
query - Query param of the target route E.g.
```
{{r-tab-item query="user"}}
```
icon - The font-awesome icon to be displayed on the tab E.g.
```
{{r-tab-item icon="user"}}
```
iconPosition - Whether to display the icon left of the tabName or right E.g.
```
{{r-tab-item iconPosition="left"}}
```
stats - A number to be displayed on the tab e.g. Followers (381) E.g.
```
{{r-tab-item stats=user.followers.length}}
```

Typical usage of the tab component:

{{#r-tab-list}}
  {{r-tab-list-item
      tabName="Profile"
      target="users.profile"
  }}
  {{r-tab-list-item
      tabName="Account Settings"
      target="users.settings"
  }}
{{/r-tab-list}}