205 combine macros and templates into one file (#269)

* Combine templates and macros into one file so Jinja wont complain about caller, and create test templates for unit tests

* Update example macro and subnavigation macro

* Ensure npm bundler doesnt deploy test templates

lib/generate-npm-package.js

@@ -46,7 +46,9 @@ async function copyComponent(componentName) {
     const componentPath = `${componentsPath}/${componentName}`;
     const newComponentPath = `${newComponentsPath}/${componentName}`;
 
-    const items = await fs.readdirSync(componentPath).filter(path => path.includes('.njk') && path.includes('_'));
+    const items = await fs
+      .readdirSync(componentPath)
+      .filter(path => path.includes('.njk') && path.includes('_') && !path.includes('_test-'));
 
     if (items.length) {
       await createFolder(newComponentPath);

lib/helpers/generate-example-params.js

@@ -20,7 +20,7 @@ export function generateExampleParams(params, addDependency) {
 
     const srcPath = params.componentFolderPath ? `${sourcePath}/${params.componentFolderPath}/` : `${path.split('/examples/')[0]}/`;
     const optionsPath = `${srcPath}_macro-options.md`;
-    const templatePath = `${srcPath}_template.njk`;
+    const macroPath = `${srcPath}_macro.njk`;
 
     let options;
     let scss;
@@ -48,9 +48,9 @@ export function generateExampleParams(params, addDependency) {
       scss = sassRaw.join('\n');
     }
 
-    if (fs.existsSync(templatePath)) {
-      addDependency(templatePath);
-      template = `{% raw %}${fs.readFileSync(templatePath, 'utf8')}{% endraw %}`;
+    if (fs.existsSync(macroPath)) {
+      addDependency(macroPath);
+      template = `{% raw %}${fs.readFileSync(macroPath, 'utf8')}{% endraw %}`;
     }
 
     const loader = new NunjucksLoader(sourcePath);

src/components/accordion/_macro.njk

@@ -1,3 +1,36 @@
 {% macro onsAccordion(params) %}
-    {% include "components/accordion/_template.njk" %}
+    {% from "components/details/_macro.njk" import onsDetails %}
+
+    <div id="{{params.id}}" class="accordion{{ ' ' + params.classes if params.classes }}">
+        {% if params.openAll and params.closeAll %}
+            {% from "components/button/_macro.njk" import onsButton %}
+            {{
+                onsButton({
+                    "text": params.openAll,
+                    "classes": "btn--secondary btn--small js-collapsible-all u-wa--@xs u-mb-s u-d-no",
+                    "attributes": {
+                        "data-ga": "click",
+                        "data-ga-category": "accordion",
+                        "data-ga-action": "Toggle all panels",
+                        "data-ga-label": params.openAll,
+                        "data-close-all": params.closeAll,
+                        "data-group": params.id
+                    }
+                })
+            }}
+        {% endif %}
+        {% for item in params.items %}
+            {{
+                onsDetails({
+                    "isAccordion": true,
+                    "id": params.id + "-" + loop.index,
+                    "buttonOpen": params.buttonOpen,
+                    "closeButton": params.closeButton,
+                    "title": item.title,
+                    "content": item.content,
+                    "group": params.id
+                })
+            }}
+        {% endfor %}
+    </div>
 {% endmacro %}

src/components/accordion/_test-template.njk

@@ -0,0 +1,3 @@
+{% from "components/accordion/_macro.njk" import onsAccordion %}
+
+{{ onsAccordion(params) }}

src/components/breadcrumb/_macro.njk

@@ -1,3 +1,15 @@
 {% macro onsBreadcrumb(params) %}
-  {% include "components/breadcrumb/_template.njk" %}
+  <nav class="breadcrumb" aria-label="{{params.ariaLabel}}">
+    <ol class="breadcrumb__items">
+        {% for item in params.items %}
+            <li class="breadcrumb__item u-fs-s{{ ' icon--breadcrumb' if loop.index < loop.length }}{{ '  breadcrumb__item--current' if item.current }}">
+                {% if item.current %} 
+                    {{ item.text }}
+                {% else %}
+                    <a href="{{ item.url }}" class="breadcrumb__link">{{ item.text }}</a>
+                {% endif %}
+            </li>
+        {% endfor %}
+    </ol>
+  </nav>
 {% endmacro %}

src/components/button/_macro.njk

@@ -1,3 +1,17 @@
 {% macro onsButton(params) %}
-  {% include "components/button/_template.njk" %}
+  {#- Define common attributes we can use for the toggle button type #}
+  {% set buttonToggleAttributes %} aria-haspopup="true" aria-expanded="false" aria-controls="{{ params.ariaControls }}" aria-label="{{ params.ariaLabel }}"{% endset %}
+
+  <button
+      type="{{ params.type if params.type else 'submit' }}"
+      class="btn{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} btn--disabled{% endif %}"
+      {% if params.id %}id="{{ params.id }}"{% endif %}
+      {% if params.value %}value="{{ params.value }}"{% endif %}
+      {% if params.name %}name="{{ params.name }}"{% endif %}
+      {% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}
+      {% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
+      {% if params.isToggle %}{{ buttonToggleAttributes | safe }}{% endif %}
+      >
+      {{- params.html | safe if params.html else params.text -}}
+  </button>
 {% endmacro %}

src/components/card/_macro.njk

@@ -1,3 +1,14 @@
 {%- macro onsCard(params) -%}
-{% include "components/card/_template.njk" %}
+    <div class="card">
+        <h3 class="u-fs-l">
+            {% if params.url -%}
+                <a href="{{ params.url }}">
+                    {{ params.title }}
+                </a>
+            {%- else %}
+                {{ params.title }}
+            {% endif %}
+        </h3>
+        <p>{{ params.text }}</p>
+    </div>
 {%- endmacro -%}

src/components/checkboxes/_macro.njk

@@ -1,3 +1,56 @@
 {% macro onsCheckboxes(params) %}
-    {% include "components/checkboxes/_template.njk" %}
+    {% from "components/field/_macro.njk" import onsField %}
+    {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
+
+    {% call onsField({
+        "id": params.id,
+        "legend": params.legend,
+        "description": params.description,
+        "classes": params.classes,
+        "mutuallyExclusive": params.mutuallyExclusive,
+        "legendClasses": params.legendClasses,
+        "questionMode": params.questionMode
+    }) %}
+        <div class="field__label">{{ params.checkboxesLabel }}</div>
+        <div class="field__items">
+            {% for checkbox in params.checkboxes %}
+                {% set labelHTML = checkbox.label.text %}
+                {% if params.mutuallyExclusive %}  
+                    {% set exclusiveClass = ' js-exclusive-group' %}
+                {% endif %}
+                <div class="field__item">
+                    {{
+                        onsCheckbox({
+                            "id": checkbox.id,
+                            "name": checkbox.name,
+                            "value": checkbox.value,
+                            "checked": checkbox.checked,
+                            "classes": checkbox.classes,
+                            "inputClasses": exclusiveClass,
+                            "label": {
+                                "for": checkbox.id,
+                                "text": labelHTML,
+                                "description": checkbox.label.description,
+                                "classes": checkbox.label.classes | default('') 
+                            },
+                            "attributes": checkbox.attributes,
+                            "other": {
+                                "id": checkbox.other.id,
+                                "name": checkbox.other.name,
+                                "type": checkbox.other.type,
+                                "classes": checkbox.other.classes | default('') + exclusiveClass | default(''),
+                                "attributes": checkbox.other.attributes,
+                                "label": {
+                                    "text": checkbox.other.label.text
+                                }
+                            }
+                        })
+                    }}
+                </div>
+                {% if not loop.last %}
+                    <br>
+                {% endif %}
+            {% endfor %}
+        </div>
+    {% endcall %}
 {% endmacro %}

src/components/checkboxes/_test-template.njk

@@ -0,0 +1,3 @@
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+{{ onsCheckboxes(params) }}