Feat/create object card and collection card component

packages/nde-erfgoed-components/lib/collections/collection-card.component.spec.ts

@@ -0,0 +1,94 @@
+import { ArgumentError, Collection, MemoryTranslator } from '@digita-ai/nde-erfgoed-core';
+import { CollectionCardComponent } from './collection-card.component';
+
+describe('AlertComponent', () => {
+
+  let component: CollectionCardComponent;
+  const tag = 'nde-collection-card';
+
+  const testCollection = {
+    uri: 'Test Uri Collection',
+    name: 'Test Collection',
+    description: 'Collection Test Description',
+  } as Collection;
+
+  beforeEach(() => {
+
+    component = window.document.createElement('nde-collection-card') as CollectionCardComponent;
+
+    component.translator = new MemoryTranslator([
+      {
+        key: 'nde.collections.card.name-unavailable',
+        value:'Name unavailable',
+        locale:'en-GB',
+      },
+    ], 'en-GB');
+
+  });
+
+  afterEach(() => {
+
+    document.getElementsByTagName('html')[0].innerHTML = '';
+
+  });
+
+  it('should be correctly instantiated', () => {
+
+    expect(component).toBeTruthy();
+
+  });
+
+  it('should display name and description of the collection', async () => {
+
+    component.collection = testCollection;
+    window.document.body.appendChild(component);
+    await component.updateComplete;
+
+    const html = window.document.body.getElementsByTagName(tag)[0].shadowRoot.innerHTML;
+
+    expect(html).toContain(testCollection.name);
+    expect(html).toContain(testCollection.description);
+
+  });
+
+  it('should display no description when the collection does not have a description', async () => {
+
+    component.collection = { ...testCollection, description: undefined };
+    window.document.body.appendChild(component);
+    await component.updateComplete;
+
+    const html = window.document.body.getElementsByTagName(tag)[0].shadowRoot.innerHTML;
+
+    expect(html).toContain(testCollection.name);
+    expect(html).not.toContain(testCollection.description);
+
+  });
+
+  it('should display a message when the collection does not have a name', async () => {
+
+    component.collection = { ...testCollection, name: undefined };
+    window.document.body.appendChild(component);
+    await component.updateComplete;
+
+    const html = window.document.body.getElementsByTagName(tag)[0].shadowRoot.innerHTML;
+
+    expect(html).not.toContain(testCollection.name);
+    expect(html).toContain('Name unavailable');
+    expect(html).toContain(testCollection.description);
+
+  });
+
+  it('should display no description and a message when the collection is null', async () => {
+
+    window.document.body.appendChild(component);
+    await component.updateComplete;
+
+    const html = window.document.body.getElementsByTagName(tag)[0].shadowRoot.innerHTML;
+
+    expect(html).not.toContain(testCollection.name);
+    expect(html).not.toContain(testCollection.description);
+    expect(html).toContain('Name unavailable');
+
+  });
+
+});

packages/nde-erfgoed-components/lib/collections/collection-card.component.ts

@@ -0,0 +1,47 @@
+import { css, html, property, LitElement, unsafeCSS } from 'lit-element';
+import { Collection, getFormattedTimeAgo, Translator } from '@digita-ai/nde-erfgoed-core';
+import { Theme } from '@digita-ai/nde-erfgoed-theme';
+
+/**
+ * A component which shows the details of a single collection.
+ */
+export class CollectionCardComponent extends LitElement {
+
+  /** The collection which will be rendered by the component */
+  @property({ type: Object })
+  public collection: Collection = null;
+
+  /** Translator used to display last updated time */
+  @property({ type: Object })
+  public translator: Translator;
+
+  /** The styles associated with the component */
+  static get styles() {
+
+    return [
+      unsafeCSS(Theme),
+      css``,
+    ];
+
+  }
+
+  render() {
+
+    return html`
+      <nde-card>
+        <span slot='title'>
+          ${this.collection?.name ?? this.translator.translate('nde.collections.card.name-unavailable')}
+        </span>
+        <span slot='subtitle'>
+          <span>
+            ${this.collection?.description ?? ''}
+          </span>
+        </span>
+      </nde-card>
+    `;
+
+  }
+
+}
+
+export default CollectionCardComponent;

packages/nde-erfgoed-components/lib/collections/collection-object-card.component.spec.ts

