@1024pix/pix-ui 54.14.0 → 54.15.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-table-column.hbs

@@ -13,7 +13,13 @@
     </div>
   </th>
 {{else}}
-  <td ...attributes class={{this.typeClass}}>
-    {{yield to="cell"}}
-  </td>
+  {{#if @isMainRow}}
+    <th scope="row" class={{this.typeClass}} ...attributes>
+      {{yield to="cell"}}
+    </th>
+  {{else}}
+    <td class={{this.typeClass}} ...attributes>
+      {{yield to="cell"}}
+    </td>
+  {{/if}}
 {{/if}}

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-table-column.scss

@@ -1,5 +1,5 @@
 .pix-table-column {
   &--number{
-    text-align: right;
+    text-align: left;
   }
 }

package/addon/styles/_pix-table.scss

@@ -59,11 +59,17 @@
       align-items: center;
     }
 
-    th {
+    th[scope='col'] {
+      font-weight: var(--pix-font-bold);
       text-align: start;
       vertical-align: middle;
     }
 
+    th[scope='row'] {
+      font-weight: var(--pix-font-normal);
+    }
+
+
     td, th {
       padding: var(--pix-spacing-6x) var(--pix-spacing-4x);
 

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.0",
+  "version": "54.15.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"