Merge pull request #140 from scientist-softserv/139-improve-requests-page

Refactor requestlist

Author: summer-cook

src/assets/theme/bootstrap-preview.scss

@@ -1,4 +1,4 @@
-// these colors match what is in the webstore, and must be updated here as well. this file enables us to see the preview of what these overrides will look like without actually importing these from here into the webstore project.
+// these colors and variables match what is in the webstore's theme.module.scss file. this file enables us to see the preview of what these overrides will look like without actually importing these from here into the webstore project. In order to see a preview in storybook of how components will look with custom colors, these values must be updated.
 
 $primary: #333333; 
 $secondary: #CCCCCC; 
@@ -10,5 +10,17 @@ $light: #f8f9fa;
 $dark: #212529;
 $white: #ffffff;
 
-@import '../../../node_modules/bootstrap/scss/bootstrap.scss'
+// these imports must be AFTER the theme color overrides above in order to properly override bootstrap's colors, but before the theme maps.
+@import "../../../node_modules/bootstrap/scss/functions";
+@import "../../../node_modules/bootstrap/scss/variables";
+@import "../../../node_modules/bootstrap/scss/mixins";
 
+// create our own custom colors map, and merge it with bootstrap's theme-colors map to generate utility functions that can be used throughout the map
+$custom-colors: (
+  "light-2": darken($light, 3%),
+  "light-3": darken($light, 10%)
+);
+$theme-colors: map-merge($theme-colors, $custom-colors);
+
+// the full bootstrap import must be last in order to properly override bootstrap's theme maps
+@import '../../../node_modules/bootstrap/scss/bootstrap.scss';

src/compounds/RequestItem/RequestItem.jsx

@@ -4,26 +4,33 @@ import Badge from '../../components/Badge/Badge'
 import Image from '../../components/Image/Image'
 import TextBox from '../../components/TextBox/TextBox'
 import Title from '../../components/Title/Title'
-import './request-item.css'
+import './request-item.scss'
 
