tecitheme 0.11.8 → 0.11.10

package/dist/components/Accordion.svelte

@@ -1,73 +1,113 @@
 <script>
   import { slide } from "svelte/transition";
-  import { cubicIn, cubicOut } from "svelte/easing";
+  import { cubicIn, cubicOut, cubicInOut } from "svelte/easing";
+  import { makeIdString } from "../utils";
+    import { onMount } from "svelte";
+    import { page } from "$app/stores";
 
   export let data = {};
-  export let prompts=[];
-  export let title="";
-  
-  let promptsArray;
-  let accordionTitle;
-  let openPrompts=[];
 
-  if (data.prompts) {
-    promptsArray = data.prompts;
-  } else if (prompts) {
-    promptsArray = prompts;
-  } else {
-    promptsArray = [];
-  }
+  let {prompts, title} = data;
+  let id = makeIdString(title);
 
-  if (title) {
-    accordionTitle = title;
-  } else if (data.title) {
-    accordionTitle = data.title;
-  } else {
-    accordionTitle = "";
-  }
+  let openPrompts=[];
 
   function addPrompt(id) {
     openPrompts = [...openPrompts, id];
+
   }
 
   function removePrompt(id) {
     openPrompts = openPrompts.filter((x) => x !== id);
   }
 
+  onMount(() => {
+    if ($page.url.hash) {
+      let hashedPrompt = $page.url.hash.slice(1,);
+      let initialPrompt = prompts.filter(prompt => {
+        return makeIdString(prompt.title) == hashedPrompt;
+      })[0]
+      let initialPromptIndex = prompts.indexOf(initialPrompt);
+      
+      if (initialPromptIndex != null) {
+        openPrompts = [...openPrompts, `prompt-${initialPromptIndex}`]
+      }
+    }
+  });
+
 </script>
 
-<section class="mx-auto mb-8 w-full max-w-4xl divide-y divide-gray-900/10">
-  {#if accordionTitle}
-  <span class="text-2xl font-bold tracking-tight text-gray-900 mb-8">{accordionTitle}</span>
-  {/if}
-  <dl class="space-y-6 divide-y divide-gray-900/10">
-    {#each promptsArray as prompt, i}
+<section class="mx-auto mb-8 w-full divide-y divide-gray-900/10 px-6 lg:px-8">
+  <!-- Header -->
+  <div class="flex flex-row w-full items-center space-x-4">
+    <!-- Title -->
+    {#if title}
+      <h2 id={id} class="scroll-mt-16 text-2xl font-bold leading-10 tracking-tight text-gray-900 w-full"><a href={`#${id}`}>{@html title}</a></h2>
+    {:else}
+      <div class="flex-grow" />
+    {/if}
+
+    <!-- Expand All -->
+    <button class="px-2" on:click={() => {
+      openPrompts = prompts.map((prompt, index) => `prompt-${index}`);
+    }}>
+      <span class="sr-only">Expand All</span>
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+      </svg>      
+    </button>
+
+    <!-- Collapse All -->
+    <button class="px-2" on:click={() => {
+      openPrompts = [];
+    }}>
+      <span class="sr-only">Collapse All</span>
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
+      </svg>      
+    </button>
+
+  </div>
+
+  <!-- Prompts -->
+  <dl class="space-y-6 divide-y divide-gray-900/10 mt-10">
+    {#each prompts as prompt, i}
     <div id="prompt-{i}" class="pt-6">
-      <dt>
+      <!-- Prompt -->
+      <dt class="scroll-mt-16" id={makeIdString(prompt.title)}>
         <button type="button"
           on:click={() => openPrompts.includes(`prompt-${i}`) ? removePrompt(`prompt-${i}`) : addPrompt(`prompt-${i}`)}
           class="flex w-full items-start justify-between text-left text-gray-900"
           aria-controls="prompt-content-{i}"
           aria-expanded={openPrompts.includes(`prompt-${i}`)}>
-          <span class="text-base font-semibold leading-7">{prompt.title}</span>
-          <span class="ml-6 flex h-7 items-center">
-            {#if (openPrompts.includes(`prompt-${i}`))}
-            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
-            </svg>
-            {:else}
-            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
-            </svg>
-            {/if}  
-          </span>
+
+            <a href={`#${makeIdString(prompt.title)}`} class="flex w-full items-start justify-between text-left text-gray-900">
+              <span class="text-base font-semibold leading-7">{prompt.title}</span>
+              <span class="ml-6 flex h-7 items-center">
+                {#if (openPrompts.includes(`prompt-${i}`))}
+                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
+                </svg>
+                {:else}
+                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
+                </svg>
+                {/if}  
+              </span>
+            </a>
+
         </button>
       </dt>
-      <dd id="prompt-content-{i}" class="mt-2 pr-12 transition-opacity ease-in duration-100 opacity-100 {openPrompts.includes(`prompt-${i}`) ? "opacity-100" : "opacity-0"}">
-        <p class="text-base leading-7" class:hidden={!openPrompts.includes(`prompt-${i}`)}>
-          {@html prompt.content}
-        </p>
-      </dd>
+
+      <!-- Content -->
+      {#if openPrompts.includes(`prompt-${i}`)}
+        <dd id="prompt-content-{i}" class="mt-2 pr-12" transition:slide={{ delay: 100, duration: 300, easing: cubicInOut, axis: 'y' }}>
+          <p class="text-base leading-7" 
+          >
+            {@html prompt.content}
+          </p>
+        </dd>
+      {/if}
     </div>
     {/each}
   </dl>

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

@@ -3,8 +3,6 @@
 /** @typedef {typeof __propDef.slots}  AccordionSlots */
 export default class Accordion extends SvelteComponent<{
     data?: {};
-    title?: string;
-    prompts?: any[];
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -16,8 +14,6 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         data?: {};
-        title?: string;
-        prompts?: any[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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/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.8",
+  "version": "0.11.10",
   "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 {};