diff --git a/README.md b/README.md index a3d21e38..69ab8486 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ [![Coverage Status](https://coveralls.io/repos/github/bindable-ui/bindable/badge.svg?branch=master)](https://coveralls.io/github/bindable-ui/bindable?branch=master) -Bindable is a design system that aims to provide the video products in Verizon Media tools to build cohesive and consistent interfaces. Bindable will provide a common pattern for desginers and engineers to follow. Bindable is developed as an Aurelia plugin and built with the aurelia-cli. +Bindable is a design system that aims to provide the video products in Verizon Media tools to build cohesive and consistent interfaces. Bindable will provide a common pattern for desginers and engineers to follow. Bindable is developed as an Aurelia plugin and built with the aurelia-cli. ## Table of Contents @@ -93,7 +93,7 @@ This Aurelia plugin project has a built-in dev app to simplify development. 3. You can use normal `npm start` and `npm test` in development just like developing an app. 4. To ensure compatibility to other apps, always use `PLATFORM.moduleName()` wrapper in files inside `src/`. You don't need to use the wrapper in `dev-app/` folder as CLI built-in bundler supports module name without the wrapper. -The dev-app contains the docs. Use that to view what parameters are available when using the components in Bindable. +The dev-app contains the docs. Use that to view what parameters are available when using the components in Bindable. ### Run dev app diff --git a/dev-app/app.html b/dev-app/app.html index b646f491..a939882f 100644 --- a/dev-app/app.html +++ b/dev-app/app.html @@ -14,6 +14,7 @@ @@ -77,6 +79,7 @@ class="footer-links" href="https://github.com/bindable-ui/bindable/issues" target="_blank" + rel="noopener" > Report An Issue diff --git a/dev-app/routes/components/forms/file/properties/index.ts b/dev-app/routes/components/forms/file/properties/index.ts index ecb4cb41..6d4841a8 100644 --- a/dev-app/routes/components/forms/file/properties/index.ts +++ b/dev-app/routes/components/forms/file/properties/index.ts @@ -33,6 +33,11 @@ export class FileProperties { name: 'error-msg', value: '', }, + { + description: 'Set if you need an id on the input field.', + name: 'id', + value: 'string', + }, { description: 'Set if this file picker is going to be for choosing an image.', name: 'image-picker', diff --git a/dev-app/routes/components/forms/slider/properties/index.ts b/dev-app/routes/components/forms/slider/properties/index.ts index 9000d606..0c714e0c 100644 --- a/dev-app/routes/components/forms/slider/properties/index.ts +++ b/dev-app/routes/components/forms/slider/properties/index.ts @@ -35,6 +35,11 @@ export class SliderProperties { name: 'error-msg', value: '', }, + { + description: 'Set if you need an id on the textarea.', + name: 'id', + value: 'string', + }, { default: '4', description: 'Set how many increments you want in the slider. It is zero based.', diff --git a/dev-app/routes/components/forms/textarea/properties/index.ts b/dev-app/routes/components/forms/textarea/properties/index.ts index 0ccf605e..9c1adea4 100644 --- a/dev-app/routes/components/forms/textarea/properties/index.ts +++ b/dev-app/routes/components/forms/textarea/properties/index.ts @@ -29,6 +29,11 @@ export class TextAreaProperties { name: 'error-msg', value: '', }, + { + description: 'Set if you need an id on the textarea.', + name: 'id', + value: 'string', + }, { description: 'Set the label text. If left off no label will be placed.', name: 'label', diff --git a/dev-app/routes/home/index.html b/dev-app/routes/home/index.html index 50fe6cc6..033bb800 100644 --- a/dev-app/routes/home/index.html +++ b/dev-app/routes/home/index.html @@ -282,6 +282,8 @@

bindable

bindable bindable - It's hard for us to keep an eye on all parts of Bindable. As you are using it you might come across a bug. If so you can report it on the Github page. + It's hard for us to keep an eye on all parts of Bindable. As you are using it you might come across a bug. If so you can report it on the Github page. diff --git a/dev-app/routes/introduction/theming/theming.html b/dev-app/routes/introduction/theming/theming.html index a1bb53b5..3eec3add 100644 --- a/dev-app/routes/introduction/theming/theming.html +++ b/dev-app/routes/introduction/theming/theming.html @@ -50,7 +50,7 @@ size="large" max-width="40rem" > - To make your own theme it is easiest to download a copy of the main theme and then make edits to it. Doing this will let you see all the available configurations and allow you set your own values. There is a legend at the top of the main.css file that you could use to search for section titles to jump to difference sections of the file. + To make your own theme it is easiest to download a copy of the main theme and then make edits to it. Doing this will let you see all the available configurations and allow you set your own values. There is a legend at the top of the main.css file that you could use to search for section titles to jump to difference sections of the file. ... * BUTTON diff --git a/dev-app/routes/layouts/box-link/index.html b/dev-app/routes/layouts/box-link/index.html index 523b742e..a620ba29 100644 --- a/dev-app/routes/layouts/box-link/index.html +++ b/dev-app/routes/layouts/box-link/index.html @@ -127,7 +127,7 @@ href & target - + I will open in a new tab diff --git a/dev-app/routes/layouts/examples/index.html b/dev-app/routes/layouts/examples/index.html index d6ce09b7..da3a2556 100644 --- a/dev-app/routes/layouts/examples/index.html +++ b/dev-app/routes/layouts/examples/index.html @@ -73,6 +73,7 @@
@@ -97,6 +98,7 @@
@@ -121,6 +123,7 @@
@@ -153,6 +156,7 @@
@@ -185,6 +189,7 @@
@@ -238,6 +243,7 @@
@@ -302,6 +308,7 @@
@@ -365,6 +372,7 @@
diff --git a/package-lock.json b/package-lock.json index efb32d8a..1b6011d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bindable-ui/bindable", - "version": "1.2.3", + "version": "1.2.4", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 449bb552..da5c8745 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@bindable-ui/bindable", "description": "An Aurelia component library", - "version": "1.2.3", + "version": "1.2.4", "repository": { "type": "git", "url": "https://github.com/bindable-ui/bindable" diff --git a/src/components/buttons/c-button/c-button.html b/src/components/buttons/c-button/c-button.html index 49fc7e60..b410f4bf 100644 --- a/src/components/buttons/c-button/c-button.html +++ b/src/components/buttons/c-button/c-button.html @@ -33,6 +33,7 @@ ${content} diff --git a/src/components/forms/c-label/c-label.html b/src/components/forms/c-label/c-label.html index 32619a36..74d84b8e 100644 --- a/src/components/forms/c-label/c-label.html +++ b/src/components/forms/c-label/c-label.html @@ -11,6 +11,7 @@ ${styles.label} ${styles[state]} " + for="${for}" > ${label} @@ -43,6 +44,7 @@
- + ${label} @@ -34,6 +37,7 @@ ${styles[_state]} ${multiple ? styles.multiple : ''} " + id="${id}" value.bind="selectValue" multiple.bind="multiple" scroll.trigger="onScroll() & throttle" diff --git a/src/components/forms/select/c-form-select/c-form-select.ts b/src/components/forms/select/c-form-select/c-form-select.ts index d62e30eb..aaf4d051 100644 --- a/src/components/forms/select/c-form-select/c-form-select.ts +++ b/src/components/forms/select/c-form-select/c-form-select.ts @@ -4,9 +4,8 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project */ import {bindable, bindingMode, inject} from 'aurelia-framework'; - import {authState} from '../../../../decorators/auth-state'; - +import {generateRandom} from '../../../../helpers/generate-random'; import {lazyLoadCheck} from '../../../../helpers/lazy-load-check'; import multiIndexSplicer from '../../../../helpers/multi-index-splicer'; @@ -18,6 +17,8 @@ export class CFormSelect { @bindable public actions; @bindable + public id = generateRandom(); + @bindable public errorMsg; @bindable public warningMsg; diff --git a/src/components/forms/slider/c-form-slider/c-form-slider.html b/src/components/forms/slider/c-form-slider/c-form-slider.html index 3df72542..3eb54323 100644 --- a/src/components/forms/slider/c-form-slider/c-form-slider.html +++ b/src/components/forms/slider/c-form-slider/c-form-slider.html @@ -13,6 +13,7 @@ > ${label} @@ -21,6 +22,7 @@
${label} diff --git a/src/components/forms/text/c-text-input/c-text-input.ts b/src/components/forms/text/c-text-input/c-text-input.ts index 3d46decc..25ef55c4 100644 --- a/src/components/forms/text/c-text-input/c-text-input.ts +++ b/src/components/forms/text/c-text-input/c-text-input.ts @@ -6,7 +6,6 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project import {bindable, bindingMode, inject} from 'aurelia-framework'; import {eventListeners} from '../../../../decorators/event-listeners'; -import {generateRandom} from '../../../../helpers/generate-random'; import {IFormEventListener} from '../../../../interfaces/event-listeners'; import * as styles from './c-text-input.css.json'; @@ -31,7 +30,7 @@ export class CTextInput { @bindable public iconPosition; @bindable - public id = generateRandom(); + public id; @bindable public placeholder; @bindable diff --git a/src/components/forms/textarea/c-form-textarea/c-form-textarea.html b/src/components/forms/textarea/c-form-textarea/c-form-textarea.html index db3fbf86..e350842b 100644 --- a/src/components/forms/textarea/c-form-textarea/c-form-textarea.html +++ b/src/components/forms/textarea/c-form-textarea/c-form-textarea.html @@ -10,7 +10,10 @@ class="${styles.labelWrapper}" show.bind="_state !== 'hidden' && label" > - + ${label} @@ -20,6 +23,7 @@ ${styles[state]} ${styles.textarea} " + id="${id}" placeholder.bind="placeholder" state.bind="_state" textarea-value.bind="textareaValue" diff --git a/src/components/forms/textarea/c-form-textarea/c-form-textarea.ts b/src/components/forms/textarea/c-form-textarea/c-form-textarea.ts index 74e16f8b..9ac87e02 100644 --- a/src/components/forms/textarea/c-form-textarea/c-form-textarea.ts +++ b/src/components/forms/textarea/c-form-textarea/c-form-textarea.ts @@ -5,6 +5,7 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project import {bindable, bindingMode} from 'aurelia-framework'; import {authState} from '../../../../decorators/auth-state'; +import {generateRandom} from '../../../../helpers/generate-random'; import * as styles from './c-form-textarea.css.json'; @authState @@ -12,6 +13,8 @@ export class CFormTextarea { @bindable public errorMsg; @bindable + public id = generateRandom(); + @bindable public label; @bindable public placeholder; diff --git a/src/components/forms/textarea/c-textarea-input/c-textarea-input.html b/src/components/forms/textarea/c-textarea-input/c-textarea-input.html index 3dd70668..980a9e69 100644 --- a/src/components/forms/textarea/c-textarea-input/c-textarea-input.html +++ b/src/components/forms/textarea/c-textarea-input/c-textarea-input.html @@ -12,6 +12,7 @@ ${state == 'error' ? styles.error : ''} ${state == 'warning' ? styles.warning : ''} " + id="${id}" placeholder.bind="placeholder" value.bind="textareaValue" > diff --git a/src/components/forms/textarea/c-textarea-input/c-textarea-input.ts b/src/components/forms/textarea/c-textarea-input/c-textarea-input.ts index ae3b7066..d1007c04 100644 --- a/src/components/forms/textarea/c-textarea-input/c-textarea-input.ts +++ b/src/components/forms/textarea/c-textarea-input/c-textarea-input.ts @@ -7,6 +7,8 @@ import {bindable, bindingMode} from 'aurelia-framework'; import * as styles from './c-textarea-input.css.json'; export class CTextareaInput { + @bindable + public id; @bindable public placeholder; @bindable({defaultBindingMode: bindingMode.twoWay}) diff --git a/src/components/utilities/c-status/c-status.html b/src/components/utilities/c-status/c-status.html index ffe18047..6eb35276 100644 --- a/src/components/utilities/c-status/c-status.html +++ b/src/components/utilities/c-status/c-status.html @@ -25,6 +25,7 @@ class="${styles.link}" target="${targetNew ? '_blank' : '_self'}" title="${text}" + rel="noopener noreferrer" if.bind="href" > ${text}