Enable custom Pillow SVG fill

HedvigInsurance · Sep 12, 2024 · d5f7488 · d5f7488
1 parent f836402
commit d5f7488
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 20 deletions.
diff --git a/apps/store/src/components/Pillow/Pillow.tsx b/apps/store/src/components/Pillow/Pillow.tsx
@@ -1,9 +1,9 @@
 import Image from 'next/image'
-import { type ComponentProps, memo } from 'react'
-import { BasePillow } from 'ui'
+import { memo } from 'react'
+import { BasePillow, type PillowProps } from 'ui'
 import { getImgSrc } from '@/services/storyblok/Storyblok.helpers'
 
-export const Pillow = memo(({ alt, src, ...props }: ComponentProps<typeof BasePillow>) => {
+export const Pillow = memo(({ alt, src, ...props }: PillowProps) => {
   return (
     <BasePillow shouldFallback={!src} {...props}>
       <Image

diff --git a/packages/ui/src/components/BasePillow/BasePillow.tsx b/packages/ui/src/components/BasePillow/BasePillow.tsx
@@ -1,7 +1,6 @@
-
 import { Slot } from '@radix-ui/react-slot'
 import clsx from 'clsx'
-import { type PropsWithChildren } from 'react'
+import { type ComponentProps, type PropsWithChildren } from 'react'
 import { type Level } from '../../theme'
 import { pillowVariants } from './BasePillow.css'
 export { pillowSize } from './BasePillow.css'
@@ -16,37 +15,43 @@ type PillowSize =
   | 'xlarge'
   | 'xxlarge'
 
-type BaseProps = {
-  size?: PillowSize | Partial<Record<Level | '_', PillowSize>>
+type BasePillowProps = {
   src?: string
   alt?: string | null
   priority?: boolean
   className?: string
 }
 
-type Props = BaseProps & {
-  shouldFallback?: boolean
+type SharedProps = {
+  size?: PillowSize | Partial<Record<Level | '_', PillowSize>>
 }
 
-export const BasePillow = ({
-  size = 'medium',
-  className,
-  children,
-  shouldFallback,
-  ...props
-}: PropsWithChildren<Props>) => {
-  if (shouldFallback) {
+export type PillowProps = SharedProps & BasePillowProps
+
+type BasePillowComponentProps = { shouldFallback: false } & PropsWithChildren<BasePillowProps>
+type SVGComponentProps = { shouldFallback: true } & ComponentProps<'svg'>
+
+type Props = SharedProps & (BasePillowComponentProps | SVGComponentProps)
+
+export const BasePillow = ({ size = 'medium', className, children, ...props }: Props) => {
+  // Need to check with `prop.shouldFallback` for the type guard to work
+  if (props.shouldFallback === true) {
+    // Omit `shouldFallback` from props as it's not a native attribute
+    // `fill` is only available when  `shouldFallback` is true
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { shouldFallback: _, fill = '#F5F5F5', ...svgProps } = props
+
     return (
       <svg
-        {...props}
         className={clsx(pillowVariants(size), className)}
         viewBox="0 0 480 480"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
+        {...svgProps}
       >
         <path
           d="M3.79613e-05 240C2.56137e-05 428.992 101.382 480 240.298 480C379.214 480 480 432.012 480 240C480 47.9875 396.228 -5.43757e-05 240.298 -4.198e-05C84.3668 -6.01019e-05 5.03089e-05 51.0075 3.79613e-05 240Z"
-          fill="#F5F5F5"
+          fill={fill}
         />
       </svg>
     )

diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -1,5 +1,5 @@
 export { Alert } from './components/Alert/Alert'
-export { BasePillow, pillowSize } from './components/BasePillow/BasePillow'
+export { BasePillow, pillowSize, type PillowProps } from './components/BasePillow/BasePillow'
 export { HedvigLogo } from './components/HedvigLogo/HedvigLogo'
 export { HedvigSymbol } from './components/HedvigSymbol/HedvigSymbol'
 export { Space } from './components/Space'