@@ -0,0 +1,142 @@
+import { CollectionObject, MemoryTranslator } from '@digita-ai/nde-erfgoed-core';
+import { CollectionObjectCardComponent } from './collection-object-card.component';
+
+describe('CollectionObjectCardComponent', () => {
+
+  let component: CollectionObjectCardComponent;
+  const tag = 'nde-collection-object-card';
+
+  const testObject = {
+    uri: 'test uri',
+    name: 'test name',
+    description: 'test description',
+    subject: 'test subject',
+    image: 'https://images.unsplash.com/photo-1615390164801-cf2e70f32b53?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8M3x8fGVufDB8fHx8&ixlib=rb-1.2.1&w=1000&q=80',
+    updated: +new Date(),
+  } as CollectionObject;
+
+  beforeEach(() => {
+
+    component = window.document.createElement('nde-collection-object-card') as CollectionObjectCardComponent;
+
+    component.translator = new MemoryTranslator([
+      {
+        key: 'nde.collections.card.name-unavailable',
+        value:'Name unavailable',
+        locale:'en-GB',
+      },
+      {
+        key: 'nde.collections.card.subject-unavailable',
+        value:'Subject unavailable',
+        locale:'en-GB',
+      },
+      {
+        key: 'nde.common.date.just-now',
+        value:'Just Now',
+        locale:'en-GB',
+      },
+    ], 'en-GB');
+
+  });
+
+  afterEach(() => {
+
+    document.getElementsByTagName('html')[0].innerHTML = '';
+
+  });
+
+  it('should be correctly instantiated', () => {
+
+    expect(component).toBeTruthy();
+
+  });
+
+  it('should display name, subject and time ago of the object', async () => {
+
+    component.object = testObject;
+    window.document.body.appendChild(component);
+    await component.updateComplete;
+
+    const html = window.document.body.getElementsByTagName(tag)[0].shadowRoot.innerHTML;
+
+    expect(html).toContain(testObject.name);
+    expect(html).toContain(testObject.subject);
+    expect(html).not.toContain('Name unavailable');
+    expect(html).not.toContain('Subject unavailable');
+    expect(html).toContain('- Just Now');
+
+  });
+
+  it('should display message when name of the object is undefined', async () => {
+
+    component.object = { ...testObject, name: undefined };
+    window.document.body.appendChild(component);
+    await component.updateComplete;
+
+    const html = window.document.body.getElementsByTagName(tag)[0].shadowRoot.innerHTML;
+
+    expect(html).not.toContain(testObject.name);
+    expect(html).toContain('Name unavailable');
+    expect(html).toContain(testObject.subject);
+    expect(html).not.toContain('Subject unavailable');
+    expect(html).toContain('- Just Now');
+
+  });
+
+  it('should display message when subject of the object is undefined', async () => {
+
+    component.object = { ...testObject, subject: undefined };
+    window.document.body.appendChild(component);
+    await component.updateComplete;
+
+    const html = window.document.body.getElementsByTagName(tag)[0].shadowRoot.innerHTML;
+
+    expect(html).toContain(testObject.name);
+    expect(html).not.toContain('Name unavailable');
+    expect(html).not.toContain(testObject.subject);
+    expect(html).toContain('Subject unavailable');
+    expect(html).toContain('- Just Now');
+
+  });
+
+  it('should not display time ago when updated of the object is undefined', async () => {
+
+    component.object = { ...testObject, updated: undefined };
+    window.document.body.appendChild(component);
+    await component.updateComplete;
+
+    const html = window.document.body.getElementsByTagName(tag)[0].shadowRoot.innerHTML;
+
+    expect(html).toContain(testObject.name);
+    expect(html).not.toContain('Name unavailable');
+    expect(html).toContain(testObject.subject);
+    expect(html).not.toContain('Subject unavailable');
+    expect(html).not.toContain('- Just Now');
+
+  });
+
+  it('should display the image of the object', async () => {
+
+    component.object = testObject;
+    window.document.body.appendChild(component);
+    await component.updateComplete;
+
+    const html = window.document.body.getElementsByTagName(tag)[0].shadowRoot.innerHTML;
+
+    expect(html.split('amp;').join('')).toContain(testObject.image);
+
+  });
+
+  it('should not display the image of the object', async () => {
+
+    component.object = { ...testObject, image: undefined };
+    window.document.body.appendChild(component);
+    await component.updateComplete;
+
+    const html = window.document.body.getElementsByTagName(tag)[0].shadowRoot.innerHTML;
+
+    expect(html.split('amp;').join('')).not.toContain(testObject.image);
+
+  });
+
+});

packages/nde-erfgoed-components/lib/collections/collection-object-card.component.ts

@@ -0,0 +1,61 @@
+import { css, html, property, LitElement, unsafeCSS } from 'lit-element';
+import { CollectionObject, getFormattedTimeAgo, Translator } from '@digita-ai/nde-erfgoed-core';
+import { Theme } from '@digita-ai/nde-erfgoed-theme';
+
+/**
+ * A component which shows the details of a single collection object.
+ */
+export class CollectionObjectCardComponent extends LitElement {
+
+  /** The object which will be rendered by the component */
+  @property({ type: Object })
+  public object: CollectionObject = null;
+
+  /** Translator used to display last updated time */
+  @property({ type: Object })
+  public translator: Translator;
+
+  /** The styles associated with the component */
+  static get styles() {
+
+    return [
+      unsafeCSS(Theme),
+      css`
+        .time-ago {
+          color: var(--colors-foreground-light);
+        }
+      `,
+    ];
+
+  }
+
+  /**
+   * Renders the component as HTML.
+   *
+   * @returns The rendered HTML of the component.
+   */
+  render() {
+
+    const timeAgo = getFormattedTimeAgo(this.object.updated, this.translator);
+
+    return html`
+      <nde-card image='${this.object.image}'>
+        <span slot='title'>
+          ${this.object.name ?? this.translator.translate('nde.collections.card.name-unavailable')}
+        </span>
+        <span slot='subtitle'>
+          <span class='subject'>
+            ${this.object.subject ?? this.translator.translate('nde.collections.card.subject-unavailable')}
+          </span>
+          <span class='time-ago'>
+             ${this.object.updated ? ` - ${timeAgo}` : ''}
+          </span>
+        </span>
+      </nde-card>
+    `;
+
+  }
+
+}
+
+export default CollectionObjectCardComponent;

packages/nde-erfgoed-components/lib/collections/collection.component.ts

@@ -52,7 +52,7 @@ export class CollectionComponent extends LitElement implements Component {
       .then((response) => response.text())
       .then(() => {
 
-        this.collection = { uri:'test', name: 'Test' };
+        this.collection = { uri:'test', name: 'Test', description: 'Test desc' };
 
       });