feat: logo (#46)

* feat: logo * fix: test and add stories
ForkbombEu · Feb 13, 2024 · 87f32da · 87f32da
1 parent 09e098d
commit 87f32da
Show file tree

Hide file tree

Showing 7 changed files with 373 additions and 0 deletions.
diff --git a/src/components.d.ts 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<HTMLDAvatarElement>;
+            "d-button": LocalJSX.DButton & JSXBase.HTMLAttributes<HTMLDButtonElement>;
+            "d-credential-card": LocalJSX.DCredentialCard & JSXBase.HTMLAttributes<HTMLDCredentialCardElement>;
+            "d-credential-detail": LocalJSX.DCredentialDetail & JSXBase.HTMLAttributes<HTMLDCredentialDetailElement>;
+            "d-credential-service": LocalJSX.DCredentialService & JSXBase.HTMLAttributes<HTMLDCredentialServiceElement>;
+            "d-definition": LocalJSX.DDefinition & JSXBase.HTMLAttributes<HTMLDDefinitionElement>;
+            "d-heading": LocalJSX.DHeading & JSXBase.HTMLAttributes<HTMLDHeadingElement>;
+            "d-logo": LocalJSX.DLogo & JSXBase.HTMLAttributes<HTMLDLogoElement>;
+            "d-text": LocalJSX.DText & JSXBase.HTMLAttributes<HTMLDTextElement>;
+        }
+    }
+}
diff --git a/src/components/logo/d-logo.css 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
@@ -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 (
+      <Host>
+        <svg width="39" height="42" viewBox="0 0 39 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M10.4698 13.023V8.27368L28.234 8.3645V16.2143C28.2203 16.184 28.2049 16.1519 28.1895 16.1216C26.9348 13.6089 25.146 11.7142 23.0423 10.5834C21.067 9.52023 18.8144 9.13204 16.4659 9.53628C15.4081 9.71792 14.4187 10.0723 13.4892 10.5834C12.3989 11.1853 11.3941 12.0044 10.4698 13.023ZM28.234 26.2134V34.795H22.474C22.4929 34.7736 22.51 34.747 22.5305 34.7345C22.9105 34.5083 23.068 34.1183 23.0526 33.6251C23.0372 33.1318 22.7976 32.8362 22.4296 32.6794C22.3457 32.6438 22.2601 32.6136 22.1762 32.5815C21.4265 32.2877 20.7093 31.9102 20.0314 31.4365C20.0263 31.4329 20.0212 31.4293 20.016 31.4258C19.7336 31.2281 19.4563 31.0126 19.1876 30.7794C16.8648 28.7742 15.6101 26.0798 15.6118 22.5628C15.6118 22.0321 15.7008 21.5317 15.9301 21.0758C16.5275 19.888 17.7771 19.3003 18.9239 19.6725C19.7884 19.9539 20.812 20.9138 20.788 22.6198C20.7743 23.6669 21.0653 24.616 21.596 25.4476C22.8421 27.4065 25.0947 28.1562 26.957 27.1679C27.438 26.9115 27.8694 26.5945 28.234 26.2134ZM22.0478 34.795H10.4698V24.6481C10.6136 26.0335 10.9371 27.3887 11.4369 28.7011C11.8032 29.6663 12.2414 30.5692 12.7378 31.4258L12.7395 31.4293C13.277 32.3589 13.8829 33.2333 14.5317 34.0667C14.9168 34.5618 15.4132 34.6027 15.8257 34.1504C16.2211 33.7141 16.2366 33.1086 15.86 32.5975C15.6238 32.2752 15.3773 31.9618 15.1428 31.6377C15.0931 31.57 15.0435 31.5006 14.9956 31.4311L14.9904 31.4258C13.2393 28.938 12.1182 26.1475 12.2157 23.0899C12.1712 21.5388 12.327 20.3777 12.8319 19.336C13.9292 17.0744 15.5536 15.7976 17.7086 15.5999C19.9458 15.3951 21.7911 16.3567 23.2169 18.4723C24.0112 19.6494 24.3261 21.0349 24.3364 22.545C24.3398 23.1718 24.7438 23.5956 25.2915 23.5849C25.764 23.5742 26.1371 23.1326 26.1388 22.5503C26.1423 20.9493 25.8615 19.4286 25.1649 18.0591C22.7034 13.2136 17.8421 12.3285 14.4855 14.4958C12.2876 15.9133 10.8173 18.0859 10.4818 21.1649C10.4783 21.2058 10.4732 21.245 10.4698 21.2859V16.0843C10.5143 16.0184 10.5605 15.9507 10.6067 15.8848C13.3146 12.0098 17.772 10.5674 21.7808 12.4372C24.8944 13.8885 27.0272 16.517 27.6571 20.668C27.7513 21.2931 27.7787 21.9395 27.7752 22.5752C27.7701 23.7773 27.094 24.8261 26.1132 25.2357C25.0468 25.6827 23.8263 25.2571 23.104 24.1975C22.7394 23.6615 22.6093 23.0418 22.6007 22.3615C22.587 21.2646 22.3046 20.2798 21.738 19.4232C20.3755 17.3611 17.9346 16.7663 16.0448 18.0698C14.7679 18.9495 13.96 20.2656 13.8727 22.0891C13.7751 24.1085 14.0712 26.062 14.809 27.8856C15.3687 29.2657 16.0859 30.4392 16.9435 31.4258L16.9486 31.4329C17.914 32.5423 19.0575 33.4131 20.3532 34.0738C20.9044 34.3534 21.483 34.5564 22.0478 34.795ZM25.0433 31.4258H25.271C25.6236 31.3563 26.1628 31.2726 26.69 31.1284C27.1505 31.0037 27.3764 30.5354 27.3096 29.978C27.248 29.4651 26.8697 29.0644 26.4332 29.0769C26.1953 29.0858 25.9591 29.1392 25.7212 29.1713C23.4669 29.4776 21.6114 28.548 20.1598 26.4378C19.3724 25.2945 19.0968 23.9233 19.0746 22.4542C19.066 21.797 18.6911 21.3732 18.1759 21.3875C17.6761 21.4017 17.3201 21.8415 17.3149 22.4737C17.3012 23.9055 17.5101 25.2892 18.0938 26.5357C19.5898 29.7322 21.8972 31.2495 25.0433 31.4258Z"
+            fill="#E8D2FF"
+          />
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M28.2341 0.0090332L38.6997 10.5834H23.0431C21.0666 9.52022 18.8127 9.13203 16.4645 9.53627C15.4077 9.71791 14.4169 10.0723 13.49 10.5834H0.00189209L10.4409 0.0090332H28.2341Z"
+            fill="#E8D2FF"
+          />
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M2.76566e-05 0.0090332H10.4692V13.023H10.4675C10.4212 13.0765 10.3732 13.1281 10.3269 13.1815C8.79702 14.916 7.69406 16.9728 7.21018 19.4748C6.57865 22.739 7.01805 25.9017 7.87195 29.0163C8.01249 29.531 8.44834 29.7963 8.87529 29.6895C9.47125 29.5417 9.77545 28.9273 9.56553 28.231C9.03896 26.4805 8.72052 24.6801 8.67427 22.8138C8.61022 20.2976 9.17059 18.0378 10.4675 16.086L10.4692 16.0842V21.2859C10.4675 21.2913 10.4675 21.2949 10.4675 21.2984C10.3536 22.4239 10.3536 23.5369 10.4675 24.632C10.4675 24.6374 10.4675 24.6427 10.4692 24.6481V42.0001L2.76566e-05 31.4258V0.0090332Z"
+            fill="#E8D2FF"
+          />
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M38.6979 31.4257L28.259 42L8.39233e-05 42V31.4257L10.4657 31.4257H10.4675H12.7357L12.7375 31.4292C13.2765 32.3588 13.8814 33.2332 14.5289 34.0666C14.9149 34.5616 15.4113 34.6026 15.824 34.1503C16.2207 33.714 16.2349 33.1085 15.8596 32.5974C15.6212 32.2751 15.3757 31.9617 15.1409 31.6376C15.091 31.5699 15.043 31.5005 14.9932 31.431L14.9897 31.4257H16.9412L16.9483 31.4328C17.9125 32.5422 19.0564 33.413 20.3515 34.0719C20.9029 34.3533 21.4811 34.5563 22.0468 34.7949H22.472C22.4915 34.7736 22.5076 34.7468 22.5289 34.7344C22.9096 34.5082 23.0661 34.1164 23.0519 33.6249C23.0359 33.1316 22.7957 32.8361 22.4275 32.6794C22.3439 32.6437 22.2585 32.6135 22.1749 32.5814C21.4242 32.2876 20.709 31.9101 20.0312 31.4364C20.0259 31.4328 20.0206 31.4292 20.0152 31.4257H38.6979Z"
+            fill="#E8D2FF"
+          />
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M28.2335 0.0090332V10.5828H25.6197L28.2335 0.0090332Z" fill="#E8D2FF" />
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M28.2335 41.9983L28.2335 31.4246H25.6197L28.2335 41.9983Z" fill="#E8D2FF" />
+          <path d="M25.2694 31.425C25.2546 31.4279 25.2401 31.4309 25.2259 31.4337C25.1645 31.4313 25.1034 31.4284 25.0427 31.425H25.2694Z" fill="#E8D2FF" />
+          <path d="M28.2338 16.2126C29.2651 18.3193 29.7004 20.6429 29.5324 23.0863C29.4412 24.414 28.9706 25.4447 28.2338 26.213V16.2126Z" fill="#E8D2FF" />
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M28.234 0.0090332L38.6997 10.5834V31.4258L28.234 42.0001V0.0090332Z" fill="#E8D2FF" />
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M2.76566e-05 10.5742L2.76566e-05 -0.000105858L10.4657 -0.000105858L2.76566e-05 10.5742Z" fill="#E8D2FF" />
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M28.2323 42V31.4257H38.6979L28.2323 42Z" fill="#E8D2FF" />
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M28.2323 0.0090332V10.5834L38.6979 10.5834L28.2323 0.0090332Z" fill="#E8D2FF" />
+          <path d="M38.6997 10.583H28.234V31.4258H38.6997V10.583Z" fill="#E8D2FF" />
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M0.00183105 31.4254V10.583H10.4692V13.0227C10.423 13.0761 10.375 13.1278 10.3287 13.1812C8.79883 14.9157 7.69586 16.9725 7.21199 19.4745C6.58045 22.7387 7.01807 25.9014 7.87197 29.016C8.01429 29.5306 8.44834 29.796 8.87707 29.6891C9.47125 29.5413 9.77547 28.927 9.56733 28.2307C9.04076 26.4802 8.72232 24.6797 8.67607 22.8135C8.61203 20.2972 9.17059 18.0374 10.4692 16.0857V21.2981C10.3554 22.4235 10.3554 23.5365 10.4675 24.6317V31.4254V31.4468L0.00183105 31.4254Z"
+            fill="#E8D2FF"
+          />
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M28.234 41.9997H10.4675V31.4467V31.4253H10.4692L12.7392 31.4289C13.2782 32.3584 13.8813 33.2328 14.5306 34.0662C14.9167 34.5613 15.413 34.6022 15.8257 34.1499C16.2224 33.7136 16.2367 33.1082 15.8595 32.5971C15.6229 32.2747 15.3774 31.9613 15.1426 31.6372C15.0928 31.5695 15.043 31.5001 14.995 31.4306L16.9501 31.4324C17.9143 32.5419 19.0563 33.4127 20.3532 34.0734C20.9047 34.3529 21.4828 34.5559 22.0486 34.7945H22.4737C22.4933 34.7732 22.5093 34.7465 22.5306 34.734C22.9113 34.5079 23.0679 34.1179 23.0519 33.6246C23.0376 33.1313 22.7975 32.8357 22.4292 32.679C22.3456 32.6434 22.2602 32.6149 22.1766 32.581C21.4259 32.2872 20.7108 31.9097 20.033 31.436L28.234 31.4467V41.9997Z"
+            fill="#E8D2FF"
+          />
+        </svg>
+      </Host>
+    );
+  }
+}
diff --git a/src/components/logo/logo.stories.ts 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: () =>
+    `<d-logo></d-logo>`,
+} satisfies Meta<DLogo>;
+
+export default meta;
+type Story = StoryObj<DLogo>;
+
+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
@@ -0,0 +1,10 @@
+# d-logo
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*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
@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('d-logo', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<d-logo></d-logo>');
+
+    const element = await page.find('d-logo');
+    expect(element).toHaveClass('hydrated');
+  });
+});