feedback fix

packages/core/admin/admin/src/components/UpgradePlanModal /UpgradePlanModal.stories.mdx

@@ -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} />

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 { setHexOpacity, useLockScroll } from '@strapi/helper-plugin';
-import BigArrow from "../../assets/images/upgrade-details.png";
+import AirBalloon from '../../assets/images/hot-air-balloon.png';
-import setOpacity from '../../utils/setOpacity';
+import BigArrow from '../../assets/images/upgrade-details.png';
-import useLockScroll from '../../utils/useLockScroll';
 
-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>
   );
 };

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';

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;

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]);