diff --git a/packages/tc-web/.prettierrc.mjs b/packages/tc-web/.prettierrc.cjs similarity index 88% rename from packages/tc-web/.prettierrc.mjs rename to packages/tc-web/.prettierrc.cjs index 8e37498..94293e5 100644 --- a/packages/tc-web/.prettierrc.mjs +++ b/packages/tc-web/.prettierrc.cjs @@ -1,4 +1,4 @@ -export default { +module.exports = { semi: false, singleQuote: true, trailingComma: 'es5', diff --git a/packages/tc-web/package.json b/packages/tc-web/package.json index e57139e..dadb0d0 100644 --- a/packages/tc-web/package.json +++ b/packages/tc-web/package.json @@ -2,6 +2,7 @@ "name": "@uzh-bf/design-system-stencil", "version": "3.0.0-alpha.35", "description": "Web components components for DF", + "type": "module", "main": "dist/index.cjs.js", "module": "./dist/index.js", "es2015": "dist/esm/index.mjs", @@ -17,7 +18,7 @@ "scripts": { "build": "stencil build --docs", "dev": "stencil build --dev --watch --serve", - "format": "prettier write .", + "format": "prettier --write .", "test": "stencil test --spec --e2e", "test.watch": "stencil test --spec --e2e --watchAll", "generate": "stencil generate" diff --git a/packages/tc-web/src/components.d.ts b/packages/tc-web/src/components.d.ts index 152e24f..dd8cbbb 100644 --- a/packages/tc-web/src/components.d.ts +++ b/packages/tc-web/src/components.d.ts @@ -4,241 +4,261 @@ * This is an autogenerated file created by the Stencil compiler. * It contains typing information for all components that exist in this project. */ -import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; +import { HTMLStencilElement, JSXBase } from '@stencil/core/internal' export namespace Components { - interface SegmentContainer { - "backgroundColor": string; - "segTitle": string; - } - interface TcBulletpointList { - "backgroundColor": string; - "bulletpoints": "[]"; - "header": string; - } - interface TcCollapsible { - "backgroundColor": string; - "colTitle": string; - "description": string; - "tags": string; - } - interface TcGridContainer { - "backgroundColor": string; - "columns": 1 | 2 | 3 | 4 | 5 | 6; - "gap": "sm" | "md" | "lg" | "xl"; - "lgColumns": 1 | 2 | 3 | 4 | 5 | 6; - "mdColumns": 1 | 2 | 3 | 4 | 5 | 6; - } - interface TcGridItem { - "giTitle": string; - "imageSrc": string; - "link": string; - "width": string; - } - interface TcImgQuoteCard { - "altText": string; - "backgroundColor": string; - "borderColor": string; - "imageOnLeft": boolean; - "imageSrc": string; - "pro": string; - "quote": string; - "quotee": string; - } - interface TcImgTextCard { - "borderColor": string; - "detailedDescription": string; - "imageOnLeft": boolean; - "imageSrc": string; - "shortDescription": string; - "tcImgTextCardTitle": string; - } - interface TcJobListing { - "description": string; - "imageSrc": string; - "jobTitle": string; - "tags": string; - } - interface TcOpenPositions { - "level": string; - } - interface TcSvgIconCard { - "advantageTitle": string; - "backgroundColor": string; - "iconBackground": string; - "iconColor": string; - "iconSvgPath": string; - "iconSvgViewBox": string; - "iconSvgXmlns": string; - "text": string; - } + interface SegmentContainer { + backgroundColor: string + segTitle: string + } + interface TcBulletpointList { + backgroundColor: string + bulletpoints: '[]' + header: string + } + interface TcCollapsible { + backgroundColor: string + colTitle: string + description: string + tags: string + } + interface TcGridContainer { + backgroundColor: string + columns: 1 | 2 | 3 | 4 | 5 | 6 + gap: 'sm' | 'md' | 'lg' | 'xl' + lgColumns: 1 | 2 | 3 | 4 | 5 | 6 + mdColumns: 1 | 2 | 3 | 4 | 5 | 6 + } + interface TcGridItem { + giTitle: string + imageSrc: string + link: string + width: string + } + interface TcImgQuoteCard { + altText: string + backgroundColor: string + borderColor: string + imageOnLeft: boolean + imageSrc: string + pro: string + quote: string + quotee: string + } + interface TcImgTextCard { + borderColor: string + detailedDescription: string + imageOnLeft: boolean + imageSrc: string + shortDescription: string + tcImgTextCardTitle: string + } + interface TcJobListing { + description: string + imageSrc: string + jobTitle: string + tags: string + } + interface TcOpenPositions { + level: string + } + interface TcSvgIconCard { + advantageTitle: string + backgroundColor: string + iconBackground: string + iconColor: string + iconSvgPath: string + iconSvgViewBox: string + iconSvgXmlns: string + text: string + } } declare global { - interface HTMLSegmentContainerElement extends Components.SegmentContainer, HTMLStencilElement { - } - var HTMLSegmentContainerElement: { - prototype: HTMLSegmentContainerElement; - new (): HTMLSegmentContainerElement; - }; - interface HTMLTcBulletpointListElement extends Components.TcBulletpointList, HTMLStencilElement { - } - var HTMLTcBulletpointListElement: { - prototype: HTMLTcBulletpointListElement; - new (): HTMLTcBulletpointListElement; - }; - interface HTMLTcCollapsibleElement extends Components.TcCollapsible, HTMLStencilElement { - } - var HTMLTcCollapsibleElement: { - prototype: HTMLTcCollapsibleElement; - new (): HTMLTcCollapsibleElement; - }; - interface HTMLTcGridContainerElement extends Components.TcGridContainer, HTMLStencilElement { - } - var HTMLTcGridContainerElement: { - prototype: HTMLTcGridContainerElement; - new (): HTMLTcGridContainerElement; - }; - interface HTMLTcGridItemElement extends Components.TcGridItem, HTMLStencilElement { - } - var HTMLTcGridItemElement: { - prototype: HTMLTcGridItemElement; - new (): HTMLTcGridItemElement; - }; - interface HTMLTcImgQuoteCardElement extends Components.TcImgQuoteCard, HTMLStencilElement { - } - var HTMLTcImgQuoteCardElement: { - prototype: HTMLTcImgQuoteCardElement; - new (): HTMLTcImgQuoteCardElement; - }; - interface HTMLTcImgTextCardElement extends Components.TcImgTextCard, HTMLStencilElement { - } - var HTMLTcImgTextCardElement: { - prototype: HTMLTcImgTextCardElement; - new (): HTMLTcImgTextCardElement; - }; - interface HTMLTcJobListingElement extends Components.TcJobListing, HTMLStencilElement { - } - var HTMLTcJobListingElement: { - prototype: HTMLTcJobListingElement; - new (): HTMLTcJobListingElement; - }; - interface HTMLTcOpenPositionsElement extends Components.TcOpenPositions, HTMLStencilElement { - } - var HTMLTcOpenPositionsElement: { - prototype: HTMLTcOpenPositionsElement; - new (): HTMLTcOpenPositionsElement; - }; - interface HTMLTcSvgIconCardElement extends Components.TcSvgIconCard, HTMLStencilElement { - } - var HTMLTcSvgIconCardElement: { - prototype: HTMLTcSvgIconCardElement; - new (): HTMLTcSvgIconCardElement; - }; - interface HTMLElementTagNameMap { - "segment-container": HTMLSegmentContainerElement; - "tc-bulletpoint-list": HTMLTcBulletpointListElement; - "tc-collapsible": HTMLTcCollapsibleElement; - "tc-grid-container": HTMLTcGridContainerElement; - "tc-grid-item": HTMLTcGridItemElement; - "tc-img-quote-card": HTMLTcImgQuoteCardElement; - "tc-img-text-card": HTMLTcImgTextCardElement; - "tc-job-listing": HTMLTcJobListingElement; - "tc-open-positions": HTMLTcOpenPositionsElement; - "tc-svg-icon-card": HTMLTcSvgIconCardElement; - } + interface HTMLSegmentContainerElement + extends Components.SegmentContainer, + HTMLStencilElement {} + var HTMLSegmentContainerElement: { + prototype: HTMLSegmentContainerElement + new (): HTMLSegmentContainerElement + } + interface HTMLTcBulletpointListElement + extends Components.TcBulletpointList, + HTMLStencilElement {} + var HTMLTcBulletpointListElement: { + prototype: HTMLTcBulletpointListElement + new (): HTMLTcBulletpointListElement + } + interface HTMLTcCollapsibleElement + extends Components.TcCollapsible, + HTMLStencilElement {} + var HTMLTcCollapsibleElement: { + prototype: HTMLTcCollapsibleElement + new (): HTMLTcCollapsibleElement + } + interface HTMLTcGridContainerElement + extends Components.TcGridContainer, + HTMLStencilElement {} + var HTMLTcGridContainerElement: { + prototype: HTMLTcGridContainerElement + new (): HTMLTcGridContainerElement + } + interface HTMLTcGridItemElement + extends Components.TcGridItem, + HTMLStencilElement {} + var HTMLTcGridItemElement: { + prototype: HTMLTcGridItemElement + new (): HTMLTcGridItemElement + } + interface HTMLTcImgQuoteCardElement + extends Components.TcImgQuoteCard, + HTMLStencilElement {} + var HTMLTcImgQuoteCardElement: { + prototype: HTMLTcImgQuoteCardElement + new (): HTMLTcImgQuoteCardElement + } + interface HTMLTcImgTextCardElement + extends Components.TcImgTextCard, + HTMLStencilElement {} + var HTMLTcImgTextCardElement: { + prototype: HTMLTcImgTextCardElement + new (): HTMLTcImgTextCardElement + } + interface HTMLTcJobListingElement + extends Components.TcJobListing, + HTMLStencilElement {} + var HTMLTcJobListingElement: { + prototype: HTMLTcJobListingElement + new (): HTMLTcJobListingElement + } + interface HTMLTcOpenPositionsElement + extends Components.TcOpenPositions, + HTMLStencilElement {} + var HTMLTcOpenPositionsElement: { + prototype: HTMLTcOpenPositionsElement + new (): HTMLTcOpenPositionsElement + } + interface HTMLTcSvgIconCardElement + extends Components.TcSvgIconCard, + HTMLStencilElement {} + var HTMLTcSvgIconCardElement: { + prototype: HTMLTcSvgIconCardElement + new (): HTMLTcSvgIconCardElement + } + interface HTMLElementTagNameMap { + 'segment-container': HTMLSegmentContainerElement + 'tc-bulletpoint-list': HTMLTcBulletpointListElement + 'tc-collapsible': HTMLTcCollapsibleElement + 'tc-grid-container': HTMLTcGridContainerElement + 'tc-grid-item': HTMLTcGridItemElement + 'tc-img-quote-card': HTMLTcImgQuoteCardElement + 'tc-img-text-card': HTMLTcImgTextCardElement + 'tc-job-listing': HTMLTcJobListingElement + 'tc-open-positions': HTMLTcOpenPositionsElement + 'tc-svg-icon-card': HTMLTcSvgIconCardElement + } } declare namespace LocalJSX { - interface SegmentContainer { - "backgroundColor"?: string; - "segTitle"?: string; - } - interface TcBulletpointList { - "backgroundColor"?: string; - "bulletpoints"?: "[]"; - "header"?: string; - } - interface TcCollapsible { - "backgroundColor"?: string; - "colTitle"?: string; - "description"?: string; - "tags"?: string; - } - interface TcGridContainer { - "backgroundColor"?: string; - "columns"?: 1 | 2 | 3 | 4 | 5 | 6; - "gap"?: "sm" | "md" | "lg" | "xl"; - "lgColumns"?: 1 | 2 | 3 | 4 | 5 | 6; - "mdColumns"?: 1 | 2 | 3 | 4 | 5 | 6; - } - interface TcGridItem { - "giTitle"?: string; - "imageSrc"?: string; - "link"?: string; - "width"?: string; - } - interface TcImgQuoteCard { - "altText"?: string; - "backgroundColor"?: string; - "borderColor"?: string; - "imageOnLeft"?: boolean; - "imageSrc"?: string; - "pro"?: string; - "quote"?: string; - "quotee"?: string; - } - interface TcImgTextCard { - "borderColor"?: string; - "detailedDescription"?: string; - "imageOnLeft"?: boolean; - "imageSrc"?: string; - "shortDescription"?: string; - "tcImgTextCardTitle"?: string; - } - interface TcJobListing { - "description"?: string; - "imageSrc"?: string; - "jobTitle"?: string; - "tags"?: string; - } - interface TcOpenPositions { - "level"?: string; - } - interface TcSvgIconCard { - "advantageTitle"?: string; - "backgroundColor"?: string; - "iconBackground"?: string; - "iconColor"?: string; - "iconSvgPath"?: string; - "iconSvgViewBox"?: string; - "iconSvgXmlns"?: string; - "text"?: string; - } - interface IntrinsicElements { - "segment-container": SegmentContainer; - "tc-bulletpoint-list": TcBulletpointList; - "tc-collapsible": TcCollapsible; - "tc-grid-container": TcGridContainer; - "tc-grid-item": TcGridItem; - "tc-img-quote-card": TcImgQuoteCard; - "tc-img-text-card": TcImgTextCard; - "tc-job-listing": TcJobListing; - "tc-open-positions": TcOpenPositions; - "tc-svg-icon-card": TcSvgIconCard; - } + interface SegmentContainer { + backgroundColor?: string + segTitle?: string + } + interface TcBulletpointList { + backgroundColor?: string + bulletpoints?: '[]' + header?: string + } + interface TcCollapsible { + backgroundColor?: string + colTitle?: string + description?: string + tags?: string + } + interface TcGridContainer { + backgroundColor?: string + columns?: 1 | 2 | 3 | 4 | 5 | 6 + gap?: 'sm' | 'md' | 'lg' | 'xl' + lgColumns?: 1 | 2 | 3 | 4 | 5 | 6 + mdColumns?: 1 | 2 | 3 | 4 | 5 | 6 + } + interface TcGridItem { + giTitle?: string + imageSrc?: string + link?: string + width?: string + } + interface TcImgQuoteCard { + altText?: string + backgroundColor?: string + borderColor?: string + imageOnLeft?: boolean + imageSrc?: string + pro?: string + quote?: string + quotee?: string + } + interface TcImgTextCard { + borderColor?: string + detailedDescription?: string + imageOnLeft?: boolean + imageSrc?: string + shortDescription?: string + tcImgTextCardTitle?: string + } + interface TcJobListing { + description?: string + imageSrc?: string + jobTitle?: string + tags?: string + } + interface TcOpenPositions { + level?: string + } + interface TcSvgIconCard { + advantageTitle?: string + backgroundColor?: string + iconBackground?: string + iconColor?: string + iconSvgPath?: string + iconSvgViewBox?: string + iconSvgXmlns?: string + text?: string + } + interface IntrinsicElements { + 'segment-container': SegmentContainer + 'tc-bulletpoint-list': TcBulletpointList + 'tc-collapsible': TcCollapsible + 'tc-grid-container': TcGridContainer + 'tc-grid-item': TcGridItem + 'tc-img-quote-card': TcImgQuoteCard + 'tc-img-text-card': TcImgTextCard + 'tc-job-listing': TcJobListing + 'tc-open-positions': TcOpenPositions + 'tc-svg-icon-card': TcSvgIconCard + } } -export { LocalJSX as JSX }; -declare module "@stencil/core" { - export namespace JSX { - interface IntrinsicElements { - "segment-container": LocalJSX.SegmentContainer & JSXBase.HTMLAttributes; - "tc-bulletpoint-list": LocalJSX.TcBulletpointList & JSXBase.HTMLAttributes; - "tc-collapsible": LocalJSX.TcCollapsible & JSXBase.HTMLAttributes; - "tc-grid-container": LocalJSX.TcGridContainer & JSXBase.HTMLAttributes; - "tc-grid-item": LocalJSX.TcGridItem & JSXBase.HTMLAttributes; - "tc-img-quote-card": LocalJSX.TcImgQuoteCard & JSXBase.HTMLAttributes; - "tc-img-text-card": LocalJSX.TcImgTextCard & JSXBase.HTMLAttributes; - "tc-job-listing": LocalJSX.TcJobListing & JSXBase.HTMLAttributes; - "tc-open-positions": LocalJSX.TcOpenPositions & JSXBase.HTMLAttributes; - "tc-svg-icon-card": LocalJSX.TcSvgIconCard & JSXBase.HTMLAttributes; - } - } +export { LocalJSX as JSX } +declare module '@stencil/core' { + export namespace JSX { + interface IntrinsicElements { + 'segment-container': LocalJSX.SegmentContainer & + JSXBase.HTMLAttributes + 'tc-bulletpoint-list': LocalJSX.TcBulletpointList & + JSXBase.HTMLAttributes + 'tc-collapsible': LocalJSX.TcCollapsible & + JSXBase.HTMLAttributes + 'tc-grid-container': LocalJSX.TcGridContainer & + JSXBase.HTMLAttributes + 'tc-grid-item': LocalJSX.TcGridItem & + JSXBase.HTMLAttributes + 'tc-img-quote-card': LocalJSX.TcImgQuoteCard & + JSXBase.HTMLAttributes + 'tc-img-text-card': LocalJSX.TcImgTextCard & + JSXBase.HTMLAttributes + 'tc-job-listing': LocalJSX.TcJobListing & + JSXBase.HTMLAttributes + 'tc-open-positions': LocalJSX.TcOpenPositions & + JSXBase.HTMLAttributes + 'tc-svg-icon-card': LocalJSX.TcSvgIconCard & + JSXBase.HTMLAttributes + } + } } diff --git a/packages/tc-web/src/components/tc-bulletpoint-list/readme.md b/packages/tc-web/src/components/tc-bulletpoint-list/readme.md index 77ec3f8..6fbf837 100644 --- a/packages/tc-web/src/components/tc-bulletpoint-list/readme.md +++ b/packages/tc-web/src/components/tc-bulletpoint-list/readme.md @@ -2,7 +2,6 @@ - ## Properties | Property | Attribute | Description | Type | Default | @@ -11,7 +10,6 @@ | `bulletpoints` | `bulletpoints` | | `"[]"` | `undefined` | | `header` | `title` | | `string` | `undefined` | +--- ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* +_Built with [StencilJS](https://stenciljs.com/)_ 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 index af1b107..97f7a3b 100644 --- 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 @@ -1,31 +1,31 @@ -import { Component, Prop, h } from "@stencil/core"; +import { Component, Prop, h } from '@stencil/core' @Component({ - tag: "tc-bulletpoint-list", + tag: 'tc-bulletpoint-list', shadow: true, - styleUrl: "../../util/base.css", + styleUrl: '../../util/base.css', }) export class BulletpointList { - @Prop({ attribute: "title" }) header: string; - @Prop() bulletpoints: "[]"; - @Prop() backgroundColor: string = "rgb(255, 255, 255)"; + @Prop({ attribute: 'title' }) header: string + @Prop() bulletpoints: '[]' + @Prop() backgroundColor: string = 'rgb(255, 255, 255)' get bulletpointArray() { try { - return JSON.parse(this.bulletpoints); + return JSON.parse(this.bulletpoints) } catch (e) { - console.error("Error parsing tags:", e); - return []; + console.error('Error parsing tags:', e) + return [] } } render() { return (
-

+

{this.header}

@@ -37,6 +37,6 @@ export class BulletpointList { ))}
- ); + ) } } diff --git a/packages/tc-web/src/components/tc-collapsible/readme.md b/packages/tc-web/src/components/tc-collapsible/readme.md index b8f2780..90d9f73 100644 --- a/packages/tc-web/src/components/tc-collapsible/readme.md +++ b/packages/tc-web/src/components/tc-collapsible/readme.md @@ -2,7 +2,6 @@ - ## Properties | Property | Attribute | Description | Type | Default | @@ -12,7 +11,6 @@ | `description` | `description` | | `string` | `""` | | `tags` | `tags` | | `string` | `"[]"` | +--- ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* +_Built with [StencilJS](https://stenciljs.com/)_ diff --git a/packages/tc-web/src/components/tc-collapsible/tc-collapsible.tsx b/packages/tc-web/src/components/tc-collapsible/tc-collapsible.tsx index 5108d08..f78fe2b 100644 --- a/packages/tc-web/src/components/tc-collapsible/tc-collapsible.tsx +++ b/packages/tc-web/src/components/tc-collapsible/tc-collapsible.tsx @@ -1,58 +1,58 @@ -import { Component, h, Prop, State } from "@stencil/core"; -import { parseTags } from "../../util/util"; +import { Component, h, Prop, State } from '@stencil/core' +import { parseTags } from '../../util/util' @Component({ - tag: "tc-collapsible", + tag: 'tc-collapsible', shadow: true, - styleUrl: "../../util/base.css", + styleUrl: '../../util/base.css', }) export class TcCollapsible { - @Prop() colTitle: string; - @Prop() description: string = ""; - @Prop() tags: string = "[]"; - @Prop() backgroundColor: string = "rgb(255, 255, 255)"; + @Prop() colTitle: string + @Prop() description: string = '' + @Prop() tags: string = '[]' + @Prop() backgroundColor: string = 'rgb(255, 255, 255)' - @State() showDetails: boolean = false; + @State() showDetails: boolean = false toggleDetails = () => { - this.showDetails = !this.showDetails; - }; + this.showDetails = !this.showDetails + } render() { return (
-

