feat: footer component (#187)

Co-authored-by: hamza14khan <hamzaubit14@gmail.com> Co-authored-by: Hamza Khan <164040832+hamza14khan@users.noreply.github.com> Co-authored-by: Andrea Pregnolato <andrea.pregnolato@nearform.com>
ogcio · Sep 4, 2024 · 49ad582 · 49ad582
1 parent c74949c
commit 49ad582
Show file tree

Hide file tree

Showing 11 changed files with 335 additions and 12 deletions.
diff --git a/examples/wagtail/core/jinja/home_page.jinja b/examples/wagtail/core/jinja/home_page.jinja
@@ -1,6 +1,9 @@
-{% from 'govie/header/macro.html' import govieHeader %}
-{% from 'govie/heading/macro.html' import govieHeading %}
-{% from 'govie/link/macro.html' import govieLink %}
+{% from 'header/header.html' import govieHeader %}
+{% from 'link/link.html' import govieLink %}
+{% from 'footer/footer.html' import govieFooter %}
+{% from 'heading/heading.html' import govieHeading %}
+
+{% from 'vars.jinja' import footerProps %}
 
 <!DOCTYPE html>
 <html lang="en">
@@ -31,6 +34,12 @@
     }}
     <h2>Link (Local)</h2>
     <a class="govie-link" href="#">Link for testing</a>
+     <h2>Footer (Local)</h2>
+     <footer class="govie-footer"></footer>
+     <h2>Footer (Global)</h2>
+     {{ 
+        govieFooter(footerProps)
+     }}
     <script src="{{ static('js/govie-frontend.umd.js') }}"></script>
 </body>
 

