refactor: isolate expand button logic into component

web-ui/src/components/expand-more/ExpandMore.jsx

@@ -0,0 +1,20 @@
+import { styled } from '@mui/material/styles';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { IconButton } from '@mui/material';
+
+const ExpandMore = styled(props => {
+  const { expand, ...other } = props;
+  return (
+    <IconButton {...other}>
+      {props.children ? props.children : <ExpandMoreIcon />}
+    </IconButton>
+  );
+})(({ theme, expand }) => ({
+  transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
+  marginLeft: 'auto',
+  transition: theme.transitions.create('transform', {
+    duration: theme.transitions.duration.shortest
+  })
+}));
+
+export default ExpandMore;

web-ui/src/components/expand-more/ExpandMore.stories.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import ExpandMore from './ExpandMore';
+
+export default {
+  title: 'Check Ins/ExpandMore',
+  component: ExpandMore
+};
+const Template = args => <ExpandMore {...args} />;
+
+export const DefaultExpandMore = Template.bind({});
+DefaultExpandMore.args = {};
+
+// Expanded
+export const ExpandedExpandMore = Template.bind({});
+ExpandedExpandMore.args = {
+  expand: true
+};
+
+// Collapsed
+export const CollapsedExpandMore = Template.bind({});
+CollapsedExpandMore.args = {
+  expand: false
+};

web-ui/src/components/expand-more/ExpandMore.test.jsx

