From e99f5f39a0480c4c51ac2d669b19e95984f556ef Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Thu, 7 Nov 2024 17:50:56 +0000
Subject: [PATCH] chore: add further product and gui icons

---
 src/core/Accordion/utils.ts                   | 56 +++++++++++++++++++
 src/core/Icon/Icon.stories.tsx                | 16 +++---
 src/core/icons/icon-gui-chevron-down.svg      |  3 +
 src/core/icons/icon-gui-chevron-up.svg        |  3 +
 src/core/icons/icon-gui-hand.svg              |  3 +
 .../icon-product-asset-tracking-mono.svg      |  3 +
 src/core/icons/icon-product-chat-mono.svg     |  3 +
 src/core/icons/icon-product-livesync-mono.svg |  6 ++
 src/core/icons/icon-product-platform-mono.svg |  3 +
 src/core/icons/icon-product-pub-sub-mono.svg  |  3 +
 src/core/icons/icon-product-spaces-mono.svg   |  3 +
 11 files changed, 94 insertions(+), 8 deletions(-)
 create mode 100644 src/core/Accordion/utils.ts
 create mode 100644 src/core/icons/icon-gui-chevron-down.svg
 create mode 100644 src/core/icons/icon-gui-chevron-up.svg
 create mode 100644 src/core/icons/icon-gui-hand.svg
 create mode 100644 src/core/icons/icon-product-asset-tracking-mono.svg
 create mode 100644 src/core/icons/icon-product-chat-mono.svg
 create mode 100644 src/core/icons/icon-product-livesync-mono.svg
 create mode 100644 src/core/icons/icon-product-platform-mono.svg
 create mode 100644 src/core/icons/icon-product-pub-sub-mono.svg
 create mode 100644 src/core/icons/icon-product-spaces-mono.svg

diff --git a/src/core/Accordion/utils.ts b/src/core/Accordion/utils.ts
new file mode 100644
index 000000000..c500957ac
--- /dev/null
+++ b/src/core/Accordion/utils.ts
@@ -0,0 +1,56 @@
+import { AccordionTheme, AccordionThemeColors } from "./types";
+
+export const themeClasses: Record<AccordionTheme, AccordionThemeColors> = {
+  dark: {
+    bg: "bg-neutral-1200",
+    hoverBg: "hover:bg-neutral-1100",
+    text: "text-white",
+    toggleIconColor: "text-orange-600",
+    selectableBg: "data-[state=open]:bg-neutral-300",
+    selectableText: "data-[state=open]:text-neutral-1300",
+  },
+  light: {
+    bg: "bg-neutral-200",
+    hoverBg: "hover:bg-neutral-300",
+    text: "text-neutral-1300",
+    toggleIconColor: "text-neutral-1000",
+    selectableBg: "data-[state=open]:bg-neutral-1200",
+    selectableText: "data-[state=open]:text-white",
+  },
+  transparent: {
+    bg: "bg-transparent",
+    hoverBg: "hover:bg-transparent",
+    text: "text-neutral-1000",
+    toggleIconColor: "text-dark-grey",
+    border: "border-neutral-500 border-b last:border-none",
+  },
+  darkTransparent: {
+    bg: "bg-transparent",
+    hoverBg: "hover:bg-transparent",
+    text: "text-neutral-000",
+    toggleIconColor: "text-orange-600",
+    border: "border-neutral-900 border-b last:border-none",
+  },
+  static: {
+    bg: "bg-neutral-200",
+    hoverBg: "hover:bg-neutral-200",
+    text: "text-neutral-1300",
+    toggleIconColor: "text-neutral-200",
+    selectableBg: "data-[state=open]:bg-neutral-1200",
+    selectableText: "data-[state=open]:text-white",
+  },
+  darkStatic: {
+    bg: "bg-neutral-1200",
+    hoverBg: "hover:bg-neutral-1200",
+    text: "text-white",
+    toggleIconColor: "text-neutral-1200",
+    selectableBg: "data-[state=open]:bg-neutral-1200",
+    selectableText: "data-[state=open]:text-neutral-1300",
+  },
+};
+
+export const isNonTransparentTheme = (theme: AccordionTheme) =>
+  !["transparent", "darkTransparent"].includes(theme);
+
+export const isStaticTheme = (theme: AccordionTheme) =>
+  ["static", "darkStatic"].includes(theme);
diff --git a/src/core/Icon/Icon.stories.tsx b/src/core/Icon/Icon.stories.tsx
index f2f678224..dbd454ad0 100644
--- a/src/core/Icon/Icon.stories.tsx
+++ b/src/core/Icon/Icon.stories.tsx
@@ -69,6 +69,14 @@ export const ProductIcons = {
   render: () => renderIcons([...iconNames.product]),
 };
 
