Merge pull request #670 from gympass/EUEG-2847

🚀 feat(PlanCard): Make ListItem clickable
gympass · Jul 18, 2023 · 761be07 · 761be07
2 parents c5d3cd2 + 5845523
commit 761be07
Show file tree

Hide file tree

Showing 3 changed files with 528 additions and 23 deletions.
diff --git a/packages/yoga/src/Card/web/PlanCard/List.jsx b/packages/yoga/src/Card/web/PlanCard/List.jsx
@@ -4,6 +4,7 @@ import { string, node, shape, oneOfType, func } from 'prop-types';
 
 import Text from '../../../Text';
 import theme from '../../../Theme/helpers/themeReader';
+import Box from '../../../Box';
 
 const { card, cardweb } = theme.components;
 
@@ -31,11 +32,20 @@ const Item = styled.li`
   }
 `;
 
-const Wrapper = styled.div`
+const Wrapper = styled(Box)`
   display: flex;
   min-width: 0;
   align-items: center;
 
+  ${props =>
+    props.as === 'button' &&
+    css`
+      border: none;
+      padding: 0;
+      background: transparent;
+      cursor: pointer;
+    `}
+
   svg {
     flex-shrink: 0;
   }
@@ -77,45 +87,56 @@ const Button = styled.button`
 `;
 
 const ListItem = withTheme(
-  ({ text, icon: Icon, buttonProps, theme: yogaTheme }) => (
-    <Item>
-      <Wrapper>
-        {Icon && (
-          <IconWrapper>
-            {isValidElement(Icon) ? (
-              Icon
-            ) : (
-              <Icon
-                width={16}
-                height={16}
-                fill={yogaTheme.yoga.colors.text.primary}
-              />
-            )}
-          </IconWrapper>
+  ({ text, icon: Icon, buttonProps, theme: yogaTheme, onClick }) => {
+    const wrapperProps = onClick
+      ? { as: 'button', type: 'button', onClick }
+      : {};
+
+    return (
+      <Item>
+        <Wrapper {...wrapperProps}>
+          {Icon && (
+            <IconWrapper>
+              {isValidElement(Icon) ? (
+                Icon
+              ) : (
+                <Icon
+                  width={16}
+                  height={16}
+                  fill={yogaTheme.yoga.colors.text.primary}
+                />
+              )}
+            </IconWrapper>
+          )}
+          <ItemText as="span">{text}</ItemText>
+        </Wrapper>
+        {Boolean(Object.keys(buttonProps).length) && (
+          <Button {...buttonProps} />
         )}
-        <ItemText as="span">{text}</ItemText>
-      </Wrapper>
-      {Boolean(Object.keys(buttonProps).length) && <Button {...buttonProps} />}
-    </Item>
-  ),
+      </Item>
+    );
+  },
 );
 
 List.displayName = 'PlanCard.List';
 ListItem.displayName = 'PlanCard.ListItem';
 Button.displayName = 'PlanCard.ListButton';
 
 ListItem.propTypes = {
-  text: string.isRequired,
+  text: oneOfType([string, node]).isRequired,
   /** an icon to be displayed on the begin of the item */
   icon: oneOfType([node, func]),
   /** if provided displays a button below the item text. It accepts all button
    * element props */
   buttonProps: shape({}),
+  /** if provided makes the item clickable */
+  onClick: func,
 };
 
 ListItem.defaultProps = {
   icon: undefined,
   buttonProps: {},
+  onClick: undefined,
 };
 
 export { List, ListItem };
diff --git a/packages/yoga/src/Card/web/PlanCard/PlanCard.test.jsx b/packages/yoga/src/Card/web/PlanCard/PlanCard.test.jsx
@@ -7,7 +7,7 @@ import PlanCard from '.';
 describe('<PlanCard />', () => {
   const buttonOnClickMock = jest.fn();
 
-  const renderPlan = () =>
+  const renderPlan = ({ clickableItems } = {}) =>
     render(
       <ThemeProvider>
         <PlanCard>
@@ -31,6 +31,7 @@ describe('<PlanCard />', () => {
                   />
                 }
                 text="gyms and studios"
+                onClick={clickableItems && jest.fn()}
               />
               <PlanCard.ListItem
                 icon={Star}
@@ -40,6 +41,7 @@ describe('<PlanCard />', () => {
                   as: 'a',
                   onClick: buttonOnClickMock,
                 }}
+                onClick={clickableItems && jest.fn()}
               />
             </PlanCard.List>
           </PlanCard.Content>
@@ -58,6 +60,37 @@ describe('<PlanCard />', () => {
 
       expect(buttonOnClickMock).toHaveBeenCalled();
     });
+
+    it('should make list item clickable', () => {
+      const itemClickMock = jest.fn();
+
+      const { getByRole } = render(
+        <ThemeProvider>
+          <PlanCard variant="energy">
+            <PlanCard.Content title="Basic">
+              <PlanCard.List>
+                <PlanCard.ListItem
+                  icon={
+                    <Icon
+                      as={MapPin}
+                      height="small"
+                      width="small"
+                      stroke="medium"
+                    />
+                  }
+                  text="gyms and studios"
+                  onClick={itemClickMock}
+                />
+              </PlanCard.List>
+            </PlanCard.Content>
+          </PlanCard>
+        </ThemeProvider>,
+      );
+
+      fireEvent.click(getByRole('button', { label: 'gyms and studios' }));
+
+      expect(itemClickMock).toHaveBeenCalled();
+    });
   });
 
   describe('Snapshots', () => {
@@ -151,5 +184,11 @@ describe('<PlanCard />', () => {
 
       expect(container).toMatchSnapshot();
     });
+
+    it('should render list item content as button', () => {
+      const { container } = renderPlan({ clickableItems: true });
+
+      expect(container).toMatchSnapshot();
+    });
   });
 });