From 344115814892156d585cc15c503d1a9e177802ef Mon Sep 17 00:00:00 2001 From: Arne Vandoorslaer Date: Sun, 9 May 2021 13:25:05 +0200 Subject: [PATCH] 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 --- .../lib/alerts/alert.component.ts | 4 +- packages/nde-erfgoed-components/lib/demo.ts | 2 + .../lib/demo/demo-content-header.component.ts | 6 +- .../lib/demo/demo-svg.component.ts | 64 +++++++++++++++++++ .../lib/forms/form-element.component.ts | 5 ++ .../nde-erfgoed-components/lib/index.html | 4 ++ packages/nde-erfgoed-theme/lib/icons/Bell.svg | 2 +- .../lib/icons/Collection.svg | 12 ++++ .../nde-erfgoed-theme/lib/icons/Connect.svg | 3 + .../lib/icons/{Dismiss.svg => Cross.svg} | 2 +- packages/nde-erfgoed-theme/lib/icons/Dots.svg | 5 ++ .../nde-erfgoed-theme/lib/icons/Dropdown.svg | 3 + packages/nde-erfgoed-theme/lib/icons/Edit.svg | 3 + .../nde-erfgoed-theme/lib/icons/Empty.svg | 42 ++++++++++++ .../nde-erfgoed-theme/lib/icons/Identity.svg | 18 ++++++ .../nde-erfgoed-theme/lib/icons/Image.svg | 13 ++++ .../nde-erfgoed-theme/lib/icons/Loading.svg | 41 +++--------- .../nde-erfgoed-theme/lib/icons/Login.svg | 4 +- .../nde-erfgoed-theme/lib/icons/Logout.svg | 4 +- .../nde-erfgoed-theme/lib/icons/Object.svg | 10 +++ packages/nde-erfgoed-theme/lib/icons/Plus.svg | 11 ++++ packages/nde-erfgoed-theme/lib/icons/Save.svg | 3 + .../nde-erfgoed-theme/lib/icons/Search.svg | 4 +- .../nde-erfgoed-theme/lib/icons/Trash.svg | 6 ++ packages/nde-erfgoed-theme/lib/index.ts | 14 +++- 25 files changed, 239 insertions(+), 46 deletions(-) create mode 100644 packages/nde-erfgoed-components/lib/demo/demo-svg.component.ts create mode 100644 packages/nde-erfgoed-theme/lib/icons/Collection.svg create mode 100644 packages/nde-erfgoed-theme/lib/icons/Connect.svg rename packages/nde-erfgoed-theme/lib/icons/{Dismiss.svg => Cross.svg} (97%) create mode 100644 packages/nde-erfgoed-theme/lib/icons/Dots.svg create mode 100644 packages/nde-erfgoed-theme/lib/icons/Dropdown.svg create mode 100644 packages/nde-erfgoed-theme/lib/icons/Edit.svg create mode 100644 packages/nde-erfgoed-theme/lib/icons/Empty.svg create mode 100644 packages/nde-erfgoed-theme/lib/icons/Identity.svg create mode 100644 packages/nde-erfgoed-theme/lib/icons/Image.svg create mode 100644 packages/nde-erfgoed-theme/lib/icons/Object.svg create mode 100644 packages/nde-erfgoed-theme/lib/icons/Plus.svg create mode 100644 packages/nde-erfgoed-theme/lib/icons/Save.svg create mode 100644 packages/nde-erfgoed-theme/lib/icons/Trash.svg diff --git a/packages/nde-erfgoed-components/lib/alerts/alert.component.ts b/packages/nde-erfgoed-components/lib/alerts/alert.component.ts index 1295ebc1..ce755352 100644 --- a/packages/nde-erfgoed-components/lib/alerts/alert.component.ts +++ b/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 {
${ unsafeSVG(Bell) }
${ message }
-
${ unsafeSVG(Dismiss) }
+
${ unsafeSVG(Cross) }
`; diff --git a/packages/nde-erfgoed-components/lib/demo.ts b/packages/nde-erfgoed-components/lib/demo.ts index 5c38da78..b99062ad 100644 --- a/packages/nde-erfgoed-components/lib/demo.ts +++ b/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); diff --git a/packages/nde-erfgoed-components/lib/demo/demo-content-header.component.ts b/packages/nde-erfgoed-components/lib/demo/demo-content-header.component.ts index c900244f..baaf58d3 100644 --- a/packages/nde-erfgoed-components/lib/demo/demo-content-header.component.ts +++ b/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 {
${ unsafeSVG(Search) }
Title
Subtitle
-
${ unsafeSVG(Dismiss) }
+
${ unsafeSVG(Cross) }

${ unsafeSVG(Search) }
Title
Subtitle
-
${ unsafeSVG(Dismiss) }
+
${ unsafeSVG(Cross) }
${ unsafeSVG(Logout) }
`; diff --git a/packages/nde-erfgoed-components/lib/demo/demo-svg.component.ts b/packages/nde-erfgoed-components/lib/demo/demo-svg.component.ts new file mode 100644 index 00000000..6cc957bc --- /dev/null +++ b/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` +
+ ${ 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) } +
+ `; + + } + + /** + * 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; diff --git a/packages/nde-erfgoed-components/lib/forms/form-element.component.ts b/packages/nde-erfgoed-components/lib/forms/form-element.component.ts index 79f102e9..2afcab63 100644 --- a/packages/nde-erfgoed-components/lib/forms/form-element.component.ts +++ b/packages/nde-erfgoed-components/lib/forms/form-element.component.ts @@ -227,6 +227,11 @@ export class FormElementComponent extends RxLitElement { :root { display: block; } + + .loading svg .loadCircle { + stroke: var(--colors-primary-normal); + } + .no-border, .no-border ::slotted(*) { border: none !important; } diff --git a/packages/nde-erfgoed-components/lib/index.html b/packages/nde-erfgoed-components/lib/index.html index b3b7ab34..970b0128 100644 --- a/packages/nde-erfgoed-components/lib/index.html +++ b/packages/nde-erfgoed-components/lib/index.html @@ -17,6 +17,10 @@
+ +

SVG Component

+ +

Content Header Component

diff --git a/packages/nde-erfgoed-theme/lib/icons/Bell.svg b/packages/nde-erfgoed-theme/lib/icons/Bell.svg index 1cb9f545..35388612 100644 --- a/packages/nde-erfgoed-theme/lib/icons/Bell.svg +++ b/packages/nde-erfgoed-theme/lib/icons/Bell.svg @@ -1,6 +1,6 @@ - + diff --git a/packages/nde-erfgoed-theme/lib/icons/Collection.svg b/packages/nde-erfgoed-theme/lib/icons/Collection.svg new file mode 100644 index 00000000..85100f28 --- /dev/null +++ b/packages/nde-erfgoed-theme/lib/icons/Collection.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/nde-erfgoed-theme/lib/icons/Connect.svg b/packages/nde-erfgoed-theme/lib/icons/Connect.svg new file mode 100644 index 00000000..6223a61a --- /dev/null +++ b/packages/nde-erfgoed-theme/lib/icons/Connect.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/nde-erfgoed-theme/lib/icons/Dismiss.svg b/packages/nde-erfgoed-theme/lib/icons/Cross.svg similarity index 97% rename from packages/nde-erfgoed-theme/lib/icons/Dismiss.svg rename to packages/nde-erfgoed-theme/lib/icons/Cross.svg index a14298b5..d46e4f24 100644 --- a/packages/nde-erfgoed-theme/lib/icons/Dismiss.svg +++ b/packages/nde-erfgoed-theme/lib/icons/Cross.svg @@ -1,6 +1,6 @@ - + diff --git a/packages/nde-erfgoed-theme/lib/icons/Dots.svg b/packages/nde-erfgoed-theme/lib/icons/Dots.svg new file mode 100644 index 00000000..72cb5581 --- /dev/null +++ b/packages/nde-erfgoed-theme/lib/icons/Dots.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/nde-erfgoed-theme/lib/icons/Dropdown.svg b/packages/nde-erfgoed-theme/lib/icons/Dropdown.svg new file mode 100644 index 00000000..b86a3750 --- /dev/null +++ b/packages/nde-erfgoed-theme/lib/icons/Dropdown.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/nde-erfgoed-theme/lib/icons/Edit.svg b/packages/nde-erfgoed-theme/lib/icons/Edit.svg new file mode 100644 index 00000000..a64f3d95 --- /dev/null +++ b/packages/nde-erfgoed-theme/lib/icons/Edit.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/nde-erfgoed-theme/lib/icons/Empty.svg b/packages/nde-erfgoed-theme/lib/icons/Empty.svg new file mode 100644 index 00000000..5e241c3c --- /dev/null +++ b/packages/nde-erfgoed-theme/lib/icons/Empty.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/nde-erfgoed-theme/lib/icons/Identity.svg b/packages/nde-erfgoed-theme/lib/icons/Identity.svg new file mode 100644 index 00000000..42d93001 --- /dev/null +++ b/packages/nde-erfgoed-theme/lib/icons/Identity.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/packages/nde-erfgoed-theme/lib/icons/Image.svg b/packages/nde-erfgoed-theme/lib/icons/Image.svg new file mode 100644 index 00000000..268cdfca --- /dev/null +++ b/packages/nde-erfgoed-theme/lib/icons/Image.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/packages/nde-erfgoed-theme/lib/icons/Loading.svg b/packages/nde-erfgoed-theme/lib/icons/Loading.svg index 899978b6..9c1aa516 100644 --- a/packages/nde-erfgoed-theme/lib/icons/Loading.svg +++ b/packages/nde-erfgoed-theme/lib/icons/Loading.svg @@ -1,32 +1,9 @@ - - - - - - - - - - - - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/packages/nde-erfgoed-theme/lib/icons/Login.svg b/packages/nde-erfgoed-theme/lib/icons/Login.svg index 46c931b5..dd4affea 100644 --- a/packages/nde-erfgoed-theme/lib/icons/Login.svg +++ b/packages/nde-erfgoed-theme/lib/icons/Login.svg @@ -1,4 +1,4 @@ - - + + diff --git a/packages/nde-erfgoed-theme/lib/icons/Logout.svg b/packages/nde-erfgoed-theme/lib/icons/Logout.svg index 9c3a7800..4c942071 100644 --- a/packages/nde-erfgoed-theme/lib/icons/Logout.svg +++ b/packages/nde-erfgoed-theme/lib/icons/Logout.svg @@ -1,4 +1,4 @@ - - + + diff --git a/packages/nde-erfgoed-theme/lib/icons/Object.svg b/packages/nde-erfgoed-theme/lib/icons/Object.svg new file mode 100644 index 00000000..70818482 --- /dev/null +++ b/packages/nde-erfgoed-theme/lib/icons/Object.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/nde-erfgoed-theme/lib/icons/Plus.svg b/packages/nde-erfgoed-theme/lib/icons/Plus.svg new file mode 100644 index 00000000..4bb9563a --- /dev/null +++ b/packages/nde-erfgoed-theme/lib/icons/Plus.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/nde-erfgoed-theme/lib/icons/Save.svg b/packages/nde-erfgoed-theme/lib/icons/Save.svg new file mode 100644 index 00000000..b36bd7d4 --- /dev/null +++ b/packages/nde-erfgoed-theme/lib/icons/Save.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/nde-erfgoed-theme/lib/icons/Search.svg b/packages/nde-erfgoed-theme/lib/icons/Search.svg index 50723665..3ec5aff8 100644 --- a/packages/nde-erfgoed-theme/lib/icons/Search.svg +++ b/packages/nde-erfgoed-theme/lib/icons/Search.svg @@ -1,4 +1,4 @@ - - + + diff --git a/packages/nde-erfgoed-theme/lib/icons/Trash.svg b/packages/nde-erfgoed-theme/lib/icons/Trash.svg new file mode 100644 index 00000000..dd59655c --- /dev/null +++ b/packages/nde-erfgoed-theme/lib/icons/Trash.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/nde-erfgoed-theme/lib/index.ts b/packages/nde-erfgoed-theme/lib/index.ts index f09bba8e..f835bef2 100644 --- a/packages/nde-erfgoed-theme/lib/index.ts +++ b/packages/nde-erfgoed-theme/lib/index.ts @@ -2,10 +2,22 @@ * Export icons */ export { default as Bell } from './icons/Bell.svg?raw'; -export { default as Dismiss } from './icons/Dismiss.svg?raw'; +export { default as Cross } from './icons/Cross.svg?raw'; export { default as Search } from './icons/Search.svg?raw'; export { default as Login } from './icons/Login.svg?raw'; export { default as Logout } from './icons/Logout.svg?raw'; +export { default as Save } from './icons/Save.svg?raw'; +export { default as Object } from './icons/Object.svg?raw'; +export { default as Trash } from './icons/Trash.svg?raw'; +export { default as Dropdown } from './icons/Dropdown.svg?raw'; +export { default as Identity } from './icons/Identity.svg?raw'; +export { default as Plus } from './icons/Plus.svg?raw'; +export { default as Collection } from './icons/Collection.svg?raw'; +export { default as Image } from './icons/Image.svg?raw'; +export { default as Dots } from './icons/Dots.svg?raw'; +export { default as Connect } from './icons/Connect.svg?raw'; +export { default as Edit } from './icons/Edit.svg?raw'; +export { default as Empty } from './icons/Empty.svg?raw'; export { default as Logo } from './icons/Logo.svg?raw'; export { default as Loading } from './icons/Loading.svg?raw'; export { default as Picture } from './icons/Picture.svg?raw';