+export const DarkEncapsulatedIcons = {
+  render: () => renderIcons([...iconNames.product], true),
+};
+
+export const LightEncapsulatedIcons = {
+  render: () => renderIcons([...iconNames.product], true, "light"),
+};
+
 export const OtherIcons = {
   render: () => renderIcons([...iconNames.other]),
 };
@@ -98,11 +106,3 @@ export const IconWithSecondaryColor = {
     },
   },
 };
-
-export const DarkEncapsulatedIcons = {
-  render: () => renderIcons([...iconNames.product], true),
-};
-
-export const LightEncapsulatedIcons = {
-  render: () => renderIcons([...iconNames.product], true, "light"),
-};
diff --git a/src/core/icons/icon-gui-chevron-down.svg b/src/core/icons/icon-gui-chevron-down.svg
new file mode 100644
index 000000000..1a07d14c9
--- /dev/null
+++ b/src/core/icons/icon-gui-chevron-down.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 10.7539L6.39082 7.50562L5.27588 8.74444L9.44255 12.4944H10.5575L14.7242 8.74444L13.6092 7.50562L10 10.7539Z" fill="#434356"/>
+</svg>
diff --git a/src/core/icons/icon-gui-chevron-up.svg b/src/core/icons/icon-gui-chevron-up.svg
new file mode 100644
index 000000000..2635ed5d4
--- /dev/null
+++ b/src/core/icons/icon-gui-chevron-up.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99998 9.24611L13.6092 12.4944L14.7241 11.2556L10.5575 7.50556L9.44251 7.50556L5.27585 11.2556L6.39079 12.4944L9.99998 9.24611Z" fill="#434356"/>
+</svg>
diff --git a/src/core/icons/icon-gui-hand.svg b/src/core/icons/icon-gui-hand.svg
new file mode 100644
index 000000000..c1abe6691
--- /dev/null
+++ b/src/core/icons/icon-gui-hand.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.375 3.8125C8.375 3.64014 8.34105 3.46947 8.27509 3.31023C8.20913 3.15099 8.11245 3.0063 7.99058 2.88442C7.8687 2.76255 7.72401 2.66587 7.56477 2.59991C7.40553 2.53395 7.23486 2.5 7.0625 2.5C6.89014 2.5 6.71947 2.53395 6.56023 2.59991C6.40099 2.66587 6.2563 2.76255 6.13442 2.88442C6.01255 3.0063 5.91587 3.15099 5.84991 3.31023C5.78395 3.46947 5.75 3.64014 5.75 3.8125V6.3125M8.375 3.8125V2.5625C8.375 2.2144 8.51328 1.88056 8.75942 1.63442C9.00556 1.38828 9.3394 1.25 9.6875 1.25C10.0356 1.25 10.3694 1.38828 10.6156 1.63442C10.8617 1.88056 11 2.2144 11 2.5625V3.8125M8.375 3.8125L8.4375 8.75M5.75 6.3125C5.75 5.9644 5.61172 5.63056 5.36558 5.38442C5.11944 5.13828 4.7856 5 4.4375 5C4.0894 5 3.75556 5.13828 3.50942 5.38442C3.26328 5.63056 3.125 5.9644 3.125 6.3125V13.125C3.125 14.6168 3.71763 16.0476 4.77252 17.1025C5.82742 18.1574 7.25816 18.75 8.75 18.75H10.4317C11.5919 18.7499 12.7046 18.2888 13.525 17.4683L14.9683 16.025C15.7888 15.2046 16.2499 14.0919 16.25 12.9317L16.2525 11.245C16.2533 11.0975 16.3127 10.9563 16.4175 10.8525C16.5394 10.7306 16.6361 10.5859 16.7021 10.4266C16.7681 10.2673 16.802 10.0966 16.802 9.92417C16.802 9.75176 16.7681 9.58104 16.7021 9.42176C16.6361 9.26247 16.5394 9.11774 16.4175 8.99583C16.2956 8.87392 16.1509 8.77722 15.9916 8.71124C15.8323 8.64526 15.6616 8.6113 15.4892 8.6113C15.3168 8.6113 15.146 8.64526 14.9868 8.71124C14.8275 8.77722 14.6827 8.87392 14.5608 8.99583C13.9662 9.58967 13.6307 10.3946 13.6275 11.235M5.75 6.3125V10M11 3.8125V9.375M11 3.8125C11 3.4644 11.1383 3.13056 11.3844 2.88442C11.6306 2.63828 11.9644 2.5 12.3125 2.5C12.6606 2.5 12.9944 2.63828 13.2406 2.88442C13.4867 3.13056 13.625 3.4644 13.625 3.8125V12.5M13.625 12.5C13.1328 12.4998 12.6453 12.5967 12.1906 12.7851C11.7358 12.9736 11.3228 13.2499 10.975 13.5983M13.625 12.5H13.6267" stroke="#5B5A72" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/core/icons/icon-product-asset-tracking-mono.svg b/src/core/icons/icon-product-asset-tracking-mono.svg
new file mode 100644
index 000000000..594d022dd
--- /dev/null
+++ b/src/core/icons/icon-product-asset-tracking-mono.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2825 18.1596L10.9102 17.8258L10.9102 17.8258L11.2825 18.1596ZM8.71755 18.1596L9.08979 17.8258L9.08979 17.8258L8.71755 18.1596ZM16.5312 8.28125C16.5312 8.95001 16.3254 9.73701 15.9583 10.5982C15.5932 11.4546 15.0812 12.3551 14.4993 13.2427C13.3353 15.018 11.9168 16.7034 10.9102 17.8258L11.6547 18.4935C12.6764 17.3542 14.1322 15.6264 15.3356 13.791C15.9374 12.8732 16.4823 11.9189 16.8782 10.9904C17.272 10.0666 17.5312 9.13852 17.5312 8.28125H16.5312ZM10 1.75C13.6071 1.75 16.5312 4.67414 16.5312 8.28125H17.5312C17.5312 4.12186 14.1594 0.75 10 0.75V1.75ZM3.46875 8.28125C3.46875 4.67414 6.39289 1.75 10 1.75V0.75C5.84061 0.75 2.46875 4.12186 2.46875 8.28125H3.46875ZM9.08979 17.8258C8.08324 16.7034 6.66466 15.018 5.50069 13.2427C4.91878 12.3551 4.40684 11.4546 4.04172 10.5982C3.67456 9.73701 3.46875 8.95001 3.46875 8.28125H2.46875C2.46875 9.13852 2.728 10.0666 3.12183 10.9904C3.51769 11.9189 4.06265 12.8732 4.6644 13.791C5.86776 15.6264 7.32358 17.3542 8.34531 18.4935L9.08979 17.8258ZM10.9102 17.8258C10.4159 18.377 9.58405 18.377 9.08979 17.8258L8.34531 18.4935C9.23698 19.4877 10.763 19.4877 11.6547 18.4935L10.9102 17.8258ZM12.3125 8.28125C12.3125 9.55841 11.2772 10.5938 10 10.5938V11.5938C11.8294 11.5938 13.3125 10.1107 13.3125 8.28125H12.3125ZM10 5.96875C11.2772 5.96875 12.3125 7.00409 12.3125 8.28125H13.3125C13.3125 6.45181 11.8294 4.96875 10 4.96875V5.96875ZM7.6875 8.28125C7.6875 7.00409 8.72284 5.96875 10 5.96875V4.96875C8.17056 4.96875 6.6875 6.45181 6.6875 8.28125H7.6875ZM10 10.5938C8.72284 10.5938 7.6875 9.55841 7.6875 8.28125H6.6875C6.6875 10.1107 8.17056 11.5938 10 11.5938V10.5938Z" fill="#03020D"/>
+</svg>
diff --git a/src/core/icons/icon-product-chat-mono.svg b/src/core/icons/icon-product-chat-mono.svg
new file mode 100644
index 000000000..e7dd51266
--- /dev/null
+++ b/src/core/icons/icon-product-chat-mono.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.3125 1.71875H14.6875C16.4134 1.71875 17.8125 3.11786 17.8125 4.84375V16.4703C17.8125 17.2848 16.8453 17.7119 16.2434 17.1631L12.6789 13.9132C12.5638 13.8082 12.4136 13.75 12.2578 13.75H5.3125C3.58661 13.75 2.1875 12.3509 2.1875 10.625V4.84375C2.1875 3.11786 3.58661 1.71875 5.3125 1.71875Z" stroke="#03020D"/>
+</svg>
diff --git a/src/core/icons/icon-product-livesync-mono.svg b/src/core/icons/icon-product-livesync-mono.svg
new file mode 100644
index 000000000..98f110d15
--- /dev/null
+++ b/src/core/icons/icon-product-livesync-mono.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9733 18.2812H10V12.1898C10 12.0606 10.1478 11.9873 10.2507 12.0654L18.0678 18.0006C18.187 18.0911 18.123 18.2812 17.9733 18.2812Z" stroke="#03020D" stroke-linecap="round"/>
+<path d="M1.71875 8.125V12.0312C1.71875 15.483 4.51697 18.2812 7.96875 18.2812H10" stroke="#03020D" stroke-linecap="round"/>
+<path d="M2.02668 1.71875L10 1.71875L10 7.81018C10 7.93936 9.85215 8.01274 9.74926 7.93463L1.9322 1.99945C1.81297 1.90893 1.87699 1.71875 2.02668 1.71875Z" stroke="#03020D" stroke-linecap="round"/>
+<path d="M18.2812 11.875L18.2812 7.96875C18.2812 4.51697 15.483 1.71875 12.0312 1.71875L10 1.71875" stroke="#03020D" stroke-linecap="round"/>
+</svg>
diff --git a/src/core/icons/icon-product-platform-mono.svg b/src/core/icons/icon-product-platform-mono.svg
new file mode 100644
index 000000000..a87eb2800
--- /dev/null
+++ b/src/core/icons/icon-product-platform-mono.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.3575 8.125L1.875 10L5.3575 11.875M5.3575 8.125L10 10.625L14.6425 8.125M5.3575 8.125L1.875 6.25L10 1.875L18.125 6.25L14.6425 8.125M5.3575 11.875L1.875 13.75L10 18.125L18.125 13.75L14.6425 11.875M5.3575 11.875L10 14.375L14.6425 11.875M14.6425 8.125L18.125 10L14.6425 11.875" stroke="#434356" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/core/icons/icon-product-pub-sub-mono.svg b/src/core/icons/icon-product-pub-sub-mono.svg
new file mode 100644
index 000000000..fd0cf3f07
--- /dev/null
+++ b/src/core/icons/icon-product-pub-sub-mono.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.84406 2.17078L2.62506 12.17C2.36612 12.5863 2.6655 13.1251 3.15578 13.1251H9.68729C9.85988 13.1251 9.99979 13.265 9.99979 13.4376V17.4992C9.99979 18.1279 10.8235 18.3632 11.1555 17.8293L17.3745 7.83014C17.6335 7.41381 17.3341 6.87505 16.8438 6.87505H10.3123C10.1397 6.87505 9.99979 6.73514 9.99979 6.56255V2.50086C9.99979 1.87221 9.17607 1.63696 8.84406 2.17078Z" stroke="#03020D"/>
+</svg>
diff --git a/src/core/icons/icon-product-spaces-mono.svg b/src/core/icons/icon-product-spaces-mono.svg
new file mode 100644
index 000000000..27b08b0ac
--- /dev/null
+++ b/src/core/icons/icon-product-spaces-mono.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.44229 17.1514L2.78526 3.93887C2.59091 3.23671 3.23671 2.59091 3.93887 2.78526L17.1514 6.44229C18.0178 6.68211 18.0826 7.88589 17.2469 8.2173L11.2833 10.5821C10.9629 10.7092 10.7092 10.9629 10.5821 11.2833L8.2173 17.2469C7.88589 18.0826 6.68211 18.0178 6.44229 17.1514Z" stroke="#03020D"/>
+</svg>