Merge pull request #401 from significa/feat/footer-logo

feat(footer): client logo
significa · Sep 10, 2024 · d7fabca · d7fabca
2 parents a3cd43f + c34d4cc
commit d7fabca
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 12 deletions.
diff --git a/components.198185.json b/components.198185.json
@@ -1698,27 +1698,42 @@
       "name": "configuration",
       "display_name": null,
       "created_at": "2023-03-13T17:47:31.124Z",
-      "updated_at": "2024-02-23T10:41:20.263Z",
+      "updated_at": "2024-09-06T13:21:46.635Z",
       "id": 3575812,
       "schema": {
         "primary_navigation": {
           "type": "options",
           "source": "internal_stories",
-          "max_options": "4"
+          "max_options": "4",
+          "key": "primary_navigation",
+          "pos": 0
         },
         "call_to_action": {
           "type": "bloks",
           "minimum": 1,
           "maximum": 1,
           "restrict_type": "",
           "restrict_components": true,
-          "component_whitelist": ["link"]
+          "component_whitelist": ["link"],
+          "key": "call_to_action",
+          "pos": 1
         },
         "footer": {
           "type": "bloks",
           "restrict_type": "",
           "restrict_components": true,
-          "component_whitelist": ["footer-column-internal", "footer-column-external"]
+          "component_whitelist": ["footer-column-internal", "footer-column-external"],
+          "key": "footer",
+          "pos": 2
+        },
+        "footer_logo": {
+          "type": "bloks",
+          "pos": 3,
+          "restrict_type": "",
+          "restrict_components": true,
+          "component_whitelist": ["client-logo"],
+          "maximum": 1,
+          "key": "logo"
         }
       },
       "image": null,
@@ -2310,7 +2325,7 @@
       "name": "handbook",
       "display_name": null,
       "created_at": "2023-02-15T13:50:12.113Z",
-      "updated_at": "2024-09-03T10:57:35.051Z",
+      "updated_at": "2024-09-04T14:38:25.847Z",
       "id": 3442773,
       "schema": {
         "last_updated": {
@@ -2412,21 +2427,17 @@
             "italic",
             "strike",
             "underline",
-            "inlinecode",
             "paragraph",
             "h2",
             "list",
             "olist",
             "quote",
             "link",
             "hrule",
-            "blok",
             "h3",
             "h4",
-            "redo",
-            "undo",
-            "paste-action",
-            "image"
+            "blok",
+            "inlinecode"
           ],
           "key": "body",
           "pos": 7

diff --git a/src/components/footer.svelte b/src/components/footer.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  import { getAnchorFromCmsLink } from '$lib/utils/cms';
+  import { getAnchorFromCmsLink, getImageAttributes } from '$lib/utils/cms';
   import { sanitizeSlug } from '$lib/utils/paths';
   import type { ConfigurationStoryblok } from '$types/bloks';
   import { Badge, Link, Logo } from '@significa/svelte-ui';
   import Slogan from './slogan.svelte';
   import { intersectionObserver } from '@significa/svelte-ui/actions';
+  import { theme } from '$lib/stores/theme';
 
   export let configuration: ConfigurationStoryblok;
   let animate = false;
@@ -27,6 +28,24 @@
       >
         <Slogan {animate} class="mt-32 hidden font-bold md:block" />
       </span>
+      {#if !!configuration.footer_logo?.length}
+        <div class="hidden gap-2 h-9 mt-11 lg:flex">
+          {#each configuration.footer_logo || [] as logo}
+            {#if logo.light_mode?.filename && $theme === 'light'}
+              {@const { src, alt, width, height } = getImageAttributes(logo.light_mode, {
+                size: [0, 72]
+              })}
+              <img {src} {alt} {width} {height} class="h-auto max-h-9 w-auto object-contain" />
+            {/if}
+            {#if logo.dark_mode?.filename && $theme === 'dark'}
+              {@const { src, alt, width, height } = getImageAttributes(logo.dark_mode, {
+                size: [0, 72]
+              })}
+              <img {src} {alt} {width} {height} class="h-auto max-h-9 w-auto object-contain" />
+            {/if}
+          {/each}
+        </div>
+      {/if}
     </div>
 
     <div class="col-span-8 flex flex-col gap-8 xs:flex-row md:col-span-5 lg:col-span-4">
@@ -68,6 +87,25 @@
           </ul>
         </div>
       {/each}
+
+      {#if !!configuration.footer_logo?.length}
+        <div class="flex gap-2 h-9 lg:hidden">
+          {#each configuration.footer_logo || [] as logo}
+            {#if logo.light_mode?.filename && $theme === 'light'}
+              {@const { src, alt, width, height } = getImageAttributes(logo.light_mode, {
+                size: [0, 72]
+              })}
+              <img {src} {alt} {width} {height} class="h-auto max-h-9 w-auto object-contain" />
+            {/if}
+            {#if logo.dark_mode?.filename && $theme === 'dark'}
+              {@const { src, alt, width, height } = getImageAttributes(logo.dark_mode, {
+                size: [0, 72]
+              })}
+              <img {src} {alt} {width} {height} class="h-auto max-h-9 w-auto object-contain" />
+            {/if}
+          {/each}
+        </div>
+      {/if}
     </div>
   </div>
 

diff --git a/src/types/bloks.d.ts b/src/types/bloks.d.ts
@@ -437,6 +437,7 @@ export interface ConfigurationStoryblok {
   primary_navigation?: any[];
   call_to_action?: LinkStoryblok[];
   footer?: (FooterColumnInternalStoryblok | FooterColumnExternalStoryblok)[];
+  footer_logo?: ClientLogoStoryblok[];
   _uid: string;
   component: 'configuration';
   [k: string]: any;