@pareto-engineering/design-system 5.0.0 → 5.0.1

package/tests/__snapshots__/Storyshots.test.js.snap

@@ -463,17 +463,98 @@ exports[`Storyshots a/AreaChart Default 1`] = `
   <div
     className="base area-chart"
   >
-    <h3>
-      Approval rate over time
-    </h3>
     <div
-      className="custom-legend"
+      className="chart-header"
+    >
+      <h3>
+        Approval rate over time
+      </h3>
+      <div
+        className="base y-labels-dropdown"
+      >
+        <button
+          className="dropdown-button"
+          onClick={[Function]}
+          type="button"
+        >
+          Submission status
+          <span
+            className="icon "
+          >
+            W
+          </span>
+        </button>
+        <div
+          className="dropdown-content "
+        >
+          <div
+            className="dropdown-item modifierActive"
+            onClick={[Function]}
+          >
+            <span
+              className="status-dot"
+              style={
+                {
+                  "backgroundColor": "purple",
+                }
+              }
+            />
+            Average
+            <span
+              className="icon checkmark"
+            >
+              I
+            </span>
+          </div>
+          <div
+            className="dropdown-item modifierActive"
+            onClick={[Function]}
+          >
+            <span
+              className="status-dot"
+              style={
+                {
+                  "backgroundColor": "green",
+                }
+              }
+            />
+            Best
+            <span
+              className="icon checkmark"
+            >
+              I
+            </span>
+          </div>
+          <div
+            className="dropdown-item modifierActive"
+            onClick={[Function]}
+          >
+            <span
+              className="status-dot"
+              style={
+                {
+                  "backgroundColor": "orange",
+                }
+              }
+            />
+            Worst
+            <span
+              className="icon checkmark"
+            >
+              I
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="base custom-legend"
     >
       <div
         className="item"
       >
         <span
-          className="line"
+          className="dot"
           style={
             {
               "backgroundColor": "purple",
@@ -490,7 +571,7 @@ exports[`Storyshots a/AreaChart Default 1`] = `
         className="item"
       >
         <span
