tecitheme 0.11.6 → 0.11.8

package/dist/components/FAQList.svelte

@@ -0,0 +1,26 @@
+<script>
+  import { makeIdString } from "../utils";
+
+
+  export let data = {};
+  let id = makeIdString(data.name);
+</script>
+
+<div id={id} class="bg-white">
+  <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>
+    <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>
+          <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>
+        {/each}
+      </div>
+
+      <!-- More questions... -->
+    </dl>
+  </div>
+</div>

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

@@ -0,0 +1,23 @@
+/** @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 {};

package/dist/components/FeatureTable.svelte

@@ -1,6 +1,9 @@
 <script>
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
   import { getColorStyles, makeIdString } from "../utils";
-    import { writable } from "svelte/store";
+  import { onMount } from "svelte";
+  import { writable } from "svelte/store";
 
   export let data = {};
   let id = makeIdString(data.name);
@@ -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,32 +126,43 @@
     }
   }
 
+  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">
 
   <!-- Hero -->
-  <div class="flow-root bg-gradient-to-b {getColorStyles("gradient-dark", data.color)} py-16 sm:pt-32">
+  <div class="flow-root bg-white py-8">
     <div class="mx-auto max-w-7xl px-6 lg:px-8">
 
       <!-- Title, Text, and Buttons -->
       <div class="relative z-10">
-        <!-- Title -->
-        {#if data.heading}
-          <h1 class="mx-auto max-w-4xl text-center text-5xl font-bold tracking-tight text-white break-words hyphens-auto">{data.heading}</h1>
-        {/if}
-        <!-- Hero Text -->
-        {#if data.subheading}
-          <p class="mx-auto mt-4 max-w-2xl text-center text-lg leading-8 text-white">{@html data.subheading}</p>  
-        {/if}
-
         <!-- Buttons -->
-        <div class="mt-16 flex justify-center">
-          <fieldset class="flex flex-row bg-white/5 text-center text-xs font-semibold leading-5 text-white">
-            <legend class="sr-only">Payment frequency</legend>
-
+        <div class="flex justify-center">
+          <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) : "bg-transparent hover:bg-gray-500/40"} 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}
@@ -162,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">
@@ -233,10 +247,17 @@
   {#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 pt-8 shadow-lg">
+    <div class="hidden relative sm:flex flex-col w-full shadow-lg">
         {#each sortFeaturesByOrder(category.features) as feature, featureIndex}
           <div class="w-full flex flex-row items-center justify-center {featureIndex !== Object.values(category.features).length - 1 ? "border-b" : ""} space-x-8">
             <!-- Row Header -->
@@ -288,7 +309,7 @@
         {/each}
 
         <!-- Dummy div for background rings around features -->
-        <div class="pointer-events-none absolute flex flex-row before:block w-full h-full space-x-8 top-0 pt-8" aria-hidden="true">
+        <div class="pointer-events-none absolute flex flex-row before:block w-full h-full space-x-8 top-0" aria-hidden="true">
             <div class="w-full"></div>
             {#each $selectedTable.columns as column}
               <div class="w-full ring-gray-900/10 ring-inset {column.highlightOption ? getColorStyles("ring", data.color) + " ring-2" : "ring-1"}"></div>
@@ -320,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,6 +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 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,6 +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 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,6 +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";
 
   let blocks = [
     { ref: "accordion", component: Accordion},
@@ -43,6 +44,7 @@
     { ref: "pageNav", component: PageNav },
     { ref: "testimonial", component: Testimonial },
     { ref: "partners", component: PartnersList },
+    { ref: "faq-list", component: FaqList }
   ];
 
   export let data = {};

package/package.json

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