@1024pix/pix-ui 28.1.1 → 29.0.0

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

@@ -1,263 +1,125 @@
 // See https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=24%3A8
 
-// Mixin pour permettre l'utilisation dans une classe css si jamais le tag html a trop de classe
-@mixin display1() {
+// Placeholder pour permettre l'utilisation dans une classe css si jamais le tag html a trop de classe
+%-pix-title {
   font-family: $font-open-sans;
-  font-weight: $font-light;
-  font-size: 4.5rem;
-  line-height: 5.5rem;
-  letter-spacing: -0.04em;
+  font-weight: 500;
 }
 
-@mixin display2() {
-  font-family: $font-open-sans;
-  font-weight: $font-light;
-  font-size: 3.75rem;
-  line-height: 4.5rem;
-  letter-spacing: -0.04em;
-}
-
-@mixin display3() {
-  font-family: $font-open-sans;
-  font-weight: $font-light;
-  font-size: 3rem;
-  line-height: 3.75rem;
-  letter-spacing: -0.04em;
+%pix-title-l,
+.pix-title-l {
+  @extend %-pix-title;
 
-  @include device-is('mobile') {
-    font-weight: $font-medium;
-    font-size: 2.25rem;
-    line-height: 2.75rem;
-  }
-}
-
-@mixin h1() {
-  font-family: $font-open-sans;
-  font-weight: $font-light;
-  font-size: 2.5rem;
-  line-height: 3rem;
-  letter-spacing: -0.04em;
-
-  @include device-is('mobile') {
-    font-weight: $font-medium;
-    font-size: 2rem;
-    line-height: 2.5rem;
-  }
-}
-
-@mixin h2() {
-  font-family: $font-open-sans;
-  font-weight: $font-medium;
   font-size: 2rem;
-  line-height: 2.5rem;
+  line-height: 1.25;
   letter-spacing: -0.04em;
 
-  @include device-is('mobile') {
-    font-size: 1.75rem;
-    line-height: 2.25rem;
+  @include device-is('tablet') {
+    font-size: 2.5rem;
   }
-}
-
-@mixin h3() {
-  font-family: $font-open-sans;
-  font-weight: $font-medium;
-  font-size: 1.75rem;
-  line-height: 2.25rem;
-  letter-spacing: -0.04em;
 
-  @include device-is('mobile') {
-    font-size: 1.5rem;
-    line-height: 2rem;
+  @include device-is('desktop') {
+    font-size: 3rem;
   }
 }
 
-@mixin h4() {
-  font-family: $font-open-sans;
-  font-weight: $font-medium;
-  font-size: 1.5rem;
-  line-height: 2rem;
-  letter-spacing: -0.02em;
-}
+%pix-title-m,
+.pix-title-m {
+  @extend %-pix-title;
 
-@mixin subheading() {
-  font-family: $font-open-sans;
-  font-weight: $font-semi-bold;
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-
-  @include device-is('mobile') {
-    font-size: 1.125rem;
-    line-height: 1.575rem;
-  }
-}
-
-@mixin text() {
-  font-family: $font-roboto;
-  font-weight: $font-normal;
-  font-size: 1rem;
-  line-height: 1.375rem;
+  font-size: 1.625rem;
+  line-height: 1.3;
+  letter-spacing: -0.02em;
 
-  b,
-  strong {
-    font-weight: $font-medium;
+  @include device-is('tablet') {
+    font-size: 2rem;
+    line-height: 1.25;
+    letter-spacing: -0.04em;
   }
 
-  a {
-    font-weight: $font-medium;
-    color: $pix-primary;
+  @include device-is('desktop') {
+    font-size: 2.25rem;
   }
 }
 
-@mixin text-bold() {
-  @include text;
-
-  font-weight: $font-medium;
-}
-
-@mixin text-link() {
-  @include text;
-
-  font-weight: $font-medium;
-  color: $pix-primary;
-}
-
-@mixin text-small() {
-  @include text;
-
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-@mixin text-large() {
-  @include text;
+%pix-title-s,
+.pix-title-s {
+  @extend %-pix-title;
 
-  font-size: 1.125rem;
-  line-height: 1.625rem;
-}
-
-@mixin caption() {
-  font-family: $font-roboto;
-  font-weight: $font-normal;
-  font-size: 0.75rem;
-  line-height: 1.125rem;
+  font-size: 1.375rem;
+  line-height: 1.3;
+  letter-spacing: -0.02em;
 
-  b,
-  strong {
-    font-weight: $font-bold;
+  @include device-is('tablet') {
+    font-size: 1.5rem;
   }
-}
-
-@mixin caption-bold() {
-  @include caption;
-
-  font-weight: $font-bold;
-}
-
-@mixin caption-uppercase() {
-  @include caption;
-
-  text-transform: uppercase;
-}
 
-@mixin footer() {
-  font-family: $font-roboto;
-  font-weight: $font-normal;
-  font-size: 0.625rem;
-  line-height: 0.875rem;
-  letter-spacing: 0.02em;
-
-  b,
-  strong {
-    font-weight: $font-bold;
+  @include device-is('desktop') {
+    font-size: 1.75rem;
   }
 }
 
-@mixin footer-bold() {
-  @include footer;
+%pix-title-xs,
+.pix-title-xs {
+  @extend %-pix-title;
 
-  font-weight: $font-bold;
+  font-size: 1.25rem;
+  line-height: 1.4;
+  letter-spacing: -0.02em;
 }
 
-@mixin footer-uppercase() {
-  @include footer;
-
-  font-weight: $font-bold;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+%-pix-body {
+  font-family: $font-roboto;
+  font-weight: 400;
 }
 
-.pix-display1 {
-  @include display1;
-}
+%pix-body-l,
+.pix-body-l {
+  @extend %-pix-body;
 
-.pix-display2 {
-  @include display2;
-}
+  font-size: 1rem;
+  line-height: 1.5;
 
-.pix-display3 {
-  @include display3;
+  @include device-is('tablet') {
+    font-size: 1.125rem;
+  }
 }
 
-.pix-h1 {
-  @include h1;
-}
+%pix-body-m,
+.pix-body-m {
+  @extend %-pix-body;
 
-.pix-h2 {
-  @include h2;
-}
+  font-size: 0.875rem;
+  line-height: 1.5;
 
-.pix-h3 {
-  @include h3;
+  @include device-is('tablet') {
+    font-size: 1rem;
+  }
 }
 
-.pix-h4 {
-  @include h4;
-}
+%pix-body-s,
+.pix-body-s {
+  @extend %-pix-body;
 
-.pix-subheading {
-  @include subheading;
+  font-size: 0.875rem;
+  line-height: 1.5;
 }
 
-.pix-text {
-  @include text;
-
-  &--bold {
-    @include text-bold;
-  }
-
-  &--link {
-    @include text-link;
-  }
-
-  &--small {
-    @include text-small;
-  }
+%pix-body-xs,
+.pix-body-xs {
+  @extend %-pix-body;
 
-  &--large {
-    @include text-large;
-  }
+  font-size: 0.75rem;
+  line-height: 1.5;
+  letter-spacing: 0.02em;
 }
 
-.pix-caption {
-  @include caption;
-
-  &--bold {
-    @include caption-bold;
-  }
-
-  &--uppercase {
-    @include caption-uppercase;
-  }
+%pix-body-weight-medium,
+.pix-body-weight-medium {
+  font-weight: 500;
 }
 
-.pix-footer {
-  @include footer;
-
-  &--bold {
-    @include footer-bold;
-  }
-
-  &--uppercase {
-    @include footer-uppercase;
-  }
+%pix-body-weight-bold,
+.pix-body-weight-bold {
+  font-weight: 700;
 }

package/docs/design-tokens.stories.mdx

@@ -6,12 +6,12 @@ import { Meta } from '@storybook/addon-docs';
 
 > Les design tokens contiennent plusieurs éléments de base de la charte graphique (les couleurs, la typographie, les icônes, etc.)
 
-## Utiliser les classes, mixins et variables dans votre css
+## Utiliser les classes, placeholders, mixins et variables dans vos fichiers scss
 
-En ajoutant la dépendance dans votre application avec `npm install`, vous avez déjà accès aux classes, mais pour avoir accès aux mixins et variables,
+En ajoutant la dépendance dans votre application avec `npm install`, vous avez déjà accès aux classes, mais pour avoir accès aux placeholders, mixins et variables,
 il faut ajouter le code ci-dessous dans le `new EmberApp()` de votre `ember-cli.build.js` qui se trouve à la racine du projet :
 
-```
+```js
 sassOptions: {
   includePaths: ['node_modules/@1024pix/pix-ui/addon/styles'],
 },
@@ -19,15 +19,23 @@ sassOptions: {
 
 Par la suite vous aurez accès à toutes les variables des design tokens avec le `$`, par exemple `border: 1px solid $pix-primary;`.
 
-Et pour les mixins, dans le scss voulu, il faudra importer (avec `@use`) les design tokens en haut du fichier pour les utiliser
-
-Par exemple :
+Pour pouvoir utiliser les placeholders et mixins, il faudra importer les design tokens dans le fichier source :
 
+```css
+/* Fichier pix/orga/app/styles/app.scss */
+@import 'pix-design-tokens';
 ```
-@use 'design-tokens`;
 
+Puis les utiliser de cette manière :
+
+```css
+/* Fichier pix/orga/app/styles/authenticated/organization.scss */
 .organization-title {
-  @include design-tokens.text-bold;
+  @extend %pix-title-m;
+
+  @include device-is('desktop') {
+    ...
+  }
 }
 ```
 

package/docs/pix-design-tokens-dev.stories.mdx

@@ -10,31 +10,30 @@ import { Meta } from '@storybook/addon-docs';
 
 Quand vous êtes amenés à ajouter ou à modifier des éléments des design tokens, faites le dans le scss associé,
 par example `addon/styles/_typography.scss` ou `addon/styles/_colors.scss` et s'il n'est pas déjà importé, rajoutez l'import dans `addon/styles/design-tokens.scss`.
-Ceci nous permettra d'utiliser les mixin dans nos applications par la suite.
+Ceci nous permettra d'utiliser les placeholders dans nos applications par la suite.
 
-Le standard d'équipe est de créer un mixin et une classe et de préfixer la classe avec `pix-`.
+Le standard d'équipe est de créer un placeholder SCSS et une classe CSS préfixés par `pix-`.
 
 Par exemple :
 
 ```
-@mixin text() {
-  font-family: $font-roboto;
-  font-weight: $font-normal;
-  font-size: 1rem;
-  line-height: 1.375rem;
-
-  b,
-  strong {
-    font-weight: $font-medium;
+%pix-title-large {
+  font-family: $font-open-sans;
+  font-size: 2rem;
+  line-height: 1.25;
+  letter-spacing: -0.04em;
+  font-weight: 500;
+
+  @include device-is('tablet') {
+    font-size: 2.5rem;
   }
 
-  a {
-    font-weight: $font-medium;
-    color: $pix-primary;
+  @include device-is('desktop') {
+    font-size: 3rem;
   }
 }
 
 .pix-text {
-  @include text;
+  @extend %pix-title-large;
 }
 ```

package/docs/shadow.stories.mdx

@@ -0,0 +1,25 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Utiliser Pix UI/Design Tokens/Ombres" />
+
+# Ombres
+
+Pour uniformiser les ombres dans nos applications, on dispose de plusieurs classes CSS :
+
+- `pix-shadow-xs`
+- `pix-shadow-sm`
+- `pix-shadow-md`
+- `pix-shadow-lg`
+- `pix-shadow-xl`
+
+Et leur équivalent en placeholder SCSS :
+
+- `@extend %pix-shadow-xs;`
+- `@extend %pix-shadow-sm;`
+- `@extend %pix-shadow-md;`
+- `@extend %pix-shadow-lg;`
+- `@extend %pix-shadow-xl;`
+
+Code associé : https://github.com/1024pix/pix-ui/blob/dev/addon/styles/pix-design-tokens/_shadows.scss
+
+Lien Figma : https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=54%3A5141

package/docs/spacing.stories.mdx

@@ -0,0 +1,19 @@
+import { Meta, Canvas, Story } from '@storybook/addon-docs';
+
+<Meta title="Utiliser Pix UI/Design Tokens/Espacements" />
+
+# Espacements
+
+Pour uniformiser les espacements dans nos applications, on dispose de plusieurs variables SCSS :
+
+- `$pix-spacing-xxs`
+- `$pix-spacing-xs`
+- `$pix-spacing-s`
+- `$pix-spacing-m`
+- `$pix-spacing-l`
+- `$pix-spacing-xl`
+- `$pix-spacing-xxl`
+
+Code associé : https://github.com/1024pix/pix-ui/blob/dev/addon/styles/pix-design-tokens/_spacing.scss
+
+Lien Figma : https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=54%3A4595&t=8piOzYzdI0ala3i6-0

package/docs/typography.stories.mdx

@@ -0,0 +1,160 @@
+<!-- Typography.stories.mdx -->
+
+import { Meta, Typeset } from '@storybook/addon-docs';
+
+<Meta title="Utiliser Pix UI/Design Tokens/Typographie" />
+
+# Typographie
+
+Cette page permet de connaître les typographies qui sont disponibles dans `Pix-UI`. [Figma](https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=24-8&t=Nuq9GxVknLW0Qsbc-0) reste la source de vérité du design system de Pix.
+
+Ce que l'on nomme typographie dans ce contexte est un ensemble de 5 éléments :
+
+- Police d'écriture `font-family`
+- Taille de la police `font-size`
+- Hauteur de ligne `line-height`
+- Graisse `font-weight`
+- Espacement des caractères `letter-spacing`
+
+On met à disposition dans Pix UI des utilitaires pour simplifier l'usage.
+
+## Utilisation via placeholder SCSS
+
+Des **placeholder SCSS** équivalents aux tokens de Figma sont disponibles. C'est l'usage recommandé en priorité.
+
+### Titres
+
+<Typeset
+  fontSizes={[48]}
+  fontWeight={500}
+  sampleText={'@extend %pix-title-l;'}
+  fontFamily={'"Open Sans", Arial, sans-serif'}
+/>
+
+<Typeset
+  fontSizes={[36]}
+  fontWeight={500}
+  sampleText={'@extend %pix-title-m;'}
+  fontFamily={'"Open Sans", Arial, sans-serif'}
+/>
+
+<Typeset
+  fontSizes={[28]}
+  fontWeight={500}
+  sampleText={'@extend %pix-title-s;'}
+  fontFamily={'"Open Sans", Arial, sans-serif'}
+/>
+
+<Typeset
+  fontSizes={[20]}
+  fontWeight={500}
+  sampleText={'@extend %pix-title-xs;'}
+  fontFamily={'"Open Sans", Arial, sans-serif'}
+/>
+
+### Corps de texte
+
+<Typeset
+  fontSizes={[18]}
+  fontWeight={400}
+  sampleText={'@extend %pix-body-l;'}
+  fontFamily={'Roboto, Arial, sans-serif'}
+/>
+
+<Typeset
+  fontSizes={[16]}
+  fontWeight={400}
+  sampleText={'@extend %pix-body-m;'}
+  fontFamily={'Roboto, Arial, sans-serif'}
+/>
+
+<Typeset
+  fontSizes={[14]}
+  fontWeight={400}
+  sampleText={'@extend %pix-body-s;'}
+  fontFamily={'Roboto, Arial, sans-serif'}
+/>
+
+<Typeset
+  fontSizes={[12]}
+  fontWeight={400}
+  sampleText={'@extend %pix-body-xs;'}
+  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
+.card__title {
+  @extend %pix-title-m;
+
+  color: $pix-neutral-70;
+}
+```
+
+Contrairement à l'utilisation de mixins, le CSS compilé ne sera que très peu surchargé. Il ressemblera à ceci :
+
+```css
+.pix-title-m,
+.card__title {
+  font-family: 'Open Sans', Arial, sans-serif;
+  font-size: 2rem;
+  line-height: 1.25;
+  letter-spacing: -0.04em;
+  font-weight: 500;
+}
+
+.card__title {
+  color: #344563;
+}
+```
+
+## Utilisation via classe CSS
+
+Pour chaque placeholder SCSS, une **classe CSS** utilitaire de même nom existe :
+
+- `pix-title-l`
+- `pix-title-m`
+- `pix-title-s`
+- `pix-title-xs`
+- `pix-body-l`
+- `pix-body-m`
+- `pix-body-s`
+- `pix-body-xs`
+
+## Détails techniques
+
+On utilise sur les applications Pix deux polices d'écriture :
+
+- Open Sans pour les titres
+- Roboto pour les corps
+
+Selon qu'on utilise un smartphone, une tablette ou un ordinateur de bureau on peut se placer plus ou moins proche de l'écran.
+Aussi, le choix de design a été fait de faire varier les typographies en fonction de largeur du viewport de l'utilisateur.
+
+Ce choix est abstrait par l'utilisation des classes CSS ou mixins citées plus haut.
+
+Code associé :
+
+- https://github.com/1024pix/pix-ui/blob/dev/addon/styles/pix-design-tokens/_fonts.scss
+- https://github.com/1024pix/pix-ui/blob/dev/addon/styles/pix-design-tokens/_typography.scss
+
+Lien Figma : https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=24%3A8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "28.1.1",
+  "version": "29.0.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -67,7 +67,7 @@
     "@ember/render-modifiers": "^2.0.5",
     "@ember/string": "^3.0.1",
     "@ember/test-helpers": "^2.8.1",
-    "@embroider/test-setup": "^0.48.1",
+    "@embroider/test-setup": "^2.1.1",
     "@fortawesome/ember-fontawesome": "^0.4.1",
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",