tecitheme 0.0.17 → 0.0.20

package/README.md

@@ -5,3 +5,24 @@ SvelteKit Design System for Thunderhead web properties.
 NPM package available at: https://www.npmjs.com/package/tecitheme
 
 See https://tecitheme.netlify.app/ for demo, documentation and component details.
+
+## How to update the NPM package
+
+This theme system is released on NPM to make it easier to include in all Thunderhead web properties.
+### Authenticate to NPM
+
+1. `npm adduser`
+1. Enter username and password for the npm account.
+1. Enter email address
+1. Enter 2FA Code
+
+### Update the package version
+
+1. Edit package.json with the next version.
+1. Commit and push to origin.
+
+### Package the project and publish
+
+1. `npm run package`
+1. `cd package`
+1. `npm publish`

package/components/CTA.svelte

@@ -3,26 +3,24 @@
 </script>
 
 <!-- This example requires Tailwind CSS v2.0+ -->
-<section class="mb-12">
-  <div class="mx-auto text-center px-4 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}
-      <h2 class="mb-8 text-xl font-bold tracking-tight text-teci-blue-dark">
-        <span class="block">{data.subtitle}</span>
-      </h2>
-    {/if}
-    {#if data.links}
-      <div class="flex flex-col space-x-0 space-y-8 justify-center items-center md:space-x-8 md:space-y-0 md:flex-row md:justify-around">
-        {#each data.links as link}
-          <div class="inline-flex shadow w-full max-w-xs">
-            <a href={link.linkURL} class="whitespace-nowrap w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium text-white bg-teci-blue-light hover:bg-teci-blue-dark">{link.linkText}</a>
-          </div>
-        {/each}
+<section class="mb-12 mx-auto text-center px-4 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 space-x-0 space-y-8 justify-center items-center md:space-x-8 md:space-y-0 md:flex-row md:justify-around">
+    {#each data.links as link}
+      <div class="inline-flex shadow-sm w-full max-w-xs">
+        <a href={link.linkURL} class="btn w-full inline-flex items-center px-5 py-3 text-base">{link.linkText}</a>
       </div>
-    {/if}
+    {/each}
   </div>
+{/if}
 </section>

package/components/Card.svelte

@@ -1,46 +1,65 @@
 <script>
   //Allows icons from https://fonts.google.com/icons?selected=Material+Icons by name in the format 'icon-XXXX'.
-
-	import Icon from './Icon.svelte';
+  import Icon from './Icon.svelte';
+  import Wrap from './Wrap.svelte';
   export let data;
   export let halfHeight;
 </script>
 
-<div class="group space-y-4">
+<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 class="w-full {halfHeight ? 'aspect-video' : 'aspect-square'} bg-cover bg-no-repeat shadow-md border border-gray-200 flex items-center justify-center" 
-    style="background-image: url({data.image});"
-  >
-    <div class="md:group-hover:backdrop-grayscale py-8 flex flex-col w-full h-full justify-center items-center {halfHeight ? 'space-y-4' : 'space-y-8'} transition">
-      {#each data.links as link}
-        <a href={link.linkURL} class="whitespace-nowrap hidden md:group-hover:block btn w-3/4 text-center">{link.linkText}</a>
-      {/each}
+    <div style="background-image: url({data.image});"
+      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>
-  </div>
   {/if}
-  <div>
-    <a href={data.cardURL}>
-      <div class="flex flex-row items-start space-x-4 mb-2">
-        {#if data.icon}
+  <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}
-        <div class="leading-none font-medium flex flex-col">
+      {/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>
+            <h3 class="text-2xl leading-none">{data.heading}</h3>
           {/if}
           {#if data.subheading}
-          <p class="text-teci-blue-dark leading-6">{data.subheading}</p>
+            <p class="leading-6 text-teci-blue-dark">{data.subheading}</p>
           {/if}
         </div>
-      </div>
-      {#if data.text}
-      <div class="text-lg">
-        <p class="text-gray-500">{data.text}</p>
-        <span class="text-sm font-medium text-teci-blue-light lg:mt-4">{data.cardLinkText}<span aria-hidden="true">&nbsp;→</span></span>
-      </div>
       {/if}
+    </div>
+  </a>
+  {#if data.text}
+    <div class="flex w-full flex-1 flex-col">
+      {data.text}
+      {#if data.cardActionStyle == 'link'}
+      <a class="inline-block mt-2 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>
-  </div>
-</div>
+  {/if}
+</div>

package/components/Footer.svelte

@@ -48,7 +48,7 @@
                   </a>
                 </li>
                 <li>
-                  <a href="https://www.thunderheadeng.com/" class="text-base text-gray-300 hover:text-white">
+                  <a href="https://www.thunderheadeng.com/other" class="text-base text-gray-300 hover:text-white">
                     Other Tools
                   </a>
                 </li>