dynamically set the bg color of the request items in the request list

Author: alishaevn

src/compounds/RequestItem/RequestItem.jsx

@@ -6,15 +6,15 @@ import TextBox from '../../components/TextBox/TextBox'
 import Title from '../../components/Title/Title'
 import './request-item.scss'
 
-const RequestItem = React.forwardRef(({ index, request }, ref) => {
+const RequestItem = React.forwardRef(({ backgroundColor, index, request }, ref) => {
   const { createdAt, description, href, img, title, status, updatedAt } = request
-  const { backgroundColor, text, textColor } = status
+  const { text, textColor } = status
   const image = { ...img, height: 70, width: 70 }
+  const bg = index % 2 === 0 ? `bg-${backgroundColor}` : `bg-${backgroundColor}-2`
 
   return (
     <article
-      className={`request-item p-3 d-flex flex-column flex-md-row justify-content-between gap-3 bg-light
-      ${index % 2 === 0 ? ' bg-light' : ' bg-light-2'}`}
+      className={`request-item p-3 d-flex flex-column flex-md-row justify-content-between gap-3 ${bg}`}
     >
       <div className='d-flex flex-column flex-sm-row gap-3 request-item-details'>
         <Image {...image} addClass='align-self-md-center' />
@@ -25,9 +25,9 @@ const RequestItem = React.forwardRef(({ index, request }, ref) => {
           <TextBox text={description} />
         </div>
       </div>
-      <div className='status bg-light-3 p-2 rounded mt-4 mt-md-0'>
+      <div className={`status bg-${backgroundColor}-3 p-2 rounded mt-4 mt-md-0`}>
         <Badge
-          backgroundColor={backgroundColor}
+          backgroundColor={status.backgroundColor}
           text={text}
           textColor={textColor}
           addClass='mb-2'
@@ -50,11 +50,13 @@ export const requestPropTypes = {
 }
 
 RequestItem.propTypes = {
+  backgroundColor: PropTypes.string,
   index: PropTypes.number,
   request: PropTypes.shape(requestPropTypes).isRequired,
 }
 
 RequestItem.defaultProps = {
+  backgroundColor: 'light',
   index: null,
 }
 

src/compounds/RequestList/RequestList.jsx

@@ -4,21 +4,26 @@ import PropTypes from 'prop-types'
 import Title from '../../components/Title/Title'
 import RequestItem, { requestPropTypes } from '../RequestItem/RequestItem'
 
-const RequestList = ({ requests }) => (
+const RequestList = ({ backgroundColor, requests }) => (
   <>
     <Title title='My Requests' size='medium' />
     <div className='rounded overflow-hidden mb-4'>
       {requests.map((req, index) => (
         <Link key={req.id} href={`${req.href}`} passHref legacyBehavior>
-          <RequestItem request={req} index={index} />
+          <RequestItem request={req} index={index} backgroundColor={backgroundColor} />
         </Link>
       ))}
     </div>
   </>
 )
 
 RequestList.propTypes = {
+  backgroundColor: PropTypes.string,
   requests: PropTypes.arrayOf(PropTypes.shape(requestPropTypes)).isRequired,
 }
 
+RequestList.defaultProps = {
+  backgroundColor: 'light'
+}
+
 export default RequestList

src/compounds/RequestList/RequestList.stories.jsx

@@ -41,3 +41,37 @@ Default.args = {
     },
   ],
 }
+
+export const Alternate = Template.bind({})
+Alternate.args = {
+  backgroundColor: 'secondary',
+  requests: [
+    {
+      createdAt: 'September 9, 2022',
+      description: 'Does the Company offer services related to Flow Cytometry?',
+      href: '/request/F575C4',
+      id: 1,
+      img: defaultImage,
+      status: {
+        text: 'Vendor Review',
+      },
+      title: 'F575C4: Assay Depot Coffee Mug',
+      updatedAt: 'September 9, 2022 at 9:21 am',
+    },
+    {
+      createdAt: 'November 15, 2022',
+      // eslint-disable-next-line max-len
+      description: 'General Information When do you plan to work with this supplier? Urgently Name of supplier: Alisha Supplier web address: http://scientist.com Is this new supplier onboarding request related to any of the following areas: Research area: In Vivo Contact Information Supplier contact name: Alisha Evans Supplier email a...',
+      href: '/request/706D8F',
+      id: 2,
+      img: defaultImage,
+      status: {
+        backgroundColor: '#DEAF17',
+        text: 'Work In Progress',
+        textColor: '#FFFFFF',
+      },
+      title: '706D8F: CRISPR',
+      updatedAt: 'November 16, 2022 at 4:45 pm',
+    },
+  ],
+}