diff --git a/examples/wagtail/core/jinja/vars.jinja b/examples/wagtail/core/jinja/vars.jinja
@@ -0,0 +1,41 @@
+{% set footerProps = {
+  "links": [
+    {
+      "href": "#",
+      "label": "Link 1",
+    },
+    {
+      "href": "#",
+      "label": "Link 2",
+    },
+    {
+      "href": "#",
+      "label": "Link 3",
+    },
+  ],
+  "secondaryNavLinks": [
+    {
+      "heading": "Heading",
+      "hasTwoCols": true,
+      "links": [
+        {
+          "href": "#",
+          "label": "Nav Link 1",
+        },
+        {
+          "href": "#",
+          "label": "Nav Link 2",
+        },
+        {
+          "href": "#",
+          "label": "Nav Link 3",
+        },
+        {
+          "href": "#",
+          "label": "Nav Link 4",
+        },
+      ],
+    },
+  ],
+}
+%}
diff --git a/examples/wagtail/core/settings/base.py b/examples/wagtail/core/settings/base.py
@@ -81,7 +81,7 @@
         'APP_DIRS': True,
         "DIRS": [
             os.path.join(PROJECT_DIR, "jinja"),
-            os.path.join(PROJECT_DIR, "../node_modules/@govie-frontend/ds/macros/jinja/dev"),
+            os.path.join(PROJECT_DIR, "../node_modules/@govie-frontend/ds/macros/jinja/dev/govie"),
         ],
         'OPTIONS': {
             'extensions': [

diff --git a/packages/html/ds/scripts/build-properties.ts b/packages/html/ds/scripts/build-properties.ts
@@ -24,9 +24,8 @@ function toType(typeName: string): MacroPropertyType {
     case 'ZodBoolean': {
       return 'boolean';
     }
-    case 'ZodNativeEnum': {
-      return 'array';
-    }
+    case 'ZodArray':
+    case 'ZodNativeEnum':
     case 'ZodEnum': {
       return 'array';
     }

diff --git a/packages/html/ds/scripts/process-macros-plugin.ts b/packages/html/ds/scripts/process-macros-plugin.ts
@@ -37,7 +37,7 @@ export function processMacrosPlugin() {
 
           const destinationPath = path.resolve(
             destinationDirectory,
-            file.replace(path.basename(file), 'macro.html'),
+            file,
           );
 
           const updatedContent =

diff --git a/packages/html/ds/src/footer/footer.html b/packages/html/ds/src/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 %}
diff --git a/packages/html/ds/src/footer/footer.schema.ts b/packages/html/ds/src/footer/footer.schema.ts
@@ -0,0 +1,53 @@
+import * as zod from 'zod';
+
+export const footerSchema = zod.object({
+  links: zod
+    .object({
+      label: zod.string({
+        description: 'The label of the link',
+        required_error: 'The label is required',
+      }),
+      href: zod.string({
+        description: 'The url (href) of the link',
+        required_error: 'The url is required',
+      }),
+    })
+    .array()
+    .optional()
+    .describe(
+      'Array of main links used in Footer. The links use the govieLink component therefore the properties are inhertied from govieLink',
+    ),
+  secondaryNavLinks: zod
+    .object({
+      hasTwoCols: zod
+        .boolean({
+          description: 'Enable two column grid for navigation links',
+        })
+        .optional(),
+      heading: zod.string({
+        description: 'Heading for the column of links',
+      }),
+      links: zod
+        .object({
+          label: zod.string({
+            description: 'The label of the link',
+            required_error: 'The label is required',
+          }),
+          href: zod.string({
+            description: 'The url (href) of the link',
+            required_error: 'The url is required',
+          }),
+        })
+        .array()
+        .describe(
+          'Array of secondary navigation links used in Footer. The links use the govieLink component therefore the properties are inhertied from govieLink',
+        ),
+    })
+    .array()
+    .optional()
+    .describe(
+      'Array of secondaryNavLink object which includes heading, the ability to display the link on two columns and the navigation links',
+    ),
+});
+
+export type FooterProps = zod.infer<typeof footerSchema>;
diff --git a/packages/html/ds/src/footer/footer.stories.ts b/packages/html/ds/src/footer/footer.stories.ts
@@ -0,0 +1,146 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { renderComponent } from '../storybook/storybook';
+import html from './footer.html?raw';
+import { FooterProps } from './footer.schema';
+
+// Name of the folder the macro resides
+const path = import.meta.url.split('/footer')[0];
+
+const macro = { name: 'govieFooter', html, path };
+
+const Footer = renderComponent<FooterProps>(macro);
+
+const meta = {
+  component: Footer,
+  title: 'Layout/Footer',
+  parameters: {
+    macro,
+  },
+} satisfies Meta<typeof Footer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithLinks: Story = {
+  args: {
+    links: [
+      {
+        href: '#',
+        label: 'Link 1',
+      },
+      {
+        href: '#',
+        label: 'Link 2',
+      },
+      {
+        href: '#',
+        label: 'Link 3',
+      },
+    ],
+  },
+};
+
+export const WithSecondaryNavigation: Story = {
+  args: {
+    secondaryNavLinks: [
+      {
+        heading: 'Heading',
+        links: [
+          {
+            href: '#',
+            label: 'Link 1',
+          },
+          {
+            href: '#',
+            label: 'Link 2',
+          },
+          {
+            href: '#',
+            label: 'Link 3',
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export const WithSecondaryNavigationTwoColumns: Story = {
+  args: {
+    secondaryNavLinks: [
+      {
+        heading: 'Heading 1',
+        links: [
+          {
+            href: '#',
+            label: 'Link 1',
+          },
+          {
+            href: '#',
+            label: 'Link 2',
+          },
+          {
+            href: '#',
+            label: 'Link 3',
+          },
+        ],
+      },
+      {
+        heading: 'Heading 2',
+        links: [
+          {
+            href: '#',
+            label: 'Link 4',
+          },
+          {
+            href: '#',
+            label: 'Link 5',
+          },
+          {
+            href: '#',
+            label: 'Link 6',
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export const WithSecondaryNavigationAndLinks: Story = {
+  args: {
+    links: [
+      {
+        href: '#',
+        label: 'Link 1',
+      },
+      {
+        href: '#',
+        label: 'Link 2',
+      },
+      {
+        href: '#',
+        label: 'Link 3',
+      },
+    ],
+    secondaryNavLinks: [
+      {
+        heading: 'Heading',
+        links: [
+          {
+            href: '#',
+            label: 'Link 1',
+          },
+          {
+            href: '#',
+            label: 'Link 2',
+          },
+          {
+            href: '#',
+            label: 'Link 3',
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/packages/html/ds/src/footer/helpers.html b/packages/html/ds/src/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 %}
diff --git a/packages/html/ds/src/storybook/storybook.tsx b/packages/html/ds/src/storybook/storybook.tsx
@@ -8,7 +8,8 @@ export function renderComponent<TProps = unknown>({
   html: string;
 }) {
   return function (props: TProps) {
-    const renderedMacro = renderMacro({ name, html })(props);
+    const path = import.meta.url.split('/storybook')[0];
+    const renderedMacro = renderMacro({ name, html, path })(props);
     return <div dangerouslySetInnerHTML={{ __html: renderedMacro }} />;
   };
 }