feat(PageFeatures): Allow the PageFeatures component to render in a grid

Codecademy · Jan 27, 2021 · 3733f91 · 3733f91
1 parent 9be9fff
commit 3733f91
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 37 deletions.
diff --git a/packages/gamut-labs/src/landingPage/Feature.tsx b/packages/gamut-labs/src/landingPage/Feature.tsx
@@ -36,13 +36,33 @@ const FeatureBlock = styled.div`
   }
 `;
 
-type FeaturedMediaProps = {
-  featuresMedia?: 'image' | 'icon' | 'stat' | 'none';
+type FeaturedImageProps = {
+  featuresMedia: 'image';
   imgSrc: string;
-  imgAlt?: string;
-  statText?: 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
@@ -65,6 +85,7 @@ const FeaturedMedia: React.FC<FeaturedMediaProps> = ({
         as="div"
         marginTop={48}
         fontSize={{ xs: 44, lg: 64 }}
+        fontWeight="title"
         data-testid="feature-stat"
       >
         {rest.statText}
@@ -99,7 +120,7 @@ export const Feature: React.FC<FeatureProps> = ({
       statText={statText}
     />
     {title && (
-      <Text as="h3" fontSize={{ xs: 22, lg: 26 }}>
+      <Text as="h3" fontSize={{ xs: 22, lg: 26 }} fontWeight="title">
         {title}
       </Text>
     )}

diff --git a/packages/gamut-labs/src/landingPage/PageFeatures.tsx b/packages/gamut-labs/src/landingPage/PageFeatures.tsx
@@ -1,7 +1,13 @@
-import { Container } from '@codecademy/gamut';
+import {
+  Column,
+  ColumnSizes,
+  Container,
+  LayoutGrid,
+  ResponsiveProperty,
+} from '@codecademy/gamut';
 import { mediaQueries } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { CTA, Description, Feature, FeatureProps, Title } from './';
 import { BaseProps } from './types';
@@ -13,6 +19,8 @@ const FlexContainer = styled(Container)`
 `;
 
 export type PageFeaturesProps = BaseProps & {
+  maxCols?: 1 | 2 | 3 | 4;
+
   /**
    * Array of features, which consist of image, image alt, title, and description
    */
@@ -29,10 +37,56 @@ export type PageFeaturesProps = BaseProps & {
   featuresMedia?: 'image' | 'icon' | 'stat' | 'none';
 };
 
+const rowRenderEach = (
+  items: FeatureProps[],
+  itemRenderer: (item: FeatureProps) => ReactNode
+): ReactNode => (
+  <FlexContainer nowrap column>
+    {items.map(itemRenderer)}
+  </FlexContainer>
+);
+
+const gridRenderEach = (
+  maxCols: NonNullable<PageFeaturesProps['maxCols']>,
+  items: FeatureProps[],
+  itemRenderer: (item: FeatureProps) => ReactNode
+): ReactNode => {
+  const size = { xs: 12, sm: 12 / maxCols } as ResponsiveProperty<ColumnSizes>;
+  /* eslint-disable react/no-array-index-key */
+  return (
+    <LayoutGrid
+      columnGap={{ lg: 'lg', xs: 'sm' }}
+      rowGap={{ lg: 'lg', xs: 'sm' }}
+    >
+      {items.map((item, i) => (
+        <Column key={i} size={size}>
+          {itemRenderer(item)}
+        </Column>
+      ))}
+    </LayoutGrid>
+  );
+  /* eslint-enable react/no-array-index-key */
+};
+
+const renderEach = (
+  maxCols: PageFeaturesProps['maxCols'],
+  items: FeatureProps[],
+  itemRenderer: (item: FeatureProps) => ReactNode
+): ReactNode => {
+  if (maxCols === undefined) {
+    return rowRenderEach(items, itemRenderer);
+  }
+  if (maxCols > 0 && maxCols <= 4) {
+    return gridRenderEach(maxCols, items, itemRenderer);
+  }
+  return null;
+};
+
 export const PageFeatures: React.FC<PageFeaturesProps> = ({
   title,
   desc,
   cta,
+  maxCols,
   features,
   featuresMedia,
   isIcon,
@@ -49,17 +103,20 @@ export const PageFeatures: React.FC<PageFeaturesProps> = ({
         </CTA>
       )}
     </div>
-    <FlexContainer nowrap column>
-      {features.map((feature) => (
-        <Feature
-          key={feature.title}
-          {...feature}
-          featuresMedia={
-            featuresMedia ? featuresMedia : isIcon ? 'icon' : 'image'
-          }
-          onAnchorClick={onAnchorClick}
-        />
-      ))}
-    </FlexContainer>
+    {renderEach(
+      maxCols,
+      features.map((feature) => ({
+        ...feature,
+        featuresMedia: featuresMedia
+          ? featuresMedia
+          : isIcon
+          ? 'icon'
+          : 'image',
+        onAnchorClick,
+      })) as FeatureProps[],
+      (feature) => (
+        <Feature key={feature.title} {...feature} />
+      )
+    )}
   </div>
 );
diff --git a/packages/gamut-labs/src/landingPage/__tests__/Feature-test.tsx b/packages/gamut-labs/src/landingPage/__tests__/Feature-test.tsx
@@ -3,16 +3,7 @@ import React from 'react';
 
 import { Feature, FeatureProps } from '..';
 
-const renderComponent = (overrides: Partial<FeatureProps> = {}) => {
-  const props: FeatureProps = {
-    featuresMedia: 'image',
-    imgSrc: 'https://content.codecademy.com/courses/free/boba.svg',
-    imgAlt: 'Codey Boba Tea',
-    ...overrides,
-  };
-
-  return mount(<Feature {...props} />);
-};
+const renderComponent = (props: FeatureProps) => mount(<Feature {...props} />);
 
 describe('Feature', () => {
   it('renders a title when title prop is provided', () => {
@@ -21,7 +12,7 @@ describe('Feature', () => {
   });
 
   it('does not render a title when title prop is not provided', () => {
-    const wrapper = renderComponent();
+    const wrapper = renderComponent({});
     expect(wrapper.find('h3')).toHaveLength(0);
   });
 
@@ -31,7 +22,7 @@ describe('Feature', () => {
   });
 
   it('does not render a description when desc prop is not provided', () => {
-    const wrapper = renderComponent();
+    const wrapper = renderComponent({});
     expect(wrapper.find('p')).toHaveLength(0);
   });
 
@@ -43,14 +34,22 @@ describe('Feature', () => {
   });
 
   it('renders an image', () => {
-    const wrapper = renderComponent();
+    const wrapper = renderComponent({
+      featuresMedia: 'image',
+      imgSrc: 'https://content.codecademy.com/courses/free/boba.svg',
+      imgAlt: 'Codey Boba Tea',
+    });
     expect(wrapper.find('img[data-testid="feature-image"]')).toHaveLength(1);
     expect(wrapper.find('img[data-testid="feature-icon"]')).toHaveLength(0);
     expect(wrapper.find('div[data-testid="feature-stat"]')).toHaveLength(0);
   });
 
   it('renders an icon', () => {
-    const wrapper = renderComponent({ featuresMedia: 'icon' });
+    const wrapper = renderComponent({
+      featuresMedia: 'icon',
+      imgSrc: 'https://content.codecademy.com/courses/free/boba.svg',
+      imgAlt: 'Codey Boba Tea',
+    });
     expect(wrapper.find('img[data-testid="feature-image"]')).toHaveLength(0);
     expect(wrapper.find('img[data-testid="feature-icon"]')).toHaveLength(1);
     expect(wrapper.find('div[data-testid="feature-stat"]')).toHaveLength(0);

diff --git a/packages/gamut-labs/src/landingPage/__tests__/FeaturesSection-test.tsx b/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](#).',
         },

diff --git a/packages/styleguide/stories/Brand/Organisms/PageFeatures.stories.mdx b/packages/styleguide/stories/Brand/Organisms/PageFeatures.stories.mdx
@@ -136,3 +136,51 @@ Promote a single stat by setting the `featuresMedia` prop to `stat` and providin
     {(args) => <PageFeatures {...args} />}
   </Story>
 </Canvas>
+
+## Wrap the features to create a grid
+
+If you specify a `maxCols` the features at desktop will wrap at that number of columns
+
+<Canvas>
+  <Story
+    name="Features Grid"
+    args={{
+      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](#).',
+        },
+        {
+          imgSrc: 'https://content.codecademy.com/courses/free/boba.svg',
+          imgAlt: 'Codey boba tea',
+          title: 'Product Manager',
+          desc: '**Product Manager**. Example link [here](#).',
+        },
+        {
+          imgSrc: 'https://content.codecademy.com/courses/free/boba.svg',
+          imgAlt: 'Codey boba tea',
+          title: 'Product Designer',
+          desc: '**Product Designer**. Example link [here](#).',
+        },
+        {
+          imgSrc: 'https://content.codecademy.com/courses/free/boba.svg',
+          imgAlt: 'Codey boba tea',
+          title: 'Product Designer',
+          desc: '**Product Designer**. Example link [here](#).',
+        },
+      ],
+      featuresMedia: 'icon',
+      maxCols: 3,
+    }}
+  >
+    {(args) => <PageFeatures {...args} />}
+  </Story>
+</Canvas>