tecitheme 0.5.2 → 0.6.0

package/README.md

@@ -12,17 +12,330 @@ This theme system is released on NPM to make it easier to include in all Thunder
 
 ### Authenticate to NPM
 
-1. `npm login`
-1. Enter username and password for the npm account.
+1. `npm login --auth-type=legacy`
+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. Run `npm install` to update the package-lock.json file.
 1. Commit and push to origin.
 
 ### Package the project and publish
 
 1. `npm run package`
 1. `npm publish`
+
+## Theme Components
+
+The following components are available in the ThunderTheme Design System.
+Each component can have one or more of the three use cases listed below.
+
+- **Page Section**: This component can be used in the Front Matter of a markdown file for a particular page.
+This will result in that component being added into the page layout in the order that it appears in the `page_sections` array.
+- **Content Component**: This component can be used within the Markdown content like a 'shortcode'.
+- **Layout Component**: This component is not typically used directly, and is part of a page layout or as a child component in another component.
+
+### Accordion
+
+Provides a list of prompts that can be expanded for more information.
+
+- Page Section
+- Content Component
+
+#### Accordion Inputs
+
+- **title** - String - Text for the Accordion title
+- **prompts** - Array - Each expandable element
+  - **title** - String - Text for element prompt.
+  - **content** - String - HTML - Text shown when prompt is expanded.
+
+### Banner
+
+Announcement Banner placed under the Header component in `src/routes/+layout.svelte`.
+Input values are set in the `src/lib/site_config.json` global config file.
+
+- Layout Component
+
+#### Banner Inputs
+
+- **showCTA** - Boolean - Show CTA Button in Banner
+- **shortText** - String - Shorter version of Banner text for narrower screens.
+- **longText** - String - Longer version of Banner text for wider screens.
+- **ctaText** - String - CTA Button text
+- **ctaLink** - String - CTA Button URL
+- **allowClose** - Boolean - Add close/hide button to banner.
+
+### Button
+
+Basic Button component can trigger actions with a `button` element or link to URLs as an `a` element.
+Must pass `action = true` and use an `on:click` function for use as a button.
+
+- Content Component
+- Layout Component
+
+#### Button Inputs
+
+- **action** - Boolean - If `true`, will use the `button` element.
+Must also specify an `on:click` function for the button.
+- **url** - String - URL for `a` element href.
+- **text** - String - Text for the button.
+- **color** - String - Uses the `getColorStyles` function with the 'button' style option.
+- **justify** - String - `left` or `right`, defaults to `center` if not specified.
+
+### Card
+
+- Layout Component
+
+#### Card Inputs
+
+- **halfHeight** - Boolean - If `halfHeight` is true, then card image aspect ratio is set to 'video' (16:9), else it is set to the default of 'square' (1:1).
+- **image** - String - Background image filename.
+- **icon** - String - Background image filename.
+- **heading** - String - Background image filename.
+- **subheading** - String - Background image filename.
+- **subheadingColor** - String - Background image filename.
+- **cardActionStyle** - String - Background image filename.
+- **cardLinkColor** - String - Background image filename.
+- **cardLinkText** - String - Background image filename.
+- **cardURL** - String - Background image filename.
+- **links** - Array - Background image filename.
+  - **url** - Array - Background image filename.
+  - **text** - Array - Background image filename.
+  - **color** - Array - Background image filename.
+
+### ContentTwoColumns
+
+- Page Section
+
+#### ContentTwoColumns Inputs
+
+- **param** - Type - Text
+
+### CountrySelector
+
+- Layout Component
+
+#### CountrySelector Inputs
+
+- **param** - Type - Text
+
+### CTA
+
+- Page Section
+- Content Component
+- Layout Component
+
+### CTA Inputs
+
+- **param** - Type - Text
+
+### CTASplitImage
+
+- Page Section
+- Content Component
+- Layout Component
+
+#### CTASplitImage Inputs
+
+- **param** - Type - Text
+
+### FeatureGrid
+
+- Page Section
+- Content Component
+- Layout Component
+
+#### FeatureGrid Inputs
+
+- **param** - Type - Text
+
+### Figure
+
+- Page Section
+- Content Component
+- Layout Component
+
+#### Figure Inputs
+
+- **param** - Type - Text
+
+### Footer
+
+- Layout Component
+
+#### Footer Inputs
+
+- **param** - Type - Text
+
+### Header
+
+- Page Section
+- Content Component
+- Layout Component
+
+#### Header Inputs
+
+- **param** - Type - Text
+
+### HeadingCentered
+
+- Page Section
+- Content Component
+- Layout Component
+
+#### HeadingCentered Inputs
+
+- **param** - Type - Text
+
+### Hero
+
+- Page Section
+- Content Component
+- Layout Component
+
+#### Hero Inputs
+
+- **param** - Type - Text
+
+### Icon
+
+- Page Section
+- Content Component
+- Layout Component
+
+#### Icon Inputs
+
+- **param** - Type - Text
+
+### LogoCloud
+
+- Page Section
+- Content Component
+- Layout Component
+
+#### LogoCloud Inputs
+
+- **param** - Type - Text
+
+### Math
+
+- Page Section
+- Content Component
+- Layout Component
+
+#### Math Inputs
+
+- **param** - Type - Text
+
+### MediaFeature
+
+- Page Section
+- Content Component
+- Layout Component
+
+### MediaFeature Inputs
+
+- **param** - Type - Text
+
+### Modal
+
+- Page Section
+- Content Component
+- Layout Component
+
+#### Modal Inputs
+
+- **param** - Type - Text
+
+### NewsGrid
+
+- Page Section
+- Content Component
+- Layout Component
+
+#### NewsGrid Inputs
+
+- **param** - Type - Text
+
+### PricingTable
+
+- Page Section
+- Content Component
+- Layout Component
+
+#### PricingTable Inputs
+
+- **param** - Type - Text
+
+### SidebarContent
+
+- Page Section
+- Content Component
+- Layout Component
+
+#### SidebarContent Inputs
+
+- **param** - Type - Text
+
+### Stats
+
+- Page Section
+- Content Component
+- Layout Component
+
+#### Stats Inputs
+
+- **param** - Type - Text
+
+### Testimonial
+
+- Page Section
+- Content Component
+- Layout Component
+
+#### Testimonial Inputs
+
+- **param** - Type - Text
+
+### ThreeColumn
+
+- Page Section
+- Content Component
+- Layout Component
+
+#### ThreeColumn Inputs
+
+- **param** - Type - Text
+
+### TrialForm
+
+- Page Section
+- Content Component
+- Layout Component
+
+#### TrialForm Inputs
+
+- **param** - Type - Text
+
+### Video
+
+- Page Section
+- Content Component
+- Layout Component
+
+#### Video Inputs
+
+- **param** - Type - Text
+
+### Wrap
+
+- Page Section
+- Content Component
+- Layout Component
+
+#### Wrap Inputs
+
+- **param** - Type - Text

