feat(marks): add classes for each assigned mark on document elements

addon/components/document-card.hbs

@@ -1,11 +1,4 @@
-<div
-  class={{if
-    @isSelected
-    "document-card uk-card uk-card-body uk-border-rounded-circular uk-padding-remove selected"
-    "document-card uk-card uk-card-body uk-border-rounded-circular uk-padding-remove"
-  }}
-  ...attributes
->
+<div class={{this.classes}} ...attributes>
   {{#if @document.marks}}
     <div
       class="marks uk-flex uk-position-top-left uk-position-small uk-border-rounded uk-background-muted"

addon/components/document-card.js

@@ -10,6 +10,26 @@ export default class DocumentCardComponent extends Component {
   @service intl;
   @service config;
 
+  get classes() {
+    const classes = [
+      "document-card",
+      "uk-card",
+      "uk-card-body",
+      "uk-border-rounded-circular",
+      "uk-padding-remove",
+    ];
+
+    if (this.args.isSelected) {
+      classes.push("document-card--selected");
+    }
+
+    this.args.document.marks.forEach((mark) => {
+      classes.push(`document-card--mark-${mark.id}`);
+    });
+
+    return classes.join(" ");
+  }
+
   get showLoadingState() {
     return this.download.isRunning || this.delete.isRunning;
   }

addon/components/document-list-item.hbs

@@ -1,5 +1,5 @@
 <tr
-  class={{if @isSelected "document-list-item-selected" "document-list-item"}}
+  class={{this.classes}}
   data-test-document-list-item
   data-test-document-list-item-id={{@document.id}}
   tabindex="0"

addon/components/document-list-item.js

@@ -0,0 +1,17 @@
+import Component from "@glimmer/component";
+
+export default class DocumentListItemComponent extends Component {
+  get classes() {
+    const classes = ["document-list-item"];
+
+    if (this.args.isSelected) {
+      classes.push("document-list-item--selected");
+    }
+
+    this.args.document.marks.forEach((mark) => {
+      classes.push(`document-list-item--mark-${mark.id}`);
+    });
+
+    return classes.join(" ");
+  }
+}

app/styles/components/_document-card.scss

@@ -37,7 +37,7 @@
     }
   }
 
-  &.selected {
+  &--selected {
     border-color: $global-primary-background;
   }
 

app/styles/ember-alexandria.scss

@@ -22,7 +22,7 @@ $tag-hover-shadow: 0 2px 8px rgba(0 0 0 / 20%);
   cursor: pointer;
 }
 
-.uk-table tbody tr.document-list-item-selected {
+.uk-table tbody tr.document-list-item--selected {
   background: #ffd;
 }
 

tests/acceptance/documents-test.js

@@ -57,7 +57,7 @@ module("Acceptance | documents", function (hooks) {
 
     assert
       .dom("[data-test-document-container]:first-child [data-test-document]")
-      .doesNotHaveClass("selected");
+      .doesNotHaveClass("document-card--selected");
 
     await click(
       "[data-test-document-container]:first-child [data-test-document]",
@@ -73,7 +73,7 @@ module("Acceptance | documents", function (hooks) {
 
     assert
       .dom("[data-test-document-container]:first-child [data-test-document]")
-      .hasClass("selected");
+      .hasClass("document-card--selected");
 
     assert
       .dom("[data-test-single-doc-details] [data-test-title]")
@@ -250,7 +250,7 @@ module("Acceptance | documents", function (hooks) {
     });
 
     assert
-      .dom("[data-test-document-list-item].document-list-item-selected")
+      .dom("[data-test-document-list-item].document-list-item--selected")
       .exists({ count: 3 });
   });
 
@@ -259,7 +259,7 @@ module("Acceptance | documents", function (hooks) {
     await visit("/");
     await click("[data-test-document-list-item]:first-child");
     assert
-      .dom("[data-test-document-list-item].document-list-item-selected")
+      .dom("[data-test-document-list-item].document-list-item--selected")
       .exists({ count: 1 });
 
     // window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
@@ -268,7 +268,7 @@ module("Acceptance | documents", function (hooks) {
     await settled();
 
     assert
-      .dom("[data-test-document-list-item].document-list-item-selected")
+      .dom("[data-test-document-list-item].document-list-item--selected")
       .doesNotExist();
   });
 

tests/integration/components/document-card-test.js

@@ -20,7 +20,7 @@ module("Integration | Component | document-card", function (hooks) {
   });
 
   test("it renders document card", async function (assert) {
-    this.document = { title: "test1" };
+    this.document = { title: "test1", marks: [] };
     await render(hbs`<DocumentCard @document={{this.document}}/>`);
 
     assert.dom("[data-test-file-icon]").exists();
@@ -45,6 +45,7 @@ module("Integration | Component | document-card", function (hooks) {
     this.document = {
       title,
       files: [{ name: "foo.txt", variant: "original", downloadUrl }],
+      marks: [],
     };
     await render(hbs`<DocumentCard @document={{this.document}}/>`);
     await click("[data-test-context-menu-trigger]");
@@ -64,6 +65,7 @@ module("Integration | Component | document-card", function (hooks) {
   test("delete file", async function (assert) {
     this.document = {
       id: 1,
+      marks: [],
       // eslint-disable-next-line import/no-named-as-default-member
       destroyRecord: sinon.fake(),
     };
@@ -81,6 +83,7 @@ module("Integration | Component | document-card", function (hooks) {
   test("thumbnail", async function (assert) {
     this.document = {
       thumbnail: "some-url",
+      marks: [],
     };
     await render(hbs`<DocumentCard @document={{this.document}}/>`);
 

tests/integration/components/document-list-item-test.js

@@ -13,6 +13,7 @@ module("Integration | Component | document-list-item", function (hooks) {
       title: "some document",
       modifiedAt: new Date("December 1, 2000 00:00:00"),
       createdByUser: "some group",
+      marks: [],
     };
     this.isSelected = false;
     this.onClickDocument = () => {};

tests/integration/components/document-view-test.js

@@ -29,7 +29,9 @@ module("Integration | Component | document-view", function (hooks) {
     assert.dom("[data-test-empty]").doesNotExist();
 
     assert.dom("[data-test-document]").exists({ count: 3 });
-    assert.dom("[data-test-document]").doesNotHaveClass("selected");
+    assert
+      .dom("[data-test-document]")
+      .doesNotHaveClass("document-card--selected");
   });
 
   test("it renders an empty document view", async function (assert) {
@@ -53,13 +55,13 @@ module("Integration | Component | document-view", function (hooks) {
     assert.dom("[data-test-document]").exists({ count: 3 });
     assert
       .dom("[data-test-document-container]:nth-child(1) div")
-      .hasClass("selected");
+      .hasClass("document-card--selected");
     assert
       .dom("[data-test-document-container]:nth-child(2) div")
-      .doesNotHaveClass("selected");
+      .doesNotHaveClass("document-card--selected");
     assert
       .dom("[data-test-document-container]:nth-child(3) div")
-      .doesNotHaveClass("selected");
+      .doesNotHaveClass("document-card--selected");
   });
 
   test("pass filters", async function (assert) {