fix: add templates as static for storybook prod build (#199)

examples/wagtail/core/jinja/home_page.jinja

@@ -2,7 +2,7 @@
 {% from 'link/link.html' import govieLink %}
 {% from 'footer/footer.html' import govieFooter %}
 {% from 'heading/heading.html' import govieHeading %}
-{% from 'paragraph/macro.html' import govieParagraph %}
+{% from 'paragraph/paragraph.html' import govieParagraph %}
 
 {% from 'vars.jinja' import footerProps %}
 

packages/html/storybook/.storybook/main.ts

@@ -15,6 +15,7 @@ const config: StorybookConfig = {
     name: '@storybook/react-vite',
     options: {},
   },
+  staticDirs: ['../static'],
   async viteFinal(config, { configType }) {
     const { mergeConfig } = await import('vite');
 

packages/html/storybook/.storybook/preview.tsx

@@ -17,14 +17,17 @@ export const decorators = [
       destroyGovIe();
       initGovIe();
     }, []);
+    const { args, parameters } = context;
+    parameters.macro.path = './macros';
 
     const storyResult = Story(context);
 
     if (typeof storyResult === 'string') {
       return <div dangerouslySetInnerHTML={{ __html: storyResult }} />;
     }
 
-    return storyResult;
+    const renderedMacro = renderMacro(parameters.macro)(args);
+    return <div dangerouslySetInnerHTML={{ __html: renderedMacro }} />;
   },
 ];
 
@@ -53,6 +56,7 @@ const preview: Preview = {
             throw new Error('No name found in macro.');
           }
 
+          parameters.macro.path = './macros';
           const renderedMacro = renderMacro(parameters.macro)(args);
 
           const macroOptions = JSON.stringify(args, null, 2);

packages/html/storybook/static/macros/footer/footer.html

