From 25502436bded5c3192f241a8aa615c28be22d90d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oove@equinor.com>
Date: Mon, 9 Sep 2024 14:33:27 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9BScrim:=20use=20own=20useHideBodyScr?=
 =?UTF-8?q?oll=20instead=20of=20f-ui=20(#3619)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🐛Scrim: use own useHideBodyScroll instead of f-ui

* scrim: replace Dialog story with Sidesheet
---
 .../src/components/Scrim/Scrim.docs.mdx       |  2 +-
 .../src/components/Scrim/Scrim.stories.tsx    | 54 +++++--------------
 .../src/components/Scrim/Scrim.tsx            |  8 ++-
 3 files changed, 20 insertions(+), 44 deletions(-)

diff --git a/packages/eds-core-react/src/components/Scrim/Scrim.docs.mdx b/packages/eds-core-react/src/components/Scrim/Scrim.docs.mdx
index b77139d656..94f869a97a 100644
--- a/packages/eds-core-react/src/components/Scrim/Scrim.docs.mdx
+++ b/packages/eds-core-react/src/components/Scrim/Scrim.docs.mdx
@@ -52,6 +52,6 @@ const Demo = () => {
 }
 ```
 
-## Example: Scrim with Dialog
+## Example: Scrim with SideSheet
 
 <Canvas of={ComponentStories.Dismissable} />
diff --git a/packages/eds-core-react/src/components/Scrim/Scrim.stories.tsx b/packages/eds-core-react/src/components/Scrim/Scrim.stories.tsx
index f2609ec2fe..18f280228a 100644
--- a/packages/eds-core-react/src/components/Scrim/Scrim.stories.tsx
+++ b/packages/eds-core-react/src/components/Scrim/Scrim.stories.tsx
@@ -1,7 +1,6 @@
-import { Button, Scrim, ScrimProps, Dialog, Typography } from '../..'
+import { Button, Scrim, ScrimProps, SideSheet } from '../..'
 import { useState } from 'react'
 import { StoryFn, Meta } from '@storybook/react'
-import styled from 'styled-components'
 import { useArgs } from '@storybook/preview-api'
 import { Stack } from './../../../.storybook/components'
 import page from './Scrim.docs.mdx'
@@ -36,14 +35,6 @@ const meta: Meta<typeof Scrim> = {
 
 export default meta
 
-const Wrapper = styled.div`
-  display: grid;
-  column-gap: 16px;
-  grid-template-columns: repeat(2, auto);
-  justify-content: end;
-  justify-self: end;
-`
-
 export const Introduction: StoryFn<ScrimProps> = (args) => {
   const { open } = args
   const [, updateArgs] = useArgs()
@@ -66,39 +57,20 @@ export const Introduction: StoryFn<ScrimProps> = (args) => {
   )
 }
 
-//This story used to be imported from Dialog.stories.tsx, but there is currently an issue with importing stories from other places into mdx
-//see https://github.com/storybookjs/storybook/issues/22451
 export const Dismissable: StoryFn<ScrimProps> = () => {
   const [isOpen, setIsOpen] = useState(false)
-  const handleOpen = () => {
-    setIsOpen(true)
-  }
-  const handleClose = () => {
-    setIsOpen(false)
-  }
+
   return (
-    <>
-      <Button aria-haspopup="dialog" onClick={handleOpen}>
-        Trigger Dialog
-      </Button>
-      <Dialog open={isOpen} isDismissable onClose={handleClose}>
-        <Dialog.Header>
-          <Dialog.Title>Dismissable dialog</Dialog.Title>
-        </Dialog.Header>
-        <Dialog.CustomContent>
-          <Typography variant="body_short">
-            Closes dialog on click outside and escape key.
-          </Typography>
-        </Dialog.CustomContent>
-        <Dialog.Actions>
-          <Wrapper>
-            <Button onClick={handleClose}>OK</Button>
-            <Button variant="ghost" onClick={handleClose}>
-              Cancel
-            </Button>
-          </Wrapper>
-        </Dialog.Actions>
-      </Dialog>
-    </>
+    <div style={{ minHeight: '30vh' }}>
+      <Button onClick={() => setIsOpen(true)}>Open SideSheet</Button>
+      <Scrim open={isOpen} onClose={() => setIsOpen(false)} isDismissable>
+        <SideSheet open={isOpen} onClose={() => setIsOpen(false)}>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora,
+          esse labore. Asperiores tempore ex amet veniam consequatur dolorum
+          perferendis, nihil non, culpa, modi sed nisi. Repellat, labore? Error,
+          accusantium sed?
+        </SideSheet>
+      </Scrim>
+    </div>
   )
 }
diff --git a/packages/eds-core-react/src/components/Scrim/Scrim.tsx b/packages/eds-core-react/src/components/Scrim/Scrim.tsx
index d0e1109dac..c262b4e56f 100644
--- a/packages/eds-core-react/src/components/Scrim/Scrim.tsx
+++ b/packages/eds-core-react/src/components/Scrim/Scrim.tsx
@@ -1,7 +1,11 @@
 import { forwardRef, MouseEvent, HTMLAttributes, useRef, useMemo } from 'react'
 import styled from 'styled-components'
 import { scrim as tokens } from './Scrim.tokens'
-import { useGlobalKeyPress, mergeRefs } from '@equinor/eds-utils'
+import {
+  useGlobalKeyPress,
+  mergeRefs,
+  useHideBodyScroll,
+} from '@equinor/eds-utils'
 import { FloatingOverlay } from '@floating-ui/react'
 
 const { background } = tokens
@@ -34,6 +38,7 @@ export const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(
   ref,
 ) {
   const scrimRef = useRef<HTMLDivElement>(null)
+  useHideBodyScroll(open)
 
   const combinedScrimRef = useMemo(
     () => mergeRefs<HTMLDivElement>(scrimRef, ref),
@@ -60,7 +65,6 @@ export const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(
 
   return (
     <StyledScrim
-      lockScroll
       onMouseDown={handleMouseClose}
       ref={combinedScrimRef}
       {...rest}