refactor(select): upgrade component - INNO-589

framework/components/ecl-datepickers/_datepickers.scss

@@ -85,7 +85,8 @@ $ecl-datepickers-week-color: #999 !default;
   .pika-label select {
     @include ecl-form-control();
 
-    background: $ecl-datepickers-color-select;
+    appearance: none;
+    background-color: $ecl-datepickers-color-select;
     border: 0;
     color: #fff;
     cursor: pointer;
@@ -95,9 +96,16 @@ $ecl-datepickers-week-color: #999 !default;
     min-height: auto;
     padding: 0 1em;
     position: absolute;
+    text-indent: 0.01px;
+    text-overflow: '';
     width: 100%;
     z-index: 9998;
 
+    // Fix for IE 10+.
+    &::-ms-expand {
+      display: none;
+    }
+
     @include ecl-focus-outline-border(3px, map-get($ecl-colors, 'yellow-100'), -3px, none);
 
     &:focus {
@@ -107,6 +115,7 @@ $ecl-datepickers-week-color: #999 !default;
     &:hover,
     &:active,
     &:focus {
+      border-color: $ecl-color-primary;
       color: #fff;
     }
   }

framework/components/ecl-forms/ecl-forms-selects/README.md

@@ -1 +1,7 @@
 # Selects
+
+Allow users to select one option from a list.
+
+## When to use
+
+Use sparingly — only when a user needs to choose from about 7 to 15 possible options and you have limited space to display the options.

framework/components/ecl-forms/ecl-forms-selects/_selects.scss

@@ -1,78 +1,71 @@
-/*
-Select
-
-.hover      - Select hover
-:focus      - Select focus (select to see style applied)
-.is-down    - Select is-down
-
-*/
+/**
+ * Select
+ * @define select
+ */
 
 // Select list arrow styling.
-@mixin select-list-arrow($background-color, $arrow-grey:false) {
+@mixin ecl-select-list-arrow($background-color, $arrow-grey:false) {
   @if ($arrow-grey) {
     background: url('../images/svg/arrow-down.svg'), linear-gradient(to bottom, $background-color, $background-color);
-
-    .no-svg & {
-      background: url('../images/png/arrow-down.png'), linear-gradient(to bottom, $background-color, $background-color);
-    }
   }
 
   @else {
     background: url('../images/svg/arrow-down--white.svg'), linear-gradient(to bottom, $background-color, $background-color);
-
-    .no-svg & {
-      background: url('../images/png/arrow-down--white.png'), linear-gradient(to bottom, $background-color, $background-color);
-    }
   }
 
-  background-position: right ((2.75rem - map-get($ecl-font-size, 'm')) / 2) - 0.111rem center, right;
+  background-position: right map-get($ecl-font-size, 'xs') center, right;
   background-repeat: no-repeat;
-
-  // Important to make the style guide not break.
-  background-size: map-get($ecl-font-size, 'm') + 0.1rem (20rem / 32.6rem) * map-get($ecl-font-size, 'm'), 2.75rem 100% !important;
-  transition: none;
-
-  // Specific size for IE10+.
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    background-size: map-get($ecl-font-size, 'm') + 0.1rem (20rem / 32.6rem) * map-get($ecl-font-size, 'm'), 2.75rem 100% !important;
-  }
+  background-size: map-get($ecl-spacing, 'xs') map-get($ecl-spacing, 'xxs'), 2.5rem 100%;
 }
 
-.select {
-  // Hide the arrow.
+.ecl-select {
   appearance: none;
-  -moz-appearance: none;    // Firefox.
-  -webkit-appearance: none; // Safari and Chrome.
-  text-indent: 0.01px;
-  text-overflow: '';
-  cursor: pointer;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid $ecl-color-shade;
+  border-radius: 0;
+  color: $ecl-color-shade;
+  display: block;
+  font-size: map-get($ecl-font-size, 's');
+  line-height: 1.6;
+  padding: map-get($ecl-spacing, 'xxs') map-get($ecl-spacing, 'xs');
+  width: 100%;
+
+  @include ecl-select-list-arrow($ecl-color-shade);
+
+  &:not([disabled]):not([readonly]):hover {
+    @include ecl-select-list-arrow($ecl-color-primary);
 
-  // Fix for IE 10+.
-  &::-ms-expand {
-    display: none;
+    border-color: $ecl-color-primary;
   }
 
-  &.form-control {
-    // To not make it overlap.
-    padding-right: 50px;
-
-    @include select-list-arrow($ecl-color-shade);
+  &:focus {
+    border-color: map-get($ecl-colors, 'yellow-110');
+    outline: 3px solid map-get($ecl-colors, 'yellow-110');
+    outline-offset: 0;
+    text-decoration: none;
   }
 
-  // Hover state.
-  &:hover,
-  &.hover {
-    @include select-list-arrow($ecl-color-primary);
-
-    border-color: $ecl-color-primary;
+  &[disabled],
+  &[readonly] {
+    background-color: #eee;
+    cursor: not-allowed;
+    opacity: 1;
   }
 
-  // Down state.
-  &.is-down {
-    @include select-list-arrow(#fff, true);
+  // Fix for IE 10+.
+  &::-ms-expand {
+    display: none;
   }
 }
 
-select {
-  @extend .select;
+.ecl-select--has-error {
+  border-color: $ecl-color-error;
+
+  @include ecl-select-list-arrow($ecl-color-error);
+
+  &:focus {
+    border-color: darken($ecl-color-error, 10%);
+    outline-color: darken($ecl-color-error, 10%);
+  }
 }

framework/components/ecl-forms/ecl-forms-selects/ecl-forms-selects.config.js

@@ -1,5 +1,40 @@
 module.exports = {
   title: 'Selects',
   label: 'Selects',
-  status: 'planned',
+  status: 'ready',
+  collated: true,
+  collator(markup, item) {
+    return `
+      <!-- Start: @${item.handle} -->\n
+      <label for="${item.context.id}">${item.label}\n</label>\n
+      ${markup}\n
+      <!-- End: @${item.handle} -->\n
+    `;
+  },
+  default: 'default',
+  variants: [
+    {
+      name: 'default',
+      label: 'Default select list',
+      context: {
+        id: 'example-select-id-1',
+      },
+    },
+    {
+      name: 'disabled',
+      label: 'Disabled select list',
+      context: {
+        id: 'example-selectid-2',
+        isDisabled: true,
+      },
+    },
+    {
+      name: 'with-error',
+      label: 'Select list with error',
+      context: {
+        id: 'example-select-id-3',
+        hasError: true,
+      },
+    },
+  ],
 };

framework/components/ecl-forms/ecl-forms-selects/ecl-forms-selects.twig

@@ -1,15 +1,62 @@
-<div class="form-group">
-  <label for="example-select-id">Default</label>
-  <p class="help-block">This is some placeholder help text.</p>
-  <div class="form-select">
-    <select class="form-control" id="example-select-id">
-      <option>option 1</option>
-      <option>option 2</option>
-      <option>option 3</option>
-      <option>option 4</option>
-      <option>option 5</option>
-      <option>option 6</option>
-    </select>
-  </div>
-  <p class="form-field-feedback">Some feedback message</p>
-</div>
+{% set id = id|default('default-id') %}
+{% set name = name|default('default-name') %}
+
+{# Internal properties #}
+
+{% set _cssClass = 'ecl-select' %}
+{% set _extraAttributes = '' %}
+
+{# Internal logic - Process properties #}
+
+{% if hasError is defined and hasError == true %}
+  {% set _cssClass = _cssClass ~ ' ecl-select--has-error' %}
+{% endif %}
+
+{% if extraClass is defined %}
+  {% set _cssClass = _cssClass ~ ' ' ~ extraClass %}
+{% endif %}
+
+{% if isDisabled is defined and isDisabled == true %}
+  {% set _extraAttributes = _extraAttributes ~ ' disabled' %}
+{% endif %}
+
+{% if extraAttributes is defined %}
+  {% for attr in extraAttributes %}
+    {% set _extraAttributes = _extraAttributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~'"' %}
+  {% endfor %}
+{% endif %}
+
+{# Print the result  #}
+
+<select
+  class="{{ _cssClass }}"
+  id="{{ id }}"
+  name="{{ name }}"
+  {{ _extraAttributes }}
+>
+
+{% block options %}
+
+  <optgroup label="Asia">
+    <option value="3">Delhi</option>
+    <option value="4">Hong Kong</option>
+    <option value="8">Mumbai</option>
+    <option value="11">Tokyo</option>
+  </optgroup>
+  <optgroup label="Europe">
+    <option value="1">Amsterdam</option>
+    <option value="5">London</option>
+    <option value="7">Moscow</option>
+  </optgroup>
+  <optgroup label="North America">
+    <option value="6">Los Angeles</option>
+    <option value="9">New York</option>
+  </optgroup>
+  <optgroup label="South America">
+    <option value="2">Buenos Aires</option>
+    <option value="10">Sao Paulo</option>
+  </optgroup>
+
+{% endblock %}
+
+</select>

framework/components/ecl-forms/ecl-forms-selects/package.json

@@ -1,10 +1,20 @@
 {
-  "private": true,
   "name": "@ec-europa/ecl-forms-selects",
+  "author": "European Commission",
+  "license": "EUPL-1.1",
   "version": "0.5.0",
-  "description": "",
+  "description": "ECL Select",
   "main": "_selects.scss",
   "style": "_selects.scss",
-  "author": "European Commission",
-  "license": "EUPL-1.1"
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ec-europa/europa-component-library.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ec-europa/europa-component-library/issues"
+  },
+  "homepage": "https://github.com/ec-europa/europa-component-library#readme"
 }

test/functional/forms/selects.js

@@ -0,0 +1,31 @@
+describe('forms-select', () => {
+  before(() => {
+    // Set viewport size
+    browser.setViewportSize({
+      width: 800,
+      height: 400,
+    });
+
+    browser.pause(1000);
+
+    // Go to url
+    browser.url(`ecl-forms-selects.html`);
+    // Make sure the browser has finished painting
+    browser.pause(1000);
+    // Inject axe-core (for accessibility tests)
+    browser.injectAxeCore();
+  });
+
+  // Normal state
+  it('should match the reference screenshot', () => {
+    const screenshots = browser.checkDocument({
+      name: `forms/selects`,
+    });
+    expect(screenshots).to.matchReference();
+  });
+
+  it('should be accessible', () => {
+    const a11yReport = browser.runAxeCore('ecl-select').value;
+    expect(a11yReport).to.be.accessible;
+  });
+});