@@ -0,0 +1,57 @@
+{% macro govieFooter(props) %}
+
+{% from 'heading/heading.html' import govieHeading %}
+{% from 'footer/helpers.html' import hasTwoCols,hasTwoColsLinks, govieFooterLink %}
+
+<footer class="gi-bg-gold-50 gi-p-x-xl gi-py-3xl gi-border-solid gi-border-t-xs gi-border-gold-500 gi-pt-3xl gi-pb-2xl" data-module="gieds-footer">
+  {# TODO: Use Container component #}
+  <div class="gi-w-5/6 gi-m-auto gi-max-w-screen-lg">
+    <div>
+      {# secondary nav links #}
+      <div class="gi-grid sm:gi-grid-flow-col gi-grid-flow-row gi-gap-2xl">
+        {% if props.secondaryNavLinks %}
+          {% for linkObj in props.secondaryNavLinks %}
+            <div class="{{ hasTwoCols(linkObj.hasTwoCols) | trim }}">
+              {{
+                govieHeading({
+                  "text": linkObj.heading,
+                  "tag": "h2",
+                  "size": "lg"
+                })
+              }}
+              <ul class="gi-border-solid gi-border-t gi-border-gold-500 gi-mt-2xl gi-pt-xl {{ hasTwoColsLinks(linkObj.hasTwoCols) | trim }}">
+                {% for link in linkObj.links %}
+                  <li class="gi-mb-xl">
+                    {{ govieFooterLink({
+                        "href" : link.href,
+                        "label" : link.label
+                      })
+                    }}
+                  </li>
+                {% endfor %}
+              </ul>
+            </div>
+          {% endfor %}
+        {% endif %}
+      </div>
+      {# main links #}
+      <ul class="gi-mt-2xl gi-flex gi-gap-lg gi-mb-xl">
+        {% if props.links %}
+          {% for link in props.links %}
+            <li data-testid=main-link-{{loop.index0}}>
+              {{ govieFooterLink({
+                "href" : link.href,
+                "label" : link.label
+                })
+              }}
+            </li>
+          {% endfor %}
+        {% endif %}
+      </ul>
+      <div class="gi-flex gi-items-end gi-justify-between">
+        <img class="gi-ml-auto" alt="Gov IE Logo" width="190" src="https://ds.blocks.gov.ie/_next/static/media/logo.a6bf00ac.png" />
+      </div>
+    </div>
+  </div>
+</footer>
+{% endmacro %}

packages/html/storybook/static/macros/footer/helpers.html

@@ -0,0 +1,15 @@
+{% macro hasTwoCols(twoCols) %}
+  {% if twoCols %}
+    sm:gi-col-span-2
+  {% endif %}
+{% endmacro %}
+
+{% macro hasTwoColsLinks(twoCols) %}
+  {% if twoCols %}
+    sm:gi-columns-2
+  {% endif %}
+{% endmacro %}
+
+{% macro govieFooterLink(props) %}
+  <a class="gi-underline gi-underline-offset-sm" href="{{ props.href }}">{{ props.label }}</a>
+{% endmacro %}

packages/html/storybook/static/macros/header/header.html

@@ -0,0 +1,33 @@
+{% macro govieHeader(props) %}
+<header data-module="gieds-header" class="gi-flex gi-flex-col">
+  <div
+    class="gi-flex gi-justify-between gi-p-xl gi-bg-emerald-800 gi-text-white"
+  >
+    <div>
+      <p>{{props.title}}</p>
+    </div>
+    <button
+      class="gi-bg-emerald-800"
+      data-element="search"
+      data-testid="search"
+    >
+
+    </button>
+  </div>
+  <div
+    class="js:gi-max-height gi-bg-gold-200 gi-overflow-hidden"
+    data-element="container"
+    data-testid="container"
+  >
+    <div class="gi-p-xl">
+      <div class="gi-flex gi-gap-md">
+        <label for="search">Search</label>
+        <input id="search" type="text" />
+        <button class="gi-bg-emerald-800 gi-text-white gi-p-md gi-rounded">
+
+        </button>
+      </div>
+    </div>
+  </div>
+</header>
+{% endmacro %}

packages/html/storybook/static/macros/heading/heading.html

@@ -0,0 +1,44 @@
+{% macro govieHeading(props) %} 
+
+{% macro caption(value='') %}
+{% if value %}
+<span data-testid="govie-heading-caption" class="gi-text-gray-500">{{value}}</span>
+{% endif %}
+{% endmacro %}
+
+{% macro getClases(size) %}
+{% if '2xs' in size %}
+xs:gi-text-2xs md:gi-text-2xs xl:gi-text-2xs gi-font-bold
+{% elif 'xs' in size %}
+xs:gi-text-xs md:gi-text-xs xl:gi-text-xs gi-font-bold
+{% elif 'sm' in size %}
+xs:gi-text-sm md:gi-text-sm xl:gi-text-md gi-font-bold
+{% elif 'md' in size %}
+xs:gi-text-sm md:gi-text-md xl:gi-text-lg gi-font-bold
+{% elif 'lg' in size %}
+xs:gi-text-lg md:gi-text-xl xl:gi-text-2xl gi-font-bold
+{% elif 'xl' in size %}
+xs:gi-text-2xl md:gi-text-3xl xl:gi-text-4xl gi-font-bold
+{% endif %}
+{% endmacro %}
+
+{% if "h1" in props.tag %}
+{{caption(props.caption)}}<h1 class="{{getClases(props.size)}}">{{props.text}} </h1>
+
+{% elif "h2" in props.tag %}
+{{caption(props.caption)}}<h2 class="{{getClases(props.size)}}">{{props.text}}</h2>
+
+{% elif "h3" in props.tag %}
+{{caption(props.caption)}}<h3 class="{{getClases(props.size)}}">{{props.text}}</h3>
+
+{% elif "h4" in props.tag %}
+{{caption(props.caption)}}<h4 class="{{getClases(props.size)}}">{{props.text}}</h4>
+
+{% elif "h5" in props.tag %}
+{{caption(props.caption)}}<h5 class="{{getClases(props.size)}}">{{props.text}}</h5>
+
+{% elif "h6" in props.tag %}
+{{caption(props.caption)}}<h6 class="{{getClases(props.size)}}">{{props.text}}</h6>
+
+{% endif %}
+{% endmacro %}

packages/html/storybook/static/macros/link/link.html

@@ -0,0 +1,39 @@
+{% macro govieLink(props) %}
+  {% macro getUnderlineClass(noUnderline) %}
+    {% if not noUnderline %}
+      gi-underline
+      gi-underline-offset-[0.1em]
+      focus:gi-no-underline
+    {% endif %}
+  {% endmacro %}
+  {% macro getVisitedClass(noVisited) %}
+    {% if noVisited %}
+      visited:gi-text-blue-700
+    {% else %}
+      visited:gi-text-purple-700
+    {% endif %}
+  {% endmacro %}
+  {% macro getExternalAttribute(isExternal) %}
+    {% if isExternal %}
+      rel="noreferrer noopener" target="_blank"
+    {% endif %}
+  {% endmacro %}
+  <a
+    href="{{ props.href }}"
+    {{ getExternalAttribute(props.external) | trim }}
+    class="
+      {{ getUnderlineClass(props.noUnderline) | trim }}
+      {{ getVisitedClass(props.noVisited) | trim }}
+      gi-text-blue-700
+      hover:gi-text-blue-800
+      hover:gi-decoration-[max(3px,0.1875rem,0.12em)]
+      focus:gi-outline
+      focus:gi-text-gray-950
+      focus:gi-outline-transparent
+      focus:gi-bg-yellow-400
+      focus:gi-outline-[3px]
+      focus:gi-shadow-[0_-2px_var(--gieds-color-yellow-400),0_4px_var(--gieds-color-gray-900)]
+    "
+  >{{ props.label }}</a>
+
+{% endmacro %}

packages/html/storybook/static/macros/paragraph/paragraph.html

@@ -0,0 +1,19 @@
+{% macro govieParagraph(props) %}
+  {% macro getSizeClass(size) %}
+    {% if size == 'lg' %}
+      xs:gi-text-lg md:gi-text-lg xl:gi-text-xl
+    {% elif size == 'md' %}
+      xs:gi-text-md md:gi-text-md xl:gi-text-lg
+    {% else %}
+      xs:gi-text-sm md:gi-text-sm xl:gi-text-md
+    {% endif %}
+  {% endmacro %}
+
+  {% if props.as == 'p' %}
+    <p class="{{ getSizeClass(props.size) | trim }} gi-mt-0 gi-mb-[var(--gieds-space-8)] gi-max-w-[65ch]">{{ props.content }}</p>
+  {% elif props.as == 'span' %}
+    <span class="{{ getSizeClass(props.size) | trim }}">{{ props.content }}</span>
+  {% else %}
+    <p class="{{ getSizeClass(props.size) | trim }} gi-mt-0 gi-mb-[var(--gieds-space-8)] gi-max-w-[65ch]">{{ props.content }}</p>
+  {% endif %}
+{% endmacro %}