@1024pix/pix-ui 57.2.0 → 58.0.0

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

@@ -1,10 +1,13 @@
 import { VARIANTS } from '@1024pix/pix-ui/helpers/variants';
 import { warn } from '@ember/debug';
+import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
 
 import onWindowResize from '../modifiers/on-window-resize';
 
 export default class PixAppLayout extends Component {
+  @service shrinkNavigationService;
+
   #computeMarginTopElement(entries) {
     for (const entry of entries) {
       if (entry.target.id === 'pix-layout-banner-container') {
@@ -36,6 +39,10 @@ export default class PixAppLayout extends Component {
       },
     );
 
+    if (this.args.variant === 'admin') {
+      this.shrinkNavigationService.displayShrunkNavigationButton();
+    }
+
     return value;
   }
   get classNames() {

package/addon/components/pix-navigation-button.gjs

@@ -4,11 +4,13 @@ import { service } from '@ember/service';
 import Component from '@glimmer/component';
 
 import PixIcon from './pix-icon';
+import PixNavigationShrunkButton from './pix-navigation-shrunk-button';
 
 export default class PixNavigationButton extends Component {
   defaultParams = {};
   defaultModel = [];
   @service router;
+  @service shrinkNavigationService;
 
   get isActiveRoute() {
     return this.args.route === this.router.currentRouteName;
@@ -19,56 +21,63 @@ export default class PixNavigationButton extends Component {
   }
 
   <template>
-    {{#if @route}}
-      <LinkTo
+    {{#if this.shrinkNavigationService.isShrunk}}
+      <PixNavigationShrunkButton
         @route={{@route}}
-        @models={{if @model (array @model) this.defaultModel}}
-        @query={{if @query @query this.defaultParams}}
-        class="pix-navigation-button"
-        target={{if this.isLinkOpenInANewWindow "_blank"}}
-        ...attributes
-      >
-        {{#if @icon}}
-          <PixIcon
-            class="pix-navigation-button__icon"
-            @ariaHidden={{true}}
-            @name={{@icon}}
-            @plainIcon={{if this.isActiveRoute true false}}
-          />
-        {{/if}}
-        {{yield}}
-        {{#if this.isLinkOpenInANewWindow}}
-          <PixIcon
-            class="pix-navigation-button__external-icon"
-            @ariaHidden={{true}}
-            @name="openNew"
-          />
-        {{/if}}
-      </LinkTo>
+        @icon={{@icon}}
+      >{{yield}}</PixNavigationShrunkButton>
     {{else}}
-      {{! template-lint-disable link-href-attributes }}
-      <a
-        class="pix-navigation-button"
-        target={{if this.isLinkOpenInANewWindow "_blank"}}
-        ...attributes
-      >
-        {{#if @icon}}
-          <PixIcon
-            class="pix-navigation-button__icon"
-            @ariaHidden={{true}}
-            @name={{@icon}}
-            @plainIcon={{@iconPlain}}
-          />
-        {{/if}}
-        {{yield}}
-        {{#if this.isLinkOpenInANewWindow}}
-          <PixIcon
-            class="pix-navigation-button__external-icon"
-            @ariaHidden={{true}}
-            @name="openNew"
-          />
-        {{/if}}
-      </a>
+      {{#if @route}}
+        <LinkTo
+          @route={{@route}}
+          @models={{if @model (array @model) this.defaultModel}}
+          @query={{if @query @query this.defaultParams}}
+          class="pix-navigation-button"
+          target={{if this.isLinkOpenInANewWindow "_blank"}}
+          ...attributes
+        >
+          {{#if @icon}}
+            <PixIcon
+              class="pix-navigation-button__icon"
+              @ariaHidden={{true}}
+              @name={{@icon}}
+              @plainIcon={{if this.isActiveRoute true false}}
+            />
+          {{/if}}
+          {{yield}}
+          {{#if this.isLinkOpenInANewWindow}}
+            <PixIcon
+              class="pix-navigation-button__external-icon"
+              @ariaHidden={{true}}
+              @name="openNew"
+            />
+          {{/if}}
+        </LinkTo>
+      {{else}}
+        {{! template-lint-disable link-href-attributes }}
+        <a
+          class="pix-navigation-button"
+          target={{if this.isLinkOpenInANewWindow "_blank"}}
+          ...attributes
+        >
+          {{#if @icon}}
+            <PixIcon
+              class="pix-navigation-button__icon"
+              @ariaHidden={{true}}
+              @name={{@icon}}
+              @plainIcon={{@iconPlain}}
+            />
+          {{/if}}
+          {{yield}}
+          {{#if this.isLinkOpenInANewWindow}}
+            <PixIcon
+              class="pix-navigation-button__external-icon"
+              @ariaHidden={{true}}
+              @name="openNew"
+            />
+          {{/if}}
+        </a>
+      {{/if}}
     {{/if}}
   </template>
 }

package/addon/components/pix-navigation-shrunk-button.gjs

@@ -0,0 +1,53 @@
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { LinkTo } from '@ember/routing';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import PixIcon from './pix-icon';
+
+export default class PixNavigationShrunkButton extends Component {
+  @tracked isTooltipVisible = false;
+
+  @action
+  showTooltip() {
+    this.isTooltipVisible = true;
+  }
+
+  @action
+  hideTooltip() {
+    setTimeout(() => (this.isTooltipVisible = false));
+  }
+
+  @action
+  hideTooltipOnMouseOut(event) {
+    const isFocused = event.target.contains(document.activeElement);
+
+    if (isFocused) {
+      return;
+    }
+
+    this.hideTooltip(event);
+  }
+
+  <template>
+    <div
+      class="navigation-tooltip {{if this.isTooltipVisible 'navigation-tooltip--visible' ''}}"
+      {{on "mouseleave" this.hideTooltipOnMouseOut}}
+      {{on "mouseenter" this.showTooltip}}
+      {{on "focusin" this.showTooltip}}
+      {{on "focusout" this.hideTooltip}}
+    >
+      <LinkTo
+        @route={{@route}}
+        class="pix-navigation-button navigation-shrunk-button"
+        ...attributes
+      >
+        <PixIcon class="pix-navigation-button__icon" @ariaHidden={{true}} @name={{@icon}} />
+      </LinkTo>
+      <span role="tooltip" class="navigation-tooltip__content" aria-hidden="true">
+        {{yield}}
+      </span>
+    </div>
+  </template>
+}

package/addon/components/pix-navigation.hbs

@@ -1,8 +1,20 @@
 <aside
   ...attributes
-  class="pix-navigation {{if this.navigationMenuOpened 'pix-navigation--opened'}}"
+  class="pix-navigation
+    {{if this.navigationMenuOpened 'pix-navigation--opened'}}
+    {{if this.shrinkNavigationService.isShrunk 'pix-navigation--shrunk'}}"
 >
   <header class="pix-navigation__brand">{{yield to="brand"}}
+    {{#if this.shrinkNavigationService.canNavigationBeShrunk}}
+      <div class="pix-navigation__shrunk-container">
+        <PixIconButton
+          class="pix-navigation-shrunk-button"
+          @iconName={{this.shrunkNavigationIcon}}
+          @triggerAction={{this.shrinkNavigation}}
+          @ariaLabel="{{this.shrunkNavigationAriaLabel}}"
+        />
+      </div>
+    {{/if}}
     <div class="pix-navigation__burger-menu"><PixButton
         aria-controls="{{this.navigationId}} {{this.footerId}}"
         aria-expanded={{this.navigationMenuOpened}}

package/addon/components/pix-navigation.js

@@ -5,8 +5,11 @@ import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-export default class PixMNavigation extends Component {
+import { formatMessage } from '../translations';
+
+export default class PixNavigation extends Component {
   @service router;
+  @service shrinkNavigationService;
 
   constructor(...args) {
     super(...args);
@@ -23,6 +26,10 @@ export default class PixMNavigation extends Component {
   @tracked
   navigationMenuOpened = false;
 
+  formatMessage(message, values) {
+    return formatMessage(this.args.locale ?? 'fr', `pixNavigation.${message}`, values);
+  }
+
   @action
   toggleNavigationMenu() {
     this.navigationMenuOpened = !this.navigationMenuOpened;
@@ -44,6 +51,23 @@ export default class PixMNavigation extends Component {
     }
   }
 
+  @action
+  shrinkNavigation() {
+    this.shrinkNavigationService.shrinkNavigation();
+  }
+
+  get shrunkNavigationIcon() {
+    return this.shrinkNavigationService.isShrunk ? 'arrowMenuOpen' : 'arrowMenuClose';
+  }
+
+  get shrunkNavigationAriaLabel() {
+    return this.formatMessage(
+      this.shrinkNavigationService.isShrunk
+        ? 'expandNavigationAriaLabel'
+        : 'shrinkNavigationAriaLabel',
+    );
+  }
+
   get navigationId() {
     return `${this._navigationId}-nav`;
   }

package/addon/services/shrink-navigation-service.js

@@ -0,0 +1,23 @@
+import { action } from '@ember/object';
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export default class ShrinkNavigationService extends Service {
+  @tracked canNavigationBeShrunk = false;
+  @tracked isShrunk = false;
+
+  @action displayShrunkNavigationButton() {
+    this.canNavigationBeShrunk = true;
+  }
+
+  @action shrinkNavigation() {
+    this.isShrunk = !this.isShrunk;
+
+    const root = document.documentElement;
+
+    if (this.isShrunk) {
+      return root.style.setProperty('--pix-navigation-width', '88px');
+    }
+    return root.style.setProperty('--pix-navigation-width', '15rem');
+  }
+}

package/addon/styles/_pix-navigation-shrunk-button.scss

@@ -0,0 +1,43 @@
+@use "pix-design-tokens/typography";
+
+.navigation-tooltip {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &__content {
+    @extend %pix-title-xxs;
+
+    position: absolute;
+    left: calc(100% + 10px);
+    width: max-content;
+    padding: var(--pix-spacing-1x) var(--pix-spacing-4x);
+    color: var(--pix-neutral-800);
+    background-color: var(--pix-neutral-0);
+    border-radius: var(--pix-spacing-2x);
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.3s;
+    pointer-events: none;
+  }
+
+  &--visible {
+    &:hover, &:active {
+      .navigation-tooltip__content {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+    // Focus event is triggered by the button. That's why we are duplicating the style for this case.
+    .navigation-shrunk-button:focus-within + .navigation-tooltip__content {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+}
+
+.navigation-shrunk-button {
+  justify-content: center;
+}

package/addon/styles/_pix-navigation.scss

@@ -21,6 +21,7 @@
   color: var(--pix-navigation-text-color);
   background-color: var(--pix-navigation-color);
   border-radius: var(--pix-spacing-6x);
+  transition: all 0.3s ease;
 
   @include breakpoints.device-is('mobile') {
     flex-direction: column;
@@ -36,6 +37,16 @@
     }
   }
 
+  &--shrunk {
+    --pix-navigation-width: 88px;
+
+    transition: all 0.3s ease;
+  }
+
+  &__shrunk-container {
+    position: relative;
+    height: 20px;
+  }
 
   &__brand {
     margin-bottom: 0;
@@ -218,3 +229,14 @@
   }
 }
 
+.pix-navigation-shrunk-button {
+  position: absolute;
+  left: calc(100% - 4px);
+  background-color: var(--pix-neutral-0);
+  border: 1px solid var(--pix-primary-900);
+
+  @include breakpoints.device-is('mobile') {
+    visibility: hidden;
+    opacity: 0;
+  }
+}

package/addon/styles/addon.scss

@@ -42,6 +42,7 @@
 @use 'toast-example';
 @use 'pix-navigation';
 @use 'pix-navigation-button';
+@use 'pix-navigation-shrunk-button';
 @use 'pix-navigation-separator';
 @use 'pix-app-layout';
 @use 'pix-structure-switcher';

package/addon/styles/pix-design-tokens/_colors.scss

@@ -37,6 +37,8 @@
   --pix-neutral-20: rgb(var(--pix-neutral-20-inline));
   --pix-neutral-100-inline:205, 209, 217;
   --pix-neutral-100: rgb(var(--pix-neutral-100-inline));
+  --pix-neutral-300-inline:147, 157, 173;
+  --pix-neutral-300: rgb(var(--pix-neutral-300-inline));
   --pix-neutral-500-inline:94, 108, 132;
   --pix-neutral-500: rgb(var(--pix-neutral-500-inline));
   --pix-neutral-800-inline:37, 56, 88;

package/addon/translations/en.js

@@ -21,4 +21,8 @@ export default {
   tag: {
     removeButton: 'Remove',
   },
+  pixNavigation: {
+    shrinkNavigationAriaLabel: 'Reduce the width of the navigation menu',
+    expandNavigationAriaLabel: 'Return to the initial width of the navigation menu',
+  },
 };

package/addon/translations/es.js

@@ -19,4 +19,8 @@ export default {
     pageNumber: 'Página {current, number} / {total, number}',
     nextPageLabel: 'Ir a la página siguiente',
   },
+  pixNavigation: {
+    shrinkNavigationAriaLabel: 'Reducir el ancho del menú de navegación',
+    expandNavigationAriaLabel: 'Volver al ancho inicial del menú de navegación',
+  },
 };

package/addon/translations/fr.js

@@ -21,4 +21,8 @@ export default {
   tag: {
     removeButton: 'Supprimer',
   },
+  pixNavigation: {
+    shrinkNavigationAriaLabel: 'Réduire la largeur du menu de navigation',
+    expandNavigationAriaLabel: 'Revenir à la largeur initiale du menu de navigation',
+  },
 };

package/addon/translations/nl.js

@@ -21,4 +21,8 @@ export default {
   tag: {
     removeButton: 'Verwijderen',
   },
+  pixNavigation: {
+    shrinkNavigationAriaLabel: 'De breedte van het navigatiemenu verkleinen',
+    expandNavigationAriaLabel: 'Terug naar de oorspronkelijke breedte van het navigatiemenu',
+  },
 };

package/app/components/pix-navigation-shrunk-button.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-navigation-shrunk-button';

package/app/services/shrink-navigation-service.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/services/shrink-navigation-service';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "57.2.0",
+  "version": "58.0.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"