tecitheme 0.14.1 → 0.14.3

package/dist/components/BentoGrid.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { getColorStyles, getGridItemSizeStyles, getGridSizeStyles, getTeciImageURL, makeIdString, triggerWhenVisible } from "../utils";
+    import { conditionalTransition, getColorStyles, getGridItemSizeStyles, getGridSizeStyles, getTeciImageURL, makeIdString, triggerWhenVisible } from "../utils";
     import { onMount } from "svelte";
     import { cubicInOut } from "svelte/easing";
     import { writable } from "svelte/store";
@@ -17,7 +17,8 @@
     rows,
     button,
     items,
-    animateOnScroll = true
+    animateOnScroll = true,
+    animate = true,
   } = data;
 
   let id = makeIdString(name);
@@ -25,7 +26,9 @@
   // Detect if the heading is visible, then trigger animations
   let scrollTargetVisible = writable(false);
   onMount(() => {
-    triggerWhenVisible(scrollTargetVisible, id+"Heading", !animateOnScroll)
+    if (animate) {
+      triggerWhenVisible(scrollTargetVisible, id+"Heading", !animateOnScroll)
+    }
   })
 </script>
 
@@ -33,18 +36,18 @@
   <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
 
     <!-- Eyebrow Text -->
-    <h2 class="font-semibold {getColorStyles("text", color)} text-center w-full">{eyebrowText}</h2>
+    <h2 class="font-semibold {getColorStyles("text", color)} text-center w-full">{eyebrowText ? eyebrowText : ""}</h2>
 
     <!-- Heading -->
