From a9d6e619451f248c9d12eae3edd405d974e75243 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Mon, 13 Jan 2020 14:50:16 -0500
Subject: [PATCH] Update Storyshots for testing

---
 storybook/test/__snapshots__/index.js.snap | 285 +++++++++++----------
 storybook/test/index.js                    |   4 +-
 2 files changed, 145 insertions(+), 144 deletions(-)

diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap
index eef58a88e9ec1..249b86d7dcd9d 100644
--- a/storybook/test/__snapshots__/index.js.snap
+++ b/storybook/test/__snapshots__/index.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Components|Animate Appear Bottom Left 1`] = `
+exports[`Storyshots Components/Animate Appear Bottom Left 1`] = `
 <div
   className="components-animate__appear is-from-left is-from-bottom components-notice is-success is-dismissible"
 >
@@ -37,7 +37,7 @@ exports[`Storyshots Components|Animate Appear Bottom Left 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Animate Appear Bottom Right 1`] = `
+exports[`Storyshots Components/Animate Appear Bottom Right 1`] = `
 <div
   className="components-animate__appear is-from-right is-from-bottom components-notice is-success is-dismissible"
 >
@@ -74,7 +74,7 @@ exports[`Storyshots Components|Animate Appear Bottom Right 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Animate Appear Top Left 1`] = `
+exports[`Storyshots Components/Animate Appear Top Left 1`] = `
 <div
   className="components-animate__appear is-from-left is-from-top components-notice is-success is-dismissible"
 >
@@ -111,7 +111,7 @@ exports[`Storyshots Components|Animate Appear Top Left 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Animate Appear Top Right 1`] = `
+exports[`Storyshots Components/Animate Appear Top Right 1`] = `
 <div
   className="components-animate__appear is-from-right is-from-top components-notice is-success is-dismissible"
 >
@@ -148,7 +148,7 @@ exports[`Storyshots Components|Animate Appear Top Right 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Animate Default 1`] = `
+exports[`Storyshots Components/Animate Default 1`] = `
 <div
   className="components-notice is-success is-dismissible"
 >
@@ -183,7 +183,7 @@ exports[`Storyshots Components|Animate Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Animate Loading 1`] = `
+exports[`Storyshots Components/Animate Loading 1`] = `
 <div
   className="components-animate__loading components-notice is-success is-dismissible"
 >
@@ -218,7 +218,7 @@ exports[`Storyshots Components|Animate Loading 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Animate Slide In 1`] = `
+exports[`Storyshots Components/Animate Slide In 1`] = `
 <div
   className="components-animate__slide-in is-from-left components-notice is-success is-dismissible"
 >
@@ -253,7 +253,7 @@ exports[`Storyshots Components|Animate Slide In 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|BaseControl Default 1`] = `
+exports[`Storyshots Components/BaseControl Default 1`] = `
 <div
   className="components-base-control"
 >
@@ -279,7 +279,7 @@ exports[`Storyshots Components|BaseControl Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Button Buttons 1`] = `
+exports[`Storyshots Components/Button Buttons 1`] = `
 <div
   style={
     Object {
@@ -544,7 +544,7 @@ exports[`Storyshots Components|Button Buttons 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Button Default 1`] = `
+exports[`Storyshots Components/Button Default 1`] = `
 <button
   className="components-button"
   type="button"
@@ -553,7 +553,7 @@ exports[`Storyshots Components|Button Default 1`] = `
 </button>
 `;
 
-exports[`Storyshots Components|Button Disabled 1`] = `
+exports[`Storyshots Components/Button Disabled 1`] = `
 <button
   className="components-button"
   disabled={true}
@@ -607,7 +607,7 @@ exports[`Storyshots Components|Button Disabled Focusable Icon 1`] = `
 </button>
 `;
 
-exports[`Storyshots Components|Button Disabled Link 1`] = `
+exports[`Storyshots Components/Button Disabled Link 1`] = `
 <button
   className="components-button"
   disabled={true}
@@ -617,7 +617,7 @@ exports[`Storyshots Components|Button Disabled Link 1`] = `
 </button>
 `;
 
-exports[`Storyshots Components|Button Grouped Icons 1`] = `
+exports[`Storyshots Components/Button Grouped Icons 1`] = `
 <div
   style={
     Object {
@@ -706,7 +706,7 @@ exports[`Storyshots Components|Button Grouped Icons 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Button Icon 1`] = `
+exports[`Storyshots Components/Button Icon 1`] = `
 <button
   aria-label="More"
   className="components-button has-icon"
@@ -735,7 +735,7 @@ exports[`Storyshots Components|Button Icon 1`] = `
 </button>
 `;
 
-exports[`Storyshots Components|Button Link 1`] = `
+exports[`Storyshots Components/Button Link 1`] = `
 <a
   className="components-button"
   href="https://wordpress.org/"
@@ -745,7 +745,7 @@ exports[`Storyshots Components|Button Link 1`] = `
 </a>
 `;
 
-exports[`Storyshots Components|Button Pressed 1`] = `
+exports[`Storyshots Components/Button Pressed 1`] = `
 <button
   aria-pressed={true}
   className="components-button is-pressed"
@@ -755,7 +755,7 @@ exports[`Storyshots Components|Button Pressed 1`] = `
 </button>
 `;
 
-exports[`Storyshots Components|Button Primary 1`] = `
+exports[`Storyshots Components/Button Primary 1`] = `
 <button
   className="components-button is-primary"
   type="button"
@@ -764,7 +764,7 @@ exports[`Storyshots Components|Button Primary 1`] = `
 </button>
 `;
 
-exports[`Storyshots Components|Button Secondary 1`] = `
+exports[`Storyshots Components/Button Secondary 1`] = `
 <button
   className="components-button is-secondary"
   type="button"
@@ -773,7 +773,7 @@ exports[`Storyshots Components|Button Secondary 1`] = `
 </button>
 `;
 
-exports[`Storyshots Components|Button Small 1`] = `
+exports[`Storyshots Components/Button Small 1`] = `
 <button
   className="components-button is-small"
   type="button"
@@ -782,7 +782,7 @@ exports[`Storyshots Components|Button Small 1`] = `
 </button>
 `;
 
-exports[`Storyshots Components|Button Tertiary 1`] = `
+exports[`Storyshots Components/Button Tertiary 1`] = `
 <button
   className="components-button is-tertiary"
   type="button"
@@ -791,7 +791,7 @@ exports[`Storyshots Components|Button Tertiary 1`] = `
 </button>
 `;
 
-exports[`Storyshots Components|ButtonGroup Default 1`] = `
+exports[`Storyshots Components/ButtonGroup Default 1`] = `
 <div
   className="components-button-group"
   role="group"
@@ -821,7 +821,7 @@ exports[`Storyshots Components|ButtonGroup Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Card Default 1`] = `
+exports[`Storyshots Components/Card Default 1`] = `
 .emotion-6 {
   background: #fff;
   box-sizing: border-box;
@@ -957,7 +957,7 @@ exports[`Storyshots Components|Card Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Card/Body Default 1`] = `
+exports[`Storyshots Components/Card/Body Default 1`] = `
 .emotion-2 {
   background: #fff;
   box-sizing: border-box;
@@ -1013,7 +1013,7 @@ exports[`Storyshots Components|Card/Body Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Card/Divider Default 1`] = `
+exports[`Storyshots Components/Card/Divider Default 1`] = `
 .emotion-6 {
   background: #fff;
   box-sizing: border-box;
@@ -1087,7 +1087,7 @@ exports[`Storyshots Components|Card/Divider Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Card/Footer Default 1`] = `
+exports[`Storyshots Components/Card/Footer Default 1`] = `
 .emotion-2 {
   background: #fff;
   box-sizing: border-box;
@@ -1154,7 +1154,7 @@ exports[`Storyshots Components|Card/Footer Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Card/Header Default 1`] = `
+exports[`Storyshots Components/Card/Header Default 1`] = `
 .emotion-2 {
   background: #fff;
   box-sizing: border-box;
@@ -1221,7 +1221,7 @@ exports[`Storyshots Components|Card/Header Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Card/Media Default 1`] = `
+exports[`Storyshots Components/Card/Media Default 1`] = `
 .emotion-4 {
   background: #fff;
   box-sizing: border-box;
@@ -1308,7 +1308,7 @@ exports[`Storyshots Components|Card/Media Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Card/Media Header And Footer 1`] = `
+exports[`Storyshots Components/Card/Media Header And Footer 1`] = `
 .emotion-6 {
   background: #fff;
   box-sizing: border-box;
@@ -1446,7 +1446,7 @@ exports[`Storyshots Components|Card/Media Header And Footer 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Card/Media Horizontally Aligned 1`] = `
+exports[`Storyshots Components/Card/Media Horizontally Aligned 1`] = `
 Array [
   <p>
     Note: This story demonstrates how this UI may be created. It requires extra styling.
@@ -1562,7 +1562,7 @@ Array [
 ]
 `;
 