package/dist/components/Accordion.svelte

@@ -64,7 +64,7 @@
         </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 text-gray-600" class:hidden={!openPrompts.includes(`prompt-${i}`)}>
+        <p class="text-base leading-7" class:hidden={!openPrompts.includes(`prompt-${i}`)}>
           {@html prompt.content}
         </p>
       </dd>

package/dist/components/Button.svelte

@@ -1,12 +1,20 @@
 <script>
+  import { getColorStyles } from '../utils'
+  export let action;
   export let url;
   export let text;
+  export let color;
+  export let justify;
 </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 class="not-prose flex w-full {justify=="left"?"justify-start":(justify=="right"?"justify-end":"justify-center")} ">
+  {#if !action}
+  <a href={url} class="btn inline-block {getColorStyles('button', color)}" rel="external">
+    {text}
+  </a>
+  {:else}
+  <button on:click class="btn inline-block {getColorStyles('button', color)}">
+    {text}
+  </button>
+  {/if}
 </div>

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

@@ -2,9 +2,14 @@
 /** @typedef {typeof __propDef.events}  ButtonEvents */
 /** @typedef {typeof __propDef.slots}  ButtonSlots */
 export default class Button extends SvelteComponentTyped<{
+    action: any;
     url: any;
     text: any;
+    color: any;
+    justify: any;
 }, {
+    click: MouseEvent;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {}> {
 }
@@ -14,10 +19,15 @@ export type ButtonSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        action: any;
         url: any;
         text: any;
+        color: any;
+        justify: any;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/components/CTA.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { getColorStyles } from '../utils'
   export let data;
   let id
 
@@ -7,32 +8,41 @@
   }
 </script>
 
-<!-- This example requires Tailwind CSS v2.0+ -->
-<section {id} class="mx-auto mb-12 px-4 text-center sm:px-6 lg:px-8">
+<section {id} class="{data.bgColor?'p-8':''} {getColorStyles('background', data.bgColor)}
+  {data.fullwidth?'w-full mx-auto':'max-w-3xl mx-auto'}
+  {data.justifyText?(data.justifyText=='left'?'text-left':(data.justifyText=='right'?'text-right':'')):'text-center'}
+  "
+>
   {#if data.title}
-    <h2
-      class="{data.subtitle
-        ? 'mb-4'
-        : 'mb-8'} text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"
-    >
+    <h2 class="text-3xl font-bold tracking-tight 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">
+    <h3 class="text-xl font-bold tracking-tight
+    {data.title?'pt-4':''}
+    {getColorStyles('text', data.subtitleColor)} 
+    ">
       <span class="block">{data.subtitle}</span>
     </h3>
   {/if}
+  {#if data.text}
+  <div class="prose max-w-none {(data.title||data.subtitle)?'pt-4':''} {getColorStyles('background', data.bgColor)}">
+    <p>{data.text}</p>
+  </div>
+  {/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"
+      class="{(data.title||data.subtitle||data.text)?'pt-4':''} flex flex-col items-center justify-center space-x-0 space-y-8 md:flex-row md:space-x-8 md:space-y-0
+      {data.justifyButton?(data.justifyButton=='left'?'md:justify-start':(data.justifyButton=='right'?'md:justify-end':'md:justify-center')):'md:justify-center'}"
     >
       {#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
+            href={link.url}
+            class="btn inline-flex w-full items-center px-5 py-3 text-base
+            {getColorStyles('button', link.color)}"
+            >{link.text}</a
           >
         </div>
       {/each}

package/dist/components/CTASplitImage.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { getColorStyles } from '../utils'
+  import Button from './Button.svelte'
   export let data
   let id
 
@@ -7,26 +9,26 @@
   }
 </script>
 
-<section {id} class="relative {(data.color == "pyrosim" ? "bg-pyrosim" : (data.color == "pathfinder" ? "bg-pathfinder" : (data.color == "ventus" ? "bg-ventus" : "bg-teci-blue-dark")))}">
+<section {id} class="relative {getColorStyles('background', data.color)}">
   <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">
+      <h2 class="text-lg font-semibold {getColorStyles('text', data.preheadingColor)}">{data.preheading}</h2>
+      <p class="mt-2 text-3xl font-bold tracking-tight sm:text-4xl {getColorStyles('text', data.headingColor)}">{data.heading}</p>
+      <svelte:element this={(data.listStyle?data.listStyle:'ul')}
+        class="mt-3 text-lg pl-6 
+        {data.listStyle=='ol'?'list-decimal':'list-disc'}
+        {getColorStyles('text', data.listColor)}
+        ">
         {#each data.items as item}
           <li>{item.text}</li>
         {/each}
-      </ol>
+      </svelte:element>
       <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>
+        <Button text={data.cta} url={data.cta_url} color={data.cta_color} justify='left' />
       </div>
     </div>
   </div>
-</section>
+</section>

package/dist/components/Card.svelte

@@ -1,5 +1,8 @@
 <script>
+import Button from './Button.svelte'
+
   //Allows icons from https://fonts.google.com/icons?selected=Material+Icons by name in the format 'icon-XXXX'.
+  import { getColorStyles } from '../utils'
   import Icon from "./Icon.svelte";
   export let data;
   export let halfHeight;
@@ -18,15 +21,11 @@
   }
 </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"
->
+<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"
+      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
@@ -35,11 +34,8 @@
       >
         {#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 href={link.url} class="btn w-3/4 whitespace-nowrap text-center text-sm {getColorStyles('button', link.color)}">
+              {link.text}
             </a>
           {/each}
         {:else}
@@ -60,10 +56,12 @@
       {#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 text-gray-900">{data.heading}</h3>
           {/if}
           {#if data.subheading}
-            <p class="leading-6 text-teci-blue-dark">{data.subheading}</p>
+            <p class="leading-6 {getColorStyles('text', data.subheadingColor)}">
+              {data.subheading}
+            </p>
           {/if}
         </div>
       {/if}
@@ -83,10 +81,11 @@
     </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>
+    <Button
+      url={data.cardURL}
+      text={data.cardLinkText}
+      color={data.cardLinkColor}
+      justify="right"
+    />
   {/if}
-</div>
+</div>

package/dist/components/ContentTwoColumns.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { getColorStyles } from '../utils'
   export let data
   let id
 
@@ -10,15 +11,15 @@
 <section {id} 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" : (data.color == "ventus" ? "text-ventus" : "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>
+      <h2 class="font-semibold leading-6 {getColorStyles('text', data.color)}">{data.preheading}</h2>
+      <p class="mt-2 text-3xl font-bold leading-8 tracking-tight sm:text-4xl text-black">{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" />
+          <rect x="0" y="0" width="4" height="4" class="{getColorStyles('text', data.color)} opacity-20" fill="currentColor" />
         </pattern>
       </defs>
       <rect width="404" height="384" fill="url(#95e8f2de-6d30-4b7e-8159-f791729db21b)" />
@@ -26,27 +27,28 @@
     <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" />
+          <rect x="0" y="0" width="4" height="4" class="{getColorStyles('text', data.color)} opacity-20" 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">
+      <div class="prose prose-lg columns-1 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 == "ventus" ? "bg-ventus text-white" : (cta.color == "white" ? "bg-white text-gray-600 hover:text-white" : "bg-teci-blue-dark text-white"))))}
-          ">
+          <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
+            {getColorStyles('button', cta.color)}"
+          >
             {cta.text}
-            <span class="hidden sm:inline {(cta.color == "white" ? "text-gray-600" : "text-white")}" aria-hidden="true">&rarr;</span>
+            <span class="hidden sm:inline" aria-hidden="true">&rarr;</span>
           </a>
         {/each}
       </div>
       {/if}
     </div>
   </div>
-</section>
+</section>

package/dist/components/FeatureGrid.svelte

@@ -1,6 +1,7 @@
 <script>
 import Icon from './Icon.svelte'
 
+  import { getColorStyles } from '../utils'
   export let data
   let id
 
@@ -12,9 +13,7 @@ import Icon from './Icon.svelte'
 <section {id} class="overflow-hidden mx-auto max-w-max lg:max-w-7xl">
   <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" : (data.color == "ventus" ? "text-ventus" : "text-teci-blue-dark")))}
-    ">
+    <p class="mb-2 text-lg font-semibold leading-8 {getColorStyles('text', data.color)}">
         {data.preheading}
     </p>
     {/if}
@@ -22,7 +21,7 @@ import Icon from './Icon.svelte'
       {data.heading}
     </h2>
     {#if data.subheading}
-      <p class="mx-auto mt-6 max-w-2xl text-lg leading-8 text-gray-600">
+      <p class="mx-auto mt-6 max-w-2xl text-lg leading-8">
         {data.subheading}
       </p>
     {/if}
@@ -31,14 +30,12 @@ import Icon from './Icon.svelte'
     <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" : (data.color == "ventus" ? "bg-ventus" : "bg-teci-blue-dark")))}
-          ">
+          <div class="hidden sm:flex h-12 w-12 items-center justify-center sm:shrink-0 flex-shrink-0 {getColorStyles('background', data.color)}">
             <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>
+            <p class="mt-2 text-base leading-7">{block.body}</p>
           </div>
         </div>
       {/each}