+

{this.colTitle}

{this.description}
-
+
-
+
{parseTags(this.tags).map((tag) => ( -
+
{tag}
))} @@ -60,6 +60,6 @@ export class TcCollapsible {
{this.showDetails && }
- ); + ) } } diff --git a/packages/tc-web/src/components/tc-grid-container/readme.md b/packages/tc-web/src/components/tc-grid-container/readme.md index dd62173..d4de2f6 100644 --- a/packages/tc-web/src/components/tc-grid-container/readme.md +++ b/packages/tc-web/src/components/tc-grid-container/readme.md @@ -2,7 +2,6 @@ - ## Properties | Property | Attribute | Description | Type | Default | @@ -13,7 +12,6 @@ | `lgColumns` | `lg-columns` | | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `4` | | `mdColumns` | `md-columns` | | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `2` | +--- ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* +_Built with [StencilJS](https://stenciljs.com/)_ 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 index ef1a81c..0258b38 100644 --- 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 @@ -1,21 +1,21 @@ -import { Component, Prop, h } from "@stencil/core"; +import { Component, Prop, h } from '@stencil/core' @Component({ - tag: "tc-grid-container", + tag: 'tc-grid-container', shadow: true, - styleUrl: "../../util/base.css", + styleUrl: '../../util/base.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)"; + @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()}`; + const gridClasses = `grid ${this.getMdColumns()} ${this.getColumns()} ${this.getGap()} ${this.getLgColumns()}` return (
- ); + ) } private getMdColumns(): string { switch (this.mdColumns) { case 1: - return "md:grid-cols-1"; + return 'md:grid-cols-1' case 2: - return "md:grid-cols-2"; + return 'md:grid-cols-2' case 3: - return "md:grid-cols-3 "; + return 'md:grid-cols-3 ' case 4: - return "md:grid-cols-4 "; + return 'md:grid-cols-4 ' case 5: - return "md:grid-cols-5 "; + return 'md:grid-cols-5 ' case 6: - return "md:grid-cols-6"; + return 'md:grid-cols-6' } } private getLgColumns(): string { switch (this.lgColumns) { case 1: - return "lg:grid-cols-1"; + return 'lg:grid-cols-1' case 2: - return "lg:grid-cols-2"; + return 'lg:grid-cols-2' case 3: - return "lg:grid-cols-3"; + return 'lg:grid-cols-3' case 4: - return "lg:grid-cols-4"; + return 'lg:grid-cols-4' case 5: - return "lg:grid-cols-5"; + return 'lg:grid-cols-5' case 6: - return "lg:grid-cols-6"; + return 'lg:grid-cols-6' } } private getColumns(): string { switch (this.columns) { case 1: - return "grid-cols-1"; + return 'grid-cols-1' case 2: - return "grid-cols-2 "; + return 'grid-cols-2 ' case 3: - return "grid-cols-3"; + return 'grid-cols-3' case 4: - return "grid-cols-4"; + return 'grid-cols-4' case 5: - return "grid-cols-5"; + return 'grid-cols-5' case 6: - return "grid-cols-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"; + 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`; + 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 index bcccdd3..23b0776 100644 --- a/packages/tc-web/src/components/tc-grid-item/readme.md +++ b/packages/tc-web/src/components/tc-grid-item/readme.md @@ -2,7 +2,6 @@ - ## Properties | Property | Attribute | Description | Type | Default | @@ -12,7 +11,6 @@ | `link` | `link` | | `string` | `undefined` | | `width` | `width` | | `string` | `"lg"` | +--- ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* +_Built with [StencilJS](https://stenciljs.com/)_ 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 index 047d3fc..d85c332 100644 --- 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 @@ -1,27 +1,27 @@ -import { Component, Prop, h } from "@stencil/core"; +import { Component, Prop, h } from '@stencil/core' @Component({ - tag: "tc-grid-item", + tag: 'tc-grid-item', shadow: true, - styleUrl: "../../util/base.css", + styleUrl: '../../util/base.css', }) export class GridItem { - @Prop() imageSrc: string; - @Prop({ attribute: "title" }) giTitle: string; - @Prop() link: string; - @Prop() width: string = "lg"; + @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()}`; + const gridItemStyle = `flex flex-col items-center font-normal shadow-md font-sans m-2 ${this.getWidth()}` return (
-
-
+
+
{this.giTitle}
@@ -30,32 +30,32 @@ export class GridItem { href={this.link} target="_blank" rel="noopener noreferrer" - class="no-underline text-inherit" + class="text-inherit no-underline" > -

+

{this.giTitle}

- ); + ) } 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"; + 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"; + 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 index f160592..606c775 100644 --- a/packages/tc-web/src/components/tc-img-quote-card/readme.md +++ b/packages/tc-web/src/components/tc-img-quote-card/readme.md @@ -2,7 +2,6 @@ - ## Properties | Property | Attribute | Description | Type | Default | @@ -16,7 +15,6 @@ | `quote` | `quote` | | `string` | `undefined` | | `quotee` | `quotee` | | `string` | `undefined` | +--- ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* +_Built with [StencilJS](https://stenciljs.com/)_ 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 index 1c1669d..68d14d9 100644 --- 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 @@ -1,91 +1,91 @@ -import { Component, Prop, h } from "@stencil/core"; +import { Component, Prop, h } from '@stencil/core' @Component({ - tag: "tc-img-quote-card", + tag: 'tc-img-quote-card', shadow: true, - styleUrl: "../../util/base.css", + styleUrl: '../../util/base.css', }) 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 = ""; + @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.altText}
- ); + ) const textSection = (

{this.pro}

“

{this.quote}

- ” + ”

{this.quotee}

- ); + ) return (
{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 index 31cf037..a7696f6 100644 --- a/packages/tc-web/src/components/tc-img-text-card/readme.md +++ b/packages/tc-web/src/components/tc-img-text-card/readme.md @@ -2,7 +2,6 @@ - ## Properties | Property | Attribute | Description | Type | Default | @@ -14,7 +13,6 @@ | `shortDescription` | `short-description` | | `string` | `undefined` | | `tcImgTextCardTitle` | `title` | | `string` | `undefined` | +--- ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* +_Built with [StencilJS](https://stenciljs.com/)_ 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 index 4f963ed..fadb7cf 100644 --- 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 @@ -1,49 +1,49 @@ -import { Component, Prop, h } from "@stencil/core"; +import { Component, Prop, h } from '@stencil/core' @Component({ - tag: "tc-img-text-card", + tag: 'tc-img-text-card', shadow: true, - styleUrl: "../../util/base.css", + styleUrl: '../../util/base.css', }) export class TcImgTextCard { - @Prop() imageSrc: string; - @Prop({ attribute: "title" }) tcImgTextCardTitle: string; - @Prop() shortDescription: string; - @Prop() detailedDescription: string; - @Prop() imageOnLeft: boolean = false; - @Prop() borderColor: string = ""; + @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 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 (
-
-
+
+
{this.tcImgTextCardTitle}
-
-

+
+

{this.tcImgTextCardTitle}

-

{this.shortDescription}

+

{this.shortDescription}

{this.detailedDescription}

-
+

- ); + ) } } diff --git a/packages/tc-web/src/components/tc-job-listing/readme.md b/packages/tc-web/src/components/tc-job-listing/readme.md index 2b20ec9..14d422c 100644 --- a/packages/tc-web/src/components/tc-job-listing/readme.md +++ b/packages/tc-web/src/components/tc-job-listing/readme.md @@ -2,7 +2,6 @@ - ## Properties | Property | Attribute | Description | Type | Default | @@ -12,7 +11,6 @@ | `jobTitle` | `job-title` | | `string` | `undefined` | | `tags` | `tags` | | `string` | `undefined` | +--- ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* +_Built with [StencilJS](https://stenciljs.com/)_ diff --git a/packages/tc-web/src/components/tc-job-listing/tc-job-listing.tsx b/packages/tc-web/src/components/tc-job-listing/tc-job-listing.tsx index 88655ed..0366afb 100644 --- a/packages/tc-web/src/components/tc-job-listing/tc-job-listing.tsx +++ b/packages/tc-web/src/components/tc-job-listing/tc-job-listing.tsx @@ -1,26 +1,26 @@ -import { Component, Prop, h } from "@stencil/core"; -import { parseTags } from "../../util/util"; +import { Component, Prop, h } from '@stencil/core' +import { parseTags } from '../../util/util' @Component({ - tag: "tc-job-listing", + tag: 'tc-job-listing', shadow: true, - styleUrl: "../../util/base.css", + styleUrl: '../../util/base.css', }) export class JobListing { - @Prop() jobTitle: string; - @Prop() description: string; - @Prop() tags: string; - @Prop() imageSrc: string; + @Prop() jobTitle: string + @Prop() description: string + @Prop() tags: string + @Prop() imageSrc: string render() { return ( -
+
-
{this.jobTitle}
+
{this.jobTitle}

