SwatchTooltip component

packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/option.spec.js.snap

@@ -14,30 +14,50 @@ exports[`renders Option component correctly 1`] = `
   <div
     className="root"
   >
-    <button
+    <div
       className="root"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      style={
-        Object {
-          "--venia-swatch-bg": "123,123,123",
+    >
+      <span
+        className="tooltip"
+      >
+        red
+      </span>
+      <button
+        className="root"
+        itemIndex={0}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        style={
+          Object {
+            "--venia-swatch-bg": "123,123,123",
+          }
         }
-      }
-      title="red"
-    />
-    <button
+        title="red"
+      />
+    </div>
+    <div
       className="root"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      style={
-        Object {
-          "--venia-swatch-bg": "123,123,123",
+    >
+      <span
+        className="tooltip"
+      >
+        blue
+      </span>
+      <button
+        className="root"
+        itemIndex={1}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        style={
+          Object {
+            "--venia-swatch-bg": "123,123,123",
+          }
         }
-      }
-      title="blue"
-    />
+        title="blue"
+      />
+    </div>
   </div>
 </div>
 `;

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`] = `
-<button
-  className="root_focused"
-  style={
-    Object {
-      "--venia-swatch-bg": "123,123,123",
+<div
+  className="root"
+>
+  <span
+    className="tooltip"
+  >
+    red
+  </span>
+  <button
+    className="root_focused"
+    style={
+      Object {
+        "--venia-swatch-bg": "123,123,123",
+      }
     }
-  }
-  title="red"
-/>
+    title="red"
+  />
+</div>
 `;
 
 exports[`appends "_selected" to className if isSelected is true 1`] = `
-<button
-  className="root_selected"
-  style={
-    Object {
-      "--venia-swatch-bg": "123,123,123",
-    }
-  }
-  title="red"
+<div
+  className="root"
 >
   <span
-    className="root"
+    className="tooltip"
   >
-    <svg
-      fill="none"
-      height="24"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <polyline
-        points="20 6 9 17 4 12"
-      />
-    </svg>
+    red
   </span>
-</button>
+  <button
+    className="root_selected"
+    style={
+      Object {
+        "--venia-swatch-bg": "123,123,123",
+      }
+    }
+    title="red"
+  >
+    <span
+      className="root"
+    >
+      <svg
+        fill="none"
+        height="24"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <polyline
+          points="20 6 9 17 4 12"
+        />
+      </svg>
+    </span>
+  </button>
+</div>
 `;
 
 exports[`renders a Swatch correctly 1`] = `
-<button
+<div
   className="root"
-  style={
-    Object {
-      "--venia-swatch-bg": "123,123,123",
+>
+  <span
+    className="tooltip"
+  >
+    red
+  </span>
+  <button
+    className="root"
+    style={
+      Object {
+        "--venia-swatch-bg": "123,123,123",
+      }
     }
-  }
-  title="red"
-/>
+    title="red"
+  />
+</div>
 `;
 
 exports[`renders an icon if isSelected is true 1`] = `
-<button
-  className="root_selected"
-  style={
-    Object {
-      "--venia-swatch-bg": "123,123,123",
-    }
-  }
-  title="red"
+<div
+  className="root"
 >
   <span
-    className="root"
+    className="tooltip"
   >
-    <svg
-      fill="none"
-      height="24"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <polyline
-        points="20 6 9 17 4 12"
-      />
-    </svg>
+    red
   </span>
-</button>
+  <button
+    className="root_selected"
+    style={
+      Object {
+        "--venia-swatch-bg": "123,123,123",
+      }
+    }
+    title="red"
+  >
+    <span
+      className="root"
+    >
+      <svg
+        fill="none"
+        height="24"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <polyline
+          points="20 6 9 17 4 12"
+        />
+      </svg>
+    </span>
+  </button>
+</div>
 `;

packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/swatchList.spec.js.snap

@@ -4,17 +4,27 @@ exports[`renders SwatchList component correctly 1`] = `
 <div
   className="root"
 >
-  <button
+  <div
     className="root"
-    onBlur={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
-    style={
-      Object {
-        "--venia-swatch-bg": "123,123,123",
+  >
+    <span
+      className="tooltip"
+    >
+      foo
+    </span>
+    <button
+      className="root"
+      itemIndex={0}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      style={
+        Object {
+          "--venia-swatch-bg": "123,123,123",
+        }
       }
-    }
-    title="foo"
-  />
+      title="foo"
+    />
+  </div>
 </div>
 `;

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);
 }
 

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 (
-            <button
-                {...restProps}
-                className={className}
-                style={finalStyle}
-                title={label}
-            >
-                {icon}
-            </button>
+            <SwatchTooltip text={label}>
+                <button
+                    {...restProps}
+                    className={className}
+                    style={finalStyle}
+                    title={label}
+                >
+                    {icon}
+                </button>
+            </SwatchTooltip>
         );
     }
 }

packages/venia-concept/src/components/SwatchTooltip/index.js

@@ -0,0 +1 @@
+export { default } from './swatchTooltip';