chore: add parts to authenticate component (#85)

* chore: add parts to authenticate component * chore: update package.json * chore: apply suggestions from code review Co-authored-by: Wouter Termont <[email protected]>
useid · Oct 15, 2021 · 2b02e79 · 2b02e79
1 parent 8aa80f1
commit 2b02e79
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 54 deletions.
diff --git a/packages/dgt-components/lib/components/authentication/authenticate.component.ts b/packages/dgt-components/lib/components/authentication/authenticate.component.ts
@@ -77,6 +77,7 @@ export class AuthenticateComponent extends RxLitElement {
       ${ this.state?.matches(AuthenticateStates.AWAITING_WEBID) ? html`
 
         <provider-list
+          exportparts="provider"
           ?hidden="${this.hideIssuers}"
           @issuer-selected="${(event: CustomEvent) => this.actor.send(new SelectedIssuerEvent(event.detail))}"
           .providers="${this.predefinedIssuers}"
@@ -85,11 +86,14 @@ export class AuthenticateComponent extends RxLitElement {
           <slot name="afterIssuers" slot="after"></slot>
         </provider-list>
 
-        <separator-component ?hidden="${this.hideIssuers || this.hideWebId}">
+        <separator-component
+          part="t"
+          ?hidden="${this.hideIssuers || this.hideWebId}">
           ${ this.textSeparator }
         </separator-component>
 
         <webid-form
+          exportparts="webid-label, webid-input, webid-create, webid-button"
           ?hidden="${this.hideWebId}"
           ?hideCreateNewWebId="${this.hideCreateNewWebId}"
           @submit-webid="${this.onSubmit}"
@@ -118,12 +122,6 @@ export class AuthenticateComponent extends RxLitElement {
       separator-component {
         margin: var(--gap-large) 0;
       }
-
-      webid-form {
-        --input-padding: var(--webid-input-padding);
-        --border-large: var(--webid-border-large);
-        --button-height: var(--webid-button-height);
-      }
       `,
     ];
 

diff --git a/packages/dgt-components/lib/components/authentication/webid.component.ts b/packages/dgt-components/lib/components/authentication/webid.component.ts
@@ -30,10 +30,10 @@ export class WebIdComponent extends RxLitElement {
     return html`
     <slot name="before"></slot>
     <form @submit="${this.onSubmit}">
-        <label for="webid">${this.textLabel}</label>
-        <input type="text" id="webid" name="webid" placeholder="${this.textPlaceholder}" />
-        <a ?hidden="${this.hideCreateNewWebId}" @click="${this.onButtonCreateWebIDClick}">${this.textNoWebId}</a>
-        <button class="dark">${this.textButton}</button>
+        <label part="webid-label" for="webid">${this.textLabel}</label>
+        <input part="webid-input" type="text" id="webid" name="webid" placeholder="${this.textPlaceholder}" />
+        <a part="webid-create" ?hidden="${this.hideCreateNewWebId}" @click="${this.onButtonCreateWebIDClick}">${this.textNoWebId}</a>
+        <button part="webid-button" class="dark">${this.textButton}</button>
     </form>
     <slot name="after"></slot>
     `;
@@ -54,15 +54,15 @@ export class WebIdComponent extends RxLitElement {
 
         input  {
           margin: var(--gap-small) 0;
-          padding: var(--input-padding);
+          padding: var(--gap-normal);
         }
 
         a {
           font-size: var(--font-size-small);
           padding: var(--gap-tiny);
           text-decoration: underline;
           color: var(--colors-primary-normal);
-          text-align: right;
+          align-self: flex-end;
           cursor: pointer;
         }
 

diff --git a/packages/dgt-components/lib/components/provider/provider-list-item.component.ts b/packages/dgt-components/lib/components/provider/provider-list-item.component.ts
@@ -4,14 +4,12 @@ import { Theme } from '@digita-ai/dgt-theme';
 
 export class ProviderListItemComponent extends RxLitElement {
 
-  @property({ type: String })
-  public icon: string;
-  @property({ type: String })
-  public description: string;
+  @property({ type: String }) icon: string;
+  @property({ type: String }) description: string;
 
-  @internalProperty()
-  buttonEnabled = true;
-  onButtonClick = (): void => {
+  @internalProperty() buttonEnabled = true;
+
+  onclick = (): void => {
 
     this.buttonEnabled = false;
     this.dispatchEvent(new Event('button-clicked'));
@@ -20,12 +18,10 @@ export class ProviderListItemComponent extends RxLitElement {
   render(): TemplateResult {
 
     return html`
-    <div class="card-container" @click="${this.onButtonClick}">
       <div class="logo">
         <img src="${this.icon}">
       </div>
       <h1>${ this.description }</h1>
-    </div>
  `;
 
   }
@@ -34,12 +30,10 @@ export class ProviderListItemComponent extends RxLitElement {
     return [
       unsafeCSS(Theme),
       css`
-      .card-container {
+      :host {
         display: flex;
         align-items: center;
         background: var(--colors-background-light);
-        box-shadow: 0px 2px 4px rgba(26, 32, 44, 0.1);
-        border-radius: var(--border-large);
         margin: var(--gap-small) 0;
         padding: var(--gap-small);
         height: var(--gap-large);

diff --git a/packages/dgt-components/lib/components/provider/provider-list.component.ts b/packages/dgt-components/lib/components/provider/provider-list.component.ts
@@ -32,7 +32,7 @@ export class ProviderListComponent extends LitElement {
       <slot name="before"></slot>
       <div class="providers">
         ${ this.providers.map((provider) => html`
-        <provider-list-item @button-clicked="${this.onIssuerSelected(provider)}" .icon="${provider.icon}" .description="${provider.description}" ?buttonEnabled=${this.buttonsEnabled}></provider-list-item>
+        <provider-list-item part="provider" @button-clicked="${this.onIssuerSelected(provider)}" .icon="${provider.icon}" .description="${provider.description}" ?buttonEnabled=${this.buttonsEnabled}></provider-list-item>
         `)}
       </div>
       <slot name="after"></slot>`;

diff --git a/packages/dgt-components/lib/components/separator/separator.component.ts b/packages/dgt-components/lib/components/separator/separator.component.ts
@@ -30,11 +30,11 @@ export class SeparatorComponent extends LitElement {
       }
       
       .separator:not(:empty)::before {
-        margin-right: .25em;
+        margin-right: var(--gap-small);
       }
       
       .separator:not(:empty)::after {
-        margin-left: .25em;
+        margin-left: var(--gap-small);
       }
       `,
     ];

diff --git a/packages/dgt-components/package-lock.json b/packages/dgt-components/package-lock.json
diff --git a/packages/dgt-components/package.json b/packages/dgt-components/package.json
@@ -31,7 +31,7 @@
     "@appnest/lit-translate": "^1.1.18",
     "@digita-ai/dgt-theme": "0.6.8",
     "@digita-ai/dgt-utils": "0.6.8",
-    "@digita-ai/inrupt-solid-service": "^0.7.1",
+    "@digita-ai/inrupt-solid-service": "^0.7.2",
     "@digita-ai/semcom-core": "0.4.1",
     "@digita-ai/semcom-sdk": "0.4.1",
     "buffer": "6.0.3",