@1024pix/pix-ui 48.2.0 → 48.3.0

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

@@ -0,0 +1,3 @@
+<div class="pix-app-layout">
+  {{yield}}
+</div>

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

@@ -0,0 +1,39 @@
+{{#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={{@iconPlain}}
+      />
+    {{/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}}

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

@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+
+export default class PixNavigationButton extends Component {
+  defaultParams = {};
+  defaultModel = [];
+
+  get isLinkOpenInANewWindow() {
+    return this.args?.target === '_blank';
+  }
+}

package/addon/components/pix-navigation-separator.hbs

@@ -0,0 +1 @@
+<hr class="pix-navigation-separator" />

package/addon/components/pix-navigation.hbs

@@ -0,0 +1,7 @@
+<aside ...attributes class={{this.classNames}}>
+  <header class="pix-navigation__brand">{{yield to="brand"}}</header>
+  <nav class="pix-navigation__nav" aria-label={{@navigationAriaLabel}}>{{yield
+      to="navElements"
+    }}</nav>
+  <footer class="pix-navigation__footer">{{yield to="footer"}}</footer>
+</aside>

package/addon/components/pix-navigation.js

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

package/addon/styles/_pix-app-layout.scss

@@ -0,0 +1,6 @@
+.pix-app-layout{
+  display: grid;
+  grid-template-columns: minmax(214px, auto) 1fr;
+  gap: var(--pix-spacing-6x);
+  padding: var(--pix-spacing-6x);
+}

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

@@ -0,0 +1,59 @@
+.pix-navigation-button {
+  @extend %pix-body-s;
+
+  position: relative;
+  display: flex;
+  gap: var(--pix-spacing-2x);
+  align-items: center;
+  width: max-content;
+  width: 100%;
+  padding: var(--pix-spacing-2x) var(--pix-spacing-3x);
+  font-weight: 400;
+  // stylelint-disable-next-line custom-property-pattern
+  font-family: var(--_pix-font-family-title);
+
+  &:focus::before,
+  &:focus-visible::before,
+  &.active::before,
+  &:hover::before {
+    position: absolute;
+    top:0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    background-color: currentcolor;
+    border-radius: var(--pix-spacing-2x);
+    content: '';
+  }
+
+  &:hover::before {
+    opacity: .3;
+  }
+
+  &:focus, &:focus-visible {
+    border-radius: var(--pix-spacing-2x);
+    outline: 1px solid currentcolor ;
+
+    &::before{
+      opacity: .3;
+    }
+  }
+
+  &:active::before {
+    opacity: .5;
+  }
+
+  &.active::before {
+    opacity: .2;
+  }
+
+  &.active {
+    font-weight: var(--pix-font-bold);
+  }
+
+}
+
+.pix-navigation-button__external-icon {
+  width: 1rem;
+}

package/addon/styles/_pix-navigation-separator.scss

@@ -0,0 +1,14 @@
+.pix-navigation-separator {
+  @extend %pix-body-l;
+
+  height: 1.25rem;
+  margin: 0;
+  color: inherit;
+  line-height: 1.25rem;
+  border: none;
+
+  &::after {
+    font-weight: var(--pix-font-medium);
+    content: '–';
+  }
+}

package/addon/styles/_pix-navigation.scss

@@ -0,0 +1,122 @@
+.pix-navigation {
+  position: sticky;
+  bottom: var(--pix-spacing-6x);
+  display: flex;
+  flex-direction: column;
+  gap:var(--pix-spacing-6x);
+  align-items: center;
+  min-width: 214px;
+  height: fit-content;
+  min-height: calc(100vh - var(--pix-spacing-6x) * 2);
+
+  // using a margin top / bottom allow user to discover rapidly
+  // the part of sidebar that is above the fold
+  margin-top: auto;
+  padding: var(--pix-spacing-6x) var(--pix-spacing-4x);
+  color: var(--pix-navigation-text-color);
+  background-color: var(--pix-navigation-color);
+  border-radius: var(--pix-spacing-6x);
+
+  --pix-navigation-button-bgcolor-hover: rgb(205, 209, 217, .3);
+  --pix-navigation-button-bgcolor-active: rgb(205, 209, 217, .5);
+
+  &--orga {
+    --pix-navigation-color: var(--pix-orga-500);
+    --pix-navigation-text-color: var(--pix-neutral-0);
+
+  }
+
+  &--certif {
+    --pix-navigation-color: var(--pix-certif-500);
+    --pix-navigation-text-color: var(--pix-neutral-0);
+  }
+
+  &--primary {
+    --pix-navigation-color: var(--pix-primary-700);
+    --pix-navigation-text-color: var(--pix-neutral-0);
+  }
+
+  &__brand {
+    margin-bottom: 0;
+    padding:0;
+    line-height: 0;
+
+  }
+
+  &__nav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--pix-spacing-2x);
+    align-self: stretch;
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--pix-spacing-2x);
+    margin-top: auto;
+    text-align: center;
+
+    @extend %pix-body-s;
+
+    & .pix-button--primary {
+      color: var(--pix-navigation-color);
+      background-color:var(--pix-navigation-text-color);
+
+      &:hover {
+        color: currentcolor;
+        background-color: var(--pix-navigation-button-bgcolor-hover);
+        fill: currentcolor;
+      }
+
+      &:focus,
+      &:focus-visible {
+        color: currentcolor;
+        background-color: var(--pix-navigation-button-bgcolor-hover);
+        outline-color: currentcolor;
+      }
+
+      &:active {
+        color: currentcolor;
+        background-color: var(--pix-navigation-button-bgcolor-active);
+      }
+    }
+
+    & .pix-button--secondary {
+      color: currentcolor;
+      border-color: currentcolor;
+
+      &:hover {
+        color: currentcolor;
+        background-color: var(--pix-navigation-button-bgcolor-hover);
+        fill: currentcolor;
+      }
+
+      &:focus,
+      &:focus-visible {
+        color: currentcolor;
+        background-color: var(--pix-navigation-button-bgcolor-hover);
+        outline-color: currentcolor;
+      }
+
+      &:active {
+        color: currentcolor;
+        background-color: var(--pix-navigation-button-bgcolor-active);
+      }
+    }
+
+    & .pix-button--tertiary {
+      padding: 0;
+      color: currentcolor;
+
+      &:hover,
+      &:focus,
+      &:active,
+      &:focus-visible {
+        color: currentcolor;
+      }
+    }
+  }
+
+}
+

package/addon/styles/addon.scss

@@ -37,7 +37,10 @@
 @import 'pix-search-input';
 @import 'pix-toast';
 @import 'toast-example';
-
+@import 'pix-navigation';
+@import 'pix-navigation-button';
+@import 'pix-navigation-separator';
+@import 'pix-app-layout';
 
 
 // at the end so it can override it's children scss

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

@@ -5,6 +5,14 @@
   src: url('../@1024pix/pix-ui/fonts/Nunito/Nunito-Bold.woff2');
 }
 
+@font-face {
+  font-weight: 400;
+  font-family: 'Nunito';
+  font-style: normal;
+  src: url('../@1024pix/pix-ui/fonts/Nunito/Nunito-Regular.woff2');
+}
+
+
 /* @deprecated - use Nunito */
 @font-face {
   font-weight: 500;

package/app/components/pix-app-layout.js

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

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

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

package/app/components/pix-navigation-separator.js

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

package/app/components/pix-navigation.js

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

package/package.json

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