cja-phoenix 0.7.2 → 0.7.4

package/src/components/composite/CjaFooter.vue

@@ -1,223 +0,0 @@
-<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>

package/src/types/Footer.ts

@@ -1,17 +0,0 @@
-import { StoryLink } from "./Storyblok";
-
-interface FooterLink {
-  text: string;
-  link: StoryLink;
-}
-
-export interface FooterCategory {
-  text: string;
-  link?: StoryLink;
-  subLinks?: FooterLink[];
-}
-
-export interface SocialLink {
-  socialNetwork: string;
-  link: StoryLink;
-}

package/src/types/Storyblok.ts

@@ -1,10 +0,0 @@
-export interface StoryLink {
-  linktype: "url" | "story" | "asset" | "email";
-  url?: string;
-  target?: HTMLAnchorElement["target"];
-  story?: {
-    url: string;
-    slug: string;
-    full_slug: string;
-  };
-}

package/src/utils/storyblokLink.ts

@@ -1,4 +0,0 @@
-import { StoryLink } from "../types/Storyblok";
-
-export const getStoryblokUrl = (link: StoryLink) =>
-  link.linktype == "story" ? `/${link.story?.url}` : link.url;