feat: color swatches for layers and layer groups (#1379)

* feat: implement color swatches for layers and layer groups

* feat: implement better color swatch position

* chore: lint and format

* chore: rename story

* style: make color swatches consistent with the size of checkboxes

* test: add case to check if color swatch appears correctly

* chore: add missing comment

elements/layercontrol/src/components/layer.js

@@ -175,7 +175,12 @@ export class EOxLayerControlLayer extends LitElement {
               />
 
               <!-- Layer title -->
-              <span class="title">${this.#getLayer(this.titleProperty)}</span>
+              <span
+                class="title ${this.#getLayer("color") ? "color-swatch" : ""}"
+                style="--layer-color: ${this.#getLayer("color")}"
+              >
+                ${this.#getLayer(this.titleProperty)}
+              </span>
               ${when(
                 isToolsAvail,
                 () => html`<span class="tools-placeholder"></span>`,
@@ -201,6 +206,7 @@ export class EOxLayerControlLayer extends LitElement {
     ${checkbox}
     eox-layercontrol-layer {
       width: 100%;
+      position: relative;
     }
     .layer input[type=checkbox],
     .layer input[type=radio] {
@@ -232,6 +238,14 @@ export class EOxLayerControlLayer extends LitElement {
       margin-right: 6px;
       display: var(--layer-type-visibility);
     }
+    [data-type] .title.color-swatch::before {
+      background: var(--layer-color);
+      border-radius: 3px;
+      content: "" !important;
+      width: 16px;
+      min-width: 16px;
+      height: 16px;
+    }
     [data-type=group] .title::before {
       content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230041703a' viewBox='0 0 24 24'%3E%3Ctitle%3Efolder-outline%3C/title%3E%3Cpath d='M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z' /%3E%3C/svg%3E");
     }

elements/layercontrol/stories/index.js

@@ -18,3 +18,4 @@ export { default as addExternalLayerStory } from "./add-external-layer";
 export { default as layerZoomStateStory } from "./layer-zoom-state";
 export { default as unstyledStory } from "./unstyled";
 export { default as toolsAsListStory } from "./tools-as-list";
+export { default as layerColorStory } from "./layer-color";

elements/layercontrol/stories/layer-color.js

@@ -0,0 +1,67 @@
+import { html } from "lit";
+import {
+  STORIES_MAP_STYLE,
+  STORIES_LAYER_SENTINEL_HUB,
+  STORIES_LAYER_REGION,
+  STORIES_LAYER_S2,
+  STORIES_LAYER_OSM,
+} from "../src/enums";
+
+const COLORED_LAYERS = [
+  {
+    type: "Group",
+    properties: {
+      id: "group2",
+      title: "Data Layers",
+      layerControlExpand: true,
+      description: "# Hello world",
+    },
+    layers: [
+      {
+        ...STORIES_LAYER_SENTINEL_HUB.wind,
+        color: "#008955",
+      },
+      {
+        ...STORIES_LAYER_SENTINEL_HUB.no2,
+        color: "#008397",
+      },
+      {
+        ...STORIES_LAYER_REGION,
+        color: "#007bcb",
+      },
+    ],
+  },
+  {
+    type: "Group",
+    properties: {
+      id: "group1",
+      title: "Background Layers",
+    },
+    layers: [STORIES_LAYER_S2, STORIES_LAYER_OSM],
+  },
+];
+
+export const LayerColor = {
+  args: {
+    idProperty: "id",
+    titleProperty: "title",
+    unstyled: false,
+  },
+  render: (args) => html`
+    <div style="display: flex">
+      <eox-layercontrol
+        .idProperty=${args.idProperty}
+        .titleProperty=${args.titleProperty}
+        .unstyled=${args.unstyled}
+        for="eox-map"
+      ></eox-layercontrol>
+      <eox-map
+        .style=${STORIES_MAP_STYLE}
+        .zoom=${3}
+        .layers=${COLORED_LAYERS}
+      ></eox-map>
+    </div>
+  `,
+};
+
+export default LayerColor;

elements/layercontrol/stories/layercontrol.stories.js

@@ -13,6 +13,7 @@ import {
   layerZoomStateStory,
   toolsAsListStory,
   layerLegendStory,
+  layerColorStory,
 } from ".";
 
 export default {
@@ -110,3 +111,8 @@ export const Unstyled = unstyledStory;
  * Tools rendered as list instead of tabs
  */
 export const ToolsAsList = toolsAsListStory;
+
+/**
+ * Shows how to define color "swatches" for layers.
+ */
+export const ColoredLayers = layerColorStory;

elements/layercontrol/test/cases/general/color-swatch.js

@@ -0,0 +1,22 @@
+// Check if the color swatch appears when a `color` property is present
+const colorSwatch = () => {
+  // Set up the layers in the mock map
+  cy.get("mock-map").then(($el) => {
+    const mockMap = $el[0]; // Accessing the mock map element
+
+    // Setting layers: one visible and another with layerControlDisable: true
+    mockMap.setLayers([
+      { visible: true, color: "green" },
+      { properties: { layerControlDisable: true } },
+    ]);
+  });
+
+  // Verify the effect on the LayerControl
+  cy.get("eox-layercontrol")
+    .shadow()
+    .within(() => {
+      cy.get(".color-swatch").should("exist");
+    });
+};
+
+export default colorSwatch;

elements/layercontrol/test/cases/general/index.js

@@ -8,3 +8,4 @@ export { default as hideLayers } from "./hide-layers";
 export { default as emptyGroup } from "./empty-groups";
 export { default as renderOptionalLayer } from "./render-optional-layer";
 export { default as showCorrectLayerTitle } from "./show-layer-title";
+export { default as colorSwatch } from "./color-swatch";

elements/layercontrol/test/general.cy.js

@@ -12,6 +12,7 @@ import {
   renderOptionalLayer,
   showCorrectLayerTitle,
   checkLayerLegend,
+  colorSwatch,
 } from "./cases/general";
 
 describe("LayerControl", () => {
@@ -58,4 +59,8 @@ describe("LayerControl", () => {
   it("renders layer specific legend", () => {
     checkLayerLegend();
   });
+
+  it("replaces icon with color swatch if color property is present on the layer", () => {
+    colorSwatch();
+  });
 });