Merge pull request #121 from scientist-softserv/120-service-button

Update service button to have the correct path

Author: summer-cook

src/compounds/ItemPage/ItemPage.jsx

@@ -1,37 +1,49 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Button, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 import Image from '../../components/Image/Image'
+import LinkedButton from '../LinkedButton/LinkedButton'
 import TextBox from '../../components/TextBox/TextBox'
 import Title from '../../components/Title/Title'
 
-const ItemPage = ({ title, titleStyle, description, descriptionStyle, img }) => {
+const ItemPage = ({ descriptionStyle, img, titleStyle, ware }) => {
+  const { description, id, name, 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' />
-          {/* TODO(summer-cook): Update this button's href so it is pointing at the item's form instead of blank request form */}
-          <Button href='/requests/new' className='align-self-start mt-4'>Initiate Request</Button>
+          <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 } }}
+          />
         </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({}),
-  img: Image.defaultProps.isRequired,
-  title: PropTypes.string.isRequired,
+  img: PropTypes.shape({
+    alt: PropTypes.string.isRequired,
+    src: 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',
+  },
 }