Merge pull request #1061 from equinor/fix/waves-aspect-ratio

fix/waves-aspect-ratio

Author: mariush2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-component-lib",
-  "version": "9.8.0",
+  "version": "9.8.1",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/molecules/Waves/WaveStatic.tsx

@@ -1,29 +1,20 @@
-import { FC, useEffect, useState } from 'react';
+import { FC } from 'react';
 
 import { NoiseSvg } from './NoiseSvg'; // Assuming it's another SVG file
 import { WaveStaticSvg } from './WaveStaticSvg'; // Assuming it's an SVG file
 
 interface WaveStaticProps {
+  width: number;
+  height: number;
   gradientColors?: string[];
 }
 
-export const WaveStatic: FC<WaveStaticProps> = ({ gradientColors }) => {
-  const [viewBox, setViewBox] = useState(
-    `0 0 ${window.innerWidth} ${window.innerHeight - 64}`
-  );
-
-  useEffect(() => {
-    const resizeHandler = (event: Event) => {
-      const target = event.target as Window;
-      setViewBox(`0 0 ${target.innerWidth} ${target.innerHeight - 64}`);
-    };
-
-    window.addEventListener('resize', resizeHandler);
-
-    return () => {
-      window.removeEventListener('resize', resizeHandler);
-    };
-  }, []);
+export const WaveStatic: FC<WaveStaticProps> = ({
+  width,
+  height,
+  gradientColors,
+}) => {
+  const viewBox = `0 0 ${width} ${height}`;
 
   return (
     <svg

src/molecules/Waves/Waves.styles.ts

@@ -1,10 +1,11 @@
+import { motion } from 'framer-motion';
 import styled from 'styled-components';
 
-export const Container = styled.div`
+export const Container = styled(motion.div)`
   height: calc(100vh - 64px);
   width: 100%;
   overflow: hidden;
-  position: relative;
+  position: absolute;
   > svg {
     position: absolute;
     z-index: 0;

src/molecules/Waves/Waves.tsx

@@ -1,14 +1,58 @@
-import { FC } from 'react';
+import { FC, useEffect, useRef, useState } from 'react';
 
 import { Container } from './Waves.styles';
 import { WaveStatic } from './WaveStatic';
 
+import { useScroll } from 'framer-motion';
+
 export interface WaveProps {
   gradientColors?: string[];
 }
 
-export const Waves: FC<WaveProps> = ({ gradientColors }) => (
-  <Container>
-    <WaveStatic gradientColors={gradientColors} />
-  </Container>
-);
+export const Waves: FC<WaveProps> = ({ gradientColors }) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [width, setWidth] = useState(containerRef.current?.clientWidth ?? 0);
+  const [height, setHeight] = useState(containerRef.current?.clientHeight ?? 0);
+  const { scrollY } = useScroll({
+    container: { current: document.getElementById('content') },
+  });
+
+  const handleSetRef = (element: HTMLDivElement | null) => {
+    containerRef.current = element;
+
+    if (!containerRef.current) return;
+
+    setWidth(containerRef.current.clientWidth);
+    setHeight(containerRef.current.clientHeight);
+  };
+
+  useEffect(() => {
+    const resizeHandler = () => {
+      if (!containerRef.current) return;
+
+      setWidth(containerRef.current.clientWidth);
+      setHeight(containerRef.current.clientHeight);
+    };
+
+    window.addEventListener('resize', resizeHandler);
+
+    return () => {
+      window.removeEventListener('resize', resizeHandler);
+    };
+  }, []);
+
+  return (
+    <Container
+      ref={handleSetRef}
+      style={{
+        top: scrollY,
+      }}
+    >
+      <WaveStatic
+        height={height}
+        width={width}
+        gradientColors={gradientColors}
+      />
+    </Container>
+  );
+};