Feature/wsdev 4178 wide image

CHANGELOG.mdx

@@ -33,6 +33,7 @@ Prefix the change with one of these keywords:
 - Icon Cards: fixed width and height for icons inside container
 - Pagination: active text changed to red
 - Nav: space between logo and site title
+- Wide Image: opacity range set at 60-80
 
 ### Deprecated
 

lib/components/WideImage/WideImage.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { rdsMaxWidth, rdsOpacity } from '../../utils/optionClasses'
+import { rdsMaxWidth } from '../../utils/optionClasses'
 import { WideImageSignup } from './WideImageSignup'
 
-export const styles = {
+const styles = {
   baseBg: `relative flex items-center justify-center mx-auto px-8 mb-6 overflow-hidden md:px-16 md:mb-12 rounded-xl not-contained not-prose`,
   lightBg: `text-cu-black-800 py-20 bg-cu-black-50`,
   darkBg: `text-white py-20 bg-cu-black-900`,
@@ -13,13 +13,15 @@ export const styles = {
   headerTwo: `font-semibold text-2xl md:text-3xl lg:text-4xl lg:leading-[3rem] max-w-5xl`,
 }
 
+const opacityValues = Array.from({ length: 21 }, (_, index) => 60 + index)
+
 export interface WideImageProps {
   children?: React.ReactNode
   title?: string
   image?: string
   headerType?: 'h1' | 'h2'
   maxWidth?: 'full' | '5xl' | '7xl' | 'max'
-  opacity?: 40 | 50 | 60 | 70 | 80
+  opacity?: (typeof opacityValues)[number]
   focalPointX?: string
   focalPointY?: string
   isType?: 'light' | 'dark' | 'image'
@@ -41,6 +43,10 @@ export const WideImageWrapper = ({
     backgroundPosition: `${focalPointX}% ${focalPointY}%`,
   }
 
+  const opacityStyle = {
+    opacity: `0.${opacity}`,
+  }
+
   let hasImageStyles
   hasImageStyles = isType === 'dark' ? styles.darkBg : styles.lightBg
 
@@ -53,7 +59,7 @@ export const WideImageWrapper = ({
       style={inlineStyle}
       className={`cu-wideimage cu-container ${styles.baseBg} ${rdsMaxWidth[maxWidth]} ${hasImageStyles}`}
     >
-      {image && <div className={`${styles.overlay} ${rdsOpacity[opacity]}`}></div>}
+      {image && <div className={`${styles.overlay}`} style={opacityStyle}></div>}
 
       <div className={`${styles.content} cu-wideimage-content cu-wideimage-${isType}`}>
         {headerType === 'h1' && <h1 className={`${styles.headerOne}`}>{title}</h1>}

lib/utils/optionClasses.tsx

@@ -40,6 +40,7 @@ export const rdsBgColor = {
   'dark-grey': 'bg-cu-black-600',
 }
 
+// TODO: can this go buh bye?
 export const rdsOpacity = {
   10: 'opacity-10',
   20: 'opacity-20',