REVERT - Passage à la police Montreal (#126)

Signed-off-by: Alexis Boulerice <[email protected]>

CHANGELOG.md

@@ -10,7 +10,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Components - Tuiles: Ajout d'une classe card-link-icon pour gerer le link label pour tuile horizontale document et tuile en vedette.
 
 ### Changed
-- Styles - Typographie: Remplacement de Open Sans par la nouvelle police Montreal.
+-  **REVERTED** Styles - Typographie: Remplacement de Open Sans par la nouvelle police Montreal.
+  Des problèmes sous Windows et Android nous oblige à retarder le deploiement de la police Montreal.
 - Components - Onglet: Modifications état onglet. Ajout variante onglets verticaux.
 - Global: Modification des états focus de la plupart des éléments pouvant recevoir le focus: boutons, liens, input.
   Il y a 3 grandes familles de focus: normal, inversé et intérieur.

build.config.json

@@ -84,14 +84,6 @@
       ],
       "dest" : "public/glyphs/"
     },
-    "fonts": {
-      "base" : "source/fonts/",
-      "files": [
-        "source/fonts/**/*"
-      ],
-      "dest" : "public/fonts/",
-      "distribution"  : "dist/fonts/"
-    },
     "images": {
       "base" : "source/images/",
       "files": [

gulpfile.js

@@ -147,18 +147,6 @@ function glyphs() {
     .pipe(dest(config.glyphs.dest));
 }
 
-// Fonts: copy
-function fonts() {
-  return src(config.fonts.files)
-    .pipe(dest(config.fonts.dest));
-}
-
-// Fonts: Distribution
-function fontsDist() {
-  return src(config.fonts.files)
-    .pipe(dest(config.fonts.distribution))
-}
-
 // Task: Handle Patternlab Sass
 function plSass() {
   return src(config.patternlab.scss.files)
@@ -224,7 +212,6 @@ exports.default = series(
     photoswipe,
     scripts,
     glyphs,
-    fonts,
     baoVersion
   )
 )
@@ -243,7 +230,6 @@ exports.serve = series(
     vendorScripts,
     photoswipe,
     glyphs,
-    fonts,
     scripts,
     baoVersion
   ),
@@ -258,8 +244,7 @@ exports.distribute = series(
   parallel(
     jsDist,
     images,
-    cssDist,
-    fontsDist
+    cssDist
   ),
   sassCopy
 )

source/_patterns/00-styles/01-couleurs/01-contenu.mustache

@@ -12,19 +12,31 @@
       <div class="pl-swatch">
         <div class="pl-swatch-item pl-swatch-item-fw"><span class="pl-swatch-square pl-action"></span></div>
         <div class="pl-swatch-item" data-header="Couleur">Action</div>
-        <div class="pl-swatch-item select-all" data-header="Variable">$action</div>
+        <div class="pl-swatch-item" data-header="Variable">
+          <div class="pl-swatch-item-child-wrapper">
+            <div class="select-all">$action</div>
+          </div>
+        </div>
         <div class="pl-swatch-item select-all" data-header="Hex">#097d6c</div>
       </div>
       <div class="pl-swatch">
         <div class="pl-swatch-item pl-swatch-item-fw"><span class="pl-swatch-square pl-action-darker"></span></div>
         <div class="pl-swatch-item" data-header="Couleur">Action-darker</div>
-        <div class="pl-swatch-item slect-all" data-header="Variable">$action-darker</div>
+        <div class="pl-swatch-item" data-header="Variable">
+          <div class="pl-swatch-item-child-wrapper">
+            <div class="select-all">$action-darker</div>
+          </div>
+        </div>
         <div class="pl-swatch-item select-all" data-header="Hex">#075b4F</div>
       </div>
       <div class="pl-swatch">
         <div class="pl-swatch-item pl-swatch-item-fw"><span class="pl-swatch-square pl-action-lighter"></span></div>
         <div class="pl-swatch-item" data-header="Couleur">Action-lighter</div>
-        <div class="pl-swatch-item slect-all" data-header="Variable">$action-lighter</div>
+        <div class="pl-swatch-item" data-header="Variable">
+          <div class="pl-swatch-item-child-wrapper">
+            <div class="select-all">$action-lighter</div>
+          </div>
+        </div>
         <div class="pl-swatch-item select-all" data-header="Hex">#0cb097</div>
       </div>
     </div>

source/_patterns/00-styles/03-typography/00-fonts.md

@@ -0,0 +1,8 @@
+---
+title: Fonts
+---
+
+La police de caractère utilisé est [Open Sans](https://fonts.google.com/specimen/Open+Sans?selection.family=Open+Sans) 
+(Cette police est appelé dans le css)
+
+Nous utilisons **uniquement** les styles regular(400) et bold(700) 

source/_patterns/00-styles/03-typographie/00-police.mustache → source/_patterns/00-styles/03-typography/00-fonts.mustache

@@ -1,10 +1,10 @@
 <table class="table table-condensed">
   <tr>
-    <td style="width:50%"><p class="regular">Montreal - Regulier (400)</p></td>
+    <td style="width:50%"><p class="regular">Open sans - Regular (400)</p></td>
     <td style="width:50%"><p class="regular">a b c d e f g h i j k l m n o p q r s t u v w x y z<br/>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p><br/></td>
   </tr>
   <tr>
-    <td><p class="bold">Montreal - Gras (700)</p></td>
+    <td><p class="bold">Open sans - Bold (700)</p></td>
     <td><p class="bold">a b c d e f g h i j k l m n o p q r s t u v w x y z<br/>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p><br/></td>
   </tr>
 </table>

source/_patterns/00-styles/03-typographie/01-titres.md → source/_patterns/00-styles/03-typography/01-headings.md

@@ -1,6 +1,6 @@
 ---
-title: Titres
+title: Headings
 ---
-
+   
 Les classes <code>.h1</code> à <code>.h6</code> sont disponibles pour utiliser le style des titre sans le balisage.
-Les titres et les classes de titres sont responsives.
+Les titres et les classes de titres sont responsives.

source/_patterns/00-styles/03-typography/01-headings.mustache

@@ -0,0 +1,34 @@
+<div>
+  <ul class="pl-list-stacked-block plain">
+    <li>
+      <h1>H1. Montréal Heading</h1>
+      <span class="d-md-none">Open Sans Bold (700) - 32/40</span>
+      <span class="d-none d-md-block">Open Sans Bold (700) - 40/56</span>
+    </li>
+    <li>
+      <h2>H2. Montréal Heading</h2>
+      <span class="d-md-none">Open Sans Bold (700) - 24/32</span>
+      <span class="d-none d-md-block">Open Sans Bold (700) - 32/40</span>
+    </li>
+    <li>
+      <h3>H3. Montréal heading</h3>
+      <span class="d-md-none">Open Sans Bold (700) - 20/28</span>
+      <span class="d-none d-md-block">Open Sans Bold (700) - 24/32</span>
+    </li>
+    <li>
+      <h4>H4. Montréal heading</h4>
+      <span class="d-md-none">Open Sans Bold (700) - 16/24</span>
+      <span class="d-none d-md-block">Open Sans Bold (700) - 20/28</span>
+    </li>
+    <li>
+      <h5>H5. Montréal heading</h5>
+      <span class="d-md-none">Open Sans Bold (700) - 14/20</span>
+      <span class="d-none d-md-block">Open Sans Bold (700) - 16/24</span>
+    </li>
+    <li>
+      <h6>H6. Montréal heading</h6>
+      <span class="d-md-none">Open Sans Bold (700) - 12/16</span>
+      <span class="d-none d-md-block">Open Sans Bold (700) - 14/20</span>
+    </li>
+  </ul>
+</div>

source/_patterns/00-styles/03-typographie/03-lead.md → source/_patterns/00-styles/03-typography/03-lead.md

@@ -1,5 +1,5 @@
 ---
-title: Amorce
+title: Lead text
 ---
 
-Exemple d'un texte d'amorce. Pour l'utiliser il suffit d'ajouter la classe <code>.lead</code> sur votre paragraphe ou sur un <code>div</code> qui contient du contenu html.
+Exemple d'un texte d'amorce. Pour l'utiliser il suffit d'ajouter la classe <code>.lead</code> sur votre paragraphe ou sur un <code>div</code> qui contient du contenu html.

source/_patterns/00-styles/03-typography/04-paragraph.md

@@ -0,0 +1,5 @@
+---
+title: Paragraph
+---
+
+Exemple d'un simple paragraphe de base.

source/_patterns/00-styles/03-typography/08-list-unordered.md

@@ -0,0 +1,5 @@
+---
+title: Unordered List
+---
+
+Exemple d'une liste non ordonnée de base (<code>ul</code>).

source/_patterns/00-styles/03-typography/09-list-ordered.md

@@ -0,0 +1,5 @@
+---
+title: Ordered List
+---
+
+Exemple d'une liste ordonnée de base (<code>ol</code>).

source/_patterns/00-styles/03-typographie/10-list-inline.md → source/_patterns/00-styles/03-typography/10-list-inline.md

@@ -1,8 +1,8 @@
 ---
-title: Liste Inline
+title: List Inline
 ---
 Exemple d'une liste non ordonnée inline
 
-## Utilisation
+## Utilisation 
 
-Pour utiliser une liste non ordonnée en position inline, il faut inclure la classe <code>.list-inline</code> sur le <code>&lt;ul&gt;</code> ainsi que la classe <code>.list-inline-item</code> sur chacun de ses <code>&lt;li&gt;</code>.
+Pour utiliser une liste non ordonnée en position inline, il faut inclure la classe <code>.list-inline</code> sur le <code>&lt;ul&gt;</code> ainsi que la classe <code>.list-inline-item</code> sur chacun de ses <code>&lt;li&gt;</code>.

source/_patterns/00-styles/03-typographie/12-definition-list.md → source/_patterns/00-styles/03-typography/12-definition-list.md

@@ -1,5 +1,5 @@
 ---
-title: Liste de definition
+title: Definition lists
 ---
 
-Liste de définitions de base. Disponible en version small en ajoutant <code>.dl-sm</code>.
+Liste de définitions de base. Disponible en version small en ajoutant <code>.dl-sm</code>.

source/_patterns/00-styles/03-typographie/20-link.md → source/_patterns/00-styles/03-typography/20-link.md

@@ -1,7 +1,7 @@
 ---
-title: Hyperliens
+title: Link
 ---
 
 Lien par défault.
 
-Disponible en 3 tailles: Medium (default), Small (link-sm) et ExtraSmall (link-xs)
+Disponible en 3 tailles: Medium (default), Small (link-sm) et ExtraSmall (link-xs)

source/_patterns/00-styles/03-typographie/24-links-utilities.md → source/_patterns/00-styles/03-typography/24-links-utilities.md

@@ -1,5 +1,5 @@
 ---
-title: Utilitaires hyperliens
+title: Links utilities
 ---
 
 ## Utilisation
@@ -10,4 +10,4 @@ Par exemple: <code>.text-danger</code>
 ## Différence avec [Bootstrap](https://getbootstrap.com/docs/4.0/utilities/colors/)
 
 * Les classes des couleurs de dialogues sont uniquement disponibles en version foncé.
-* Le <code>.text-secondary</code> n'est pas activés.
+* Le <code>.text-secondary</code> n'est pas activés.

source/_patterns/00-styles/03-typographie/30-text-utilities.md → source/_patterns/00-styles/03-typography/30-text-utilities.md

@@ -1,5 +1,5 @@
 ---
-title: Utilitaires texte
+title: Text utilities
 ---
 
 ## Utilisation
@@ -10,4 +10,4 @@ Par exemple: <code>.text-danger</code>
 ## Différence avec [Bootstrap](https://getbootstrap.com/docs/4.0/utilities/colors/)
 
 * Les classes des couleurs de dialogues sont uniquement disponibles en version foncé.
-* Le <code>.text-secondary</code> n'est pas activés.
+* Le <code>.text-secondary</code> n'est pas activés.

source/css/scss/_type.scss

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i");
+
 // Font-smoothing normalisation for mac os
 body {
   -webkit-font-smoothing: antialiased;