Standardize to W3C naming for color.

client/src/components/Workflow/Editor/Comments/ColorSelector.test.js

@@ -0,0 +1,47 @@
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+
+import { colors } from "./colors";
+
+import ColorSelector from "./ColorSelector.vue";
+
+describe("ColorSelector", () => {
+    it("shows a button for each color and 'none'", () => {
+        const wrapper = mount(ColorSelector, { propsData: { color: "none" } });
+        const buttons = wrapper.findAll("button");
+        expect(buttons.length).toBe(Object.keys(colors).length + 1);
+    });
+
+    it("highlights the selected color", async () => {
+        const wrapper = mount(ColorSelector, { propsData: { color: "none" } });
+        const allSelected = wrapper.findAll(".selected");
+        expect(allSelected.length).toBe(1);
+
+        let selected = allSelected.wrappers[0];
+        expect(selected.element.getAttribute("title")).toBe("No Color");
+
+        const colorNames = Object.keys(colors);
+
+        for (let i = 0; i < colorNames.length; i++) {
+            const color = colorNames[i];
+            wrapper.setProps({ color });
+            await nextTick();
+
+            selected = wrapper.find(".selected");
+
+            expect(selected.element.getAttribute("title")).toContain(color);
+        }
+    });
+
+    it("emits the set color", async () => {
+        const wrapper = mount(ColorSelector, { propsData: { color: "none" } });
+
+        const colorNames = Object.keys(colors);
+
+        for (let i = 0; i < colorNames.length; i++) {
+            const color = colorNames[i];
+            await wrapper.find(`[title="Color ${color}"]`).trigger("click");
+            expect(wrapper.emitted()["set-color"][i][0]).toBe(color);
+        }
+    });
+});

client/src/components/Workflow/Editor/Comments/ColorSelector.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { WorkflowCommentColor } from "@/stores/workflowEditorCommentStore";
+
+import { brightColors, colors } from "./colors";
+
+const props = defineProps<{
+    color: WorkflowCommentColor;
+}>();
+
+const emit = defineEmits<{
+    (e: "set-color", color: WorkflowCommentColor): void;
+}>();
+
+function onClickColor(color: WorkflowCommentColor) {
+    emit("set-color", color);
+}
+</script>
+
+<template>
+    <div class="comment-color-selector">
+        <button
+            class="color-button prevent-zoom"
+            title="No Color"
+            data-color="none"
+            :class="{ selected: props.color === 'none' }"
+            @click="() => onClickColor('none')"></button>
+        <button
+            v-for="(hex, name) in colors"
+            :key="name"
+            class="color-button prevent-zoom"
+            :data-color="name"
+            :title="`Color ${name}`"
+            :class="{ selected: props.color === name }"
+            :style="{
+                '--color': hex,
+                '--color-bright': brightColors[name],
+            }"
+            @click="() => onClickColor(name)"></button>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
+.comment-color-selector {
+    position: absolute;
+    z-index: 10000;
+
+    display: grid;
+    grid-template-rows: 1rem 1rem;
+    grid-template-columns: repeat(5, 1rem);
+    grid-auto-flow: column;
+
+    overflow: hidden;
+    border-radius: 0.25rem;
+
+    .color-button {
+        --color: #{$brand-primary};
+        --color-bright: #{$brand-secondary};
+
+        background-color: var(--color);
+        border-color: var(--color-bright);
+        border-width: 0;
+        border-radius: 0;
+        padding: 0;
+
+        width: 100%;
+        height: 100%;
+
+        display: grid;
+        place-items: center;
+
+        transition: none;
+
+        &:hover {
+            background-color: var(--color-bright);
+        }
+
+        &:focus,
+        &:focus-visible {
+            border-color: var(--color-bright);
+            border-width: 2px;
+            box-shadow: none;
+        }
+
+        &.selected::after {
+            content: "";
+            display: block;
+            width: 50%;
+            height: 50%;
+            border-radius: 50%;
+            background-color: var(--color-bright);
+        }
+
+        &.selected:hover::after {
+            background-color: var(--color);
+        }
+    }
+}
+</style>