{this.description}

-
    +
      {parseTags(this.tags).map((tag) => ( -
      +
      {tag}
      ))} @@ -34,6 +34,6 @@ export class JobListing { />
- ); + ) } } diff --git a/packages/tc-web/src/components/tc-segment-container/readme.md b/packages/tc-web/src/components/tc-segment-container/readme.md index 6390ac5..b50d18d 100644 --- a/packages/tc-web/src/components/tc-segment-container/readme.md +++ b/packages/tc-web/src/components/tc-segment-container/readme.md @@ -2,7 +2,6 @@ - ## Properties | Property | Attribute | Description | Type | Default | @@ -10,7 +9,6 @@ | `backgroundColor` | `background-color` | | `string` | `undefined` | | `segTitle` | `title` | | `string` | `undefined` | +--- ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* +_Built with [StencilJS](https://stenciljs.com/)_ 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 index ceb59e0..f697b75 100644 --- 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 @@ -1,26 +1,26 @@ // segment-container.tsx -import { Component, Prop, h, Host } from "@stencil/core"; +import { Component, h, Host, Prop } from '@stencil/core' @Component({ - tag: "segment-container", + tag: 'segment-container', shadow: true, - styleUrl: "../../util/base.css", + styleUrl: '../../util/base.css', }) export class SegmentContainer { - @Prop({ attribute: "title" }) segTitle: string; - @Prop() backgroundColor: string; + @Prop({ attribute: 'title' }) segTitle: string + @Prop() backgroundColor: string render() { const style = this.backgroundColor - ? { "background-color": this.backgroundColor } - : {}; + ? { 'background-color': this.backgroundColor } + : {} return ( -
+
{this.segTitle && ( -

+

{this.segTitle}

)} @@ -28,6 +28,6 @@ export class SegmentContainer {
- ); + ) } } diff --git a/packages/tc-web/src/components/tc-subtitle/readme.md b/packages/tc-web/src/components/tc-subtitle/readme.md index 785399d..5bacf62 100644 --- a/packages/tc-web/src/components/tc-subtitle/readme.md +++ b/packages/tc-web/src/components/tc-subtitle/readme.md @@ -2,14 +2,12 @@ - ## Properties | Property | Attribute | Description | Type | Default | | -------- | --------- | ----------- | -------- | ----------- | | `level` | `level` | | `string` | `undefined` | +--- ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* +_Built with [StencilJS](https://stenciljs.com/)_ diff --git a/packages/tc-web/src/components/tc-subtitle/tc-open-positions.tsx b/packages/tc-web/src/components/tc-subtitle/tc-open-positions.tsx index 2600063..c524df2 100644 --- a/packages/tc-web/src/components/tc-subtitle/tc-open-positions.tsx +++ b/packages/tc-web/src/components/tc-subtitle/tc-open-positions.tsx @@ -1,40 +1,40 @@ -import { Component, Prop, h } from "@stencil/core"; +import { Component, Prop, h } from '@stencil/core' @Component({ - tag: "tc-open-positions", + tag: 'tc-open-positions', shadow: true, - styleUrl: "../../util/base.css", + styleUrl: '../../util/base.css', }) export class OpenPositions { - @Prop() level: string; // Corrected the property name spelling. + @Prop() level: string // Corrected the property name spelling. render() { return ( -
-

