Merge pull request #185 from PublicisSapient/prettier

WIP: DO NOT MERGE: Prettier

Author: zoltan-dulac

.github/workflows/push-actions.yml

@@ -18,7 +18,7 @@ jobs:
                   node-version: "20.11.0"
                   cache: "npm"
             - name: Install X11 dependencies for robotjs (needed for unit testing on input-mask tests)
-              run: sudo apt-get install libxtst-dev libpng++-dev xvfb 
+              run: sudo apt-get install libxtst-dev libpng++-dev xvfb
             - name: Install npm dependencies
               run: npm ci
             - name: Run ESLint
@@ -60,7 +60,7 @@ jobs:
                   which google-chrome &&
                   google-chrome --version
             - name: Install X11 dependencies for robotjs (needed for unit testing on input-mask tests)
-              run: sudo apt-get install libxtst-dev libpng++-dev xvfb 
+              run: sudo apt-get install libxtst-dev libpng++-dev xvfb
             - name: Install npm dependencies
               run: npm ci
             - name: Start server and wait for localhost to be available

.prettierrc

@@ -17,6 +17,12 @@
             "options": {
                 "tabWidth": 2
             }
+        },
+        {
+            "files": ["*.php"],
+            "options": {
+                "trailingComma": "none"
+            }
         }
     ]
 }

.swo

@@ -1,5 +1,5 @@
 <link id="link-css" rel="stylesheet" type="text/css" href="css/link.css" >
 
-<?php // since we are using an example from this page, we need to include the stylesheet from it as well.
-include "hero-image-text-resize.php";
+<!-- Since we are using an example from this page, we need to include the stylesheet from it as well. -->
+<?php include "hero-image-text-resize.php";
 ?>

content/head/link.php

@@ -6,6 +6,14 @@ figure,
   border: solid 1px #ccc;
   background: #ffffcc;
 }
+figure:has(.showcode),
+[role="figure"]:has(.showcode) {
+  padding: 0;
+}
+figure:has(.showcode) code,
+[role="figure"]:has(.showcode) code {
+  max-width: calc(100vw - 40px);
+}
 figure img,
 [role="figure"] img {
   max-width: 100%;

css/figure.css

@@ -42,6 +42,7 @@
   position: -webkit-sticky;
   position: sticky;
   left: 0;
+  z-index: 1;
 }
 .sticky-table__sticky-horiz-heading {
   position: -webkit-sticky;

css/table.css

@@ -146,7 +146,7 @@ describe('Input mask test suite', () => {
             },
         );
         // check screenshot for the selection, should match up - "123-45"
-        await page.screenshot({ path: 'mouseSelection.png' });
+        // await page.screenshot({ path: 'mouseSelection.png' });
         expect(expectedSelection).toBe(selectedText);
     });
 
@@ -178,7 +178,7 @@ describe('Input mask test suite', () => {
             },
         );
         // check screenshot for the selection, should match up - "6-7890"
-        await page.screenshot({ path: 'keyBoardSelection.png' });
+        // await page.screenshot({ path: 'keyBoardSelection.png' });
         expect(expectedSelection).toBe(selectedText);
     });
 

js/test/input-mask.test.js

@@ -8,6 +8,14 @@ figure,
     border: solid 1px #ccc;
     background: #ffffcc;
 
+    &:has(.showcode) {
+        padding: 0;
+
+        code {
+            max-width: calc(100vw - 40px);
+        }
+    }
+
     img {
         max-width: 100%;
     }

keyBoardSelection.png

@@ -52,6 +52,7 @@
         [role="rowheader"] {
             .sticky();
             left: 0;
+            z-index: 1;
         }
     }
 

less/figure.less

@@ -1,8 +1,9 @@
+<div class="sticky-table__container" tabindex="0">
 <table class="compliance-table">
     <caption>WCAG audio related guidelines</caption>
     <thead>
         <tr>
-            <th scope="col"><span class="sr-only">Requirement</span></th>
+            <th scope="col" class="sticky-table__sticky-horiz-heading"><span class="sr-only">Requirement</span></th>
             <th scope="col">A</th>
             <th scope="col">AA</th>
             <th scope="col">AAA</th>
@@ -35,4 +36,5 @@
             <td><img class="compliance-table__icon" src="images/checkmark.svg" alt="required"></td>
         </tr>
     </tbody>
-</table>
+</table>
+</div>

less/table.less

@@ -1,8 +1,9 @@
-<table class="compliance-table">
+<div class="sticky-table__container" tabindex="0">
+    <table class="compliance-table">
     <caption>WCAG video related guidelines</caption>
     <thead>
         <tr>
-            <th scope="col"><span class="sr-only">Requirement</span></th>
+            <th scope="col"  class="sticky-table__sticky-horiz-heading"><span class="sr-only">Requirement</span></th>
             <th scope="col">A</th>
             <th scope="col">AA</th>
             <th scope="col">AAA</th>
@@ -75,4 +76,5 @@
 
 
     </tbody>
-</table>
+</table>
+</div>