rebel-inputs

Collection of reusable inputs for the rebelmail-dashboard

Installation

npm install rebel-inputs

Usage

1. Input Checkbox

• checked - Boolean value if the checkbox should display as checked or unchecked
• text - Optional display Text
• {{input/input-checkbox text='Open' checked=subscriptions.open}}

2. Input Color

• title - Optional display title
• color - path to json value to be displayed and updated
• {{input/input-color title="Color" color=settings.styles.background.color updateAction=updateAction}}

3. Input Dropdown

• title - Optional display title
• type - the type of dropdown, acceptable fields are in dropdownBuilder.js
• acctDrop - Boolean value, pass true to display the list of accounts
• dropdownItem - path to json value to be displayed and updated
• options - path to json object that the dropdownItem is in
• {{input/input-dropdown title="Content Type" dropdownItem=account.integrations.webhooks.contentType type='webhookContentType' class="webhook-content-type"}}

4. Input Number

• title - Optional display title
• value - number to be displayed and updated
• {{input/input-number title="Image Height" value=product.content.img.style.height updateAction=updateAction}}

5. Input Text

• title - Optional display title
• value - text to be displayed and updated
• placeholder - Optional input placeholder
• disabled - boolean to disable input
• helper - Optional input helper text that appears beneath the input
• {{input/input-text title="Title" value=product.content.h3 updateAction=updateAction}}

6. Input Toggle Caret

• more - text that displays when extra content is hidden
• less - text that displays when extra content is visible
• {{#input/input-toggle-caret data-test-id="advanced options" more="Advanced Options" less="Advanced Options"}}
• {{#nested-card title="Thumbnail" advancedOpt=true leftOpt="Color" rightOpt="Image" as |imageColorToggle|}}
• {{/input/input-toggle-caret}}

7. Input Toggle

• checked - bboolean value if the toggle should display as checked or unchecked
• disabled - boolean to disable input
• items - items to toggle
• leftOpt - text that displays to the left of the toggle switch
• rightOpt - text that displays to the right of the toggle switch
• class - class name for styling
• {{input/input-toggle class="ui-card-toggle export" rightOpt='All Events' checked=reportEvents.all toggleOpt='setReportEvents' items='reportEvents.all'}}

8. Input Upload Field

• title - Optional display title
• signURL - upload url from environment.js file
• src - path to json object for the image src
• option - path to json object for the image
• removeImage - passed down function, required
• removeItem - the key of the object to remove the image from
• {{input/input-upload-field signURL=signURL removeItem='src' src=product.content.img.src option=product.content.img removeImage=removeImage updateAction=updateAction}}

Contributing

Installation

• git clone <repository-url>
• cd rebel-inputs
• npm install

Linting

• npm run lint:js
• npm run lint:js -- --fix

Running tests

• ember test – Runs the test suite on the current Ember version
• ember test --server – Runs the test suite in "watch mode"
• ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

• ember serve
• Visit the dummy application at http://localhost:4200.

For more information on using ember-cli, visit https://ember-cli.com/.