tecitheme 0.10.13 → 0.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/CTA.svelte +2 -6
- package/dist/components/CTASplitImage.svelte +2 -6
- package/dist/components/ContentTwoColumns.svelte +2 -6
- package/dist/components/FeatureGrid.svelte +2 -6
- package/dist/components/FeatureTable.svelte +402 -0
- package/dist/components/FeatureTable.svelte.d.ts +23 -0
- package/dist/components/Figure.svelte +3 -5
- package/dist/components/HeadingCentered.svelte +2 -5
- package/dist/components/Hero.svelte +2 -6
- package/dist/components/Icon.svelte +3 -5
- package/dist/components/MediaFeature.svelte +2 -6
- package/dist/components/NewsGrid.svelte +2 -5
- package/dist/components/PageNav.svelte +2 -5
- package/dist/components/PartnersList.svelte +2 -5
- package/dist/components/PricingTable.svelte +2 -6
- package/dist/components/SidebarContent.svelte +2 -6
- package/dist/components/Stats.svelte +2 -6
- package/dist/components/Testimonial.svelte +2 -6
- package/dist/components/ThreeColumn.svelte +2 -5
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/layouts/blocks.svelte +2 -0
- package/dist/utils.d.ts +1 -0
- package/dist/utils.js +141 -0
- package/package.json +1 -1
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
import { getColorStyles } from '../utils'
|
|
2
|
+
import { getColorStyles, makeIdString } from '../utils'
|
|
3
3
|
export let data = {};
|
|
4
|
-
let id
|
|
5
|
-
|
|
6
|
-
if (data.name) {
|
|
7
|
-
id = encodeURIComponent(data.name).toLowerCase()
|
|
8
|
-
}
|
|
4
|
+
let id = makeIdString(data.name);
|
|
9
5
|
</script>
|
|
10
6
|
|
|
11
7
|
<section {id} class="{data.bgColor?'p-8':''} {getColorStyles('background', data.bgColor)}
|
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
import { getColorStyles } from '../utils'
|
|
2
|
+
import { getColorStyles, makeIdString } from '../utils'
|
|
3
3
|
import Button from './Button.svelte'
|
|
4
4
|
export let data = {};
|
|
5
|
-
let id
|
|
6
|
-
|
|
7
|
-
if (data.name) {
|
|
8
|
-
id = encodeURIComponent(data.name).toLowerCase()
|
|
9
|
-
}
|
|
5
|
+
let id = makeIdString(data.name);
|
|
10
6
|
</script>
|
|
11
7
|
|
|
12
8
|
<section {id} class="relative {getColorStyles('background', data.color)}">
|
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
import { getColorStyles } from '../utils'
|
|
2
|
+
import { getColorStyles, makeIdString } from '../utils'
|
|
3
3
|
export let data = {};
|
|
4
|
-
let id
|
|
5
|
-
|
|
6
|
-
if (data.name) {
|
|
7
|
-
id = encodeURIComponent(data.name).toLowerCase()
|
|
8
|
-
}
|
|
4
|
+
let id = makeIdString(data.name);
|
|
9
5
|
</script>
|
|
10
6
|
|
|
11
7
|
<section {id} class="overflow-hidden mx-auto max-w-max lg:max-w-7xl">
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import Icon from './Icon.svelte'
|
|
3
3
|
|
|
4
|
-
import { getColorStyles } from '../utils'
|
|
4
|
+
import { getColorStyles, makeIdString } from '../utils'
|
|
5
5
|
export let data = {};
|
|
6
|
-
let id
|
|
7
|
-
|
|
8
|
-
if (data.name) {
|
|
9
|
-
id = encodeURIComponent(data.name).toLowerCase()
|
|
10
|
-
}
|
|
6
|
+
let id = makeIdString(data.name);
|
|
11
7
|
</script>
|
|
12
8
|
|
|
13
9
|
<section {id} class="overflow-hidden mx-auto max-w-max lg:max-w-7xl">
|
|
@@ -0,0 +1,402 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { getColorStyles, makeIdString } from "../utils";
|
|
3
|
+
import { writable } from "svelte/store";
|
|
4
|
+
|
|
5
|
+
export let data = {};
|
|
6
|
+
let id = makeIdString(data.name);
|
|
7
|
+
|
|
8
|
+
//Restructure feature table data for HTML. This is a bit confusing, but it does work. Example data structure below.
|
|
9
|
+
/**
|
|
10
|
+
* {
|
|
11
|
+
* selectorSection: {
|
|
12
|
+
* columns: [
|
|
13
|
+
* {
|
|
14
|
+
* name: text
|
|
15
|
+
* flavorText: text
|
|
16
|
+
* highlightOption: boolean
|
|
17
|
+
* }
|
|
18
|
+
* ],
|
|
19
|
+
* categories: {
|
|
20
|
+
* categoryName: {
|
|
21
|
+
* name: text
|
|
22
|
+
* features: {
|
|
23
|
+
* featureName: {
|
|
24
|
+
* name: text,
|
|
25
|
+
* helpText: text,
|
|
26
|
+
* order: int, //desktop only
|
|
27
|
+
* values: {
|
|
28
|
+
* columnName: {
|
|
29
|
+
* value: text/boolean
|
|
30
|
+
* mobileOrder: int
|
|
31
|
+
* }
|
|
32
|
+
* }
|
|
33
|
+
* }
|
|
34
|
+
* }
|
|
35
|
+
* }
|
|
36
|
+
* }
|
|
37
|
+
* }
|
|
38
|
+
* }
|
|
39
|
+
*/
|
|
40
|
+
let tables = {};
|
|
41
|
+
data.selectorSections.forEach(section => {
|
|
42
|
+
if (section.options)
|
|
43
|
+
{
|
|
44
|
+
tables[section.name] = {columns: [], categories: []}; //Initialize key for the section object
|
|
45
|
+
|
|
46
|
+
section.options.forEach(option => {
|
|
47
|
+
|
|
48
|
+
tables[section.name]["columns"].push({name: option.name, flavorText: option.flavorText, highlightOption: option.highlightOption});
|
|
49
|
+
|
|
50
|
+
if (option.features) {
|
|
51
|
+
option.features.forEach(category => {
|
|
52
|
+
|
|
53
|
+
// Big 'ole ternary to retrieve or initialize category data
|
|
54
|
+
let catData = tables[section.name]["categories"][category.name]
|
|
55
|
+
? tables[section.name]["categories"][category.name]
|
|
56
|
+
: {name: category.name, features: {}};
|
|
57
|
+
|
|
58
|
+
category.features.forEach((feature, index) => {
|
|
59
|
+
|
|
60
|
+
// Another ternary to retrieve or initialize existing feature (row) data, inside the category
|
|
61
|
+
let featureData = catData["features"][feature.name]
|
|
62
|
+
? catData["features"][feature.name]
|
|
63
|
+
: {name: feature.name, values: {}, order: index};
|
|
64
|
+
|
|
65
|
+
//This will overwrite if feature help text is duplicated, but this should be fine
|
|
66
|
+
if (feature.helpText) featureData["helpText"] = feature.helpText;
|
|
67
|
+
|
|
68
|
+
//Key values by the column name
|
|
69
|
+
featureData.values[option.name] = {value: feature.value, mobileOrder: index};
|
|
70
|
+
|
|
71
|
+
//Store feature data
|
|
72
|
+
catData["features"][feature.name] = featureData;
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
//Store category data
|
|
76
|
+
tables[section.name]["categories"][category.name] = catData;
|
|
77
|
+
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
let selectedButton = writable({});
|
|
86
|
+
let selectedTable = writable({});
|
|
87
|
+
|
|
88
|
+
//Initialize data stores
|
|
89
|
+
if (data.selectorSections) {
|
|
90
|
+
selectedButton.update(val => data.selectorSections[0]);
|
|
91
|
+
selectedTable.update(val => tables[$selectedButton.name]);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
//Update table store when new button is selected
|
|
95
|
+
selectedButton.subscribe(val => selectedTable.update(table => tables[val.name]))
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
*
|
|
99
|
+
* @param features An object of features, as defined in the table above
|
|
100
|
+
* @param columnName If specified, filters feature such that the values parameter must have a value specified for the given columnName
|
|
101
|
+
*/
|
|
102
|
+
function sortFeaturesByOrder(features, columnName) {
|
|
103
|
+
|
|
104
|
+
if (columnName != undefined)
|
|
105
|
+
{
|
|
106
|
+
let filteredFeatures = Object.values(features).filter(feature => feature.values[columnName] != undefined);
|
|
107
|
+
|
|
108
|
+
let sortedFeatures = filteredFeatures.sort((feature1, feature2) => {
|
|
109
|
+
if (feature1.values[columnName].mobileOrder < feature2.values[columnName].mobileOrder) return -1
|
|
110
|
+
else if (feature1.values[columnName].mobileOrder === feature2.values[columnName].mobileOrder) return 0
|
|
111
|
+
else return 1
|
|
112
|
+
});
|
|
113
|
+
|
|
114
|
+
return sortedFeatures;
|
|
115
|
+
}
|
|
116
|
+
else
|
|
117
|
+
{
|
|
118
|
+
return Object.values(features).sort((feature1, feature2) => {
|
|
119
|
+
if (feature1.order < feature2.order) return -1
|
|
120
|
+
else if (feature1.order === feature2.order) return 0
|
|
121
|
+
else return 1
|
|
122
|
+
});
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
</script>
|
|
127
|
+
|
|
128
|
+
<div id={id} class="bg-white">
|
|
129
|
+
<main>
|
|
130
|
+
<!-- Pricing Section -->
|
|
131
|
+
<div class="isolate overflow-hidden">
|
|
132
|
+
<div class="flow-root bg-gradient-to-b {getColorStyles("gradient-dark", data.product)} py-16 sm:pt-32 lg:pb-0">
|
|
133
|
+
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
134
|
+
|
|
135
|
+
<!-- Title, Text, and Buttons -->
|
|
136
|
+
{#if data.hero}
|
|
137
|
+
<div class="relative z-10">
|
|
138
|
+
<!-- Title -->
|
|
139
|
+
{#if data.hero.title}
|
|
140
|
+
<h1 class="mx-auto max-w-4xl text-center text-5xl font-bold tracking-tight text-white break-words hyphens-auto">{data.hero.title}</h1>
|
|
141
|
+
{/if}
|
|
142
|
+
<!-- Hero Text -->
|
|
143
|
+
{#if data.hero.text}
|
|
144
|
+
<p class="mx-auto mt-4 max-w-2xl text-center text-lg leading-8 text-white">{data.hero.text}</p>
|
|
145
|
+
{/if}
|
|
146
|
+
|
|
147
|
+
<!-- Buttons -->
|
|
148
|
+
<div class="mt-16 flex justify-center">
|
|
149
|
+
<fieldset class="flex flex-row space-x-1 bg-white/5 text-center text-xs font-semibold leading-5 text-white">
|
|
150
|
+
<legend class="sr-only">Payment frequency</legend>
|
|
151
|
+
|
|
152
|
+
{#each data.selectorSections as btn}
|
|
153
|
+
<button class="{$selectedButton === btn ? getColorStyles("background", data.product) : "bg-transparent"} px-4 py-2" on:click={selectedButton.update(val => btn)}>
|
|
154
|
+
{btn.name}
|
|
155
|
+
</button>
|
|
156
|
+
{/each}
|
|
157
|
+
|
|
158
|
+
</fieldset>
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
{/if}
|
|
162
|
+
|
|
163
|
+
<!-- Option Cards -->
|
|
164
|
+
<div class="relative mx-auto mt-10 flex flex-col space-y-8 lg:space-y-0 lg:space-x-4 lg:flex-row">
|
|
165
|
+
|
|
166
|
+
<div class="hidden lg:absolute lg:inset-x-px lg:bottom-0 lg:top-4 lg:block" aria-hidden="true"></div>
|
|
167
|
+
|
|
168
|
+
{#if $selectedButton.options}
|
|
169
|
+
{#each $selectedButton.options as card}
|
|
170
|
+
|
|
171
|
+
<div class="relative ring-1 ring-white/30 lg:pb-14 {card.highlightOption ? getColorStyles("background", data.product) : "bg-white"} w-full shadow-lg">
|
|
172
|
+
<div class="p-8 lg:pt-12 xl:p-10 xl:pt-14">
|
|
173
|
+
|
|
174
|
+
<!-- Card Title -->
|
|
175
|
+
<h2 id={makeIdString(card.name)} class="text-sm font-semibold leading-6 {card.highlightOption ? "text-white" : "text-black"}">{card.name}</h2>
|
|
176
|
+
|
|
177
|
+
<!-- Price / Freqeuency -->
|
|
178
|
+
<div class="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between lg:flex-col lg:items-stretch">
|
|
179
|
+
<div class="mt-2 flex items-center gap-x-4">
|
|
180
|
+
<!-- Price -->
|
|
181
|
+
<p class="text-4xl font-bold tracking-tight {card.highlightOption ? "text-white" : "text-black"}">{card.price}</p>
|
|
182
|
+
<div class="text-sm leading-5">
|
|
183
|
+
<p class="{card.highlightOption ? "text-white" : "text-black"}">USD</p>
|
|
184
|
+
|
|
185
|
+
{#if card.frequencyText}
|
|
186
|
+
<p class="{card.highlightOption ? "text-white" : "text-black"}">{card.frequencyText}</p>
|
|
187
|
+
{/if}
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
|
|
191
|
+
<!-- Call to Action -->
|
|
192
|
+
{#if card.cta}
|
|
193
|
+
<a href={card.cta.href} class="py-2 lg:px-3 sm:px-12 text-center text-sm font-semibold leading-6 {getColorStyles("button", card.highlightOption ? "white" : data.product)}">{card.cta.text}</a>
|
|
194
|
+
{/if}
|
|
195
|
+
</div>
|
|
196
|
+
|
|
197
|
+
<!-- Highlighted Features -->
|
|
198
|
+
{#if card.highlightedFeatures}
|
|
199
|
+
<div class="mt-8 flow-root sm:mt-10">
|
|
200
|
+
<ul role="list" class="-my-2 divide-y border-t text-sm leading-6 lg:border-t-0 {card.highlightOption ? "text-white divide-white/50 border-white/50" : "text-black divide-black/50 border-black/50"}">
|
|
201
|
+
|
|
202
|
+
{#each card.highlightedFeatures as feature}
|
|
203
|
+
<li class="flex gap-x-3 py-2">
|
|
204
|
+
<svg class="h-6 w-5 flex-none {card.highlightOption ? "text-white" : "text-gray-500"}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
205
|
+
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
|
|
206
|
+
</svg>
|
|
207
|
+
{feature}
|
|
208
|
+
</li>
|
|
209
|
+
{/each}
|
|
210
|
+
</ul>
|
|
211
|
+
</div>
|
|
212
|
+
{/if}
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
|
|
216
|
+
{/each}
|
|
217
|
+
{/if}
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
</div>
|
|
221
|
+
|
|
222
|
+
<!-- Desktop Feature Comparison Tables -->
|
|
223
|
+
<div class="hidden lg:flex flex-col mx-auto w-full items-center lg:py-20 lg:px-8">
|
|
224
|
+
{#each Object.values($selectedTable.categories) as category, categoryIndex}
|
|
225
|
+
|
|
226
|
+
<!-- Table heading -->
|
|
227
|
+
<div class="flex flex-row space-x-8 w-full items-end {categoryIndex === 0 ? "border-t" : ""}">
|
|
228
|
+
|
|
229
|
+
<!-- Category Name -->
|
|
230
|
+
<h4 class="text-sm font-semibold leading-6 text-gray-900 w-full pt-10">{category.name}</h4>
|
|
231
|
+
|
|
232
|
+
<!-- Headers, if the first category in the list -->
|
|
233
|
+
{#each $selectedTable.columns as column}
|
|
234
|
+
<div class="-mt-px border-t-2 w-full border-transparent py-8 {column.highlightOption && categoryIndex === 0 ? getColorStyles("border", data.product) : ""}">
|
|
235
|
+
{#if categoryIndex === 0}
|
|
236
|
+
<h3 class="text-sm font-semibold leading-6 text-gray-900 {column.highlightOption ? getColorStyles("text", data.product) : ""}">{column.name}</h3>
|
|
237
|
+
{#if column.flavorText}
|
|
238
|
+
<p class="mt-1 text-sm leading-6 text-gray-600">{column.flavorText}</p>
|
|
239
|
+
{/if}
|
|
240
|
+
{/if}
|
|
241
|
+
</div>
|
|
242
|
+
{/each}
|
|
243
|
+
</div>
|
|
244
|
+
|
|
245
|
+
<!-- Table -->
|
|
246
|
+
<div class="relative flex flex-col w-full pt-8 shadow-lg">
|
|
247
|
+
{#each sortFeaturesByOrder(category.features) as feature, featureIndex}
|
|
248
|
+
<div class="w-full flex flex-row items-center justify-center {featureIndex !== Object.values(category.features).length - 1 ? "border-b" : ""} space-x-8">
|
|
249
|
+
<!-- Row Header -->
|
|
250
|
+
<div class="flex flex-row w-full py-3 pl-4 text-left text-sm font-normal leading-6 text-gray-900 items-center space-x-2">
|
|
251
|
+
<p>{feature.name}</p>
|
|
252
|
+
|
|
253
|
+
<!-- Info Icon and Text -->
|
|
254
|
+
{#if feature.helpText}
|
|
255
|
+
<span class="relative group">
|
|
256
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
|
257
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
|
|
258
|
+
</svg>
|
|
259
|
+
<div class="absolute hidden group-hover:block bg-white border shadow-lg p-2 w-48 z-10 text-center left-1/2 -translate-x-1/2">
|
|
260
|
+
<p>{feature.helpText}</p>
|
|
261
|
+
</div>
|
|
262
|
+
</span>
|
|
263
|
+
{/if}
|
|
264
|
+
</div>
|
|
265
|
+
|
|
266
|
+
<!-- Row Values -->
|
|
267
|
+
{#each $selectedTable.columns as column}
|
|
268
|
+
<p class="w-full h-full px-4 py-3 text-center
|
|
269
|
+
{column.highlightOption ? "font-bold " + getColorStyles("text", data.product) : ""}
|
|
270
|
+
">
|
|
271
|
+
|
|
272
|
+
{#if feature.values[column.name] != undefined}
|
|
273
|
+
<!-- Check mark -->
|
|
274
|
+
{#if feature.values[column.name].value === true}
|
|
275
|
+
<svg class="mx-auto h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
276
|
+
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
|
|
277
|
+
</svg>
|
|
278
|
+
<span class="sr-only">Yes</span>
|
|
279
|
+
|
|
280
|
+
<!-- X Mark -->
|
|
281
|
+
{:else if feature.values[column.name].value === false}
|
|
282
|
+
<svg class="mx-auto h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
283
|
+
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
|
|
284
|
+
</svg>
|
|
285
|
+
<span class="sr-only">No</span>
|
|
286
|
+
|
|
287
|
+
<!-- Text -->
|
|
288
|
+
{:else if feature.values[column.name].value}
|
|
289
|
+
{feature.values[column.name].value}
|
|
290
|
+
{/if}
|
|
291
|
+
{/if}
|
|
292
|
+
</p>
|
|
293
|
+
{/each}
|
|
294
|
+
</div>
|
|
295
|
+
{/each}
|
|
296
|
+
|
|
297
|
+
<!-- Dummy div for background rings around features -->
|
|
298
|
+
<div class="pointer-events-none absolute flex flex-row before:block w-full h-full space-x-8 top-0 pt-8" aria-hidden="true">
|
|
299
|
+
<div class="w-full"></div>
|
|
300
|
+
{#each $selectedTable.columns as column}
|
|
301
|
+
<div class="w-full ring-gray-900/10 {column.highlightOption ? getColorStyles("ring", data.product) + " ring-2" : "ring-1"}"></div>
|
|
302
|
+
{/each}
|
|
303
|
+
</div>
|
|
304
|
+
|
|
305
|
+
</div>
|
|
306
|
+
{/each}
|
|
307
|
+
</div>
|
|
308
|
+
|
|
309
|
+
<!-- Mobile Feature Comparison Tables -->
|
|
310
|
+
<div class="lg:hidden flex flex-col mx-auto w-full px-8 pt-14">
|
|
311
|
+
|
|
312
|
+
{#each $selectedTable.columns as column}
|
|
313
|
+
<!-- Mobile table headings -->
|
|
314
|
+
<div class="flex flex-row">
|
|
315
|
+
<div class="flex flex-col w-full border-t py-8 {column.highlightOption ? getColorStyles("border", data.product) : ""}">
|
|
316
|
+
<h3 class="text-sm font-semibold leading-6 text-gray-900 {column.highlightOption ? getColorStyles("text", data.product) : ""}">
|
|
317
|
+
{column.name}
|
|
318
|
+
</h3>
|
|
319
|
+
{#if column.flavorText}
|
|
320
|
+
<p>{column.flavorText}</p>
|
|
321
|
+
{/if}
|
|
322
|
+
</div>
|
|
323
|
+
<div class="border-t w-full" />
|
|
324
|
+
</div>
|
|
325
|
+
|
|
326
|
+
<!-- Mobile tables -->
|
|
327
|
+
<div class="flex flex-col w-full pb-14 space-y-8">
|
|
328
|
+
{#each Object.values($selectedTable.categories) as category}
|
|
329
|
+
<div class="relative flex flex-col space-y-8">
|
|
330
|
+
|
|
331
|
+
<h4 class="text-sm font-semibold leading-6 text-gray-900 w-full">{category.name}</h4>
|
|
332
|
+
|
|
333
|
+
<!-- Tables -->
|
|
334
|
+
<div class="flex flex-col w-full shadow-lg">
|
|
335
|
+
|
|
336
|
+
{#each sortFeaturesByOrder(category.features, column.name) as feature, featureIndex }
|
|
337
|
+
<!-- Row -->
|
|
338
|
+
<div class="w-full flex flex-row items-center justify-center {featureIndex !== Object.values(category.features).filter(obj => obj.values[column.name] != undefined).length - 1 ? "border-b" : ""} space-x-8">
|
|
339
|
+
|
|
340
|
+
<!-- Row Header -->
|
|
341
|
+
<div class="flex flex-row w-full text-left text-sm font-normal leading-6 text-gray-900 items-center space-x-2 pl-4">
|
|
342
|
+
<p>{feature.name}</p>
|
|
343
|
+
|
|
344
|
+
<!-- Info Icon and Text -->
|
|
345
|
+
{#if feature.helpText}
|
|
346
|
+
<span class="relative group">
|
|
347
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
|
348
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
|
|
349
|
+
</svg>
|
|
350
|
+
<div class="absolute hidden group-hover:block bg-white border shadow-lg p-2 w-48 z-10 text-center left-1/2 -translate-x-1/2">
|
|
351
|
+
<p>{feature.helpText}</p>
|
|
352
|
+
</div>
|
|
353
|
+
</span>
|
|
354
|
+
{/if}
|
|
355
|
+
</div>
|
|
356
|
+
|
|
357
|
+
<!-- Row Values -->
|
|
358
|
+
<p class="w-full h-full px-4 py-3 text-center
|
|
359
|
+
{column.highlightOption ? "font-bold " + getColorStyles("text", data.product) : ""}
|
|
360
|
+
">
|
|
361
|
+
|
|
362
|
+
<!-- Check mark -->
|
|
363
|
+
{#if feature.values[column.name].value === true}
|
|
364
|
+
<svg class="mx-auto h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
365
|
+
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
|
|
366
|
+
</svg>
|
|
367
|
+
<span class="sr-only">Yes</span>
|
|
368
|
+
|
|
369
|
+
<!-- X Mark -->
|
|
370
|
+
{:else if feature.values[column.name].value === false}
|
|
371
|
+
<svg class="mx-auto h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
372
|
+
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
|
|
373
|
+
</svg>
|
|
374
|
+
<span class="sr-only">No</span>
|
|
375
|
+
|
|
376
|
+
<!-- Text -->
|
|
377
|
+
{:else}
|
|
378
|
+
{feature.values[column.name].value}
|
|
379
|
+
{/if}
|
|
380
|
+
</p>
|
|
381
|
+
|
|
382
|
+
</div>
|
|
383
|
+
{/each}
|
|
384
|
+
|
|
385
|
+
</div>
|
|
386
|
+
|
|
387
|
+
<!-- Dummy div for background rings around features -->
|
|
388
|
+
<div class="pointer-events-none absolute flex flex-row before:block w-full h-full space-x-8 top-0 pt-8 pb-8" aria-hidden="true">
|
|
389
|
+
<div class="w-full"></div>
|
|
390
|
+
<div class="w-full ring-gray-900/10 {column.highlightOption ? getColorStyles("ring", data.product) + " ring-2" : "ring-1"}"></div>
|
|
391
|
+
</div>
|
|
392
|
+
|
|
393
|
+
</div>
|
|
394
|
+
{/each}
|
|
395
|
+
</div>
|
|
396
|
+
{/each}
|
|
397
|
+
</div>
|
|
398
|
+
|
|
399
|
+
</div>
|
|
400
|
+
</main>
|
|
401
|
+
|
|
402
|
+
</div>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} FeatureTableProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} FeatureTableEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} FeatureTableSlots */
|
|
4
|
+
export default class FeatureTable extends SvelteComponent<{
|
|
5
|
+
data?: {};
|
|
6
|
+
}, {
|
|
7
|
+
[evt: string]: CustomEvent<any>;
|
|
8
|
+
}, {}> {
|
|
9
|
+
}
|
|
10
|
+
export type FeatureTableProps = typeof __propDef.props;
|
|
11
|
+
export type FeatureTableEvents = typeof __propDef.events;
|
|
12
|
+
export type FeatureTableSlots = typeof __propDef.slots;
|
|
13
|
+
import { SvelteComponent } from "svelte";
|
|
14
|
+
declare const __propDef: {
|
|
15
|
+
props: {
|
|
16
|
+
data?: {};
|
|
17
|
+
};
|
|
18
|
+
events: {
|
|
19
|
+
[evt: string]: CustomEvent<any>;
|
|
20
|
+
};
|
|
21
|
+
slots: {};
|
|
22
|
+
};
|
|
23
|
+
export {};
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
<script>
|
|
2
|
+
import { makeIdString } from "../utils";
|
|
3
|
+
|
|
2
4
|
export let image = undefined;
|
|
3
5
|
export let title = undefined;
|
|
4
6
|
export let caption = undefined;
|
|
@@ -6,11 +8,7 @@
|
|
|
6
8
|
|
|
7
9
|
let figureImage;
|
|
8
10
|
let figureLink;
|
|
9
|
-
let id
|
|
10
|
-
|
|
11
|
-
if (title) {
|
|
12
|
-
id = encodeURIComponent(title).toLowerCase()
|
|
13
|
-
}
|
|
11
|
+
let id = makeIdString(title);
|
|
14
12
|
|
|
15
13
|
if (image.startsWith("http")) {
|
|
16
14
|
figureImage = image;
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
//Based on: https://tailwindui.com/components/marketing/sections/header#component-2c3b25e7b9e4490edd7b6950692c0a11
|
|
3
3
|
import Icon from "./Icon.svelte";
|
|
4
|
+
import { makeIdString } from "../utils";
|
|
4
5
|
export let data = {};
|
|
5
|
-
let id
|
|
6
|
-
|
|
7
|
-
if (data.name) {
|
|
8
|
-
id = encodeURIComponent(data.name).toLowerCase()
|
|
9
|
-
}
|
|
6
|
+
let id = makeIdString(data.name);
|
|
10
7
|
</script>
|
|
11
8
|
|
|
12
9
|
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import Icon from './Icon.svelte'
|
|
3
3
|
|
|
4
|
-
import { getColorStyles } from '../utils'
|
|
4
|
+
import { getColorStyles, makeIdString } from '../utils'
|
|
5
5
|
export let data = {};
|
|
6
|
-
let id
|
|
7
|
-
|
|
8
|
-
if (data.name) {
|
|
9
|
-
id = encodeURIComponent(data.name).toLowerCase()
|
|
10
|
-
}
|
|
6
|
+
let id = makeIdString(data.name);
|
|
11
7
|
</script>
|
|
12
8
|
|
|
13
9
|
<section {id} class="relative">
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
<script>
|
|
2
|
+
import { makeIdString } from "../utils";
|
|
3
|
+
|
|
2
4
|
// Allows icons from https://fonts.google.com/icons?selected=Material+Icons by name in the format 'icon-XXXX'.
|
|
3
5
|
export let icon = undefined;
|
|
4
6
|
export let classes = undefined;
|
|
5
7
|
|
|
6
|
-
let id;
|
|
7
|
-
|
|
8
|
-
if (icon) {
|
|
9
|
-
id = encodeURIComponent(icon).toLowerCase()
|
|
10
|
-
}
|
|
8
|
+
let id = makeIdString(icon);
|
|
11
9
|
</script>
|
|
12
10
|
|
|
13
11
|
{#if icon == "pyrosim"}
|
|
@@ -1,16 +1,12 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import Video from './Video.svelte'
|
|
3
3
|
|
|
4
|
-
import { getColorStyles } from '../utils'
|
|
4
|
+
import { getColorStyles, makeIdString } from '../utils'
|
|
5
5
|
export let data = {};
|
|
6
6
|
|
|
7
7
|
let figureImage;
|
|
8
8
|
let figureLink;
|
|
9
|
-
let id
|
|
10
|
-
|
|
11
|
-
if (data.name) {
|
|
12
|
-
id = encodeURIComponent(data.name).toLowerCase()
|
|
13
|
-
}
|
|
9
|
+
let id = makeIdString(data.name);
|
|
14
10
|
|
|
15
11
|
if (data.image) {
|
|
16
12
|
if (data.image.startsWith("http")) {
|
|
@@ -4,6 +4,7 @@ import Button from './Button.svelte'
|
|
|
4
4
|
import { page } from '$app/stores';
|
|
5
5
|
import { paginate, PaginationNav } from "svelte-paginate";
|
|
6
6
|
import Icon from "./Icon.svelte";
|
|
7
|
+
import { makeIdString } from '../utils';
|
|
7
8
|
|
|
8
9
|
export let data = {};
|
|
9
10
|
|
|
@@ -16,11 +17,7 @@ import Button from './Button.svelte'
|
|
|
16
17
|
let showArrows = (data.showArrows?data.showArrows:false);
|
|
17
18
|
let rangeLimit = (data.rangeLimit?data.rangeLimit:1)
|
|
18
19
|
let showPagination = (data.showPagination?data.showPagination:false);
|
|
19
|
-
let id
|
|
20
|
-
|
|
21
|
-
if (data.name) {
|
|
22
|
-
id = encodeURIComponent(data.name).toLowerCase()
|
|
23
|
-
}
|
|
20
|
+
let id = makeIdString(data.name);
|
|
24
21
|
|
|
25
22
|
if (postLimit > 0) {
|
|
26
23
|
posts = posts.slice(0, postLimit);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
import { getColorStyles } from "../utils";
|
|
2
|
+
import { getColorStyles, makeIdString } from "../utils";
|
|
3
3
|
import { fade, slide } from "svelte/transition";
|
|
4
4
|
import { cubicIn, cubicOut } from "svelte/easing";
|
|
5
5
|
import Icon from "./Icon.svelte";
|
|
@@ -7,10 +7,7 @@
|
|
|
7
7
|
export let data = {};
|
|
8
8
|
let {logo, logo_mobile, logo_link_url, logo_alt_text, ctas, dropdowns, links} = data;
|
|
9
9
|
|
|
10
|
-
let id;
|
|
11
|
-
if (data.name) {
|
|
12
|
-
id = encodeURIComponent(data.name).toLowerCase()
|
|
13
|
-
}
|
|
10
|
+
let id = makeIdString(data.name);
|
|
14
11
|
|
|
15
12
|
let openDropdown = "";
|
|
16
13
|
export function clickOutside(node) {
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
import { cubicIn, cubicOut } from "svelte/easing";
|
|
5
5
|
import Icon from "./Icon.svelte";
|
|
6
6
|
import slugify from "slugify";
|
|
7
|
-
import { writable } from "svelte/store";
|
|
8
7
|
import { onMount } from "svelte";
|
|
8
|
+
import { makeIdString } from "../utils";
|
|
9
9
|
|
|
10
10
|
export let data;
|
|
11
11
|
let {name, product} = data;
|
|
@@ -22,10 +22,7 @@
|
|
|
22
22
|
let regionSelector = {};
|
|
23
23
|
regions.forEach(region => regionSelector[region] = false);
|
|
24
24
|
|
|
25
|
-
let id;
|
|
26
|
-
if (name) {
|
|
27
|
-
id = encodeURIComponent(name).toLowerCase()
|
|
28
|
-
}
|
|
25
|
+
let id = makeIdString(name);
|
|
29
26
|
|
|
30
27
|
//Filter the list of partners again using new information
|
|
31
28
|
function refresh() {
|
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
import { getColorStyles } from '../utils'
|
|
2
|
+
import { getColorStyles, makeIdString } from '../utils'
|
|
3
3
|
export let data = {};
|
|
4
4
|
let toggleID = data.groups[0].id
|
|
5
|
-
let id
|
|
6
|
-
|
|
7
|
-
if (data.name) {
|
|
8
|
-
id = encodeURIComponent(data.name).toLowerCase()
|
|
9
|
-
}
|
|
5
|
+
let id = makeIdString(data.name);
|
|
10
6
|
|
|
11
7
|
function toggleSelection(group_id) {
|
|
12
8
|
toggleID = group_id
|
|
@@ -1,16 +1,12 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import { onMount } from "svelte";
|
|
3
|
-
import { buildToC } from "../utils.js";
|
|
3
|
+
import { buildToC, makeIdString } from "../utils.js";
|
|
4
4
|
|
|
5
5
|
export let data = {};
|
|
6
6
|
export let title = undefined;
|
|
7
7
|
export let date = undefined;
|
|
8
8
|
export let lastmod = undefined;
|
|
9
|
-
let id
|
|
10
|
-
|
|
11
|
-
if (data.name) {
|
|
12
|
-
id = encodeURIComponent(data.name).toLowerCase()
|
|
13
|
-
}
|
|
9
|
+
let id = makeIdString(data.name);
|
|
14
10
|
|
|
15
11
|
let formattedDate =
|
|
16
12
|
date != undefined
|
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
import { getColorStyles } from '../utils'
|
|
2
|
+
import { getColorStyles, makeIdString } from '../utils'
|
|
3
3
|
export let data = {};
|
|
4
|
-
let id
|
|
5
|
-
|
|
6
|
-
if (data.name) {
|
|
7
|
-
id = encodeURIComponent(data.name).toLowerCase()
|
|
8
|
-
}
|
|
4
|
+
let id = makeIdString(data.name);
|
|
9
5
|
</script>
|
|
10
6
|
|
|
11
7
|
<section {id} class="bg-gray-50">
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import Button from './Button.svelte'
|
|
3
3
|
import Icon from './Icon.svelte'
|
|
4
4
|
|
|
5
|
-
import { getColorStyles } from '../utils'
|
|
5
|
+
import { getColorStyles, makeIdString } from '../utils'
|
|
6
6
|
import { slide } from 'svelte/transition';
|
|
7
7
|
import { quintInOut } from 'svelte/easing';
|
|
8
8
|
import { onMount } from 'svelte'
|
|
@@ -13,11 +13,7 @@ import Icon from './Icon.svelte'
|
|
|
13
13
|
let interval = 12000;
|
|
14
14
|
let auto = true;
|
|
15
15
|
let slideInterval;
|
|
16
|
-
let id;
|
|
17
|
-
|
|
18
|
-
if (data.name) {
|
|
19
|
-
id = encodeURIComponent(data.name).toLowerCase()
|
|
20
|
-
}
|
|
16
|
+
let id = makeIdString(data.name);
|
|
21
17
|
|
|
22
18
|
onMount(() => {
|
|
23
19
|
setSlideAutomation();
|
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import Card from "./Card.svelte";
|
|
3
|
+
import { makeIdString } from "../utils";
|
|
3
4
|
export let data = {};
|
|
4
|
-
let id
|
|
5
|
-
|
|
6
|
-
if (data.name) {
|
|
7
|
-
id = encodeURIComponent(data.name).toLowerCase()
|
|
8
|
-
}
|
|
5
|
+
let id = makeIdString(data.name);
|
|
9
6
|
</script>
|
|
10
7
|
|
|
11
8
|
<section {id} class="mx-auto w-full">
|
package/dist/index.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ export { default as CountrySelector } from "./components/CountrySelector.svelte"
|
|
|
11
11
|
export { default as CTA } from "./components/CTA.svelte";
|
|
12
12
|
export { default as CTASplitImage } from "./components/CTASplitImage.svelte";
|
|
13
13
|
export { default as FeatureGrid } from "./components/FeatureGrid.svelte";
|
|
14
|
+
export { default as FeatureTable } from "./components/FeatureTable.svelte";
|
|
14
15
|
export { default as Figure } from "./components/Figure.svelte";
|
|
15
16
|
export { default as Footer } from "./components/Footer.svelte";
|
|
16
17
|
export { default as Header } from "./components/Header.svelte";
|
package/dist/index.js
CHANGED
|
@@ -11,6 +11,7 @@ export { default as CountrySelector } from './components/CountrySelector.svelte'
|
|
|
11
11
|
export { default as CTA } from './components/CTA.svelte';
|
|
12
12
|
export { default as CTASplitImage } from './components/CTASplitImage.svelte';
|
|
13
13
|
export { default as FeatureGrid } from './components/FeatureGrid.svelte';
|
|
14
|
+
export { default as FeatureTable } from './components/FeatureTable.svelte';
|
|
14
15
|
export { default as Figure } from './components/Figure.svelte';
|
|
15
16
|
export { default as Footer } from './components/Footer.svelte';
|
|
16
17
|
export { default as Header } from './components/Header.svelte';
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
import Video from "../components/Video.svelte";
|
|
12
12
|
import Hero from "../components/Hero.svelte";
|
|
13
13
|
import FeatureGrid from "../components/FeatureGrid.svelte";
|
|
14
|
+
import FeatureTable from "../components/FeatureTable.svelte";
|
|
14
15
|
import LogoCloud from "../components/LogoCloud.svelte";
|
|
15
16
|
import CTASplitImage from "../components/CTASplitImage.svelte";
|
|
16
17
|
import ContentTwoColumns from "../components/ContentTwoColumns.svelte";
|
|
@@ -33,6 +34,7 @@
|
|
|
33
34
|
{ ref: "video", component: Video },
|
|
34
35
|
{ ref: "hero", component: Hero },
|
|
35
36
|
{ ref: "feature-grid", component: FeatureGrid },
|
|
37
|
+
{ ref: "feature-table", component: FeatureTable },
|
|
36
38
|
{ ref: "logo-cloud", component: LogoCloud },
|
|
37
39
|
{ ref: "cta-split-image", component: CTASplitImage },
|
|
38
40
|
{ ref: "content-two-columns", component: ContentTwoColumns },
|
package/dist/utils.d.ts
CHANGED
package/dist/utils.js
CHANGED
|
@@ -67,6 +67,139 @@ export function getColorStyles(type, color){
|
|
|
67
67
|
break;
|
|
68
68
|
}
|
|
69
69
|
break;
|
|
70
|
+
case 'border':
|
|
71
|
+
switch (color) {
|
|
72
|
+
case 'pyrosim':
|
|
73
|
+
classes = "border-pyrosim"
|
|
74
|
+
break;
|
|
75
|
+
case 'pathfinder':
|
|
76
|
+
classes = "border-pathfinder"
|
|
77
|
+
break;
|
|
78
|
+
case 'ventus':
|
|
79
|
+
classes = "border-ventus"
|
|
80
|
+
break;
|
|
81
|
+
case 'teci':
|
|
82
|
+
classes = "border-teci-blue-light"
|
|
83
|
+
break;
|
|
84
|
+
default:
|
|
85
|
+
classes = "border-white"
|
|
86
|
+
break;
|
|
87
|
+
}
|
|
88
|
+
break;
|
|
89
|
+
case 'border-t':
|
|
90
|
+
switch (color) {
|
|
91
|
+
case 'pyrosim':
|
|
92
|
+
classes = "border-t-pyrosim"
|
|
93
|
+
break;
|
|
94
|
+
case 'pathfinder':
|
|
95
|
+
classes = "border-t-pathfinder"
|
|
96
|
+
break;
|
|
97
|
+
case 'ventus':
|
|
98
|
+
classes = "border-t-ventus"
|
|
99
|
+
break;
|
|
100
|
+
case 'teci':
|
|
101
|
+
classes = "border-t-teci-blue-light"
|
|
102
|
+
break;
|
|
103
|
+
default:
|
|
104
|
+
classes = "border-t-white"
|
|
105
|
+
break;
|
|
106
|
+
}
|
|
107
|
+
break;
|
|
108
|
+
case 'border-b':
|
|
109
|
+
switch (color) {
|
|
110
|
+
case 'pyrosim':
|
|
111
|
+
classes = "border-b-pyrosim"
|
|
112
|
+
break;
|
|
113
|
+
case 'pathfinder':
|
|
114
|
+
classes = "border-b-pathfinder"
|
|
115
|
+
break;
|
|
116
|
+
case 'ventus':
|
|
117
|
+
classes = "border-b-ventus"
|
|
118
|
+
break;
|
|
119
|
+
case 'teci':
|
|
120
|
+
classes = "border-b-teci-blue-light"
|
|
121
|
+
break;
|
|
122
|
+
default:
|
|
123
|
+
classes = "border-b-white"
|
|
124
|
+
break;
|
|
125
|
+
}
|
|
126
|
+
break;
|
|
127
|
+
case 'border-x':
|
|
128
|
+
switch (color) {
|
|
129
|
+
case 'pyrosim':
|
|
130
|
+
classes = "border-x-pyrosim"
|
|
131
|
+
break;
|
|
132
|
+
case 'pathfinder':
|
|
133
|
+
classes = "border-x-pathfinder"
|
|
134
|
+
break;
|
|
135
|
+
case 'ventus':
|
|
136
|
+
classes = "border-x-ventus"
|
|
137
|
+
break;
|
|
138
|
+
case 'teci':
|
|
139
|
+
classes = "border-x-teci-blue-light"
|
|
140
|
+
break;
|
|
141
|
+
default:
|
|
142
|
+
classes = "border-x-white"
|
|
143
|
+
break;
|
|
144
|
+
}
|
|
145
|
+
break;
|
|
146
|
+
case 'gradient':
|
|
147
|
+
switch (color) {
|
|
148
|
+
case 'pyrosim':
|
|
149
|
+
classes = "from-pyrosim to-white"
|
|
150
|
+
break;
|
|
151
|
+
case 'pathfinder':
|
|
152
|
+
classes = "from-pathfinder to-white"
|
|
153
|
+
break;
|
|
154
|
+
case 'ventus':
|
|
155
|
+
classes = "from-ventus to-white"
|
|
156
|
+
break;
|
|
157
|
+
case 'teci':
|
|
158
|
+
classes = "from-teci-blue-light to-white"
|
|
159
|
+
break;
|
|
160
|
+
default:
|
|
161
|
+
classes = "bg-white"
|
|
162
|
+
break;
|
|
163
|
+
}
|
|
164
|
+
break;
|
|
165
|
+
case 'gradient-dark':
|
|
166
|
+
switch (color) {
|
|
167
|
+
case 'pyrosim':
|
|
168
|
+
classes = "from-pyrosim-dark to-white"
|
|
169
|
+
break;
|
|
170
|
+
case 'pathfinder':
|
|
171
|
+
classes = "from-pathfinder-dark to-white"
|
|
172
|
+
break;
|
|
173
|
+
case 'ventus':
|
|
174
|
+
classes = "from-ventus-dark to-white"
|
|
175
|
+
break;
|
|
176
|
+
case 'teci':
|
|
177
|
+
classes = "from-teci-blue-dark to-white"
|
|
178
|
+
break;
|
|
179
|
+
default:
|
|
180
|
+
classes = "bg-white"
|
|
181
|
+
break;
|
|
182
|
+
}
|
|
183
|
+
break;
|
|
184
|
+
case 'ring':
|
|
185
|
+
switch (color) {
|
|
186
|
+
case 'pyrosim':
|
|
187
|
+
classes = "ring-pyrosim"
|
|
188
|
+
break;
|
|
189
|
+
case 'pathfinder':
|
|
190
|
+
classes = "ring-pathfinder"
|
|
191
|
+
break;
|
|
192
|
+
case 'ventus':
|
|
193
|
+
classes = "ring-ventus"
|
|
194
|
+
break;
|
|
195
|
+
case 'teci':
|
|
196
|
+
classes = "ring-teci-blue-light"
|
|
197
|
+
break;
|
|
198
|
+
default:
|
|
199
|
+
classes = "ring-white"
|
|
200
|
+
break;
|
|
201
|
+
}
|
|
202
|
+
break;
|
|
70
203
|
default:
|
|
71
204
|
break;
|
|
72
205
|
}
|
|
@@ -160,3 +293,11 @@ export function buildToC() {
|
|
|
160
293
|
return true;
|
|
161
294
|
}
|
|
162
295
|
}
|
|
296
|
+
|
|
297
|
+
// Takes a string and transforms it to something usable as an anchor tag in HTML
|
|
298
|
+
export function makeIdString(text) {
|
|
299
|
+
if (text) {
|
|
300
|
+
return encodeURIComponent(text).toLowerCase();
|
|
301
|
+
}
|
|
302
|
+
return null; //Null because most of our components use a null id as a default
|
|
303
|
+
}
|