🩹 Make FieldSelector static waves work on any screen ratio

equinor · Jan 16, 2025 · a07e2d3 · a07e2d3
1 parent 3ab2094
commit a07e2d3
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 93 deletions.
diff --git a/src/molecules/Waves/NoiseSvg.tsx b/src/molecules/Waves/NoiseSvg.tsx
@@ -1,7 +1,16 @@
 import { FC } from 'react';
 
-export const NoiseSvg: FC = () => (
-  <svg viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
+interface NoiseSvgProps {
+  viewBox: string;
+}
+
+export const NoiseSvg: FC<NoiseSvgProps> = ({ viewBox }) => (
+  <svg
+    width="100%"
+    height="100%"
+    viewBox={viewBox}
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <filter id="noiseFilter">
       <feTurbulence
         type="fractalNoise"

diff --git a/src/molecules/Waves/WaveStatic.tsx b/src/molecules/Waves/WaveStatic.tsx
@@ -1,21 +1,41 @@
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 
 import { NoiseSvg } from './NoiseSvg'; // Assuming it's another SVG file
-import WaveStaticSvg from './WaveStaticSvg'; // Assuming it's an SVG file
+import { WaveStaticSvg } from './WaveStaticSvg'; // Assuming it's an SVG file
 
-export const WaveStatic: FC = () => (
-  <svg
-    width="1920"
-    height="1080"
-    viewBox="0 0 1920 1080"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    {/* Render the WaveStaticSvg */}
-    <WaveStaticSvg />
+export const WaveStatic: FC = () => {
+  const [viewBox, setViewBox] = useState(
+    `0 0 ${window.innerWidth} ${window.innerHeight - 64}`
+  );
 
-    {/* Render the NoiseSvg with blend mode "multiply" */}
-    <g style={{ filter: 'grayscale(1)', mixBlendMode: 'color-burn' }}>
-      <NoiseSvg />
-    </g>
-  </svg>
-);
+  useEffect(() => {
+    const resizeHandler = (event: Event) => {
+      const target = event.target as Window;
+      console.log(target);
+      setViewBox(`0 0 ${target.innerWidth} ${target.innerHeight - 64}`);
+    };
+
+    window.addEventListener('resize', resizeHandler);
+
+    return () => {
+      window.removeEventListener('resize', resizeHandler);
+    };
+  }, []);
+
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox={viewBox}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {/* Render the WaveStaticSvg */}
+      <WaveStaticSvg viewBox={viewBox} />
+
+      {/* Render the NoiseSvg with blend mode "multiply" */}
+      <g style={{ filter: 'grayscale(1)', mixBlendMode: 'color-burn' }}>
+        <NoiseSvg viewBox={viewBox} />
+      </g>
+    </svg>
+  );
+};
diff --git a/src/molecules/Waves/WaveStaticSvg.tsx b/src/molecules/Waves/WaveStaticSvg.tsx
@@ -1,11 +1,17 @@
-import React from 'react';
+import { FC } from 'react';
+
+interface WaveStaticSvgProps {
+  viewBox: string;
+}
+
+export const WaveStaticSvg: FC<WaveStaticSvgProps> = ({ viewBox }) => {
+  const [, , width, height] = viewBox.split(' ');
 
-const WaveStaticSvg: React.FC = () => {
   return (
     <svg
-      width="1920"
-      height="1080"
-      viewBox="0 0 1920 1080"
+      width="100%"
+      height="100%"
+      viewBox={viewBox}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -15,13 +21,16 @@ const WaveStaticSvg: React.FC = () => {
         maskUnits="userSpaceOnUse"
         x="0"
         y="0"
-        width="1920"
-        height="1080"
+        width={width}
+        height={height}
       >
-        <path d="M1920 0H0V1080H1920V0Z" fill="white" />
+        <path d={`M${width} 0H0V${height}H${width}V0Z`} fill="white" />
       </mask>
       <g mask="url(#mask-background)">
-        <path d="M1920 0H0V1080H1920V0Z" fill="url(#gradient-background)" />
+        <path
+          d={`M${width} 0H0V${height}H${width}V0Z`}
+          fill="url(#gradient-background)"
+        />
         <g style={{ mixBlendMode: 'soft-light' }}>
           <path
             d="M-58.7036 502.048C-82.8692 497.732 -90.9265 511.552 -118.933 506.55L-212.108 1028.27L2091.44 1439.67L2184.62 917.943C2156.61 912.941 2153.84 897.187 2129.67 892.871C2105.51 888.555 2097.45 902.375 2069.44 897.373C2041.44 892.371 2038.66 876.617 2014.49 872.301C1990.33 867.986 1982.27 881.805 1954.26 876.804C1926.26 871.802 1923.48 856.047 1899.32 851.732C1875.15 847.416 1867.09 861.236 1839.09 856.234C1811.08 851.232 1808.3 835.478 1784.14 831.162C1759.97 826.846 1751.92 840.666 1723.91 835.664C1695.9 830.663 1693.13 814.908 1668.96 810.592C1644.8 806.277 1636.74 820.096 1608.73 815.095C1580.72 810.093 1577.95 794.339 1553.78 790.023C1529.62 785.707 1521.56 799.527 1493.55 794.525C1465.55 789.523 1462.77 773.769 1438.61 769.453C1414.44 765.137 1406.38 778.957 1378.38 773.955C1350.37 768.954 1347.59 753.199 1323.43 748.884C1299.26 744.568 1291.21 758.387 1263.2 753.386C1235.19 748.384 1232.42 732.63 1208.25 728.314C1184.08 723.998 1176.03 737.818 1148.02 732.816C1120.01 727.814 1117.24 712.06 1093.07 707.744C1068.91 703.429 1060.85 717.248 1032.84 712.246C1004.84 707.245 1002.06 691.49 977.895 687.175C953.73 682.859 945.672 696.679 917.666 691.677C889.659 686.675 886.883 670.921 862.718 666.605C838.552 662.289 830.495 676.109 802.488 671.107C774.481 666.106 771.706 650.351 747.54 646.035C723.374 641.72 715.317 655.539 687.31 650.538C659.304 645.536 656.528 629.782 632.362 625.466C608.197 621.15 600.139 634.97 572.133 629.968C544.126 624.966 541.35 609.212 517.185 604.896C493.019 600.58 484.962 614.4 456.955 609.398C428.948 604.397 426.173 588.642 402.007 584.327C377.841 580.011 369.784 593.83 341.777 588.829C313.771 583.827 310.995 568.073 286.829 563.757C262.664 559.441 254.606 573.261 226.6 568.259C198.593 563.257 195.817 547.503 171.652 543.187C147.486 538.872 139.429 552.691 111.422 547.689C83.4154 542.688 80.6397 526.933 56.4741 522.618C32.3085 518.302 24.2512 532.122 -3.75555 527.12C-31.7622 522.118 -34.5379 506.364 -58.7036 502.048Z"
@@ -89,7 +98,7 @@ const WaveStaticSvg: React.FC = () => {
           x1="960"
           y1="0"
           x2="960"
-          y2="1080"
+          y2={height}
           gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#407577" />
@@ -209,5 +218,3 @@ const WaveStaticSvg: React.FC = () => {
     </svg>
   );
 };
-
-export default WaveStaticSvg;
diff --git a/src/molecules/Waves/Waves.styles.ts b/src/molecules/Waves/Waves.styles.ts
@@ -14,7 +14,8 @@ export const Container = styled.div`
   );
   > svg {
     position: absolute;
-
     z-index: 0;
+    height: 100%;
+    width: 100%;
   }
 `;
diff --git a/src/organisms/FieldSelector/FieldSelector.stories.tsx b/src/organisms/FieldSelector/FieldSelector.stories.tsx
@@ -1,7 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
+import { MemoryRouter } from 'react-router';
 
 import { Button, Icon } from '@equinor/eds-core-react';
 import { info_circle } from '@equinor/eds-icons';
+import { actions } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/react';
 
 import { FieldSelector } from './FieldSelector';
@@ -32,7 +34,7 @@ const equinorFields = [
   'Martin Linge',
   'Aasta Hansteeen',
   'Åsgard',
-];
+] as const;
 
 const meta: Meta<typeof FieldSelector> = {
   title: 'Organisms/FieldSelector',
@@ -82,7 +84,7 @@ export const Primary: StoryFn = (args) => {
   };
 
   const onChangedField = () => {
-    console.log('Changed to field: ', field.current);
+    actions('onChangedField').onChangedField('Ran cnChange field');
     field.current = undefined;
   };
 
@@ -98,28 +100,24 @@ export const Primary: StoryFn = (args) => {
   }, []);
 
   return (
-    <StoryContainer>
-      <TopBar
-        onHeaderClick={function (): void {
-          throw new Error('Function not implemented.');
-        }}
-        applicationIcon="acquire"
-        applicationName="App"
-      >
-        <TopBar.Actions>
-          <Button variant="ghost_icon">
-            <Icon data={info_circle} />
-          </Button>
-        </TopBar.Actions>
-      </TopBar>
-      <FieldSelector
-        showAccessITLink={args.showAccessITLink as boolean}
-        setField={setField}
-        fields={fields}
-        isLoading={isLoading}
-        onChangedField={onChangedField}
-        finishedText={args.finishedText as string}
-      />
-    </StoryContainer>
+    <MemoryRouter>
+      <StoryContainer>
+        <TopBar applicationIcon="acquire" applicationName="App">
+          <TopBar.Actions>
+            <Button variant="ghost_icon">
+              <Icon data={info_circle} />
+            </Button>
+          </TopBar.Actions>
+        </TopBar>
+        <FieldSelector
+          showAccessITLink={args.showAccessITLink as boolean}
+          setField={setField}
+          fields={fields}
+          isLoading={isLoading}
+          onChangedField={onChangedField}
+          finishedText={args.finishedText as string}
+        />
+      </StoryContainer>
+    </MemoryRouter>
   );
 };
diff --git a/src/organisms/TopBar/TopBar.tsx b/src/organisms/TopBar/TopBar.tsx
@@ -48,43 +48,41 @@ export const TopBar = forwardRef<HTMLDivElement, TopBarType>(
       showAccessITLink,
     },
     ref
-  ) => {
-    return (
-      <Bar ref={ref}>
-        <AppAndFieldContainer id={id}>
-          <AppIdentifier tabIndex={0} to={headerLink || '/'}>
-            <ApplicationIcon name={applicationIcon} size={32} withHover />
-            <AppName
-              group="navigation"
-              variant="menu_title"
-              $capitalize={capitalize}
-            >
-              {capitalize ? applicationName.toLowerCase() : applicationName}
-            </AppName>
-          </AppIdentifier>
-          {availableFields && onSelectField && (
-            <FieldMenu
-              availableFields={availableFields}
-              onSelect={onSelectField}
-              currentField={currentField}
-              showAccessITLink={showAccessITLink}
-            />
-          )}
-          {isFetching && <CircularProgress size={16} />}
-        </AppAndFieldContainer>
-        {(environment === EnvironmentType.DEVELOP ||
-          environment === EnvironmentType.STAGING ||
-          environment === EnvironmentType.LOCALHOST) && (
-          <EnvironmentTag $environmentType={environment}>
-            <Typography group="heading" variant="h5">
-              {environment}
-            </Typography>
-          </EnvironmentTag>
+  ) => (
+    <Bar ref={ref}>
+      <AppAndFieldContainer id={id}>
+        <AppIdentifier tabIndex={0} to={headerLink || '/'}>
+          <ApplicationIcon name={applicationIcon} size={32} withHover />
+          <AppName
+            group="navigation"
+            variant="menu_title"
+            $capitalize={capitalize}
+          >
+            {capitalize ? applicationName.toLowerCase() : applicationName}
+          </AppName>
+        </AppIdentifier>
+        {availableFields && onSelectField && (
+          <FieldMenu
+            availableFields={availableFields}
+            onSelect={onSelectField}
+            currentField={currentField}
+            showAccessITLink={showAccessITLink}
+          />
         )}
-        {children}
-      </Bar>
-    );
-  }
+        {isFetching && <CircularProgress size={16} />}
+      </AppAndFieldContainer>
+      {(environment === EnvironmentType.DEVELOP ||
+        environment === EnvironmentType.STAGING ||
+        environment === EnvironmentType.LOCALHOST) && (
+        <EnvironmentTag $environmentType={environment}>
+          <Typography group="heading" variant="h5">
+            {environment}
+          </Typography>
+        </EnvironmentTag>
+      )}
+      {children}
+    </Bar>
+  )
 );
 
 TopBar.displayName = 'TopBar';