tecitheme 0.0.18 → 0.0.21

package/README.md

@@ -12,17 +12,17 @@ This theme system is released on NPM to make it easier to include in all Thunder
 ### Authenticate to NPM
 
 1. `npm adduser`
-2. Enter username and password for the npm account.
-3. Enter email address
-3. Enter 2FA Code
+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.
-2. Commit and push to origin.
+1. Commit and push to origin.
 
 ### Package the project and publish
 
 1. `npm run package`
-2. `cd package`
-3. `npm publish`
+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-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>
-        {/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,52 +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>
 
-<Wrap tag='a' when={!data.links} href={data.cardURL}>
-<div class="group space-y-4 p-2 border border-gray-100 hover:border-gray-200 hover:shadow-md">
+<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({data.image});" class="w-full {halfHeight ? 'aspect-video' : 'aspect-square'} bg-cover bg-no-repeat border border-gray-200 flex items-center justify-center">
-    <div class="{halfHeight ? 'space-y-4' : 'space-y-8'} p-4 flex flex-col w-full h-full justify-center items-center">
-      {#if data.links}
-        {#each data.links as link}
-          <a href={link.linkURL} class="whitespace-nowrap text-sm btn w-3/4 text-center">{link.linkText}</a>
-        {/each}
-      {:else}
-        <span>&#8203;</span>
-      {/if}
+    <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 w-full">
-        <p class="text-gray-500">{data.text}</p>
-        <div class="w-full flex flex-col items-end">
-          <span class="inline-block max-w-sm text-center text-sm font-medium text-white mt-1 btn">{data.cardLinkText}</span>
-        </div>
-      </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>
+  {/if}
 </div>
-</Wrap>

package/components/Figure.svelte

@@ -2,11 +2,12 @@
   export let image;
   export let title;
   export let caption;
+  export let link;
 </script>
 
 <section class="flex justify-center not-prose mb-8">
   <figure class="bg-white w-auto mx-auto shadow-lg border border-slate-100 p-2">
-    <a href={image}>
+    <a href={link ? link : image}>
       <img class="w-full" src={image} alt={title} title={title}>
     </a>
     {#if caption}

package/components/Figure.svelte.d.ts

@@ -5,6 +5,7 @@ export default class Figure extends SvelteComponentTyped<{
     image: any;
     title: any;
     caption: any;
+    link: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -18,6 +19,7 @@ declare const __propDef: {
         image: any;
         title: any;
         caption: any;
+        link: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;