From b409331e8f0520a2e02f5cdce646f818949d1ac4 Mon Sep 17 00:00:00 2001
From: tangoyankee <miller.tim108@gmail.com>
Date: Wed, 18 Dec 2024 15:07:53 -0500
Subject: [PATCH] Add square hatch legend icon

Implement a square icon with a hatching pattern.
Make the background color, hatch color, and hatch width adjustable

closes #15
---
 .../components/labs-ui/icons/square-hatch.hbs |  9 ++++++++
 .../components/labs-ui/icons/square-hatch.js  | 21 +++++++++++++++++++
 addon/components/labs-ui/legend-icon.hbs      |  4 ++++
 app/components/labs-ui/icons/square-hatch.js  |  1 +
 .../labs-ui/icons/square-hatch-test.js        | 20 ++++++++++++++++++
 5 files changed, 55 insertions(+)
 create mode 100644 addon/components/labs-ui/icons/square-hatch.hbs
 create mode 100644 addon/components/labs-ui/icons/square-hatch.js
 create mode 100644 app/components/labs-ui/icons/square-hatch.js
 create mode 100644 tests/integration/components/labs-ui/icons/square-hatch-test.js

diff --git a/addon/components/labs-ui/icons/square-hatch.hbs b/addon/components/labs-ui/icons/square-hatch.hbs
new file mode 100644
index 0000000..2ca6ec0
--- /dev/null
+++ b/addon/components/labs-ui/icons/square-hatch.hbs
@@ -0,0 +1,9 @@
+<svg width=".875em" height=".875em">
+  <defs>
+    <pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(-45 2 2)">
+      <path d="M -1,2 l 6,0" stroke={{this.hatchColor}} stroke-width={{this.hatchWidth}} />
+    </pattern>
+  </defs>
+  <rect fill={{this.backgroundColor}} rx="2" ry="2" width="100%" height="100%" />
+  <rect fill="url(#diagonalHatch)" ry="2" rx="2" height="100%" width="100%" />
+</svg>
diff --git a/addon/components/labs-ui/icons/square-hatch.js b/addon/components/labs-ui/icons/square-hatch.js
new file mode 100644
index 0000000..ba6abbb
--- /dev/null
+++ b/addon/components/labs-ui/icons/square-hatch.js
@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
+
+export default class SquareHatchComponent extends Component {
+  get backgroundColor() {
+    const backgroundColor = this.args?.options?.backgroundColor;
+    return backgroundColor !== undefined
+      ? htmlSafe(backgroundColor)
+      : 'rgba(255, 255, 255, 1)';
+  }
+
+  get hatchColor() {
+    const hatchColor = this.args?.options?.hatchColor;
+    return hatchColor !== undefined ? htmlSafe(hatchColor) : 'rgba(0, 0, 0, 1)';
+  }
+
+  get hatchWidth() {
+    const hatchWidth = this.args?.options?.hatchWidth;
+    return hatchWidth !== undefined ? htmlSafe(hatchWidth) : '1';
+  }
+}
diff --git a/addon/components/labs-ui/legend-icon.hbs b/addon/components/labs-ui/legend-icon.hbs
index b428be0..d5fa143 100644
--- a/addon/components/labs-ui/legend-icon.hbs
+++ b/addon/components/labs-ui/legend-icon.hbs
@@ -17,6 +17,10 @@
         <LabsUi::Icons::rectangle @options={{icon-layer}} />
       {{/if}}
 
+      {{#if (eq @icon.type "square-hatch")}}
+        <LabsUi::Icons::square-hatch @options={{icon-layer}} />
+      {{/if}}
+
       {{#if (eq @icon.type "fa-icon")}}
         <LabsUi::Icons::fa-icon @options={{icon-layer}} />
       {{/if}}
diff --git a/app/components/labs-ui/icons/square-hatch.js b/app/components/labs-ui/icons/square-hatch.js
new file mode 100644
index 0000000..68c364c
--- /dev/null
+++ b/app/components/labs-ui/icons/square-hatch.js
@@ -0,0 +1 @@
+export { default } from '@nycplanning/ember/components/labs-ui/icons/square-hatch';
diff --git a/tests/integration/components/labs-ui/icons/square-hatch-test.js b/tests/integration/components/labs-ui/icons/square-hatch-test.js
new file mode 100644
index 0000000..0b5e0d4
--- /dev/null
+++ b/tests/integration/components/labs-ui/icons/square-hatch-test.js
@@ -0,0 +1,20 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module(
+  'Integration | Component | labs-ui/icons/square-hatch',
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it renders', async function (assert) {
+      // Set any properties with this.set('myProperty', 'value');
+      // Handle any actions with this.set('myAction', function(val) { ... });
+
+      await render(hbs`{{labs-ui/icons/square-hatch}}`);
+
+      assert.strictEqual(this.element.textContent.trim(), '');
+    });
+  }
+);