-exports[`Storyshots Components|Card/Media Iframe Embed 1`] = `
+exports[`Storyshots Components/Card/Media Iframe Embed 1`] = `
 .emotion-4 {
   background: #fff;
   box-sizing: border-box;
@@ -1665,7 +1665,7 @@ exports[`Storyshots Components|Card/Media Iframe Embed 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Card/Media On Bottom 1`] = `
+exports[`Storyshots Components/Card/Media On Bottom 1`] = `
 .emotion-4 {
   background: #fff;
   box-sizing: border-box;
@@ -1752,7 +1752,7 @@ exports[`Storyshots Components|Card/Media On Bottom 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Card/Media On Top 1`] = `
+exports[`Storyshots Components/Card/Media On Top 1`] = `
 .emotion-4 {
   background: #fff;
   box-sizing: border-box;
@@ -1841,7 +1841,7 @@ exports[`Storyshots Components|Card/Media On Top 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|CheckboxControl All 1`] = `
+exports[`Storyshots Components/CheckboxControl All 1`] = `
 <div
   className="components-base-control"
 >
@@ -1897,7 +1897,7 @@ exports[`Storyshots Components|CheckboxControl All 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|CheckboxControl Default 1`] = `
+exports[`Storyshots Components/CheckboxControl Default 1`] = `
 <div
   className="components-base-control"
 >
@@ -1940,7 +1940,7 @@ exports[`Storyshots Components|CheckboxControl Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|ClipboardButton Default 1`] = `
+exports[`Storyshots Components/ClipboardButton Default 1`] = `
 <span
   onCopy={[Function]}
 >
@@ -1953,7 +1953,7 @@ exports[`Storyshots Components|ClipboardButton Default 1`] = `
 </span>
 `;
 
-exports[`Storyshots Components|ColorIndicator Default 1`] = `
+exports[`Storyshots Components/ColorIndicator Default 1`] = `
 <span
   className="component-color-indicator"
   style={
@@ -1964,7 +1964,7 @@ exports[`Storyshots Components|ColorIndicator Default 1`] = `
 />
 `;
 
-exports[`Storyshots Components|ColorPalette Default 1`] = `
+exports[`Storyshots Components/ColorPalette Default 1`] = `
 <div
   className="components-circular-option-picker"
 >
@@ -2058,7 +2058,7 @@ exports[`Storyshots Components|ColorPalette Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|ColorPalette With Knobs 1`] = `
+exports[`Storyshots Components/ColorPalette With Knobs 1`] = `
 <div
   className="components-circular-option-picker"
 >
@@ -2152,7 +2152,7 @@ exports[`Storyshots Components|ColorPalette With Knobs 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|ColorPicker Alpha Enabled 1`] = `
+exports[`Storyshots Components/ColorPicker Alpha Enabled 1`] = `
 <div
   className="components-color-picker is-alpha-enabled"
 >
@@ -2364,7 +2364,7 @@ exports[`Storyshots Components|ColorPicker Alpha Enabled 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|ColorPicker Default 1`] = `
+exports[`Storyshots Components/ColorPicker Default 1`] = `
 <div
   className="components-color-picker is-alpha-disabled"
 >
@@ -2539,7 +2539,56 @@ exports[`Storyshots Components|ColorPicker Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Dashicon Default 1`] = `
+exports[`Storyshots Components/CustomSelectControl Default 1`] = `
+<div
+  className="components-custom-select-control"
+>
+  <label
+    className="components-custom-select-control__label"
+    htmlFor="downshift-null-toggle-button"
+    id="downshift-null-label"
+  >
+    Font Size
+  </label>
+  <button
+    aria-expanded={false}
+    aria-haspopup="listbox"
+    aria-label="Font Size"
+    className="components-button components-custom-select-control__button"
+    id="downshift-null-toggle-button"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="dashicon dashicons-arrow-down-alt2 components-custom-select-control__button-icon"
+      focusable="false"
+      height={20}
+      role="img"
+      viewBox="0 0 20 20"
+      width={20}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5 6l5 5 5-5 2 1-7 7-7-7z"
+      />
+    </svg>
+  </button>
+  <ul
+    aria-labelledby="downshift-null-label"
+    className="components-custom-select-control__menu"
+    id="downshift-null-menu"
+    onBlur={[Function]}
+    onKeyDown={[Function]}
+    onMouseLeave={[Function]}
+    role="listbox"
+    tabIndex={-1}
+  />
+</div>
+`;
+
+exports[`Storyshots Components/Dashicon Default 1`] = `
 <svg
   aria-hidden="true"
   className="dashicon dashicons-wordpress"
@@ -2557,7 +2606,7 @@ exports[`Storyshots Components|Dashicon Default 1`] = `
 </svg>
 `;
 
-exports[`Storyshots Components|Draggable Default 1`] = `
+exports[`Storyshots Components/Draggable Default 1`] = `
 <div>
   <p>
     Is Dragging? 
@@ -2605,7 +2654,7 @@ exports[`Storyshots Components|Draggable Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Dropdown Default 1`] = `
+exports[`Storyshots Components/Dropdown Default 1`] = `
 Array [
   <div>
     <p>
@@ -2684,7 +2733,7 @@ Array [
 ]
 `;
 
-exports[`Storyshots Components|Experimental/Text Body 1`] = `
+exports[`Storyshots Components/Experimental/Text Body 1`] = `
 .emotion-0 {
   margin: 0;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
@@ -2700,7 +2749,7 @@ exports[`Storyshots Components|Experimental/Text Body 1`] = `
 </p>
 `;
 
-exports[`Storyshots Components|Experimental/Text Body Small 1`] = `
+exports[`Storyshots Components/Experimental/Text Body Small 1`] = `
 .emotion-0 {
   margin: 0;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
@@ -2716,7 +2765,7 @@ exports[`Storyshots Components|Experimental/Text Body Small 1`] = `
 </p>
 `;
 
-exports[`Storyshots Components|Experimental/Text Button 1`] = `
+exports[`Storyshots Components/Experimental/Text Button 1`] = `
 .emotion-0 {
   margin: 0;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
@@ -2732,7 +2781,7 @@ exports[`Storyshots Components|Experimental/Text Button 1`] = `
 </p>
 `;
 
-exports[`Storyshots Components|Experimental/Text Caption 1`] = `
+exports[`Storyshots Components/Experimental/Text Caption 1`] = `
 .emotion-0 {
   margin: 0;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
@@ -2748,7 +2797,7 @@ exports[`Storyshots Components|Experimental/Text Caption 1`] = `
 </p>
 `;
 
-exports[`Storyshots Components|Experimental/Text Default 1`] = `
+exports[`Storyshots Components/Experimental/Text Default 1`] = `
 Array [
   .emotion-0 {
   margin: 0;
@@ -2887,7 +2936,7 @@ Array [
 ]
 `;
 
-exports[`Storyshots Components|Experimental/Text Label 1`] = `
+exports[`Storyshots Components/Experimental/Text Label 1`] = `
 .emotion-0 {
   margin: 0;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
@@ -2903,7 +2952,7 @@ exports[`Storyshots Components|Experimental/Text Label 1`] = `
 </p>
 `;
 
-exports[`Storyshots Components|Experimental/Text Subtitle 1`] = `
+exports[`Storyshots Components/Experimental/Text Subtitle 1`] = `
 .emotion-0 {
   margin: 0;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
@@ -2921,7 +2970,7 @@ exports[`Storyshots Components|Experimental/Text Subtitle 1`] = `
 </p>
 `;
 
-exports[`Storyshots Components|Experimental/Text Subtitle Small 1`] = `
+exports[`Storyshots Components/Experimental/Text Subtitle Small 1`] = `
 .emotion-0 {
   margin: 0;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
@@ -2939,7 +2988,7 @@ exports[`Storyshots Components|Experimental/Text Subtitle Small 1`] = `
 </p>
 `;
 
-exports[`Storyshots Components|Experimental/Text Title Large 1`] = `
+exports[`Storyshots Components/Experimental/Text Title Large 1`] = `
 .emotion-0 {
   margin: 0;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
@@ -2955,7 +3004,7 @@ exports[`Storyshots Components|Experimental/Text Title Large 1`] = `
 </h1>
 `;
 
-exports[`Storyshots Components|Experimental/Text Title Medium 1`] = `
+exports[`Storyshots Components/Experimental/Text Title Medium 1`] = `
 .emotion-0 {
   margin: 0;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
@@ -2971,7 +3020,7 @@ exports[`Storyshots Components|Experimental/Text Title Medium 1`] = `
 </h2>
 `;
 
-exports[`Storyshots Components|Experimental/Text Title Small 1`] = `
+exports[`Storyshots Components/Experimental/Text Title Small 1`] = `
 .emotion-0 {
   margin: 0;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
@@ -2987,7 +3036,7 @@ exports[`Storyshots Components|Experimental/Text Title Small 1`] = `
 </h3>
 `;
 
-exports[`Storyshots Components|ExternalLink Default 1`] = `
+exports[`Storyshots Components/ExternalLink Default 1`] = `
 <a
   className="components-external-link"
   href="https://wordpress.org"
@@ -3017,7 +3066,7 @@ exports[`Storyshots Components|ExternalLink Default 1`] = `
 </a>
 `;
 
-exports[`Storyshots Components|FontSizePicker Default 1`] = `
+exports[`Storyshots Components/FontSizePicker Default 1`] = `
 <fieldset
   className="components-font-size-picker"
 >
@@ -3105,7 +3154,7 @@ exports[`Storyshots Components|FontSizePicker Default 1`] = `
 </fieldset>
 `;
 
-exports[`Storyshots Components|FontSizePicker With Slider 1`] = `
+exports[`Storyshots Components/FontSizePicker With Slider 1`] = `
 <fieldset
   className="components-font-size-picker"
 >
@@ -3237,7 +3286,7 @@ exports[`Storyshots Components|FontSizePicker With Slider 1`] = `
 </fieldset>
 `;
 
-exports[`Storyshots Components|FontSizePicker Without Custom Sizes 1`] = `
+exports[`Storyshots Components/FontSizePicker Without Custom Sizes 1`] = `
 <fieldset
   className="components-font-size-picker"
 >
@@ -3308,7 +3357,7 @@ exports[`Storyshots Components|FontSizePicker Without Custom Sizes 1`] = `
 </fieldset>
 `;
 
-exports[`Storyshots Components|Guide Default 1`] = `
+exports[`Storyshots Components/Guide Default 1`] = `
 <button
   className="components-button is-secondary"
   onClick={[Function]}
@@ -3318,7 +3367,7 @@ exports[`Storyshots Components|Guide Default 1`] = `
 </button>
 `;
 
-exports[`Storyshots Components|Icon Colors 1`] = `
+exports[`Storyshots Components/Icon Colors 1`] = `
 Array [
   <div
     style={
@@ -3425,7 +3474,7 @@ Array [
 ]
 `;
 
-exports[`Storyshots Components|Icon Default 1`] = `
+exports[`Storyshots Components/Icon Default 1`] = `
 <div>
   <svg
     aria-hidden="true"
@@ -3454,7 +3503,7 @@ exports[`Storyshots Components|Icon Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Icon Sizes 1`] = `
+exports[`Storyshots Components/Icon Sizes 1`] = `
 Array [
   <div
     style={
@@ -3756,7 +3805,7 @@ Array [
 ]
 `;
 
-exports[`Storyshots Components|Icon With A Component 1`] = `
+exports[`Storyshots Components/Icon With A Component 1`] = `
 <svg
   aria-hidden="true"
   focusable="false"
@@ -3768,7 +3817,7 @@ exports[`Storyshots Components|Icon With A Component 1`] = `
 </svg>
 `;
 
-exports[`Storyshots Components|Icon With A Function 1`] = `
+exports[`Storyshots Components/Icon With A Function 1`] = `
 <svg
   aria-hidden="true"
   focusable="false"
@@ -3780,7 +3829,7 @@ exports[`Storyshots Components|Icon With A Function 1`] = `
 </svg>
 `;
 
-exports[`Storyshots Components|Icon With An SVG 1`] = `
+exports[`Storyshots Components/Icon With An SVG 1`] = `
 <svg
   aria-hidden="true"
   focusable="false"
@@ -3794,7 +3843,7 @@ exports[`Storyshots Components|Icon With An SVG 1`] = `
 </svg>
 `;
 
-exports[`Storyshots Components|Modal Default 1`] = `
+exports[`Storyshots Components/Modal Default 1`] = `
 <button
   className="components-button is-secondary"
   onClick={[Function]}
@@ -3804,7 +3853,7 @@ exports[`Storyshots Components|Modal Default 1`] = `
 </button>
 `;
 
-exports[`Storyshots Components|Popover Default 1`] = `
+exports[`Storyshots Components/Popover Default 1`] = `
 <span>
   <div
     onKeyDown={[Function]}
@@ -3840,7 +3889,7 @@ exports[`Storyshots Components|Popover Default 1`] = `
 </span>
 `;
 
-exports[`Storyshots Components|Popover Positioning 1`] = `
+exports[`Storyshots Components/Popover Positioning 1`] = `
 <div>
   <div
     style={
@@ -3968,7 +4017,7 @@ exports[`Storyshots Components|Popover Positioning 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|RadioControl Default 1`] = `
+exports[`Storyshots Components/RadioControl Default 1`] = `
 <div
   className="components-base-control components-radio-control"
 >
@@ -4039,7 +4088,7 @@ exports[`Storyshots Components|RadioControl Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|RadioControl With Help 1`] = `
+exports[`Storyshots Components/RadioControl With Help 1`] = `
 <div
   className="components-base-control components-radio-control"
 >
@@ -4119,7 +4168,7 @@ exports[`Storyshots Components|RadioControl With Help 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|RangeControl Default 1`] = `
+exports[`Storyshots Components/RangeControl Default 1`] = `
 <div
   className="components-base-control components-range-control"
 >
@@ -4151,7 +4200,7 @@ exports[`Storyshots Components|RangeControl Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|RangeControl Initial Value Zero 1`] = `
+exports[`Storyshots Components/RangeControl Initial Value Zero 1`] = `
 <div
   className="components-base-control components-range-control"
 >
@@ -4187,7 +4236,7 @@ exports[`Storyshots Components|RangeControl Initial Value Zero 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|RangeControl With Help 1`] = `
+exports[`Storyshots Components/RangeControl With Help 1`] = `
 <div
   className="components-base-control components-range-control"
 >
@@ -4226,7 +4275,7 @@ exports[`Storyshots Components|RangeControl With Help 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|RangeControl With Icon After 1`] = `
+exports[`Storyshots Components/RangeControl With Icon After 1`] = `
 <div
   className="components-base-control components-range-control"
 >
@@ -4272,7 +4321,7 @@ exports[`Storyshots Components|RangeControl With Icon After 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|RangeControl With Icon Before 1`] = `
+exports[`Storyshots Components/RangeControl With Icon Before 1`] = `
 <div
   className="components-base-control components-range-control"
 >
@@ -4318,7 +4367,7 @@ exports[`Storyshots Components|RangeControl With Icon Before 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|RangeControl With Minimum And Maximum Limits 1`] = `
+exports[`Storyshots Components/RangeControl With Minimum And Maximum Limits 1`] = `
 <div
   className="components-base-control components-range-control"
 >
@@ -4354,7 +4403,7 @@ exports[`Storyshots Components|RangeControl With Minimum And Maximum Limits 1`]
 </div>
 `;
 
-exports[`Storyshots Components|RangeControl With Reset 1`] = `
+exports[`Storyshots Components/RangeControl With Reset 1`] = `
 <div
   className="components-base-control components-range-control"
 >
@@ -4394,7 +4443,7 @@ exports[`Storyshots Components|RangeControl With Reset 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|ResizableBox Default 1`] = `
+exports[`Storyshots Components/ResizableBox Default 1`] = `
 <div
   style={
     Object {
@@ -4494,7 +4543,7 @@ exports[`Storyshots Components|ResizableBox Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|ScrollLock Default 1`] = `
+exports[`Storyshots Components/ScrollLock Default 1`] = `
 <div
   style={
     Object {
@@ -4540,7 +4589,7 @@ exports[`Storyshots Components|ScrollLock Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Snackbar Default 1`] = `
+exports[`Storyshots Components/Snackbar Default 1`] = `
 <div
   className="components-snackbar"
   label="Dismiss this notice"
@@ -4557,7 +4606,7 @@ exports[`Storyshots Components|Snackbar Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Snackbar With Actions 1`] = `
+exports[`Storyshots Components/Snackbar With Actions 1`] = `
 <div
   className="components-snackbar"
   label="Dismiss this notice"
@@ -4581,13 +4630,13 @@ exports[`Storyshots Components|Snackbar With Actions 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Spinner Default 1`] = `
+exports[`Storyshots Components/Spinner Default 1`] = `
 <span
   className="components-spinner"
 />
 `;
 
-exports[`Storyshots Components|TabPanel Default 1`] = `
+exports[`Storyshots Components/TabPanel Default 1`] = `
 <div
   className="my-tab-panel"
 >
@@ -4636,7 +4685,7 @@ exports[`Storyshots Components|TabPanel Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|TextHighlight Default 1`] = `
+exports[`Storyshots Components/TextHighlight Default 1`] = `
 Array [
   "We call the new editor ",
   <mark>
@@ -4646,7 +4695,7 @@ Array [
 ]
 `;
 
-exports[`Storyshots Components|Tip Default 1`] = `
+exports[`Storyshots Components/Tip Default 1`] = `
 <div
   className="components-tip"
 >
@@ -4670,7 +4719,7 @@ exports[`Storyshots Components|Tip Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|ToggleControl Default 1`] = `
+exports[`Storyshots Components/ToggleControl Default 1`] = `
 <div
   className="components-base-control components-toggle-control"
 >
@@ -4718,7 +4767,7 @@ exports[`Storyshots Components|ToggleControl Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|ToggleControl With Help Text 1`] = `
+exports[`Storyshots Components/ToggleControl With Help Text 1`] = `
 <div
   className="components-base-control components-toggle-control"
 >
@@ -4773,7 +4822,7 @@ exports[`Storyshots Components|ToggleControl With Help Text 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Toolbar Default 1`] = `
+exports[`Storyshots Components/Toolbar Default 1`] = `
 <div
   aria-label="Options"
   aria-orientation="horizontal"
@@ -5022,7 +5071,7 @@ exports[`Storyshots Components|Toolbar Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Toolbar Without Group 1`] = `
+exports[`Storyshots Components/Toolbar Without Group 1`] = `
 <div
   aria-label="Options"
   aria-orientation="horizontal"
@@ -5121,7 +5170,7 @@ exports[`Storyshots Components|Toolbar Without Group 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|ToolbarGroup Default 1`] = `
+exports[`Storyshots Components/ToolbarGroup Default 1`] = `
 <div
   className="components-toolbar"
 >
@@ -5213,7 +5262,7 @@ exports[`Storyshots Components|ToolbarGroup Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|ToolbarGroup With Controls Prop 1`] = `
+exports[`Storyshots Components/ToolbarGroup With Controls Prop 1`] = `
 <div
   className="components-toolbar"
 >
@@ -5311,7 +5360,7 @@ exports[`Storyshots Components|ToolbarGroup With Controls Prop 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|VisuallyHidden Default 1`] = `
+exports[`Storyshots Components/VisuallyHidden Default 1`] = `
 Array [
   <div
     className="components-visually-hidden"
@@ -5319,7 +5368,8 @@ Array [
     This should not show.
   </div>,
   <div>
-    This text will 
+    This text will
+     
     <span
       className="components-visually-hidden"
     >
@@ -5329,52 +5379,3 @@ Array [
   </div>,
 ]
 `;
-
-exports[`Storyshots CustomSelectControl Default 1`] = `
-<div
-  className="components-custom-select-control"
->
-  <label
-    className="components-custom-select-control__label"
-    htmlFor="downshift-null-toggle-button"
-    id="downshift-null-label"
-  >
-    Font Size
-  </label>
-  <button
-    aria-expanded={false}
-    aria-haspopup="listbox"
-    aria-label="Font Size"
-    className="components-button components-custom-select-control__button"
-    id="downshift-null-toggle-button"
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    type="button"
-  >
-    <svg
-      aria-hidden="true"
-      className="dashicon dashicons-arrow-down-alt2 components-custom-select-control__button-icon"
-      focusable="false"
-      height={20}
-      role="img"
-      viewBox="0 0 20 20"
-      width={20}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M5 6l5 5 5-5 2 1-7 7-7-7z"
-      />
-    </svg>
-  </button>
-  <ul
-    aria-labelledby="downshift-null-label"
-    className="components-custom-select-control__menu"
-    id="downshift-null-menu"
-    onBlur={[Function]}
-    onKeyDown={[Function]}
-    onMouseLeave={[Function]}
-    role="listbox"
-    tabIndex={-1}
-  />
-</div>
-`;
diff --git a/storybook/test/index.js b/storybook/test/index.js
index 3702a12325a17..3ea7f14605e0f 100644
--- a/storybook/test/index.js
+++ b/storybook/test/index.js
@@ -13,12 +13,12 @@ initStoryshots( {
 		createNodeMock: ( element ) => {
 			const currentElement = element.type && document.createElement( element.type );
 
-			if ( story.kind === 'Components|ClipboardButton' ) {
+			if ( story.kind === 'Components/ClipboardButton' ) {
 				currentElement.appendChild(
 					document.createElement( 'button' )
 				);
 			}
-			if ( story.kind === 'Components|Popover' ) {
+			if ( story.kind === 'Components/Popover' ) {
 				const parentElement = document.createElement( 'div' );
 				parentElement.appendChild( currentElement );
 			}