✨ pix-ui: create pix tabs

addon/components/pix-tabs.hbs

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

addon/components/pix-tabs.js

@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+import { warn } from '@ember/debug';
+
+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-app-tabs.variant.not-valid',
+      },
+    );
+
+    return value;
+  }
+
+  get classNames() {
+    return ['pix-tabs', `pix-tabs--${this.variant}`].join(' ');
+  }
+}

addon/styles/_pix-tabs.scss

@@ -0,0 +1,120 @@
+@use "pix-design-tokens/typography";
+
+.pix-tabs {
+  display: flex;
+  flex-direction: row;
+  gap: var(--pix-spacing-2x);
+  height: min-content;
+  flex-grow: 1;
+
+  & a {
+    padding: 12px 16px;
+    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);
+    }
+
+    &:focus,
+    &:focus-visible {
+      color: var(--pix-neutral-0);
+      background-color: rgb(var(--pix-primary-500-inline), 80%);
+      outline: 1px solid var(--pix-neutral-0);
+      outline-offset: -5px;
+    }
+  }
+
+  &--primary {
+    border-bottom: 2px solid var(--pix-primary-500);
+
+    & a {
+
+      &:hover {
+        background-color: rgb(var(--pix-primary-500-inline), 30%);
+      }
+
+      &:focus,
+      &:focus-visible {
+        background-color: rgb(var(--pix-primary-500-inline), 80%);
+      }
+
+      &:active {
+        background-color: rgb(var(--pix-primary-500-inline), 50%);
+      }
+
+      &.active {
+        background-color: var(--pix-primary-500);
+
+        &:focus,
+        &:focus-visible {
+          background-color: rgb(var(--pix-primary-500-inline), 80%);
+        }
+      }
+    }
+  }
+
+  &--orga {
+    border-bottom: 2px solid var(--pix-orga-500);
+
+    & a {
+
+      &:hover {
+        background-color: rgb(var(--pix-orga-500-inline), 30%);
+      }
+
+      &:focus,
+      &:focus-visible {
+        background-color: rgb(var(--pix-orga-500-inline), 80%);
+      }
+
+      &:active {
+        background-color: rgb(var(--pix-orga-500-inline), 50%);
+      }
+
+      &.active {
+        background-color: var(--pix-orga-500);
+
+        &:focus,
+        &:focus-visible {
+          background-color: rgb(var(--pix-orga-500-inline), 80%);
+        }
+      }
+    }
+  }
+
+  &--certif {
+    border-bottom: 2px solid var(--pix-certif-500);
+
+    & a {
+
+      &:hover {
+        background-color: rgb(var(--pix-certif-500-inline), 30%);
+      }
+
+      &:focus,
+      &:focus-visible {
+        background-color: rgb(var(--pix-certif-500-inline), 80%);
+      }
+
+      &:active {
+        background-color: rgb(var(--pix-certif-500-inline), 50%);
+        outline: none;
+      }
+
+      &.active {
+        background-color: var(--pix-certif-500);
+
+        &:focus,
+        &:focus-visible {
+          background-color: rgb(var(--pix-certif-500-inline), 80%);
+        }
+      }
+    }
+  }
+}
+

addon/styles/addon.scss

@@ -45,6 +45,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

app/components/pix-tabs.js

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

app/stories/pix-tabs.mdx

@@ -0,0 +1,38 @@
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-tabs.stories';
+
+<Meta of={ComponentStories} />
+
+# PixTabs
+
+Un `PixTabs` est une navigation pouvant comporter plusieurs `<LinkTo>`
+
+
+<Story of={ComponentStories.primary} height={150} />
+<Story of={ComponentStories.orga} height={150} />
+<Story of={ComponentStories.certif} height={150} />
+
+
+
+## Usage
+
+```html
+<PixTabs @variant={{@variant}}>
+  <LinkTo @route='' class='active'>
+    Lien actif
+  </LinkTo>
+  <LinkTo @route=''>
+    Campagnes
+  </LinkTo>
+  <LinkTo @route=''>
+    Certifications
+  </LinkTo>
+  <LinkTo @route=''>
+    Contenus formatifs
+  </LinkTo>
+</PixTabs>`
+```
+
+## Arguments
+
+<ArgTypes of={ComponentStories} />

app/stories/pix-tabs.stories.js

@@ -0,0 +1,61 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+  title: 'Navigation/Tabs',
+  tags: ['new'],
+  argTypes: {
+    variant: {
+      name: 'variant',
+      description: "Permet de changer la couleur des onglets selon l'application",
+      options: ['orga', 'certif', 'primary'],
+      control: {
+        type: 'select',
+      },
+      table: {
+        defaultValue: {
+          summary: 'primary',
+        },
+      },
+      type: {
+        name: '"primary" | "orga" | "certif"',
+        required: true,
+      },
+    },
+  },
+};
+
+const Template = (args) => {
+  return {
+    template: hbs`<PixTabs @variant={{this.variant}}>
+  <LinkTo @route='' class='active'>
+    Lien actif
+  </LinkTo>
+  <LinkTo @route=''>
+    Campagnes
+  </LinkTo>
+  <LinkTo @route=''>
+    Certifications
+  </LinkTo>
+  <LinkTo @route=''>
+    Contenus formatifs
+  </LinkTo>
+</PixTabs>`,
+    context: args,
+  };
+};
+
+export const primary = Template.bind({});
+primary.args = {
+  variant: 'primary',
+};
+
+export const certif = Template.bind({});
+certif.args = {
+  variant: 'certif',
+};
+
+export const orga = Template.bind({});
+orga.args = {
+  variant: 'orga',
+};
+