tecitheme 0.0.2 → 0.0.6

package/README.md

@@ -4,4 +4,4 @@ SvelteKit Design System for Thunderhead web properties.
 
 NPM package available at: https://www.npmjs.com/package/tecitheme
 
-See the hosted site in this project for documentation and component details.
+See https://tecitheme.netlify.app/ for demo, documentation and component details.

package/components/CountrySelector.svelte

@@ -1,10 +1,12 @@
 <script>
     import { createEventDispatcher } from 'svelte';
-    import Modal from "../Modal/index.svelte";
+    import Modal from "./Modal.svelte";
 
     export let resellerModal = true;
-    let modal;
     export let selection = 'sel';
+    export let allowContinue = false;
+
+    let modal;
     let resellerIndex = -1;
     let resellerArray = [
         ["BE", "NL", "LU"],
@@ -24,8 +26,6 @@
         ["ES"]
     ]
     
-    export let allowContinue = false;
-
     function isReseller() {
         resellerIndex = resellerArray.findIndex(arr => arr.includes(selection))
         return resellerIndex > -1

package/components/Figure.svelte

@@ -0,0 +1,12 @@
+<script>
+  export let image;
+  export let title;
+  export let caption;
+</script>
+
+<figure class="not-prose shadow-lg border border-slate-100 p-2">
+  <img src={image} alt={title} title={title}>
+  {#if caption}
+    <figcaption class="text-center p-2">{@html caption}</figcaption>
+  {/if}
+</figure>

package/components/Figure.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  FigureProps */
+/** @typedef {typeof __propDef.events}  FigureEvents */
+/** @typedef {typeof __propDef.slots}  FigureSlots */
+export default class Figure extends SvelteComponentTyped<{
+    image: any;
+    title: any;
+    caption: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FigureProps = typeof __propDef.props;
+export type FigureEvents = typeof __propDef.events;
+export type FigureSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        image: any;
+        title: any;
+        caption: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/Header.svelte

@@ -1,5 +1,5 @@
 <script>
-    import IconTE from "../Logos/TECi_icon_250.svelte";
+    import Icon from "./Icon.svelte";
 </script>
 
 <header>
@@ -7,11 +7,11 @@
     <div class="absolute inset-0 shadow z-30 pointer-events-none" aria-hidden="true"></div>
     <div class="relative">
       <div class="max-w-7xl mx-auto flex justify-between items-center px-4 py-5 md:space-x-6 sm:px-6 sm:py-4 lg:px-8 md:justify-start lg:space-x-10">
-        <!-- Nav IconTE Linked to WWW Homepage -->
+        <!-- Nav Icon Linked to WWW Homepage -->
         <div class="flex-shrink-0">
           <a href="https://www.thunderheadeng.com" class="flex">
             <span class="sr-only">Thunderhead Engineering</span>
-            <IconTE classes="h-10 w-auto"/>
+            <Icon classes="h-10 w-auto" />
           </a>
         </div>
   
@@ -50,7 +50,7 @@
                   <a href="https://www.thunderheadeng.com/pyrosim/" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50">
                     <div class="flex md:h-full lg:flex-col">
                       <div class="flex-shrink-0">
-                        <img class="h-12 w-auto" src="https://files.thunderheadeng.com/www/images/pyrosim_icon.svg" alt="PyroSim" />
+                        <Icon classes="h-12 w-auto" icon="pyrosim" />
                       </div>
                       <div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
                         <div>
@@ -71,7 +71,7 @@
                   <a href="https://www.thunderheadeng.com/pathfinder/" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50">
                     <div class="flex md:h-full lg:flex-col">
                       <div class="flex-shrink-0">
-                        <img class="h-12 w-auto" src="https://files.thunderheadeng.com/www/images/pathfinder_icon.svg" alt="Pathfinder" />
+                        <Icon classes="h-12 w-auto" icon="pathfinder" />
                       </div>
                       <div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
                         <div>
@@ -92,7 +92,7 @@
                   <a href="https://www.thunderheadeng.com/petrasim/" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50">
                     <div class="flex md:h-full lg:flex-col">
                       <div class="flex-shrink-0">
-                        <img class="h-12 w-auto" src="https://files.thunderheadeng.com/www/images/petrasim_icon.svg" alt="PetraSim" />
+                        <Icon classes="h-12 w-auto" icon='petrasim' />
                       </div>
                       <div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
                         <div>

package/components/Icon.svelte

@@ -0,0 +1,45 @@
+<script>
+	export let icon;
+	export let classes;
+</script>
+
+{#if icon == 'pyrosim'}
+	<img
+		class={classes}
+		src="https://files.thunderheadeng.com/www/images/pyrosim_icon.svg"
+		alt="PyroSim"
+        title="PyroSim Icon"
+	/>
+{:else if icon == 'pathfinder'}
+	<img
+		class={classes}
+		src="https://files.thunderheadeng.com/www/images/pathfinder_icon.svg"
+		alt="Pathfinder"
+        title="Pathfinder Icon"
+	/>
+{:else if icon == 'petrasim'}
+	<img
+		class={classes}
+		src="https://files.thunderheadeng.com/www/images/petrasim_icon.svg"
+		alt="PetraSim"
+        title="PetraSim Icon"
+	/>
+{:else}
+	<svg class={classes} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250">
+		<path
+			style="fill:#0c3879;fill-rule:evenodd;stroke:none"
+			d="M88.113 220.536h97.672v97.672H88.113z"
+			transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
+		/>
+		<path
+			style="fill:#fff;fill-rule:evenodd;stroke:none"
+			d="M145.864 260.176h22.042c2.792 0 4.883.835 6.559 2.651 1.532 1.673 2.232 3.764 2.232 6.278 0 2.37-.7 4.464-2.232 6.277-1.676 1.675-3.767 2.651-6.559 2.651h-22.042v-17.857m0 23.159h22.042c2.792 0 4.883.838 6.559 2.65 1.532 1.674 2.232 3.768 2.232 6.278 0 2.373-.7 4.464-2.232 6.278-1.676 1.675-3.767 2.65-6.559 2.65h-22.042v-17.856"
+			transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
+		/>
+		<path
+			style="fill:#fff;fill-rule:evenodd;stroke:none"
+			d="M132.471 301.192c-5.861 0-8.79-3.07-8.79-8.929l-.138-37.389-20.648-.14c-7.116-1.254-10.185-9.626-5.165-15.206 1.535-1.535 3.63-2.373 6.14-2.651h26.926l1.675.14h35.435c2.792 0 4.883.836 6.559 2.649 1.532 1.675 2.232 3.767 2.232 6.28 0 2.37-.7 4.464-2.232 6.277-1.676 1.673-3.767 2.651-6.559 2.651H141.26V301.192h-8.788"
+			transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
+		/>
+	</svg>
+{/if}

package/components/Icon.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  IconProps */
+/** @typedef {typeof __propDef.events}  IconEvents */
+/** @typedef {typeof __propDef.slots}  IconSlots */
+export default class Icon extends SvelteComponentTyped<{
+    icon: any;
+    classes: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IconProps = typeof __propDef.props;
+export type IconEvents = typeof __propDef.events;
+export type IconSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        icon: any;
+        classes: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/Math.svelte

@@ -0,0 +1,19 @@
+<script>
+  // Based on: https://svelte.dev/repl/49ff6c089825418888cf804d9dde77bc?version=3.46.4
+import katex from "katex";
+export let math;
+export let displayMode = false;
+
+const options = {
+  displayMode: displayMode,
+  throwOnError: false
+}
+
+$: katexString = katex.renderToString(math, options);
+</script>
+
+<svelte:head>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
+</svelte:head>
+
+{@html katexString}

package/components/Math.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  MathProps */
+/** @typedef {typeof __propDef.events}  MathEvents */
+/** @typedef {typeof __propDef.slots}  MathSlots */
+export default class Math extends SvelteComponentTyped<{
+    math: any;
+    displayMode?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MathProps = typeof __propDef.props;
+export type MathEvents = typeof __propDef.events;
+export type MathSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        math: any;
+        displayMode?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/NewsGrid.svelte

@@ -0,0 +1,67 @@
+<script>
+  export let data;
+  export let posts;
+</script>
+
+<div class="relative pb-12 w-full mx-auto divide-y-2 divide-gray-200">
+  <div>
+      <h2 class="text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl">
+          {data.title}
+      </h2>
+      <div
+          class="mt-3 sm:mt-4 lg:grid lg:grid-cols-2 lg:gap-5 lg:items-center"
+      >
+          <p class="text-xl text-gray-500">{data.subtitle}</p>
+          <form class="mt-6 flex flex-col sm:flex-row lg:mt-0 lg:justify-end">
+              <div>
+                  <label for="email-address" class="sr-only"
+                      >Email address</label
+                  >
+                  <input
+                      id="email-address"
+                      name="email-address"
+                      type="email"
+                      autocomplete="email"
+                      required
+                      class="appearance-none w-full px-4 py-2 border border-gray-300 text-base rounded-md text-gray-900 bg-white placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 lg:max-w-xs"
+                      placeholder="Enter your email"
+                  />
+              </div>
+              <div
+                  class="mt-2 flex-shrink-0 w-full flex rounded-md shadow-sm sm:mt-0 sm:ml-3 sm:w-auto sm:inline-flex"
+              >
+                  <button
+                      type="button"
+                      class="w-full bg-indigo-600 px-4 py-2 border border-transparent rounded-md flex items-center justify-center text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:w-auto sm:inline-flex"
+                      >Notify me</button
+                  >
+              </div>
+          </form>
+      </div>
+  </div>
+  <div class="mt-6 pt-10 grid gap-16 lg:grid-cols-2 lg:gap-x-5 lg:gap-y-12">
+      {#each posts as post}
+          <div>
+              <p class="text-sm text-gray-500">
+                  <time datetime="{post.meta.date}">{post.meta.date}</time>
+              </p>
+              <a href={post.path} class="mt-2 block">
+                  <p class="text-xl font-semibold text-gray-900">
+                      {post.meta.title}
+                  </p>
+                  <p class="mt-3 text-base text-gray-500">
+                      {post.meta.summary}
+                  </p>
+              </a>
+              <div class="mt-3">
+                  <a
+                      href="{post.path}"
+                      class="text-base font-semibold text-indigo-600 hover:text-indigo-500"
+                  >
+                      Read full story
+                  </a>
+              </div>
+          </div>
+      {/each}
+  </div>
+</div>

package/components/NewsGrid.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  NewsGridProps */
+/** @typedef {typeof __propDef.events}  NewsGridEvents */
+/** @typedef {typeof __propDef.slots}  NewsGridSlots */
+export default class NewsGrid extends SvelteComponentTyped<{
+    data: any;
+    posts: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type NewsGridProps = typeof __propDef.props;
+export type NewsGridEvents = typeof __propDef.events;
+export type NewsGridSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        data: any;
+        posts: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/SectionHeaderCentered.svelte

@@ -0,0 +1,24 @@
+<script>
+    //Based on: https://tailwindui.com/components/marketing/sections/header#component-2c3b25e7b9e4490edd7b6950692c0a11
+	
+    export let data = {
+		toptext: 'Small Top Text ',
+		title: 'Big Title Text',
+		subtitle: 'Subtitle Text'
+	};
+</script>
+
+<!-- This example requires Tailwind CSS v2.0+ -->
+<div class="text-center pb-12">
+{#if data.toptext}
+    <h2 class="text-base font-semibold text-indigo-600 tracking-wide uppercase">
+    {data.toptext}
+    </h2>
+{/if}
+<p class="mt-1 text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
+    {data.title}
+</p>
+<p class="max-w-xl mt-5 mx-auto text-xl text-gray-500">
+    {data.subtitle}
+</p>
+</div>

package/components/SectionHeaderCentered.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  SectionHeaderCenteredProps */
+/** @typedef {typeof __propDef.events}  SectionHeaderCenteredEvents */
+/** @typedef {typeof __propDef.slots}  SectionHeaderCenteredSlots */
+export default class SectionHeaderCentered extends SvelteComponentTyped<{
+    data?: {
+        toptext: string;
+        title: string;
+        subtitle: string;
+    };
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SectionHeaderCenteredProps = typeof __propDef.props;
+export type SectionHeaderCenteredEvents = typeof __propDef.events;
+export type SectionHeaderCenteredSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        data?: {
+            toptext: string;
+            title: string;
+            subtitle: string;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/ThreeColumn.svelte

@@ -0,0 +1,67 @@
+<script>
+	//Based on:
+	//https://tailwindui.com/components/marketing/sections/feature-sections#component-c683653471044e6ffc32739e199dfbf2
+	//https://tailwindui.com/components/marketing/sections/team-sections#component-0efa5ebc92e2aa72bc2332fcf5578869
+
+	import Icon from './Icon.svelte';
+
+	export let title = 'A better way to send money.';
+
+	export let data = [
+		{
+			icon: 'pyrosim',
+			image: 'https://www.thunderheadeng.com/wp-content/uploads/2013/09/company_pyrosim.jpg',
+			heading: 'PyroSim',
+			subheading: 'Fire & Smoke',
+			text: 'Analyze fire control and smoke dissipation in various structures for fire protection and safety or investigation.',
+			linkText: 'Learn More »',
+			linkURL: '/pyrosim'
+		},
+		{
+			icon: 'pathfinder',
+			image: 'https://www.thunderheadeng.com/wp-content/uploads/2013/08/company_pathfinder.png',
+			heading: 'Pathfinder',
+			subheading: 'Evacuation',
+			text: 'Understand pedestrian egress and congestion hazards for fire protection and safety or urban planning.',
+			linkText: 'Learn More »',
+			linkURL: '/pathfinder'
+		},
+		{
+			icon: 'petrasim',
+			image: 'https://www.thunderheadeng.com/wp-content/uploads/2013/08/company_petrasim.png',
+			heading: 'PetraSim',
+			subheading: 'Subsurface Flow',
+			text: 'Model nonisothermal multiphase flow and transport in fractured and porous media for environmental engineering.',
+			linkText: 'Learn More »',
+			linkURL: '/petrasim'
+		}
+	];
+</script>
+
+<!-- This example requires Tailwind CSS v2.0+ -->
+<div class="pb-12 bg-white mx-auto">
+	<h2 class="sr-only">{title}</h2>
+	<dl class="space-y-10 sm:grid sm:grid-cols-2 sm:gap-8 sm:space-y-0 lg:grid-cols-3">
+		{#each data as col}
+			<div>
+				<a href={col.linkURL}>
+					<div class="space-y-4">
+						<div class="aspect-w-3 aspect-h-2">
+							<img class="object-cover shadow-lg rounded-lg" src={col.image} alt="" />
+						</div>
+						<div class="flex flex-row items-center space-x-4">
+							<Icon classes="h-12 w-auto" icon={col.icon} />
+							<div class="leading-6 font-medium">
+								<h3 class="text-2xl">{col.heading}</h3>
+								<p class="text-teci-blue-dark">{col.subheading}</p>
+							</div>
+						</div>
+						<div class="text-lg">
+							<p class="text-gray-500">{col.text}</p>
+						</div>
+					</div>
+				</a>
+			</div>
+		{/each}
+	</dl>
+</div>

package/components/ThreeColumn.svelte.d.ts

@@ -0,0 +1,41 @@
+/** @typedef {typeof __propDef.props}  ThreeColumnProps */
+/** @typedef {typeof __propDef.events}  ThreeColumnEvents */
+/** @typedef {typeof __propDef.slots}  ThreeColumnSlots */
+export default class ThreeColumn extends SvelteComponentTyped<{
+    data?: {
+        icon: string;
+        image: string;
+        heading: string;
+        subheading: string;
+        text: string;
+        linkText: string;
+        linkURL: string;
+    }[];
+    title?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ThreeColumnProps = typeof __propDef.props;
+export type ThreeColumnEvents = typeof __propDef.events;
+export type ThreeColumnSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        data?: {
+            icon: string;
+            image: string;
+            heading: string;
+            subheading: string;
+            text: string;
+            linkText: string;
+            linkURL: string;
+        }[];
+        title?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};