tecitheme 0.3.4 → 0.4.1

package/src/lib/components/Banner.svelte

@@ -1,91 +0,0 @@
-<script>
-  export let showCTA;
-  export let shortText;
-  export let longText;
-  export let ctaText;
-  export let ctaLink;
-  export let allowClose;
-
-  let bannerOpen = true;
-
-  let toggleBanner = () => {
-    bannerOpen = !bannerOpen;
-  };
-</script>
-
-{#if bannerOpen}
-  <!-- This example requires Tailwind CSS v2.0+ -->
-  <div class="bg-teci-blue-light">
-    <div class="mx-auto max-w-7xl py-3 px-3 sm:px-6 lg:px-8">
-      <div class="flex flex-wrap justify-between">
-        <div class="order-1 flex h-10 w-0 flex-1 items-center">
-          <span class="flex p-1">
-            <!-- Heroicon name: outline/speakerphone -->
-            <svg
-              class="h-6 w-6 text-white"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="2"
-              stroke="currentColor"
-              aria-hidden="true"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"
-              />
-            </svg>
-          </span>
-          <p class="ml-3 truncate font-medium text-white">
-            <span class="inline md:hidden">{shortText}</span>
-            <span class="hidden md:inline">{longText}</span>
-          </p>
-        </div>
-        {#if showCTA}
-          <div
-            class="order-3 mt-2 w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:ml-3 sm:w-auto"
-          >
-            <a
-              href={ctaLink}
-              class="flex items-center justify-center border border-transparent bg-white px-4 py-2 text-sm font-medium text-teci-blue-light shadow-sm hover:bg-teci-blue-dark hover:text-white"
-            >
-              {ctaText}
-            </a>
-          </div>
-        {/if}
-        {#if allowClose}
-          <div class="order-2 flex-shrink-0 sm:order-3 sm:ml-3">
-            <button
-              type="button"
-              on:click={toggleBanner}
-              class="-mr-1 flex p-2 hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2"
-            >
-              <span class="sr-only">Dismiss</span>
-              <!-- Heroicon name: outline/x -->
-              <svg
-                class="h-6 w-6 text-white"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="2"
-                stroke="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            </button>
-          </div>
-        {:else}
-          <div class="order-2 flex-shrink-0">
-            <span>&nbsp;</span>
-          </div>
-        {/if}
-      </div>
-    </div>
-  </div>
-{/if}

package/src/lib/components/Button.svelte

@@ -1,12 +0,0 @@
-<script>
-  export let url;
-  export let text;
-</script>
-
-<div class="not-prose my-4">
-  <a
-    class="btn mx-auto block w-64 text-center text-2xl shadow-md ring-0 focus:ring-0"
-    href={url}
-    rel="external">{text}</a
-  >
-</div>

package/src/lib/components/CTA.svelte

@@ -1,36 +0,0 @@
-<script>
-  export let data;
-</script>
-
-<!-- This example requires Tailwind CSS v2.0+ -->
-<section class="mx-auto mb-12 px-4 text-center sm:px-6 lg:px-8">
-  {#if data.title}
-    <h2
-      class="{data.subtitle
-        ? 'mb-4'
-        : 'mb-8'} text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"
-    >
-      <span class="block">{data.title}</span>
-    </h2>
-  {/if}
-  {#if data.subtitle}
-    <h3 class="mb-8 text-xl font-bold tracking-tight text-teci-blue-dark">
-      <span class="block">{data.subtitle}</span>
-    </h3>
-  {/if}
-  {#if data.links}
-    <div
-      class="flex flex-col items-center justify-center space-x-0 space-y-8 md:flex-row md:justify-around md:space-x-8 md:space-y-0"
-    >
-      {#each data.links as link}
-        <div class="inline-flex w-full max-w-xs shadow-sm">
-          <a
-            href={link.linkURL}
-            class="btn inline-flex w-full items-center px-5 py-3 text-base"
-            >{link.linkText}</a
-          >
-        </div>
-      {/each}
-    </div>
-  {/if}
-</section>

package/src/lib/components/CTABranded.svelte

@@ -1,15 +0,0 @@
-<script>
-  export let data
-</script>
-
-<section class="{(data.color == "pyrosim" ? "bg-pyrosim" : (data.color == "pathfinder" ? "bg-pathfinder" : "bg-teci-blue-dark"))}">
-  <div class="mx-auto max-w-4xl py-10 px-6 text-center sm:py-10 lg:px-8">
-    <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
-      <span class="block">{@html data.heading}</span>
-    </h2>
-    <p class="mt-4 text-lg leading-6 text-gray-200">{@html data.body}</p>
-    <a href={data.cta_url} class="mt-8 inline-flex w-full items-center justify-center border border-transparent bg-white px-5 py-3 text-base font-medium text-gray-900 hover:bg-indigo-50 sm:w-auto">
-      {data.cta}
-    </a>
-  </div>
-</section>

package/src/lib/components/CTASplitImage.svelte

@@ -1,27 +0,0 @@
-<script>
-  export let data
-</script>
-
-<div class="relative {(data.color == "pyrosim" ? "bg-pyrosim" : (data.color == "pathfinder" ? "bg-pathfinder" : "bg-teci-blue-dark"))}">
-  <div class="h-56 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/2">
-    <img class="h-full w-full object-cover" src="https://teci-files.imgix.net/www/images/{data.image}?w=608&fit=clip&auto=compress&auto=format" alt="Image for {data.preheading}">
-  </div>
-  <div class="relative mx-auto max-w-7xl py-12 px-6 lg:px-8 lg:py-16">
-    <div class="md:ml-auto md:w-1/2 md:pl-10">
-      <h2 class="text-lg font-semibold text-gray-300">{data.preheading}</h2>
-      <p class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">{data.heading}</p>
-      <ol class="mt-3 text-lg text-gray-300 list-decimal pl-6">
-        {#each data.items as item}
-          <li>{item.text}</li>
-        {/each}
-      </ol>
-      <div class="mt-8">
-        <div class="inline-flex shadow">
-          <a href={data.cta_url} class="inline-flex items-center justify-center border border-transparent bg-white px-5 py-3 text-base font-medium text-gray-900 hover:bg-gray-50">
-            {data.cta}
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

package/src/lib/components/Card.svelte

@@ -1,93 +0,0 @@
-<script>
-  //Allows icons from https://fonts.google.com/icons?selected=Material+Icons by name in the format 'icon-XXXX'.
-  import Icon from "$lib/components/Icon.svelte";
-  import Wrap from "$lib/components/Wrap.svelte";
-  export let data;
-  export let halfHeight;
-
-  let backgroundImage;
-
-  if (data.image) {
-    if (data.image.includes("gif")) {
-      backgroundImage = "https://teci-files.imgix.net/www/images/" + data.image;
-    } else {
-      backgroundImage =
-        "https://teci-files.imgix.net/www/images/" +
-        data.image +
-        "?w=1200&h=627&fit=crop&auto=compress&auto=format";
-    }
-  }
-</script>
-
-<div
-  class="group flex flex-col items-stretch space-y-2 border border-gray-100 p-2 hover:border-gray-200 hover:shadow-md"
->
-  {#if data.image}
-    <div
-      style="background-image: url({backgroundImage});"
-      class="w-full shrink-0 {halfHeight
-        ? 'aspect-video'
-        : 'aspect-square'} flex items-center justify-center border border-gray-200 bg-cover bg-no-repeat"
-    >
-      <div
-        class="{halfHeight
-          ? 'space-y-4'
-          : 'space-y-8'} flex h-full w-full flex-col items-center justify-center"
-      >
-        {#if data.links}
-          {#each data.links as link}
-            <a
-              href={link.linkURL}
-              class="btn w-3/4 whitespace-nowrap text-center text-sm"
-            >
-              {link.linkText}
-            </a>
-          {/each}
-        {:else}
-          <a href={data.cardURL} class="h-full w-full">
-            <span>&#8203;</span>
-          </a>
-        {/if}
-      </div>
-    </div>
-  {/if}
-  <a href={data.cardURL}>
-    <div class="flex flex-row items-start space-x-2">
-      {#if data.icon}
-        <div class="grid place-items-center">
-          <Icon classes={data.classes} icon={data.icon} />
-        </div>
-      {/if}
-      {#if data.heading || data.subheading}
-        <div class="flex flex-col font-medium leading-none">
-          {#if data.heading}
-            <h3 class="text-2xl leading-none">{data.heading}</h3>
-          {/if}
-          {#if data.subheading}
-            <p class="leading-6 text-teci-blue-dark">{data.subheading}</p>
-          {/if}
-        </div>
-      {/if}
-    </div>
-  </a>
-  {#if data.text}
-    <div class="flex w-full flex-1 flex-col">
-      {@html data.text}
-      {#if data.cardActionStyle == "link"}
-        <a
-          class="mt-2 inline-block text-sm font-medium text-teci-blue-light"
-          href={data.cardURL}
-        >
-          {data.cardLinkText}<span aria-hidden="true"> →</span>
-        </a>
-      {/if}
-    </div>
-  {/if}
-  {#if data.cardActionStyle == "button"}
-    <a class="block shrink-0" href={data.cardURL}>
-      <div class="flex w-full flex-col items-end">
-        <span class="btn text-sm">{data.cardLinkText}</span>
-      </div>
-    </a>
-  {/if}
-</div>

package/src/lib/components/ContentTwoColumns.svelte

@@ -1,47 +0,0 @@
-<script>
-  export let data
-</script>
-
-<div class="overflow-hidden mx-auto max-w-max lg:max-w-7xl">
-  <div class="relative z-10 mb-8 md:mb-2">
-    <div class="max-w-prose text-base lg:max-w-none">
-      <h2 class="font-semibold leading-6 {(data.color == "pyrosim" ? "text-pyrosim" : (data.color == "pathfinder" ? "text-pathfinder" : "text-teci-blue-dark"))}">{data.preheading}</h2>
-      <p class="mt-2 text-3xl font-bold leading-8 tracking-tight text-gray-900 sm:text-4xl">{data.heading}</p>
-    </div>
-  </div>
-  <div class="relative">
-    <svg class="absolute top-0 right-0 -mt-20 -mr-20 hidden md:block md:[overflow-anchor:none]" width="404" height="384" fill="none" viewBox="0 0 404 384" aria-hidden="true">
-      <defs>
-        <pattern id="95e8f2de-6d30-4b7e-8159-f791729db21b" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
-          <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
-        </pattern>
-      </defs>
-      <rect width="404" height="384" fill="url(#95e8f2de-6d30-4b7e-8159-f791729db21b)" />
-    </svg>
-    <svg class="absolute bottom-0 left-0 -mb-20 -ml-20 hidden md:block md:[overflow-anchor:none]" width="404" height="384" fill="none" viewBox="0 0 404 384" aria-hidden="true">
-      <defs>
-        <pattern id="7a00fe67-0343-4a3c-8e81-c145097a3ce0" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
-          <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
-        </pattern>
-      </defs>
-      <rect width="404" height="384" fill="url(#7a00fe67-0343-4a3c-8e81-c145097a3ce0)" />
-    </svg>
-    <div class="relative md:m-4 p-2 bg-white">
-      <div class="prose prose-lg columns-1 text-gray-600 lg:columns-2 lg:max-w-none">
-        {@html data.body}
-      </div>
-      {#if data.ctas}
-      <div class="mt-8 flex gap-x-4 float-right py-1">
-        {#each data.ctas as cta}
-          <a href={cta.url} class="inline-block px-4 py-1.5 text-base font-semibold leading-7 shadow-sm ring-1 ring-gray-900/10 hover:ring-gray-900/20 hover:bg-teci-blue-dark
-          {(cta.color == "pyrosim" ? "bg-pyrosim text-white" : (cta.color == "pathfinder" ? "bg-pathfinder text-white" : (cta.color == "white" ? "bg-white text-gray-600 hover:text-white" : "bg-teci-blue-dark text-white")))}
-          ">
-            {cta.text}
-            <span class="hidden sm:inline {(cta.color == "white" ? "text-gray-600" : "text-white")}" aria-hidden="true">&rarr;</span>
-          </a>
-        {/each}
-      </div>
-      {/if}
-    </div>
-  </div>
-</div>

package/src/lib/components/CountrySelector.svelte

@@ -1,167 +0,0 @@
-<script>
-  import Modal from '$lib/components/Modal.svelte';
-
-  export let resellerModal = true;
-  export let selection = 'sel';
-  export let allowContinue = false;
-
-  let modal;
-  let modalData;
-  let resellerIndex = -1;
-  
-  let resellerArray = [
-    ['BE', 'NL', 'LU'],
-    ['CN', 'HK'],
-    ['CZ', 'SK'],
-    ['EG', 'JO', 'LB', 'OM', 'QA', 'SA', 'AE'],
-    ['FR'],
-    ['DE', 'CH', 'AT', 'LI'],
-    ['GR','CY'],
-    ['IN', 'BD', 'LK', 'CM', 'BT', 'MM'],
-    ['IT', 'HU'],
-    ['JP'],
-    ['KR'],
-    ['PL', 'UA'],
-    ['RU', 'AM', 'AZ', 'BY', 'GE', 'KZ', 'KG', 'MD', 'TJ', 'TM', 'UZ'],
-    ['RO'],
-    ['SG', 'MY', 'ID', 'VN'],
-    ['ES'],
-  ];
-
-  let resellerLinks = [
-    'belgium-netherlands-and-luxembourg',
-    'china-and-hong-kong',
-    'czech-republic-and-slovak-republic',
-    'egypt-jordan-lebanon-oman-qatar-saudi-arabia-united-arab-emirates',
-    'france-and-french-language-customers-in-other-regions',
-    'germany-switzerland-austria-and-liechtenstein',
-    'greece-cyprus',
-    'india-bangladesh-sri-lanka-nepal-bhutan-myanmar',
-    'italy-hungary',
-    'japan',
-    'korea',
-    'poland-ukraine',
-    'russia-and-cis',
-    'romania',
-    'singapore-malaysia-indonesia-and-vietnam',
-    'spain',
-  ];
-
-  function isReseller() {
-    resellerIndex = resellerArray.findIndex((arr) => arr.includes(selection));
-    return resellerIndex > -1;
-  }
-
-  function handleSelection() {
-    if (resellerModal) {
-      if (selection != 'sel' && !isReseller()) {
-        allowContinue = true;
-      } else if (selection != 'sel' && isReseller()) {
-        modal.show();
-        allowContinue = false;
-      } else {
-        allowContinue = false;
-      }
-    }
-  }
-
-  $:modalData = {
-    modalContent: `<h2 class="text-lg leading-6 font-medium text-gray-900">Reseller Required</h2><div class="mt-2 px-7 py-3"><p class="text-sm text-gray-500">Thunderhead cannot sell to you directly, you must use the authorized reseller for your region.</p></div><div class="items-center px-4 py-3"><a href="https://www.thunderheadeng.com/partners#${resellerLinks[resellerIndex]}" id="ok-btn" class="px-4 py-2 bg-teci-blue-light text-white text-base font-medium w-full shadow-sm hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Reseller Contact Information</a></div>`,
-  };
-</script>
-
-<select
-  name="card_country"
-  bind:value="{selection}"
-  on:change="{handleSelection}"
->
-  <option value="sel">Select Your Country</option>
-  <option value="AI">Anguilla</option>
-  <option value="AR">Argentina</option>
-  <option value="AM">Armenia</option>
-  <option value="AU">Australia</option>
-  <option value="AT">Austria</option>
-  <option value="AZ">Azerbaijan</option>
-  <option value="BD">Bangladesh</option>
-  <option value="BY">Belarus</option>
-  <option value="BE">Belgium</option>
-  <option value="BR">Brazil</option>
-  <option value="CA">Canada</option>
-  <option value="CL">Chile</option>
-  <option value="HR">Croatia</option>
-  <option value="CN">China</option>
-  <option value="CR">Costa Rica</option>
-  <option value="CY">Cyprus</option>
-  <option value="CZ">Czech Republic</option>
-  <option value="DK">Denmark</option>
-  <option value="DO">Dominican Republic</option>
-  <option value="EC">Ecuador</option>
-  <option value="EG">Egypt</option>
-  <option value="EE">Estonia</option>
-  <option value="FO">Faroe Islands</option>
-  <option value="FI">Finland</option>
-  <option value="FR">France</option>
-  <option value="GE">Georgia</option>
-  <option value="DE">Germany</option>
-  <option value="GR">Greece</option>
-  <option value="HK">Hong Kong</option>
-  <option value="HU">Hungary</option>
-  <option value="IS">Iceland</option>
-  <option value="IN">India</option>
-  <option value="ID">Indonesia</option>
-  <option value="IE">Ireland</option>
-  <option value="IL">Israel</option>
-  <option value="IT">Italy</option>
-  <option value="JM">Jamaica</option>
-  <option value="JP">Japan</option>
-  <option value="JO">Jordan</option>
-  <option value="KZ">Kazakhstan</option>
-  <option value="KW">Kuwait</option>
-  <option value="KG">Kyrgyzstan</option>
-  <option value="LV">Latvia</option>
-  <option value="LB">Lebanon</option>
-  <option value="LT">Lithuania</option>
-  <option value="LU">Luxembourg</option>
-  <option value="MY">Malaysia</option>
-  <option value="MT">Malta</option>
-  <option value="MX">Mexico</option>
-  <option value="MD">Moldova</option>
-  <option value="MM">Myanmar</option>
-  <option value="CM">Nepal</option>
-  <option value="NL">Netherlands</option>
-  <option value="NZ">New Zealand</option>
-  <option value="NO">Norway</option>
-  <option value="OM">Oman</option>
-  <option value="PE">Peru</option>
-  <option value="PH">Philippines</option>
-  <option value="PL">Poland</option>
-  <option value="PT">Portugal</option>
-  <option value="QA">Qatar</option>
-  <option value="RO">Romania</option>
-  <option value="RU">Russia</option>
-  <option value="SA">Saudi Arabia</option>
-  <option value="SG">Singapore</option>
-  <option value="SK">Slovakia</option>
-  <option value="SI">Slovenia</option>
-  <option value="ZA">South Africa</option>
-  <option value="KR">South Korea</option>
-  <option value="ES">Spain</option>
-  <option value="LK">Sri Lanka</option>
-  <option value="SE">Sweden</option>
-  <option value="CH">Switzerland</option>
-  <option value="TW">Taiwan</option>
-  <option value="TJ">Tajikistan</option>
-  <option value="TH">Thailand</option>
-  <option value="TR">Turkey</option>
-  <option value="TM">Turkmenistan</option>
-  <option value="UA">Ukraine</option>
-  <option value="AE">United Arab Emirates</option>
-  <option value="GB">United Kingdom</option>
-  <option value="US">United States</option>
-  <option value="UY">Uruguay</option>
-  <option value="UZ">Uzbekistan</option>
-  <option value="VE">Venezuela</option>
-  <option value="VN">Viet Nam</option>
-</select>
-
-<Modal bind:this="{modal}" bind:data="{modalData}" />

package/src/lib/components/FeatureGrid.svelte

@@ -1,40 +0,0 @@
-<script>
-  export let data
-</script>
-
-<section>
-  <div class="sm:text-center">
-    {#if data.preheading}
-    <p class="mb-2 text-lg font-semibold leading-8 
-      {(data.color == "pyrosim" ? "text-pyrosim" : (data.color == "pathfinder" ? "text-pathfinder" : "text-teci-blue-dark"))}
-    ">
-        {data.preheading}
-    </p>
-    {/if}
-    <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
-      {data.heading}
-    </h2>
-    {#if data.subheading}
-      <p class="mx-auto mt-6 max-w-2xl text-lg leading-8 text-gray-600">
-        {data.subheading}
-      </p>
-    {/if}
-  </div>
-  <div class="mt-12 max-w-lg sm:mx-auto md:max-w-none">
-    <div class="grid grid-cols-1 gap-y-8 md:grid-cols-2 md:gap-x-12">
-      {#each data.blocks as block}
-        <div class="relative flex flex-row gap-6">
-          <div class="hidden sm:flex h-12 w-12 items-center justify-center text-white sm:shrink-0 flex-shrink-0 
-          {(data.color == "pyrosim" ? "bg-pyrosim" : (data.color == "pathfinder" ? "bg-pathfinder" : "bg-teci-blue-dark"))}
-          ">
-            <Icon classes="w-auto" icon={block.icon} />
-          </div>
-          <div class="sm:min-w-0 sm:flex-1">
-            <p class="text-lg font-semibold leading-8 text-gray-900">{block.heading}</p>
-            <p class="mt-2 text-base leading-7 text-gray-600">{block.body}</p>
-          </div>
-        </div>
-      {/each}
-    </div>
-  </div>
-</section>

package/src/lib/components/Figure.svelte

@@ -1,37 +0,0 @@
-<script>
-  export let image;
-  export let title;
-  export let caption;
-  export let link;
-
-  let figureImage;
-  let figureLink;
-
-  if (image.startsWith("http")) {
-    figureImage = image;
-    figureLink = link ? link : image;
-  } else if (image.includes("gif")) {
-    figureImage = "https://teci-files.imgix.net/www/images/" + image;
-    figureLink = link ? link : "https://teci-files.imgix.net/www/images/" + image;
-  } else {
-    figureImage = "https://teci-files.imgix.net/www/images/" +
-      image +
-      "?auto=compress&auto=format";
-    figureLink = link ? link : "https://teci-files.imgix.net/www/images/" + image;
-  }
-</script>
-
-{#if image}
-  <section class="not-prose mb-8 flex justify-center">
-    <figure
-      class="mx-auto w-auto border border-slate-100 bg-white p-2 shadow-lg"
-    >
-      <a class="inline-block w-full bg-slate-200 p-1" href={figureLink}>
-        <img class="mx-auto w-auto" src={figureImage} alt={title} {title} />
-      </a>
-      {#if caption}
-        <figcaption class="p-2 text-center">{@html caption}</figcaption>
-      {/if}
-    </figure>
-  </section>
-{/if}