diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a9667da..da77592 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,11 +1,12 @@ -# Contributions +# Contributions In lieu of a formal styleguide, take care to maintain the existing coding style ensuring there are no linting errors. Add unit tests for any new or changed functionality. Lint and test your code using the npm scripts below: ### NPM tasks | Task | Usage | | -------------------- | ------------------------------------------------------------ | | `npm run start` | Fire up local server for development | -| `npm run test` | Run sequence of tests once | +| `npm run test:unit` | Run sequence of unit tests once | +| `npm run test:e2e` | Run sequence of integration tests once | | `npm run test:watch` | Fire up test server and re-test on file change | | `npm run js:build` | Compile Choices to an uglified JavaScript file | | `npm run css:watch` | Watch SCSS files for changes. On a change, run build process | diff --git a/README.md b/README.md index 4ca875a..553aa59 100644 --- a/README.md +++ b/README.md @@ -136,7 +136,6 @@ will be returned. If you target one element, that instance will be returned. openState: 'is-open', disabledState: 'is-disabled', highlightedState: 'is-highlighted', - hiddenState: 'is-hidden', flippedState: 'is-flipped', loadingState: 'is-loading', noResults: 'has-no-results', @@ -518,7 +517,6 @@ classNames: { openState: 'is-open', disabledState: 'is-disabled', highlightedState: 'is-highlighted', - hiddenState: 'is-hidden', flippedState: 'is-flipped', selectedState: 'is-highlighted', } diff --git a/cypress/integration/select-multiple.spec.js b/cypress/integration/select-multiple.spec.js index bd45b98..73970f0 100644 --- a/cypress/integration/select-multiple.spec.js +++ b/cypress/integration/select-multiple.spec.js @@ -79,7 +79,7 @@ describe('Choices - select multiple', () => { it('updates the value of the original input', () => { cy.get('[data-test-hook=basic]') - .find('.choices__input.is-hidden') + .find('.choices__input[hidden]') .should($select => { expect($select.val()).to.contain(selectedChoiceText); }); @@ -150,7 +150,7 @@ describe('Choices - select multiple', () => { it('updates the value of the original input', () => { cy.get('[data-test-hook=basic]') - .find('.choices__input.is-hidden') + .find('.choices__input[hidden]') .should($select => { const val = $select.val() || []; expect(val).to.not.contain(removedChoiceText); @@ -806,7 +806,7 @@ describe('Choices - select multiple', () => { it('updates the value of the original input', () => { cy.get('[data-test-hook=set-choice-by-value]') - .find('.choices__input.is-hidden') + .find('.choices__input[hidden]') .should($select => { const val = $select.val() || []; expect(val).to.contain(dynamicallySelectedChoiceValue); diff --git a/cypress/integration/select-one.spec.js b/cypress/integration/select-one.spec.js index dfbcdf5..4c640c8 100644 --- a/cypress/integration/select-one.spec.js +++ b/cypress/integration/select-one.spec.js @@ -208,7 +208,7 @@ describe('Choices - select one', () => { it('updates the value of the original input', () => { cy.get('[data-test-hook=remove-button]') - .find('.choices__input.is-hidden') + .find('.choices__input[hidden]') .should($select => { const val = $select.val() || []; @@ -818,7 +818,7 @@ describe('Choices - select one', () => { it('updates the value of the original input', () => { cy.get('[data-test-hook=set-choice-by-value]') - .find('.choices__input.is-hidden') + .find('.choices__input[hidden]') .should($select => { const val = $select.val() || []; expect(val).to.contain(dynamicallySelectedChoiceValue); diff --git a/cypress/integration/text.spec.js b/cypress/integration/text.spec.js index a74afc8..0b3348d 100644 --- a/cypress/integration/text.spec.js +++ b/cypress/integration/text.spec.js @@ -29,7 +29,7 @@ describe('Choices - text element', () => { .type('{enter}'); cy.get('[data-test-hook=basic]') - .find('.choices__input.is-hidden') + .find('.choices__input[hidden]') .should('have.value', textInput); }); @@ -151,7 +151,7 @@ describe('Choices - text element', () => { .click(); cy.get('[data-test-hook=remove-button]') - .find('.choices__input.is-hidden') + .find('.choices__input[hidden]') .then($input => { expect($input.val()).to.not.contain(textInput); }); diff --git a/src/scripts/components/wrapped-element.js b/src/scripts/components/wrapped-element.js index a185be7..04b2588 100644 --- a/src/scripts/components/wrapped-element.js +++ b/src/scripts/components/wrapped-element.js @@ -23,7 +23,7 @@ export default class WrappedElement { conceal() { // Hide passed input this.element.classList.add(this.classNames.input); - this.element.classList.add(this.classNames.hiddenState); + this.element.hidden = true; // Remove element from tab index this.element.tabIndex = '-1'; @@ -35,14 +35,13 @@ export default class WrappedElement { this.element.setAttribute('data-choice-orig-style', origStyle); } - this.element.setAttribute('aria-hidden', 'true'); this.element.setAttribute('data-choice', 'active'); } reveal() { // Reinstate passed element this.element.classList.remove(this.classNames.input); - this.element.classList.remove(this.classNames.hiddenState); + this.element.hidden = false; this.element.removeAttribute('tabindex'); // Recover original styles if any @@ -54,7 +53,6 @@ export default class WrappedElement { } else { this.element.removeAttribute('style'); } - this.element.removeAttribute('aria-hidden'); this.element.removeAttribute('data-choice'); // Re-assign values - this is weird, I know diff --git a/src/scripts/components/wrapped-element.test.js b/src/scripts/components/wrapped-element.test.js index bf2b99f..e04c8cc 100644 --- a/src/scripts/components/wrapped-element.test.js +++ b/src/scripts/components/wrapped-element.test.js @@ -53,10 +53,7 @@ describe('components/wrappedElement', () => { expect( instance.element.classList.contains(instance.classNames.input), ).to.equal(true); - expect( - instance.element.classList.contains(instance.classNames.hiddenState), - ).to.equal(true); - expect(instance.element.getAttribute('aria-hidden')).to.equal('true'); + expect(instance.element.hidden).to.be.true; expect(instance.element.getAttribute('data-choice')).to.equal('active'); expect(instance.element.getAttribute('data-choice-orig-style')).to.equal( originalStyling, @@ -78,9 +75,7 @@ describe('components/wrappedElement', () => { expect( instance.element.classList.contains(instance.classNames.input), ).to.equal(false); - expect( - instance.element.classList.contains(instance.classNames.hiddenState), - ).to.equal(false); + expect(instance.element.hidden).to.be.false; expect(instance.element.getAttribute('style')).to.equal(originalStyling); expect(instance.element.getAttribute('aria-hidden')).to.equal(null); expect(instance.element.getAttribute('data-choice')).to.equal(null); diff --git a/src/scripts/constants.js b/src/scripts/constants.js index 13a720d..dd8192c 100644 --- a/src/scripts/constants.js +++ b/src/scripts/constants.js @@ -22,7 +22,6 @@ export const DEFAULT_CLASSNAMES = { openState: 'is-open', disabledState: 'is-disabled', highlightedState: 'is-highlighted', - hiddenState: 'is-hidden', flippedState: 'is-flipped', loadingState: 'is-loading', noResults: 'has-no-results', diff --git a/src/scripts/constants.test.js b/src/scripts/constants.test.js index 89623dc..9061f20 100644 --- a/src/scripts/constants.test.js +++ b/src/scripts/constants.test.js @@ -35,7 +35,6 @@ describe('constants', () => { 'openState', 'disabledState', 'highlightedState', - 'hiddenState', 'flippedState', 'loadingState', 'noResults', diff --git a/src/styles/base.scss b/src/styles/base.scss index d649a2e..f293e69 100644 --- a/src/styles/base.scss +++ b/src/styles/base.scss @@ -2,23 +2,23 @@ = Generic styling = =============================================*/ -$global-guttering : 24px; -$global-font-size-h1 : 32px; -$global-font-size-h2 : 24px; -$global-font-size-h3 : 20px; -$global-font-size-h4 : 18px; -$global-font-size-h5 : 16px; -$global-font-size-h6 : 14px; +$global-guttering: 24px; +$global-font-size-h1: 32px; +$global-font-size-h2: 24px; +$global-font-size-h3: 20px; +$global-font-size-h4: 18px; +$global-font-size-h5: 16px; +$global-font-size-h6: 14px; * { -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale + -moz-osx-font-smoothing: grayscale; } *, *:before, *:after { - box-sizing: border-box + box-sizing: border-box; } html, @@ -30,10 +30,10 @@ body { } body { - font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 1.4; - color: #FFFFFF; + color: #ffffff; background-color: #333; overflow-x: hidden; } @@ -52,7 +52,7 @@ p { hr { display: block; - margin: $global-guttering*1.25 0; + margin: $global-guttering * 1.25 0; border: 0; border-bottom: 1px solid #eaeaea; height: 1px; @@ -73,7 +73,7 @@ h6 { a, a:visited, a:focus { - color: #FFFFFF; + color: #ffffff; text-decoration: none; font-weight: 600; } @@ -133,14 +133,14 @@ label + p { display: block; margin: auto; max-width: 40em; - padding: $global-guttering*2; + padding: $global-guttering * 2; @media (max-width: 620px) { padding: 0; } } .section { - background-color: #FFFFFF; + background-color: #ffffff; padding: $global-guttering; color: #333; a, @@ -184,12 +184,8 @@ label + p { text-align: center; } -.is-hidden { - display: none; -} - [data-test-hook] { margin-bottom: $global-guttering; } -/*===== End of Section comment block ======*/ \ No newline at end of file +/*===== End of Section comment block ======*/ diff --git a/src/styles/choices.scss b/src/styles/choices.scss index ca6d9c5..f7a6d22 100644 --- a/src/styles/choices.scss +++ b/src/styles/choices.scss @@ -10,11 +10,11 @@ $choices-guttering: 24px !default; $choices-border-radius: 2.5px !default; $choices-border-radius-item: 20px !default; $choices-bg-color: #f9f9f9 !default; -$choices-bg-color-disabled: #EAEAEA !default; -$choices-bg-color-dropdown: #FFFFFF !default; +$choices-bg-color-disabled: #eaeaea !default; +$choices-bg-color-dropdown: #ffffff !default; $choices-text-color: #333333 !default; -$choices-keyline-color: #DDDDDD !default; -$choices-primary-color: #00BCD4 !default; +$choices-keyline-color: #dddddd !default; +$choices-primary-color: #00bcd4 !default; $choices-disabled-color: #eaeaea !default; $choices-highlight-color: $choices-primary-color !default; $choices-button-dimension: 8px !default; @@ -45,7 +45,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI } } -.#{$choices-selector}[data-type*="select-one"] { +.#{$choices-selector}[data-type*='select-one'] { cursor: pointer; .#{$choices-selector}__inner { padding-bottom: 7.5px; @@ -55,7 +55,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI width: 100%; padding: 10px; border-bottom: 1px solid $choices-keyline-color; - background-color: #FFFFFF; + background-color: #ffffff; margin: 0; } .#{$choices-selector}__button { @@ -70,7 +70,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI height: 20px; width: 20px; border-radius: 10em; - opacity: .5; + opacity: 0.5; &:hover, &:focus { opacity: 1; @@ -80,7 +80,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI } } &:after { - content: ""; + content: ''; height: 0; width: 0; border-style: solid; @@ -96,7 +96,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI border-color: transparent transparent $choices-text-color transparent; margin-top: -7.5px; } - &[dir="rtl"] { + &[dir='rtl'] { &:after { left: 11.5px; right: auto; @@ -110,8 +110,8 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI } } -.#{$choices-selector}[data-type*="select-multiple"], -.#{$choices-selector}[data-type*="text"] { +.#{$choices-selector}[data-type*='select-multiple'], +.#{$choices-selector}[data-type*='text'] { .#{$choices-selector}__inner { cursor: text; } @@ -122,13 +122,13 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI margin-right: -$choices-button-offset/2; margin-bottom: 0; margin-left: $choices-button-offset; - padding-left: $choices-button-offset*2; + padding-left: $choices-button-offset * 2; border-left: 1px solid darken($choices-primary-color, 10%); background-image: $choices-icon-cross; background-size: $choices-button-dimension; width: $choices-button-dimension; line-height: 1; - opacity: .75; + opacity: 0.75; border-radius: 0; &:hover, &:focus { @@ -170,7 +170,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI display: inline-block; padding: 4px 16px 4px 4px; width: 100%; - [dir="rtl"] & { + [dir='rtl'] & { padding-right: 4px; padding-left: 16px; } @@ -192,12 +192,12 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI margin-bottom: 3.75px; background-color: $choices-primary-color; border: 1px solid darken($choices-primary-color, 5%); - color: #FFFFFF; + color: #ffffff; word-break: break-all; &[data-deletable] { padding-right: 5px; } - [dir="rtl"] & { + [dir='rtl'] & { margin-right: 0; margin-left: 3.75px; } @@ -236,7 +236,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI bottom: 100%; margin-top: 0; margin-bottom: -1px; - border-radius: .25rem .25rem 0 0; + border-radius: 0.25rem 0.25rem 0 0; } .#{$choices-selector}__list { position: relative; @@ -249,7 +249,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI position: relative; padding: 10px; font-size: $choices-font-size-md; - [dir="rtl"] & { + [dir='rtl'] & { text-align: right; } } @@ -265,7 +265,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI top: 50%; transform: translateY(-50%); } - [dir="rtl"] & { + [dir='rtl'] & { text-align: right; padding-left: 100px; padding-right: 10px; @@ -276,9 +276,9 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI } } &.is-highlighted { - background-color: mix(#000000, #FFFFFF, 5%); + background-color: mix(#000000, #ffffff, 5%); &:after { - opacity: .5; + opacity: 0.5; } } } @@ -295,7 +295,7 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI .#{$choices-selector}__item--disabled { cursor: not-allowed; user-select: none; - opacity: .5; + opacity: 0.5; } .#{$choices-selector}__heading { @@ -333,20 +333,22 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI &:focus { outline: 0; } - [dir="rtl"] & { + [dir='rtl'] & { padding-right: 2px; padding-left: 0; } } .#{$choices-selector}__placeholder { - opacity: .5; + opacity: 0.5; } -.#{$choices-selector}__input.is-hidden, -.#{$choices-selector}[data-type*="select-one"] .#{$choices-selector}__input.is-hidden, -.#{$choices-selector}[data-type*="select-multiple"] .#{$choices-selector}__input.is-hidden { +.#{$choices-selector}__input[hidden], +.#{$choices-selector}[data-type*='select-one'] + .#{$choices-selector}__input[hidden], +.#{$choices-selector}[data-type*='select-multiple'] + .#{$choices-selector}__input[hidden] { display: none; } -/*===== End of Choices ======*/ \ No newline at end of file +/*===== End of Choices ======*/ diff --git a/types/index.d.ts b/types/index.d.ts index 4a257ec..49c6964 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -199,8 +199,6 @@ declare namespace Choices { disabledState?: string; /** @default 'is-highlighted' */ highlightedState?: string; - /** @default 'is-hidden' */ - hiddenState?: string; /** @default 'is-flipped' */ flippedState?: string; /** @default 'is-loading' */