From 1da9dd300edd84cd21911af144a909522e94b8a0 Mon Sep 17 00:00:00 2001 From: Jun Hyuk Kim Date: Tue, 11 Sep 2018 17:01:23 -0700 Subject: [PATCH] feat: extract modal to separate page, Add materials info (#137) * extract modal to separate page, add materials info * modify import statements, implement UX changes * fix: use smart quotes * chore: update lockfile closes #89, closes #102 --- package.json | 1 - src/components/Modal/Modal.js | 230 ------------------ .../ProductDetails/ProductDetails.js | 134 ++++++++++ .../SizeChartTable.js | 0 src/components/Store/Store.js | 15 +- src/components/shared/Layout.js | 2 +- src/pages/product-details.js | 11 + yarn.lock | 15 +- 8 files changed, 161 insertions(+), 247 deletions(-) delete mode 100644 src/components/Modal/Modal.js create mode 100644 src/components/ProductDetails/ProductDetails.js rename src/components/{Modal => ProductDetails}/SizeChartTable.js (100%) create mode 100644 src/pages/product-details.js diff --git a/package.json b/package.json index f7f4f9ea..86d13fdf 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ "react-emotion": "^9.1.3", "react-helmet": "^5.2.0", "react-icons": "^2.2.7", - "react-modal": "^3.4.5", "react-onclickoutside": "^6.7.1", "react-router-dom": "^4.3.1", "recompose": "^0.27.1", diff --git a/src/components/Modal/Modal.js b/src/components/Modal/Modal.js deleted file mode 100644 index 786b60cf..00000000 --- a/src/components/Modal/Modal.js +++ /dev/null @@ -1,230 +0,0 @@ -import React from 'react'; -import styled, { injectGlobal } from 'react-emotion'; -import ReactModal from 'react-modal'; -import MdClose from 'react-icons/lib/md/close'; -import SizeChartTable from './SizeChartTable'; -import { Heading, Subheading } from '../shared/Typography'; -import { colors, fonts, button, spacing } from '../../utils/styles'; - -injectGlobal` - .ReactModal__Overlay { - background-color: ${colors.lightest}; - z-index: 10000; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - min-height: 100%; - min-width: 100%; - overflow-y: auto; - -webkit-overflow-scrolling: touch; - - @media (min-width: 600px) { - background-color: ${colors.lightest}95; - } - } - - .ReactModal__Overlay--after-open { - overflow-y: auto; - } - - .ReactModal__Overlay--before-close { - overflow-y: hidden; - } - - .ReactModal__Content { - opacity: 0; - transform: translate(0,-25%); - transition: all .15s ease-out; - - border: 0; - max-width: 640px; - margin: 0 auto; - position: absolute; - background: ${colors.lightest}; - outline: none; - padding: 20px; - top: 0; - left: 0; - right: 0; - bottom: auto; - - @media (min-width: 600px) { - border-radius: 4px; - box-shadow: 0 0 90px -24px ${colors.brand}; - top: 40px; - left: 40px; - right: 40px; - } - } - - .ReactModal__Content--after-open { - opacity: 1; - transition: all 150ms; - transform: translate(0,0); - } - - .ReactModal__Content--before-close { - opacity: 0; - transform: translate(0,-25%); - } -`; - -const SubSubheading = styled('h4')` - font-family: ${fonts.heading}; - font-weight: 500; - font-size: 1.2rem; - margin-bottom: 0; - color: #333; -`; - -const ModalOpenButton = styled('button')` - ${button.link}; - font-size: 1rem; - margin-top: 1rem; -`; - -const ModalCloseButton = styled('button')` - border: 0; - color: ${colors.brand}; - cursor: pointer; - position: fixed; - left: auto; - top: 0; - right: 0; - height: 40px; - width: 40px; - background: ${colors.brandBright}; - font-size: 1.125rem; - border-bottom-left-radius: 2px; - - :hover { - background: ${colors.brand}; - color: ${colors.lightest}; - } - - @media (min-width: 600px) { - border-top-right-radius: 2px; - position: absolute; - } -`; - -const UnitWrapper = styled('div')` - float: right; - display: flex; - align-items: center; - font-size: 0.75rem; - margin: ${-1 * spacing.lg}px 0 ${spacing.md}px 0; -` - -const UnitOption = styled('div')` - padding: 0.2em 0.5em; - margin-right: 0.5em; - background: ${props => props.active && colors.brand}; - color: ${props => props.active && colors.lightest}; - cursor: pointer; - border-radius: 1em; - - &:hover { - background: ${props => !props.active && colors.brandLight } - } -` - -const UnitsLabel = styled('div')` - margin-right: 1em; -` - -const UnitSelector = ({ setUnits, unit }) => { - const handleClick = (event) => { - setUnits(event.target.getAttribute('value')) - } - - return( - - Units: - in - cm - - ) -} - -export default class Modal extends React.Component { - constructor() { - super(); - this.state = { - showModal: false, - units: "in", - }; - - this.handleOpenModal = this.handleOpenModal.bind(this); - this.handleCloseModal = this.handleCloseModal.bind(this); - this.changeUnits = this.changeUnits.bind(this); - } - - componentDidMount() { - ReactModal.setAppElement(`#___gatsby`); - } - - handleOpenModal() { - document.querySelector(`html`).style.overflowY = `hidden`; - this.setState({ showModal: true }); - } - - handleCloseModal() { - document.querySelector(`html`).style.overflowY = `auto`; - this.setState({ showModal: false }); - } - - changeUnits(units) { - this.setState({ units }) - } - - render() { - return ( - <> - - Care Instructions & Size Chart - - -
- Care Instructions & Size Chart -
- Care Instructions - Socks -

- Keep those socks comfy on your feet and looking bright by washing - them in cold water with darker colors. Tumble dry on low so they - don't shrink! -

- T-Shirts -

- Machine wash cold and tumble dry only. These shirts can’t take the - heat (literally)! We want to make sure you’re happy with our shirts, - but they require a little TLC. -

- Size Chart - - - -

- - Don't see your size? - {' '} - Send us an email team@gatsbyjs.com and we'll see if we can help! -

- - - - - - ); - } -} diff --git a/src/components/ProductDetails/ProductDetails.js b/src/components/ProductDetails/ProductDetails.js new file mode 100644 index 00000000..1c342019 --- /dev/null +++ b/src/components/ProductDetails/ProductDetails.js @@ -0,0 +1,134 @@ +import React from 'react'; +import styled from 'react-emotion'; +import SizeChartTable from './SizeChartTable'; +import { Heading, Subheading, UnorderedList } from '../shared/Typography'; +import { colors, fonts, button, spacing, pullHeadline, breakpoints } from '../../utils/styles'; + +const Headline = styled('h1')` + ${pullHeadline}; + + @media (min-width: ${breakpoints.hd}px) { + padding-top: 32px; + margin-top: 1.5rem; + } +`; + +const LargerSubheading = styled(Subheading)` + font-size: 1.4rem; +` + +const SubSubheading = styled('h4')` + font-family: ${fonts.heading}; + font-weight: 500; + font-size: 1.2rem; + margin-bottom: 0; + color: #333; +`; + +const NestedUnorderedList = styled('ul')` + list-style-type: disc; +` + +const UnitWrapper = styled('div')` + float: right; + display: flex; + align-items: center; + font-size: 0.75rem; + margin: ${-1 * spacing.lg}px 0 ${spacing.md}px 0; +` + +const UnitOption = styled('div')` + padding: 0.2em 0.5em; + margin-right: 0.5em; + background: ${props => props.active && colors.brand}; + color: ${props => props.active && colors.lightest}; + cursor: pointer; + border-radius: 1em; + + &:hover { + background: ${props => !props.active && colors.brandLight } + } +` + +const UnitsLabel = styled('div')` + margin-right: 1em; +` + +const UnitSelector = ({ setUnits, unit }) => { + const handleClick = (event) => { + setUnits(event.target.getAttribute('value')) + } + + return( + + Units: + in + cm + + ) +} + +export default class ProductDetails extends React.Component { + constructor() { + super(); + this.state = { + units: "in" + }; + this.changeUnits = this.changeUnits.bind(this); + } + + changeUnits(units) { + this.setState({ units }) + } + + render() { + return ( + <> + Product Details + Size Chart + + +

+ + Don’t see your size? + {' '} + Send us an email team@gatsbyjs.com and we’ll see if we can help! +

+ T-Shirt Materials & Fit +

+ To help you find the right size and fit, here are some additional details about our t-shirts. +

+ Dark Deploy Tee + +
  • Material: 50% polyester, 25% cotton, 25% rayon
    • +
  • Fit:
    • + +
  • Unisex sizes: regular/retail fit
    • +
  • Women’s sizes: semi-relaxed fit
    • +     +     + Purple Logo Tee + +
  • Material: 100% cotton
    • +
  • Fit:
    • + +
  • All sizes: regular/retail fit
    • +     +     + Care Instructions + Socks +

    + Keep those socks comfy on your feet and looking bright by washing + them in cold water with darker colors. Tumble dry on low so they + don’t shrink! +

    + T-Shirts +

    + Machine wash cold and tumble dry only. These shirts can’t take the + heat (literally)! We want to make sure you’re happy with our shirts, + but they require a little TLC. +

    + + ); + } +} diff --git a/src/components/Modal/SizeChartTable.js b/src/components/ProductDetails/SizeChartTable.js similarity index 100% rename from src/components/Modal/SizeChartTable.js rename to src/components/ProductDetails/SizeChartTable.js diff --git a/src/components/Store/Store.js b/src/components/Store/Store.js index 0fdc73a0..36a89c79 100644 --- a/src/components/Store/Store.js +++ b/src/components/Store/Store.js @@ -1,9 +1,9 @@ import React from 'react'; import styled from 'react-emotion'; +import { Link } from 'gatsby'; // import CallOut from './CallOut'; import ProductListings from './ProductListings'; -import Modal from '../Modal/Modal'; -import { pullHeadline, breakpoints } from '../../utils/styles'; +import { pullHeadline, breakpoints, link } from '../../utils/styles'; const Headline = styled('h1')` ${pullHeadline}; @@ -13,11 +13,20 @@ const Headline = styled('h1')` } `; +const ProductDetailsLink = styled(Link)` + ${link}; + text-decoration: none; +` + export default () => ( <> Get Gatsby Swag! {/* */} - + + Product Details & Size Chart + ); diff --git a/src/components/shared/Layout.js b/src/components/shared/Layout.js index 4c02997e..6d374805 100644 --- a/src/components/shared/Layout.js +++ b/src/components/shared/Layout.js @@ -175,7 +175,7 @@ export default class Layout extends React.Component {
    {!this.state.user.profile.name && }
    {this.props.children}
    -