feat: add svg icons (#156)

* feat: created/updated svg icons

* feat: updated loading and added empty

* chore: fixed linting

* feat: changed svg colors

* chore: minor improvements

Co-authored-by: Wouter Janssens <wouter@digita.ai>

packages/nde-erfgoed-components/lib/alerts/alert.component.ts

@@ -1,6 +1,6 @@
 import { css, html, LitElement, property, unsafeCSS } from 'lit-element';
 import { ArgumentError, Logger, Translator } from '@digita-ai/nde-erfgoed-core';
-import { Bell, Dismiss, Theme } from '@digita-ai/nde-erfgoed-theme';
+import { Bell, Cross, Theme } from '@digita-ai/nde-erfgoed-theme';
 import { unsafeSVG } from 'lit-html/directives/unsafe-svg';
 import { Alert } from './alert';
 
@@ -110,7 +110,7 @@ export class AlertComponent extends LitElement {
     <div class="alert ${ type }">
       <div class="icon">${ unsafeSVG(Bell) }</div>
       <div class="message">${ message }</div>
-      <div class="dismiss" @click="${ this.dismiss }">${ unsafeSVG(Dismiss) }</div>
+      <div class="dismiss" @click="${ this.dismiss }">${ unsafeSVG(Cross) }</div>
     </div>
   `;
 

packages/nde-erfgoed-components/lib/demo.ts

@@ -10,6 +10,7 @@ import { SidebarListComponent } from './sidebar/sidebar-list.component';
 import { DemoSidebarListComponent } from './demo/demo-sidebar-list.component';
 import { ContentHeaderComponent } from './header/content-header.component';
 import { DemoContentHeaderComponent } from './demo/demo-content-header.component';
+import { DemoSVGComponent } from './demo/demo-svg.component';
 import { DemoNDECardComponent } from './demo/demo-card.component';
 import { CardComponent } from './collections/card.component';
 import { CollectionCardComponent } from './collections/collection-card.component';
@@ -32,3 +33,4 @@ customElements.define('nde-sidebar-list', SidebarListComponent);
 customElements.define('nde-demo-sidebar-list', DemoSidebarListComponent);
 customElements.define('nde-content-header', ContentHeaderComponent);
 customElements.define('nde-demo-content-header', DemoContentHeaderComponent);
+customElements.define('nde-demo-svg', DemoSVGComponent);

packages/nde-erfgoed-components/lib/demo/demo-content-header.component.ts

@@ -1,4 +1,4 @@
-import { Dismiss, Logout, Search } from '@digita-ai/nde-erfgoed-theme';
+import { Cross, Logout, Search } from '@digita-ai/nde-erfgoed-theme';
 import { css, html, LitElement } from 'lit-element';
 import { unsafeSVG } from 'lit-html/directives/unsafe-svg';
 
@@ -19,14 +19,14 @@ export class DemoContentHeaderComponent extends LitElement {
       <div slot="icon">${ unsafeSVG(Search) }</div>
       <div slot="title">Title</div>
       <div slot="subtitle">Subtitle</div>
-      <div slot="actions">${ unsafeSVG(Dismiss) }</div>
+      <div slot="actions">${ unsafeSVG(Cross) }</div>
     </nde-content-header>
     <br>
     <nde-content-header inverse>
       <div slot="icon">${ unsafeSVG(Search) }</div>
       <div slot="title">Title</div>
       <div slot="subtitle">Subtitle</div>
-      <div slot="actions">${ unsafeSVG(Dismiss) }</div>
+      <div slot="actions">${ unsafeSVG(Cross) }</div>
       <div slot="actions">${ unsafeSVG(Logout) }</div>
     </nde-content-header>
   `;

packages/nde-erfgoed-components/lib/demo/demo-svg.component.ts

@@ -0,0 +1,64 @@
+import { Cross, Logout, Search, Object, Login, Edit, Bell, Loading, Trash, Dropdown, Identity, Connect, Plus, Dots, Collection, Save, Image } from '@digita-ai/nde-erfgoed-theme';
+import { css, html, LitElement } from 'lit-element';
+import { unsafeSVG } from 'lit-html/directives/unsafe-svg';
+/**
+ * A component which represents different icons.
+ */
+export class DemoSVGComponent extends LitElement {
+
+  /**
+   * Renders the component as HTML.
+   *
+   * @returns The rendered HTML of the component.
+   */
+  render() {
+
+    return html`
+    <div>
+      ${ unsafeSVG(Login) }
+      ${ unsafeSVG(Save) }
+      ${ unsafeSVG(Object) }
+      ${ unsafeSVG(Trash) }
+      ${ unsafeSVG(Dropdown) }
+      ${ unsafeSVG(Identity) }
+      ${ unsafeSVG(Connect) }
+      ${ unsafeSVG(Bell) }
+      ${ unsafeSVG(Search) }
+      ${ unsafeSVG(Cross) }
+      ${ unsafeSVG(Plus) }
+      ${ unsafeSVG(Dots) }
+      ${ unsafeSVG(Collection) }
+      ${ unsafeSVG(Image) }
+      ${ unsafeSVG(Logout) }
+      ${ unsafeSVG(Loading) }
+      ${ unsafeSVG(Edit) }
+    </div>
+  `;
+
+  }
+
+  /**
+   * The styles associated with the component.
+   */
+  static get styles() {
+
+    return [
+      css`
+      div {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+      div svg {
+        margin-right: var(--gap-normal);
+        height: var(--gap-large);
+        fill: var(--colors-foreground-normal);
+      }
+      `,
+    ];
+
+  }
+
+}
+
+export default DemoSVGComponent;

packages/nde-erfgoed-components/lib/forms/form-element.component.ts

@@ -227,6 +227,11 @@ export class FormElementComponent<T> extends RxLitElement {
         :root {
           display: block;
         }
+
+        .loading svg .loadCircle {
+          stroke: var(--colors-primary-normal);
+        }
+
         .no-border, .no-border ::slotted(*) {
           border: none !important;
         }

packages/nde-erfgoed-components/lib/index.html

@@ -17,6 +17,10 @@
   </nde-sidebar>
 
   <div class="content">
+
+    <p>SVG Component</p>
+    <nde-demo-svg></nde-demo-svg>
+
     <p>Content Header Component</p>
     <nde-demo-content-header></nde-demo-content-header>