use the full ware instead of all different props, fix linting errors

Author: summer-cook

src/compounds/ItemPage/ItemPage.jsx

@@ -6,41 +6,44 @@ import LinkedButton from '../LinkedButton/LinkedButton'
 import TextBox from '../../components/TextBox/TextBox'
 import Title from '../../components/Title/Title'
 
-const ItemPage = ({ title, titleStyle, description, descriptionStyle, id, img, slug }) => {
+const ItemPage = ({ descriptionStyle, img, ware, titleStyle }) => {
+  const { name, description, id, snippet, slug } = ware
   // sets a default width while still allowing width to be overridden
-  img = { width: 400, ...img }
 
   return (
     <main className='container py-5'>
-      <Title title={title} style={titleStyle}/>
+      <Title title={name} style={titleStyle} />
       <Row className='mt-3'>
         <Col xs={12} md={6} className='d-flex flex-column'>
-          <TextBox text={description} style={descriptionStyle} size='medium' />
+          <TextBox text={description || snippet} style={descriptionStyle} size='medium' />
           <LinkedButton
             addClass='align-self-start mt-4'
             buttonProps={{ label: 'Initiate Request' }}
-            path={{ pathname: `/requests/new/${slug}`, query: { id }}}
+            path={{ pathname: `/requests/new/${slug}`, query: { id } }}
           />
         </Col>
         <Col xs={12} md={6} className='mt-4 mt-md-0 me-md-auto d-flex justify-content-start justify-content-md-end'>
-          <Image {...img} />
+          <Image {...img} addClass='img-fluid'/>
         </Col>
       </Row>
     </main>
   )
 }
 
 ItemPage.propTypes = {
-  description: PropTypes.string.isRequired,
   descriptionStyle: PropTypes.shape({}),
-  id: PropTypes.number.isRequired,
   img: PropTypes.shape({
     alt: PropTypes.string.isRequired,
     src: PropTypes.string.isRequired,
-  }),
-  slug: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
+  }).isRequired,
   titleStyle: PropTypes.shape({}),
+  ware: PropTypes.shape({
+    description: PropTypes.string.isRequired,
+    id: PropTypes.number.isRequired,
+    slug: PropTypes.string.isRequired,
+    snippet: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+  }).isRequired,
 }
 
 ItemPage.defaultProps = {

src/compounds/ItemPage/ItemPage.stories.jsx

@@ -11,25 +11,36 @@ const Template = (args) => <ItemPage {...args} />
 
 export const Default = Template.bind({})
 Default.args = {
-  description: 'Using advanced CRISPR technology, add or delete base pairs at a specifically targeted DNA loci. Using advanced CRISPR technology, add or delete base pairs at a specifically targeted DNA loci. Using advanced CRISPR technology, add or delete base pairs at a specifically targeted DNA loci. Using advanced CRISPR technology, add or delete base pairs at a specifically targeted DNA loci. Using advanced CRISPR technology, add or delete base pairs at a specifically targeted DNA loci. Using advanced CRISPR technology, add or delete base pairs at a specifically targeted DNA loci.',
   descriptionStyle: {},
   img: {
     alt: 'test tubes',
     src: item,
   },
-  title: 'CRISPR[DEMO]',
   titleStyle: {},
+  ware: {
+    // eslint-disable-next-line max-len
+    description: 'Using advanced CRISPR technology, add or delete base pairs at a specifically targeted DNA loci. Using advanced CRISPR technology, add or delete base pairs at a specifically targeted DNA loci. Using advanced CRISPR technology, add or delete base pairs at a specifically targeted DNA loci. Using advanced CRISPR technology, add or delete base pairs at a specifically targeted DNA loci. Using advanced CRISPR technology, add or delete base pairs at a specifically targeted DNA loci. Using advanced CRISPR technology, add or delete base pairs at a specifically targeted DNA loci.',
+    id: '4356',
+    name: 'CRISPR[DEMO]',
+    slug: 'crispr-demo',
+  },
 }
 
 export const Alternative = Template.bind({})
 Alternative.args = {
-  description: 'Using advanced CRISPR technology, add or delete base pairs at a specifically targeted DNA loci. Using advanced CRISPR technology, add or delete base pairs at a specifically targeted DNA loci. Using advanced CRISPR technology, add or delete base pairs at a specifically targeted DNA loci. Using advanced CRISPR technology, add or delete base pairs at a specifically targeted DNA loci. Using advanced CRISPR technology, add or delete base pairs at a specifically targeted DNA loci. Using advanced CRISPR technology, add or delete base pairs at a specifically targeted DNA loci.',
   descriptionStyle: {},
   img: {
     alt: 'test tubes',
     src: item,
     width: 650,
   },
-  title: 'CRISPR[DEMO]',
   titleStyle: {},
+  ware: {
+    description: '',
+    id: '4356',
+    name: 'CRISPR[DEMO]',
+    slug: 'crispr-demo',
+    // eslint-disable-next-line max-len
+    snippet: 'this is a snippet. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard text. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using',
+  },
 }