@1024pix/pix-ui 48.8.1 → 48.9.0

package/addon/components/pix-app-layout.hbs

@@ -1,3 +1,3 @@
-<div class="pix-app-layout">
+<div class={{this.classNames}} ...attributes>
   {{yield}}
 </div>

package/addon/components/{pix-navigation.js → pix-app-layout.js}

@@ -1,20 +1,20 @@
 import Component from '@glimmer/component';
 import { warn } from '@ember/debug';
 
-export default class PixNavigation extends Component {
+export default class PixAppLayout extends Component {
   get variant() {
     const value = this.args.variant ?? 'primary';
     warn(
-      `PixNavigation: @variant "${value}" should be certif, orga or primary`,
+      `PixAppLayout: @variant "${value}" should be certif, orga or primary`,
       ['primary', 'orga', 'certif'].includes(value),
       {
-        id: 'pix-ui.pix-navigation.variant.not-valid',
+        id: 'pix-ui.pix-app-layout.variant.not-valid',
       },
     );
 
     return value;
   }
   get classNames() {
-    return ['pix-navigation', `pix-navigation--${this.variant}`].join(' ');
+    return ['pix-app-layout', `pix-app-layout--${this.variant}`].join(' ');
   }
 }

package/addon/components/pix-navigation.hbs

@@ -1,4 +1,4 @@
-<aside ...attributes class={{this.classNames}}>
+<aside ...attributes class="pix-navigation">
   <header class="pix-navigation__brand">{{yield to="brand"}}</header>
   <nav class="pix-navigation__nav" aria-label={{@navigationAriaLabel}}>{{yield
       to="navElements"

package/addon/components/pix-select-list.hbs

@@ -0,0 +1,86 @@
+<ul role="listbox" id={{@listId}} class="pix-select_list" ...attributes>
+  <li
+    class="pix-select-list-category__option{{unless
+        @value
+        ' pix-select-list-category__option--selected'
+      }}{{unless @displayDefaultOption ' pix-select-list-category__option--hidden'}}"
+    role="option"
+    tabindex={{if this.isDefaultOptionHidden "-1" "0"}}
+    aria-selected={{if @value "false" "true"}}
+    {{on "click" (fn @onChange @defaultOption)}}
+    {{on-enter-action (fn @onChange @defaultOption)}}
+    {{on-space-action (fn @onChange @defaultOption)}}
+  >
+    {{@defaultOptionValue}}
+  </li>
+  {{#if this.results}}
+    {{#if this.displayCategory}}
+      {{#each this.results as |element index|}}
+        <ul
+          class="pix-select-list-category"
+          role="group"
+          aria-labelledby={{if this.displayCategory (concat "cat-" @selectId "-" index)}}
+        >
+          {{#if this.displayCategory}}
+            <li
+              class="pix-select-list-category__name"
+              role="presentation"
+              id={{concat "cat-" @selectId "-" index}}
+              title={{element.label}}
+            >
+              {{element.category}}
+            </li>
+          {{/if}}
+
+          {{#each element.options as |option|}}
+            {{! template-lint-disable require-context-role }}
+            {{!https://www.w3.org/WAI/ARIA/apg/example-index/listbox/listbox-grouped.html}}
+            <li
+              class="pix-select-list-category__option{{if
+                  (eq option.value @value)
+                  ' pix-select-list-category__option--selected'
+                }}"
+              role="option"
+              tabindex={{if @isExpanded "0" "-1"}}
+              title={{option.label}}
+              aria-selected={{if (eq option.value @value) "true" "false"}}
+              {{on "click" (fn @onChange option)}}
+              {{on-enter-action (fn @onChange option)}}
+              {{on-space-action (fn @onChange option)}}
+            >
+              {{option.label}}
+
+              {{#if (eq option.value @value)}}
+                <PixIcon @name="check" role="presentation" />
+              {{/if}}
+            </li>
+          {{/each}}
+        </ul>
+      {{/each}}
+    {{else}}
+      {{#each this.results as |option|}}
+        <li
+          class="pix-select-list-category__option{{if
+              (eq option.value @value)
+              ' pix-select-list-category__option--selected'
+            }}"
+          role="option"
+          tabindex={{if @isExpanded "0" "-1"}}
+          aria-selected={{if (eq option.value @value) "true" "false"}}
+          title={{option.label}}
+          {{on "click" (fn @onChange option)}}
+          {{on-enter-action (fn @onChange option)}}
+          {{on-space-action (fn @onChange option)}}
+        >
+          {{option.label}}
+
+          {{#if (eq option.value @value)}}
+            <PixIcon @name="check" role="presentation" />
+          {{/if}}
+        </li>
+      {{/each}}
+    {{/if}}
+  {{else}}
+    <li class="pix-select-list__empty-search-message">{{@emptySearchMessage}}</li>
+  {{/if}}
+</ul>

package/addon/components/pix-select-list.js

@@ -0,0 +1,42 @@
+import Component from '@glimmer/component';
+
+export default class PixSelectList extends Component {
+  constructor(...args) {
+    super(...args);
+
+    const categories = [];
+
+    this.args.options.forEach((element) => {
+      if (!categories.includes(element.category) && element.category !== undefined) {
+        categories.push(element.category);
+      }
+    });
+    this.displayCategory = categories.length > 0;
+  }
+
+  get isDefaultOptionHidden() {
+    return !this.args.isExpanded || this.args.hideDefaultOption;
+  }
+  get results() {
+    let results = [];
+    let options = this.args.options;
+
+    if (this.args.searchValue) {
+      options = this.args.options.filter((option) =>
+        option.label.toLowerCase().includes(this.args.searchValue.toLowerCase()),
+      );
+    }
+
+    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;
+  }
+}

package/addon/components/pix-select.hbs

@@ -51,7 +51,7 @@
       </button>
       <div
         {{popover}}
-        class="pix-select__dropdown{{unless this.isExpanded ' pix-select__dropdown--closed'}}"
+        class="pix-select__dropdown {{unless this.isExpanded ' pix-select__dropdown--closed'}}"
         {{on "transitionend" this.focus}}
       >
         {{#if @isSearchable}}
@@ -68,92 +68,20 @@
             />
           </div>
         {{/if}}
-        <ul role="listbox" id={{this.listId}} class="pix-select__options">
-          <li
-            class="pix-select-options-category__option{{unless
-                @value
-                ' pix-select-options-category__option--selected'
-              }}{{unless this.displayDefaultOption ' pix-select-options-category__option--hidden'}}"
-            role="option"
-            tabindex={{if this.isDefaultOptionHidden "-1" "0"}}
-            aria-selected={{if @value "false" "true"}}
-            {{on "click" (fn this.onChange this.defaultOption)}}
-            {{on-enter-action (fn this.onChange this.defaultOption)}}
-            {{on-space-action (fn this.onChange this.defaultOption)}}
-          >
-            {{@placeholder}}
-          </li>
-          {{#if this.results}}
-            {{#if this.displayCategory}}
-              {{#each this.results as |element index|}}
-                <ul
-                  class="pix-select-options__category"
-                  role="group"
-                  aria-labelledby={{if
-                    this.displayCategory
-                    (concat "cat-" this.selectId "-" index)
-                  }}
-                >
-                  {{#if this.displayCategory}}
-                    <li
-                      class="pix-select-options-category__name"
-                      role="presentation"
-                      id={{concat "cat-" this.selectId "-" index}}
-                    >
-                      {{element.category}}
-                    </li>
-                  {{/if}}
-
-                  {{#each element.options as |option|}}
-                    {{! template-lint-disable require-context-role }}
-                    {{!https://www.w3.org/WAI/ARIA/apg/example-index/listbox/listbox-grouped.html}}
-                    <li
-                      class="pix-select-options-category__option{{if
-                          (eq option.value @value)
-                          ' pix-select-options-category__option--selected'
-                        }}"
-                      role="option"
-                      tabindex={{if this.isExpanded "0" "-1"}}
-                      aria-selected={{if (eq option.value @value) "true" "false"}}
-                      {{on "click" (fn this.onChange option)}}
-                      {{on-enter-action (fn this.onChange option)}}
-                      {{on-space-action (fn this.onChange option)}}
-                    >
-                      {{option.label}}
-
-                      {{#if (eq option.value @value)}}
-                        <PixIcon @name="check" role="presentation" />
-                      {{/if}}
-                    </li>
-                  {{/each}}
-                </ul>
-              {{/each}}
-            {{else}}
-              {{#each this.results as |option|}}
-                <li
-                  class="pix-select-options-category__option{{if
-                      (eq option.value @value)
-                      ' pix-select-options-category__option--selected'
-                    }}"
-                  role="option"
-                  tabindex={{if this.isExpanded "0" "-1"}}
-                  aria-selected={{if (eq option.value @value) "true" "false"}}
-                  {{on "click" (fn this.onChange option)}}
-                  {{on-enter-action (fn this.onChange option)}}
-                  {{on-space-action (fn this.onChange this.defaultOption)}}
-                >
-                  {{option.label}}
-
-                  {{#if (eq option.value @value)}}
-                    <PixIcon @name="check" role="presentation" />
-                  {{/if}}
-                </li>
-              {{/each}}
-            {{/if}}
-          {{else}}
-            <li class="pix-select__empty-search-message">{{@emptySearchMessage}}</li>
-          {{/if}}
-        </ul>
+        <PixSelectList
+          @hideDefaultOption={{@hideDefaultOption}}
+          @listId={{this.listId}}
+          @value={{@value}}
+          @displayDefaultOption={{this.displayDefaultOption}}
+          @searchValue={{this.searchValue}}
+          @onChange={{this.onChange}}
+          @defaultOption={{this.defaultOption}}
+          @selectId={{this.selectId}}
+          @isExpanded={{this.isExpanded}}
+          @options={{@options}}
+          @defaultOptionValue={{@placeholder}}
+          @emptySearchMessage={{@emptySearchMessage}}
+        />
       </div>
     </PopperJS>
     {{#if @errorMessage}}

package/addon/components/pix-select.js

@@ -12,19 +12,10 @@ export default class PixSelect extends Component {
   constructor(...args) {
     super(...args);
 
-    const categories = [];
-
     this.searchId = 'search-input-' + guidFor(this);
     this.selectId = this.args.id ? this.args.id : 'select-' + guidFor(this);
     this.listId = `listbox-${this.selectId}`;
 
-    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.isComputeWidthDisabled) {
       this.elementHelper.waitForElement(this.listId).then((elementList) => {
         const baseFontRemRatio = Number(
@@ -43,10 +34,6 @@ export default class PixSelect extends Component {
     return !this.searchValue && !this.args.hideDefaultOption;
   }
 
-  get isDefaultOptionHidden() {
-    return !this.isExpanded || this.args.hideDefaultOption;
-  }
-
   get className() {
     const classes = ['pix-select-button'];
     if (this.args.className) {
@@ -75,29 +62,6 @@ export default class PixSelect extends Component {
     };
   }
 
-  get results() {
-    let results = [];
-    let options = this.args.options;
-
-    if (this.searchValue) {
-      options = this.args.options.filter((option) =>
-        option.label.toLowerCase().includes(this.searchValue.toLowerCase()),
-      );
-    }
-
-    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;
-  }
-
   @action
   toggleDropdown(event) {
     if (this.isExpanded) {

package/addon/components/pix-structure-switcher.hbs

@@ -0,0 +1,40 @@
+<div
+  id="container-{{this.switcherId}}"
+  class="pix-structure-switcher"
+  {{on-click-outside this.closeMenu}}
+  {{on-arrow-down-up-action this.listId this.openMenu this.isMenuOpen}}
+  {{on-escape-action this.closeMenu this.switcherId}}
+  {{on "keydown" this.lockTab}}
+  ...attributes
+>
+  <PopperJS @placement="right-end" as |reference popover|>
+
+    <PixButton
+      {{reference}}
+      @size="small"
+      @variant="secondary"
+      aria-controls={{this.listId}}
+      id={{this.switcherId}}
+      @triggerAction={{this.toggleMenu}}
+      aria-expanded={{this.isMenuOpen}}
+    >{{@label}}</PixButton>
+    <div
+      {{popover}}
+      class="pix-select__dropdown {{unless this.isMenuOpen 'pix-select__dropdown--closed'}}"
+    >
+      <PixSelectList
+        aria-labelledby={{this.switcherId}}
+        {{on "transitionend" this.focus}}
+        @hideDefaultOption={{true}}
+        @listId={{this.listId}}
+        @selectId={{this.switcherId}}
+        @value={{@value}}
+        @onChange={{this.onSelectListChange}}
+        @defaultOption={{@defaultOption}}
+        @isExpanded={{this.isMenuOpen}}
+        @options={{@structures}}
+        @defaultOptionValue={{@label}}
+      />
+    </div>
+  </PopperJS>
+</div>

package/addon/components/pix-structure-switcher.js

@@ -0,0 +1,57 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import { inject as service } from '@ember/service';
+
+export default class PixStructureSwitcher extends Component {
+  @service elementHelper;
+
+  constructor(...args) {
+    super(...args);
+    this.switcherId = 'structure-switcher-' + guidFor(this);
+    this.listId = `listbox-${this.switcherId}`;
+    this.elementHelper.waitForElement(`container-${this.switcherId}`).then((element) => {
+      this.rootElement = element;
+    });
+  }
+
+  @tracked
+  isMenuOpen = false;
+
+  @action
+  toggleMenu() {
+    this.isMenuOpen = !this.isMenuOpen;
+  }
+
+  @action
+  onSelectListChange(structure, event) {
+    this.args.onChange(structure);
+    this.closeMenu(event);
+    document.getElementById(this.switcherId).focus();
+  }
+
+  @action
+  openMenu(event) {
+    event.preventDefault();
+    this.isMenuOpen = true;
+  }
+
+  @action
+  closeMenu(event) {
+    event.preventDefault();
+    this.isMenuOpen = false;
+  }
+
+  @action
+  lockTab(event) {
+    if (event.code === 'Tab' && this.isMenuOpen) {
+      event.preventDefault();
+    }
+  }
+
+  @action
+  focus() {
+    document.getElementById(this.listId).querySelector("[aria-selected='true']").focus();
+  }
+}

package/addon/styles/_pix-app-layout.scss

@@ -1,6 +1,27 @@
-.pix-app-layout{
+.pix-app-layout {
   display: grid;
   grid-template-columns: minmax(214px, auto) 1fr;
   gap: var(--pix-spacing-6x);
   padding: var(--pix-spacing-6x);
+
+  &--orga {
+    background-color: var(--pix-orga-50);
+
+    --pix-navigation-color: var(--pix-orga-500);
+    --pix-navigation-text-color: var(--pix-neutral-0);
+  }
+
+  &--certif {
+    background-color: var(--pix-certif-50);
+
+    --pix-navigation-color: var(--pix-certif-500);
+    --pix-navigation-text-color: var(--pix-neutral-0);
+  }
+
+  &--primary {
+    background-color: var(--pix-primary-10);
+
+    --pix-navigation-color: var(--pix-primary-700);
+    --pix-navigation-text-color: var(--pix-neutral-0);
+  }
 }

package/addon/styles/_pix-navigation.scss

@@ -20,22 +20,6 @@
   --pix-navigation-button-bgcolor-hover: rgb(205, 209, 217, .3);
   --pix-navigation-button-bgcolor-active: rgb(205, 209, 217, .5);
 
-  &--orga {
-    --pix-navigation-color: var(--pix-orga-500);
-    --pix-navigation-text-color: var(--pix-neutral-0);
-
-  }
-
-  &--certif {
-    --pix-navigation-color: var(--pix-certif-500);
-    --pix-navigation-text-color: var(--pix-neutral-0);
-  }
-
-  &--primary {
-    --pix-navigation-color: var(--pix-primary-700);
-    --pix-navigation-text-color: var(--pix-neutral-0);
-  }
-
   &__brand {
     margin-bottom: 0;
     padding:0;

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

@@ -0,0 +1,75 @@
+.pix-select_list {
+  padding: var(--pix-spacing-2x);
+  border-top: 1px solid var(--pix-neutral-20);
+
+  --border-radius-2x: var(--pix-spacing-2x);
+
+}
+
+.pix-select-list-category {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  &__name {
+    @extend %pix-body-s;
+
+    padding: var(--pix-spacing-4x) var(--pix-spacing-6x) var(--pix-spacing-2x) var(--pix-spacing-4x);
+    color: var(--pix-neutral-500);
+    text-transform: uppercase;
+  }
+
+  &__option {
+    @extend %pix-body-s;
+
+    &:nth-child(even) {
+      background-color: var(--pix-neutral-20);
+    }
+
+    position: relative;
+    padding: var(--pix-spacing-2x) var(--pix-spacing-8x) var(--pix-spacing-2x) var(--pix-spacing-4x);
+    color: var(--pix-neutral-900);
+    border-radius: 8px;
+
+
+    &:hover,
+    &:focus {
+      background-color: var(--pix-primary-10);
+      outline: none;
+      cursor: pointer;
+    }
+
+    svg {
+      position: absolute;
+      top: 50%;
+      right: var(--pix-spacing-2x);
+      transform: translateY(-50%);
+      visibility: hidden;
+      opacity: 0;
+    }
+
+    &--selected {
+      align-items: center;
+      background-color: var(--pix-primary-10);
+
+      svg {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+    &--hidden {
+      height: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      visibility: hidden;
+    }
+  }
+}
+
+.pix-select-list__empty-search-message {
+  @extend %pix-body-s;
+
+  color: var(--pix-neutral-800);
+  text-align: center;
+}

package/addon/styles/_pix-select.scss

@@ -13,7 +13,7 @@
   }
 
   &__dropdown {
-    @extend %pix-shadow-sm;
+    @extend %pix-shadow-xs;
 
     position: absolute;
     z-index: 200;
@@ -56,12 +56,7 @@
     }
   }
 
-  &__empty-search-message {
-    @extend %pix-body-s;
 
-    color: var(--pix-neutral-800);
-    text-align: center;
-  }
 
   &__search {
     display: flex;
@@ -76,10 +71,6 @@
     }
   }
 
-  &__options {
-    border-top: 1px solid var(--pix-neutral-20);
-  }
-
   &__error-message {
     @extend %pix-input-error-message;
   }
@@ -124,63 +115,6 @@
   }
 }
 
-.pix-select-options__category {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.pix-select-options-category {
-  &__name {
-    @extend %pix-body-s;
-
-    padding: var(--pix-spacing-4x) var(--pix-spacing-6x) var(--pix-spacing-2x) var(--pix-spacing-6x);
-    color: var(--pix-neutral-500);
-    text-transform: uppercase;
-  }
-
-  &__option {
-    @extend %pix-body-s;
-
-    position: relative;
-    padding: var(--pix-spacing-2x) var(--pix-spacing-8x) var(--pix-spacing-2x) var(--pix-spacing-6x);
-    color: var(--pix-neutral-900);
-
-    &:hover,
-    &:focus {
-      background-color: var(--pix-primary-10);
-      outline: none;
-      cursor: pointer;
-    }
-
-    svg {
-      position: absolute;
-      top: 50%;
-      right: var(--pix-spacing-2x);
-      transform: translateY(-50%);
-      visibility: hidden;
-      opacity: 0;
-    }
-
-    &--selected {
-      align-items: center;
-      background-color: var(--pix-primary-10);
-
-      svg {
-        visibility: visible;
-        opacity: 1;
-      }
-    }
-
-    &--hidden {
-      height: 0;
-      padding-top: 0;
-      padding-bottom: 0;
-      visibility: hidden;
-    }
-  }
-}
-
 .pix-select-search {
   &__input {
     @extend %pix-body-s;

package/addon/styles/_pix-structure-switcher.scss

@@ -0,0 +1,64 @@
+.pix-structure-switcher {
+  --pix-structure-bg-hover: var(--pix-primary-100);
+
+  .pix-app-layout--orga & {
+    --pix-structure-bg-hover: var(--pix-orga-50);
+  }
+
+  .pix-app-layout--certif & {
+    --pix-structure-bg-hover: var(--pix-certif-50);
+  }
+
+  .pix-button {
+    width: 100%;
+  }
+
+  .pix-select__dropdown {
+    @extend %pix-shadow-xs;
+
+    position: static;
+    width: auto;
+    min-width: 100%;
+    max-width: 316px;
+    max-height: 80vh;
+    margin-left: var(--pix-spacing-6x) !important; // we need to override popperjs inline styles
+    overflow-y: auto;
+    border-radius: 8px;
+  }
+
+  .pix-select_list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--pix-spacing-2x);
+    padding: var(--pix-spacing-2x);
+  }
+
+  .pix-select-list-category__option--hidden {
+    display: none
+  }
+
+  .pix-select-list-category__option {
+    padding: var(--pix-spacing-2x) var(--pix-spacing-8x) var(--pix-spacing-2x) var(--pix-spacing-4x);
+    overflow-x: hidden;
+    // stylelint-disable-next-line custom-property-pattern
+    font-family: var(--_pix-font-family-title);
+    white-space: nowrap;
+    text-align: left;
+    text-overflow: ellipsis;
+    border-radius: var(--border-radius-2x);
+
+    &:hover {
+      background-color: var(--pix-structure-bg-hover);
+    }
+  }
+
+  .pix-select-list-category__option--selected {
+    color: var(--pix-navigation-text-color);
+    font-weight: var(--pix-font-bold);
+    background-color: var(--pix-navigation-color);
+
+    &:hover {
+      background-color: var(--pix-navigation-color);
+    }
+  }
+}

package/addon/styles/addon.scss

@@ -15,6 +15,7 @@
 @import 'pix-progress-gauge';
 @import 'pix-return-to';
 @import 'pix-select';
+@import 'pix-select-list';
 @import 'pix-stars';
 @import 'pix-tag';
 @import 'pix-textarea';
@@ -41,6 +42,7 @@
 @import 'pix-navigation-button';
 @import 'pix-navigation-separator';
 @import 'pix-app-layout';
+@import 'pix-structure-switcher';
 
 
 // at the end so it can override it's children scss

package/app/components/pix-select-list.js

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

package/app/components/pix-structure-switcher.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-structure-switcher';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "48.8.1",
+  "version": "48.9.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -53,12 +53,13 @@
   },
   "dependencies": {
     "@formatjs/intl": "^2.5.1",
-    "ember-auto-import": "^2.5.0",
+    "ember-auto-import": "^2.10.0",
     "ember-cli-babel": "^8.0.0",
     "ember-cli-htmlbars": "^6.1.1",
     "ember-cli-sass": "^11.0.1",
     "ember-click-outside": "^6.0.1",
     "ember-lifeline": "^7.0.0",
+    "ember-modifier": "^4.2.0",
     "ember-popperjs": "^3.0.0",
     "ember-truth-helpers": "^4.0.0"
   },