Added color prop to SwatchProductOption to allow developers to set th…

src/option/ProductOptionSelector.js

@@ -56,6 +56,7 @@ export default function ProductOptionSelector({
             key={option.id}
             className={clsx(classes.button, optionProps.className)}
             index={i}
+            color={option.color}
             imageProps={option.image}
             value={option}
             skeleton={skeleton != null}

src/option/SwatchProductOption.js

@@ -177,6 +177,7 @@ export default function SwatchProductOption({
   selected,
   label,
   classes,
+  color,
   imageProps,
   onClick,
   SelectedIcon,
@@ -225,15 +226,25 @@ export default function SwatchProductOption({
         >
           <SelectedIcon className={classes.icon} />
         </div>
-        <ImageComponent
-          className={clsx({
-            [classes.disabled]: disabled,
-          })}
-          classes={{ image: classes.image }}
-          fill
-          aspectRatio={1}
-          {...imageProps}
-        />
+        {color ? (
+          <div
+            className={clsx({
+              [classes.image]: true,
+              [classes.disabled]: disabled,
+            })}
+            style={{ backgroundColor: color }}
+          />
+        ) : (
+          <ImageComponent
+            className={clsx({
+              [classes.disabled]: disabled,
+            })}
+            classes={{ image: classes.image }}
+            fill
+            aspectRatio={1}
+            {...imageProps}
+          />
+        )}
         {disabled && strikeThroughDisabled && (
           <div
             className={clsx({
@@ -267,7 +278,11 @@ SwatchProductOption.propTypes = {
    */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   /**
-   * Props for the `Image` element.
+   * A CSS color value to set the color of the swatch. Use either `color` or `imageProps`.
+   */
+  color: PropTypes.string,
+  /**
+   * Props for the `Image` element. Use either `color` or `imageProps`.
    */
   imageProps: PropTypes.shape(Image.propTypes),
   /**

src/option/TextProductOption.js

@@ -143,5 +143,5 @@ TextProductOption.propTypes = {
 TextProductOption.defaultProps = {
   selected: false,
   strikeThroughDisabled: false,
-  strikeThroughAngle: 30,
+  strikeThroughAngle: 27,
 }

test/option/ProductOption.test.js

@@ -153,4 +153,20 @@ describe('ProductOption', () => {
         .hasClass(/strikeThrough/),
     ).toEqual(true)
   })
+
+  it('should set the background color based on the color prop', () => {
+    const option = { id: 'test', color: '#ffffff' }
+
+    wrapper = mount(
+      <ProductOption
+        value={option}
+        selectedOption={option}
+        showLabel
+        variant="swatch"
+        color="#ffffff"
+      />,
+    )
+
+    expect(wrapper.find('button > div + div').props().style.backgroundColor).toEqual(option.color)
+  })
 })