From e823873d9ab38621da86e9c738afdce84b3a57cc Mon Sep 17 00:00:00 2001
From: ronronscelestes <julie.plantey@gmail.com>
Date: Mon, 6 Sep 2021 14:06:01 +0200
Subject: [PATCH] feedback fix

---
 .../UpgradePlanModal.stories.mdx              | 33 -------------------
 .../src/components/UpgradePlanModal /index.js | 17 +++++-----
 packages/core/helper-plugin/lib/src/index.js  |  4 +++
 .../lib/src/utils/setHexOpacity.js}           |  4 +--
 .../lib}/src/utils/useLockScroll.js           |  4 +--
 5 files changed, 16 insertions(+), 46 deletions(-)
 delete mode 100644 packages/core/admin/admin/src/components/UpgradePlanModal /UpgradePlanModal.stories.mdx
 rename packages/core/{admin/admin/src/utils/setOpacity.js => helper-plugin/lib/src/utils/setHexOpacity.js} (53%)
 rename packages/core/{admin/admin => helper-plugin/lib}/src/utils/useLockScroll.js (93%)

diff --git a/packages/core/admin/admin/src/components/UpgradePlanModal /UpgradePlanModal.stories.mdx b/packages/core/admin/admin/src/components/UpgradePlanModal /UpgradePlanModal.stories.mdx
deleted file mode 100644
index fe524fc9eb..0000000000
--- a/packages/core/admin/admin/src/components/UpgradePlanModal /UpgradePlanModal.stories.mdx	
+++ /dev/null
@@ -1,33 +0,0 @@
-<!--- UpgradePlanModal.stories.mdx --->
-
-import { useState } from 'react';
-import { ArgsTable, Meta, Canvas, Story } from '@storybook/addon-docs';
-import { Button } from '@strapi/parts/Button';
-import UpgradePlanModal from './index';
-
-<Meta title="components/UpgradePlanModal" />
-
-# UpgradePlanModal
-
-TODO
-
-## Usage
-
-<Canvas>
-  <Story name="base">
-    {() => {
-      const [isVisible, setIsVisible] = useState(false);
-      const handleToggle = () => setIsVisible(prev => !prev);
-      return (
-        <>
-          <Button onClick={handleToggle}>Click me</Button>
-          <UpgradePlanModal isOpen={isVisible} onClose={handleToggle} />
-        </>
-      );
-    }}
-  </Story>
-</Canvas>
-
-### Props
-
-<ArgsTable of={UpgradePlanModal} />
diff --git a/packages/core/admin/admin/src/components/UpgradePlanModal /index.js b/packages/core/admin/admin/src/components/UpgradePlanModal /index.js
index d506fc4389..54da903ed4 100644
--- a/packages/core/admin/admin/src/components/UpgradePlanModal /index.js	
+++ b/packages/core/admin/admin/src/components/UpgradePlanModal /index.js	
@@ -12,16 +12,15 @@ import { Text, H1 } from '@strapi/parts/Text';
 import { Stack } from '@strapi/parts/Stack';
 import ExternalLink from '@strapi/icons/ExternalLink';
 import CloseAlertIcon from '@strapi/icons/CloseAlertIcon';
-import AirBalloon from "../../assets/images/hot-air-balloon.png";
-import BigArrow from "../../assets/images/upgrade-details.png";
-import setOpacity from '../../utils/setOpacity';
-import useLockScroll from '../../utils/useLockScroll';
+import { setHexOpacity, useLockScroll } from '@strapi/helper-plugin';
+import AirBalloon from '../../assets/images/hot-air-balloon.png';
+import BigArrow from '../../assets/images/upgrade-details.png';
 
-const UpragdeWrapper = styled.div`
+const UpgradeWrapper = styled.div`
   position: absolute;
   z-index: 3;
   inset: 0;
-  background: ${({ theme }) => setOpacity(theme.colors.neutral800, 0.2)};
+  background: ${({ theme }) => setHexOpacity(theme.colors.neutral800, 0.2)};
   padding: 0 ${({ theme }) => theme.spaces[8]};
 `;
 
@@ -50,7 +49,7 @@ const UpgradeContainer = styled(Row)`
 `;
 
 const TextBold = styled(Text)`
-  font-weight: bold;
+  font-weight: 700;
 `;
 
 const StackFlexStart = styled(Stack)`
@@ -75,7 +74,7 @@ const UpgradePlanModal = ({ onClose, isOpen }) => {
 
   return (
     <Portal>
-      <UpragdeWrapper>
+      <UpgradeWrapper>
         <FocusTrap onClose={onClose}>
           <UpgradeContainer aria-labelledby="upgrade-plan" background="neutral0" hasRadius>
             <img src={AirBalloon} alt="air-balloon" />
@@ -114,7 +113,7 @@ const UpgradePlanModal = ({ onClose, isOpen }) => {
             <img src={BigArrow} alt="upgrade-arrow" />
           </UpgradeContainer>
         </FocusTrap>
-      </UpragdeWrapper>
+      </UpgradeWrapper>
     </Portal>
   );
 };
diff --git a/packages/core/helper-plugin/lib/src/index.js b/packages/core/helper-plugin/lib/src/index.js
index 3ec222f021..e80c774821 100644
--- a/packages/core/helper-plugin/lib/src/index.js
+++ b/packages/core/helper-plugin/lib/src/index.js
@@ -164,6 +164,10 @@ export { default as prefixPluginTranslations } from './old/utils/prefixPluginTra
 export { default as pxToRem } from './utils/pxToRem';
 export { default as to } from './utils/await-to-js';
 
+// NEW UTILS
+export { default as setHexOpacity } from './utils/setHexOpacity';
+export { default as useLockScroll } from './utils/useLockScroll';
+
 // SVGS
 export { default as LayoutIcon } from './old/svgs/Layout';
 export { default as ClearIcon } from './old/svgs/Clear';
diff --git a/packages/core/admin/admin/src/utils/setOpacity.js b/packages/core/helper-plugin/lib/src/utils/setHexOpacity.js
similarity index 53%
rename from packages/core/admin/admin/src/utils/setOpacity.js
rename to packages/core/helper-plugin/lib/src/utils/setHexOpacity.js
index ae03916ae0..ee6d647d5e 100644
--- a/packages/core/admin/admin/src/utils/setOpacity.js
+++ b/packages/core/helper-plugin/lib/src/utils/setHexOpacity.js
@@ -1,6 +1,6 @@
-const setOpacity = (hex, alpha) =>
+const setHexOpacity = (hex, alpha) =>
   `${hex}${Math.floor(alpha * 255)
     .toString(16)
     .padStart(2, 0)}`;
 
-export default setOpacity;
+export default setHexOpacity;
diff --git a/packages/core/admin/admin/src/utils/useLockScroll.js b/packages/core/helper-plugin/lib/src/utils/useLockScroll.js
similarity index 93%
rename from packages/core/admin/admin/src/utils/useLockScroll.js
rename to packages/core/helper-plugin/lib/src/utils/useLockScroll.js
index 3e7aaeeddb..cb736b3a83 100644
--- a/packages/core/admin/admin/src/utils/useLockScroll.js
+++ b/packages/core/helper-plugin/lib/src/utils/useLockScroll.js
@@ -5,8 +5,8 @@ const useLockScroll = lockScroll => {
     if (lockScroll) {
       document.body.classList.add('lock-body-scroll');
     }
-    
-return () => {
+
+    return () => {
       document.body.classList.remove('lock-body-scroll');
     };
   }, [lockScroll]);