@pareto-engineering/design-system 5.0.0 → 5.0.2

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

@@ -451,89 +451,28 @@ exports[`Storyshots Example/Page Logged Out 1`] = `
 
 exports[`Storyshots a/AppContext Base 1`] = `"Sample AppContext"`;
 
-exports[`Storyshots a/AreaChart Default 1`] = `
+exports[`Storyshots a/BlurOverlay Base 1`] = `
 <div
-  style={
-    {
-      "height": "100%",
-      "width": "100%",
-    }
-  }
+  className="base blur-overlay modifierActive"
 >
   <div
-    className="base area-chart"
-  >
-    <h3>
-      Approval rate over time
-    </h3>
-    <div
-      className="custom-legend"
-    >
-      <div
-        className="item"
-      >
-        <span
-          className="line"
-          style={
-            {
-              "backgroundColor": "purple",
-            }
-          }
-        />
-        <span
-          className="text"
-        >
-          Average
-        </span>
-      </div>
-      <div
-        className="item"
-      >
-        <span
-          className="line"
-          style={
-            {
-              "backgroundColor": "green",
-            }
-          }
-        />
-        <span
-          className="text"
-        >
-          Best
-        </span>
-      </div>
-      <div
-        className="item"
-      >
-        <span
-          className="line"
-          style={
-            {
-              "backgroundColor": "orange",
-            }
-          }
-        />
-        <span
-          className="text"
-        >
-          Worst
-        </span>
-      </div>
-    </div>
-    <div
-      style={
-        {
-          "height": 400,
-          "width": "100%",
-        }
+    style={
+      {
+        "backgroundColor": "blue",
+        "bottom": "0",
+        "color": "white",
+        "height": "100px",
+        "minWidth": "100%",
+        "position": "fixed",
       }
-    />
+    }
+  >
+    Sample Foreground Component
   </div>
 </div>
 `;
 
