✨ pix-ui: create pix tabs

addon/components/pix-tabs.hbs

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

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(' ');
+  }
+}

addon/styles/_pix-tabs.scss

@@ -0,0 +1,120 @@
+@use "pix-design-tokens/typography";
+
+.pix-tabs {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  gap: var(--pix-spacing-2x);
+  height: min-content;
+
+  & 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=''>
+    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,65 @@
+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,
+      },
+    },
+    ariaLabel: {
+      name: 'ariaLabel',
+      description: "Label pour la navigation. Nécessaire pour l'accessibilité",
+      type: { name: 'string' },
+    },
+  },
+};
+
+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',
+};

tests/integration/components/pix-tabs-test.js

@@ -0,0 +1,72 @@
+import { render, within } from '@1024pix/ember-testing-library';
+import { fillIn } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+import sinon from 'sinon';
+
+module('Integration | Component | PixTabs', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders PixTabs', async function (assert) {
+    // given
+    const screen = await render(
+      hbs`<PixTabs @ariaLabel='Navigation secondaire'><LinkTo @route=''>Lien</LinkTo></PixTabs>`,
+    );
+
+    // when
+    // then
+    const navigation = screen.getByRole('navigation', { name: 'Navigation secondaire' });
+    assert.dom(within(navigation).getByText('Lien')).exists();
+  });
+
+  module('@variant', function (hooks) {
+    let warnStub;
+
+    hooks.beforeEach(function () {
+      warnStub = sinon.stub(console, 'warn');
+    });
+
+    hooks.afterEach(function () {
+      warnStub.restore();
+    });
+
+    test('it should warn when @variant is incorrect', async function (assert) {
+      // when
+      await render(
+        hbs`<PixTabs @variant='PIX UI' @ariaLabel='Navigation secondaire'><LinkTo
+    @route=''
+  >Lien</LinkTo></PixTabs>`,
+      );
+
+      // then
+      assert.ok(
+        warnStub.calledWithExactly(
+          'WARNING: PixTabs: @variant "PIX UI" should be certif, orga or primary',
+        ),
+      );
+    });
+  });
+
+  module('@ariaLabel', function (hooks) {
+    let warnStub;
+
+    hooks.beforeEach(function () {
+      warnStub = sinon.stub(console, 'warn');
+    });
+
+    hooks.afterEach(function () {
+      warnStub.restore();
+    });
+
+    test('it should warn when @ariaLabel is not valid', async function (assert) {
+      // when
+      await render(
+        hbs`<PixTabs @variant='orga' @ariaLabel=''><LinkTo @route=''>Lien</LinkTo></PixTabs>`,
+      );
+
+      // then
+      assert.ok(warnStub.calledWithExactly('WARNING: PixTabs: @ariaLabel is required.'));
+    });
+  });
+});