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

setupFetchForJest.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

src/ActionBmwCodeCell.scss

@@ -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
@@ -11,14 +11,7 @@
 
 .actionBmwCodeCell {
   border: 2px solid blue;
-  background-color: gray;
-  border-radius: 5px;
-  padding: 1rem;
-  font-size: 1rem;
+  background-color: beige;
+  padding-inline: 0.5rem;
   text-align: center;
-
-  &:hover, &:focus {
-    background-color: lightblue;
-    color: #0000aa;
-  }
 }

src/ActionBmwCodeCell.test.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

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,40 @@
  */
 
 import { html } from "htm/preact";
-import { OptionsType } from "./index.d";
+import { BlissSymbolCellType } from "./index.d";
 import { BlissSymbol } from "./BlissSymbol";
+import { usePaletteState } from "./GlobalData";
+import { generateGridStyle, speak } from "./GlobalUtils";
 import "./ActionBmwCodeCell.scss";
 
 
 type ActionBmwCodeCellPropsType = {
   id: string,
-  options: OptionsType
+  options: BlissSymbolCellType
 };
 
 export function ActionBmwCodeCell (props: ActionBmwCodeCellPropsType) {
+  const paletteState = usePaletteState();
+
   const {
     columnStart, columnSpan, rowStart, rowSpan, bciAvId, label
   } = props.options;
 
-  const gridStyles = `
-    grid-column: ${columnStart} / span ${columnSpan};
-    grid-row: ${rowStart} / span ${rowSpan};
-  `;
+  const gridStyles = generateGridStyle(columnStart, columnSpan, rowStart, rowSpan);
+
+  const cellClicked = () => {
+    const payload = {
+      "id": props.id,
+      "label": props.options.label,
+      "bciAvId": props.options.bciAvId
+    };
+    const fullEncoding = paletteState.fullEncoding;
+    paletteState.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

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

src/BlissSymbol.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
@@ -32,7 +32,8 @@ export function BlissSymbol (props: BlissSymbolPropsType) {
 
   let svgMarkupString = "";
   if (svgElement) {
-    // Deal with aria markup, depending on whether the SVG
+    // Deal with aria markup, depending on whether the SVG is for presentation only or
+    // associates with a labelled area.
     if (isPresentation === "true") {
       svgElement.setAttribute("aria-hidden", true);
     } else {

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,42 @@
+/*
+ * 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 { BlissSymbolCellType } from "./index.d";
+import { generateGridStyle, speak } from "./GlobalUtils";
+
+type CommandClearEncodingProps = {
+  id: string,
+  options: BlissSymbolCellType
+}
+
+export function CommandClearEncoding (props: CommandClearEncodingProps) {
+  const { id, options } = props;
+  const { label, bciAvId, columnStart, columnSpan, rowStart, rowSpan } = options;
+
+  const paletteState = usePaletteState();
+  const setFullEncoding = paletteState?.setFullEncoding;
+
+  const gridStyles = generateGridStyle(columnStart, columnSpan, rowStart, rowSpan);
+
+  const cellClicked = () => {
+    setFullEncoding([]);
+    speak(label);
+  };
+
+  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,43 @@
+/*
+ * 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 { BlissSymbolCellType } from "./index.d";
+import { generateGridStyle, speak } from "./GlobalUtils";
+
+type CommandDelLastEncodingProps = {
+  id: string,
+  options: BlissSymbolCellType
+}
+
+export function CommandDelLastEncoding (props: CommandDelLastEncodingProps) {
+  const { id, options } = props;
+  const { label, bciAvId, columnStart, columnSpan, rowStart, rowSpan } = options;
+
+  const paletteState = usePaletteState();
+
+  const gridStyles = generateGridStyle(columnStart, columnSpan, rowStart, rowSpan);
+
+  const cellClicked = () => {
+    const newEncoding = [...paletteState.fullEncoding];
+    newEncoding.pop();
+    paletteState.setFullEncoding(newEncoding);
+    speak(label);
+  };
+
+  return html`
+    <button id="${id}" class="btn-command" style="${gridStyles}" onClick=${cellClicked}>
+      <${BlissSymbol} bciAvId=${bciAvId} label=${label}/>
+    </button>
+  `;
+}

src/ContentBmwEncoding.scss

@@ -0,0 +1,30 @@
+/*
+ * 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
+ */
+
+.bmwEncodingArea {
+  align-items: center;
+  background-color: #fff;
+  border: 3px solid #ccc;
+  color: #000;
+  display: flex;
+  overflow: auto; /* Add scrollbar when content overflows */
+  white-space: nowrap;
+
+  &:hover {
+    background-color: limegreen;
+    color: white;
+  }
+
+  .blissSymbol {
+    margin: 0 0.5rem;
+    text-align: center;
+  }
+}