+
+Make sure you create it as a HTML component.
+
+
+
+A code field then appears.
+
+### Import library
+
+To use these webcomponents you must import the library.
+
+#### Import specific version (recommended)
+
+To get a **specific version of this libary** recommended and won't be affected by change in the code you can get by running:
+Usually you want to get the most recent version published, but want to fix it to that version, since future versions may not suport the elements you are using.
+
+```html
+
+```
+
+If for instance you want to get version 1.2.3:
+
+```html
+
+```
+
+#### Always get latest version (not recommended)
+
+To get the latest version, **not recommend**. you can install it like this.
+
+```html
+
+```
+
+### How to use a component
+
+Make sure that you have first imported the library.
+
+Example
+
+```html
+
+
+ );
+ }
+}
diff --git a/packages/tc-web/src/components/tc-bulletpoint-list/readme.md b/packages/tc-web/src/components/tc-bulletpoint-list/readme.md
new file mode 100644
index 00000000..77ec3f8e
--- /dev/null
+++ b/packages/tc-web/src/components/tc-bulletpoint-list/readme.md
@@ -0,0 +1,17 @@
+# tc-prerequisite
+
+
+
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ----------------- | ------------------ | ----------- | -------- | ---------------------- |
+| `backgroundColor` | `background-color` | | `string` | `"rgb(255, 255, 255)"` |
+| `bulletpoints` | `bulletpoints` | | `"[]"` | `undefined` |
+| `header` | `title` | | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/tc-web/src/components/tc-bulletpoint-list/tc-bulletpoint-list.css b/packages/tc-web/src/components/tc-bulletpoint-list/tc-bulletpoint-list.css
new file mode 100644
index 00000000..5d4e87f3
--- /dev/null
+++ b/packages/tc-web/src/components/tc-bulletpoint-list/tc-bulletpoint-list.css
@@ -0,0 +1,3 @@
+:host {
+ display: block;
+}
diff --git a/packages/tc-web/src/components/tc-bulletpoint-list/tc-bulletpoint-list.tsx b/packages/tc-web/src/components/tc-bulletpoint-list/tc-bulletpoint-list.tsx
new file mode 100644
index 00000000..1fd09768
--- /dev/null
+++ b/packages/tc-web/src/components/tc-bulletpoint-list/tc-bulletpoint-list.tsx
@@ -0,0 +1,42 @@
+import { Component, Prop, h } from "@stencil/core";
+
+@Component({
+ tag: "tc-bulletpoint-list",
+ styleUrl: "tc-bulletpoint-list.css",
+ shadow: true,
+})
+export class BulletpointList {
+ @Prop({ attribute: "title" }) header: string;
+ @Prop() bulletpoints: "[]";
+ @Prop() backgroundColor: string = "rgb(255, 255, 255)";
+
+ get bulletpointArray() {
+ try {
+ return JSON.parse(this.bulletpoints);
+ } catch (e) {
+ console.error("Error parsing tags:", e);
+ return [];
+ }
+ }
+
+ render() {
+ return (
+
+
+ {this.jobTitle}
+{this.description}
+-
+ {parseTags(this.tags).map((tag) => (
+
+ {tag}
+
+ ))}
+
+ 
+
+
+
+ );
+ }
+}
diff --git a/packages/tc-web/src/components/tc-collapsible/readme.md b/packages/tc-web/src/components/tc-collapsible/readme.md
new file mode 100644
index 00000000..b8f27806
--- /dev/null
+++ b/packages/tc-web/src/components/tc-collapsible/readme.md
@@ -0,0 +1,18 @@
+# tc-project
+
+
+
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ----------------- | ------------------ | ----------- | -------- | ---------------------- |
+| `backgroundColor` | `background-color` | | `string` | `"rgb(255, 255, 255)"` |
+| `colTitle` | `col-title` | | `string` | `undefined` |
+| `description` | `description` | | `string` | `""` |
+| `tags` | `tags` | | `string` | `"[]"` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/tc-web/src/components/tc-collapsible/tc-collapsible.css b/packages/tc-web/src/components/tc-collapsible/tc-collapsible.css
new file mode 100644
index 00000000..bcc75575
--- /dev/null
+++ b/packages/tc-web/src/components/tc-collapsible/tc-collapsible.css
@@ -0,0 +1,3 @@
+:host() {
+ display: block;
+}
diff --git a/packages/tc-web/src/components/tc-collapsible/tc-collapsible.tsx b/packages/tc-web/src/components/tc-collapsible/tc-collapsible.tsx
new file mode 100644
index 00000000..36a13c37
--- /dev/null
+++ b/packages/tc-web/src/components/tc-collapsible/tc-collapsible.tsx
@@ -0,0 +1,65 @@
+import { Component, h, Prop, State } from "@stencil/core";
+import { parseTags } from "../../util/util";
+
+@Component({
+ tag: "tc-collapsible",
+ styleUrl: "tc-collapsible.css",
+ shadow: true,
+})
+export class TcCollapsible {
+ @Prop() colTitle: string;
+ @Prop() description: string = "";
+ @Prop() tags: string = "[]";
+ @Prop() backgroundColor: string = "rgb(255, 255, 255)";
+
+ @State() showDetails: boolean = false;
+ toggleDetails = () => {
+ this.showDetails = !this.showDetails;
+ };
+
+ render() {
+ return (
+ + {this.header} +
+ +-
+ {this.bulletpointArray.map((bulletpoint, index) => (
+
- + {bulletpoint} + + ))} +
+
+ );
+ }
+}
diff --git a/packages/tc-web/src/components/tc-grid-container/readme.md b/packages/tc-web/src/components/tc-grid-container/readme.md
new file mode 100644
index 00000000..f0d3ef52
--- /dev/null
+++ b/packages/tc-web/src/components/tc-grid-container/readme.md
@@ -0,0 +1,19 @@
+# tc-grid-container
+
+
+
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ----------------- | ------------------ | ----------- | -------- | ---------------------- |
+| `backgroundColor` | `background-color` | | `string` | `"rgb(255, 255, 255)"` |
+| `columns` | `columns` | | `number` | `1` |
+| `gap` | `gap` | | `string` | `""` |
+| `lgColumns` | `lg-columns` | | `number` | `4` |
+| `mdColumns` | `md-columns` | | `number` | `2` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/tc-web/src/components/tc-grid-container/tc-grid-container.css b/packages/tc-web/src/components/tc-grid-container/tc-grid-container.css
new file mode 100644
index 00000000..5d4e87f3
--- /dev/null
+++ b/packages/tc-web/src/components/tc-grid-container/tc-grid-container.css
@@ -0,0 +1,3 @@
+:host {
+ display: block;
+}
diff --git a/packages/tc-web/src/components/tc-grid-container/tc-grid-container.tsx b/packages/tc-web/src/components/tc-grid-container/tc-grid-container.tsx
new file mode 100644
index 00000000..02d7e663
--- /dev/null
+++ b/packages/tc-web/src/components/tc-grid-container/tc-grid-container.tsx
@@ -0,0 +1,94 @@
+import { Component, Prop, h } from "@stencil/core";
+
+@Component({
+ tag: "tc-grid-container",
+ shadow: true,
+ styleUrl: "tc-grid-container.css",
+})
+export class TcGridContainer {
+ @Prop() mdColumns: 1|2|3|4|5|6 = 2;
+ @Prop() lgColumns: 1|2|3|4|5|6 = 4;
+ @Prop() columns: 1|2|3|4|5|6 = 1;
+ @Prop() gap: 'sm' | 'md' | 'lg' | 'xl' = "md";
+ @Prop() backgroundColor: string = "rgb(255, 255, 255)";
+
+ // Default to 2 columns
+
+ render() {
+ const gridClasses = `grid ${this.getMdColumns()} ${this.getColumns()} ${this.getGap()} ${this.getLgColumns()}`;
+ return (
+
+
+ {this.showDetails &&
+
+ + {this.colTitle} +
+{this.description}
+
+
+
+
+ {parseTags(this.tags).map((tag) => (
+
+
+ {tag}
+
+ ))}
+
+
+ );
+ }
+
+ private getMdColumns(): string {
+ switch (this.mdColumns) {
+ case 1:
+ return "md:grid-cols-1";
+ case 2:
+ return "md:grid-cols-2";
+ case 3:
+ return "md:grid-cols-3 ";
+ case 4:
+ return "md:grid-cols-4 ";
+ case 5:
+ return "md:grid-cols-5 ";
+ case 6:
+ return "md:grid-cols-6";
+ }
+ }
+
+ private getLgColumns(): string {
+ switch (this.lgColumns) {
+ case 1:
+ return "lg:grid-cols-1";
+ case 2:
+ return "lg:grid-cols-2";
+ case 3:
+ return "lg:grid-cols-3";
+ case 4:
+ return "lg:grid-cols-4";
+ case 5:
+ return "lg:grid-cols-5";
+ case 6:
+ return "lg:grid-cols-6";
+ }
+ }
+
+ private getColumns(): string {
+ switch (this.columns) {
+ case 1:
+ return "grid-cols-1";
+ case 2:
+ return "grid-cols-2 ";
+ case 3:
+ return "grid-cols-3";
+ case 4:
+ return "grid-cols-4";
+ case 5:
+ return "grid-cols-5";
+ case 6:
+ return "grid-cols-6";
+ }
+ }
+
+ private getGap(): string {
+ switch (this.gap) {
+ case "sm":
+ return "gap-2 md:gap-4 lg:gap-6";
+ case "md":
+ return "gap-4 md:gap-8 lg:gap-12";
+ case "lg":
+ return "gap-8 md:gap-12 lg:gap-16";
+ case "xl":
+ return "gap-12 md:gap-16 lg: gap-20";
+ default:
+ return `gap-4 md:gap-8 lg:gap-12`;
+ }
+ }
+}
diff --git a/packages/tc-web/src/components/tc-grid-item/readme.md b/packages/tc-web/src/components/tc-grid-item/readme.md
new file mode 100644
index 00000000..bcccdd36
--- /dev/null
+++ b/packages/tc-web/src/components/tc-grid-item/readme.md
@@ -0,0 +1,18 @@
+# tc-framework-item
+
+
+
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ---------- | ----------- | ----------- | -------- | ----------- |
+| `giTitle` | `title` | | `string` | `undefined` |
+| `imageSrc` | `image-src` | | `string` | `undefined` |
+| `link` | `link` | | `string` | `undefined` |
+| `width` | `width` | | `string` | `"lg"` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/tc-web/src/components/tc-grid-item/tc-grid-item.css b/packages/tc-web/src/components/tc-grid-item/tc-grid-item.css
new file mode 100644
index 00000000..5d4e87f3
--- /dev/null
+++ b/packages/tc-web/src/components/tc-grid-item/tc-grid-item.css
@@ -0,0 +1,3 @@
+:host {
+ display: block;
+}
diff --git a/packages/tc-web/src/components/tc-grid-item/tc-grid-item.tsx b/packages/tc-web/src/components/tc-grid-item/tc-grid-item.tsx
new file mode 100644
index 00000000..7b114319
--- /dev/null
+++ b/packages/tc-web/src/components/tc-grid-item/tc-grid-item.tsx
@@ -0,0 +1,61 @@
+import { Component, Prop, h } from "@stencil/core";
+
+@Component({
+ tag: "tc-grid-item",
+ styleUrl: "tc-grid-item.css",
+ shadow: true,
+})
+export class GridItem {
+ @Prop() imageSrc: string;
+ @Prop({ attribute: "title" }) giTitle: string;
+ @Prop() link: string;
+ @Prop() width: string = "lg";
+
+ render() {
+ const gridItemStyle = `flex flex-col items-center font-normal shadow-md font-sans m-2 ${this.getWidth()}`;
+ return (
+
+
+ );
+ }
+
+ private getWidth(): string {
+ switch (this.width) {
+ case "2xl":
+ return "mx-1 md:mx-2 lg:mx-4";
+ case "xl":
+ return "mx-2 md:mx-4 lg:mx-8";
+ case "lg":
+ return "mx-4 md:mx-8 lg:mx-16";
+ case "md":
+ return "mx-8 md:mx-16 lg:mx-24";
+ case "sm":
+ return "mx-16 md:mx-24 lg:mx-30";
+ case "xs":
+ return "mx-24 md:mx-32 lg:mx-40";
+ default:
+ return "mx-2 md:mx-4 lg:mx-8";
+ }
+ }
+}
diff --git a/packages/tc-web/src/components/tc-img-quote-card/readme.md b/packages/tc-web/src/components/tc-img-quote-card/readme.md
new file mode 100644
index 00000000..f160592b
--- /dev/null
+++ b/packages/tc-web/src/components/tc-img-quote-card/readme.md
@@ -0,0 +1,22 @@
+# tc-testimonial
+
+
+
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ----------------- | ------------------ | ----------- | --------- | ----------- |
+| `altText` | `alt-text` | | `string` | `"Picture"` |
+| `backgroundColor` | `background-color` | | `string` | `"#FFFFFF"` |
+| `borderColor` | `border-color` | | `string` | `""` |
+| `imageOnLeft` | `image-on-left` | | `boolean` | `false` |
+| `imageSrc` | `image-src` | | `string` | `undefined` |
+| `pro` | `title` | | `string` | `undefined` |
+| `quote` | `quote` | | `string` | `undefined` |
+| `quotee` | `quotee` | | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/tc-web/src/components/tc-img-quote-card/tc-img-quote-card.css b/packages/tc-web/src/components/tc-img-quote-card/tc-img-quote-card.css
new file mode 100644
index 00000000..5d4e87f3
--- /dev/null
+++ b/packages/tc-web/src/components/tc-img-quote-card/tc-img-quote-card.css
@@ -0,0 +1,3 @@
+:host {
+ display: block;
+}
diff --git a/packages/tc-web/src/components/tc-img-quote-card/tc-img-quote-card.tsx b/packages/tc-web/src/components/tc-img-quote-card/tc-img-quote-card.tsx
new file mode 100644
index 00000000..965b7300
--- /dev/null
+++ b/packages/tc-web/src/components/tc-img-quote-card/tc-img-quote-card.tsx
@@ -0,0 +1,91 @@
+import { Component, Prop, h } from "@stencil/core";
+
+@Component({
+ tag: "tc-img-quote-card",
+ styleUrl: "tc-img-quote-card.css",
+ shadow: true,
+})
+export class ImgQuoteCard {
+ @Prop() quote: string;
+ @Prop() quotee: string;
+ @Prop() imageOnLeft: boolean = false;
+ @Prop() imageSrc: string;
+ @Prop({ attribute: "title" }) pro: string;
+ @Prop() altText: string = "Picture";
+ @Prop() backgroundColor: string = "#FFFFFF";
+ @Prop() borderColor: string = "";
+
+ render() {
+ const imageSection = (
+
+
+
+
+
+
+
+
+ + {this.giTitle} +
+ +
+
+
+ );
+
+ const textSection = (
+
+
+ );
+
+ return (
+ {this.pro}
++ “ ++{this.quote}
+ ” +
+
+ {this.quotee}
+
+ {imageSection}
+ {textSection}
+
+ );
+ }
+}
diff --git a/packages/tc-web/src/components/tc-img-text-card/readme.md b/packages/tc-web/src/components/tc-img-text-card/readme.md
new file mode 100644
index 00000000..31cf0373
--- /dev/null
+++ b/packages/tc-web/src/components/tc-img-text-card/readme.md
@@ -0,0 +1,20 @@
+# tc-job-card
+
+
+
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| --------------------- | ---------------------- | ----------- | --------- | ----------- |
+| `borderColor` | `border-color` | | `string` | `""` |
+| `detailedDescription` | `detailed-description` | | `string` | `undefined` |
+| `imageOnLeft` | `image-on-left` | | `boolean` | `false` |
+| `imageSrc` | `image-src` | | `string` | `undefined` |
+| `shortDescription` | `short-description` | | `string` | `undefined` |
+| `tcImgTextCardTitle` | `title` | | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/tc-web/src/components/tc-img-text-card/tc-img-text-card.css b/packages/tc-web/src/components/tc-img-text-card/tc-img-text-card.css
new file mode 100644
index 00000000..5d4e87f3
--- /dev/null
+++ b/packages/tc-web/src/components/tc-img-text-card/tc-img-text-card.css
@@ -0,0 +1,3 @@
+:host {
+ display: block;
+}
diff --git a/packages/tc-web/src/components/tc-img-text-card/tc-img-text-card.tsx b/packages/tc-web/src/components/tc-img-text-card/tc-img-text-card.tsx
new file mode 100644
index 00000000..e4e8f4dc
--- /dev/null
+++ b/packages/tc-web/src/components/tc-img-text-card/tc-img-text-card.tsx
@@ -0,0 +1,49 @@
+import { Component, Prop, h } from "@stencil/core";
+
+@Component({
+ tag: "tc-img-text-card",
+ styleUrl: "tc-img-text-card.css",
+ shadow: true,
+})
+export class TcImgTextCard {
+ @Prop() imageSrc: string;
+ @Prop({ attribute: "title" }) tcImgTextCardTitle: string;
+ @Prop() shortDescription: string;
+ @Prop() detailedDescription: string;
+ @Prop() imageOnLeft: boolean = false;
+ @Prop() borderColor: string = "";
+
+ render() {
+ const imageClass = this.imageOnLeft ? "lg:order-1" : "lg:order-2";
+ const textClass = this.imageOnLeft ? "lg:order-2" : "lg:order-1";
+ const borderStyle = this.borderColor
+ ? `border-${this.borderColor} border-solid`
+ : "";
+
+ return (
+
+
+ );
+ }
+}
diff --git a/packages/tc-web/src/components/tc-segment-container/readme.md b/packages/tc-web/src/components/tc-segment-container/readme.md
new file mode 100644
index 00000000..39d21ab6
--- /dev/null
+++ b/packages/tc-web/src/components/tc-segment-container/readme.md
@@ -0,0 +1,16 @@
+# segment-container
+
+
+
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ----------------- | ------------------ | ----------- | -------- | ----------- |
+| `backgroundColor` | `background-color` | | `string` | `undefined` |
+| `segTitle` | `seg-title` | | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/tc-web/src/components/tc-segment-container/tc-segment-container.css b/packages/tc-web/src/components/tc-segment-container/tc-segment-container.css
new file mode 100644
index 00000000..5d4e87f3
--- /dev/null
+++ b/packages/tc-web/src/components/tc-segment-container/tc-segment-container.css
@@ -0,0 +1,3 @@
+:host {
+ display: block;
+}
diff --git a/packages/tc-web/src/components/tc-segment-container/tc-segment-container.tsx b/packages/tc-web/src/components/tc-segment-container/tc-segment-container.tsx
new file mode 100644
index 00000000..95a537a4
--- /dev/null
+++ b/packages/tc-web/src/components/tc-segment-container/tc-segment-container.tsx
@@ -0,0 +1,33 @@
+// segment-container.tsx
+import { Component, Prop, h, Host } from "@stencil/core";
+
+@Component({
+ tag: "segment-container",
+ styleUrl: "tc-segment-container.css",
+ shadow: true,
+})
+export class SegmentContainer {
+ @Prop({attribute:"title"}) segTitle: string;
+ @Prop() backgroundColor: string;
+
+ render() {
+ const style = this.backgroundColor
+ ? { "background-color": this.backgroundColor }
+ : {};
+
+ return (
+
+
+
+
+
+
+
+
+
+ + {this.tcImgTextCardTitle} +
+{this.shortDescription}
+{this.detailedDescription}
+ +
+
+
+ {this.segTitle && (
+
+ + {this.segTitle} +
+ )} +
+
+ );
+ }
+
+ private handleSlotChange(e: Event) {
+ const slot = e.target as HTMLSlotElement;
+ const nodes = slot.assignedNodes({ flatten: true });
+ if (nodes.length === 0) {
+ this.renderFallbackMessage();
+ }
+ }
+
+ private renderFallbackMessage() {
+ const container = document.querySelector(".slot-container");
+ container.innerHTML = `
+ {this.level}
+
+
+
+
+
+ `;
+ }
+}
diff --git a/packages/tc-web/src/components/tc-svg-icon-card/readme.md b/packages/tc-web/src/components/tc-svg-icon-card/readme.md
new file mode 100644
index 00000000..62799b20
--- /dev/null
+++ b/packages/tc-web/src/components/tc-svg-icon-card/readme.md
@@ -0,0 +1,22 @@
+# tc-benefits-section
+
+
+
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ----------------- | ------------------- | ----------- | -------- | ------------------------------ |
+| `advantageTitle` | `title` | | `string` | `undefined` |
+| `backgroundColor` | `background-color` | | `string` | `"rgb(255, 255, 255)"` |
+| `iconBackground` | `icon-background` | | `string` | `"rgb(0, 0, 0)"` |
+| `iconColor` | `icon-color` | | `string` | `"rgb(255, 255, 255)"` |
+| `iconSvgPath` | `icon-svg-path` | | `string` | `undefined` |
+| `iconSvgViewBox` | `icon-svg-view-box` | | `string` | `undefined` |
+| `iconSvgXmlns` | `icon-svg-xmlns` | | `string` | `"http://www.w3.org/2000/svg"` |
+| `text` | `text` | | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/tc-web/src/components/tc-svg-icon-card/tc-svg-icon-card.css b/packages/tc-web/src/components/tc-svg-icon-card/tc-svg-icon-card.css
new file mode 100644
index 00000000..5d4e87f3
--- /dev/null
+++ b/packages/tc-web/src/components/tc-svg-icon-card/tc-svg-icon-card.css
@@ -0,0 +1,3 @@
+:host {
+ display: block;
+}
diff --git a/packages/tc-web/src/components/tc-svg-icon-card/tc-svg-icon-card.tsx b/packages/tc-web/src/components/tc-svg-icon-card/tc-svg-icon-card.tsx
new file mode 100644
index 00000000..28bf8a9c
--- /dev/null
+++ b/packages/tc-web/src/components/tc-svg-icon-card/tc-svg-icon-card.tsx
@@ -0,0 +1,45 @@
+import { Component, Prop, h } from "@stencil/core";
+
+@Component({
+ tag: "tc-svg-icon-card",
+ styleUrl: "tc-svg-icon-card.css",
+ shadow: true,
+})
+export class SVGIconCard {
+ @Prop({ attribute: "title" }) advantageTitle: string;
+ @Prop() text: string;
+ @Prop() iconSvgPath: string;
+ @Prop() iconSvgViewBox: string;
+ @Prop() iconColor: string = "rgb(255, 255, 255)";
+ @Prop() iconBackground: string = "rgb(0, 0, 0)";
+ @Prop() iconSvgXmlns: string = "http://www.w3.org/2000/svg";
+ @Prop() backgroundColor: string = "rgb(255, 255, 255)";
+
+ render() {
+ return (
+ + Currently no positions advertised +
+
+
+ );
+ }
+}
diff --git a/packages/tc-web/src/index.html b/packages/tc-web/src/index.html
new file mode 100644
index 00000000..98abecb1
--- /dev/null
+++ b/packages/tc-web/src/index.html
@@ -0,0 +1,226 @@
+
+
+
+
+
+
+
+
+ + {this.advantageTitle} +
++ {this.text} +
+