From ac946554bb6c165e3fee3bc19b19ce8004ee1760 Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Thu, 23 Feb 2023 12:08:30 -0500
Subject: [PATCH] fix(storybook): fix storybook UI styles (#362)

* fix(storybook): fix storybook UI styles

* refactor(storybook): refactor

* refactor(storybook): use throttle instead of debounce for Storybook UI resizing

* chore(storybook): remove extra codes
---
 .storybook/manager-head.html    | 63 +++++++++++++++++++++++++++++++--
 src/core/Icon/index.stories.tsx |  2 +-
 2 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
index 1804d3f85..d6db2fee2 100644
--- a/.storybook/manager-head.html
+++ b/.storybook/manager-head.html
@@ -19,21 +19,35 @@
   }
 
   div[role="main"] {
-    top: 0 !important;
+    transform: translate(0px, -11px);
+    transform-origin: top left;
   }
 
   div[role="main"] > div {
     box-shadow: none !important;
   }
 
+  div[role="main"] > div > div {
+    width: 100% !important;
+  }
+
   div[role="main"] .os-host {
     border-bottom: solid 1px #e6e6e6;
     border-top: solid 1px #e6e6e6;
   }
 
+  div[role="main"] .os-host-foreign {
+    background-color: #f9f9f9 !important;
+  }
+
   .react-draggable {
     border-right: solid 1px #e6e6e6;
+    margin-top: 0px !important;
+  }
+
+  .react-draggable ~ .react-draggable {
     margin-top: -19px !important;
+    border-right: none;
   }
 
   #storybook-explorer-menu svg {
@@ -124,7 +138,6 @@
     transform: rotate(135deg);
   }
 </style>
-
 <script>
   //workaround to increase the left panel width just enough to show even the longer story names
   //based on https://github.com/storybookjs/storybook/issues/9682#issuecomment-983356523
@@ -158,4 +171,50 @@
     );
     bookmarkHollowIcon.setAttribute("fill-rule", "evenodd");
   });
+
+  // Throttle with last call to the callback function
+  const throttle = (func, limit) => {
+    let lastFunc;
+    let lastRan;
+    return function () {
+      const context = this;
+      const args = arguments;
+      if (!lastRan) {
+        func.apply(context, args);
+        lastRan = Date.now();
+      } else {
+        clearTimeout(lastFunc);
+        lastFunc = setTimeout(function () {
+          if (Date.now() - lastRan >= limit) {
+            func.apply(context, args);
+            lastRan = Date.now();
+          }
+        }, limit - (Date.now() - lastRan));
+      }
+    };
+  };
+
+  function changeElementDimension(element, attribute, value) {
+    element.style[attribute] =
+      parseInt(element.style[attribute]) + value + "px";
+  }
+
+  function resizeStorybookElements() {
+    const mainDiv = document.querySelector('div[role="main"]');
+    const controlsDiv = document.querySelector(
+      'div[role="main"] > div > div ~ div'
+    );
+
+    if (mainDiv) {
+      changeElementDimension(mainDiv, "width", 10);
+      changeElementDimension(mainDiv, "height", 20);
+    }
+    controlsDiv && changeElementDimension(controlsDiv, "height", 20);
+  }
+
+  window.addEventListener("load", () => {
+    resizeStorybookElements();
+  });
+
+  window.addEventListener("resize", throttle(resizeStorybookElements, 100));
 </script>
diff --git a/src/core/Icon/index.stories.tsx b/src/core/Icon/index.stories.tsx
index 83b9df3cf..8c2d48a62 100644
--- a/src/core/Icon/index.stories.tsx
+++ b/src/core/Icon/index.stories.tsx
@@ -323,7 +323,7 @@ export const IconBank = IconBankTemplate.bind({});
 
 IconBank.parameters = {
   controls: {
-    exclude: ["sdsIcon", "sdsSize", "sdsType"],
+    exclude: ["sdsIcon", "sdsSize", "sdsType", "shade"],
   },
 };