tecitheme 0.11.7 → 0.11.9

package/dist/components/{FAQList.svelte → AnswersList.svelte}

@@ -6,14 +6,14 @@
   let id = makeIdString(data.name);
 </script>
 
-<div id={id} class="bg-white">
+<div id={id} class="bg-white scroll-mt-16">
   <div class="mx-auto max-w-7xl divide-y divide-gray-900/10 px-6 lg:px-8">
-    <h2 class="text-2xl font-bold leading-10 tracking-tight text-gray-900">Frequently asked questions</h2>
+    <h2 class="text-2xl font-bold leading-10 tracking-tight text-gray-900"><a href={`#${id}`}>{@html data.heading}</a></h2>
     <dl class="mt-10 space-y-8 divide-y divide-gray-900/10">
       <div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-8">
 
-        {#each data.items as item}
-          <dt class="text-base font-semibold leading-7 text-gray-900 lg:col-span-5">{@html item.label}</dt>
+        {#each data.items as item, index}
+          <dt id={`${id}-list-item-${index}`} class="text-base font-semibold leading-7 text-gray-900 lg:col-span-5 scroll-mt-16"><a href={`#${id}-list-item-${index}`}>{@html item.label}</a></dt>
           <dd class="mt-4 lg:col-span-7 lg:mt-0">
             <p class="text-base leading-7 text-gray-600">{@html item.description}</p>
           </dd>

package/dist/components/AnswersList.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  AnswersListProps */
+/** @typedef {typeof __propDef.events}  AnswersListEvents */
+/** @typedef {typeof __propDef.slots}  AnswersListSlots */
+export default class AnswersList extends SvelteComponent<{
+    data?: {};
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type AnswersListProps = typeof __propDef.props;
+export type AnswersListEvents = typeof __propDef.events;
+export type AnswersListSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        data?: {};
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/FeatureTable.svelte

@@ -1,5 +1,8 @@
 <script>
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
   import { getColorStyles, makeIdString } from "../utils";
+  import { onMount } from "svelte";
   import { writable } from "svelte/store";
 
   export let data = {};
@@ -38,21 +41,21 @@
    * }
   */
   let tables = {};
-  data.groups.forEach(section => {
-    if (section.options) 
+  data.groups.forEach(group => {
+    if (group.options) 
     {
-      tables[section.name] = {columns: [], categories: []}; //Initialize key for the section object
+      tables[group.name] = {name: group.name, columns: [], categories: []}; //Initialize key for the section object
 
-      section.options.forEach(option => {
+      group.options.forEach(option => {
 
-        tables[section.name]["columns"].push({name: option.name, description: option.description, highlightOption: option.highlightOption});
+        tables[group.name]["columns"].push({name: option.name, description: option.description, highlightOption: option.highlightOption});
 
         if (option.features) {
           option.features.forEach(category => { 
 
             // Big 'ole ternary to retrieve or initialize category data
-            let catData = tables[section.name]["categories"][category.name] 
-            ? tables[section.name]["categories"][category.name] 
+            let catData = tables[group.name]["categories"][category.name] 
+            ? tables[group.name]["categories"][category.name] 
             : {name: category.name, features: {}};
 
             category.features.forEach((feature, index) => {
@@ -73,7 +76,7 @@
             });
 
             //Store category data
-            tables[section.name]["categories"][category.name] = catData;
+            tables[group.name]["categories"][category.name] = catData;
 
           });
         }
@@ -82,17 +85,17 @@
     }
   });
 
-  let selectedButton = writable({});
+  let selectedGroup = writable({});
   let selectedTable = writable({});
 
   //Initialize data stores
   if (data.groups) {
-    selectedButton.update(val => data.groups[0]);
-    selectedTable.update(val => tables[$selectedButton.name]);
+    selectedGroup.update(val => data.groups[0]);
+    selectedTable.update(val => tables[$selectedGroup.name]);
   }
 
   //Update table store when new button is selected
-  selectedButton.subscribe(val => selectedTable.update(table => tables[val.name]))
+  selectedGroup.subscribe(val => selectedTable.update(table => tables[val.name]))
 
   /**
    * 
@@ -123,6 +126,24 @@
     }
   }
 
+  onMount(() => {
+    let initialGroupParam = $page.url.searchParams.get("group");
+    if (initialGroupParam != null) {
+      let initialGroup = data.groups.filter(group => group.name === initialGroupParam)[0];
+      selectedGroup.update(_ => initialGroup);
+    }
+
+    selectedGroup.subscribe(newGroup => {
+      $page.url.searchParams.set("group", newGroup.name);
+      goto($page.url.toString(), {noScroll: true});
+
+      setTimeout(() => {
+        let anchorElement = document.getElementById($page.url.hash.slice(1,));
+        if (anchorElement) anchorElement.scrollIntoView(true);
+      }, 300)
+    })
+  })
+
 </script>
 
 <div id={id} class="relative flex flex-col space-y-4">
@@ -138,7 +159,10 @@
           <fieldset class="flex flex-row bg-white/5 text-center text-xs font-semibold leading-5 shadow-lg ring ring-gray-200/50">
             <legend class="sr-only">Group Selector</legend>
             {#each data.groups as btn}
-              <button class="{$selectedButton === btn ? getColorStyles("background", data.color) : getColorStyles("button", "white")} px-4 py-2 transition ease-in-out duration-300" on:click={selectedButton.update(val => btn)}>
+              <button class="{$selectedGroup === btn ? getColorStyles("background", data.color) : getColorStyles("button", "white")} px-4 py-2 transition ease-in-out duration-300" on:click={() => {
+                selectedGroup.update(_ => btn);
+                goto($page.url.pathname + $page.url.search);
+              }}>
                 {btn.name}
               </button>
             {/each}
@@ -152,8 +176,8 @@
 
         <div class="hidden lg:absolute lg:inset-x-px lg:bottom-0 lg:top-4 lg:block" aria-hidden="true"></div>
 
-        {#if $selectedButton.options}
-          {#each $selectedButton.options as card}
+        {#if $selectedGroup.options}
+          {#each $selectedGroup.options as card}
             
             <div class="relative ring-1 ring-white/30 lg:pb-14 {card.highlightOption ? getColorStyles("background", data.color) : "bg-white"} w-full shadow-lg">
               <div class="p-8 lg:pt-12 xl:p-10 xl:pt-14">
@@ -223,7 +247,14 @@
   {#each Object.values($selectedTable.categories) as category, categoryIndex}
 
     <!-- Category Name -->
-    <h4 class="hidden sm:block sticky top-32 z-20 bg-white font-semibold leading-6 text-gray-900 px-4 py-2 w-fit">{category.name}</h4>
+    <div class="hidden sm:flex sticky top-32 z-20 bg-transparent flex-row">
+
+      <h4 id={makeIdString($selectedTable.name + " " + category.name)} class="scroll-mt-24 bg-white font-semibold leading-6 text-gray-900 pl-4 mr-8 py-2 w-full"><a href={"#"+makeIdString($selectedTable.name + " " + category.name)}>{category.name}</a></h4>
+
+      {#each $selectedTable.columns as col}
+      <div class="w-full"></div>
+      {/each}
+    </div>
 
     <!-- Table -->
     <div class="hidden relative sm:flex flex-col w-full shadow-lg">
@@ -310,7 +341,7 @@
       {#if sortFeaturesByOrder(category.features, column.name).length > 0}
     
         <!-- Category Headings -->
-        <h4 class="sticky top-44 sm:hidden block font-semibold leading-6 text-gray-900 w-full bg-white z-20 py-2">{category.name}</h4>
+        <h4 id={makeIdString(column.name + " " + category.name)} class="sticky top-44 sm:hidden block font-semibold leading-6 text-gray-900 w-full bg-white z-20 py-2 scroll-mt-36"><a href={"#" + makeIdString(column.name + " " + category.name)}>{category.name}</a></h4>
 
         <div class="sm:hidden relative flex flex-col">
           <!-- Tables -->

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export { default as ContentTwoColumns } from "./components/ContentTwoColumns.sve
 export { default as CountrySelector } from "./components/CountrySelector.svelte";
 export { default as CTA } from "./components/CTA.svelte";
 export { default as CTASplitImage } from "./components/CTASplitImage.svelte";
-export { default as FaqTable } from "./components/FAQList.svelte";
+export { default as AnswersList } from "./components/AnswersList.svelte";
 export { default as FeatureGrid } from "./components/FeatureGrid.svelte";
 export { default as FeatureTable } from "./components/FeatureTable.svelte";
 export { default as Figure } from "./components/Figure.svelte";

package/dist/index.js

@@ -10,7 +10,7 @@ export { default as ContentTwoColumns } from './components/ContentTwoColumns.sve
 export { default as CountrySelector } from './components/CountrySelector.svelte';
 export { default as CTA } from './components/CTA.svelte';
 export { default as CTASplitImage } from './components/CTASplitImage.svelte';
-export { default as FaqTable } from './components/FAQList.svelte';
+export { default as AnswersList } from './components/AnswersList.svelte';
 export { default as FeatureGrid } from './components/FeatureGrid.svelte';
 export { default as FeatureTable } from './components/FeatureTable.svelte';
 export { default as Figure } from './components/Figure.svelte';

package/dist/layouts/blocks.svelte

@@ -20,7 +20,7 @@
   import PageNav from "../components/PageNav.svelte";
   import Testimonial from "../components/Testimonial.svelte";
   import PartnersList from "../components/PartnersList.svelte";
-  import FaqList  from "../components/FAQList.svelte";
+  import AnswersList  from "../components/AnswersList.svelte";
 
   let blocks = [
     { ref: "accordion", component: Accordion},
@@ -44,7 +44,7 @@
     { ref: "pageNav", component: PageNav },
     { ref: "testimonial", component: Testimonial },
     { ref: "partners", component: PartnersList },
-    { ref: "faq-list", component: FaqList }
+    { ref: "answers-list", component: AnswersList }
   ];
 
   export let data = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tecitheme",
-  "version": "0.11.7",
+  "version": "0.11.9",
   "license": "MIT",
   "scripts": {
     "dev": "vite dev",

package/dist/components/FAQList.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  FaqListProps */
-/** @typedef {typeof __propDef.events}  FaqListEvents */
-/** @typedef {typeof __propDef.slots}  FaqListSlots */
-export default class FaqList extends SvelteComponent<{
-    data?: {};
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type FaqListProps = typeof __propDef.props;
-export type FaqListEvents = typeof __propDef.events;
-export type FaqListSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        data?: {};
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};