Separate out types to make it more explicit

Author: judahtanthony

packages/gamut-labs/src/landingPage/Feature.tsx

@@ -36,13 +36,33 @@ const FeatureBlock = styled.div`
   }
 `;
 
-type FeaturedMediaProps = {
-  featuresMedia?: 'image' | 'icon' | 'stat' | 'none';
-  imgSrc?: string;
-  imgAlt?: string;
-  statText?: string;
+type FeaturedImageProps = {
+  featuresMedia: 'image';
+  imgSrc: string;
+  imgAlt: string;
 };
 
+type FeaturedIconProps = {
+  featuresMedia: 'icon';
+  imgSrc: string;
+  imgAlt: string;
+};
+
+type FeaturedStatProps = {
+  featuresMedia: 'stat';
+  statText: string;
+};
+
+type FeaturedNoMediaProps = {
+  featuresMedia: 'none';
+};
+
+type FeaturedMediaProps =
+  | FeaturedImageProps
+  | FeaturedIconProps
+  | FeaturedStatProps
+  | FeaturedNoMediaProps;
+
 const FeaturedMedia: React.FC<FeaturedMediaProps> = ({
   featuresMedia = 'none',
   ...rest

packages/gamut-labs/src/landingPage/PageFeatures.tsx

@@ -38,8 +38,8 @@ export type PageFeaturesProps = BaseProps & {
 };
 
 const rowRenderEach = (
-  items: PageFeaturesProps['features'],
-  itemRenderer: (item: any) => ReactNode
+  items: FeatureProps[],
+  itemRenderer: (item: FeatureProps) => ReactNode
 ): ReactNode => (
   <FlexContainer nowrap column>
     {items.map(itemRenderer)}
@@ -48,8 +48,8 @@ const rowRenderEach = (
 
 const gridRenderEach = (
   maxCols: NonNullable<PageFeaturesProps['maxCols']>,
-  items: any[],
-  itemRenderer: (item: any) => ReactNode
+  items: FeatureProps[],
+  itemRenderer: (item: FeatureProps) => ReactNode
 ): ReactNode => {
   const size = {
     xs: 12,
@@ -71,8 +71,8 @@ const gridRenderEach = (
 
 const renderEach = (
   maxCols: PageFeaturesProps['maxCols'],
-  items: any[],
-  itemRenderer: (item: any) => ReactNode
+  items: FeatureProps[],
+  itemRenderer: (item: FeatureProps) => ReactNode
 ): ReactNode => {
   if (maxCols === undefined) {
     return rowRenderEach(items, itemRenderer);
@@ -104,15 +104,20 @@ export const PageFeatures: React.FC<PageFeaturesProps> = ({
         </CTA>
       )}
     </div>
-    {renderEach(maxCols, features, (feature) => (
-      <Feature
-        key={feature.title}
-        {...feature}
-        featuresMedia={
-          featuresMedia ? featuresMedia : isIcon ? 'icon' : 'image'
-        }
-        onAnchorClick={onAnchorClick}
-      />
-    ))}
+    {renderEach(
+      maxCols,
+      features.map((feature) => ({
+        ...feature,
+        featuresMedia: featuresMedia
+          ? featuresMedia
+          : isIcon
+          ? 'icon'
+          : 'image',
+        onAnchorClick,
+      })) as FeatureProps[],
+      (feature) => (
+        <Feature key={feature.title} {...feature} />
+      )
+    )}
   </div>
 );

packages/gamut-labs/src/landingPage/__tests__/FeaturesSection-test.tsx

@@ -66,14 +66,10 @@ describe('PageFeatures', () => {
     const wrapper = renderComponent({
       features: [
         {
-          imgSrc: 'https://content.codecademy.com/courses/free/boba.svg',
-          imgAlt: 'Codey boba tea',
           title: 'Software Engineer',
           desc: '**Software Engineer**. Example link [here](#).',
         },
         {
-          imgSrc: 'https://content.codecademy.com/courses/free/boba.svg',
-          imgAlt: 'Codey boba tea',
           title: 'Data Scientist',
           desc: '**Data Scientist**. Example link [here](#).',
         },