Add new files and directories for Jekyll website

gc-proto · Jun 25, 2024 · 43d033e · 43d033e
1 parent 015f8f8
commit 43d033e
Show file tree

Hide file tree

Showing 15 changed files with 62 additions and 109 deletions.
diff --git a/_data/button-signin.json b/_data/button-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/_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-tickets:
+  en: ZenHub issue
+  fr: Ticket ZenHub
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">
@@ -92,33 +94,19 @@ <h2>{{ side-by-side.node-relationship[ page.lang ] }}</h2>
           {% else %}
             {{ 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
@@ -6,4 +6,5 @@ lang: en
 layout: side-by-side
 status: "For review"
 title: Danger button
+zenhub-issue: 958
 ---
diff --git a/patterns/_components/button/disabled.md b/patterns/_components/button/disabled.md
@@ -6,4 +6,5 @@ lang: en
 layout: side-by-side
 status: "For review"
 title: Disabled button
+zenhub-issue: 958
 ---
diff --git a/patterns/_components/button/link.md b/patterns/_components/button/link.md
@@ -6,4 +6,5 @@ lang: en
 layout: side-by-side
 status: "For review"
 title: Link button
+zenhub-issue: 958
 ---
diff --git a/patterns/_components/button/primary.md b/patterns/_components/button/primary.md
@@ -6,4 +6,5 @@ lang: en
 layout: side-by-side
 status: "For review"
 title: Primary button
+zenhub-issue: 958
 ---
diff --git a/patterns/_components/button/secondary.md b/patterns/_components/button/secondary.md
@@ -6,4 +6,5 @@ lang: en
 layout: side-by-side
 status: "For review"
 title: Secondary button
+zenhub-issue: 958
 ---
diff --git a/patterns/_components/button/signin.md b/patterns/_components/button/signin.md
@@ -5,5 +5,5 @@ dependency: None
 lang: en
 layout: side-by-side
 status: "For review"
-title: Sign in button
+title: Sign in pattern
 ---
diff --git a/patterns/_components/button/small.md b/patterns/_components/button/small.md
@@ -6,4 +6,5 @@ lang: en
 layout: side-by-side
 status: "For review"
 title: Small button
+zenhub-issue: 958
 ---
diff --git a/patterns/_components/button/supertask.md b/patterns/_components/button/supertask.md
@@ -6,6 +6,7 @@ lang: en
 layout: side-by-side
 status: "For review"
 title: Supertask button
+zenhub-issue: 958
 ---
 ## Decision rational
 What are we going to do?

diff --git a/patterns/_components/links.md b/patterns/_components/links.md
@@ -6,6 +6,7 @@ lang: en
 layout: side-by-side
 status: "Reviewed (completed)"
 title: Links
+zenhub-issue: 957
 ---
 ## Decision rational
 What are we going to do?