-    <a id={id+"Heading"} href={`#${id}`} class="mt-2 text-balance text-center text-4xl font-semibold tracking-tight sm:text-5xl w-full text-gray-900 mx-auto"><p>{heading}</p></a>
+    <a id={id+"Heading"} href={`#${id}`} class="mt-2 text-balance text-center text-4xl font-semibold tracking-tight sm:text-5xl w-full text-gray-900 mx-auto"><p>{heading ? heading : ""}</p></a>
 
     <!-- Grid -->
     <div class="mt-10 grid grid-cols-1 gap-4 sm:mt-16 {getGridSizeStyles(columns, rows)}">
 
       {#each items as item, index}
-        {#if $scrollTargetVisible}
+        {#if $scrollTargetVisible || !animate}
           <div class="relative {getGridItemSizeStyles(item.width, item.height)}"
-            in:fly={{ delay: index*100, duration: 1500, easing: cubicInOut, x:'100%'}}
+            in:conditionalTransition={{ fn:fly, condition:animate, delay: index*100, duration: 1500, easing: cubicInOut, x:'100%'}}
           >
             <a class="relative flex h-full flex-col overflow-hidden shadow ring-1 ring-black/5 {item.url ? "hover:scale-105 transition ease-in-out delay-75" : ""}" href={item.url} rel="external">
               
@@ -53,8 +56,11 @@
 
               <!-- Text -->
               <div class="p-10 pt-4">
-                <h3 class="text-sm/4 font-semibold {getColorStyles("text", color)}">{item.eyebrowText}</h3>
-                <p class="mt-2 text-lg font-semibold tracking-tight text-gray-900">{item.heading}</p>
+                
+                <h3 class="{item.eyebrowText ? "" : "h-4"} text-sm/4 font-semibold {getColorStyles("text", color)}">{item.eyebrowText ? item.eyebrowText : ""}</h3>
+
+                <p class="{item.heading ? "" : "h-6"} mt-2 text-lg font-semibold tracking-tight text-gray-900">{item.heading ? item.heading : ""}</p>
+
                 <p class="mt-2 text-sm">{item.text}</p>
               </div>
             </a>

package/dist/components/CTATwoColumn.svelte

@@ -17,7 +17,8 @@
     color,
     image,
     button,
-    animateOnScroll = true
+    animateOnScroll = true,
+    animate = true
   } = data;
 
   let id = makeIdString(name);
@@ -25,12 +26,14 @@
   // Detect if the heading is visible, then trigger animations
   let scrollTargetVisible = writable(false);
   onMount(() => {
-    triggerWhenVisible(scrollTargetVisible, id+"Heading", !animateOnScroll)
+    if (animate) {
+      triggerWhenVisible(scrollTargetVisible, id+"Heading", !animateOnScroll)
+    }
   })
 
 </script>
 
-<div {id} class="{getColorStyles("background", color)} py-16">
+<div {id} class="{getColorStyles("background", color)} py-8 lg:py-12">
   <div class="relative isolate">
     <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
       <div class="mx-auto flex max-w-2xl flex-col gap-16 px-6 py-16 sm:p-8 lg:mx-0 lg:max-w-none lg:flex-row lg:items-center lg:py-20 xl:gap-x-20 xl:px-20">
@@ -45,9 +48,9 @@
         <div class="w-full flex-auto">
 
           <!-- Heading -->
-          <a id={id+"Heading"} href={`#${id}`} class="text-4xl font-semibold tracking-tight text-pretty sm:text-5xl">{heading}</a>
+          <a id={id+"Heading"} href={`#${id}`} class="text-4xl font-semibold tracking-tight text-pretty sm:text-5xl text-gray-900">{heading}</a>
 
-          {#if $scrollTargetVisible}
+          {#if $scrollTargetVisible || !animate}
             <!-- Text -->
             <p 
               class="mt-6 text-lg/8 text-pretty" 
@@ -69,12 +72,12 @@
                 </li>
               {/each}
             </ul>
-          {:else}
+          {:else if animate}
             <div class="h-32"></div>
           {/if}
 
           <!-- Button -->
-          {#if $scrollTargetVisible}
+          {#if $scrollTargetVisible || !animate}
             <div 
               class="mt-10 flex"
               in:fly={{ delay: 300, duration: 1750, easing: cubicInOut, x:"100%"}}

package/dist/components/FeatureAlternatingWithTestimonial.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getColorStyles, makeIdString, triggerWhenVisible } from "../utils";
+  import { conditionalTransition, getColorStyles, makeIdString, triggerWhenVisible } from "../utils";
   import { onMount } from "svelte";
   import { fly, fade } from "svelte/transition";
   import Button from "./Button.svelte";
@@ -19,7 +19,8 @@
     icon,
     testimonial,
     textPosition,
-    animateOnScroll = true
+    animateOnScroll = true,
+    animate = true
   } = data;
 
   // Initialize Text Position if left undefined
@@ -28,7 +29,9 @@
   // Detect if the heading is visible, then trigger animations
   let scrollTargetVisible = writable(false);
   onMount(() => {
-    triggerWhenVisible(scrollTargetVisible, id+"text", !animateOnScroll)
+    if (animate) {
+      triggerWhenVisible(scrollTargetVisible, id+"text", !animateOnScroll)
+    }
   })
 
 </script>
@@ -40,7 +43,7 @@
 
       <!-- Text -->
       <div id={id+"text"} class="mx-auto max-w-xl px-6 lg:mx-0 lg:max-w-none lg:px-0 lg:py-16 {textPosition == "left" ? "" : "lg-col-start-2"} relative">
-        {#if !$scrollTargetVisible}
+        {#if !$scrollTargetVisible && animate}
           <div 
             out:fade={{delay: 0, duration: 500, easing:cubicInOut}}
             class="absolute top-0 bottom-0 w-full bg-gray-200 animate-pulse my-16"
@@ -50,38 +53,45 @@
         <div>
 
           <!-- Icon -->
-          {#if icon && $scrollTargetVisible}
+          {#if icon && ($scrollTargetVisible || !animate)}
             <div 
               class="hidden sm:flex size-16 items-center justify-center sm:shrink-0 flex-shrink-0 {getColorStyles("background", color)} text-3xl"
-              in:fade={{delay: 200, duration: 750, easing:cubicInOut}}
-              out:fade={{delay: 200, duration: 750, easing:cubicInOut}}
+              in:conditionalTransition={{ fn: fade, condition: animate, delay: 200, duration: 750, easing:cubicInOut}}
+              out:conditionalTransition={{fn: fade, condition: animate, delay: 200, duration: 750, easing:cubicInOut}}
             >
               <Icon icon={icon.name} classes={"m-8 " + (icon.classes != undefined ? icon.classes : "")}/>
             </div>
           {/if}
 
           <!-- Heading, Text, and Button -->
-          {#if $scrollTargetVisible}
+          {#if $scrollTargetVisible || !animate}
             <div 
               class="mt-6"
-              in:fade={{delay: 200, duration: 750, easing:cubicInOut}}
-              out:fade={{delay: 200, duration: 750, easing:cubicInOut}}
+              in:conditionalTransition={{ fn: fade, condition: animate, delay: 200, duration: 750, easing:cubicInOut}}
+              out:conditionalTransition={{fn: fade, condition: animate, delay: 200, duration: 750, easing:cubicInOut}}
             >
-              <a href={`#${id}`} class="text-3xl font-bold tracking-tight text-gray-900">{heading}</a>
+              {#if heading}
+                <a href={`#${id}`} class="text-3xl font-bold tracking-tight text-gray-900">{heading}</a>
+              {/if}
+              
               <p class="mt-4 text-lg text-gray-500">{text}</p>
-              <div class="mt-6">
-                <Button url={button.url} text={button.text} color={color} justify={button.justify} fullwidth={button.fullwidth}/>
-              </div>
+
+              {#if button}
+                <div class="mt-6">
+                  <Button url={button.url} text={button.text} color={color} justify={button.justify} fullwidth={button.fullwidth}/>
+                </div>
+              {/if}
+
             </div>
           {/if}
         </div>
 
         <!-- Testimonial -->
-        {#if testimonial && $scrollTargetVisible}
+        {#if testimonial && ($scrollTargetVisible || !animate)}
           <div 
             class="mt-8 border-t border-gray-200 pt-6"
-            in:fly={{ delay: 300, duration: 1750, easing: cubicInOut, x: textPosition == "left" ? '-100%' : '100%' }}
-            out:fly={{ delay: 300, duration: 1750, easing: cubicInOut, x: textPosition == "left" ? '-100%' : '100%' }}
+            in:conditionalTransition={{ fn: fade, condition: animate, delay: 300, duration: 1750, easing:cubicInOut, x: textPosition == "left" ? '-100%' : '100%'}}
+            out:conditionalTransition={{fn: fade, condition: animate, delay: 300, duration: 1750, easing:cubicInOut, x: textPosition == "left" ? '-100%' : '100%'}}
           >
             <blockquote>
               <div>
@@ -107,15 +117,15 @@
         <!-- Image -->
         <div id={id + "image"} class="relative mt-12 sm:mt-16 lg:mt-0 {textPosition == "left" ? "" : "lg:col-start-1"}"
         >
-          {#if $scrollTargetVisible}
+          {#if $scrollTargetVisible || !animate}
             <div 
               class="{textPosition == "left" ? "-mr-48 pl-6 md:-mr-16" : "-ml-48 pr-6 md:-ml-16"} lg:relative lg:m-0 lg:h-full lg:px-0"
-              in:fly={{ delay: 200, duration: 1250, easing: cubicInOut, x: textPosition == "left" ? '100%' : '-100%' }}
-              out:fly={{ delay: 200, duration: 1250, easing: cubicInOut, x: textPosition == "left" ? '100%' : '-100%' }}
+              in:conditionalTransition={{ fn: fade, condition: animate, delay: 200, duration: 1250, easing:cubicInOut, x: textPosition == "left" ? '100%' : '-100%'}}
+              out:conditionalTransition={{fn: fade, condition: animate, delay: 200, duration: 1250, easing:cubicInOut, x: textPosition == "left" ? '100%' : '-100%'}}
             >
               <img   class="w-full shadow-xl ring-1 ring-black/5 lg:absolute {textPosition == "left" ? "lg:left-0" : "right-0"} lg:h-full lg:w-auto lg:max-w-none" src="https://files.thunderheadeng.com/www/images/{image.url}?fmt=auto" alt={image.alt}>
             </div>
-          {:else}
+          {:else if animate}
             <div 
               out:fly={{ delay: 0, duration: 500, easing: cubicInOut, x: textPosition == "left" ? '100%' : '-100%' }}
               class="absolute top-0 bottom-0 w-full bg-gray-200 animate-pulse my-16"

package/dist/utils.d.ts

@@ -58,3 +58,10 @@ export function getTeciImageURL(imageSrc: any, site?: any): any;
  * @param {*} latch If true, the state will always be set to true after the page loads
  */
 export function triggerWhenVisible(store: any, elementId: any, latch?: any): void;
+/** Simplifies the logic of conditionally animating an element using Svelte transitions. If options.condition is true, options.fn is run, passing options as an argument.
+ *
+ * @param {*} node The node that passed to this function (provided by svelte)
+ * @param {*} options Options to pass to the transition function. Should always define the properties options.condition and options.fn.
+ * @returns
+ */
+export function conditionalTransition(node: any, options: any): any;

package/dist/utils.js

@@ -485,4 +485,16 @@ export function triggerWhenVisible(store, elementId, latch = false) {
     addEventListener("scroll", (event) => {
       updateVisibility()
     })
+}
+
+/** Simplifies the logic of conditionally animating an element using Svelte transitions. If options.condition is true, options.fn is run, passing options as an argument.
+ * 
+ * @param {*} node The node that passed to this function (provided by svelte)
+ * @param {*} options Options to pass to the transition function. Should always define the properties options.condition and options.fn.
+ * @returns 
+ */
+export function conditionalTransition(node, options) {
+  if (options.condition) {
+    return options.fn(node, options)
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tecitheme",
-  "version": "0.14.1",
+  "version": "0.14.3",
   "license": "MIT",
   "scripts": {
     "dev": "vite dev",