@1024pix/pix-ui 30.1.0 → 31.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Pix-UI Changelog
 
+## v31.1.0 (18/04/2023)
+
+
+### :rocket: Amélioration
+- [#384](https://github.com/1024pix/pix-ui/pull/384) [FEATURE] Ajouter une icône avant le label du composant Pix-Select (PIX-7634)
+
+## v31.0.0 (14/04/2023)
+
+
+### :building_construction: Tech
+- [#381](https://github.com/1024pix/pix-ui/pull/381) [TECH] Modification de la valeur du Design Token warning-60 et suppression des placeholders de font-weight (PIX-7666).
+
 ## v30.1.0 (14/04/2023)
 
 

package/addon/components/pix-select.hbs

@@ -34,6 +34,10 @@
       aria-controls={{this.listId}}
       aria-disabled={{@isDisabled}}
     >
+      {{#if @icon}}
+        <FaIcon @icon={{@icon}} />
+      {{/if}}
+
       <span class="pix-select-button__text">{{this.placeholder}}</span>
 
       <FaIcon

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

@@ -74,7 +74,7 @@ $pix-warning-20: #FFE381;
 $pix-warning-30: #FFD235;
 $pix-warning-40: #FFBE00;
 $pix-warning-50: #EAA600;
-$pix-warning-60: #CE8900;
+$pix-warning-60: #D87016;
 $pix-warning-70: #A95800;
 $pix-warning-80: #874D00;
 

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

@@ -114,12 +114,10 @@
   letter-spacing: 0.02em;
 }
 
-%pix-body-weight-medium,
 .pix-body-weight-medium {
   font-weight: 500;
 }
 
-%pix-body-weight-bold,
 .pix-body-weight-bold {
   font-weight: 700;
 }

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

@@ -28,6 +28,7 @@ export const Template = (args) => {
           @errorMessage={{this.errorMessage}}
           @isDisabled={{this.isDisabled}}
           @placement={{this.placement}}
+          @icon={{this.icon}}
         />
     `,
     context: args,
@@ -218,6 +219,19 @@ WithDropDownAtTheTop.args = {
   placement: 'top',
 };
 
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  icon: 'earth-europe',
+  isSearchable: false,
+  label: 'With icon',
+  onChange: action('onChange'),
+  options: [
+    { value: 'en', label: 'English' },
+    { value: 'fr', label: 'Français' },
+  ],
+  value: 'fr',
+};
+
 export const argTypes = {
   options: {
     name: 'options',
@@ -374,4 +388,14 @@ export const argTypes = {
       defaultValue: { summary: null },
     },
   },
+  icon: {
+    name: 'icon',
+    description:
+      "Permet l'affichage d'une icône FontAwesome avant le placeholder ou le label de l'option sélectionnée.",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: null },
+    },
+  },
 };

package/app/stories/pix-select.stories.mdx

@@ -61,6 +61,12 @@ Ici nous avons forcé le placement de la dropdown en haut du select mais sachez
   <Story name="WithDropDownAtTheTop" story={stories.WithDropDownAtTheTop} />
 </Canvas>
 
+## WithIcon
+
+<Canvas>
+  <Story name="WithIcon" story={stories.WithIcon} />
+</Canvas>
+
 ## Usage
 
 ```html
@@ -80,6 +86,7 @@ Ici nous avons forcé le placement de la dropdown en haut du select mais sachez
   @requiredText="{{requiredText}}"
   @errorMessage="{{errorMessage}}"
   @placement="{{placement}}"
+  @icon="{{icon}}"
 />
 ```
 

package/docs/colors-palette.stories.mdx

@@ -38,7 +38,7 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
              Secondary: '#ffd235',
              40: '#ffbe00',
              50: '#eaa600',
-             60: '#ce8900',
+             60: '#d87016',
              70: '#a95800',
              80: '#874d00'}}
   />
@@ -103,7 +103,7 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
             30: '#ffd235',
             40: '#ffbe00',
             50: '#eaa600',
-            60: '#ce8900',
+            60: '#d87016',
             70: '#a95800',
             80: '#874d00'}}
   />

package/docs/typography.stories.mdx

@@ -1,6 +1,6 @@
 <!-- Typography.stories.mdx -->
 
-import { Meta, Typeset } from '@storybook/addon-docs';
+import { Meta, Typeset, Markdown } from '@storybook/addon-docs';
 
 <Meta title="Utiliser Pix UI/Design Tokens/Typographie" />
 
@@ -82,24 +82,6 @@ Des **placeholder SCSS** équivalents aux tokens de Figma sont disponibles. C'es
   fontFamily={'Roboto, Arial, sans-serif'}
 />
 
-#### Variantes de gras
-
-Pour les corps, on peut préciser une graisse différente en complément :
-
-<Typeset
-  fontSizes={[16]}
-  fontWeight={500}
-  sampleText={'@extend %pix-weight-medium;'}
-  fontFamily={'Roboto, Arial, sans-serif'}
-/>
-
-<Typeset
-  fontSizes={[16]}
-  fontWeight={700}
-  sampleText={'@extend %pix-weight-bold;'}
-  fontFamily={'Roboto, Arial, sans-serif'}
-/>
-
 ### Comment utiliser un placeholder SCSS ?
 
 ```css
@@ -140,6 +122,29 @@ Pour chaque placeholder SCSS, une **classe CSS** utilitaire de même nom existe
 - `pix-body-s`
 - `pix-body-xs`
 
+## Design tokens
+
+Des variables SCSS existent pour certaines propriétés de typographie.
+
+### Font-weight
+
+ℹ️ Ces variables ne devraient pas être utilisées pour modifier la graisse d'un titre car les classes utilitaires et les placeholders ci-dessus s'en occupent déjà.
+
+`$font-normal: 400;`
+
+`$font-medium: 500;`
+
+`$font-bold: 700;`
+
+### Font-family
+
+ℹ️ Vous ne devriez pas avoir à les utiliser car elles vont de pair avec d'autres propriétés de typo (font-size, line-height, ...).<br/>
+Pour en savoir plus, voir les classes utilitaires et les placeholders ci-dessus.
+
+`$font-open-sans: 'Open Sans', Arial, sans-serif;`
+
+`$font-roboto: 'Roboto', Arial, sans-serif;`
+
 ## Détails techniques
 
 On utilise sur les applications Pix deux polices d'écriture :

package/package.json

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