STENCIL-2448: Add expanded view of swatch on hover

Author: bc-ong

assets/scss/layouts/products/_productSwatch.scss

@@ -12,8 +12,44 @@ $position_of_x : str-index($value_of_swatch_size, "x");
 $first_value : str-slice($value_of_swatch_size, 0, $position_of_x - 1);
 $second_value : str-slice($value_of_swatch_size, $position_of_x + 1);
 
+[data-product-attribute] .form-option.form-option-swatch {
+    overflow: visible;
+}
+
 .form-option-variant--color,
 .form-option-variant--pattern {
     height: $second_value +"px";
     width: $first_value +"px";
 }
+
+.form-option-expanded {
+    background-color: stencilColor("body-bg");
+    border: 1px solid stencilColor("input-border-color-active");
+    left: calc(100% + 55px);
+    opacity: 0;
+    padding: 3px;
+    position: absolute;
+    top: calc(100% + 5px);
+    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    visibility: hidden;
+}
+
+.form-option:hover {
+    .form-option-expanded{
+        opacity: 1;
+        transform: translate(-50%, 0);
+        visibility: visible;
+        z-index: 5000;
+    }
+}
+
+.form-option-image {
+    background: {
+        position: 50%;
+        repeat: no-repeat;
+        size: cover;
+    }
+    display: block;
+    height: 100px;
+    width: 100px;
+}

templates/components/products/options/swatch.html

@@ -10,7 +10,7 @@
 
     {{#each this.values}}
         <input class="form-radio" type="radio" name="attribute[{{../id}}]" value="{{id}}" id="attribute_{{id}}" {{#if selected}}checked{{/if}} {{#if ../required}}required{{/if}}>
-        <label class="form-option" for="attribute_{{id}}" data-product-attribute-value="{{id}}">
+        <label class="form-option form-option-swatch" for="attribute_{{id}}" data-product-attribute-value="{{id}}">
             {{#if image}}
                 <span class='form-option-variant form-option-variant--pattern' title="{{this.label}}" style="background-image: url('{{getImage image "swatch_option_size"}}');"></span>
             {{/if}}
@@ -28,6 +28,11 @@
                     {{/if}}
                 {{/if}}
             {{/if}}
+            {{#if pattern}}
+                <span class="form-option-expanded">
+                    <span class="form-option-image" style="background-image: url('{{getImage image 'core-swatch'}}');"></span>
+                </span>
+            {{/if}}
         </label>
     {{/each}}
 </div>