-          className="line"
+          className="dot"
           style={
             {
               "backgroundColor": "green",
@@ -507,7 +588,7 @@ exports[`Storyshots a/AreaChart Default 1`] = `
         className="item"
       >
         <span
-          className="line"
+          className="dot"
           style={
             {
               "backgroundColor": "orange",
@@ -545,17 +626,98 @@ exports[`Storyshots a/AreaChart Filled 1`] = `
   <div
     className="base area-chart"
   >
-    <h3>
-      Approval rate over time
-    </h3>
     <div
-      className="custom-legend"
+      className="chart-header"
+    >
+      <h3>
+        Approval rate over time
+      </h3>
+      <div
+        className="base y-labels-dropdown"
+      >
+        <button
+          className="dropdown-button"
+          onClick={[Function]}
+          type="button"
+        >
+          Submission status
+          <span
+            className="icon "
+          >
+            W
+          </span>
+        </button>
+        <div
+          className="dropdown-content "
+        >
+          <div
+            className="dropdown-item modifierActive"
+            onClick={[Function]}
+          >
+            <span
+              className="status-dot"
+              style={
+                {
+                  "backgroundColor": "purple",
+                }
+              }
+            />
+            Average
+            <span
+              className="icon checkmark"
+            >
+              I
+            </span>
+          </div>
+          <div
+            className="dropdown-item modifierActive"
+            onClick={[Function]}
+          >
+            <span
+              className="status-dot"
+              style={
+                {
+                  "backgroundColor": "green",
+                }
+              }
+            />
+            Best
+            <span
+              className="icon checkmark"
+            >
+              I
+            </span>
+          </div>
+          <div
+            className="dropdown-item modifierActive"
+            onClick={[Function]}
+          >
+            <span
+              className="status-dot"
+              style={
+                {
+                  "backgroundColor": "orange",
+                }
+              }
+            />
+            Worst
+            <span
+              className="icon checkmark"
+            >
+              I
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="base custom-legend"
     >
       <div
         className="item"
       >
         <span
-          className="line"
+          className="dot"
           style={
             {
               "backgroundColor": "purple",
@@ -572,7 +734,7 @@ exports[`Storyshots a/AreaChart Filled 1`] = `
         className="item"
       >
         <span
-          className="line"
+          className="dot"
           style={
             {
               "backgroundColor": "green",
@@ -589,7 +751,7 @@ exports[`Storyshots a/AreaChart Filled 1`] = `
         className="item"
       >
         <span
-          className="line"
+          className="dot"
           style={
             {
               "backgroundColor": "orange",
@@ -634,17 +796,98 @@ exports[`Storyshots a/AreaChart Side By Side 1`] = `
     <div
       className="base area-chart"
     >
-      <h3>
-        Approval rate over time
-      </h3>
       <div
-        className="custom-legend"
+        className="chart-header"
+      >
+        <h3>
+          Approval rate over time
+        </h3>
+        <div
+          className="base y-labels-dropdown"
+        >
+          <button
+            className="dropdown-button"
+            onClick={[Function]}
+            type="button"
+          >
+            Submission status
+            <span
+              className="icon "
+            >
+              W
+            </span>
+          </button>
+          <div
+            className="dropdown-content "
+          >
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "purple",
+                  }
+                }
+              />
+              Average
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "green",
+                  }
+                }
+              />
+              Best
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "orange",
+                  }
+                }
+              />
+              Worst
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="base custom-legend"
       >
         <div
           className="item"
         >
           <span
-            className="line"
+            className="dot"
             style={
               {
                 "backgroundColor": "purple",
@@ -661,7 +904,7 @@ exports[`Storyshots a/AreaChart Side By Side 1`] = `
           className="item"
         >
           <span
-            className="line"
+            className="dot"
             style={
               {
                 "backgroundColor": "green",
@@ -678,7 +921,7 @@ exports[`Storyshots a/AreaChart Side By Side 1`] = `
           className="item"
         >
           <span
-            className="line"
+            className="dot"
             style={
               {
                 "backgroundColor": "orange",
@@ -712,17 +955,98 @@ exports[`Storyshots a/AreaChart Side By Side 1`] = `
     <div
       className="base area-chart"
     >
-      <h3>
-        Submission rate over time
-      </h3>
       <div
-        className="custom-legend"
+        className="chart-header"
+      >
+        <h3>
+          Submission rate over time
+        </h3>
+        <div
+          className="base y-labels-dropdown"
+        >
+          <button
+            className="dropdown-button"
+            onClick={[Function]}
+            type="button"
+          >
+            Submission status
+            <span
+              className="icon "
+            >
+              W
+            </span>
+          </button>
+          <div
+            className="dropdown-content "
+          >
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "purple",
+                  }
+                }
+              />
+              Average
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "green",
+                  }
+                }
+              />
+              Best
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "orange",
+                  }
+                }
+              />
+              Worst
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="base custom-legend"
       >
         <div
           className="item"
         >
           <span
-            className="line"
+            className="dot"
             style={
               {
                 "backgroundColor": "purple",
@@ -739,7 +1063,7 @@ exports[`Storyshots a/AreaChart Side By Side 1`] = `
           className="item"
         >
           <span
-            className="line"
+            className="dot"
             style={
               {
                 "backgroundColor": "green",
@@ -756,7 +1080,7 @@ exports[`Storyshots a/AreaChart Side By Side 1`] = `
           className="item"
         >
           <span
-            className="line"
+            className="dot"
             style={
               {
                 "backgroundColor": "orange",
@@ -802,37 +1126,118 @@ exports[`Storyshots a/AreaChart Side By Side Filled 1`] = `
     <div
       className="base area-chart"
     >
-      <h3>
-        Approval rate over time
-      </h3>
       <div
-        className="custom-legend"
+        className="chart-header"
       >
+        <h3>
+          Approval rate over time
+        </h3>
         <div
-          className="item"
+          className="base y-labels-dropdown"
         >
-          <span
-            className="line"
-            style={
-              {
-                "backgroundColor": "purple",
-              }
-            }
-          />
-          <span
-            className="text"
+          <button
+            className="dropdown-button"
+            onClick={[Function]}
+            type="button"
           >
-            Average
-          </span>
-        </div>
-        <div
-          className="item"
-        >
-          <span
-            className="line"
-            style={
-              {
-                "backgroundColor": "green",
+            Submission status
+            <span
+              className="icon "
+            >
+              W
+            </span>
+          </button>
+          <div
+            className="dropdown-content "
+          >
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "purple",
+                  }
+                }
+              />
+              Average
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "green",
+                  }
+                }
+              />
+              Best
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "orange",
+                  }
+                }
+              />
+              Worst
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="base custom-legend"
+      >
+        <div
+          className="item"
+        >
+          <span
+            className="dot"
+            style={
+              {
+                "backgroundColor": "purple",
+              }
+            }
+          />
+          <span
+            className="text"
+          >
+            Average
+          </span>
+        </div>
+        <div
+          className="item"
+        >
+          <span
+            className="dot"
+            style={
+              {
+                "backgroundColor": "green",
               }
             }
           />
@@ -846,7 +1251,7 @@ exports[`Storyshots a/AreaChart Side By Side Filled 1`] = `
           className="item"
         >
           <span
-            className="line"
+            className="dot"
             style={
               {
                 "backgroundColor": "orange",
@@ -880,17 +1285,98 @@ exports[`Storyshots a/AreaChart Side By Side Filled 1`] = `
     <div
       className="base area-chart"
     >
-      <h3>
-        Submission rate over time
-      </h3>
       <div
-        className="custom-legend"
+        className="chart-header"
+      >
+        <h3>
+          Submission rate over time
+        </h3>
+        <div
+          className="base y-labels-dropdown"
+        >
+          <button
+            className="dropdown-button"
+            onClick={[Function]}
+            type="button"
+          >
+            Submission status
+            <span
+              className="icon "
+            >
+              W
+            </span>
+          </button>
+          <div
+            className="dropdown-content "
+          >
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "purple",
+                  }
+                }
+              />
+              Average
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "green",
+                  }
+                }
+              />
+              Best
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "orange",
+                  }
+                }
+              />
+              Worst
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="base custom-legend"
       >
         <div
           className="item"
         >
           <span
-            className="line"
+            className="dot"
             style={
               {
                 "backgroundColor": "purple",
@@ -907,7 +1393,7 @@ exports[`Storyshots a/AreaChart Side By Side Filled 1`] = `
           className="item"
         >
           <span
-            className="line"
+            className="dot"
             style={
               {
                 "backgroundColor": "green",
@@ -924,7 +1410,7 @@ exports[`Storyshots a/AreaChart Side By Side Filled 1`] = `
           className="item"
         >
           <span
-            className="line"
+            className="dot"
             style={
               {
                 "backgroundColor": "orange",
@@ -951,6 +1437,715 @@ exports[`Storyshots a/AreaChart Side By Side Filled 1`] = `
 </div>
 `;
 
+exports[`Storyshots a/BarChart Default 1`] = `
+<div
+  style={
+    {
+      "height": "100%",
+      "width": "100%",
+    }
+  }
+>
+  <div
+    className="base bar-chart"
+  >
+    <div
+      className="chart-header"
+    >
+      <h3>
+        Throughput
+      </h3>
+      <div
+        className="base y-labels-dropdown"
+      >
+        <button
+          className="dropdown-button"
+          onClick={[Function]}
+          type="button"
+        >
+          Submission status
+          <span
+            className="icon "
+          >
+            W
+          </span>
+        </button>
+        <div
+          className="dropdown-content "
+        >
+          <div
+            className="dropdown-item modifierActive"
+            onClick={[Function]}
+          >
+            <span
+              className="status-dot"
+              style={
+                {
+                  "backgroundColor": "purple",
+                }
+              }
+            />
+            pendingReview
+            <span
+              className="icon checkmark"
+            >
+              I
+            </span>
+          </div>
+          <div
+            className="dropdown-item modifierActive"
+            onClick={[Function]}
+          >
+            <span
+              className="status-dot"
+              style={
+                {
+                  "backgroundColor": "green",
+                }
+              }
+            />
+            accepted
+            <span
+              className="icon checkmark"
+            >
+              I
+            </span>
+          </div>
+          <div
+            className="dropdown-item modifierActive"
+            onClick={[Function]}
+          >
+            <span
+              className="status-dot"
+              style={
+                {
+                  "backgroundColor": "orange",
+                }
+              }
+            />
+            rejected
+            <span
+              className="icon checkmark"
+            >
+              I
+            </span>
+          </div>
+          <div
+            className="dropdown-item modifierActive"
+            onClick={[Function]}
+          >
+            <span
+              className="status-dot"
+              style={
+                {
+                  "backgroundColor": "blue",
+                }
+              }
+            />
+            toRevise
+            <span
+              className="icon checkmark"
+            >
+              I
+            </span>
+          </div>
+          <div
+            className="dropdown-item modifierActive"
+            onClick={[Function]}
+          >
+            <span
+              className="status-dot"
+              style={
+                {
+                  "backgroundColor": "red",
+                }
+              }
+            />
+            revised
+            <span
+              className="icon checkmark"
+            >
+              I
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="base custom-legend"
+    >
+      <div
+        className="item"
+      >
+        <span
+          className="dot"
+          style={
+            {
+              "backgroundColor": "purple",
+            }
+          }
+        />
+        <span
+          className="text"
+        >
+          pendingReview
+        </span>
+      </div>
+      <div
+        className="item"
+      >
+        <span
+          className="dot"
+          style={
+            {
+              "backgroundColor": "green",
+            }
+          }
+        />
+        <span
+          className="text"
+        >
+          accepted
+        </span>
+      </div>
+      <div
+        className="item"
+      >
+        <span
+          className="dot"
+          style={
+            {
+              "backgroundColor": "orange",
+            }
+          }
+        />
+        <span
+          className="text"
+        >
+          rejected
+        </span>
+      </div>
+      <div
+        className="item"
+      >
+        <span
+          className="dot"
+          style={
+            {
+              "backgroundColor": "blue",
+            }
+          }
+        />
+        <span
+          className="text"
+        >
+          toRevise
+        </span>
+      </div>
+      <div
+        className="item"
+      >
+        <span
+          className="dot"
+          style={
+            {
+              "backgroundColor": "red",
+            }
+          }
+        />
+        <span
+          className="text"
+        >
+          revised
+        </span>
+      </div>
+    </div>
+    <div
+      style={
+        {
+          "height": 400,
+          "width": "100%",
+        }
+      }
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/BarChart Side By Side 1`] = `
+<div
+  style={
+    {
+      "display": "flex",
+      "gap": "20px",
+    }
+  }
+>
+  <div
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  >
+    <div
+      className="base bar-chart"
+    >
+      <div
+        className="chart-header"
+      >
+        <h3>
+          Throughput
+        </h3>
+        <div
+          className="base y-labels-dropdown"
+        >
+          <button
+            className="dropdown-button"
+            onClick={[Function]}
+            type="button"
+          >
+            Submission status
+            <span
+              className="icon "
+            >
+              W
+            </span>
+          </button>
+          <div
+            className="dropdown-content "
+          >
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "purple",
+                  }
+                }
+              />
+              pendingReview
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "green",
+                  }
+                }
+              />
+              accepted
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "orange",
+                  }
+                }
+              />
+              rejected
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "blue",
+                  }
+                }
+              />
+              toRevise
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "red",
+                  }
+                }
+              />
+              revised
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="base custom-legend"
+      >
+        <div
+          className="item"
+        >
+          <span
+            className="dot"
+            style={
+              {
+                "backgroundColor": "purple",
+              }
+            }
+          />
+          <span
+            className="text"
+          >
+            pendingReview
+          </span>
+        </div>
+        <div
+          className="item"
+        >
+          <span
+            className="dot"
+            style={
+              {
+                "backgroundColor": "green",
+              }
+            }
+          />
+          <span
+            className="text"
+          >
+            accepted
+          </span>
+        </div>
+        <div
+          className="item"
+        >
+          <span
+            className="dot"
+            style={
+              {
+                "backgroundColor": "orange",
+              }
+            }
+          />
+          <span
+            className="text"
+          >
+            rejected
+          </span>
+        </div>
+        <div
+          className="item"
+        >
+          <span
+            className="dot"
+            style={
+              {
+                "backgroundColor": "blue",
+              }
+            }
+          />
+          <span
+            className="text"
+          >
+            toRevise
+          </span>
+        </div>
+        <div
+          className="item"
+        >
+          <span
+            className="dot"
+            style={
+              {
+                "backgroundColor": "red",
+              }
+            }
+          />
+          <span
+            className="text"
+          >
+            revised
+          </span>
+        </div>
+      </div>
+      <div
+        style={
+          {
+            "height": 400,
+            "width": "100%",
+          }
+        }
+      />
+    </div>
+  </div>
+  <div
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  >
+    <div
+      className="base bar-chart"
+    >
+      <div
+        className="chart-header"
+      >
+        <h3>
+          Throughput
+        </h3>
+        <div
+          className="base y-labels-dropdown"
+        >
+          <button
+            className="dropdown-button"
+            onClick={[Function]}
+            type="button"
+          >
+            Submission status
+            <span
+              className="icon "
+            >
+              W
+            </span>
+          </button>
+          <div
+            className="dropdown-content "
+          >
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "purple",
+                  }
+                }
+              />
+              pendingReview
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "green",
+                  }
+                }
+              />
+              accepted
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "orange",
+                  }
+                }
+              />
+              rejected
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "blue",
+                  }
+                }
+              />
+              toRevise
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "red",
+                  }
+                }
+              />
+              revised
+              <span
+                className="icon checkmark"
+              >
+                I
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="base custom-legend"
+      >
+        <div
+          className="item"
+        >
+          <span
+            className="dot"
+            style={
+              {
+                "backgroundColor": "purple",
+              }
+            }
+          />
+          <span
+            className="text"
+          >
+            pendingReview
+          </span>
+        </div>
+        <div
+          className="item"
+        >
+          <span
+            className="dot"
+            style={
+              {
+                "backgroundColor": "green",
+              }
+            }
+          />
+          <span
+            className="text"
+          >
+            accepted
+          </span>
+        </div>
+        <div
+          className="item"
+        >
+          <span
+            className="dot"
+            style={
+              {
+                "backgroundColor": "orange",
+              }
+            }
+          />
+          <span
+            className="text"
+          >
+            rejected
+          </span>
+        </div>
+        <div
+          className="item"
+        >
+          <span
+            className="dot"
+            style={
+              {
+                "backgroundColor": "blue",
+              }
+            }
+          />
+          <span
+            className="text"
+          >
+            toRevise
+          </span>
+        </div>
+        <div
+          className="item"
+        >
+          <span
+            className="dot"
+            style={
+              {
+                "backgroundColor": "red",
+              }
+            }
+          />
+          <span
+            className="text"
+          >
+            revised
+          </span>
+        </div>
+      </div>
+      <div
+        style={
+          {
+            "height": 400,
+            "width": "100%",
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots a/BlurOverlay Base 1`] = `
 <div
   className="base blur-overlay modifierActive"