{this.level}

+
+

{this.level}

- ); + ) } private handleSlotChange(e: Event) { - const slot = e.target as HTMLSlotElement; - const nodes = slot.assignedNodes({ flatten: true }); + const slot = e.target as HTMLSlotElement + const nodes = slot.assignedNodes({ flatten: true }) if (nodes.length === 0) { - this.renderFallbackMessage(); + this.renderFallbackMessage() } } private renderFallbackMessage() { - const container = document.querySelector(".slot-container"); + const container = document.querySelector('.slot-container') container.innerHTML = `
Currently no positions advertised
- `; + ` } } 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 index 62799b2..2538134 100644 --- a/packages/tc-web/src/components/tc-svg-icon-card/readme.md +++ b/packages/tc-web/src/components/tc-svg-icon-card/readme.md @@ -2,7 +2,6 @@ - ## Properties | Property | Attribute | Description | Type | Default | @@ -16,7 +15,6 @@ | `iconSvgXmlns` | `icon-svg-xmlns` | | `string` | `"http://www.w3.org/2000/svg"` | | `text` | `text` | | `string` | `undefined` | +--- ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* +_Built with [StencilJS](https://stenciljs.com/)_ 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 index b3ed49e..9e864ee 100644 --- 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 @@ -1,45 +1,45 @@ -import { Component, Prop, h } from "@stencil/core"; +import { Component, Prop, h } from '@stencil/core' @Component({ - tag: "tc-svg-icon-card", + tag: 'tc-svg-icon-card', shadow: true, - styleUrl: "../../util/base.css", + styleUrl: '../../util/base.css', }) 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)"; + @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 (
-

+

{this.advantageTitle}

-

+

{this.text}

- ); + ) } } diff --git a/packages/tc-web/src/index.html b/packages/tc-web/src/index.html index 4fb11fd..98abecb 100644 --- a/packages/tc-web/src/index.html +++ b/packages/tc-web/src/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/tc-web/src/index.ts b/packages/tc-web/src/index.ts index 803cc7d..f50a96c 100644 --- a/packages/tc-web/src/index.ts +++ b/packages/tc-web/src/index.ts @@ -1 +1 @@ -export { Components, JSX } from "./components"; +export { Components, JSX } from './components' diff --git a/packages/tc-web/src/util/util.tsx b/packages/tc-web/src/util/util.tsx index 70dd37b..7a512fd 100644 --- a/packages/tc-web/src/util/util.tsx +++ b/packages/tc-web/src/util/util.tsx @@ -1,15 +1,15 @@ -import { clsx, type ClassValue } from "clsx"; -import { twMerge } from "tailwind-merge"; +import { clsx, type ClassValue } from 'clsx' +import { twMerge } from 'tailwind-merge' export function parseTags(tagsJson: string): string[] { try { - return JSON.parse(tagsJson); + return JSON.parse(tagsJson) } catch (e) { - console.error("Error parsing tags:", e); - return []; // Return empty array in case of error + console.error('Error parsing tags:', e) + return [] // Return empty array in case of error } } export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)); + return twMerge(clsx(inputs)) } diff --git a/packages/tc-web/stencil.config.ts b/packages/tc-web/stencil.config.ts index 31b14df..6794293 100644 --- a/packages/tc-web/stencil.config.ts +++ b/packages/tc-web/stencil.config.ts @@ -1,36 +1,36 @@ -import { Config } from "@stencil/core"; -import { sass } from "@stencil/sass"; +import { Config } from '@stencil/core' +import { sass } from '@stencil/sass' +import autoprefixer from 'autoprefixer' import tailwind, { - tailwindHMR, setPluginConfigurationDefaults, -} from "stencil-tailwind-plugin"; -import tailwindcss from "tailwindcss"; -import tailwindConf from "./tailwind.config"; -import autoprefixer from "autoprefixer"; + tailwindHMR, +} from 'stencil-tailwind-plugin' +import tailwindcss from 'tailwindcss' +import tailwindConf from './tailwind.config.cjs' setPluginConfigurationDefaults({ tailwindConf, postcss: { plugins: [tailwindcss(), autoprefixer()], }, -}); +}) export const config: Config = { - namespace: "stencil-component-example", + namespace: 'stencil-component-example', outputTargets: [ { - type: "dist", - esmLoaderPath: "../loader", + type: 'dist', + esmLoaderPath: '../loader', }, { - type: "docs-readme", + type: 'docs-readme', }, { - type: "www", + type: 'www', serviceWorker: null, // disable service workers - baseUrl: "https://poimen.github.io/", - dir: "docs", + baseUrl: 'https://poimen.github.io/', + dir: 'docs', }, ], plugins: [sass(), tailwind(), tailwindHMR()], -}; +} diff --git a/packages/tc-web/tailwind.config.cjs b/packages/tc-web/tailwind.config.cjs new file mode 100644 index 0000000..d650886 --- /dev/null +++ b/packages/tc-web/tailwind.config.cjs @@ -0,0 +1,42 @@ +const defaultTheme = require('tailwindcss/defaultTheme') +module.exports = { + content: ['./src/**/*.{html,js,tsx}'], + theme: { + extend: { + colors: { + uzhblue: '#0028A5', + uzhcyan: '#4AC9E3', + uzhapple: '#A4D233', + uzhgold: '#FFC845', + uzhorange: 'FC4C02', + uzhberry: '#BF0D3E', + uzhlgrey2: '#EFEFEF', + uzhlgrey3: '#E7E7E7', + }, + boxShadow: { + uzh: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', + }, + + fontFamily: { + sans: [ + '"Source Sans 3"', + '"Source Sans Pro"', + ...defaultTheme.fontFamily.sans, + ], + title: [ + '"Source Sans 3"', + '"Source Sans Pro"', + ...defaultTheme.fontFamily.sans, + ], + }, + }, + }, + plugins: [ + require('@tailwindcss/typography'), + require('@tailwindcss/forms'), + require('@tailwindcss/aspect-ratio'), + ], + corePlugins: { + preflight: false, + }, +} diff --git a/packages/tc-web/tailwind.config.js b/packages/tc-web/tailwind.config.js deleted file mode 100644 index 85eaa6a..0000000 --- a/packages/tc-web/tailwind.config.js +++ /dev/null @@ -1,42 +0,0 @@ -const defaultTheme = require("tailwindcss/defaultTheme"); -module.exports = { - content: ["./src/**/*.{html,js,tsx}"], - theme: { - extend: { - colors: { - uzhblue: "#0028A5", - uzhcyan: "#4AC9E3", - uzhapple: "#A4D233", - uzhgold: "#FFC845", - uzhorange: "FC4C02", - uzhberry: "#BF0D3E", - uzhlgrey2: "#EFEFEF", - uzhlgrey3: "#E7E7E7", - }, - boxShadow: { - uzh: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", - }, - - fontFamily: { - sans: [ - '"Source Sans 3"', - '"Source Sans Pro"', - ...defaultTheme.fontFamily.sans, - ], - title: [ - '"Source Sans 3"', - '"Source Sans Pro"', - ...defaultTheme.fontFamily.sans, - ], - }, - }, - }, - plugins: [ - require("@tailwindcss/typography"), - require("@tailwindcss/forms"), - require("@tailwindcss/aspect-ratio"), - ], - corePlugins: { - preflight: false, - }, -};