From 2fdda2db5512e36913a653dece98e255e63cfba6 Mon Sep 17 00:00:00 2001
From: Dawid Tarasiuk <tarasiukdawid@gmail.com>
Date: Tue, 16 Jun 2020 12:48:57 +0200
Subject: [PATCH] Update product list UI

---
 .../components/ProductList/ProductList.tsx    |  35 +-
 src/products/fixtures.ts                      |  20 +
 src/products/queries.ts                       |   1 +
 src/products/types/ProductFragment.ts         |   1 +
 src/products/types/ProductList.ts             |   1 +
 .../__snapshots__/Stories.test.ts.snap        | 600 +++++++++++++++---
 6 files changed, 568 insertions(+), 90 deletions(-)

diff --git a/src/products/components/ProductList/ProductList.tsx b/src/products/components/ProductList/ProductList.tsx
index 8a0e48cd6..043ac7584 100644
--- a/src/products/components/ProductList/ProductList.tsx
+++ b/src/products/components/ProductList/ProductList.tsx
@@ -62,9 +62,17 @@ const useStyles = makeStyles(
       }
     },
     colNameFixed: {},
+    colNameGrid: {
+      display: "grid",
+      gridColumn: 1
+    },
     colNameHeader: {
       marginLeft: AVATAR_MARGIN
     },
+    colNameType: {
+      color: theme.palette.text.secondary,
+      fontSize: "0.8rem"
+    },
     colPrice: {
       textAlign: "right"
     },
