diff --git a/src/components.d.ts b/src/components.d.ts new file mode 100644 index 0000000..9b5e7b5 --- /dev/null +++ b/src/components.d.ts @@ -0,0 +1,203 @@ +/* eslint-disable */ +/* tslint:disable */ +/** + * 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 { Color, Shape, Size } from "./components/types"; +export { Color, Shape, Size } from "./components/types"; +export namespace Components { + interface DAvatar { + "name"?: string; + "shape"?: Shape; + "size"?: Size; + "src"?: string; + } + interface DButton { + "color"?: Color; + "disabled"?: boolean; + "href"?: string; + } + interface DCredentialCard { + "description"?: string; + "expirationDate"?: string; + "issuer": string; + "logoSrc"?: string; + "name": string; + "verified"?: boolean; + } + interface DCredentialDetail { + "description": string; + "issuer": string; + "logoSrc"?: string; + "longDescription"?: string; + "name": string; + } + interface DCredentialService { + "description"?: string; + "href"?: string; + "issuer": string; + "logoSrc"?: string; + "name": string; + } + interface DDefinition { + "definition": string; + "hidable": boolean; + "title": string; + } + interface DHeading { + "color": Color; + "size": Size; + } + interface DLogo { + } + interface DText { + "color": Color; + "size": Size; + } +} +declare global { + interface HTMLDAvatarElement extends Components.DAvatar, HTMLStencilElement { + } + var HTMLDAvatarElement: { + prototype: HTMLDAvatarElement; + new (): HTMLDAvatarElement; + }; + interface HTMLDButtonElement extends Components.DButton, HTMLStencilElement { + } + var HTMLDButtonElement: { + prototype: HTMLDButtonElement; + new (): HTMLDButtonElement; + }; + interface HTMLDCredentialCardElement extends Components.DCredentialCard, HTMLStencilElement { + } + var HTMLDCredentialCardElement: { + prototype: HTMLDCredentialCardElement; + new (): HTMLDCredentialCardElement; + }; + interface HTMLDCredentialDetailElement extends Components.DCredentialDetail, HTMLStencilElement { + } + var HTMLDCredentialDetailElement: { + prototype: HTMLDCredentialDetailElement; + new (): HTMLDCredentialDetailElement; + }; + interface HTMLDCredentialServiceElement extends Components.DCredentialService, HTMLStencilElement { + } + var HTMLDCredentialServiceElement: { + prototype: HTMLDCredentialServiceElement; + new (): HTMLDCredentialServiceElement; + }; + interface HTMLDDefinitionElement extends Components.DDefinition, HTMLStencilElement { + } + var HTMLDDefinitionElement: { + prototype: HTMLDDefinitionElement; + new (): HTMLDDefinitionElement; + }; + interface HTMLDHeadingElement extends Components.DHeading, HTMLStencilElement { + } + var HTMLDHeadingElement: { + prototype: HTMLDHeadingElement; + new (): HTMLDHeadingElement; + }; + interface HTMLDLogoElement extends Components.DLogo, HTMLStencilElement { + } + var HTMLDLogoElement: { + prototype: HTMLDLogoElement; + new (): HTMLDLogoElement; + }; + interface HTMLDTextElement extends Components.DText, HTMLStencilElement { + } + var HTMLDTextElement: { + prototype: HTMLDTextElement; + new (): HTMLDTextElement; + }; + interface HTMLElementTagNameMap { + "d-avatar": HTMLDAvatarElement; + "d-button": HTMLDButtonElement; + "d-credential-card": HTMLDCredentialCardElement; + "d-credential-detail": HTMLDCredentialDetailElement; + "d-credential-service": HTMLDCredentialServiceElement; + "d-definition": HTMLDDefinitionElement; + "d-heading": HTMLDHeadingElement; + "d-logo": HTMLDLogoElement; + "d-text": HTMLDTextElement; + } +} +declare namespace LocalJSX { + interface DAvatar { + "name"?: string; + "shape"?: Shape; + "size"?: Size; + "src"?: string; + } + interface DButton { + "color"?: Color; + "disabled"?: boolean; + "href"?: string; + } + interface DCredentialCard { + "description"?: string; + "expirationDate"?: string; + "issuer"?: string; + "logoSrc"?: string; + "name"?: string; + "verified"?: boolean; + } + interface DCredentialDetail { + "description"?: string; + "issuer"?: string; + "logoSrc"?: string; + "longDescription"?: string; + "name"?: string; + } + interface DCredentialService { + "description"?: string; + "href"?: string; + "issuer"?: string; + "logoSrc"?: string; + "name"?: string; + } + interface DDefinition { + "definition"?: string; + "hidable"?: boolean; + "title"?: string; + } + interface DHeading { + "color"?: Color; + "size"?: Size; + } + interface DLogo { + } + interface DText { + "color"?: Color; + "size"?: Size; + } + interface IntrinsicElements { + "d-avatar": DAvatar; + "d-button": DButton; + "d-credential-card": DCredentialCard; + "d-credential-detail": DCredentialDetail; + "d-credential-service": DCredentialService; + "d-definition": DDefinition; + "d-heading": DHeading; + "d-logo": DLogo; + "d-text": DText; + } +} +export { LocalJSX as JSX }; +declare module "@stencil/core" { + export namespace JSX { + interface IntrinsicElements { + "d-avatar": LocalJSX.DAvatar & JSXBase.HTMLAttributes; + "d-button": LocalJSX.DButton & JSXBase.HTMLAttributes; + "d-credential-card": LocalJSX.DCredentialCard & JSXBase.HTMLAttributes; + "d-credential-detail": LocalJSX.DCredentialDetail & JSXBase.HTMLAttributes; + "d-credential-service": LocalJSX.DCredentialService & JSXBase.HTMLAttributes; + "d-definition": LocalJSX.DDefinition & JSXBase.HTMLAttributes; + "d-heading": LocalJSX.DHeading & JSXBase.HTMLAttributes; + "d-logo": LocalJSX.DLogo & JSXBase.HTMLAttributes; + "d-text": LocalJSX.DText & JSXBase.HTMLAttributes; + } + } +} diff --git a/src/components/logo/d-logo.css b/src/components/logo/d-logo.css new file mode 100644 index 0000000..5d4e87f --- /dev/null +++ b/src/components/logo/d-logo.css @@ -0,0 +1,3 @@ +:host { + display: block; +} diff --git a/src/components/logo/d-logo.tsx b/src/components/logo/d-logo.tsx new file mode 100644 index 0000000..7c31bac --- /dev/null +++ b/src/components/logo/d-logo.tsx @@ -0,0 +1,62 @@ +import { Component, Host, h } from '@stencil/core'; + +@Component({ + tag: 'd-logo', + styleUrl: 'd-logo.css', + shadow: true, +}) +export class DLogo { + render() { + return ( + + + + + + + + + + + + + + + + + + + + ); + } +} diff --git a/src/components/logo/logo.stories.ts b/src/components/logo/logo.stories.ts new file mode 100644 index 0000000..1d38e3d --- /dev/null +++ b/src/components/logo/logo.stories.ts @@ -0,0 +1,20 @@ +import { DLogo } from './d-logo'; +import { Meta, StoryObj } from '@storybook/html'; + +const meta = { + title: 'Design System/Atoms/Logo', + render: () => + ``, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/Uxc5APvp9BsY9r71rF8HhQ/DIDWallet-UI-Trial?node-id=100%3A1839&mode=dev', + }, + }, +}; diff --git a/src/components/logo/readme.md b/src/components/logo/readme.md new file mode 100644 index 0000000..4b1a096 --- /dev/null +++ b/src/components/logo/readme.md @@ -0,0 +1,10 @@ +# d-logo + + + + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/logo/test/d-logo.e2e.ts b/src/components/logo/test/d-logo.e2e.ts new file mode 100644 index 0000000..ac11196 --- /dev/null +++ b/src/components/logo/test/d-logo.e2e.ts @@ -0,0 +1,11 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('d-logo', () => { + it('renders', async () => { + const page = await newE2EPage(); + await page.setContent(''); + + const element = await page.find('d-logo'); + expect(element).toHaveClass('hydrated'); + }); +}); diff --git a/src/components/logo/test/d-logo.spec.tsx b/src/components/logo/test/d-logo.spec.tsx new file mode 100644 index 0000000..2e8c877 --- /dev/null +++ b/src/components/logo/test/d-logo.spec.tsx @@ -0,0 +1,64 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { DLogo } from '../d-logo'; + +describe('d-logo', () => { + it('renders', async () => { + const page = await newSpecPage({ + components: [DLogo], + html: ``, + }); + expect(page.root).toEqualHtml(` + + + + + + + + + + + + + + + + + + + + + + `); + }); +});