@1024pix/pix-ui 20.2.3 → 22.0.0

package/addon/components/pix-select.js

@@ -1,58 +1,161 @@
 import Component from '@glimmer/component';
-import { guidFor } from '@ember/object/internals';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
 
 export default class PixSelect extends Component {
-  @tracked isValueAValidOption = false;
+  @tracked isExpanded = false;
+  @tracked searchValue = null;
+  searchId = 'search-input-' + guidFor(this);
+
+  constructor(...args) {
+    super(...args);
 
-  constructor() {
-    super(...arguments);
+    if (!this.args.label && !this.args.id)
+      throw new Error('ERROR in PixSelect, a @label or an @id was not provided');
+
+    const categories = [];
+    this.args.options.forEach((element) => {
+      if (!categories.includes(element.category) && element.category !== undefined) {
+        categories.push(element.category);
+      }
+    });
+
+    this.displayCategory = categories.length > 0;
+  }
 
-    if (this.args.isSearchable) {
-      this.datalistId = 'pix-select-list-' + guidFor(this);
+  get selectId() {
+    if (this.args.id) return this.args.id;
+    return 'select-' + guidFor(this);
+  }
+
+  get displayDefaultOption() {
+    return !this.searchValue && !this.args.hideDefaultOption;
+  }
+
+  get className() {
+    const classes = ['pix-select-button'];
+    if (this.args.className) {
+      classes.push(this.args.className);
+    }
+    if (this.args.errorMessage) {
+      classes.push('pix-select-button--error');
     }
+    return classes.join(' ');
+  }
+
+  get isAriaExpanded() {
+    return this.isExpanded ? 'true' : 'false';
+  }
+
+  get listId() {
+    return `listbox-${this.selectId}`;
+  }
+
+  get dropDownId() {
+    return `dropdown-${this.selectId}`;
+  }
+
+  get placeholder() {
+    if (!this.args.value) return this.args.placeholder;
+    const option = this.args.options.find((option) => option.value === this.args.value);
+    return option ? option.label : this.args.placeholder;
+  }
+
+  get defaultOption() {
+    return {
+      value: '',
+    };
   }
 
-  get label() {
-    const labelIsDefined = this.args.label?.trim();
-    const idIsNotDefined = !this.args.id?.trim();
+  get results() {
+    let results = [];
+    let options = this.args.options;
 
-    if (labelIsDefined && idIsNotDefined) {
-      throw new Error('ERROR in PixSelect component, @id param is necessary when giving @label');
+    if (this.searchValue) {
+      options = this.args.options.filter((option) =>
+        option.label.toLowerCase().includes(this.searchValue.toLowerCase())
+      );
     }
-    return this.args.label || null;
+
+    if (!this.displayCategory) return options;
+
+    options.forEach(({ category, value, label }) => {
+      const categoryIndex = results.findIndex((result) => result.category === category);
+      if (categoryIndex !== -1) {
+        results[categoryIndex].options.push({ value, label });
+      } else {
+        results.push({ category, options: [{ label, value }] });
+      }
+    });
+    return results;
   }
 
-  get isBig() {
-    return this.args.size === 'big';
+  @action
+  toggleDropdown(event) {
+    if (this.isExpanded) {
+      this.hideDropdown(event);
+    } else {
+      this.showDropdown(event);
+    }
   }
 
-  get isValid() {
-    return this.args.isValidationActive && this.isValueAValidOption;
+  @action
+  showDropdown(event) {
+    event.preventDefault();
+
+    this.isExpanded = true;
   }
 
   @action
-  onChange(event) {
-    if (this.args.onChange) {
-      this.args.onChange(event);
+  hideDropdown(event) {
+    if (this.isExpanded) {
+      event.preventDefault();
+
+      this.isExpanded = false;
     }
+  }
 
-    if (!this.args.isSearchable || !this.args.options) {
-      return;
+  @action
+  onChange(option, event) {
+    this.args.onChange(option.value);
+
+    this.hideDropdown(event);
+    document.getElementById(this.selectId).focus();
+  }
+
+  @action
+  setSearchValue(event) {
+    this.searchValue = event.target.value.trim();
+  }
+
+  @action
+  lockTab(event) {
+    if (event.code === 'Tab' && this.isExpanded) {
+      event.preventDefault();
+      document.getElementById(this.searchId).focus();
     }
+  }
 
-    if (this.args.isValidationActive) {
-      this.isValueAValidOption = _checkIfValueIsAValidOption({
-        value: event.target.value,
-        options: this.args.options,
-      });
+  @action
+  focus() {
+    if (this.isExpanded) {
+      if (this.args.value) {
+        document.querySelector("[aria-selected='true']").focus();
+      } else if (this.args.isSearchable) {
+        document.getElementById(this.searchId).focus();
+      } else if (this.displayDefaultOption) {
+        document.querySelector("[aria-selected='true']").focus();
+      }
     }
   }
-}
 
-function _checkIfValueIsAValidOption({ value, options }) {
-  return value
-    ? options.some((option) => option.label.toLowerCase() === value.toLowerCase())
-    : false;
+  @action
+  setSelectWidth() {
+    const baseFontRemRatio = 16;
+    const checkIconWidth = 16;
+    const listWidth = document.getElementById(this.listId).getBoundingClientRect().width;
+    const selectWidth = (listWidth + checkIconWidth) / baseFontRemRatio;
+    document.getElementById(`container-${this.selectId}`).style.width = `${selectWidth}rem`;
+  }
 }

package/addon/components/pix-stars.hbs

@@ -1,4 +1,4 @@
-<div class={{this.pixStarsClass}} ...attributes role="img" aria-label={{@alt}}>
+<div class={{this.pixStarsClass}} ...attributes aria-label={{@alt}}>
   {{#each this.stars as |star|}}
     <svg
       class="pix-stars__{{star}}"

package/addon/components/pix-toggle.hbs

@@ -0,0 +1,24 @@
+<label class={{this.className}}>
+  <span class="pix-toggle__label{{if @screenReaderOnly ' screen-reader-only'}}">{{@label}}</span>
+  <button
+    class="pix-toggle__button"
+    aria-pressed={{if @toggled "true" "false"}}
+    type="button"
+    {{on "click" this.onToggle}}
+  >
+    <span class="pix-toggle__on">
+      {{#if @onLabel}}
+        {{@onLabel}}
+      {{else}}
+        {{yield to="on"}}
+      {{/if}}
+    </span>
+    <span class="pix-toggle__off">
+      {{#if @offLabel}}
+        {{@offLabel}}
+      {{else}}
+        {{yield to="off"}}
+      {{/if}}
+    </span>
+  </button>
+</label>

package/addon/components/pix-toggle.js

@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class PixToggle extends Component {
+  get className() {
+    const classes = ['pix-toggle'];
+    if (this.args.inline) {
+      classes.push('pix-toggle--inline');
+    }
+    if (this.args.toggled) {
+      classes.push('pix-toggle--pressed');
+    }
+    if (this.args.screenReaderOnly) {
+      classes.push('pix-toggle--screen-reader-only');
+    }
+    return classes.join(' ');
+  }
+
+  @action
+  onToggle() {
+    this.args.onChange(!this.args.toggled);
+  }
+}

package/addon/styles/_form.scss

@@ -1,6 +1,7 @@
 @mixin hoverFormElement() {
   &:hover {
-    box-shadow: inset 0px 0px 0px 0.6px $pix-neutral-40;
+    box-shadow: inset 0px 0px 0px 0.6px $pix-neutral-70;
+    background-color: $pix-neutral-5;
   }
 }
 
@@ -24,14 +25,26 @@
   display: block;
   font-family: $font-roboto;
   font-size: 0.875rem;
-  color: $pix-neutral-70;
-  margin-bottom: 4px;
+  line-height: 1.375rem;
+  color: $pix-neutral-90;
+  margin-bottom: $spacing-xxs;
+  font-weight: $font-medium;
+}
+
+@mixin subLabel() {
+  @include label();
+
+  font-size: 0.813rem;
+  line-height: 1rem;
+  color: $pix-neutral-60;
+  font-weight: $font-normal;
 }
 
 @mixin errorMessage() {
   font-family: $font-roboto;
   font-size: 0.75rem;
   color: $pix-error-70;
+  margin-top: $spacing-xxs;
 }
 
 @mixin formElementInError() {

package/addon/styles/_pix-filterable-and-searchable-select.scss

@@ -0,0 +1,57 @@
+.pix-filterable-and-searchable-select {
+  display: flex;
+  width: fit-content;
+  border: 1px $pix-neutral-45 solid;
+  border-radius: 4px;
+
+  &--error {
+    @include formElementInError();
+  }
+
+  &__label {
+    @include label();
+  }
+
+  &__sub-label {
+    @include subLabel();
+  }
+
+  &__pix-multi-select,
+  &__pix-select {
+    border: none;
+    &:hover {
+      border: none;
+      box-shadow: none;
+    }
+  }
+
+  &__error-message {
+    @include errorMessage();
+  }
+  .pix-multi-select {
+    margin-right: 2px;
+
+    [role="menu"] {
+      width: fit-content;
+    }
+  }
+
+  &__pix-multi-select {
+    border-radius: 4px 0px 0px 4px;
+    position: relative;
+
+    &:after {
+      height: 22px;
+      width: 2px;
+      content: '';
+      background-color: $pix-neutral-22;
+      position: absolute;
+      right: -2px;
+      border-radius: 50px;
+    }
+  }
+
+  &__pix-select {
+    border-radius: 0px 4px 4px 0px;
+  }
+}

package/addon/styles/_pix-multi-select.scss

@@ -56,16 +56,13 @@
   }
 
   &__dropdown-icon {
-    font-size: 11px;
-    color: $pix-neutral-30;
+    @include text-small();
+    color: $pix-neutral-60;
+    font-weight: $font-heavy;
     right: 10px;
     top: calc(50% - 6px);
     position: absolute;
     pointer-events: none;
-
-    &--expand {
-      color: $pix-primary;
-    }
   }
 }
 
@@ -81,8 +78,9 @@
   max-height: 200px;
   list-style-type: none;
   padding: 0;
-  box-shadow: 0px 8px 24px 0px rgba(23, 43, 77, 0.1);
-  transition: all .1s ease-in-out;
+  box-shadow: 0px 6px 12px rgba(7, 20, 46, 0.08);
+  transition: all 0.1s ease-in-out;
+  margin-top: $spacing-xxs;
 
   &--hidden {
     visibility: hidden;
@@ -106,15 +104,18 @@
   }
 
   li.pix-multi-select-list__item {
-    font-family: $font-roboto;
     position: relative;
-    border-bottom: 1px solid $pix-neutral-15;
     list-style: none;
-    font-size: 0.9rem;
-    padding: 8px;
+    padding: $spacing-xs $spacing-m;
+
+
+    &:hover,
+    &:focus {
+      outline: none;
+      cursor: pointer;
+      background-color: $pix-neutral-10;
+    }
 
-    @include hoverFormElement();
-    
     &--no-result {
       text-align: center;
       padding: 12px 0;

package/addon/styles/_pix-select.scss

@@ -1,70 +1,177 @@
 .pix-select {
-  @import 'reset-css';
-
+  display: inline-block;
   position: relative;
 
-  @mixin pixSelect {
-    appearance: none;
-    border: 1px $pix-neutral-40 solid;
-    border-radius: 4px;
-    color: $pix-neutral-90;
-    font-family: $font-roboto;
-    font-size: 0.875rem;
-    height: 36px;
-    width: 100%;
-    text-overflow: ellipsis;
+  &__label {
+    @include label();
+  }
 
-    @include hoverFormElement();
-    @include focusFormElement();
-    @include focusWithinFormElement();
+  &__sub-label {
+    @include subLabel();
   }
 
-  select {
-    @include pixSelect;
-    padding: 0 32px 0 16px;
+  &__dropdown {
+    z-index: 200;
+    position: absolute;
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    overflow-y: auto;
+    max-height: 200px;
+    width: inherit;
+    list-style-type: none;
+    padding: 0;
+    background-color: $pix-neutral-0;
+    box-shadow: 0px 6px 12px rgba(7, 20, 46, 0.08);
+    transition: all 0.1s ease-in-out;
+    white-space: nowrap;
+    margin-top: $spacing-xxs;
 
-    &.pix-select--big {
-      height: 44px;
+    &::-webkit-scrollbar {
+      width: 0.5rem;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 4px;
+      border: 1px solid $pix-neutral-20;
+      background: $pix-neutral-20;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      width: 0.375rem;
+      background: $pix-neutral-30;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background: $pix-neutral-35;
     }
 
-    &::-ms-expand {
-      display: none;
+    &--closed {
+      visibility: hidden;
+      opacity: 0;
     }
   }
 
-  input {
-    @include pixSelect;
-    padding: 0 8px 0 16px;
+  &__empty-search-message {
+    @include text-small();
+    color: $pix-neutral-70;
+    text-align: center;
+  }
 
-    &.pix-select--big {
-      height: 44px;
-    }
+  &__search {
+    display: flex;
+    border-bottom: 2px solid $pix-neutral-22;
+    margin: $spacing-s $spacing-m;
+    color: $pix-neutral-30;
+    border-radius: 4px 4px 0 0;
 
-    // Remove arrow for Chrome
-    &::-webkit-calendar-picker-indicator {
-      display: none;
+    &:focus-within {
+      background: $pix-neutral-10;
+      border-bottom: 2px solid $pix-primary;
     }
+  }
 
-    &.pix-select--is-valid:focus,
-    &.pix-select--is-valid:focus-within {
-      border-color: $green;
-    }
+  &__options {
+    border-top: 1px solid $pix-neutral-20;
   }
 
-  &__icon {
-    font-size: 11px;
-    color: $pix-neutral-30;
-    right: 10px;
-    top: calc(50% - 6px);
-    position: absolute;
+  &__error-message {
+    @include errorMessage();
+  }
+}
+
+.pix-select-button {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-family: $font-roboto;
+  font-weight: $font-normal;
+  position: relative;
+  border: 1px $pix-neutral-45 solid;
+  padding: 0px $spacing-s 0px $spacing-s;
+  width: 100%;
+  background-color: $pix-neutral-0;
+  border-radius: 4px;
+  outline: none;
+  height: 2.25rem;
+  cursor: pointer;
+  color: $pix-neutral-90;
+  justify-content: space-between;
+
+  @include text-small();
+  @include hoverFormElement();
+  @include focusWithinFormElement();
+
+  &--error {
+    @include formElementInError();
+  }
+
+  &__dropdown-icon {
+    @include text-small();
+    color: $pix-neutral-60;
+    font-weight: $font-heavy;
     pointer-events: none;
   }
+}
 
-  &__label {
-    @include label();
+.pix-select-options__category {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.pix-select-options-category {
+  &__name {
+    @include text-small();
+    padding: $spacing-s $spacing-m $spacing-xs $spacing-m;
+    text-transform: uppercase;
+    font-family: $font-roboto;
+    color: $pix-neutral-45;
   }
 
-  .pix-select__label ~ .pix-select__icon {
-    top: calc(50% + 6px);
+  &__option {
+    @include text-small();
+    display: flex;
+    justify-content: space-between;
+    padding: $spacing-xs $spacing-m;
+    color: $pix-neutral-70;
+
+    &:hover,
+    &:focus {
+      outline: none;
+      cursor: pointer;
+      background-color: $pix-neutral-10;
+    }
+
+    svg {
+      visibility: hidden;
+      opacity: 0;
+      font-size: 1.125rem;
+    }
+
+    &--selected {
+      background-color: $pix-primary-5;
+      align-items: center;
+
+      svg {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.pix-select-search {
+  &__input {
+    @include text-small();
+    width: 100%;
+    border: none;
+    padding-left: $spacing-xs;
+    margin: $spacing-xxs;
+    &:focus {
+      outline: none;
+      background: $pix-neutral-10;
+    }
+  }
+
+  &__icon {
+    margin: auto $spacing-xxs;
   }
 }

package/addon/styles/_pix-toggle.scss

@@ -0,0 +1,63 @@
+.pix-toggle {
+  display: flex;
+  flex-direction: column;
+
+  &__label {
+    color: $pix-neutral-90;
+
+    @include text;
+  }
+
+  &__button {
+    width: fit-content;
+    background-color: transparent;
+    border: 1px solid $pix-neutral-30;
+    border-radius: 4px;
+    padding: $spacing-xxs;
+    margin-top: $spacing-xxs;
+  }
+
+  &__on,
+  &__off {
+    display: inline-block;
+    border-radius: 4px;
+    padding: $spacing-xs;
+    color: $pix-neutral-70;
+
+    @include text-small;
+  }
+
+  &__off {
+    background-color: $pix-neutral-45;
+    color: $white;
+  }
+
+  &--inline {
+    flex-direction: row;
+    align-items: center;
+    gap: $spacing-xxs;
+  }
+
+  &--inline,
+  &--screen-reader-only {
+    .pix-toggle {
+      &__button {
+        margin-top: 0;
+      }
+    }
+  }
+
+  &--pressed {
+    .pix-toggle {
+      &__on {
+        background-color: $pix-neutral-45;
+        color: $white;
+      }
+
+      &__off {
+        background-color: transparent;
+        color: inherit;
+      }
+    }
+  }
+}

package/addon/styles/addon.scss

@@ -29,8 +29,12 @@
 @import 'pix-dropdown';
 @import 'pix-pagination';
 @import 'pix-checkbox';
+@import 'pix-toggle';
 @import 'trap-focus';
 
+// at the end so it can override it's children scss
+@import 'pix-filterable-and-searchable-select';
+
 html {
   font-size: 16px;
 }

package/app/components/pix-filterable-and-searchable-select.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-filterable-and-searchable-select';