Add new files and directories for Jekyll website

gc-proto · Jun 27, 2024 · 8479b88 · 8479b88
1 parent 015f8f8
commit 8479b88
Show file tree

Hide file tree

Showing 20 changed files with 221 additions and 190 deletions.
diff --git a/_data/date-modified.json b/_data/date-modified.json
@@ -0,0 +1,138 @@
+{
+  "gcweb": {
+    "nodeType": 1,
+    "nodeName": "DL",
+    "textContent": "",
+    "attributes": {
+      "id": "wb-dtmd"
+    },
+    "computedStyles": {
+      "block-size": "23px",
+      "height": "23px",
+      "inline-size": "555px",
+      "margin-block-end": "0px",
+      "margin-block-start": "32px",
+      "margin-bottom": "0px",
+      "margin-top": "32px",
+      "perspective-origin": "277.5px 11.5px",
+      "transform-origin": "277.5px 11.5px",
+      "width": "555px",
+      "-webkit-locale": "auto"
+    },
+    "pseudoStyles": {
+      ":hover": {},
+      ":active": {},
+      ":visited": {},
+      ":focus": {}
+    },
+    "children": [
+      {
+        "nodeType": 1,
+        "nodeName": "DT",
+        "textContent": "",
+        "attributes": {},
+        "computedStyles": {
+          "block-size": "auto",
+          "display": "inline",
+          "font-weight": "400",
+          "height": "auto",
+          "inline-size": "auto",
+          "perspective-origin": "0px 0px",
+          "transform-origin": "0px 0px",
+          "width": "auto",
+          "-webkit-locale": "auto"
+        },
+        "pseudoStyles": {
+          ":hover": {},
+          ":active": {},
+          ":visited": {},
+          ":focus": {}
+        },
+        "children": [
+          {
+            "nodeType": 3,
+            "nodeName": "#text",
+            "textContent": "Date modified:",
+            "attributes": {},
+            "computedStyles": {},
+            "pseudoStyles": {},
+            "children": [],
+            "parent": {
+              "nodeName": "DT",
+              "nodeType": 1
+            }
+          }
+        ],
+        "parent": {
+          "nodeName": "DL",
+          "nodeType": 1
+        }
+      },
+      {
+        "nodeType": 1,
+        "nodeName": "DD",
+        "textContent": "",
+        "attributes": {},
+        "computedStyles": {
+          "block-size": "auto",
+          "display": "inline",
+          "height": "auto",
+          "inline-size": "auto",
+          "perspective-origin": "0px 0px",
+          "transform-origin": "0px 0px",
+          "width": "auto",
+          "-webkit-locale": "auto"
+        },
+        "pseudoStyles": {
+          ":hover": {},
+          ":active": {},
+          ":visited": {},
+          ":focus": {}
+        },
+        "children": [
+          {
+            "nodeType": 1,
+            "nodeName": "TIME",
+            "textContent": "",
+            "attributes": {
+              "property": "dateModified"
+            },
+            "computedStyles": {
+              "-webkit-locale": "auto"
+            },
+            "pseudoStyles": {
+              ":hover": {},
+              ":active": {},
+              ":visited": {},
+              ":focus": {}
+            },
+            "children": [
+              {
+                "nodeType": 3,
+                "nodeName": "#text",
+                "textContent": "2024-05-24",
+                "attributes": {},
+                "computedStyles": {},
+                "pseudoStyles": {},
+                "children": [],
+                "parent": {
+                  "nodeName": "TIME",
+                  "nodeType": 1
+                }
+              }
+            ],
+            "parent": {
+              "nodeName": "DD",
+              "nodeType": 1
+            }
+          }
+        ],
+        "parent": {
+          "nodeName": "DL",
+          "nodeType": 1
+        }
+      }
+    ],
+    "parent": null
+  }
+}
diff --git a/_data/locales/side-by-side.yml b/_data/locales/side-by-side.yml
@@ -45,4 +45,7 @@ contains:
   fr: Contient
 css-info:
   en: CSS computed info
