@1024pix/pix-ui 56.1.0 → 57.0.0

package/addon/components/pix-segmented-control.gjs

@@ -0,0 +1,108 @@
+import { warn } from '@ember/debug';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import Component from '@glimmer/component';
+
+import PixIcon from './pix-icon';
+import PixLabel from './pix-label';
+
+export default class PixSegmentedControl extends Component {
+  get variant() {
+    const value = this.args.variant ?? 'primary';
+    const variantList = ['primary', 'orga', 'certif'];
+
+    warn(
+      `PixAppLayout: @variant "${value}" should be ${variantList.join(', ')}`,
+      variantList.includes(value),
+      {
+        id: 'pix-ui.pix-segmented-control.variant.not-valid',
+      },
+    );
+
+    return value;
+  }
+
+  get className() {
+    const classes = ['pix-segmented-control', `pix-segmented-control--${this.variant}`];
+
+    if (this.args.inlineLabel) {
+      classes.push('pix-segmented-control--inline');
+    }
+
+    return classes.join(' ');
+  }
+
+  @action
+  onChange() {
+    this.args.onChange(!this.args.toggled);
+  }
+
+  get id() {
+    return guidFor(this);
+  }
+
+  get toggleName() {
+    return `${this.id}-toggle`;
+  }
+
+  get idViewA() {
+    return `${this.id}-viewA`;
+  }
+
+  get idViewB() {
+    return `${this.id}-viewB`;
+  }
+
+  get stateViewA() {
+    return !this.args.toggled;
+  }
+
+  get stateViewB() {
+    return this.args.toggled;
+  }
+
+  <template>
+    <div class={{this.className}} role="radiogroup" aria-labelledby={{this.id}}>
+      <PixLabel
+        @for={{this.id}}
+        @screenReaderOnly={{@screenReaderOnly}}
+        @subLabel={{@subLabel}}
+        @size={{@size}}
+        @inlineLabel={{@inlineLabel}}
+      >
+        {{yield to="label"}}
+      </PixLabel>
+      <div class="pix-segmented-control__radio">
+        <input
+          {{on "change" this.onChange}}
+          id={{this.idViewA}}
+          type="radio"
+          name={{this.toggleName}}
+          value="viewA"
+          checked={{this.stateViewA}}
+        />
+        <label for={{this.idViewA}}>
+          {{#if @iconA}}
+            <PixIcon @name={{@iconA}} @plainIcon={{this.stateViewA}} @ariaHidden={{true}} />
+          {{/if}}
+          {{yield to="viewA"}}
+        </label>
+        <input
+          {{on "change" this.onChange}}
+          id={{this.idViewB}}
+          type="radio"
+          name={{this.toggleName}}
+          value="viewB"
+          checked={{this.stateViewB}}
+        />
+        <label for={{this.idViewB}}>
+          {{#if @iconB}}
+            <PixIcon @name={{@iconB}} @plainIcon={{this.stateViewB}} @ariaHidden={{true}} />
+          {{/if}}
+          {{yield to="viewB"}}
+        </label>
+      </div>
+    </div>
+  </template>
+}

package/addon/styles/_pix-segmented-control.scss

@@ -0,0 +1,65 @@
+@use "pix-design-tokens/typography";
+
+.pix-segmented-control {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--pix-spacing-1x);
+  color: var(--pix-neutral-900);
+  font-size: 1rem;
+
+  &--primary .pix-segmented-control__radio {
+    background-color: rgb(var(--pix-primary-100-inline), 0.50);
+  }
+
+  &--orga .pix-segmented-control__radio {
+    background-color: rgb(var(--pix-orga-500-inline), 0.20);
+  }
+
+  &--certif .pix-segmented-control__radio {
+    background-color: rgb(var(--pix-certif-500-inline), 0.20);
+  }
+
+  &__radio {
+      position: relative;
+      display: inline-flex;
+      gap: var(--pix-spacing-1x, 4px);
+      align-items: flex-start;
+      padding: var(--pix-spacing-1x, 4px);
+      border-radius: 8px;
+
+      :hover {
+        cursor: pointer;
+      }
+
+      input[type="radio"], input[type="radio"]:checked, input[type="radio"]:focus-visible {
+        position: absolute;
+        outline: none;
+        appearance: none;
+      }
+
+      label {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+        justify-content: center;
+        padding: var(--pix-spacing-1x, 4px) 8px;
+        border: 1px solid transparent;
+        border-radius: 8px;
+      }
+
+      input[type="radio"]:checked + label {
+        font-weight: var(--pix-font-bold);
+        background: var(--pix-neutral-0);
+      }
+
+      input[type="radio"]:focus + label {
+        border-color: var(--pix-neutral-900);
+      }
+    }
+
+  &--inline {
+    flex-direction: row;
+    gap: var(--pix-spacing-2x);
+    align-items: center;
+  }
+}

package/addon/styles/addon.scss

@@ -34,7 +34,7 @@
 @use 'pix-selectable-tag';
 @use 'pix-pagination';
 @use 'pix-checkbox';
-@use 'pix-toggle-button';
+@use 'pix-segmented-control';
 @use 'pix-indicator-card';
 @use 'trap-focus';
 @use 'pix-search-input';

package/app/components/pix-segmented-control.js

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

package/package.json

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

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

@@ -1,23 +0,0 @@
-<div class={{this.className}}>
-  <PixLabel
-    @for={{this.id}}
-    @screenReaderOnly={{@screenReaderOnly}}
-    @subLabel={{@subLabel}}
-    @size={{@size}}
-    @inlineLabel={{@inlineLabel}}
-  >{{yield to="label"}}</PixLabel>
-  <button
-    class="pix-toggle-button__button{{if @useIcons ' pix-toggle-button__button--icon'}}"
-    id={{this.id}}
-    aria-pressed={{if @toggled "true" "false"}}
-    type="button"
-    {{on "click" this.onToggle}}
-  >
-    <span class="pix-toggle-button__view-a{{if @useIcons ' pix-toggle-button__with-icon'}}">
-      {{yield to="viewA"}}
-    </span>
-    <span class="pix-toggle-button__view-b{{if @useIcons ' pix-toggle-button__with-icon'}}">
-      {{yield to="viewB"}}
-    </span>
-  </button>
-</div>

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

@@ -1,27 +0,0 @@
-import { action } from '@ember/object';
-import { guidFor } from '@ember/object/internals';
-import Component from '@glimmer/component';
-
-export default class PixToggleButton extends Component {
-  get className() {
-    const classes = ['pix-toggle-button'];
-    if (this.args.toggled) {
-      classes.push('pix-toggle-button--pressed');
-    }
-
-    if (this.args.inlineLabel) {
-      classes.push('pix-toggle-button--inline');
-    }
-
-    return classes.join(' ');
-  }
-
-  @action
-  onToggle() {
-    this.args.onChange(!this.args.toggled);
-  }
-
-  get id() {
-    return guidFor(this);
-  }
-}

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

@@ -1,62 +0,0 @@
-@use "pix-design-tokens/typography";
-
-.pix-toggle-button {
-  display: inline-flex;
-  flex-direction: column;
-  gap: var(--pix-spacing-1x);
-
-  &--inline {
-    flex-direction: row;
-    gap: var(--pix-spacing-2x);
-    align-items: center;
-  }
-
-  &__button {
-    @extend %pix-body-s;
-
-    width: fit-content;
-    padding: var(--pix-spacing-1x);
-    font-weight: var(--pix-font-bold);
-    line-height: 1.572;
-    background: var(--pix-neutral-20);
-    border: 1px solid var(--pix-neutral-500);
-    border-radius: 4px;
-
-    &--icon {
-      font-size: 0;
-    }
-  }
-
-  &__view-a,
-  &__view-b {
-    display: inline-block;
-    padding: var(--pix-spacing-1x) var(--pix-spacing-2x);
-    border-radius: 4px;
-  }
-
-  &__view-a {
-    color: var(--pix-neutral-800);
-    font-weight: var(--pix-font-normal);
-  }
-
-  &__view-b {
-    color: var(--pix-neutral-20);
-    background-color: var(--pix-neutral-800);
-  }
-
-  &--pressed {
-    .pix-toggle-button {
-      &__view-a {
-        color: var(--pix-neutral-20);
-        font-weight: inherit;
-        background-color: var(--pix-neutral-800);
-      }
-
-      &__view-b {
-        color: var(--pix-neutral-800);
-        font-weight: var(--pix-font-normal);
-        background-color: transparent;
-      }
-    }
-  }
-}

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

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