-exports[`Storyshots a/AreaChart Filled 1`] = `
+exports[`Storyshots a/Charts/AreaChart Default 1`] = `
 <div
   style={
     {
@@ -545,106 +484,101 @@ 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="item"
-      >
-        <span
-          className="line"
-          style={
-            {
-              "backgroundColor": "purple",
-            }
-          }
-        />
-        <span
-          className="text"
-        >
-          Average
-        </span>
-      </div>
-      <div
-        className="item"
+        className="base y-labels-dropdown"
       >
-        <span
-          className="line"
-          style={
-            {
-              "backgroundColor": "green",
-            }
-          }
-        />
-        <span
-          className="text"
+        <button
+          className="dropdown-button"
+          onClick={[Function]}
+          type="button"
         >
-          Best
-        </span>
-      </div>
-      <div
-        className="item"
-      >
-        <span
-          className="line"
-          style={
-            {
-              "backgroundColor": "orange",
-            }
-          }
-        />
-        <span
-          className="text"
+          Select Item
+          <span
+            className="icon "
+          >
+            W
+          </span>
+        </button>
+        <div
+          className="dropdown-content "
         >
-          Worst
-        </span>
+          <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
-      style={
-        {
-          "height": 400,
-          "width": "100%",
-        }
-      }
-    />
-  </div>
-</div>
-`;
-
-exports[`Storyshots a/AreaChart Side By Side 1`] = `
-<div
-  style={
-    {
-      "display": "flex",
-      "gap": "20px",
-    }
-  }
->
-  <div
-    style={
-      {
-        "flex": 1,
-      }
-    }
-  >
-    <div
-      className="base area-chart"
+      className="base custom-legend horizontal"
     >
-      <h3>
-        Approval rate over time
-      </h3>
       <div
-        className="custom-legend"
+        className="item"
       >
         <div
-          className="item"
+          className="title"
         >
           <span
-            className="line"
+            className="dot"
             style={
               {
                 "backgroundColor": "purple",
@@ -657,11 +591,18 @@ exports[`Storyshots a/AreaChart Side By Side 1`] = `
             Average
           </span>
         </div>
+        <span
+          className="sub-title"
+        />
+      </div>
+      <div
+        className="item"
+      >
         <div
-          className="item"
+          className="title"
         >
           <span
-            className="line"
+            className="dot"
             style={
               {
                 "backgroundColor": "green",
@@ -674,11 +615,18 @@ exports[`Storyshots a/AreaChart Side By Side 1`] = `
             Best
           </span>
         </div>
+        <span
+          className="sub-title"
+        />
+      </div>
+      <div
+        className="item"
+      >
         <div
-          className="item"
+          className="title"
         >
           <span
-            className="line"
+            className="dot"
             style={
               {
                 "backgroundColor": "orange",
@@ -691,55 +639,154 @@ exports[`Storyshots a/AreaChart Side By Side 1`] = `
             Worst
           </span>
         </div>
+        <span
+          className="sub-title"
+        />
       </div>
-      <div
-        style={
-          {
-            "height": 400,
-            "width": "100%",
-          }
-        }
-      />
     </div>
-  </div>
-  <div
-    style={
-      {
-        "flex": 1,
+    <div
+      style={
+        {
+          "height": 400,
+          "width": "100%",
+        }
       }
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Charts/AreaChart Filled 1`] = `
+<div
+  style={
+    {
+      "height": "100%",
+      "width": "100%",
     }
+  }
+>
+  <div
+    className="base area-chart"
   >
     <div
-      className="base area-chart"
+      className="chart-header"
     >
       <h3>
-        Submission rate over time
+        Approval rate over time
       </h3>
       <div
-        className="custom-legend"
+        className="base y-labels-dropdown"
       >
-        <div
-          className="item"
+        <button
+          className="dropdown-button"
+          onClick={[Function]}
+          type="button"
         >
+          Select Item
           <span
-            className="line"
-            style={
-              {
-                "backgroundColor": "purple",
-              }
-            }
-          />
-          <span
-            className="text"
+            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 horizontal"
+    >
+      <div
+        className="item"
+      >
+        <div
+          className="title"
+        >
+          <span
+            className="dot"
+            style={
+              {
+                "backgroundColor": "purple",
+              }
+            }
+          />
+          <span
+            className="text"
           >
             Average
           </span>
         </div>
+        <span
+          className="sub-title"
+        />
+      </div>
+      <div
+        className="item"
+      >
         <div
-          className="item"
+          className="title"
         >
           <span
-            className="line"
+            className="dot"
             style={
               {
                 "backgroundColor": "green",
@@ -752,11 +799,18 @@ exports[`Storyshots a/AreaChart Side By Side 1`] = `
             Best
           </span>
         </div>
+        <span
+          className="sub-title"
+        />
+      </div>
+      <div
+        className="item"
+      >
         <div
-          className="item"
+          className="title"
         >
           <span
-            className="line"
+            className="dot"
             style={
               {
                 "backgroundColor": "orange",
@@ -769,21 +823,24 @@ exports[`Storyshots a/AreaChart Side By Side 1`] = `
             Worst
           </span>
         </div>
+        <span
+          className="sub-title"
+        />
       </div>
-      <div
-        style={
-          {
-            "height": 400,
-            "width": "100%",
-          }
-        }
-      />
     </div>
+    <div
+      style={
+        {
+          "height": 400,
+          "width": "100%",
+        }
+      }
+    />
   </div>
 </div>
 `;
 
-exports[`Storyshots a/AreaChart Side By Side Filled 1`] = `
+exports[`Storyshots a/Charts/AreaChart Side By Side 1`] = `
 <div
   style={
     {
@@ -802,62 +859,164 @@ 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="base y-labels-dropdown"
+        >
+          <button
+            className="dropdown-button"
+            onClick={[Function]}
+            type="button"
+          >
+            Select Item
+            <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 horizontal"
       >
         <div
           className="item"
         >
-          <span
-            className="line"
-            style={
-              {
-                "backgroundColor": "purple",
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "purple",
+                }
               }
-            }
-          />
+            />
+            <span
+              className="text"
+            >
+              Average
+            </span>
+          </div>
           <span
-            className="text"
-          >
-            Average
-          </span>
+            className="sub-title"
+          />
         </div>
         <div
           className="item"
         >
-          <span
-            className="line"
-            style={
-              {
-                "backgroundColor": "green",
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "green",
+                }
               }
-            }
-          />
+            />
+            <span
+              className="text"
+            >
+              Best
+            </span>
+          </div>
           <span
-            className="text"
-          >
-            Best
-          </span>
+            className="sub-title"
+          />
         </div>
         <div
           className="item"
         >
-          <span
-            className="line"
-            style={
-              {
-                "backgroundColor": "orange",
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "orange",
+                }
               }
-            }
-          />
+            />
+            <span
+              className="text"
+            >
+              Worst
+            </span>
+          </div>
           <span
-            className="text"
-          >
-            Worst
-          </span>
+            className="sub-title"
+          />
         </div>
       </div>
       <div
@@ -880,62 +1039,164 @@ 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="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",
-              }
-            }
-          />
-          <span
-            className="text"
+            Select Item
+            <span
+              className="icon "
+            >
+              W
+            </span>
+          </button>
+          <div
+            className="dropdown-content "
           >
-            Best
-          </span>
-        </div>
-        <div
-          className="item"
-        >
-          <span
-            className="line"
-            style={
-              {
-                "backgroundColor": "orange",
+            <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 horizontal"
+      >
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "purple",
+                }
               }
-            }
+            />
+            <span
+              className="text"
+            >
+              Average
+            </span>
+          </div>
+          <span
+            className="sub-title"
           />
+        </div>
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "green",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              Best
+            </span>
+          </div>
           <span
-            className="text"
+            className="sub-title"
+          />
+        </div>
+        <div
+          className="item"
+        >
+          <div
+            className="title"
           >
-            Worst
-          </span>
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "orange",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              Worst
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          />
         </div>
       </div>
       <div
@@ -951,23 +1212,1693 @@ exports[`Storyshots a/AreaChart Side By Side Filled 1`] = `
 </div>
 `;
 
-exports[`Storyshots a/BlurOverlay Base 1`] = `
+exports[`Storyshots a/Charts/AreaChart Side By Side Filled 1`] = `
 <div
-  className="base blur-overlay modifierActive"
+  style={
+    {
+      "display": "flex",
+      "gap": "20px",
+    }
+  }
 >
   <div
     style={
       {
-        "backgroundColor": "blue",
-        "bottom": "0",
-        "color": "white",
-        "height": "100px",
-        "minWidth": "100%",
-        "position": "fixed",
+        "flex": 1,
       }
     }
   >
-    Sample Foreground Component
+    <div
+      className="base area-chart"
+    >
+      <div
+        className="chart-header"
+      >
+        <h3>
+          Approval rate over time
+        </h3>
+        <div
+          className="base y-labels-dropdown"
+        >
+          <button
+            className="dropdown-button"
+            onClick={[Function]}
+            type="button"
+          >
+            Select Item
+            <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 horizontal"
+      >
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "purple",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              Average
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          />
+        </div>
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "green",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              Best
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          />
+        </div>
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "orange",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              Worst
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          />
+        </div>
+      </div>
+      <div
+        style={
+          {
+            "height": 400,
+            "width": "100%",
+          }
+        }
+      />
+    </div>
+  </div>
+  <div
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  >
+    <div
+      className="base area-chart"
+    >
+      <div
+        className="chart-header"
+      >
+        <h3>
+          Submission rate over time
+        </h3>
+        <div
+          className="base y-labels-dropdown"
+        >
+          <button
+            className="dropdown-button"
+            onClick={[Function]}
+            type="button"
+          >
+            Select Item
+            <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 horizontal"
+      >
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "purple",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              Average
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          />
+        </div>
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "green",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              Best
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          />
+        </div>
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "orange",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              Worst
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          />
+        </div>
+      </div>
+      <div
+        style={
+          {
+            "height": 400,
+            "width": "100%",
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Charts/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"
+        >
+          Select Item
+          <span
+            className="icon "
+          >
+            W
+          </span>
+        </button>
+        <div
+          className="dropdown-content "
+        >
+          <div
+            className="dropdown-item modifierActive"
+            onClick={[Function]}
+          >
+            <span
+              className="status-dot"
+              style={
+                {
+                  "backgroundColor": "purple",
+                }
+              }
+            />
+            Pending Review
+            <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",
+                }
+              }
+            />
+            To Revise
+            <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 horizontal"
+    >
+      <div
+        className="item"
+      >
+        <div
+          className="title"
+        >
+          <span
+            className="dot"
+            style={
+              {
+                "backgroundColor": "purple",
+              }
+            }
+          />
+          <span
+            className="text"
+          >
+            pendingReview
+          </span>
+        </div>
+        <span
+          className="sub-title"
+        />
+      </div>
+      <div
+        className="item"
+      >
+        <div
+          className="title"
+        >
+          <span
+            className="dot"
+            style={
+              {
+                "backgroundColor": "green",
+              }
+            }
+          />
+          <span
+            className="text"
+          >
+            accepted
+          </span>
+        </div>
+        <span
+          className="sub-title"
+        />
+      </div>
+      <div
+        className="item"
+      >
+        <div
+          className="title"
+        >
+          <span
+            className="dot"
+            style={
+              {
+                "backgroundColor": "orange",
+              }
+            }
+          />
+          <span
+            className="text"
+          >
+            rejected
+          </span>
+        </div>
+        <span
+          className="sub-title"
+        />
+      </div>
+      <div
+        className="item"
+      >
+        <div
+          className="title"
+        >
+          <span
+            className="dot"
+            style={
+              {
+                "backgroundColor": "blue",
+              }
+            }
+          />
+          <span
+            className="text"
+          >
+            toRevise
+          </span>
+        </div>
+        <span
+          className="sub-title"
+        />
+      </div>
+      <div
+        className="item"
+      >
+        <div
+          className="title"
+        >
+          <span
+            className="dot"
+            style={
+              {
+                "backgroundColor": "red",
+              }
+            }
+          />
+          <span
+            className="text"
+          >
+            revised
+          </span>
+        </div>
+        <span
+          className="sub-title"
+        />
+      </div>
+    </div>
+    <div
+      style={
+        {
+          "height": 400,
+          "width": "100%",
+        }
+      }
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Charts/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"
+          >
+            Select Item
+            <span
+              className="icon "
+            >
+              W
+            </span>
+          </button>
+          <div
+            className="dropdown-content "
+          >
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "purple",
+                  }
+                }
+              />
+              Pending Review
+              <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",
+                  }
+                }
+              />
+              To Revise
+              <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 horizontal"
+      >
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "purple",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              pendingReview
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          />
+        </div>
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "green",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              accepted
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          />
+        </div>
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "orange",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              rejected
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          />
+        </div>
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "blue",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              toRevise
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          />
+        </div>
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "red",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              revised
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          />
+        </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"
+          >
+            Select Item
+            <span
+              className="icon "
+            >
+              W
+            </span>
+          </button>
+          <div
+            className="dropdown-content "
+          >
+            <div
+              className="dropdown-item modifierActive"
+              onClick={[Function]}
+            >
+              <span
+                className="status-dot"
+                style={
+                  {
+                    "backgroundColor": "purple",
+                  }
+                }
+              />
+              Pending Review
+              <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",
+                  }
+                }
+              />
+              To Revise
+              <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 horizontal"
+      >
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "purple",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              pendingReview
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          />
+        </div>
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "green",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              accepted
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          />
+        </div>
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "orange",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              rejected
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          />
+        </div>
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "blue",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              toRevise
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          />
+        </div>
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "red",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              revised
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          />
+        </div>
+      </div>
+      <div
+        style={
+          {
+            "height": 400,
+            "width": "100%",
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Charts/PieChart Default 1`] = `
+<div
+  style={
+    {
+      "height": "100%",
+      "width": "100%",
+    }
+  }
+>
+  <div
+    className="base pie-chart"
+  >
+    <div
+      className="chart-header"
+    >
+      <h3 />
+    </div>
+    <div
+      className="chart-content"
+    >
+      <div
+        style={
+          {
+            "height": 400,
+            "width": "100%",
+          }
+        }
+      />
+      <div
+        className="base custom-legend vertical"
+      >
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "#8CB0F8",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              Pending Review
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          >
+            230
+          </span>
+        </div>
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "#7F7CF6",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              Accepted
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          >
+            350
+          </span>
+        </div>
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "#FFD66E",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              Rejected
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          >
+            80
+          </span>
+        </div>
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "#E8E9ED",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              To Revise
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          >
+            10
+          </span>
+        </div>
+        <div
+          className="item"
+        >
+          <div
+            className="title"
+          >
+            <span
+              className="dot"
+              style={
+                {
+                  "backgroundColor": "#F6BC7E",
+                }
+              }
+            />
+            <span
+              className="text"
+            >
+              Revised
+            </span>
+          </div>
+          <span
+            className="sub-title"
+          >
+            60
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Charts/PieChart Side By Side 1`] = `
+<div
+  style={
+    {
+      "display": "flex",
+      "gap": "20px",
+    }
+  }
+>
+  <div
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  >
+    <div
+      className="base pie-chart"
+    >
+      <div
+        className="chart-header"
+      >
+        <h3 />
+      </div>
+      <div
+        className="chart-content"
+      >
+        <div
+          style={
+            {
+              "height": 400,
+              "width": "100%",
+            }
+          }
+        />
+        <div
+          className="base custom-legend vertical"
+        >
+          <div
+            className="item"
+          >
+            <div
+              className="title"
+            >
+              <span
+                className="dot"
+                style={
+                  {
+                    "backgroundColor": "#8CB0F8",
+                  }
+                }
+              />
+              <span
+                className="text"
+              >
+                Pending Review
+              </span>
+            </div>
+            <span
+              className="sub-title"
+            >
+              230
+            </span>
+          </div>
+          <div
+            className="item"
+          >
+            <div
+              className="title"
+            >
+              <span
+                className="dot"
+                style={
+                  {
+                    "backgroundColor": "#7F7CF6",
+                  }
+                }
+              />
+              <span
+                className="text"
+              >
+                Accepted
+              </span>
+            </div>
+            <span
+              className="sub-title"
+            >
+              350
+            </span>
+          </div>
+          <div
+            className="item"
+          >
+            <div
+              className="title"
+            >
+              <span
+                className="dot"
+                style={
+                  {
+                    "backgroundColor": "#FFD66E",
+                  }
+                }
+              />
+              <span
+                className="text"
+              >
+                Rejected
+              </span>
+            </div>
+            <span
+              className="sub-title"
+            >
+              80
+            </span>
+          </div>
+          <div
+            className="item"
+          >
+            <div
+              className="title"
+            >
+              <span
+                className="dot"
+                style={
+                  {
+                    "backgroundColor": "#E8E9ED",
+                  }
+                }
+              />
+              <span
+                className="text"
+              >
+                To Revise
+              </span>
+            </div>
+            <span
+              className="sub-title"
+            >
+              10
+            </span>
+          </div>
+          <div
+            className="item"
+          >
+            <div
+              className="title"
+            >
+              <span
+                className="dot"
+                style={
+                  {
+                    "backgroundColor": "#F6BC7E",
+                  }
+                }
+              />
+              <span
+                className="text"
+              >
+                Revised
+              </span>
+            </div>
+            <span
+              className="sub-title"
+            >
+              60
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  >
+    <div
+      className="base pie-chart"
+    >
+      <div
+        className="chart-header"
+      >
+        <h3 />
+      </div>
+      <div
+        className="chart-content"
+      >
+        <div
+          style={
+            {
+              "height": 400,
+              "width": "100%",
+            }
+          }
+        />
+        <div
+          className="base custom-legend vertical"
+        >
+          <div
+            className="item"
+          >
+            <div
+              className="title"
+            >
+              <span
+                className="dot"
+                style={
+                  {
+                    "backgroundColor": "#8CB0F8",
+                  }
+                }
+              />
+              <span
+                className="text"
+              >
+                Pending Review
+              </span>
+            </div>
+            <span
+              className="sub-title"
+            >
+              230
+            </span>
+          </div>
+          <div
+            className="item"
+          >
+            <div
+              className="title"
+            >
+              <span
+                className="dot"
+                style={
+                  {
+                    "backgroundColor": "#7F7CF6",
+                  }
+                }
+              />
+              <span
+                className="text"
+              >
+                Accepted
+              </span>
+            </div>
+            <span
+              className="sub-title"
+            >
+              350
+            </span>
+          </div>
+          <div
+            className="item"
+          >
+            <div
+              className="title"
+            >
+              <span
+                className="dot"
+                style={
+                  {
+                    "backgroundColor": "#FFD66E",
+                  }
+                }
+              />
+              <span
+                className="text"
+              >
+                Rejected
+              </span>
+            </div>
+            <span
+              className="sub-title"
+            >
+              80
+            </span>
+          </div>
+          <div
+            className="item"
+          >
+            <div
+              className="title"
+            >
+              <span
+                className="dot"
+                style={
+                  {
+                    "backgroundColor": "#E8E9ED",
+                  }
+                }
+              />
+              <span
+                className="text"
+              >
+                To Revise
+              </span>
+            </div>
+            <span
+              className="sub-title"
+            >
+              10
+            </span>
+          </div>
+          <div
+            className="item"
+          >
+            <div
+              className="title"
+            >
+              <span
+                className="dot"
+                style={
+                  {
+                    "backgroundColor": "#F6BC7E",
+                  }
+                }
+              />
+              <span
+                className="text"
+              >
+                Revised
+              </span>
+            </div>
+            <span
+              className="sub-title"
+            >
+              60
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;