cja-phoenix 0.6.0 → 0.6.2

package/src/components/composite/CjaFooter.vue

@@ -0,0 +1,223 @@
+<template>
+  <footer class="main-footer-container" id="page-footer">
+    <div class="footer-wrapper">
+      <img class="footer-logo" :src="imageURL + 'CPJ-logo-header.svg'" />
+      <nav class="footer-navigation">
+        <Scaffold v-if="activeViewport.lg">
+          <div class="nav-column" v-for="navColumn in navGroups">
+            <div class="nav-group" v-for="category in navColumn">
+              <component
+                class="nav-group-title footer-link"
+                :is="category.link ? 'a' : 'div'"
+                :href="category.link ? getStoryblokUrl(category.link) : ''"
+                :target="category.link?.target"
+                >{{ category.text }}</component
+              >
+              <ul class="footer-link-list" v-if="category.subLinks?.length">
+                <li v-for="footerLink in category.subLinks">
+                  <a
+                    class="footer-link"
+                    :href="getStoryblokUrl(footerLink.link)"
+                    :target="footerLink.link.target"
+                    >{{ footerLink.text }}</a
+                  >
+                </li>
+              </ul>
+            </div>
+          </div>
+        </Scaffold>
+        <Scaffold v-else>
+          <Scaffold v-for="navColumn in navGroups">
+            <Scaffold v-for="category in navColumn">
+              <CollapseContainer v-if="category.subLinks?.length">
+                <template #header>
+                  <span class="nav-group-title">{{ category.text }}</span>
+                </template>
+                <template #content>
+                  <ul class="footer-link-list">
+                    <li v-if="category.link">
+                      <a
+                        class="footer-link"
+                        :href="getStoryblokUrl(category.link)"
+                        :target="category.link.target"
+                        >{{ category.text }}</a
+                      >
+                    </li>
+                    <li v-for="footerLink in category.subLinks">
+                      <a
+                        class="footer-link"
+                        :href="getStoryblokUrl(footerLink.link)"
+                        :target="footerLink.link.target"
+                        >{{ footerLink.text }}</a
+                      >
+                    </li>
+                  </ul>
+                </template>
+              </CollapseContainer>
+              <a
+                v-else-if="category.link"
+                class="nav-group-title footer-link"
+                :href="getStoryblokUrl(category.link)"
+                :target="category.link.target"
+                >{{ category.text }}</a
+              >
+            </Scaffold>
+          </Scaffold>
+        </Scaffold>
+      </nav>
+    </div>
+    <div class="social-links-container" v-if="socialLinks">
+      <h4>{{ socialLinksTitle }}</h4>
+      <ul class="social-links-list">
+        <li v-for="social in socialLinks">
+          <a
+            :class="[social.socialNetwork]"
+            :href="getStoryblokUrl(social.link)"
+            :target="social.link.target"
+          ></a>
+        </li>
+      </ul>
+    </div>
+  </footer>
+</template>
+
+<script lang="ts" setup>
+import { FooterCategory, SocialLink } from "../../types/Footer";
+import { getStoryblokUrl } from "../../utils/storyblokLink";
+import Scaffold from "../structural/Scaffold.vue";
+import CollapseContainer from "../structural/CollapseContainer.vue";
+import { useViewportDetector, useGlobalProperties } from "../../utils";
+
+withDefaults(
+  defineProps<{
+    navGroups: FooterCategory[][];
+    socialLinksTitle?: string;
+    socialLinks?: SocialLink[];
+  }>(),
+  {
+    socialLinksTitle: "Siga-nos nas redes sociais",
+  }
+);
+
+const { imageURL } = useGlobalProperties();
+
+const { activeViewport } = useViewportDetector();
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+
+.main-footer-container {
+  background: linear-gradient(
+      75.75deg,
+      rgba(7, 107, 156, 0.08) 0%,
+      rgba(255, 255, 255, 0) 100%
+    ),
+    #ffffff;
+
+  .footer-wrapper {
+    padding: 60px 32px;
+    max-width: 1170px;
+    margin: 0 auto;
+
+    .footer-logo {
+      display: block;
+      margin: 0 auto 40px;
+      width: 200px;
+    }
+  }
+
+  .footer-navigation {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 16px;
+    max-width: 400px;
+    margin: 0 auto;
+
+    @media screen and (min-width: $break-lg-min) {
+      grid-template-columns: repeat(4, 1fr);
+      max-width: none;
+      margin: 0;
+    }
+
+    .nav-column {
+      display: flex;
+      flex-direction: column;
+      gap: 40px;
+
+      .nav-group {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+    }
+
+    .nav-group-title {
+      display: block;
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 20px;
+    }
+
+    .footer-link {
+      color: inherit;
+
+      &:hover {
+        text-decoration: none;
+        color: #076b9c;
+      }
+    }
+
+    .footer-link-list {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      list-style: none;
+      margin: 0;
+      padding: 0 0 16px;
+
+      @media screen and (min-width: $break-lg-min) {
+        padding: 0;
+      }
+
+      li {
+        font-size: 14px;
+        line-height: 18px;
+      }
+    }
+  }
+
+  .social-links-container {
+    background: #fff;
+    box-shadow: 0px 4px 20px rgba(7, 107, 156, 0.1);
+    padding: 32px 24px;
+
+    h4 {
+      font-size: 24px;
+      line-height: 26px;
+      margin: 0 0 20px;
+      text-align: center;
+    }
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      gap: 20px;
+
+      a {
+        border: 2px solid #076b9c;
+        border-radius: 50%;
+        font-size: 36px;
+
+        &:hover {
+          text-decoration: none;
+        }
+      }
+    }
+  }
+}
+</style>