-const RequestItem = React.forwardRef(({ createdAt, description, href, img, title, status, updatedAt }, ref) => {
+const RequestItem = React.forwardRef(({ index, request }, ref) => {
+  const { createdAt, description, href, img, title, status, updatedAt } = request
   const { backgroundColor, text, textColor } = status
   const image = { ...img, height: 70, width: 70 }
 
   return (
-    <article className='request-item mt-2'>
-      <Image {...image} />
-      <div className='request-item-details'>
-        <a href={href} ref={ref} className='link pointer-cursor'>
-          <Title title={title} size='small' />
-        </a>
-        <TextBox text={description} />
+    <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'}`}
+    >
+      <div className='d-flex flex-column flex-sm-row gap-3 request-item-details'>
+        <Image {...image} addClass='align-self-md-center' />
+        <div className='align-self-sm-center'>
+          <a href={href} ref={ref} className='link pointer-cursor'>
+            <Title title={title} size='small' />
+          </a>
+          <TextBox text={description} />
+        </div>
       </div>
-      <div className='status'>
+      <div className='status bg-light-3 p-2 rounded mt-4 mt-md-0'>
         <Badge
           backgroundColor={backgroundColor}
           text={text}
           textColor={textColor}
+          addClass='mb-2'
         />
         <TextBox text={`Created: ${createdAt}`} />
         <TextBox text={`Updated: ${updatedAt}`} />
@@ -33,13 +40,22 @@ const RequestItem = React.forwardRef(({ createdAt, description, href, img, title
 })
 
 RequestItem.propTypes = {
-  createdAt: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-  id: PropTypes.number,
-  img: PropTypes.shape(Image.propTypes).isRequired,
-  status: PropTypes.shape(Badge.propTypes).isRequired,
-  title: PropTypes.string.isRequired,
-  updatedAt: PropTypes.string.isRequired,
+  index: PropTypes.number,
+  request: PropTypes.shape({
+    createdAt: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    href: PropTypes.string.isRequired,
+    img: PropTypes.shape(Image.propTypes).isRequired,
+    status: PropTypes.shape(Badge.propTypes).isRequired,
+    title: PropTypes.string.isRequired,
+    updatedAt: PropTypes.string.isRequired,
+  }).isRequired,
 }
 
+RequestItem.defaultProps = {
+  index: null,
+}
+
+RequestItem.displayName = 'Request Item'
+
 export default RequestItem

src/compounds/RequestItem/RequestItem.stories.jsx

@@ -11,28 +11,34 @@ const Template = (args) => <RequestItem {...args} />
 
 export const Default = Template.bind({})
 Default.args = {
-  createdAt: 'September 9, 2022',
-  description: 'Does the Company offer services related to Flow Cytometry?',
-  href: '/request/F575C4',
-  img: defaultImage,
-  title: 'F575C4: Assay Depot Coffee Mug',
-  status: {
-    text: 'Vendor Review',
-  },
-  updatedAt: 'September 9, 2022 at 9:21 am',
+  index: 0,
+  request: {
+    createdAt: 'September 9, 2022',
+    description: 'Does the Company offer services related to Flow Cytometry?',
+    href: '/request/F575C4',
+    img: defaultImage,
+    title: 'F575C4: Assay Depot Coffee Mug',
+    status: {
+      text: 'Vendor Review',
+    },
+    updatedAt: 'September 9, 2022 at 9:21 am',
+  }
 }
 
 export const Alternate = Template.bind({})
 Alternate.args = {
-  createdAt: 'September 9, 2022',
-  description: 'Does the Company offer services related to Flow Cytometry?',
-  href: '/request/F575C4',
-  img: defaultImage,
-  title: 'F575C4: Assay Depot Coffee Mug',
-  status: {
-    backgroundColor: '#DEAF17',
-    text: 'Work In Progress',
-    textColor: '#FFFFFF',
-  },
-  updatedAt: 'November 16, 2022 at 4:45 pm',
+  index: 1,
+  request: {
+    createdAt: 'September 9, 2022',
+    description: 'Does the Company offer services related to Flow Cytometry?',
+    href: '/request/F575C4',
+    img: defaultImage,
+    title: 'F575C4: Assay Depot Coffee Mug',
+    status: {
+      backgroundColor: '#DEAF17',
+      text: 'Work In Progress',
+      textColor: '#FFFFFF',
+    },
+    updatedAt: 'November 16, 2022 at 4:45 pm',
+  }
 }

src/compounds/RequestItem/request-item.css

@@ -0,0 +1,10 @@
+.request-item-details {
+  flex: 2;
+}
+
+.status {
+  max-height: 175px;
+  @media (min-width: 768px) {
+    width: 260px;
+  }
+}

src/compounds/RequestItem/request-item.scss

@@ -7,18 +7,13 @@ import RequestItem from '../RequestItem/RequestItem'
 const RequestList = ({ requests }) => (
   <>
     <Title title='My Requests' size='medium' />
-    {requests.map((req) => (
-      <Link key={req.id} href={`${req.href}`} passHref legacyBehavior>
-        <RequestItem
-          createdAt={req.createdAt}
-          description={req.description}
-          img={req.img}
-          title={req.title}
-          status={req.status}
-          updatedAt={req.updatedAt}
-        />
-      </Link>
-    ))}
+    <div className='rounded overflow-hidden'>
+      {requests.map((req, index) => (
+        <Link key={req.id} href={`${req.href}`} passHref legacyBehavior>
+          <RequestItem request={req} index={index} />
+        </Link>
+      ))}
+    </div>
   </>
 )
 

src/compounds/RequestList/RequestList.jsx

@@ -26,7 +26,8 @@ Default.args = {
     },
     {
       createdAt: 'November 15, 2022',
-      description: 'this is a test.',
+      // 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,