@1024pix/pix-ui 41.1.2 → 42.0.0

package/app/stories/pix-tag.stories.js

@@ -13,24 +13,11 @@ export default {
       name: 'color',
       description: 'Couleur du tag',
       type: { name: 'number', required: false },
-      table: { defaultValue: { summary: 'blue' } },
+      table: { defaultValue: { summary: 'primary' } },
       control: {
         type: 'select',
       },
-      options: [
-        'blue',
-        'blue-light',
-        'green',
-        'green-light',
-        'grey',
-        'grey-light',
-        'purple',
-        'purple-light',
-        'orange',
-        'orange-light',
-        'yellow',
-        'yellow-light',
-      ],
+      options: ['neutral', 'secondary', 'tertiary', 'success', 'error', 'orga'],
     },
     compact: {
       name: 'compact',

package/app/stories/pix-toggle.stories.js

@@ -55,33 +55,25 @@ export default {
 
 export const Template = (args) => {
   return {
-    template: hbs`
-      <PixToggle
-        @label={{this.label}}
-        @onLabel={{this.onLabel}}
-        @offLabel={{this.offLabel}}
-        @toggled={{this.toggled}}
-        @onChange={{this.onChange}}
-        @inline={{this.inline}}
-        @screenReaderOnly={{this.screenReaderOnly}}
-      />
-    `,
+    template: hbs`<PixToggle
+  @label={{this.label}}
+  @onLabel={{this.onLabel}}
+  @offLabel={{this.offLabel}}
+  @toggled={{this.toggled}}
+  @onChange={{this.onChange}}
+  @inline={{this.inline}}
+  @screenReaderOnly={{this.screenReaderOnly}}
+/>`,
     context: args,
   };
 };
 
 export const TemplateWithYields = (args) => {
   return {
-    template: hbs`
-      <PixToggle
-        @label={{this.label}}
-        @toggled={{this.toggled}}
-        @onChange={{this.onChange}}
-      >
-        <:on><FaIcon @icon="sun" /></:on>
-        <:off><FaIcon @icon="moon" /></:off>
-      </PixToggle>
-    `,
+    template: hbs`<PixToggle @label={{this.label}} @toggled={{this.toggled}} @onChange={{this.onChange}}>
+  <:on><FaIcon @icon='sun' /></:on>
+  <:off><FaIcon @icon='moon' /></:off>
+</PixToggle>`,
     context: args,
   };
 };

package/app/stories/pix-tooltip.stories.js

@@ -103,6 +103,8 @@ const TemplateWithIconElement = (args) => {
   return {
     template: hbs`<PixTooltip @id={{this.id}} @isInline='true'>
   <:triggerElement>
+    {{! template-lint-disable no-inline-styles }}
+
     <button style='padding:0; margin-left:4px; line-height:0;' type='button'>
       <FaIcon class='external-link' @icon='up-right-from-square' />
     </button>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "41.1.2",
+  "version": "42.0.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -70,10 +70,11 @@
     "@ember/test-helpers": "^3.0.0",
     "@embroider/macros": "^1.11.0",
     "@embroider/test-setup": "^3.0.0",
-    "@fortawesome/ember-fontawesome": "^1.0.0",
+    "@fortawesome/ember-fontawesome": "^2.0.0",
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@glimmer/component": "^1.1.2",
+    "@glimmer/syntax": "^0.87.0",
     "@glimmer/tracking": "^1.1.2",
     "@storybook/addon-a11y": "7.1.0",
     "@storybook/addon-controls": "7.1.0",
@@ -87,7 +88,7 @@
     "@storybook/theming": "7.1.0",
     "@testing-library/dom": "^8.20.0",
     "@testing-library/user-event": "^14.4.3",
-    "chromatic": "^9.0.0",
+    "chromatic": "^10.0.0",
     "core-js": "^3.26.1",
     "ember-cli": "^4.8.0",
     "ember-cli-dependency-checker": "^3.3.1",
@@ -103,7 +104,7 @@
     "ember-sinon": "^5.0.0",
     "ember-source": "^4.0.1",
     "ember-source-channel-url": "^3.0.0",
-    "ember-template-lint": "^4.18.2",
+    "ember-template-lint": "^5.0.0",
     "ember-template-lint-plugin-prettier": "^5.0.0",
     "ember-try": "^3.0.0-beta",
     "eslint": "^8.28.0",
@@ -122,9 +123,9 @@
     "qunit-dom": "^3.0.0",
     "sass": "^1.56.1",
     "storybook": "^7.1.0",
-    "stylelint": "^15.0.0",
+    "stylelint": "^16.0.2",
     "stylelint-config-rational-order": "^0.1.2",
-    "stylelint-config-standard-scss": "^11.0.0",
+    "stylelint-config-standard-scss": "^12.0.0",
     "webpack": "^5.75.0"
   },
   "bugs": {
@@ -138,7 +139,9 @@
   "files": [
     "addon/",
     "app/",
-    "public/"
+    "public/",
+    "scripts/migrate-colors-scss-vars-to-css-vars.sh",
+    "scripts/migrate-spacing-scss-vars-to-css-vars.sh"
   ],
   "storybook-deployer": {
     "commitMessage": "Deploy Storybook [skip ci]"

package/scripts/migrate-colors-scss-vars-to-css-vars.sh

@@ -0,0 +1,120 @@
+#!/bin/bash -e
+
+for f in $(find . -name '*.scss' -not -path './node_modules/*' -not -name '_colors.scss')
+do
+  echo "parsing file" $f
+  sed -i '' -e 's/$pix-primary-5/var(--pix-primary-10)/' "$f"
+  sed -i '' -e 's/$pix-primary-10/var(--pix-primary-100)/' "$f"
+  sed -i '' -e 's/$pix-primary-20/var(--pix-primary-100)/' "$f"
+  sed -i '' -e 's/$pix-primary-30/var(--pix-primary-300)/' "$f"
+  sed -i '' -e 's/$pix-primary-40/var(--pix-primary-500)/' "$f"
+  sed -i '' -e 's/$pix-primary-60/var(--pix-primary-700)/' "$f"
+  sed -i '' -e 's/$pix-primary-70/var(--pix-primary-700)/' "$f"
+  sed -i '' -e 's/$pix-primary-80/var(--pix-primary-900)/' "$f"
+  sed -i '' -e 's/$pix-primary/var(--pix-primary-500)/' "$f"
+
+  sed -i '' -e 's/$pix-secondary-50/var(--pix-secondary-500)/' "$f"
+  sed -i '' -e 's/$pix-secondary-5/var(--pix-secondary-50)/' "$f"
+  sed -i '' -e 's/$pix-secondary-10/var(--pix-secondary-100)/' "$f"
+  sed -i '' -e 's/$pix-secondary-20/var(--pix-secondary-300)/' "$f"
+  sed -i '' -e 's/$pix-secondary-40/var(--pix-secondary-500)/' "$f"
+  sed -i '' -e 's/$pix-secondary-60/var(--pix-secondary-700)/' "$f"
+  sed -i '' -e 's/$pix-secondary-80/var(--pix-secondary-900)/' "$f"
+  sed -i '' -e 's/$pix-secondary/var(--pix-secondary-500)/' "$f"
+
+  sed -i '' -e 's/$pix-tertiary-50/var(--pix-tertiary-500)/' "$f"
+  sed -i '' -e 's/$pix-tertiary-5/var(--pix-tertiary-100)/' "$f"
+  sed -i '' -e 's/$pix-tertiary-10/var(--pix-tertiary-100)/' "$f"
+  sed -i '' -e 's/$pix-tertiary-20/var(--pix-tertiary-100)/' "$f"
+  sed -i '' -e 's/$pix-tertiary-30/var(--pix-tertiary-100)/' "$f"
+  sed -i '' -e 's/$pix-tertiary-60/var(--pix-tertiary-900)/' "$f"
+  sed -i '' -e 's/$pix-tertiary-70/var(--pix-tertiary-900)/' "$f"
+  sed -i '' -e 's/$pix-tertiary-80/var(--pix-tertiary-900)/' "$f"
+  sed -i '' -e 's/$pix-tertiary/var(--pix-tertiary-500)/' "$f"
+
+  sed -i '' -e 's/$pix-neutral-0/var(--pix-neutral-0)/' "$f"
+  sed -i '' -e 's/$pix-neutral-5/var(--pix-neutral-20)/' "$f"
+  sed -i '' -e 's/$pix-neutral-15/var(--pix-neutral-20)/' "$f"
+  sed -i '' -e 's/$pix-neutral-20/var(--pix-neutral-20)/' "$f"
+  sed -i '' -e 's/$pix-neutral-22/var(--pix-neutral-100)/' "$f"
+  sed -i '' -e 's/$pix-neutral-25/var(--pix-neutral-100)/' "$f"
+  sed -i '' -e 's/$pix-neutral-30/var(--pix-neutral-100)/' "$f"
+  sed -i '' -e 's/$pix-neutral-35/var(--pix-neutral-100)/' "$f"
+  sed -i '' -e 's/$pix-neutral-40/var(--pix-neutral-500)/' "$f"
+  sed -i '' -e 's/$pix-neutral-45/var(--pix-neutral-500)/' "$f"
+  sed -i '' -e 's/$pix-neutral-50/var(--pix-neutral-500)/' "$f"
+  sed -i '' -e 's/$pix-neutral-60/var(--pix-neutral-500)/' "$f"
+  sed -i '' -e 's/$pix-neutral-70/var(--pix-neutral-800)/' "$f"
+  sed -i '' -e 's/$pix-neutral-80/var(--pix-neutral-800)/' "$f"
+  sed -i '' -e 's/$pix-neutral-90/var(--pix-neutral-900)/' "$f"
+  sed -i '' -e 's/$pix-neutral-100/var(--pix-neutral-900)/' "$f"
+  sed -i '' -e 's/$pix-neutral-110/var(--pix-neutral-900)/' "$f"
+  sed -i '' -e 's/$pix-neutral-10/var(--pix-neutral-20)/' "$f"
+
+  sed -i '' -e 's/$pix-success-50/var(--pix-success-500)/' "$f"
+  sed -i '' -e 's/$pix-success-5/var(--pix-success-50)/' "$f"
+  sed -i '' -e 's/$pix-success-10/var(--pix-success-100)/' "$f"
+  sed -i '' -e 's/$pix-success-20/var(--pix-success-300)/' "$f"
+  sed -i '' -e 's/$pix-success-30/var(--pix-success-300)/' "$f"
+  sed -i '' -e 's/$pix-success-60/var(--pix-success-700)/' "$f"
+  sed -i '' -e 's/$pix-success-70/var(--pix-success-700)/' "$f"
+  sed -i '' -e 's/$pix-success-80/var(--pix-success-900)/' "$f"
+  sed -i '' -e 's/$pix-success/var(--pix-success-500)/' "$f"
+
+  sed -i '' -e 's/$pix-warning-50/var(--pix-warning-500)/' "$f"
+  sed -i '' -e 's/$pix-warning-5/var(--pix-warning-50)/' "$f"
+  sed -i '' -e 's/$pix-warning-10/var(--pix-warning-100)/' "$f"
+  sed -i '' -e 's/$pix-warning-20/var(--pix-warning-300)/' "$f"
+  sed -i '' -e 's/$pix-warning-30/var(--pix-warning-300)/' "$f"
+  sed -i '' -e 's/$pix-warning-40/var(--pix-warning-500)/' "$f"
+  sed -i '' -e 's/$pix-warning-60/var(--pix-warning-700)/' "$f"
+  sed -i '' -e 's/$pix-warning-70/var(--pix-warning-700)/' "$f"
+  sed -i '' -e 's/$pix-warning-80/var(--pix-warning-900)/' "$f"
+
+  sed -i '' -e 's/$pix-error-50/var(--pix-error-500)/' "$f"
+  sed -i '' -e 's/$pix-error-5/var(--pix-error-50)/' "$f"
+  sed -i '' -e 's/$pix-error-10/var(--pix-error-100)/' "$f"
+  sed -i '' -e 's/$pix-error-20/var(--pix-error-500)/' "$f"
+  sed -i '' -e 's/$pix-error-30/var(--pix-error-500)/' "$f"
+  sed -i '' -e 's/$pix-error-40/var(--pix-error-500)/' "$f"
+  sed -i '' -e 's/$pix-error-60/var(--pix-error-700)/' "$f"
+  sed -i '' -e 's/$pix-error-70/var(--pix-error-700)/' "$f"
+  sed -i '' -e 's/$pix-error-80/var(--pix-error-900)/' "$f"
+  sed -i '' -e 's/$pix-error-90/var(--pix-error-900)/' "$f"
+
+  sed -i '' -e 's/$pix-secondary-certif-50/var(--pix-certif-500)/' "$f"
+  sed -i '' -e 's/$pix-secondary-certif-5/var(--pix-certif-50)/' "$f"
+  sed -i '' -e 's/$pix-secondary-certif-10/var(--pix-certif-50)/' "$f"
+  sed -i '' -e 's/$pix-secondary-certif-20/var(--pix-certif-50)/' "$f"
+  sed -i '' -e 's/$pix-secondary-certif-30/var(--pix-certif-50)/' "$f"
+  sed -i '' -e 's/$pix-secondary-certif-60/var(--pix-certif-500)/' "$f"
+  sed -i '' -e 's/$pix-secondary-certif-70/var(--pix-certif-500)/' "$f"
+  sed -i '' -e 's/$pix-secondary-certif-80/var(--pix-certif-500)/' "$f"
+  sed -i '' -e 's/$pix-secondary-certif/var(--pix-certif-50)/' "$f"
+
+  sed -i '' -e 's/$pix-secondary-orga-50/var(--pix-orga-500)/' "$f"
+  sed -i '' -e 's/$pix-secondary-orga-5/var(--pix-orga-50)/' "$f"
+  sed -i '' -e 's/$pix-secondary-orga-10/var(--pix-orga-50)/' "$f"
+  sed -i '' -e 's/$pix-secondary-orga-20/var(--pix-orga-50)/' "$f"
+  sed -i '' -e 's/$pix-secondary-orga-30/var(--pix-orga-50)/' "$f"
+  sed -i '' -e 's/$pix-secondary-orga-60/var(--pix-orga-500)/' "$f"
+  sed -i '' -e 's/$pix-secondary-orga-70/var(--pix-orga-500)/' "$f"
+  sed -i '' -e 's/$pix-secondary-orga-80/var(--pix-orga-500)/' "$f"
+  sed -i '' -e 's/$pix-secondary-orga/var(--pix-orga-50)/' "$f"
+
+  sed -i '' -e 's/$pix-information-dark/var(--pix-information-dark)/' "$f"
+  sed -i '' -e 's/$pix-information-light/var(--pix-information-light)/' "$f"
+
+  sed -i '' -e 's/$pix-content-dark/var(--pix-content-dark)/' "$f"
+  sed -i '' -e 's/$pix-content-light/var(--pix-content-light)/' "$f"
+
+  sed -i '' -e 's/$pix-communication-dark/var(--pix-communication-dark)/' "$f"
+  sed -i '' -e 's/$pix-communication-light/var(--pix-communication-light)/' "$f"
+
+  sed -i '' -e 's/$pix-security-dark/var(--pix-security-dark)/' "$f"
+  sed -i '' -e 's/$pix-security-light/var(--pix-security-light)/' "$f"
+
+  sed -i '' -e 's/$pix-environment-dark/var(--pix-environment-dark)/' "$f"
+  sed -i '' -e 's/$pix-environment-light/var(--pix-environment-light)/' "$f"
+
+done

package/scripts/migrate-spacing-scss-vars-to-css-vars.sh

@@ -0,0 +1,23 @@
+#!/bin/bash -e
+
+for f in $(find . -name '*.scss' -not -path './node_modules/*' -not -name '_spacing.scss')
+do
+  echo "parsing file" $f
+  sed -i '' -e 's/$pix-spacing-xxs/var(--pix-spacing-1x)/g' "$f"
+  sed -i '' -e 's/$pix-spacing-xs/var(--pix-spacing-2x)/g' "$f"
+  sed -i '' -e 's/$pix-spacing-s/var(--pix-spacing-4x)/g' "$f"
+  sed -i '' -e 's/$pix-spacing-m/var(--pix-spacing-6x)/g' "$f"
+  sed -i '' -e 's/$pix-spacing-l/var(--pix-spacing-8x)/g' "$f"
+  sed -i '' -e 's/$pix-spacing-xl/var(--pix-spacing-10x)/g' "$f"
+  sed -i '' -e 's/$pix-spacing-xxl/var(--pix-spacing-12x)/g' "$f"
+
+  sed -i '' -e 's/\b4px/var(--pix-spacing-1x)/g' "$f"
+  sed -i '' -e 's/\b8px/var(--pix-spacing-2x)/g' "$f"
+  sed -i '' -e 's/\b12px/var(--pix-spacing-3x)/g' "$f"
+  sed -i '' -e 's/\b16px/var(--pix-spacing-4x)/g' "$f"
+  sed -i '' -e 's/\b24px/var(--pix-spacing-6x)/g' "$f"
+  sed -i '' -e 's/\b32px/var(--pix-spacing-8x)/g' "$f"
+  sed -i '' -e 's/\b40px/var(--pix-spacing-10x)/g' "$f"
+  sed -i '' -e 's/\b48px/var(--pix-spacing-12x)/g' "$f"
+
+done

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

@@ -1,99 +0,0 @@
-@mixin hoverFormElement() {
-  &:hover {
-    background-color: $pix-neutral-5;
-    box-shadow: inset 0 0 0 0.6px $pix-neutral-70;
-  }
-}
-
-@mixin hoverFormElementDisabled() {
-  &:hover {
-    background-color: $pix-neutral-20;
-    box-shadow: inset 0 0 0 0.6px $pix-neutral-70;
-  }
-}
-
-@mixin formElementDisabled() {
-  background-color: $pix-neutral-20;
-  cursor: not-allowed;
-}
-
-@mixin focusFormElement() {
-  &:focus {
-    border-color: $pix-primary;
-    outline: none;
-    box-shadow: inset 0 0 0 0.6px $pix-primary;
-  }
-}
-
-@mixin focusWithinFormElement() {
-  &:focus-within {
-    border-color: $pix-primary;
-    outline: none;
-    box-shadow: inset 0 0 0 0.6px $pix-primary;
-  }
-}
-
-@mixin label() {
-  display: block;
-  margin-bottom: $pix-spacing-xxs;
-  color: $pix-neutral-90;
-  font-weight: $font-medium;
-  font-size: 0.875rem;
-  line-height: 1.375rem;
-}
-
-@mixin subLabel() {
-  @include label();
-
-  color: $pix-neutral-60;
-  font-weight: $font-normal;
-  font-size: 0.813rem;
-  line-height: 1rem;
-}
-
-@mixin errorMessage() {
-  margin-top: $pix-spacing-xxs;
-  color: $pix-error-70;
-  font-size: 0.75rem;
-}
-
-@mixin formElementInError() {
-  border-color: $pix-error-70;
-  box-shadow: inset 0 0 0 0.6px $pix-error-70;
-}
-
-@mixin formElementInSuccess() {
-  border-color: $pix-success-60;
-  box-shadow: inset 0 0 0 0.6px $pix-success-60;
-}
-
-@mixin input() {
-  padding: 0 $pix-spacing-s 0 $pix-spacing-s;
-  color: $pix-neutral-90;
-  font-weight: $font-normal;
-  font-size: 0.875rem;
-  border-radius: $pix-spacing-xxs;
-}
-
-.pix-form__label {
-  @include label();
-
-  padding-bottom: 12px;
-}
-
-.pix-form__actions {
-  display: flex;
-  justify-content: center;
-
-  & > .pix-button:first-child {
-    margin-right: 10px;
-  }
-}
-
-.mandatory-mark,
-.mandatory-mark[title] {
-  color: $pix-error-70;
-  text-decoration: none;
-  border: none;
-  cursor: help;
-}