💄 Cleanup SVG, add support for color override, storybook color controls

src/molecules/Waves/WaveStatic.tsx

@@ -3,7 +3,11 @@ 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
 
-export const WaveStatic: FC = () => {
+interface WaveStaticProps {
+  gradientColors?: string[];
+}
+
+export const WaveStatic: FC<WaveStaticProps> = ({ gradientColors }) => {
   const [viewBox, setViewBox] = useState(
     `0 0 ${window.innerWidth} ${window.innerHeight - 64}`
   );
@@ -29,7 +33,7 @@ export const WaveStatic: FC = () => {
       xmlns="http://www.w3.org/2000/svg"
     >
       {/* Render the WaveStaticSvg */}
-      <WaveStaticSvg viewBox={viewBox} />
+      <WaveStaticSvg viewBox={viewBox} gradientColors={gradientColors} />
 
       {/* Render the NoiseSvg with blend mode "multiply" */}
       <g style={{ filter: 'grayscale(1)', mixBlendMode: 'color-burn' }}>

src/molecules/Waves/Waves.stories.tsx

@@ -1,38 +1,36 @@
 import { Meta, StoryFn } from '@storybook/react';
 
-import { Waves, WavesProps } from 'src/molecules/Waves/Waves';
-
-const meta: Meta<typeof Waves> = {
+import { Waves } from 'src/molecules/Waves/Waves';
+export interface WaveStoryProps {
+  gradientColors?: string[];
+  color1: string;
+  color2: string;
+}
+const meta: Meta<WaveStoryProps> = {
   title: 'Molecules/Waves',
   component: Waves,
   argTypes: {
-    waveIntervalDist: {
-      control: { type: 'range', min: 1, max: 10, step: 0.25 },
-      name: 'Wave Interval Distance (rem)',
-    },
-    waveDelay: {
-      control: { type: 'range', min: 0, max: 5, step: 0.2 },
-      name: 'Wave Animation Delay (s)',
+    gradientColors: {
+      table: { disable: true }, // Hide gradientColors array from the controls
     },
-    numWaves: {
-      control: { type: 'range', min: 1, max: 30, step: 1 },
-      name: 'Number of Waves',
+    color1: {
+      control: { type: 'color' },
+      name: 'Top Color',
     },
-    heightFromBottom: {
-      control: { type: 'range', min: 0, max: 1200, step: 10 },
-      name: 'Wave container position (px)',
+    color2: {
+      control: { type: 'color' },
+      name: 'Bottom Color',
     },
   },
   args: {
-    waveIntervalDist: 3,
-    waveDelay: 0.75,
-    numWaves: 10,
-    heightFromBottom: 600,
+    color1: '#77d9dd', // Default for Gradient Color 1
+    color2: '#407577', // Default for Gradient Color 2
   },
 };
 
 export default meta;
 
-export const Primary: StoryFn<WavesProps> = (args) => {
-  return <Waves {...args} />;
+export const Primary: StoryFn<WaveStoryProps> = ({ color1, color2 }) => {
+  const gradientColors = [color1, color2]; // Combine individual colors into gradientColors array
+  return <Waves gradientColors={gradientColors} />;
 };

src/molecules/Waves/Waves.styles.ts

@@ -1,17 +1,10 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
-  --topGradientColor: #77d9dd;
-  --bottomGradientColor: #407577;
   height: calc(100vh - 64px);
   width: 100%;
   overflow: hidden;
   position: relative;
-  background: linear-gradient(
-    180deg,
-    var(--bottomGradientColor) 0%,
-    var(--topGradientColor) 100%
-  );
   > svg {
     position: absolute;
     z-index: 0;

src/molecules/Waves/Waves.test.tsx

@@ -12,6 +12,27 @@ test('renders expected amount of svgs', () => {
   expect(container.children[0].children[0].childNodes.length).toBe(2);
 });
 
+test('renders expected gradient colors', () => {
+  const gradientColors = ['#ff7f50', '#1e90ff'];
+  const { container } = render(<Waves gradientColors={gradientColors} />);
+
+  expect(container).toBeInTheDocument();
+
+  const svgElement = container.querySelector('svg');
+  expect(svgElement).toBeInTheDocument();
+
+  const linearGradient = svgElement?.querySelector('linearGradient');
+  expect(linearGradient).toBeInTheDocument();
+
+  const gradientStops = linearGradient?.querySelectorAll('stop');
+  expect(gradientStops?.length).toBe(gradientColors.length);
+
+  gradientColors.forEach((color, index) => {
+    const stop = gradientStops?.[index];
+    expect(stop).toHaveAttribute('stop-color', color);
+  });
+});
+
 test('resize actually resizes', async () => {
   const { container } = render(<Waves />);
   const randomWidth = faker.number.int({ min: 100, max: 1920 });

src/molecules/Waves/Waves.tsx

@@ -3,8 +3,12 @@ import { FC } from 'react';
 import { Container } from './Waves.styles';
 import { WaveStatic } from './WaveStatic';
 
-export const Waves: FC = () => (
+export interface WaveProps {
+  gradientColors?: string[];
+}
+
+export const Waves: FC<WaveProps> = ({ gradientColors }) => (
   <Container>
-    <WaveStatic />
+    <WaveStatic gradientColors={gradientColors} />
   </Container>
 );