@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/react';
+import ExpandMore from './ExpandMore';
+
+describe('ExpandMore', () => {
+  it('should render the component', () => {
+    render(<ExpandMore />);
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+
+    // is collapsed by default
+    expect(button).toHaveStyle('transform: rotate(0deg)');
+  });
+
+  it('should rotate the icon when expanded', () => {
+    render(<ExpandMore expand />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveStyle('transform: rotate(180deg)');
+  });
+
+  it('should rotate the icon when collapsed', () => {
+    render(<ExpandMore expand={false} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveStyle('transform: rotate(0deg)');
+  });
+
+  it('spreads its props to the button', () => {
+    render(<ExpandMore data-testid="expand-more" />);
+
+    const button = screen.getByTestId('expand-more');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('spread props include aria-label and aria-expanded', () => {
+    render(<ExpandMore aria-label="expand" aria-expanded={false} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('aria-label', 'expand');
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('spread props include id and className', () => {
+    render(<ExpandMore id="expand-more" className="expand-more" />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('id', 'expand-more');
+    expect(button).toHaveClass('expand-more');
+  });
+
+  it('displays the expand more icon when no children are provided', () => {
+    render(<ExpandMore />);
+
+    const button = screen.getByRole('button');
+    const icon = button.querySelector('svg');
+    expect(icon).toHaveAttribute('data-testid', 'ExpandMoreIcon');
+  });
+
+  it('displays the children when provided', () => {
+    render(<ExpandMore>Test</ExpandMore>);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveTextContent('Test');
+  });
+});

web-ui/src/components/feedback_request_card/FeedbackRequestCard.jsx

@@ -6,8 +6,6 @@ import { Avatar, Typography } from '@mui/material';
 import CardContent from '@mui/material/CardContent';
 import CardActions from '@mui/material/CardActions';
 import Collapse from '@mui/material/Collapse';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import IconButton from '@mui/material/IconButton';
 import Grid from '@mui/material/Grid';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
@@ -19,6 +17,8 @@ import Divider from '@mui/material/Divider';
 import Button from '@mui/material/Button';
 import queryString from 'query-string';
 
+import ExpandMore from '../expand-more/ExpandMore';
+
 const PREFIX = 'FeedbackRequestCard';
 const classes = {
   root: `${PREFIX}-root`,
@@ -36,16 +36,6 @@ const StyledCard = styled(Card)({
       maxWidth: '100%'
     }
   },
-  [`& .${classes.expandClose}`]: {
-    transform: 'rotate(0deg)',
-    marginLeft: 'auto',
-    transition: 'transform 0.1s linear'
-  },
-  [`& .${classes.expandOpen}`]: {
-    transform: 'rotate(180deg)',
-    transition: 'transform 0.1s linear',
-    marginLeft: 'auto'
-  },
   '& .MuiCardContent-root': {
     paddingBottom: 0,
     paddingTop: 0,
@@ -107,12 +97,10 @@ const FeedbackRequestCard = ({
   const requesteeProfile = selectProfile(state, requesteeId);
   const avatarURL = getAvatarURL(requesteeProfile?.workEmail);
   const history = useHistory();
-  const [expanded, setExpanded] = React.useState(false);
+  const [expanded, setExpanded] = useState(false);
   const [sortedResponses, setSortedResponses] = useState(responses);
 
-  const handleExpandClick = () => {
-    setExpanded(!expanded);
-  };
+  const handleExpandClick = () => setExpanded(!expanded);
 
   const withinDateRange = useCallback(
     requestDate => {
@@ -271,15 +259,13 @@ const FeedbackRequestCard = ({
           </CardContent>
         </div>
         <CardActions disableSpacing>
-          <IconButton
+          <ExpandMore
+            expand={expanded}
             onClick={handleExpandClick}
             aria-expanded={expanded}
-            aria-label="show more"
-            className={expanded ? classes.expandOpen : classes.expandClose}
+            aria-label={expanded ? 'show less' : 'show more'}
             size="large"
-          >
-            <ExpandMoreIcon />
-          </IconButton>
+          />
         </CardActions>
         <Collapse in={expanded} timeout="auto" unmountOnExit>
           <CardContent style={{ padding: 0 }}>

web-ui/src/components/feedback_request_card/__snapshots__/FeedbackRequestCard.test.jsx.snap

@@ -74,7 +74,7 @@ exports[`renders correctly 1`] = `
         <button
           aria-expanded="false"
           aria-label="show more"
-          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge FeedbackRequestCard-expandClose css-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-9tbq5g-MuiButtonBase-root-MuiIconButton-root"
           tabindex="0"
           type="button"
         >

web-ui/src/components/member_selector/MemberSelector.jsx

@@ -19,12 +19,11 @@ import {
 } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { getAvatarURL } from '../../api/api';
 
+import ExpandMore from '../expand-more/ExpandMore.jsx';
 import MemberSelectorDialog, {
   FilterType
 } from './member_selector_dialog/MemberSelectorDialog';
@@ -100,6 +99,8 @@ const MemberSelector = ({
   const roleFilter = filters.find(filter => filter.type === FilterType.ROLE);
   const memberDescriptor = isFilteredByRole ? roleFilter.value : 'members';
 
+  const handleExpandClick = () => setExpanded(!expanded);
+
   // When the selected members change, fire the onChange event
   useEffect(() => {
     if (onChange) {
@@ -176,9 +177,12 @@ const MemberSelector = ({
       >
         <CardHeader
           avatar={
-            <IconButton onClick={() => setExpanded(!expanded)}>
-              {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-            </IconButton>
+            <ExpandMore
+              expand={expanded}
+              onClick={handleExpandClick}
+              aria-expanded={expanded}
+              aria-label="show more"
+            />
           }
           title={
             <div className="member-selector-card-title-container">

web-ui/src/components/member_selector/__snapshots__/MemberSelector.test.jsx.snap

@@ -13,19 +13,21 @@ exports[`MemberSelector > renders correctly as a controlled component 1`] = `
         class="MuiCardHeader-avatar css-1ssile9-MuiCardHeader-avatar"
       >
         <button
-          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+          aria-expanded="true"
+          aria-label="show more"
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1eomvmf-MuiButtonBase-root-MuiIconButton-root"
           tabindex="0"
           type="button"
         >
           <svg
             aria-hidden="true"
             class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-            data-testid="ExpandLessIcon"
+            data-testid="ExpandMoreIcon"
             focusable="false"
             viewBox="0 0 24 24"
           >
             <path
-              d="m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
             />
           </svg>
           <span
@@ -253,19 +255,21 @@ exports[`MemberSelector > renders correctly when disabled 1`] = `
         class="MuiCardHeader-avatar css-1ssile9-MuiCardHeader-avatar"
       >
         <button
-          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+          aria-expanded="true"
+          aria-label="show more"
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1eomvmf-MuiButtonBase-root-MuiIconButton-root"
           tabindex="0"
           type="button"
         >
           <svg
             aria-hidden="true"
             class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-            data-testid="ExpandLessIcon"
+            data-testid="ExpandMoreIcon"
             focusable="false"
             viewBox="0 0 24 24"
           >
             <path
-              d="m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
             />
           </svg>
           <span
@@ -487,19 +491,21 @@ exports[`MemberSelector > renders correctly with default props 1`] = `
         class="MuiCardHeader-avatar css-1ssile9-MuiCardHeader-avatar"
       >
         <button
-          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+          aria-expanded="true"
+          aria-label="show more"
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1eomvmf-MuiButtonBase-root-MuiIconButton-root"
           tabindex="0"
           type="button"
         >
           <svg
             aria-hidden="true"
             class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-            data-testid="ExpandLessIcon"
+            data-testid="ExpandMoreIcon"
             focusable="false"
             viewBox="0 0 24 24"
           >
             <path
-              d="m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
             />
           </svg>
           <span