-  fr: Informations calculées CSS
+  fr: Informations calculées CSS
+zenhub-ticket:
+  en: ZenHub issue
+  fr: Ticket ZenHub
diff --git a/_data/button-signin.json → _data/signin.json b/_data/button-signin.json → _data/signin.json
@@ -30,19 +30,6 @@
       ":focus": {}
     },
     "children": [
-      {
-        "nodeType": 3,
-        "nodeName": "#text",
-        "textContent": "\n        ",
-        "attributes": {},
-        "computedStyles": {},
-        "pseudoStyles": {},
-        "children": [],
-        "parent": {
-          "nodeName": "DIV",
-          "nodeType": 1
-        }
-      },
       {
         "nodeType": 1,
         "nodeName": "SECTION",
@@ -67,19 +54,6 @@
           ":focus": {}
         },
         "children": [
-          {
-            "nodeType": 3,
-            "nodeName": "#text",
-            "textContent": "\n          ",
-            "attributes": {},
-            "computedStyles": {},
-            "pseudoStyles": {},
-            "children": [],
-            "parent": {
-              "nodeName": "SECTION",
-              "nodeType": 1
-            }
-          },
           {
             "nodeType": 1,
             "nodeName": "H2",
@@ -141,19 +115,6 @@
               "nodeType": 1
             }
           },
-          {
-            "nodeType": 3,
-            "nodeName": "#text",
-            "textContent": "\n          ",
-            "attributes": {},
-            "computedStyles": {},
-            "pseudoStyles": {},
-            "children": [],
-            "parent": {
-              "nodeName": "SECTION",
-              "nodeType": 1
-            }
-          },
           {
             "nodeType": 1,
             "nodeName": "A",
@@ -251,38 +212,12 @@
               "nodeName": "SECTION",
               "nodeType": 1
             }
-          },
-          {
-            "nodeType": 3,
-            "nodeName": "#text",
-            "textContent": "\n        ",
-            "attributes": {},
-            "computedStyles": {},
-            "pseudoStyles": {},
-            "children": [],
-            "parent": {
-              "nodeName": "SECTION",
-              "nodeType": 1
-            }
           }
         ],
         "parent": {
           "nodeName": "DIV",
           "nodeType": 1
         }
-      },
-      {
-        "nodeType": 3,
-        "nodeName": "#text",
-        "textContent": "\n",
-        "attributes": {},
-        "computedStyles": {},
-        "pseudoStyles": {},
-        "children": [],
-        "parent": {
-          "nodeName": "DIV",
-          "nodeType": 1
-        }
       }
     ],
     "parent": null,

diff --git a/_includes/recursive_list.liquid b/_includes/recursive_list.liquid
@@ -0,0 +1,31 @@
+{% for item in include.items %}
+  <li>
+    {% case item.nodeType %}
+      {% when 1 %}
+        <code>&lt;{{ item.nodeName | downcase }}&gt;</code>
+        <ul>
+          {% for rule in item.computedStyles %}
+            <li>{{ rule[0] }}: 
+              {% if rule[1] contains "rgb" %}
+              <span class="color-indicator" style="background-color: {{ rule[1] }};"></span> <code>{{ rule[1] }}</code>
+              {% else %}
+              <code>{{ rule[1] }}</code>
+              {% endif %}
+            </li>
+          {% endfor %}
+        </ul>
+      {% when 2 %}
+        <code>{{ item.nodeName }}</code>
+      {% when 3 %}
+        <code>{{ item.nodeName | remove_first: '#' }}</code>
+      {% else %}
+        {{ item.nodeName }}
+    {% endcase %}
+
+    {% if item.children %}
+      <ul>
+        {% include recursive_list.liquid items=item.children %}
+      </ul>
+    {% endif %}
+  </li>
+{% endfor %}
diff --git a/_layouts/side-by-side.html b/_layouts/side-by-side.html
@@ -17,6 +17,8 @@
   <dd><span class="label label-warning mrgn-lft-sm">{{ page.status }}</span></dd>
   <dt>{{ side-by-side.dependencies[ page.lang ] }}</dt>
   <dd><span class="label label-info mrgn-lft-sm">{{ page.dependency }}</span></dd>
+  <dt>{{ side-by-side.zenhub-ticket[ page.lang ] }}</dt>
+  <dd><a href="https://app.zenhub.com/workspaces/design-system-6100624a19f4cf000e46e458/issues/gh/cds-snc/design-gc-conception/{{ page.zenhub-issue }}">#{{ page.zenhub-issue }}</a></dd>
 </dl>
 <div class="row wb-eqht">
   <div class="col-md-6">
@@ -93,32 +95,17 @@ <h2>{{ side-by-side.node-relationship[ page.lang ] }}</h2>
             {{ side-by-side.contains[ page.lang ] }} <code>{{ component.gcweb.children | size }}</code> {{ side-by-side.child-node[ page.lang ] | downcase }}
           {% endif %}
           <ul>
-          {% for child in component.gcweb.children %}
-            {% case child.nodeType %}
-              {% when 1 %}
             <li>
