From bb94d8844617e1ccfe302f4a136379c895719982 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Roland=20Schl=C3=A4fli?= Date: Tue, 26 Nov 2024 09:30:18 +0100 Subject: [PATCH] add df-container as example --- packages/tc-web/src/components.d.ts | 495 +++++++++--------- .../components/df-container/df-container.tsx | 63 +++ .../src/components/df-container/readme.md | 15 + packages/tc-web/src/index.html | 1 + 4 files changed, 323 insertions(+), 251 deletions(-) create mode 100644 packages/tc-web/src/components/df-container/df-container.tsx create mode 100644 packages/tc-web/src/components/df-container/readme.md diff --git a/packages/tc-web/src/components.d.ts b/packages/tc-web/src/components.d.ts index dd8cbbb..1a3eb5c 100644 --- a/packages/tc-web/src/components.d.ts +++ b/packages/tc-web/src/components.d.ts @@ -4,261 +4,254 @@ * 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 DfContainer { + } + 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 HTMLDfContainerElement extends Components.DfContainer, HTMLStencilElement { + } + var HTMLDfContainerElement: { + prototype: HTMLDfContainerElement; + new (): HTMLDfContainerElement; + }; + 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 { + "df-container": HTMLDfContainerElement; + "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 - } -} -export { LocalJSX as JSX } -declare module '@stencil/core' { - export namespace JSX { + interface DfContainer { + } + 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': 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 - } - } + "df-container": DfContainer; + "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 { + "df-container": LocalJSX.DfContainer & JSXBase.HTMLAttributes; + "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/df-container/df-container.tsx b/packages/tc-web/src/components/df-container/df-container.tsx new file mode 100644 index 0000000..1c07b30 --- /dev/null +++ b/packages/tc-web/src/components/df-container/df-container.tsx @@ -0,0 +1,63 @@ +import { Component, h } from '@stencil/core' + +@Component({ + tag: 'df-container', + shadow: true, + styleUrl: '../../util/base.css', +}) +export class Container { + render() { + return ( +
  • + +
    • + ) + } +} diff --git a/packages/tc-web/src/components/df-container/readme.md b/packages/tc-web/src/components/df-container/readme.md new file mode 100644 index 0000000..6fbf837 --- /dev/null +++ b/packages/tc-web/src/components/df-container/readme.md @@ -0,0 +1,15 @@ +# 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/index.html b/packages/tc-web/src/index.html index 98abecb..348680a 100644 --- a/packages/tc-web/src/index.html +++ b/packages/tc-web/src/index.html @@ -21,6 +21,7 @@ +