[#155003695] Continue shopping button in basket. (#14)

systemseed · Apr 2, 2018 · 5d962c7 · 5d962c7
1 parent 833606d
commit 5d962c7
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 8 deletions.
diff --git a/frontend-gifts/src/components/BasketEmpty/index.js b/frontend-gifts/src/components/BasketEmpty/index.js
@@ -2,10 +2,12 @@ import React from 'react';
 import Sticky from 'react-stickynode';
 import { Grid, Row, Col } from 'react-bootstrap';
 import BasketTotal from '../BasketTotal';
+import ContinueShopping from '../ContinueShopping';
 
 const BasketEmpty = ({ currentCurrency }) => (
-  <Grid>
-    <h1 className="space-top-half">Shopping Basket</h1>
+  <Grid className="padding-top">
+    <ContinueShopping />
+    <h1 className="space-top">Shopping Basket</h1>
 
     <Row className="padding-top">
 

diff --git a/frontend-gifts/src/components/BasketWithCorporateGifts/index.js b/frontend-gifts/src/components/BasketWithCorporateGifts/index.js
@@ -6,6 +6,7 @@ import BasketItem from './BasketItem';
 import BasketItemsInCart from '../BasketWithGifts/BasketItemsInCart';
 import BasketTotal from '../BasketTotal';
 import CheckoutButton from '../../containers/CheckoutButton';
+import ContinueShopping from '../ContinueShopping';
 
 const BasketWithCorporateGifts = ({ currentCurrency, products }) => {
   const basketProducts = products.map(product => (
@@ -17,8 +18,9 @@ const BasketWithCorporateGifts = ({ currentCurrency, products }) => {
   ));
 
   return (
-    <Grid className="padding-top-3x">
-      <h1 className="space-top-half">Shopping Basket</h1>
+    <Grid className="padding-top">
+      <ContinueShopping />
+      <h1 className="space-top">Shopping Basket</h1>
 
       <Row className="padding-top">
 

diff --git a/frontend-gifts/src/components/BasketWithGifts/index.js b/frontend-gifts/src/components/BasketWithGifts/index.js
@@ -8,6 +8,7 @@ import BasketTotal from '../BasketTotal';
 import AddGiftDonationContainer from '../../containers/AddGiftDonationContainer';
 import CheckoutButton from '../../containers/CheckoutButton';
 import FreeProductsOfferings from '../../containers/FreeProductsOfferings';
+import ContinueShopping from '../ContinueShopping';
 
 const BasketWithGifts = ({ currentCurrency, products }) => {
   const basketProducts = products.map(product => (
@@ -19,8 +20,9 @@ const BasketWithGifts = ({ currentCurrency, products }) => {
   ));
 
   return (
-    <Grid className="padding-top-3x">
-      <h1 className="space-top-half">Shopping Basket</h1>
+    <Grid className="padding-top">
+      <ContinueShopping />
+      <h1 className="space-top">Shopping Basket</h1>
 
       <Row className="padding-top">
 

diff --git a/frontend-gifts/src/components/ContinueShopping/index.js b/frontend-gifts/src/components/ContinueShopping/index.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const ContinueShopping = () => (
+  <div className="continue-shopping">
+    <Link to="/" className="btn">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+        <g fill="none" fillRule="evenodd">
+          <path d="M-3-3h18v18H-3z" />
+          <path className="fill" fillRule="nonzero" d="M12 5.25H2.872l4.193-4.192L6 0 0 6l6 6 1.057-1.057L2.872 6.75H12z" />
+        </g>
+      </svg>
+      Continue shopping
+    </Link>
+  </div>
+);
+
+export default ContinueShopping;
diff --git a/frontend-gifts/src/components/GiftsFilter/index.js b/frontend-gifts/src/components/GiftsFilter/index.js
@@ -39,7 +39,7 @@ GiftsFilter.propTypes = {
       name: React.PropTypes.string.isRequired,
     })
   ).isRequired,
-  categoryId: React.PropTypes.string.isRequired,
+  categoryId: React.PropTypes.string,
 };
 
 export default GiftsFilter;
diff --git a/frontend-gifts/src/styles/sass/_falcon.scss b/frontend-gifts/src/styles/sass/_falcon.scss
@@ -37,4 +37,55 @@
   .menu li > a.active {
     color: $nav-link-hover-color;
   }
-}
+}
+
+// Continue shopping widget.
+.continue-shopping a.btn {
+  text-transform: none;
+  background-color: transparent;
+  height: 32px;
+  line-height: 28px;
+  padding: 0 12px 0 11px;
+  margin: 0;
+  color: #606060;
+  border: solid 1px #7f7f7f;
+
+  svg {
+    width: 11px;
+    height: 11px;
+    margin-right: 5px;
+    vertical-align: -1px;
+  }
+
+  svg path.fill {
+    fill: #7f7f7f;
+  }
+
+  @media (min-width: $screen-sm-min) {
+    height: 36px;
+    line-height: 32px;
+
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  &:hover {
+    color: #008a5f;
+    border-color: #008a5f;
+
+    svg path.fill {
+      fill: #008a5f;
+    }
+  }
+
+  &:active {
+    color: #2a5c40 !important;
+    border-color: #2a5c40;
+
+    svg path.fill {
+      fill: #2a5c40;
+    }
+  }
+}