-              <code>&lt;{{ child.nodeName | downcase }}&gt;</code><br>
-              <ul>
-              {% for rule in child.computedStyles %}
-                <li>{{ rule[0] }}: 
-                  {% if rule[1] contains "rgb" %}
-                    <span class="color-indicator" style="background-color: {{ rule[1] }};"></span> <code>{{ rule[1] }}</code>
-                  {% else %}
-                    <code>{{ rule[1] }}</code>
-                  {% endif %}
-                </li>
-              {% endfor %}
-              </ul>
+              {% assign dom = component.gcweb.children[0] %}
+              <code>&lt;{{ dom.nodeName | downcase }}&gt;</code>
+              {% if dom.children %}
+                <ul>
+                  {% include recursive_list.liquid items=dom.children %}
+                </ul>
+              {% endif %}
             </li>
-              {% when 2 %}
-            <li><code>{{ child.nodeName }}</code></li>
-              {% when 3 %}
-            <li><code>{{ child.nodeName | remove_first: '#' }}</code></li>
-              {% else %}
-            <li>{{ child.nodeName }}</li>
-            {% endcase %}
-          {% endfor %}
           </ul>
+
         </dd>
       </dl> 
     </div>

diff --git a/en/index.md b/en/index.md
@@ -5,25 +5,10 @@ title: Mandatory elements
 <div class="container">
   <div class="row">
     <p class="mrgn-tp-lg" property="description">List of Canada.ca GC mandatory elements: differences between Canada.ca DS and GC Design System. Their rationale should be explained in the documentation of each pattern.</p>
-
-    <h2>Todo</h2>
-    <div class="checkbox gc-chckbxrdio">
-      <input id="todo1" type="checkbox" checked /><label for="todo1">Decide on the format of the rationale</label>
-    </div>
-    <div class="checkbox gc-chckbxrdio">
-      <input id="todo2" type="checkbox" /><label for="todo2">Add the rationale to the documentation of each pattern</label>
-    </div>
-    <div class="checkbox gc-chckbxrdio">
-      <input id="todo3" type="checkbox" /><label for="todo3">Leverage <code>_data</code> files to store the rationale</label>
-    </div>
-    <div class="checkbox gc-chckbxrdio">
-      <input id="todo4" type="checkbox" /><label for="todo4">Figure out how to manage multiple languages (English and French)</label>
-    </div>
-    <p>Link to the <a href="parser.html">parser</a></p>
     <h2>Table of mandatory elements</h2>
     {% for collection in site.collections %}
       {%- unless collection.label contains "posts" -%}
-    <table class="wb-tables table mrgn-bttm-lg" data-wb-tables='{"ordering" : true, "dom":"<>"}'>
+    <table class="wb-tables table mrgn-bttm-lg" data-wb-tables='{"ordering" : true }'>
       <caption class="bg-info text-left">{{ collection.label }}</caption>
       <thead>
         <tr>
@@ -45,4 +30,6 @@ title: Mandatory elements
       {%- endunless -%}
     {% endfor %}
   </div>
-</div>
+</div>
+
+<p>Link to the <a href="parser.html">parser</a></p>
diff --git a/en/parser.md b/en/parser.md
@@ -8,7 +8,7 @@ title: Export Detailed DOM Info to JSON
 ---
 <div class="row">
   <div class="col-md-6">
-    <p>Some description</p>
+    <p>This tool allows you to analyze a DOM node by providing detailed information about its CSS and HTML relationships. It helps you understand how different elements are styled and structured within the node.</p>
     <label for="patternName">Pattern Name:</label>
     <input type="text" id="patternName" placeholder="Enter pattern name" required>
     <fieldset class="gc-chckbxrdio">
@@ -28,8 +28,9 @@ title: Export Detailed DOM Info to JSON
     <iframe id="renderFrame" class="mrgn-tp-lg" style="display:block; border: none; width: 100%; height: 300px;"></iframe>
   </div>
   <div class="col-md-6">
+    <h2>JSON Preview</h2>
     <pre id="jsonPreview" style="white-space: pre-wrap; border: 1px solid #ccc; padding: 10px; margin-top: 10px;"></pre>
-    <!-- <button id="export">Export JSON file</button> -->
+    <button id="export">Export JSON file</button>
   </div>
 </div>
 <script>

diff --git a/patterns/_components/button/danger.md b/patterns/_components/button/danger.md
@@ -4,6 +4,7 @@ dateModified: 2024-06-17
 dependency: None
 lang: en
 layout: side-by-side
-status: "For review"
+status: "Reviewed (completed)"
 title: Danger button
+zenhub-issue: 958
 ---