From eeab847129bc556fb49b889d01f54f0911292f27 Mon Sep 17 00:00:00 2001 From: AlexeyKaryka Date: Sat, 22 Dec 2018 13:58:45 +0300 Subject: [PATCH 01/11] Adds new SwatchTooltip component and uses it in ProductOptions --- .../src/components/ProductOptions/swatch.css | 1 + .../src/components/ProductOptions/swatch.js | 28 +++++++------ .../src/components/SwatchTooltip/index.js | 1 + .../SwatchTooltip/swatchTooltip.css | 39 +++++++++++++++++++ .../components/SwatchTooltip/swatchTooltip.js | 28 +++++++++++++ 5 files changed, 86 insertions(+), 11 deletions(-) create mode 100644 packages/venia-concept/src/components/SwatchTooltip/index.js create mode 100644 packages/venia-concept/src/components/SwatchTooltip/swatchTooltip.css create mode 100644 packages/venia-concept/src/components/SwatchTooltip/swatchTooltip.js diff --git a/packages/venia-concept/src/components/ProductOptions/swatch.css b/packages/venia-concept/src/components/ProductOptions/swatch.css index 6895d4124e..c02ee770fa 100644 --- a/packages/venia-concept/src/components/ProductOptions/swatch.css +++ b/packages/venia-concept/src/components/ProductOptions/swatch.css @@ -4,6 +4,7 @@ border-color: rgba(0, 0, 0, 0.1); color: white; padding: 0; + margin: 0; --venia-swatch-bg: var(--venia-grey); } diff --git a/packages/venia-concept/src/components/ProductOptions/swatch.js b/packages/venia-concept/src/components/ProductOptions/swatch.js index 6995ee77f6..9a4140955f 100644 --- a/packages/venia-concept/src/components/ProductOptions/swatch.js +++ b/packages/venia-concept/src/components/ProductOptions/swatch.js @@ -3,7 +3,9 @@ import { bool, number, object, oneOfType, shape, string } from 'prop-types'; import classify from 'src/classify'; import Icon from 'src/components/Icon'; +import SwatchTooltip from 'src/components/SwatchTooltip'; import CheckIcon from 'react-feather/dist/icons/check'; + import defaultClasses from './swatch.css'; import { memoizedGetRandomColor } from 'src/util/getRandomColor'; @@ -44,32 +46,36 @@ class Swatch extends Component { hasFocus, isSelected, item, - // eslint-disable-next-line - itemIndex, style, ...restProps } = props; + const className = classes[getClassName('root', isSelected, hasFocus)]; const { label, value_index } = item; + // TODO: use the colors from graphQL when they become available. + const randomColor = memoizedGetRandomColor(value_index); + // We really want to avoid specifying presentation within JS. // Swatches are unusual in that their color is data, not presentation, // but applying color *is* presentational. // So we merely provide the color data here, and let the CSS decide // how to use that color (e.g., background, border). const finalStyle = Object.assign({}, style, { - '--venia-swatch-bg': memoizedGetRandomColor(value_index) + '--venia-swatch-bg': randomColor }); return ( - + + + ); } } diff --git a/packages/venia-concept/src/components/SwatchTooltip/index.js b/packages/venia-concept/src/components/SwatchTooltip/index.js new file mode 100644 index 0000000000..78deaffdf3 --- /dev/null +++ b/packages/venia-concept/src/components/SwatchTooltip/index.js @@ -0,0 +1 @@ +export { default } from './swatchTooltip'; diff --git a/packages/venia-concept/src/components/SwatchTooltip/swatchTooltip.css b/packages/venia-concept/src/components/SwatchTooltip/swatchTooltip.css new file mode 100644 index 0000000000..61c1ca8c2a --- /dev/null +++ b/packages/venia-concept/src/components/SwatchTooltip/swatchTooltip.css @@ -0,0 +1,39 @@ +.root { + margin-left: 1rem; + margin-top: 1rem; + position: relative; + --tooltip-display: none; +} + +.root:hover { + --tooltip-display: inline-flex; +} + +.tooltip { + display: var(--tooltip-display); + align-items: center; + position: absolute; + --tooltip-height: 2rem; + top: calc((var(--tooltip-height) + 0.8rem) * -1); + left: 0; + height: var(--tooltip-height); + width: auto; + border: 1px solid #d1d1d1; + border-radius: 2px; + box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.15); + background-color: black; + color: white; + padding: 0.5rem 1.25rem; +} + +.tooltip:before { + content: ''; + position: absolute; + top: 100%; + left: 1rem; + height: 0; + width: 0; + border-top: 0.5rem solid black; + border-left: 0.5rem solid transparent; + border-right: 0.5rem solid transparent; +} diff --git a/packages/venia-concept/src/components/SwatchTooltip/swatchTooltip.js b/packages/venia-concept/src/components/SwatchTooltip/swatchTooltip.js new file mode 100644 index 0000000000..44d2156cb9 --- /dev/null +++ b/packages/venia-concept/src/components/SwatchTooltip/swatchTooltip.js @@ -0,0 +1,28 @@ +import React, { Component } from 'react'; +import { shape, string } from 'prop-types'; + +import classify from 'src/classify'; +import defaultClasses from './swatchTooltip.css'; + +class SwatchTooltip extends Component { + static propTypes = { + classes: shape({ + root: string, + tooltip: string + }), + text: string + }; + + render() { + const { text, children, classes } = this.props; + + return ( +
+ {text} + {children} +
+ ); + } +} + +export default classify(defaultClasses)(SwatchTooltip); From a155af7a618dfd200979ce34c3bb82a3748efa0f Mon Sep 17 00:00:00 2001 From: Andrew Terranova Date: Mon, 25 Feb 2019 15:27:58 -0600 Subject: [PATCH 02/11] Updates unit test snapshots --- .../__snapshots__/option.spec.js.snap | 60 ++++--- .../__snapshots__/swatch.spec.js.snap | 166 +++++++++++------- .../__snapshots__/swatchList.spec.js.snap | 30 ++-- 3 files changed, 161 insertions(+), 95 deletions(-) diff --git a/packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/option.spec.js.snap b/packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/option.spec.js.snap index f033e545ea..315c53b3d4 100644 --- a/packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/option.spec.js.snap +++ b/packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/option.spec.js.snap @@ -14,30 +14,50 @@ exports[`renders Option component correctly 1`] = `
-
+
+ + blue + +
`; diff --git a/packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap b/packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap index d3bc514636..9ac85e8c4a 100644 --- a/packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap +++ b/packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap @@ -1,89 +1,125 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`appends "_focused" to className if hasFocus is true 1`] = ` - + + `; exports[`renders a Swatch correctly 1`] = ` - + + `; diff --git a/packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/swatchList.spec.js.snap b/packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/swatchList.spec.js.snap index 5b908676b4..5444641f05 100644 --- a/packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/swatchList.spec.js.snap +++ b/packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/swatchList.spec.js.snap @@ -4,17 +4,27 @@ exports[`renders SwatchList component correctly 1`] = `
-
`; From edbbbef1a7929d163ce3078ac8577e51e950e983 Mon Sep 17 00:00:00 2001 From: Andrew Terranova Date: Wed, 13 Mar 2019 15:47:13 -0500 Subject: [PATCH 03/11] Removes itemIndex attribute from button rendered by Swatch component --- .../ProductOptions/__tests__/__snapshots__/option.spec.js.snap | 2 -- .../__tests__/__snapshots__/swatchList.spec.js.snap | 1 - packages/venia-concept/src/components/ProductOptions/swatch.js | 2 ++ 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/option.spec.js.snap b/packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/option.spec.js.snap index 315c53b3d4..9f4bb004ef 100644 --- a/packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/option.spec.js.snap +++ b/packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/option.spec.js.snap @@ -24,7 +24,6 @@ exports[`renders Option component correctly 1`] = `