@@ -297,7 +305,21 @@ export const ProductList: React.FC<ProductListProps> = props => {
                     thumbnail={maybe(() => product.thumbnail.url)}
                     data-tc="name"
                   >
-                    {maybe<React.ReactNode>(() => product.name, <Skeleton />)}
+                    {maybe<React.ReactNode>(
+                      () => (
+                        <div className={classes.colNameGrid}>
+                          <span>{product.name}</span>
+                          {product && product.productType && (
+                            <span className={classes.colNameType}>
+                              {product.productType.hasVariants
+                                ? "Configurable"
+                                : "Simple"}
+                            </span>
+                          )}
+                        </div>
+                      ),
+                      <Skeleton />
+                    )}
                   </TableCellAvatar>
                   <DisplayColumn
                     column="productType"
@@ -391,20 +413,13 @@ export const ProductList: React.FC<ProductListProps> = props => {
                         } else {
                           return (
                             <>
-                              {intl.formatMessage({
-                                defaultMessage: "From",
-                                description: "from"
-                              })}{" "}
                               <Money
                                 money={{
                                   amount: min,
                                   currency
                                 }}
-                              />{" "}
-                              {intl.formatMessage({
-                                defaultMessage: "to",
-                                description: "to"
-                              })}{" "}
+                              />
+                              {" - "}
                               <Money
                                 money={{
                                   amount: max,
diff --git a/src/products/fixtures.ts b/src/products/fixtures.ts
index ada70d16a..aed113474 100644
--- a/src/products/fixtures.ts
+++ b/src/products/fixtures.ts
@@ -324,6 +324,7 @@ export const products = (
     name: "Nebula Night Sky Paint",
     productType: {
       __typename: "ProductType",
+      hasVariants: true,
       id: "UHJvZHVjdFR5cGU6Nw==",
       name: "Paint"
     },
@@ -367,6 +368,7 @@ export const products = (
     name: "Light Speed Yellow Paint",
     productType: {
       __typename: "ProductType",
+      hasVariants: true,
       id: "UHJvZHVjdFR5cGU6Nw==",
       name: "Paint"
     },
@@ -410,6 +412,7 @@ export const products = (
     name: "Hyperspace Turquoise Paint",
     productType: {
       __typename: "ProductType",
+      hasVariants: true,
       id: "UHJvZHVjdFR5cGU6Nw==",
       name: "Paint"
     },
@@ -468,6 +471,7 @@ export const products = (
     name: "Pineapple Juice",
     productType: {
       __typename: "ProductType",
+      hasVariants: true,
       id: "UHJvZHVjdFR5cGU6OQ==",
       name: "Juice"
     },
@@ -526,6 +530,7 @@ export const products = (
     name: "Coconut Juice",
     productType: {
       __typename: "ProductType",
+      hasVariants: true,
       id: "UHJvZHVjdFR5cGU6OQ==",
       name: "Juice"
     },
@@ -584,6 +589,7 @@ export const products = (
     name: "Apple Juice",
     productType: {
       __typename: "ProductType",
+      hasVariants: true,
       id: "UHJvZHVjdFR5cGU6OQ==",
       name: "Juice"
     },
@@ -642,6 +648,7 @@ export const products = (
     name: "Orange Juice",
     productType: {
       __typename: "ProductType",
+      hasVariants: true,
       id: "UHJvZHVjdFR5cGU6OQ==",
       name: "Juice"
     },
@@ -700,6 +707,7 @@ export const products = (
     name: "Banana Juice",
     productType: {
       __typename: "ProductType",
+      hasVariants: true,
       id: "UHJvZHVjdFR5cGU6OQ==",
       name: "Juice"
     },
@@ -758,6 +766,7 @@ export const products = (
     name: "Bean Juice",
     productType: {
       __typename: "ProductType",
+      hasVariants: true,
       id: "UHJvZHVjdFR5cGU6OQ==",
       name: "Juice"
     },
@@ -816,6 +825,7 @@ export const products = (
     name: "Carrot Juice",
     productType: {
       __typename: "ProductType",
+      hasVariants: true,
       id: "UHJvZHVjdFR5cGU6OQ==",
       name: "Juice"
     },
@@ -874,6 +884,7 @@ export const products = (
     name: "Green Juice",
     productType: {
       __typename: "ProductType",
+      hasVariants: true,
       id: "UHJvZHVjdFR5cGU6OQ==",
       name: "Juice"
     },
@@ -932,6 +943,7 @@ export const products = (
     name: "Code Division T-shirt",
     productType: {
       __typename: "ProductType",
+      hasVariants: true,
       id: "UHJvZHVjdFR5cGU6MTQ=",
       name: "Top (clothing)"
     },
@@ -990,6 +1002,7 @@ export const products = (
     name: "Polo Shirt",
     productType: {
       __typename: "ProductType",
+      hasVariants: true,
       id: "UHJvZHVjdFR5cGU6MTQ=",
       name: "Top (clothing)"
     },
@@ -1048,6 +1061,7 @@ export const products = (
     name: "Polo Shirt",
     productType: {
       __typename: "ProductType",
+      hasVariants: true,
       id: "UHJvZHVjdFR5cGU6MTQ=",
       name: "Top (clothing)"
     },
@@ -1106,6 +1120,7 @@ export const products = (
     name: "Polo Shirt",
     productType: {
       __typename: "ProductType",
+      hasVariants: true,
       id: "UHJvZHVjdFR5cGU6MTQ=",
       name: "Top (clothing)"
     },
@@ -1164,6 +1179,7 @@ export const products = (
     name: "Polo Shirt",
     productType: {
       __typename: "ProductType",
+      hasVariants: true,
       id: "UHJvZHVjdFR5cGU6MTQ=",
       name: "Top (clothing)"
     },
@@ -1222,6 +1238,7 @@ export const products = (
     name: "Black Hoodie",
     productType: {
       __typename: "ProductType",
+      hasVariants: true,
       id: "UHJvZHVjdFR5cGU6MTQ=",
       name: "Top (clothing)"
     },
@@ -1280,6 +1297,7 @@ export const products = (
     name: "Blue Hoodie",
     productType: {
       __typename: "ProductType",
+      hasVariants: true,
       id: "UHJvZHVjdFR5cGU6MTQ=",
       name: "Top (clothing)"
     },
@@ -1338,6 +1356,7 @@ export const products = (
     name: "Mustard Hoodie",
     productType: {
       __typename: "ProductType",
+      hasVariants: true,
       id: "UHJvZHVjdFR5cGU6MTQ=",
       name: "Top (clothing)"
     },
@@ -1396,6 +1415,7 @@ export const products = (
     name: "Colored Parrot Cushion",
     productType: {
       __typename: "ProductType",
+      hasVariants: true,
       id: "UHJvZHVjdFR5cGU6MTI=",
       name: "Cushion"
     },
diff --git a/src/products/queries.ts b/src/products/queries.ts
index 9e0f7c911..47dba63fc 100644
--- a/src/products/queries.ts
+++ b/src/products/queries.ts
@@ -73,6 +73,7 @@ export const productFragment = gql`
     productType {
       id
       name
+      hasVariants
     }
   }
 `;
diff --git a/src/products/types/ProductFragment.ts b/src/products/types/ProductFragment.ts
index f5045a36d..c7ab4b127 100644
--- a/src/products/types/ProductFragment.ts
+++ b/src/products/types/ProductFragment.ts
@@ -15,6 +15,7 @@ export interface ProductFragment_productType {
   __typename: "ProductType";
   id: string;
   name: string;
+  hasVariants: boolean;
 }
 
 export interface ProductFragment {
diff --git a/src/products/types/ProductList.ts b/src/products/types/ProductList.ts
index fc63e6d08..61bcdb103 100644
--- a/src/products/types/ProductList.ts
+++ b/src/products/types/ProductList.ts
@@ -17,6 +17,7 @@ export interface ProductList_products_edges_node_productType {
   __typename: "ProductType";
   id: string;
   name: string;
+  hasVariants: boolean;
 }
 
 export interface ProductList_products_edges_node_attributes_attribute {
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index fbecca232..3de6622f5 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -124779,7 +124779,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Nebula Night Sky Paint
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Nebula Night Sky Paint
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -124803,7 +124814,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $15.00 to $49.00
+                  $15.00 - $49.00
                 </td>
               </tr>
               <tr
@@ -124844,7 +124855,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Light Speed Yellow Paint
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Light Speed Yellow Paint
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -124868,7 +124890,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $15.00 to $49.00
+                  $15.00 - $49.00
                 </td>
               </tr>
               <tr
@@ -124909,7 +124931,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Hyperspace Turquoise Paint
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Hyperspace Turquoise Paint
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -124933,7 +124966,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $15.00 to $49.00
+                  $15.00 - $49.00
                 </td>
               </tr>
               <tr
@@ -124974,7 +125007,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Pineapple Juice
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Pineapple Juice
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -124998,7 +125042,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -125039,7 +125083,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Coconut Juice
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Coconut Juice
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -125063,7 +125118,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -125104,7 +125159,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Apple Juice
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Apple Juice
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -125128,7 +125194,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -125169,7 +125235,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Orange Juice
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Orange Juice
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -125193,7 +125270,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -125234,7 +125311,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Banana Juice
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Banana Juice
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -125258,7 +125346,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -125299,7 +125387,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Bean Juice
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Bean Juice
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -125323,7 +125422,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -125364,7 +125463,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Carrot Juice
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Carrot Juice
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -125388,7 +125498,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -125429,7 +125539,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Green Juice
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Green Juice
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -125453,7 +125574,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -125494,7 +125615,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Code Division T-shirt
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Code Division T-shirt
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -125518,7 +125650,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -125559,7 +125691,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Polo Shirt
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Polo Shirt
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -125583,7 +125726,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -125624,7 +125767,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Polo Shirt
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Polo Shirt
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -125648,7 +125802,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -125689,7 +125843,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Polo Shirt
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Polo Shirt
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -125713,7 +125878,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -125754,7 +125919,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Polo Shirt
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Polo Shirt
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -125778,7 +125954,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -125819,7 +125995,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Black Hoodie
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Black Hoodie
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -125843,7 +126030,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -125884,7 +126071,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Blue Hoodie
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Blue Hoodie
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -125908,7 +126106,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -125949,7 +126147,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Mustard Hoodie
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Mustard Hoodie
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -125973,7 +126182,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -126014,7 +126223,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Colored Parrot Cushion
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Colored Parrot Cushion
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -126038,7 +126258,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
             </tbody>
@@ -127374,7 +127594,18 @@ exports[`Storyshots Views / Products / Product list not published 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Light Speed Yellow Paint
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Light Speed Yellow Paint
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -127398,7 +127629,7 @@ exports[`Storyshots Views / Products / Product list not published 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $15.00 to $49.00
+                  $15.00 - $49.00
                 </td>
               </tr>
               <tr
@@ -127439,7 +127670,18 @@ exports[`Storyshots Views / Products / Product list not published 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Hyperspace Turquoise Paint
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Hyperspace Turquoise Paint
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -127463,7 +127705,7 @@ exports[`Storyshots Views / Products / Product list not published 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $15.00 to $49.00
+                  $15.00 - $49.00
                 </td>
               </tr>
               <tr
@@ -127504,7 +127746,18 @@ exports[`Storyshots Views / Products / Product list not published 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Bean Juice
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Bean Juice
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -127528,7 +127781,7 @@ exports[`Storyshots Views / Products / Product list not published 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -127569,7 +127822,18 @@ exports[`Storyshots Views / Products / Product list not published 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Black Hoodie
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Black Hoodie
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -127593,7 +127857,7 @@ exports[`Storyshots Views / Products / Product list not published 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -127634,7 +127898,18 @@ exports[`Storyshots Views / Products / Product list not published 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Colored Parrot Cushion
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Colored Parrot Cushion
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -127658,7 +127933,7 @@ exports[`Storyshots Views / Products / Product list not published 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
             </tbody>
@@ -128100,7 +128375,18 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Nebula Night Sky Paint
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Nebula Night Sky Paint
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -128124,7 +128410,7 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $15.00 to $49.00
+                  $15.00 - $49.00
                 </td>
               </tr>
               <tr
@@ -128165,7 +128451,18 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Pineapple Juice
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Pineapple Juice
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -128189,7 +128486,7 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -128230,7 +128527,18 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Coconut Juice
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Coconut Juice
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -128254,7 +128562,7 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -128295,7 +128603,18 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Apple Juice
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Apple Juice
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -128319,7 +128638,7 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -128360,7 +128679,18 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Orange Juice
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Orange Juice
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -128384,7 +128714,7 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -128425,7 +128755,18 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Banana Juice
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Banana Juice
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -128449,7 +128790,7 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -128490,7 +128831,18 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Carrot Juice
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Carrot Juice
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -128514,7 +128866,7 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -128555,7 +128907,18 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Green Juice
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Green Juice
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -128579,7 +128942,7 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -128620,7 +128983,18 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Code Division T-shirt
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Code Division T-shirt
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -128644,7 +129018,7 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -128685,7 +129059,18 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Polo Shirt
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Polo Shirt
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -128709,7 +129094,7 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -128750,7 +129135,18 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Polo Shirt
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Polo Shirt
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -128774,7 +129170,7 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -128815,7 +129211,18 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Polo Shirt
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Polo Shirt
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -128839,7 +129246,7 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -128880,7 +129287,18 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Polo Shirt
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Polo Shirt
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -128904,7 +129322,7 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -128945,7 +129363,18 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Blue Hoodie
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Blue Hoodie
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -128969,7 +129398,7 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
               <tr
@@ -129010,7 +129439,18 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Mustard Hoodie
+                      <div
+                        class="ProductList-colNameGrid-id"
+                      >
+                        <span>
+                          Mustard Hoodie
+                        </span>
+                        <span
+                          class="ProductList-colNameType-id"
+                        >
+                          Configurable
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -129034,7 +129474,7 @@ exports[`Storyshots Views / Products / Product list published 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  From $3.00 to $7.00
+                  $3.00 - $7.00
                 </td>
               </tr>
             </tbody>