tecitheme 0.8.1 → 0.9.0

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

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  ModalProps */
+/** @typedef {typeof __propDef.events}  ModalEvents */
+/** @typedef {typeof __propDef.slots}  ModalSlots */
+export default class Modal extends SvelteComponent<{
+    data?: {};
+    show?: () => void;
+    hide?: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+    get show(): () => void;
+    get hide(): () => void;
+}
+export type ModalProps = typeof __propDef.props;
+export type ModalEvents = typeof __propDef.events;
+export type ModalSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        data?: {};
+        show?: () => void;
+        hide?: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/NewsGrid.svelte

@@ -0,0 +1,196 @@
+<script>
+import Button from './Button.svelte'
+
+  import { page } from '$app/stores';
+  import { paginate, PaginationNav } from "svelte-paginate";
+  import Icon from "./Icon.svelte";
+
+  export let data = {};
+
+  let posts = $page.data.newsPosts;
+  let filteredPosts = [];
+  let items = [];
+  let currentPage = 1;
+  let pageSize = (data.pageSize?data.pageSize:6);
+  let postLimit = data.limit;
+  let showArrows = (data.showArrows?data.showArrows:false);
+  let rangeLimit = (data.rangeLimit?data.rangeLimit:1)
+  let showPagination = (data.showPagination?data.showPagination:false);
+  let id
+
+  if (data.name) {
+    id = encodeURIComponent(data.name).toLowerCase()
+  }
+
+  if (postLimit > 0) {
+    posts = posts.slice(0, postLimit);
+    postLimit <= pageSize ? (showPagination = false) : (showPagination = true);
+  }
+
+  function termExists(arr, terms) {
+    if (arr) {
+      return terms.some((term) => {
+        return arr.includes(term);
+      });
+    } else {
+      return false;
+    }
+  }
+
+  function filterPosts(arr, terms) {
+    for (let i = 0; i < arr.length; ) {
+      if (termExists(arr[i].categories, terms)) {
+        i++;
+        continue;
+      }
+      arr.splice(i, 1);
+    }
+    return arr;
+  }
+
+  if (data.filter) {
+    items = filterPosts(posts, data.filter);
+  } else {
+    items = posts;
+  }
+
+  $: paginatedItems = paginate({ items, pageSize, currentPage });
+</script>
+
+<section {id} class="relative mx-auto w-full">
+  <div
+    class="flex flex-col justify-between space-y-4 border-b-2 border-gray-200 pb-4 sm:flex-row sm:items-end sm:space-y-0"
+  >
+    <div>
+      <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+        {data.title}
+      </h1>
+      <p class="text-xl text-gray-500">{data.subtitle}</p>
+    </div>
+    <div class="w-32">
+      <Button
+          url="https://www.thunderheadeng.com/subscribe"
+          text="Subscribe"
+          color="teci"
+          justify="right"
+        />
+    </div>
+  </div>
+  {#if items.length > 0}
+    {#if showPagination}
+      <div class="paginator mx-auto flex justify-center pt-4">
+        <PaginationNav
+          totalItems={items.length}
+          {pageSize}
+          {currentPage}
+          limit={rangeLimit}
+          showStepOptions={showArrows}
+          on:setPage={(e) => (currentPage = e.detail.page)}
+        />
+      </div>
+    {/if}
+    <div
+      class="grid gap-8 pt-8 md:grid-cols-2 md:gap-16 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12"
+    >
+      {#each paginatedItems as post}
+        <div class="h-full">
+          <div class="flex h-full flex-col items-stretch ">
+            <time class="mb-1 block text-sm text-gray-500" datetime={post.date}
+              >{new Date(post.date).toLocaleDateString("en-us", {
+                weekday: "short",
+                year: "numeric",
+                month: "short",
+                day: "numeric",
+                timeZone: "UTC",
+                timeZoneName: "short",
+              })}</time
+            >
+            <h2 class="mb-2 text-xl font-semibold text-gray-900">
+              <a href={post.slug}>
+                {post.title}
+              </a>
+            </h2>
+            {#if post.summary}
+              <p class="mb-2 flex-1 text-base text-gray-500">
+                <a href={post.slug}>
+                  {post.summary.length > 190
+                    ? post.summary.substring(0, 190) + " ..."
+                    : post.summary}
+                </a>
+              </p>
+            {:else}
+              <p class="mb-2 flex-1 text-base text-red-500">
+                Missing Summary Text
+              </p>
+            {/if}
+            {#if post.categories}
+              <div class="flex w-full flex-wrap text-sm">
+                {#each post.categories.sort() as term}
+                  <a
+                    class="mr-2 mb-2 inline-block"
+                    href="/news/filter/{term}"
+                    target="_self"
+                  >
+                    <span
+                      class="inline-flex items-center rounded-full bg-teci-blue-dark px-2.5 py-0.5 text-xs text-white hover:bg-teci-blue-light"
+                      >{term}</span
+                    >
+                  </a>
+                {/each}
+              </div>
+            {/if}
+            <p
+              class="text-sm font-semibold text-teci-blue-light hover:text-teci-blue-dark"
+            >
+              <a href={post.slug}>
+                Read full article<span aria-hidden="true">&nbsp;→</span>
+              </a>
+            </p>
+          </div>
+        </div>
+      {/each}
+    </div>
+    {#if showPagination}
+      <div class="paginator mx-auto flex justify-center pt-8">
+        <PaginationNav
+          totalItems={items.length}
+          {pageSize}
+          {currentPage}
+          limit={rangeLimit}
+          showStepOptions={showArrows}
+          on:setPage={(e) => (currentPage = e.detail.page)}
+        />
+      </div>
+    {/if}
+    {#if !showPagination}
+      <div class="mt-8 w-full">
+        <Button
+          url="/news"
+          text="All News Posts"
+          color="teci"
+          justify="right"
+        />
+      </div>
+    {/if}
+    {#if !postLimit}
+    <div class="sr-only">
+      <p>List of all News links for screen readers and bots.</p>
+      <ul>
+      {#each posts as post}
+        <li>
+          <a href={post.slug}>{post.title}</a>
+        </li>
+      {/each}
+      </ul>
+    </div>
+    {/if}
+  {:else}
+    <div class="prose">
+      <p class="pt-8">
+        Sorry, there isn't any news for you to see here.<br />
+        Please visit the <a rel="external" href="/news">All News</a> page for an
+        updated list.
+      </p>
+    </div>
+  {/if}
+  </section>

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

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

package/dist/components/PageNav.svelte

@@ -0,0 +1,243 @@
+<script>
+  import { getColorStyles } from "../utils";
+  import { fade, slide } from "svelte/transition";
+  import { cubicIn, cubicOut } from "svelte/easing";
+  import Icon from "./Icon.svelte";
+
+  export let data = {};
+  let {logo, logo_mobile, logo_link_url, logo_alt_text, color, ctas, dropdowns, links} = data;
+
+  let id;
+  if (data.name) {
+    id = encodeURIComponent(data.name).toLowerCase()
+  }
+
+  let openDropdown = "";
+  export function clickOutside(node) {
+    const handleClick = (event) => {
+      if (
+        !node.contains(event.target) &&
+        event.target.innerText.toLowerCase() != node.parentElement.id
+      ) {
+        node.dispatchEvent(new CustomEvent("outclick"));
+      }
+    };
+    document.addEventListener("click", handleClick, true);
+    return {
+      destroy() {
+        document.removeEventListener("click", handleClick, true);
+      },
+    };
+  }
+
+  function handleEscape({ key }) {
+    if (key === "Escape") {
+      openDropdown = "";
+    }
+  }
+
+  let mobileOpen = false;
+</script>
+
+<svelte:window on:keyup={handleEscape} />
+
+<header {id} class="sticky top-0 w-full z-40 bg-white">
+  <div
+    aria-hidden="true"
+    class="pointer-events-none absolute inset-0 z-30 shadow"
+  />
+  <div class="relative">
+
+    <!-- Rail -->
+    <div
+      class="relative mx-auto w-full flex max-w-7xl items-center justify-between px-2 py-5 sm:px-6 sm:py-4 md:justify-start md:space-x-6 lg:space-x-10 lg:px-8"
+    >
+      
+      <!-- Left Icons -->
+      <div class="flex-shrink-0">
+        <!-- Mobile Nav Icon -->
+        <button class="flex-shrink-0 md:hidden flex flex-row items-center"
+          
+          on:click={() => mobileOpen = !mobileOpen}
+        >
+          <span class="sr-only">{logo_alt_text}</span>
+          <Icon classes="h-10 w-auto" icon={logo_mobile} />
+          <svg
+            class="ml-2 h-10 w-10 group-hover:text-gray-900 {mobileOpen == true
+              ? 'rotate-180 text-gray-900'
+              : 'text-gray-400'}"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </button>
+
+        <!-- Desktop Nav Icon-->
+        <div class="hidden sm:flex sm:flex-shrink-0">
+          <a href={logo_link_url} class="flex">
+            <span class="sr-only">{logo_alt_text}</span>
+            <Icon classes="h-10 w-auto" icon={logo} />
+          </a>
+        </div>
+      </div>
+
+      <!-- Interactive Elements -->
+      <nav class="hidden md:flex md:space-x-4 lg:space-x-10 md:items-center w-full">
+
+        <!-- Left Links -->
+        {#each links as link}
+          <a href={link.url} class="text-base font-medium hover:text-gray-900">{link.text}</a>
+        {/each}
+
+        <!-- Spacer -->
+        <div class="flex-1" />
+
+        <!-- Right Dropdowns -->
+        {#each dropdowns as drop}
+          <div id={drop.key} class="relative">
+
+            <!-- Rail Buttons-->
+            <button
+              type="button"
+              on:click={() =>
+                openDropdown == drop.key
+                  ? (openDropdown = "")
+                  : (openDropdown = drop.key)}
+              class="group inline-flex items-center bg-white text-left text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-teci-blue-light focus:ring-offset-2"
+              aria-expanded={openDropdown == drop.key}
+            >
+              <span class:text-gray-900={openDropdown == drop.key}>{drop.text}</span>
+              <svg
+                class="ml-2 h-5 w-5 group-hover:text-gray-900 {openDropdown == drop.key
+                  ? 'rotate-180 text-gray-900'
+                  : 'text-gray-400'}"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </button>
+
+            <!-- Flyout menus -->
+            {#if openDropdown == drop.key}
+              <div
+                class="absolute left-1/2 z-50 mt-3 w-48 max-w-xs -translate-x-1/2 transform overflow-hidden px-2 shadow-lg ring-1 ring-black ring-opacity-5 sm:px-0 bg-white"
+                use:clickOutside
+                on:outclick={() => (openDropdown = "")}
+                in:slide={{ duration: 250, easing: cubicOut }}
+                out:slide={{ duration: 150, easing: cubicIn }}
+              >
+
+                <button
+                  on:click={() => (openDropdown = "")}
+                  class="relative grid w-full gap-6 bg-white px-2 py-6 text-left"
+                >
+                  {#each drop.links as link}
+                    <a
+                      href={link.url}
+                      class="-m-3 flex items-start py-3 px-4 transition duration-150 ease-in-out hover:bg-gray-50"
+                    >
+                      <div class="ml-4">
+                        <p class="text-base font-medium text-gray-900">{link.text}</p>
+                      </div>
+                    </a>
+                  {/each}
+                </button>
+
+              </div>
+            {/if}
+          </div>
+        {/each}
+        
+        <!-- CTA Buttons -->
+        {#each ctas as cta}
+          <a href={cta.url} class="inline-block btn {getColorStyles('button', cta.color)}">
+            {cta.text}
+            <span class="hidden sm:inline" aria-hidden="true">&rarr;</span>
+          </a>
+        {/each}
+      </nav>
+
+    </div>
+
+    <!-- Mobile Menu -->
+    {#if mobileOpen}
+      <div
+        class="absolute inset-x-0 z-50 divide-y-2 divide-gray-50 bg-white shadow-lg ring-1 ring-black ring-opacity-5 md:hidden px-2 py-4"
+        use:clickOutside
+        on:outclick={() => mobileOpen = false}
+        in:fade={{ duration: 250, easing: cubicOut }}
+        out:fade={{ duration: 150, easing: cubicIn }}
+      >
+      <button
+        on:click={() => mobileOpen = false}
+        class="relative grid w-full gap-6 bg-white p-2 text-left"
+      >
+        <!-- Page Home Link -->
+        <a
+          href={logo_link_url}
+          class="-m-3 flex items-start py-3 px-4 transition duration-150 ease-in-out hover:bg-gray-50"
+        >
+          <div class="ml-4">
+            <p class="text-base font-medium text-gray-900">{logo_alt_text}</p>
+          </div>
+        </a>
+
+        <!-- Links -->
+        {#each links as link}
+          <a
+            href={link.url}
+            class="-m-3 flex items-start py-3 px-4 transition duration-150 ease-in-out hover:bg-gray-50"
+          >
+            <div class="ml-4">
+              <p class="text-base font-medium text-gray-900">{link.text}</p>
+            </div>
+          </a>
+        {/each}
+
+        <!-- Dropdowns -->
+        {#each dropdowns as drop}
+          <div id={drop.key} class="-m-3 py-3 px-4">
+            <p class="text-base font-medium text-gray-400 px-4">{drop.text}</p>
+            {#each drop.links as link}
+            <a
+              href={drop.url}
+              class="flex items-start py-3 px-4 transition duration-150 ease-in-out hover:bg-gray-50"
+            >
+              <div class="ml-4">
+                <p class="text-base font-medium text-gray-900">{link.text}</p>
+              </div>
+            </a>
+            {/each}
+          </div>
+        {/each}
+        
+        <!-- CTAs -->
+        {#each ctas as cta}
+          <a
+            href={cta.url}
+            class="-m-3 flex items-start py-3 px-4 transition duration-150 ease-in-out hover:bg-gray-50"
+          >
+            <div class="ml-4">
+              <p class="text-base font-medium text-gray-900">{cta.text}</p>
+            </div>
+          </a>
+        {/each}
+      </button>
+      </div>
+    {/if}
+  </div>
+</header>

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

@@ -0,0 +1,32 @@
+/** @typedef {typeof __propDef.props}  PageNavProps */
+/** @typedef {typeof __propDef.events}  PageNavEvents */
+/** @typedef {typeof __propDef.slots}  PageNavSlots */
+export default class PageNav extends SvelteComponent<{
+    data?: {};
+    clickOutside?: (node: any) => {
+        destroy(): void;
+    };
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+    get clickOutside(): (node: any) => {
+        destroy(): void;
+    };
+}
+export type PageNavProps = typeof __propDef.props;
+export type PageNavEvents = typeof __propDef.events;
+export type PageNavSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        data?: {};
+        clickOutside?: (node: any) => {
+            destroy(): void;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/PricingTable.svelte

@@ -0,0 +1,100 @@
+<script>
+  import { getColorStyles } from '../utils'
+  export let data = {};
+  let toggleID = data.groups[0].id
+  let id
+
+  if (data.name) {
+    id = encodeURIComponent(data.name).toLowerCase()
+  }
+
+  function toggleSelection(group_id) {
+    toggleID = group_id
+  }
+</script>
+
+<section {id} class="overflow-hidden">
+  <div class="sm:align-center sm:flex sm:flex-col">
+    <h1 class="text-5xl font-bold tracking-tight text-gray-900 sm:text-center">{data.heading}</h1>
+    <p class="mt-5 text-xl text-gray-500 sm:text-center">{data.subheading}</p>
+    {#if data.groups.length > 1 }
+    <div class="relative mt-6 max-w-xs w-full flex flex-row space-x-4 self-center justify-evenly rounded-lg bg-gray-100 p-0.5 sm:mt-8">
+        {#each data.groups as group}
+          <button type="button" 
+            on:click={toggleSelection(group.id)}
+            id={group.id}
+            class="relative w-full whitespace-nowrap rounded-md py-2 text-sm font-medium border focus:z-10 focus:outline-none focus:ring-2 focus:ring-teci-blue-light
+            {toggleID == group.id ? "border-gray-200 bg-white text-gray-900 shadow-sm" : "border-transparent text-gray-700"}
+            ">
+            {group.label}
+          </button>
+        {/each}
+    </div>
+    {/if}
+    <p class="mt-4 text-md max-w-xl mx-auto text-gray-500 sm:text-center">{data.groups.find(x => x.id === toggleID).description}</p>
+  </div>
+  <div class="mt-8 space-y-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 lg:mx-auto lg:max-w-4xl xl:mx-0 xl:max-w-none xl:grid-cols-4">
+    {#each data.groups as group}
+      {#if (group.id == toggleID)}
+        {#each group.options as option}
+          <div class="max-w-xs mx-auto sm:odd:mr-0 sm:even:ml-0 divide-y divide-gray-200 border border-gray-200 {option.highlight ? "shadow-[inset_0_0_6px_0_rgb(0,43,127,1.0)]":"shadow-md"}">
+            <div class="p-6">
+              <h2 class="text-lg font-medium leading-6 text-gray-900">{option.label}</h2>
+                <p class="mt-4 text-sm text-gray-500">{option.text}</p>
+              <p class="mt-8">
+                {#if option.unit}
+                  <span class="text-2xl align-super font-medium text-gray-500">{option.unit}</span>
+                {/if}
+                  <span class="text-4xl font-bold tracking-tight text-gray-900">{option.price}</span>
+                {#if option.divisor}
+                  <span class="text-base font-medium text-gray-500">{option.divisor}</span>  
+                {/if}
+              </p>
+              {#if option.cta_url}
+              <a href={option.cta_url} class="btn mt-8 block w-full border py-2 text-center text-sm font-semibold {getColorStyles('button', data.color)}">{option.cta_label}</a>  
+              {/if}
+            </div>
+            <div class="px-6 pt-6 pb-8">
+              <h3 class="text-sm font-medium text-gray-900">{option.features_text}</h3>
+              <ul class="mt-6 space-y-4">
+                {#each option.features as feature}
+                  <li class="flex space-x-3">
+                    <!-- Heroicon name: mini/check -->
+                    <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                    </svg>
+                    <span class="text-sm {getColorStyles('text', data.color)}">{feature.text}</span>
+                  </li>
+                {/each}
+              </ul>
+            </div>
+          </div>
+        {/each}
+      {/if}
+    {/each}
+  </div>
+  {#if data.footer}
+  <div class="mt-8">
+    {#if data.footer.heading}
+    <div class="text-xl mb-4 text-gray-500 sm:text-center">
+      <p>{data.footer.heading}</p>
+    </div>
+    {/if}
+    {#if data.footer.text}
+    <div class="text-md mb-4 max-w-4xl mx-auto text-gray-500 sm:text-center">
+      <p>{@html data.footer.text}</p>
+    </div>
+    {/if}
+    {#if data.footer.ctas}
+    <div class="flex gap-x-8 py-2 sm:justify-center">
+      {#each data.footer.ctas as cta}
+        <a href={cta.url} class="btn {getColorStyles('button', cta.color)}">
+          {cta.text}
+          <span class="hidden sm:inline" aria-hidden="true">&rarr;</span>
+        </a>
+      {/each}
+    </div>
+    {/if}
+  </div>
+  {/if}
+</section>

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

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