feat: implement a content display area and associated buttons (resolves #2)

.eslintrc.json

@@ -20,6 +20,7 @@
     "node_modules/"
   ],
   "rules": {
+    "@typescript-eslint/no-explicit-any": ["off"],
     "indent": [
       "error",
       2

src/ActionBmwCodeCell.scss

@@ -11,14 +11,6 @@
 
 .actionBmwCodeCell {
   border: 2px solid blue;
-  background-color: gray;
-  border-radius: 5px;
-  padding: 1rem;
-  font-size: 1rem;
+  background-color: beige;
   text-align: center;
-
-  &:hover, &:focus {
-    background-color: lightblue;
-    color: #0000aa;
-  }
 }

src/ActionBmwCodeCell.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright 2023 Inclusive Design Research Centre, OCAD University
+ * Copyright 2023-2024 Inclusive Design Research Centre, OCAD University
  * All rights reserved.
  *
  * Licensed under the New BSD license. You may not use this file except in
@@ -10,28 +10,45 @@
  */
 
 import { html } from "htm/preact";
-import { OptionsType } from "./index.d";
+import { BlissCellType } from "./index.d";
 import { BlissSymbol } from "./BlissSymbol";
+import { usePaletteState } from "./GlobalData";
+import { getGridStyle, speak } from "./GlobalUtils";
 import "./ActionBmwCodeCell.scss";
 
 
 type ActionBmwCodeCellPropsType = {
   id: string,
-  options: OptionsType
+  options: BlissCellType
 };
 
 export function ActionBmwCodeCell (props: ActionBmwCodeCellPropsType) {
+  // Using separate lines to get "fullEncoding" & "setFullEncoding" rather than using one single line:
+  // { fullEncoding, setFullEncoding } = usePaletteState();
+  // is to accommodate the component unit test in which the parent palette component is not tested. The
+  // palette state is defined in the palette context.
+  const paletteState = usePaletteState();
+  const fullEncoding = paletteState?.fullEncoding;
+  const setFullEncoding = paletteState?.setFullEncoding;
+
   const {
     columnStart, columnSpan, rowStart, rowSpan, bciAvId, label
   } = props.options;
 
-  const gridStyles = `
-    grid-column: ${columnStart} / span ${columnSpan};
-    grid-row: ${rowStart} / span ${rowSpan};
-  `;
+  const gridStyles = getGridStyle(columnStart, columnSpan, rowStart, rowSpan);
+
+  const cellClicked = () => {
+    const payload = {
+      "id": props.id,
+      "label": props.options.label,
+      "bciAvId": props.options.bciAvId
+    };
+    setFullEncoding([...fullEncoding, payload]);
+    speak(props.options.label);
+  };
 
   return html`
-    <button id="${props.id}" class="actionBmwCodeCell" style="${gridStyles}" >
+    <button id="${props.id}" class="actionBmwCodeCell" style="${gridStyles}" onClick=${cellClicked}>
       <${BlissSymbol}
         bciAvId=${bciAvId}
         label=${label}

src/BlissSymbol.test.ts

@@ -114,4 +114,3 @@ describe("BlissSymbol render tests", () => {
     expect(svgElement.getAttribute("aria-hidden")).toBe(null);
   });
 });
-

src/CommandClearEncoding.test.ts

@@ -0,0 +1,65 @@
+/*
+ * Copyright 2024 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+import { render, screen } from "@testing-library/preact";
+import "@testing-library/jest-dom";
+import { html } from "htm/preact";
+
+import { initAdaptivePaletteGlobals } from "./GlobalData";
+import { CommandClearEncoding } from "./CommandClearEncoding";
+
+describe("CommandClearEncoding render tests", () => {
+
+  const TEST_CELL_ID = "command-del-last-encoding";
+  const testCell = {
+    options: {
+      "label": "Clear",
+      "bciAvId": 13665,
+      "rowStart": 2,
+      "rowSpan": 1,
+      "columnStart": 14,
+      "columnSpan": 1
+    }
+  };
+
+  beforeAll(async () => {
+    await initAdaptivePaletteGlobals();
+  });
+
+  test("CommandClearEncoding rendering", async () => {
+
+    render(html`
+      <${CommandClearEncoding}
+        id="${TEST_CELL_ID}"
+        options=${testCell.options}
+      />`
+    );
+
+    // Check the rendered cell
+    const button = await screen.findByRole("button", {name: testCell.options.label});
+
+    // Check that the CommandClearEncoding/button is rendered and has the correct
+    // attributes and text.
+    expect(button).toBeVisible();
+    expect(button).toBeValid();
+    expect(button.id).toBe(TEST_CELL_ID);
+    expect(button.getAttribute("class")).toBe("btn-command");
+    expect(button.textContent).toBe(testCell.options.label);
+
+    // Check the grid cell styles.
+    expect(button.style["grid-column"]).toBe("14 / span 1");
+    expect(button.style["grid-row"]).toBe("2 / span 1");
+
+    // Check disabled state (should be enabled)
+    expect(button.getAttribute("disabled")).toBe(null);
+  });
+
+});

src/CommandClearEncoding.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2023-2024 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+import { html } from "htm/preact";
+import { BlissSymbol } from "./BlissSymbol";
+import { usePaletteState } from "./GlobalData";
+import { BlissCellType } from "./index.d";
+import { getGridStyle } from "./GlobalUtils";
+
+type CommandClearEncodingProps = {
+  id: string,
+  options: BlissCellType
+}
+
+export function CommandClearEncoding (props: CommandClearEncodingProps) {
+  const { id, options } = props;
+  const { label, bciAvId, columnStart, columnSpan, rowStart, rowSpan } = options;
+
+  // Using separate lines to get "fullEncoding" & "setFullEncoding" rather than using one single line:
+  // { fullEncoding, setFullEncoding } = usePaletteState();
+  // is to accommodate the component unit test in which the parent palette component is not tested. The
+  // palette state is defined in the palette context.
+  const paletteState = usePaletteState();
+  const setFullEncoding = paletteState?.setFullEncoding;
+
+  const gridStyles = getGridStyle(columnStart, columnSpan, rowStart, rowSpan);
+
+  const cellClicked = () => {
+    setFullEncoding([]);
+  };
+
+  return html`
+    <button id="${id}" class="btn-command" style="${gridStyles}" onClick=${cellClicked}>
+      <${BlissSymbol} bciAvId=${bciAvId} label=${label}/>
+    </button>
+  `;
+}

src/CommandDelLastEncoding.test.ts

@@ -0,0 +1,65 @@
+/*
+ * Copyright 2024 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+import { render, screen } from "@testing-library/preact";
+import "@testing-library/jest-dom";
+import { html } from "htm/preact";
+
+import { initAdaptivePaletteGlobals } from "./GlobalData";
+import { CommandDelLastEncoding } from "./CommandDelLastEncoding";
+
+describe("CommandDelLastEncoding render tests", () => {
+
+  const TEST_CELL_ID = "command-del-last-encoding";
+  const testCell = {
+    options: {
+      "label": "Delete",
+      "bciAvId": 12613,
+      "rowStart": 2,
+      "rowSpan": 1,
+      "columnStart": 13,
+      "columnSpan": 1
+    }
+  };
+
+  beforeAll(async () => {
+    await initAdaptivePaletteGlobals();
+  });
+
+  test("CommandDelLastEncoding rendering", async () => {
+
+    render(html`
+      <${CommandDelLastEncoding}
+        id="${TEST_CELL_ID}"
+        options=${testCell.options}
+      />`
+    );
+
+    // Check the rendered cell
+    const button = await screen.findByRole("button", {name: testCell.options.label});
+
+    // Check that the CommandDelLastEncoding/button is rendered and has the correct
+    // attributes and text.
+    expect(button).toBeVisible();
+    expect(button).toBeValid();
+    expect(button.id).toBe(TEST_CELL_ID);
+    expect(button.getAttribute("class")).toBe("btn-command");
+    expect(button.textContent).toBe(testCell.options.label);
+
+    // Check the grid cell styles.
+    expect(button.style["grid-column"]).toBe("13 / span 1");
+    expect(button.style["grid-row"]).toBe("2 / span 1");
+
+    // Check disabled state (should be enabled)
+    expect(button.getAttribute("disabled")).toBe(null);
+  });
+
+});

src/CommandDelLastEncoding.ts

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2023-2024 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+import { html } from "htm/preact";
+import { BlissSymbol } from "./BlissSymbol";
+import { usePaletteState } from "./GlobalData";
+import { BlissCellType } from "./index.d";
+import { getGridStyle } from "./GlobalUtils";
+
+type CommandDelLastEncodingProps = {
+  id: string,
+  options: BlissCellType
+}
+
+export function CommandDelLastEncoding (props: CommandDelLastEncodingProps) {
+  const { id, options } = props;
+  const { label, bciAvId, columnStart, columnSpan, rowStart, rowSpan } = options;
+
+  // Using separate lines to get "fullEncoding" & "setFullEncoding" rather than using one single line:
+  // { fullEncoding, setFullEncoding } = usePaletteState();
+  // is to accommodate the component unit test in which the parent palette component is not tested. The
+  // palette state is defined in the palette context.
+  const paletteState = usePaletteState();
+  const fullEncoding = paletteState?.fullEncoding;
+  const setFullEncoding = paletteState?.setFullEncoding;
+
+  const gridStyles = getGridStyle(columnStart, columnSpan, rowStart, rowSpan);
+
+  const cellClicked = () => {
+    const newEncoding = [...fullEncoding];
+    newEncoding.pop();
+    setFullEncoding(newEncoding);
+  };
+
+  return html`
+    <button id="${id}" class="btn-command" style="${gridStyles}" onClick=${cellClicked}>
+      <${BlissSymbol} bciAvId=${bciAvId} label=${label}/>
+    </button>
+  `;
+}

src/ContentBmwEncoding.scss

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2023 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+.bmwEncodingArea {
+  align-items: center;
+  background-color: #fff;
+  border: 3px solid #ccc;
+  color: #000;
+  display: flex;
+  overflow: auto; /* Add scrollbar when content overflows */
+
+  &:hover {
+    background-color: limegreen;
+    color: white;
+  }
+
+  .blissSymbol {
+    margin: 0 0.5rem;
+    text-align: center;
+  }
+}

src/ContentBmwEncoding.test.ts

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2023-2024 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+import { render, screen } from "@testing-library/preact";
+import "@testing-library/jest-dom";
+import { html } from "htm/preact";
+import { ContentBmwEncoding } from "./ContentBmwEncoding";
+import { initAdaptivePaletteGlobals } from "./GlobalData";
+
+test("The BMW Encoding content area is rendered correctly", async () => {
+  await initAdaptivePaletteGlobals();
+
+  const cellId = "uuid-of-bmw-encoding-area";
+  const cellOptions = {
+    columnStart: 1,
+    columnSpan: 5,
+    rowStart: 2,
+    rowSpan: 3
+  };
+
+  render(html`
+    <${ContentBmwEncoding}
+      id="${cellId}"
+      options=${cellOptions}
+    />`
+  );
+
+  // Test the content area is rendered properly
+  const encodingAreaByLabel = await screen.findByLabelText("BMW Encoding Area");
+  expect(encodingAreaByLabel.id).toBe(cellId);
+  expect(encodingAreaByLabel.style["grid-column"]).toBe("1 / span 5");
+  expect(encodingAreaByLabel.style["grid-row"]).toBe("2 / span 3");
+
+  // The aria role is defined
+  const encodingAreaByRole = await screen.findByRole("region");
+  expect(encodingAreaByRole).toBeVisible();
+  expect(encodingAreaByRole).toBeValid();
+
+  // Nothing is rendered in the content area
+  expect(encodingAreaByLabel.childNodes.length).toBe(0);
+});