@1024pix/pix-ui 54.14.1 → 55.0.0

package/README.md

@@ -1,17 +1,17 @@
-- [Présentation de Pix-UI](#Pix-UI)
-- [Installation de l'addon Pix-UI](#Addon)
-- [Développment de Pix-UI](#Developpement)
+- [Présentation de Pix UI](#Pix-UI)
+- [Installation de l'addon Pix UI](#Addon)
+- [Développment de Pix UI](#Developpement)
   - [Lancement de storybook en local](#Storybook)
 
 
-Pix-UI <a id="Pix-UI"></a>
+Pix UI <a id="Pix-UI"></a>
 ==============================================================================
 
-Pix-UI c'est l'implémentation des principes du design system de Pix. Cela se matérialise par :
+Pix UI c'est l'implémentation des principes du design system de Pix. Cela se matérialise par :
 - **un addon ember**, permettant l'utilisation composants UI Pix sur des applications ember externes
 - **un site statique**, présentant les composants UI Pix : https://1024pix.github.io/pix-ui/
 
-![Capture d'écran du storybook en ligne](./docs/assets/screen-pix-storybook.png)
+![Capture d'écran du storybook en ligne](./docs/assets/screen-pix-ui.png)
 
 ##### Version du projet : 
 
@@ -21,14 +21,14 @@ Pix-UI c'est l'implémentation des principes du design system de Pix. Cela se ma
 
 ## Installation de l'addon Pix-UI <a id="Addon"></a>
 
-Pour utiliser les composants sur une application Ember externe, il faut installer l'addon ember Pix-UI avec la commande : 
+Pour utiliser les composants sur une application Ember externe, il faut installer l'addon ember Pix UI avec la commande : 
 - `npm install @1024pix/pix-ui@<tag_souhaité>`
 
 ##### Quel tag choisir ?
 
 `<tag_souhaité>` doit correspondre au numéro de version à installer. Ce numéro de version correspond à une release.
 *Par exemple, on peut remplacer `<tag_souhaité>` par `v0.1.1`.*
-Pour voir la liste des tags de Pix-UI, [c'est par ici.](https://github.com/1024pix/pix-ui/tags)
+Pour voir la liste des tags de Pix UI, [c'est par ici.](https://github.com/1024pix/pix-ui/tags)
 
 ##### Installation par défaut
 
@@ -37,13 +37,13 @@ Il est possible d'installer Pix UI sans `#<tag_souhaité>`, auquel cas ce sera l
 Plus d'informations sur les [tags git ici](https://git-scm.com/book/fr/v2/Les-bases-de-Git-%C3%89tiquetage).
 
 
-## Développement de Pix-UI <a id="Developpement"></a>
+## Développement de Pix UI <a id="Developpement"></a>
 
 * `git clone https://github.com/1024pix/pix-ui.git`
 * `cd pix-ui`
 * `npm install`
 
-##### Création d'un composant Pix-UI
+##### Création d'un composant Pix UI
 
 * `ember g pix-component <nom_du_composant>`
 

package/addon/components/pix-navigation.hbs

@@ -8,7 +8,13 @@
         aria-expanded={{this.navigationMenuOpened}}
         @iconBefore={{if this.navigationMenuOpened "close" "menu"}}
         @triggerAction={{this.toggleNavigationMenu}}
-      >{{@menuLabel}}</PixButton>
+      >
+        {{#if this.navigationMenuOpened}}
+          {{@closeLabel}}
+        {{else}}
+          {{@openLabel}}
+        {{/if}}
+      </PixButton>
     </div>
   </header>
   <nav

package/addon/components/pix-tabs.hbs

@@ -0,0 +1,3 @@
+<nav class={{this.classNames}} aria-label={{this.ariaLabel}} ...attributes>
+  {{yield}}
+</nav>

package/addon/components/pix-tabs.js

@@ -0,0 +1,30 @@
+import { warn } from '@ember/debug';
+import Component from '@glimmer/component';
+
+export default class PixTabs extends Component {
+  get variant() {
+    const value = this.args.variant ?? 'primary';
+    warn(
+      `PixTabs: @variant "${value}" should be certif, orga or primary`,
+      ['primary', 'orga', 'certif'].includes(value),
+      {
+        id: 'pix-ui.pix-tabs.variant.not-valid',
+      },
+    );
+
+    return value;
+  }
+
+  get ariaLabel() {
+    const value = this.args.ariaLabel;
+    warn('PixTabs: @ariaLabel is required.', !['', null, undefined].includes(value), {
+      id: 'pix-ui.pix-tabs.ariaLabel.required',
+    });
+
+    return value;
+  }
+
+  get classNames() {
+    return ['pix-tabs', `pix-tabs--${this.variant}`].join(' ');
+  }
+}

package/addon/styles/_pix-tabs.scss

@@ -0,0 +1,58 @@
+@use "pix-design-tokens/typography";
+
+.pix-tabs {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  gap: var(--pix-spacing-2x);
+  height: min-content;
+  border-bottom: 2px solid var(--pix-tab-color);
+
+  & a {
+    padding: var(--pix-spacing-3x) var(--pix-spacing-4x);
+    color: var(--pix-neutral-900);
+    border-radius: 8px 8px 0 0;
+    cursor: pointer;
+
+    @extend %pix-body-s;
+
+    &.active {
+      color: var(--pix-neutral-0);
+      font-weight: var(--pix-font-bold);
+      background-color: var(--pix-tab-color);
+    }
+
+    &:focus,
+    &:focus-visible {
+      color: var(--pix-neutral-0);
+      background-color: rgb(var(--pix-tab-color-inline), 80%);
+      outline: 1px solid var(--pix-neutral-0);
+      outline-offset: -5px;
+    }
+
+    &:active {
+      background-color: rgb(var(--pix-tab-color-inline), 50%);
+      outline: none;
+    }
+
+    &:hover:not(.active) {
+      background-color: rgb(var(--pix-tab-color-inline), 30%);
+    }
+  }
+
+  &--primary {
+    --pix-tab-color: var(--pix-primary-500);
+    --pix-tab-color-inline: var(--pix-primary-500-inline);
+  }
+
+  &--orga {
+    --pix-tab-color: var(--pix-orga-500);
+    --pix-tab-color-inline: var(--pix-orga-500-inline);
+  }
+
+  &--certif {
+    --pix-tab-color: var(--pix-certif-500);
+    --pix-tab-color-inline: var(--pix-certif-500-inline);
+  }
+}
+

package/addon/styles/addon.scss

@@ -46,6 +46,7 @@
 @use 'pix-app-layout';
 @use 'pix-structure-switcher';
 @use 'pix-code';
+@use 'pix-tabs';
 
 
 // at the end so it can override it's children scss

package/app/components/pix-tabs.js

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

package/package.json

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