Merge pull request #476 from ably/WEB-3908_icons

Add Fan Engagement Icons

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.5.0",
+  "version": "14.5.2",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -21,10 +21,10 @@
     "@storybook/addon-interactions": "^8.2.9",
     "@storybook/addon-links": "^8.2.9",
     "@storybook/blocks": "^8.2.9",
-    "@storybook/react-vite": "^8.2.9",
     "@storybook/react": "^8.2.9",
-    "@storybook/test-runner": "^0.19.1",
+    "@storybook/react-vite": "^8.2.9",
     "@storybook/test": "^8.2.9",
+    "@storybook/test-runner": "^0.19.1",
     "@swc/cli": "^0.4.0",
     "@swc/core": "^1.4.11",
     "@types/dompurify": "^3.0.5",
@@ -34,13 +34,13 @@
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.0.2",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint": "^8.57.0",
     "http-server": "14.1.1",
-    "msw-storybook-addon": "^2.0.2",
     "msw": "2.4.2",
+    "msw-storybook-addon": "^2.0.2",
     "prettier": "^3.2.5",
     "storybook": "^8.2.9",
     "svg-sprite": "^2.0.4",

src/core/Icon/__snapshots__/Icon.stories.tsx.snap

@@ -302,6 +302,21 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
+    <code class="ui-text-code mb-8 block">
+      icon-display-custom
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <svg class="text-cool-black hover:text-active-orange"
+             style="width: 1.5rem; height: 1.5rem;"
+        >
+          <use xlink:href="#sprite-icon-display-custom">
+          </use>
+        </svg>
+      </div>
+    </div>
+  </div>
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
     <code class="ui-text-code mb-8 block">
       icon-display-custom-cname
@@ -647,6 +662,21 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
+    <code class="ui-text-code mb-8 block">
+      icon-display-integrations
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <svg class="text-cool-black hover:text-active-orange"
+             style="width: 1.5rem; height: 1.5rem;"
+        >
+          <use xlink:href="#sprite-icon-display-integrations">
+          </use>
+        </svg>
+      </div>
+    </div>
+  </div>
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
     <code class="ui-text-code mb-8 block">
       icon-display-integrations-col

src/core/Icon/types.ts

@@ -69,6 +69,7 @@ const displayIcons = [
   "icon-display-compare-tech-col",
   "icon-display-connection-state-&-recovery",
   "icon-display-consumer-groups",
+  "icon-display-custom",
   "icon-display-custom-cname",
   "icon-display-customers-col",
   "icon-display-dedicated-cluster",
@@ -92,6 +93,7 @@ const displayIcons = [
   "icon-display-hipaa-mono",
   "icon-display-hipaa",
   "icon-display-history",
+  "icon-display-integrations",
   "icon-display-integrations-col",
   "icon-display-it-support-access",
   "icon-display-it-support-helpdesk",