Merge d3caee2 into 4c823ce

src/components/Performance/PerformanceBio/PerformanceBio.js

@@ -9,8 +9,13 @@ const PerformanceBio = () => {
   return (
     <React.Fragment>
       <PerformanceCarousel />
-      <PerformanceBioDetail heading="About the Performance" content={content} />
-      <PerformanceBioDetail heading="About the Artist" content={content} />
+      <div className="performance-bio-detail-wrapper">
+        <PerformanceBioDetail
+          heading="About the Performance"
+          content={content}
+        />
+        <PerformanceBioDetail heading="About the Artist" content={content} />
+      </div>
     </React.Fragment>
   )
 }

src/components/Performance/PerformanceBio/PerformanceBioDetail.scss

@@ -1,9 +1,13 @@
-.performance-bio-detail-container {
+.performance-bio-detail-wrapper {
   grid-column: 1/6;
-  margin-bottom: $margin-l;
+  grid-row: 2;
 
-  .performance-bio-detail__content {
-    margin-bottom: 0;
+  .performance-bio-detail-container {
+    margin-top: $margin-l;
+  }
+
+  .performance-bio-detail-container:first-of-type {
+    margin-top: $margin-s;
   }
 
   .performance-bio-detail__heading {

src/components/Performance/Ticket/Ticket.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import TicketBlock from './TicketBlock'
+
+const Ticket = () => {
+  return (
+    <div className="ticket-wrapper white">
+      <h5>Available tickets</h5>
+      <div className="ticket-blocks">
+        <TicketBlock
+          ticketPrice={10}
+          ticketDetails="Single ticket for 1 person"
+        />
+        <TicketBlock
+          ticketPrice={15}
+          ticketDetails="Pair ticket for 2 people"
+        />
+        <TicketBlock
+          ticketPrice={35}
+          ticketDetails="Group of friends (5 people)"
+        />
+        <TicketBlock ticketPrice={70} ticketDetails="VIP and table service" />
+      </div>
+    </div>
+  )
+}
+
+export default Ticket

src/components/Performance/Ticket/Ticket.scss

@@ -0,0 +1,47 @@
+.ticket-wrapper {
+  grid-column: 7/-1;
+  grid-row: 2;
+  margin-top: $margin-s;
+  margin-bottom: $margin-l;
+  margin-left: $margin-l;
+
+  .ticket-blocks {
+    margin-top: $margin-s;
+
+    .ticket-block {
+      display: flex;
+      margin-bottom: $margin-xs;
+
+      .ticket-block-amount {
+        padding: $padding-r;
+        background-color: $primary-color-darkblue-lighter;
+        display: flex;
+        align-items: center;
+      }
+
+      .ticket-block-option {
+        display: flex;
+        align-items: center;
+        padding: $padding-r;
+        background-color: $primary-color-darkblue-lighter;
+        border-left: 1px solid $primary-color-darkblue;
+        flex-grow: 1;
+      }
+
+      .ticket-block-buttons {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: $padding-s;
+        min-width: 180px;
+        background-color: $primary-color-darkblue-lighter;
+        border-left: 1px solid $primary-color-darkblue;
+
+        .ticket-button {
+          margin-bottom: $margin-xs;
+        }
+      }
+    }
+  }
+}

src/components/Performance/Ticket/Ticket.test.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import Ticket from './Ticket'
+
+import { shallow } from 'enzyme'
+
+describe('<Ticket />', () => {
+  let ticketWrapper
+
+  beforeEach(() => {
+    ticketWrapper = shallow(<Ticket />)
+  })
+
+  it('has a title Available tickets', () => {
+    expect(ticketWrapper.find('h5').text()).toEqual('Available tickets')
+  })
+
+  it('has some tickets available to buy', () => {
+    expect(ticketWrapper.find('TicketBlock').exists()).toBe(true)
+  })
+})

src/components/Performance/Ticket/TicketBlock.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const TicketBlock = props => {
+  return (
+    <div className="ticket-block">
+      <div className="ticket-block-amount">
+        <h5>${props.ticketPrice}</h5>
+      </div>
+      <p className="ticket-block-option">{props.ticketDetails}</p>
+      <div className="ticket-block-buttons">
+        <button className="ticket-button">Buy ticket</button>
+      </div>
+    </div>
+  )
+}
+
+TicketBlock.propTypes = {
+  ticketPrice: PropTypes.number.isRequired,
+  ticketDetails: PropTypes.string.isRequired
+}
+
+export default TicketBlock

src/containers/Performance/Attendance/Attendance.scss

@@ -1,6 +1,6 @@
 .attendance-wrapper {
   grid-column: 7/-1;
-  grid-row: 2;
+  grid-row: 3;
   margin-left: $margin-l;
 }
 

src/containers/Performance/Performance.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PerformanceBio from '../../components/Performance/PerformanceBio/PerformanceBio'
+import Ticket from '../../components/Performance/Ticket/Ticket'
 import Campaign from '../../components/Shared/Campaign/Campaign'
 import Attendance from './Attendance/Attendance'
 
@@ -15,6 +16,7 @@ class Performance extends Component {
           daysToGo={23}
           organization="Beyonce"
         />
+        <Ticket />
         <Attendance />
       </React.Fragment>
     )

src/main.scss

@@ -44,6 +44,7 @@
 @import "components/Cause/RelatedCause/RelatedCause.scss";
 @import "components/Causes/CauseCard/CauseCard.scss";
 @import "components/Performance/PerformanceBio/PerformanceCarousel.scss";
+@import "components/Performance/Ticket/Ticket.scss";
 @import "components/Performance/PerformanceBio/PerformanceBioDetail.scss";
 @import "components/Performances/PerformanceCard/PerformanceCard.scss";
 @import "containers/Performance/Attendance/Attendance.scss";