feat: table block

.eslintignore

@@ -6,6 +6,8 @@ node_modules
 .env
 .env.*
 !.env.example
+.json
+*.*.json
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

components.198185.json

@@ -2383,7 +2383,7 @@
       "display_name": null,
       "description": null,
       "created_at": "2023-02-15T13:50:12.113Z",
-      "updated_at": "2024-10-29T12:04:19.489Z",
+      "updated_at": "2024-12-17T17:14:30.609Z",
       "id": 3442773,
       "schema": {
         "last_updated": {
@@ -2419,28 +2419,33 @@
               "value": "4 – Working with Significa",
               "name": "4 – Working with Significa"
             },
+            {
+              "_uid": "c2236179-e11a-4d3a-9682-3be1baaa9956",
+              "value": "5 – Design",
+              "name": "5 – Design"
+            },
             {
               "_uid": "9f0de963-31cf-4244-8b4d-c7aa2f73f203",
-              "value": "5 – Engineering",
-              "name": "5 – Engineering"
+              "value": "6 – Engineering",
+              "name": "6 – Engineering"
             },
             {
               "_uid": "632875c1-4c19-4d6c-8659-0a93010c08c3",
-              "value": "6 – Strategy and product",
-              "name": "6 – Strategy and product"
+              "value": "7 – Strategy and product",
+              "name": "7 – Strategy and product"
             },
             {
               "_uid": "5a1a5ca6-a90e-4167-a9a1-12cfb35d0d90",
-              "value": "7 – Brand and Marketing",
-              "name": "7 – Brand and Marketing"
+              "value": "8 – Brand and Marketing",
+              "name": "8 – Brand and Marketing"
             }
           ],
           "description": "When adding new chapters they should follow the format: \"{N} – {Name}\" where N is the presentation order."
         },
         "cover": {
           "type": "asset",
           "filetypes": ["images"],
-          "asset_folder_id": 212287,
+          "asset_folder_id": 640205,
           "key": "cover",
           "pos": 2,
           "required": true
@@ -6450,6 +6455,36 @@
       "content_type_asset_preview": null,
       "component_group_name": "Blocks"
     },
+    {
+      "name": "table",
+      "display_name": null,
+      "description": null,
+      "created_at": "2024-12-19T13:32:55.556Z",
+      "updated_at": "2024-12-19T13:33:32.044Z",
+      "id": 6711880,
+      "schema": {
+        "table": {
+          "type": "table",
+          "pos": 0,
+          "id": "UA_rFl02TEmOc0NxY2WX2A"
+        }
+      },
+      "image": null,
+      "preview_field": null,
+      "is_root": false,
+      "preview_tmpl": null,
+      "is_nestable": true,
+      "all_presets": [],
+      "preset_id": null,
+      "real_name": "table",
+      "component_group_uuid": "76b6a3af-a1fa-4ffe-b980-52a2da9245ca",
+      "color": "#f4cc48",
+      "icon": "block-table-2",
+      "internal_tags_list": [],
+      "internal_tag_ids": [],
+      "content_type_asset_preview": null,
+      "component_group_name": "Blocks & Rich Text"
+    },
     {
       "name": "team-buttons",
       "display_name": null,

src/components/blocks/dynamic-block.svelte

@@ -19,6 +19,7 @@
     'image-grid': ImageGrid,
     'richtext-code-block': RichTextCodeBlock,
     'two-columns': TwoColumns,
+    table: Table,
     'richtext-testimonial': RichTextTestimonial,
     video: Video,
     'richtext-box': RichTextBox,
@@ -95,6 +96,7 @@
   import Canvas from './canvas.svelte';
   import ProjectsTwoColumns from './projects-two-columns.svelte';
   import VerticalList from './vertical-list.svelte';
+  import Table from './table.svelte';
 
   export let block: { component: string };
 

src/components/blocks/table.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { storyblokEditable } from '$lib/actions/storyblok-editable';
+  import type { TableStoryblok } from '$types/bloks';
+  import clsx from 'clsx';
+
+  export let block: TableStoryblok;
+</script>
+
+<table
+  class={clsx(
+    'table w-full table-fixed border-separate border-spacing-0 overflow-hidden rounded-lg border border-border',
+    $$restProps.class
+  )}
+  use:storyblokEditable={block}
+>
+  {#if block.table?.thead}
+    <thead>
+      <tr>
+        {#each block.table.thead as th}
+          <th
+            class="bg-background-offset/60 p-3 text-left font-medium [&:not(:last-child)]:border-r"
+            >{th.value}</th
+          >
+        {/each}
+      </tr>
+    </thead>
+  {/if}
+  {#if block.table?.tbody}
+    <tbody>
+      {#each block.table.tbody as tr}
+        <tr>
+          {#each tr.body as td}
+            <td
+              class="border-t border-border p-3 first:text-foreground-secondary [&:not(:last-child)]:border-r"
+              >{td.value}</td
+            >
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  {/if}
+</table>

src/components/pages/blog-index.svelte

@@ -118,7 +118,6 @@
           <div transition:slide|global={{ duration: 300 }} class="border-b">
             <div class="container mx-auto px-container py-4 md:flex md:py-0">
               <div class={clsx('py-4 md:py-10')}>
-                <p class="text-xs uppercase tracking-wider text-foreground-secondary">Tags</p>
                 <div class="mt-2 flex flex-wrap gap-2">
                   {#each allTags as tag}
                     <Tag

src/types/bloks.d.ts

@@ -586,9 +586,10 @@ export interface HandbookStoryblok {
     | '2 – Working at Significa'
     | '3 – Recruitment'
     | '4 – Working with Significa'
-    | '5 – Engineering'
-    | '6 – Strategy and product'
-    | '7 – Brand and Marketing';
+    | '5 – Design'
+    | '6 – Engineering'
+    | '7 – Strategy and product'
+    | '8 – Brand and Marketing';
   cover: AssetStoryblok;
   order: string;
   highlight?: boolean;
@@ -1410,6 +1411,34 @@ export interface StepsStoryblok {
   [k: string]: any;
 }
 
+export interface TableStoryblok {
+  thead: {
+    _uid: string;
+    value?: string;
+    component: number;
+    [k: string]: any;
+  }[];
+  tbody: {
+    _uid: string;
+    body: {
+      _uid?: string;
+      value?: string;
+      component?: number;
+      [k: string]: any;
+    }[];
+    component: number;
+    [k: string]: any;
+  }[];
+  [k: string]: any;
+}
+
+export interface TableStoryblok {
+  table?: TableStoryblok;
+  _uid: string;
+  component: 'table';
+  [k: string]: any;
+}
+
 export interface TeamButtonsStoryblok {
   link_type?: 'email' | 'phone' | 'url';
   title?: string;