[CI-4381] Fix clicking on ProductSwatch initiating a redirect (#156)

* Add event handling in productswatch

* Add note in storybook docs

* Update comment

* Update position of event modifiers

* Move event modifer to swatch container

* Change position of handler

* Update implementation

* Update storybook

---------

Co-authored-by: Evan Yan <evan.yan@constructor.io>

Author: evanyan13

src/components/ProductSwatch/ProductSwatch.css

@@ -27,6 +27,8 @@
 .cio-swatch-container {
   display: flex;
   flex-wrap: wrap;
-  padding: 0;
+  padding: 16px;
   gap: 10px;
+  margin: auto;
+  cursor: default;
 }

src/components/ProductSwatch/ProductSwatch.tsx

@@ -31,6 +31,10 @@ export default function ProductSwatch(props: ProductSwatchProps) {
     }
   };
 
+  const swatchContainerClickHandler = (e: React.MouseEvent) => {
+    e.preventDefault();
+  };
+
   return (
     <>
       {typeof children === 'function' ? (
@@ -40,7 +44,8 @@ export default function ProductSwatch(props: ProductSwatchProps) {
           selectedVariation,
         })
       ) : (
-        <div>
+        /* eslint-disable jsx-a11y/no-static-element-interactions */
+        <div onClick={swatchContainerClickHandler}>
           <ul className='cio-swatch-container'>
             {swatchList?.map((swatch) => {
               const isSelected = selectedVariation?.variationId === swatch.variationId;

src/stories/components/ProductSwatch/Code Examples.mdx

@@ -1,45 +1,63 @@
 import { Meta, Canvas, Markdown } from '@storybook/blocks';
 import * as ProductSwatchStories from './ProductSwatch.stories';
-import RenderProps from './RenderProps.md?raw'
+import RenderProps from './RenderProps.md?raw';
 /* This "?raw" import raw text form the md file */
 
 <Meta of={ProductSwatchStories} />
 
 # `ProductSwatch`
+
 A Component to manage Product Swatch interactions and UI.
 
 <Canvas of={ProductSwatchStories.Primary} />
 
 {/* Todo: Update examples */}
+
 ## Basic Example
-  ```jsx
-  import React from 'react';
-  import { CioPlp, ProductSwatch, useProductSwatch } from '@constructor-io/constructorio-ui-plp';
 
-  const apiKey = 'MY_API_KEY'
+```jsx
+import React from 'react';
+import { CioPlp, ProductSwatch, useProductSwatch } from '@constructor-io/constructorio-ui-plp';
 
-  function MyComponent() {
-  const {swatchList, selectedVariation, selectVariation} = useProductSwatch({ item });
+const apiKey = 'MY_API_KEY';
 
-    return (
-      <>
-        <CioPlp apiKey={MY_API_KEY}>
-          <ProductSwatch swatchObject={{ swatchList, selectedVariation, selectVariation }} />
-        </CioPlp>
-      </>
-    );
-  }
-  ```
+function MyComponent() {
+  const { swatchList, selectedVariation, selectVariation } = useProductSwatch({ item });
 
+  return (
+    <>
+      <CioPlp apiKey={MY_API_KEY}>
+        <ProductSwatch swatchObject={{ swatchList, selectedVariation, selectVariation }} />
+      </CioPlp>
+    </>
+  );
+}
+```
 
 ## Render Props pattern
+
 If you prefer handle the rendering of the ProductSwatch component, you may pass a Render Props function to the component.
+
+> If your `ProductSwatch` is nested within a clickable parent component (eg. `ProductCard`), we recommend adding the following event modifiers to your container:
+>
+> - `event.preventDefault()` - Prevents default browser behaviors like link navigation
+>
+> Example handler:
+>
+> ```js
+> onClickHandler={(event) => {
+>   event.preventDefault();
+> }}
+>
+> <div onClick={onClickHandler}></div>
+> ```
+
 ```jsx
 import { CioPlp, ProductSwatch } from '@constructor-io/constructorio-ui-plp'
 
 function myApp() {
   ...
-  
+
   return (
     <CioPlp apiKey={YOUR_API_KEY}>
       <ProductSwatch>
@@ -72,7 +90,9 @@ function myApp() {
 ```
 
 ### Arguments passed to children via Render Props
->Accessible to children of the ProductSwatch component via render props.
+
+> Accessible to children of the ProductSwatch component via render props.
 
 `ProductSwatch`
+
 <Markdown>{RenderProps}</Markdown>