feat: add arrow to webid form button (#172)

* feat: add arrow to webid form button * chore: export part * chore: add parts to form element
useid · Jun 29, 2022 · 3cc8038 · 3cc8038
1 parent cd8b16b
commit 3cc8038
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/packages/dgt-components/lib/components/authentication/authenticate.component.ts b/packages/dgt-components/lib/components/authentication/authenticate.component.ts
@@ -143,7 +143,7 @@ export class AuthenticateComponent extends RxLitElement {
         </separator-component>
 
         <webid-form
-          exportparts="webid-label, webid-input, webid-create, webid-button, alert, webid-form, webid-input-container, webid-input-button-container"
+          exportparts="webid-label, webid-input, webid-create, webid-button, button-icon, alert, webid-form, webid-input-container, webid-input-button-container"
           ?hidden="${this.hideWebId}"
           ?hideCreateNewWebId="${this.hideCreateNewWebId}"
           ?disableLogin="${!this.state.matches(AuthenticateStates.AWAITING_LOGIN)}"

diff --git a/packages/dgt-components/lib/components/authentication/webid.component.ts b/packages/dgt-components/lib/components/authentication/webid.component.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-types */
 import { html, unsafeCSS, css, TemplateResult, CSSResultArray, property } from 'lit-element';
 import { RxLitElement } from 'rx-lit';
-import { Theme } from '@digita-ai/dgt-theme';
+import { Theme, Arrow } from '@digita-ai/dgt-theme';
 import { debounce } from 'debounce';
 import { unsafeSVG } from 'lit-html/directives/unsafe-svg';
 import { Translator } from '@digita-ai/dgt-utils';
@@ -89,6 +89,9 @@ export class WebIdComponent extends RxLitElement {
             disabled
             ?disabled="${this.disableLogin}">
               ${this.textButton.includes('<svg') ? unsafeSVG(this.textButton) : this.textButton}
+            <div part="button-icon">
+              ${unsafeSVG(Arrow)}
+            </div>
           </button>
         </div>
 
@@ -149,6 +152,7 @@ export class WebIdComponent extends RxLitElement {
           background-color: var(--colors-primary-light);
           border: 2px solid var(--colors-primary-light);
         }
+        
         input  {
           padding: var(--gap-normal);
           width: 100%;

diff --git a/packages/dgt-components/lib/components/forms/form-element.component.ts b/packages/dgt-components/lib/components/forms/form-element.component.ts
@@ -239,8 +239,8 @@ export class FormElementComponent<T> extends RxLitElement {
       <div class="help" ?hidden="${this.validationResults && this.validationResults?.length > 0}">
         <slot name="help"></slot>
       </div>
-      <div class="results" ?hidden="${!this.validationResults || this.validationResults.length === 0}">
-        ${this.validationResults?.map((result) => html`<div class="result">${this.translator ? this.translator.translate(result.message) : result.message}</div>`)}
+      <div part="results" class="results" ?hidden="${!this.validationResults || this.validationResults.length === 0}">
+        ${this.validationResults?.map((result) => html`<div part="result" class="result">${this.translator ? this.translator.translate(result.message) : result.message}</div>`)}
       </div>
     </div>
   `;