storyshots-editor.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Editor Storyshots ActivityFeedItem approved 1`] = `
<div
  className="RevisionBox"
>
  <p>
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-refresh\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
    <a
      href="/profile/view/damason"
    />
    <span>
      <a
        href="/profile/view/damason"
        title="David Mason"
      >
        damason
      </a>
       has 
      <span
        className="u-textHighlight"
      >
        <span>
          approved this translation
        </span>
      </span>
    </span>
  </p>
  <div
    className="well-approved well"
  >
    নাম
    <span
      className="u-pullRight"
    >
      <button
        className="Link Link--neutral"
        onClick={[Function]}
        title="Copy"
      >
        <span
          className=""
        >
          <svg
            className="s1"
            dangerouslySetInnerHTML={
              Object {
                "__html": "<use xlink:href=\\"#Icon-project\\" />",
              }
            }
            style={
              Object {
                "fill": "currentColor",
              }
            }
          />
        </span>
      </button>
    </span>
  </div>
  <span
    className="u-block small u-sMT-1-2 u-sPB-1-4 u-textMuted u-textSecondary"
  >
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-clock\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
    <span>
      Dec 16, 2016
    </span>
     
    <span>
      2:19 AM
    </span>
  </span>
</div>
`;

exports[`Editor Storyshots ActivityFeedItem comment 1`] = `
<div
  className="RevisionBox"
>
  <p>
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-comment\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
    <a
      href="/profile/view/damason"
    />
    <span>
      <a
        href="/profile/view/damason"
        title="David Mason"
      >
        damason
      </a>
       has commented on this translation
    </span>
  </p>
  <div
    className="well"
  >
    What in the world does this mean?
    <span
      className="u-pullRight"
    >
      <button
        className="Link Link--neutral"
        onClick={[Function]}
        title="Copy"
      >
        <span
          className=""
        >
          <svg
            className="s1"
            dangerouslySetInnerHTML={
              Object {
                "__html": "<use xlink:href=\\"#Icon-project\\" />",
              }
            }
            style={
              Object {
                "fill": "currentColor",
              }
            }
          />
        </span>
      </button>
    </span>
  </div>
  <span
    className="u-block small u-sMT-1-2 u-sPB-1-4 u-textMuted u-textSecondary"
  >
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-clock\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
    <span>
      Dec 16, 2016
    </span>
     
    <span>
      2:19 AM
    </span>
  </span>
</div>
`;

exports[`Editor Storyshots ActivityFeedItem needswork 1`] = `
<div
  className="RevisionBox"
>
  <p>
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-refresh\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
    <a
      href="/profile/view/damason"
    />
    <span>
      <a
        href="/profile/view/damason"
        title="David Mason"
      >
        damason
      </a>
       has 
      <span
        className="u-textUnsure"
      >
        <span>
          created a fuzzy revision
        </span>
      </span>
    </span>
  </p>
  <div
    className="well"
  >
    নাম
    <span
      className="u-pullRight"
    >
      <button
        className="Link Link--neutral"
        onClick={[Function]}
        title="Copy"
      >
        <span
          className=""
        >
          <svg
            className="s1"
            dangerouslySetInnerHTML={
              Object {
                "__html": "<use xlink:href=\\"#Icon-project\\" />",
              }
            }
            style={
              Object {
                "fill": "currentColor",
              }
            }
          />
        </span>
      </button>
    </span>
  </div>
  <span
    className="u-block small u-sMT-1-2 u-sPB-1-4 u-textMuted u-textSecondary"
  >
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-clock\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
    <span>
      Dec 16, 2016
    </span>
     
    <span>
      2:19 AM
    </span>
  </span>
</div>
`;

exports[`Editor Storyshots ActivityFeedItem rejected - critical priority 1`] = `
<div
  className="RevisionBox"
>
  <p>
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-refresh\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
    <a
      href="/profile/view/damason"
    />
    <span>
      <a
        href="/profile/view/damason"
        title="David Mason"
      >
        damason
      </a>
       has 
      <span
        className="u-textWarning"
      >
        <span>
          rejected this translation
        </span>
      </span>
       
      <span
        className="comment"
      >
        <div
          className="well well-sm"
        >
          <span
            className=""
          >
            <svg
              className="s0"
              dangerouslySetInnerHTML={
                Object {
                  "__html": "<use xlink:href=\\"#Icon-comment\\" />",
                }
              }
              style={
                Object {
                  "fill": "currentColor",
                }
              }
            />
          </span>
          You spelt this wrong.
        </div>
      </span>
    </span>
  </p>
  <div
    className="well-rejected well"
  >
    নাম
    <span
      className="u-pullRight"
    >
      <button
        className="Link Link--neutral"
        onClick={[Function]}
        title="Copy"
      >
        <span
          className=""
        >
          <svg
            className="s1"
            dangerouslySetInnerHTML={
              Object {
                "__html": "<use xlink:href=\\"#Icon-project\\" />",
              }
            }
            style={
              Object {
                "fill": "currentColor",
              }
            }
          />
        </span>
      </button>
    </span>
  </div>
  <span
    className="u-block small u-sMT-1-2 u-sPB-1-4 u-textMuted u-textSecondary"
  >
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-clock\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
    <span>
      Dec 16, 2016
    </span>
     
    <span>
      2:19 AM
    </span>
  </span>
</div>
`;

exports[`Editor Storyshots ActivityFeedItem rejected - major priority 1`] = `
<div
  className="RevisionBox"
>
  <p>
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-refresh\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
    <a
      href="/profile/view/damason"
    />
    <span>
      <a
        href="/profile/view/damason"
        title="David Mason"
      >
        damason
      </a>
       has 
      <span
        className="u-textWarning"
      >
        <span>
          rejected this translation
        </span>
      </span>
       
      <span
        className="comment"
      >
        <div
          className="well well-sm"
        >
          <span
            className=""
          >
            <svg
              className="s0"
              dangerouslySetInnerHTML={
                Object {
                  "__html": "<use xlink:href=\\"#Icon-comment\\" />",
                }
              }
              style={
                Object {
                  "fill": "currentColor",
                }
              }
            />
          </span>
          You spelt this wrong.
        </div>
      </span>
    </span>
  </p>
  <div
    className="well-rejected well"
  >
    নাম
    <span
      className="u-pullRight"
    >
      <button
        className="Link Link--neutral"
        onClick={[Function]}
        title="Copy"
      >
        <span
          className=""
        >
          <svg
            className="s1"
            dangerouslySetInnerHTML={
              Object {
                "__html": "<use xlink:href=\\"#Icon-project\\" />",
              }
            }
            style={
              Object {
                "fill": "currentColor",
              }
            }
          />
        </span>
      </button>
    </span>
  </div>
  <span
    className="u-block small u-sMT-1-2 u-sPB-1-4 u-textMuted u-textSecondary"
  >
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-clock\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
    <span>
      Dec 16, 2016
    </span>
     
    <span>
      2:19 AM
    </span>
  </span>
</div>
`;

exports[`Editor Storyshots ActivityFeedItem rejected - minor priority 1`] = `
<div
  className="RevisionBox"
>
  <p>
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-refresh\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
    <a
      href="/profile/view/damason"
    />
    <span>
      <a
        href="/profile/view/damason"
        title="David Mason"
      >
        damason
      </a>
       has 
      <span
        className="u-textWarning"
      >
        <span>
          rejected this translation
        </span>
      </span>
       
      <span
        className="comment"
      >
        <div
          className="well well-sm"
        >
          <span
            className=""
          >
            <svg
              className="s0"
              dangerouslySetInnerHTML={
                Object {
                  "__html": "<use xlink:href=\\"#Icon-comment\\" />",
                }
              }
              style={
                Object {
                  "fill": "currentColor",
                }
              }
            />
          </span>
          You spelt this wrong.
        </div>
      </span>
    </span>
  </p>
  <div
    className="well-rejected well"
  >
    নাম
    <span
      className="u-pullRight"
    >
      <button
        className="Link Link--neutral"
        onClick={[Function]}
        title="Copy"
      >
        <span
          className=""
        >
          <svg
            className="s1"
            dangerouslySetInnerHTML={
              Object {
                "__html": "<use xlink:href=\\"#Icon-project\\" />",
              }
            }
            style={
              Object {
                "fill": "currentColor",
              }
            }
          />
        </span>
      </button>
    </span>
  </div>
  <span
    className="u-block small u-sMT-1-2 u-sPB-1-4 u-textMuted u-textSecondary"
  >
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-clock\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
    <span>
      Dec 16, 2016
    </span>
     
    <span>
      2:19 AM
    </span>
  </span>
</div>
`;

exports[`Editor Storyshots ActivityFeedItem translated 1`] = `
<div
  className="RevisionBox"
>
  <p>
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-refresh\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
    <a
      href="/profile/view/damason"
    />
    <span>
      <a
        href="/profile/view/damason"
        title="David Mason"
      >
        damason
      </a>
       has 
      <span
        className="u-textSuccess"
      >
        <span>
          created a translation revision
        </span>
      </span>
    </span>
  </p>
  <div
    className="well-translated well"
  >
    নাম
    <span
      className="u-pullRight"
    >
      <button
        className="Link Link--neutral"
        onClick={[Function]}
        title="Copy"
      >
        <span
          className=""
        >
          <svg
            className="s1"
            dangerouslySetInnerHTML={
              Object {
                "__html": "<use xlink:href=\\"#Icon-project\\" />",
              }
            }
            style={
              Object {
                "fill": "currentColor",
              }
            }
          />
        </span>
      </button>
    </span>
  </div>
  <span
    className="u-block small u-sMT-1-2 u-sPB-1-4 u-textMuted u-textSecondary"
  >
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-clock\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
    <span>
      Dec 16, 2016
    </span>
     
    <span>
      2:19 AM
    </span>
  </span>
</div>
`;

exports[`Editor Storyshots ActivitySelectList default 1`] = `
<div
  className="btn-toolbar"
  role="toolbar"
>
  <button
    className="Button Button--small u-rounded Button--secondary is-active btn btn-default"
    disabled={false}
    onClick={[Function]}
    type="button"
  >
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-clock\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
    All
  </button>
  <button
    className="Button Button--small u-rounded Button--secondary btn btn-default"
    disabled={false}
    onClick={[Function]}
    type="button"
  >
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-comment\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
    Comments
  </button>
  <button
    className="Button Button--small u-rounded Button--secondary btn btn-default"
    disabled={false}
    onClick={[Function]}
    type="button"
  >
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-refresh\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
    Updates
  </button>
</div>
`;

exports[`Editor Storyshots Button BUTTON BUILDER 1`] = `
<div
  data-radium={true}
  style={
    Object {
      "background": "rgb(255, 255, 255)",
      "bottom": 0,
      "display": "flex",
      "flexDirection": "column",
      "left": 0,
      "position": "absolute",
      "right": 0,
      "top": 0,
    }
  }
>
  <div
    data-radium={true}
    style={
      Object {
        "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
        "marginLeft": 15,
        "marginRight": 15,
        "marginTop": 15,
        "paddingBottom": 15,
        "paddingTop": 2,
      }
    }
  >
    <h2
      data-radium={true}
      style={
        Object {
          "color": "rgba(0, 0, 0, 0.6)",
          "fontSize": 20,
          "fontWeight": 200,
          "margin": 0,
          "padding": 0,
        }
      }
    >
      Button
    </h2>
  </div>
  <div
    data-radium={true}
    style={
      Object {
        "boxSizing": "border-box",
        "flex": 1,
        "margin": 50,
        "position": "relative",
      }
    }
  >
    <div
      data-radium={true}
      style={
        Object {
          "alignItems": "center",
          "bottom": 0,
          "display": "flex",
          "flexDirection": "column",
          "justifyContent": "center",
          "left": 0,
          "position": "absolute",
          "right": 0,
          "top": 0,
        }
      }
    >
      <div
        data-radium={true}
        style={
          Object {
            "border": "solid 1px rgba(0, 0, 0, 0.0)",
            "boxSizing": "border-box",
            "height": "auto",
            "position": "relative",
            "width": "auto",
          }
        }
      >
        <div>
          <div
            style={
              Object {
                "position": "relative",
                "zIndex": 0,
              }
            }
          >
            <button
              className="Button Button--default"
              disabled={false}
              onClick={[Function]}
              title="Click Me"
            >
              Click Me
            </button>
          </div>
          <button
            onClick={[Function]}
            style={
              Object {
                "background": "#28c",
                "border": "none",
                "borderRadius": "0 0 0 5px",
                "color": "#fff",
                "cursor": "pointer",
                "display": "block",
                "fontFamily": "sans-serif",
                "fontSize": "12px",
                "padding": "5px 15px",
                "position": "fixed",
                "right": 0,
                "top": 0,
              }
            }
            type="button"
          >
            Show Info
          </button>
          <div
            style={
              Object {
                "background": "white",
                "bottom": 0,
                "display": "none",
                "left": 0,
                "overflow": "auto",
                "padding": "0 40px",
                "position": "fixed",
                "right": 0,
                "top": 0,
                "zIndex": 99999,
              }
            }
          >
            <button
              onClick={[Function]}
              style={
                Object {
                  "background": "#28c",
                  "border": "none",
                  "borderRadius": "0 0 0 5px",
                  "color": "#fff",
                  "cursor": "pointer",
                  "display": "block",
                  "fontFamily": "sans-serif",
                  "fontSize": "12px",
                  "padding": "5px 15px",
                  "position": "fixed",
                  "right": 0,
                  "top": 0,
                }
              }
              type="button"
            >
              ×
            </button>
            <div
              style={undefined}
            >
              <div
                style={
                  Object {
                    "WebkitFontSmoothing": "antialiased",
                    "backgroundColor": "#fff",
                    "border": "1px solid #eee",
                    "borderRadius": "2px",
                    "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
                    "color": "#444",
                    "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
                    "fontSize": "15px",
                    "fontWeight": 300,
                    "lineHeight": 1.45,
                    "marginBottom": "20px",
                    "marginTop": "20px",
                    "padding": "20px 40px 40px",
                  }
                }
              >
                <div
                  style={
                    Object {
                      "borderBottom": "1px solid #eee",
                      "marginBottom": 10,
                      "paddingTop": 10,
                    }
                  }
                >
                  <h1
                    style={
                      Object {
                        "fontSize": "35px",
                        "margin": 0,
                        "padding": 0,
                      }
                    }
                  >
                    Button
                  </h1>
                  <h2
                    style={
                      Object {
                        "fontSize": "22px",
                        "fontWeight": 400,
                        "margin": "0 0 10px 0",
                        "padding": 0,
                      }
                    }
                  >
                    BUTTON BUILDER
                  </h2>
                </div>
                <div
                  style={
                    Object {
                      "marginBottom": 0,
                    }
                  }
                >
                  <div
                    style={
                      Object {
                        "WebkitFontSmoothing": "antialiased",
                        "color": "#444",
                        "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
                        "fontSize": "15px",
                      }
                    }
                  >
                    Use KNOBS tab to adjust the settings, then copy your code from Story Source
                  </div>
                </div>
                <div>
                  <h1
                    style={
                      Object {
                        "borderBottom": "1px solid #EEE",
                        "fontSize": "25px",
                        "margin": "20px 0 0 0",
                        "padding": "0 0 5px 0",
                      }
                    }
                  >
                    Story Source
                  </h1>
                  <pre
                    style={
                      Object {
                        "backgroundColor": "#fafafa",
                        "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
                        "fontSize": ".88em",
                        "lineHeight": 1.5,
                        "overflowX": "scroll",
                        "padding": ".5rem",
                      }
                    }
                  >
                    <div>
                      <div
                        style={
                          Object {
                            "paddingLeft": 18,
                            "paddingRight": 3,
                          }
                        }
                      >
                        <span
                          style={
                            Object {
                              "color": "#777",
                            }
                          }
                        >
                          &lt;
                          Button
                        </span>
                        <span>
                          <span>
                            <span>
                              <br />
                                
                            </span>
                            <span
                              style={Object {}}
                            >
                              title
                            </span>
                            <span>
                              =
                              <span
                                style={Object {}}
                              >
                                <span
                                  style={
                                    Object {
                                      "color": "#22a",
                                      "wordBreak": "break-word",
                                    }
                                  }
                                >
                                  "
                                  Click Me
                                  "
                                </span>
                              </span>
                            </span>
                          </span>
                          <span>
                            <span>
                              <br />
                                
                            </span>
                            <span
                              style={Object {}}
                            >
                              onClick
                            </span>
                            <span>
                              =
                              <span
                                style={Object {}}
                              >
                                <span>
                                  {
                                  <span
                                    style={
                                      Object {
                                        "color": "#170",
                                      }
                                    }
                                  >
                                    onClick()
                                  </span>
                                  }
                                </span>
                              </span>
                            </span>
                          </span>
                          <span>
                            <span>
                              <br />
                                
                            </span>
                            <span
                              style={Object {}}
                            >
                              className
                            </span>
                            <span>
                              =
                              <span
                                style={Object {}}
                              >
                                <span
                                  style={
                                    Object {
                                      "color": "#22a",
                                      "wordBreak": "break-word",
                                    }
                                  }
                                >
                                  "
                                  Button Button--default
                                  "
                                </span>
                              </span>
                            </span>
                            <br />
                          </span>
                        </span>
                        <span
                          style={
                            Object {
                              "color": "#777",
                            }
                          }
                        >
                          &gt;
                        </span>
                      </div>
                      <div
                        style={
                          Object {
                            "paddingLeft": 33,
                            "paddingRight": 3,
                          }
                        }
                      >
                        <span
                          style={
                            Object {
                              "color": "#777",
                            }
                          }
                        >
                          Click Me
                        </span>
                      </div>
                      <div
                        style={
                          Object {
                            "paddingLeft": 18,
                            "paddingRight": 3,
                          }
                        }
                      >
                        <span
                          style={
                            Object {
                              "color": "#777",
                            }
                          }
                        >
                          &lt;/
                          Button
                          &gt;
                        </span>
                      </div>
                    </div>
                  </pre>
                </div>
                <div>
                  <h1
                    style={
                      Object {
                        "borderBottom": "1px solid #EEE",
                        "fontSize": "25px",
                        "margin": "20px 0 0 0",
                        "padding": "0 0 5px 0",
                      }
                    }
                  >
                    Prop Types
                  </h1>
                  <div>
                    <h2
                      style={
                        Object {
                          "margin": "20px 0 0 0",
                        }
                      }
                    >
                      "
                      Button
                      " Component
                    </h2>
                    <table
                      className="css-1ytzlk7"
                    >
                      <thead>
                        <tr>
                          <th
                            className="css-d52hbj"
                          >
                            property
                          </th>
                          <th
                            className="css-d52hbj"
                          >
                            propType
                          </th>
                          <th
                            className="css-d52hbj"
                          >
                            required
                          </th>
                          <th
                            className="css-d52hbj"
                          >
                            default
                          </th>
                          <th
                            className="css-d52hbj"
                          >
                            description
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            title
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            onClick
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            disabled
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            <span>
                              {
                              <span
                                style={
                                  Object {
                                    "color": "#a11",
                                  }
                                }
                              >
                                false
                              </span>
                              }
                            </span>
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            children
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            className
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          data-radium={true}
          style={
            Object {
              "bottom": "auto",
              "height": 20,
              "left": -19,
              "position": "absolute",
              "right": "auto",
              "top": -19,
              "width": 20,
            }
          }
        >
          <div
            data-radium={true}
            style={
              Object {
                "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 0,
                "left": 0,
                "position": "absolute",
                "right": 5,
                "top": undefined,
              }
            }
          />
          <div
            data-radium={true}
            style={
              Object {
                "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 5,
                "left": "auto",
                "position": "absolute",
                "right": 0,
                "top": 0,
              }
            }
          />
        </div>
        <div
          data-radium={true}
          style={
            Object {
              "bottom": "auto",
              "height": 20,
              "left": "auto",
              "position": "absolute",
              "right": -19,
              "top": -19,
              "width": 20,
            }
          }
        >
          <div
            data-radium={true}
            style={
              Object {
                "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 0,
                "left": 5,
                "position": "absolute",
                "right": 0,
                "top": "auto",
              }
            }
          />
          <div
            data-radium={true}
            style={
              Object {
                "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 5,
                "left": 0,
                "position": "absolute",
                "right": "auto",
                "top": 0,
              }
            }
          />
        </div>
        <div
          data-radium={true}
          style={
            Object {
              "bottom": -19,
              "height": 20,
              "left": -19,
              "position": "absolute",
              "right": "auto",
              "top": "auto",
              "width": 20,
            }
          }
        >
          <div
            data-radium={true}
            style={
              Object {
                "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": "auto",
                "left": 0,
                "position": "absolute",
                "right": 5,
                "top": 0,
              }
            }
          />
          <div
            data-radium={true}
            style={
              Object {
                "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 0,
                "left": "auto",
                "position": "absolute",
                "right": 0,
                "top": 5,
              }
            }
          />
        </div>
        <div
          data-radium={true}
          style={
            Object {
              "bottom": -19,
              "height": 20,
              "left": "auto",
              "position": "absolute",
              "right": -19,
              "top": undefined,
              "width": 20,
            }
          }
        >
          <div
            data-radium={true}
            style={
              Object {
                "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": "auto",
                "left": 5,
                "position": "absolute",
                "right": 0,
                "top": 0,
              }
            }
          />
          <div
            data-radium={true}
            style={
              Object {
                "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 0,
                "left": 0,
                "position": "absolute",
                "right": "auto",
                "top": 5,
              }
            }
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Editor Storyshots Button colour styles 1`] = `
<div
  data-radium={true}
  style={
    Object {
      "background": "rgb(255, 255, 255)",
      "bottom": 0,
      "display": "flex",
      "flexDirection": "column",
      "left": 0,
      "position": "absolute",
      "right": 0,
      "top": 0,
    }
  }
>
  <div
    data-radium={true}
    style={
      Object {
        "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
        "marginLeft": 15,
        "marginRight": 15,
        "marginTop": 15,
        "paddingBottom": 15,
        "paddingTop": 2,
      }
    }
  >
    <h2
      data-radium={true}
      style={
        Object {
          "color": "rgba(0, 0, 0, 0.6)",
          "fontSize": 20,
          "fontWeight": 200,
          "margin": 0,
          "padding": 0,
        }
      }
    >
      Button
    </h2>
  </div>
  <div
    data-radium={true}
    style={
      Object {
        "boxSizing": "border-box",
        "flex": 1,
        "margin": 50,
        "position": "relative",
      }
    }
  >
    <div
      data-radium={true}
      style={
        Object {
          "alignItems": "center",
          "bottom": 0,
          "display": "flex",
          "flexDirection": "column",
          "justifyContent": "center",
          "left": 0,
          "position": "absolute",
          "right": 0,
          "top": 0,
        }
      }
    >
      <div
        data-radium={true}
        style={
          Object {
            "border": "solid 1px rgba(0, 0, 0, 0.0)",
            "boxSizing": "border-box",
            "height": "auto",
            "position": "relative",
            "width": "auto",
          }
        }
      >
        <div>
          <div
            style={
              Object {
                "position": "relative",
                "zIndex": 0,
              }
            }
          >
            <ul
              data-radium={true}
            >
              <li>
                <button
                  className="EditorButton Button--primary"
                  disabled={false}
                  onClick={[Function]}
                  title="Click should trigger onClick action"
                >
                  Button Button--primary
                </button>
              </li>
              <li>
                <button
                  className="EditorButton Button--success"
                  disabled={false}
                  onClick={[Function]}
                  title="Click should trigger onClick action"
                >
                  Button Button--success
                </button>
              </li>
              <li>
                <button
                  className="EditorButton Button--unsure"
                  disabled={false}
                  onClick={[Function]}
                  title="Click should trigger onClick action"
                >
                  Button Button--unsure
                </button>
              </li>
              <li>
                <button
                  className="EditorButton Button--neutral"
                  disabled={false}
                  onClick={[Function]}
                  title="Click should trigger onClick action"
                >
                  Button Button--neutral
                </button>
              </li>
            </ul>
          </div>
          <button
            onClick={[Function]}
            style={
              Object {
                "background": "#28c",
                "border": "none",
                "borderRadius": "0 0 0 5px",
                "color": "#fff",
                "cursor": "pointer",
                "display": "block",
                "fontFamily": "sans-serif",
                "fontSize": "12px",
                "padding": "5px 15px",
                "position": "fixed",
                "right": 0,
                "top": 0,
              }
            }
            type="button"
          >
            Show Info
          </button>
          <div
            style={
              Object {
                "background": "white",
                "bottom": 0,
                "display": "none",
                "left": 0,
                "overflow": "auto",
                "padding": "0 40px",
                "position": "fixed",
                "right": 0,
                "top": 0,
                "zIndex": 99999,
              }
            }
          >
            <button
              onClick={[Function]}
              style={
                Object {
                  "background": "#28c",
                  "border": "none",
                  "borderRadius": "0 0 0 5px",
                  "color": "#fff",
                  "cursor": "pointer",
                  "display": "block",
                  "fontFamily": "sans-serif",
                  "fontSize": "12px",
                  "padding": "5px 15px",
                  "position": "fixed",
                  "right": 0,
                  "top": 0,
                }
              }
              type="button"
            >
              ×
            </button>
            <div
              style={undefined}
            >
              <div
                style={
                  Object {
                    "WebkitFontSmoothing": "antialiased",
                    "backgroundColor": "#fff",
                    "border": "1px solid #eee",
                    "borderRadius": "2px",
                    "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
                    "color": "#444",
                    "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
                    "fontSize": "15px",
                    "fontWeight": 300,
                    "lineHeight": 1.45,
                    "marginBottom": "20px",
                    "marginTop": "20px",
                    "padding": "20px 40px 40px",
                  }
                }
              >
                <div
                  style={
                    Object {
                      "borderBottom": "1px solid #eee",
                      "marginBottom": 10,
                      "paddingTop": 10,
                    }
                  }
                >
                  <h1
                    style={
                      Object {
                        "fontSize": "35px",
                        "margin": 0,
                        "padding": 0,
                      }
                    }
                  >
                    Button
                  </h1>
                  <h2
                    style={
                      Object {
                        "fontSize": "22px",
                        "fontWeight": 400,
                        "margin": "0 0 10px 0",
                        "padding": 0,
                      }
                    }
                  >
                    colour styles
                  </h2>
                </div>
                
                <div>
                  <h1
                    style={
                      Object {
                        "borderBottom": "1px solid #EEE",
                        "fontSize": "25px",
                        "margin": "20px 0 0 0",
                        "padding": "0 0 5px 0",
                      }
                    }
                  >
                    Story Source
                  </h1>
                  <pre
                    style={
                      Object {
                        "backgroundColor": "#fafafa",
                        "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
                        "fontSize": ".88em",
                        "lineHeight": 1.5,
                        "overflowX": "scroll",
                        "padding": ".5rem",
                      }
                    }
                  >
                    <div>
                      <div
                        style={
                          Object {
                            "paddingLeft": 18,
                            "paddingRight": 3,
                          }
                        }
                      >
                        <span
                          style={
                            Object {
                              "color": "#777",
                            }
                          }
                        >
                          &lt;
                          ul
                        </span>
                        <span>
                          <span>
                             
                            <span
                              style={Object {}}
                            >
                              data-radium
                            </span>
                            
                          </span>
                        </span>
                        <span
                          style={
                            Object {
                              "color": "#777",
                            }
                          }
                        >
                          &gt;
                        </span>
                      </div>
                      <div>
                        <div
                          style={
                            Object {
                              "paddingLeft": 33,
                              "paddingRight": 3,
                            }
                          }
                        >
                          <span
                            style={
                              Object {
                                "color": "#777",
                              }
                            }
                          >
                            &lt;
                            li
                          </span>
                          <span />
                          <span
                            style={
                              Object {
                                "color": "#777",
                              }
                            }
                          >
                            &gt;
                          </span>
                        </div>
                        <div>
                          <div
                            style={
                              Object {
                                "paddingLeft": 48,
                                "paddingRight": 3,
                              }
                            }
                          >
                            <span
                              style={
                                Object {
                                  "color": "#777",
                                }
                              }
                            >
                              &lt;
                              Button
                            </span>
                            <span>
                              <span>
                                 
                                <span
                                  style={Object {}}
                                >
                                  title
                                </span>
                                <span>
                                  =
                                  <span
                                    style={Object {}}
                                  >
                                    <span
                                      style={
                                        Object {
                                          "color": "#22a",
                                          "wordBreak": "break-word",
                                        }
                                      }
                                    >
                                      "
                                      Click should trigger onClick action
                                      "
                                    </span>
                                  </span>
                                </span>
                              </span>
                              <span>
                                 
                                <span
                                  style={Object {}}
                                >
                                  onClick
                                </span>
                                <span>
                                  =
                                  <span
                                    style={Object {}}
                                  >
                                    <span>
                                      {
                                      <span
                                        style={
                                          Object {
                                            "color": "#170",
                                          }
                                        }
                                      >
                                        onClick()
                                      </span>
                                      }
                                    </span>
                                  </span>
                                </span>
                              </span>
                              <span>
                                 
                                <span
                                  style={Object {}}
                                >
                                  className
                                </span>
                                <span>
                                  =
                                  <span
                                    style={Object {}}
                                  >
                                    <span
                                      style={
                                        Object {
                                          "color": "#22a",
                                          "wordBreak": "break-word",
                                        }
                                      }
                                    >
                                      "
                                      EditorButton Button--primary
                                      "
                                    </span>
                                  </span>
                                </span>
                                
                              </span>
                            </span>
                            <span
                              style={
                                Object {
                                  "color": "#777",
                                }
                              }
                            >
                              &gt;
                            </span>
                          </div>
                          <div
                            style={
                              Object {
                                "paddingLeft": 63,
                                "paddingRight": 3,
                              }
                            }
                          >
                            <span
                              style={
                                Object {
                                  "color": "#777",
                                }
                              }
                            >
                              Button Button--primary
                            </span>
                          </div>
                          <div
                            style={
                              Object {
                                "paddingLeft": 48,
                                "paddingRight": 3,
                              }
                            }
                          >
                            <span
                              style={
                                Object {
                                  "color": "#777",
                                }
                              }
                            >
                              &lt;/
                              Button
                              &gt;
                            </span>
                          </div>
                        </div>
                        <div
                          style={
                            Object {
                              "paddingLeft": 33,
                              "paddingRight": 3,
                            }
                          }
                        >
                          <span
                            style={
                              Object {
                                "color": "#777",
                              }
                            }
                          >
                            &lt;/
                            li
                            &gt;
                          </span>
                        </div>
                      </div>
                      <div>
                        <div
                          style={
                            Object {
                              "paddingLeft": 33,
                              "paddingRight": 3,
                            }
                          }
                        >
                          <span
                            style={
                              Object {
                                "color": "#777",
                              }
                            }
                          >
                            &lt;
                            li
                          </span>
                          <span />
                          <span
                            style={
                              Object {
                                "color": "#777",
                              }
                            }
                          >
                            &gt;
                          </span>
                        </div>
                        <div>
                          <div
                            style={
                              Object {
                                "paddingLeft": 48,
                                "paddingRight": 3,
                              }
                            }
                          >
                            <span
                              style={
                                Object {
                                  "color": "#777",
                                }
                              }
                            >
                              &lt;
                              Button
                            </span>
                            <span>
                              <span>
                                 
                                <span
                                  style={Object {}}
                                >
                                  title
                                </span>
                                <span>
                                  =
                                  <span
                                    style={Object {}}
                                  >
                                    <span
                                      style={
                                        Object {
                                          "color": "#22a",
                                          "wordBreak": "break-word",
                                        }
                                      }
                                    >
                                      "
                                      Click should trigger onClick action
                                      "
                                    </span>
                                  </span>
                                </span>
                              </span>
                              <span>
                                 
                                <span
                                  style={Object {}}
                                >
                                  onClick
                                </span>
                                <span>
                                  =
                                  <span
                                    style={Object {}}
                                  >
                                    <span>
                                      {
                                      <span
                                        style={
                                          Object {
                                            "color": "#170",
                                          }
                                        }
                                      >
                                        onClick()
                                      </span>
                                      }
                                    </span>
                                  </span>
                                </span>
                              </span>
                              <span>
                                 
                                <span
                                  style={Object {}}
                                >
                                  className
                                </span>
                                <span>
                                  =
                                  <span
                                    style={Object {}}
                                  >
                                    <span
                                      style={
                                        Object {
                                          "color": "#22a",
                                          "wordBreak": "break-word",
                                        }
                                      }
                                    >
                                      "
                                      EditorButton Button--success
                                      "
                                    </span>
                                  </span>
                                </span>
                                
                              </span>
                            </span>
                            <span
                              style={
                                Object {
                                  "color": "#777",
                                }
                              }
                            >
                              &gt;
                            </span>
                          </div>
                          <div
                            style={
                              Object {
                                "paddingLeft": 63,
                                "paddingRight": 3,
                              }
                            }
                          >
                            <span
                              style={
                                Object {
                                  "color": "#777",
                                }
                              }
                            >
                              Button Button--success
                            </span>
                          </div>
                          <div
                            style={
                              Object {
                                "paddingLeft": 48,
                                "paddingRight": 3,
                              }
                            }
                          >
                            <span
                              style={
                                Object {
                                  "color": "#777",
                                }
                              }
                            >
                              &lt;/
                              Button
                              &gt;
                            </span>
                          </div>
                        </div>
                        <div
                          style={
                            Object {
                              "paddingLeft": 33,
                              "paddingRight": 3,
                            }
                          }
                        >
                          <span
                            style={
                              Object {
                                "color": "#777",
                              }
                            }
                          >
                            &lt;/
                            li
                            &gt;
                          </span>
                        </div>
                      </div>
                      <div>
                        <div
                          style={
                            Object {
                              "paddingLeft": 33,
                              "paddingRight": 3,
                            }
                          }
                        >
                          <span
                            style={
                              Object {
                                "color": "#777",
                              }
                            }
                          >
                            &lt;
                            li
                          </span>
                          <span />
                          <span
                            style={
                              Object {
                                "color": "#777",
                              }
                            }
                          >
                            &gt;
                          </span>
                        </div>
                        <div>
                          <div
                            style={
                              Object {
                                "paddingLeft": 48,
                                "paddingRight": 3,
                              }
                            }
                          >
                            <span
                              style={
                                Object {
                                  "color": "#777",
                                }
                              }
                            >
                              &lt;
                              Button
                            </span>
                            <span>
                              <span>
                                 
                                <span
                                  style={Object {}}
                                >
                                  title
                                </span>
                                <span>
                                  =
                                  <span
                                    style={Object {}}
                                  >
                                    <span
                                      style={
                                        Object {
                                          "color": "#22a",
                                          "wordBreak": "break-word",
                                        }
                                      }
                                    >
                                      "
                                      Click should trigger onClick action
                                      "
                                    </span>
                                  </span>
                                </span>
                              </span>
                              <span>
                                 
                                <span
                                  style={Object {}}
                                >
                                  onClick
                                </span>
                                <span>
                                  =
                                  <span
                                    style={Object {}}
                                  >
                                    <span>
                                      {
                                      <span
                                        style={
                                          Object {
                                            "color": "#170",
                                          }
                                        }
                                      >
                                        onClick()
                                      </span>
                                      }
                                    </span>
                                  </span>
                                </span>
                              </span>
                              <span>
                                 
                                <span
                                  style={Object {}}
                                >
                                  className
                                </span>
                                <span>
                                  =
                                  <span
                                    style={Object {}}
                                  >
                                    <span
                                      style={
                                        Object {
                                          "color": "#22a",
                                          "wordBreak": "break-word",
                                        }
                                      }
                                    >
                                      "
                                      EditorButton Button--unsure
                                      "
                                    </span>
                                  </span>
                                </span>
                                
                              </span>
                            </span>
                            <span
                              style={
                                Object {
                                  "color": "#777",
                                }
                              }
                            >
                              &gt;
                            </span>
                          </div>
                          <div
                            style={
                              Object {
                                "paddingLeft": 63,
                                "paddingRight": 3,
                              }
                            }
                          >
                            <span
                              style={
                                Object {
                                  "color": "#777",
                                }
                              }
                            >
                              Button Button--unsure
                            </span>
                          </div>
                          <div
                            style={
                              Object {
                                "paddingLeft": 48,
                                "paddingRight": 3,
                              }
                            }
                          >
                            <span
                              style={
                                Object {
                                  "color": "#777",
                                }
                              }
                            >
                              &lt;/
                              Button
                              &gt;
                            </span>
                          </div>
                        </div>
                        <div
                          style={
                            Object {
                              "paddingLeft": 33,
                              "paddingRight": 3,
                            }
                          }
                        >
                          <span
                            style={
                              Object {
                                "color": "#777",
                              }
                            }
                          >
                            &lt;/
                            li
                            &gt;
                          </span>
                        </div>
                      </div>
                      <div>
                        <div
                          style={
                            Object {
                              "paddingLeft": 33,
                              "paddingRight": 3,
                            }
                          }
                        >
                          <span
                            style={
                              Object {
                                "color": "#777",
                              }
                            }
                          >
                            &lt;
                            li
                          </span>
                          <span />
                          <span
                            style={
                              Object {
                                "color": "#777",
                              }
                            }
                          >
                            &gt;
                          </span>
                        </div>
                        <div>
                          <div
                            style={
                              Object {
                                "paddingLeft": 48,
                                "paddingRight": 3,
                              }
                            }
                          >
                            <span
                              style={
                                Object {
                                  "color": "#777",
                                }
                              }
                            >
                              &lt;
                              Button
                            </span>
                            <span>
                              <span>
                                 
                                <span
                                  style={Object {}}
                                >
                                  title
                                </span>
                                <span>
                                  =
                                  <span
                                    style={Object {}}
                                  >
                                    <span
                                      style={
                                        Object {
                                          "color": "#22a",
                                          "wordBreak": "break-word",
                                        }
                                      }
                                    >
                                      "
                                      Click should trigger onClick action
                                      "
                                    </span>
                                  </span>
                                </span>
                              </span>
                              <span>
                                 
                                <span
                                  style={Object {}}
                                >
                                  onClick
                                </span>
                                <span>
                                  =
                                  <span
                                    style={Object {}}
                                  >
                                    <span>
                                      {
                                      <span
                                        style={
                                          Object {
                                            "color": "#170",
                                          }
                                        }
                                      >
                                        onClick()
                                      </span>
                                      }
                                    </span>
                                  </span>
                                </span>
                              </span>
                              <span>
                                 
                                <span
                                  style={Object {}}
                                >
                                  className
                                </span>
                                <span>
                                  =
                                  <span
                                    style={Object {}}
                                  >
                                    <span
                                      style={
                                        Object {
                                          "color": "#22a",
                                          "wordBreak": "break-word",
                                        }
                                      }
                                    >
                                      "
                                      EditorButton Button--neutral
                                      "
                                    </span>
                                  </span>
                                </span>
                                
                              </span>
                            </span>
                            <span
                              style={
                                Object {
                                  "color": "#777",
                                }
                              }
                            >
                              &gt;
                            </span>
                          </div>
                          <div
                            style={
                              Object {
                                "paddingLeft": 63,
                                "paddingRight": 3,
                              }
                            }
                          >
                            <span
                              style={
                                Object {
                                  "color": "#777",
                                }
                              }
                            >
                              Button Button--neutral
                            </span>
                          </div>
                          <div
                            style={
                              Object {
                                "paddingLeft": 48,
                                "paddingRight": 3,
                              }
                            }
                          >
                            <span
                              style={
                                Object {
                                  "color": "#777",
                                }
                              }
                            >
                              &lt;/
                              Button
                              &gt;
                            </span>
                          </div>
                        </div>
                        <div
                          style={
                            Object {
                              "paddingLeft": 33,
                              "paddingRight": 3,
                            }
                          }
                        >
                          <span
                            style={
                              Object {
                                "color": "#777",
                              }
                            }
                          >
                            &lt;/
                            li
                            &gt;
                          </span>
                        </div>
                      </div>
                      <div
                        style={
                          Object {
                            "paddingLeft": 18,
                            "paddingRight": 3,
                          }
                        }
                      >
                        <span
                          style={
                            Object {
                              "color": "#777",
                            }
                          }
                        >
                          &lt;/
                          ul
                          &gt;
                        </span>
                      </div>
                    </div>
                  </pre>
                </div>
                <div>
                  <h1
                    style={
                      Object {
                        "borderBottom": "1px solid #EEE",
                        "fontSize": "25px",
                        "margin": "20px 0 0 0",
                        "padding": "0 0 5px 0",
                      }
                    }
                  >
                    Prop Types
                  </h1>
                  <div>
                    <h2
                      style={
                        Object {
                          "margin": "20px 0 0 0",
                        }
                      }
                    >
                      "
                      Button
                      " Component
                    </h2>
                    <table
                      className="css-1ytzlk7"
                    >
                      <thead>
                        <tr>
                          <th
                            className="css-d52hbj"
                          >
                            property
                          </th>
                          <th
                            className="css-d52hbj"
                          >
                            propType
                          </th>
                          <th
                            className="css-d52hbj"
                          >
                            required
                          </th>
                          <th
                            className="css-d52hbj"
                          >
                            default
                          </th>
                          <th
                            className="css-d52hbj"
                          >
                            description
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            title
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            onClick
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            disabled
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            <span>
                              {
                              <span
                                style={
                                  Object {
                                    "color": "#a11",
                                  }
                                }
                              >
                                false
                              </span>
                              }
                            </span>
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            children
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            className
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          data-radium={true}
          style={
            Object {
              "bottom": "auto",
              "height": 20,
              "left": -19,
              "position": "absolute",
              "right": "auto",
              "top": -19,
              "width": 20,
            }
          }
        >
          <div
            data-radium={true}
            style={
              Object {
                "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 0,
                "left": 0,
                "position": "absolute",
                "right": 5,
                "top": undefined,
              }
            }
          />
          <div
            data-radium={true}
            style={
              Object {
                "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 5,
                "left": "auto",
                "position": "absolute",
                "right": 0,
                "top": 0,
              }
            }
          />
        </div>
        <div
          data-radium={true}
          style={
            Object {
              "bottom": "auto",
              "height": 20,
              "left": "auto",
              "position": "absolute",
              "right": -19,
              "top": -19,
              "width": 20,
            }
          }
        >
          <div
            data-radium={true}
            style={
              Object {
                "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 0,
                "left": 5,
                "position": "absolute",
                "right": 0,
                "top": "auto",
              }
            }
          />
          <div
            data-radium={true}
            style={
              Object {
                "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 5,
                "left": 0,
                "position": "absolute",
                "right": "auto",
                "top": 0,
              }
            }
          />
        </div>
        <div
          data-radium={true}
          style={
            Object {
              "bottom": -19,
              "height": 20,
              "left": -19,
              "position": "absolute",
              "right": "auto",
              "top": "auto",
              "width": 20,
            }
          }
        >
          <div
            data-radium={true}
            style={
              Object {
                "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": "auto",
                "left": 0,
                "position": "absolute",
                "right": 5,
                "top": 0,
              }
            }
          />
          <div
            data-radium={true}
            style={
              Object {
                "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 0,
                "left": "auto",
                "position": "absolute",
                "right": 0,
                "top": 5,
              }
            }
          />
        </div>
        <div
          data-radium={true}
          style={
            Object {
              "bottom": -19,
              "height": 20,
              "left": "auto",
              "position": "absolute",
              "right": -19,
              "top": undefined,
              "width": 20,
            }
          }
        >
          <div
            data-radium={true}
            style={
              Object {
                "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": "auto",
                "left": 5,
                "position": "absolute",
                "right": 0,
                "top": 0,
              }
            }
          />
          <div
            data-radium={true}
            style={
              Object {
                "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 0,
                "left": 0,
                "position": "absolute",
                "right": "auto",
                "top": 5,
              }
            }
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Editor Storyshots Button plain (disabled) 1`] = `
<div
  data-radium={true}
  style={
    Object {
      "background": "rgb(255, 255, 255)",
      "bottom": 0,
      "display": "flex",
      "flexDirection": "column",
      "left": 0,
      "position": "absolute",
      "right": 0,
      "top": 0,
    }
  }
>
  <div
    data-radium={true}
    style={
      Object {
        "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
        "marginLeft": 15,
        "marginRight": 15,
        "marginTop": 15,
        "paddingBottom": 15,
        "paddingTop": 2,
      }
    }
  >
    <h2
      data-radium={true}
      style={
        Object {
          "color": "rgba(0, 0, 0, 0.6)",
          "fontSize": 20,
          "fontWeight": 200,
          "margin": 0,
          "padding": 0,
        }
      }
    >
      Button
    </h2>
  </div>
  <div
    data-radium={true}
    style={
      Object {
        "boxSizing": "border-box",
        "flex": 1,
        "margin": 50,
        "position": "relative",
      }
    }
  >
    <div
      data-radium={true}
      style={
        Object {
          "alignItems": "center",
          "bottom": 0,
          "display": "flex",
          "flexDirection": "column",
          "justifyContent": "center",
          "left": 0,
          "position": "absolute",
          "right": 0,
          "top": 0,
        }
      }
    >
      <div
        data-radium={true}
        style={
          Object {
            "border": "solid 1px rgba(0, 0, 0, 0.0)",
            "boxSizing": "border-box",
            "height": "auto",
            "position": "relative",
            "width": "auto",
          }
        }
      >
        <div>
          <div
            style={
              Object {
                "position": "relative",
                "zIndex": 0,
              }
            }
          >
            <button
              className="is-disabled"
              disabled={true}
              onClick={undefined}
              title="Should not dispatch onClick action"
            >
              Plain disabled button. Click event should 
              <strong>
                not
              </strong>
               be fired.
            </button>
          </div>
          <button
            onClick={[Function]}
            style={
              Object {
                "background": "#28c",
                "border": "none",
                "borderRadius": "0 0 0 5px",
                "color": "#fff",
                "cursor": "pointer",
                "display": "block",
                "fontFamily": "sans-serif",
                "fontSize": "12px",
                "padding": "5px 15px",
                "position": "fixed",
                "right": 0,
                "top": 0,
              }
            }
            type="button"
          >
            Show Info
          </button>
          <div
            style={
              Object {
                "background": "white",
                "bottom": 0,
                "display": "none",
                "left": 0,
                "overflow": "auto",
                "padding": "0 40px",
                "position": "fixed",
                "right": 0,
                "top": 0,
                "zIndex": 99999,
              }
            }
          >
            <button
              onClick={[Function]}
              style={
                Object {
                  "background": "#28c",
                  "border": "none",
                  "borderRadius": "0 0 0 5px",
                  "color": "#fff",
                  "cursor": "pointer",
                  "display": "block",
                  "fontFamily": "sans-serif",
                  "fontSize": "12px",
                  "padding": "5px 15px",
                  "position": "fixed",
                  "right": 0,
                  "top": 0,
                }
              }
              type="button"
            >
              ×
            </button>
            <div
              style={undefined}
            >
              <div
                style={
                  Object {
                    "WebkitFontSmoothing": "antialiased",
                    "backgroundColor": "#fff",
                    "border": "1px solid #eee",
                    "borderRadius": "2px",
                    "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
                    "color": "#444",
                    "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
                    "fontSize": "15px",
                    "fontWeight": 300,
                    "lineHeight": 1.45,
                    "marginBottom": "20px",
                    "marginTop": "20px",
                    "padding": "20px 40px 40px",
                  }
                }
              >
                <div
                  style={
                    Object {
                      "borderBottom": "1px solid #eee",
                      "marginBottom": 10,
                      "paddingTop": 10,
                    }
                  }
                >
                  <h1
                    style={
                      Object {
                        "fontSize": "35px",
                        "margin": 0,
                        "padding": 0,
                      }
                    }
                  >
                    Button
                  </h1>
                  <h2
                    style={
                      Object {
                        "fontSize": "22px",
                        "fontWeight": 400,
                        "margin": "0 0 10px 0",
                        "padding": 0,
                      }
                    }
                  >
                    plain (disabled)
                  </h2>
                </div>
                
                <div>
                  <h1
                    style={
                      Object {
                        "borderBottom": "1px solid #EEE",
                        "fontSize": "25px",
                        "margin": "20px 0 0 0",
                        "padding": "0 0 5px 0",
                      }
                    }
                  >
                    Story Source
                  </h1>
                  <pre
                    style={
                      Object {
                        "backgroundColor": "#fafafa",
                        "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
                        "fontSize": ".88em",
                        "lineHeight": 1.5,
                        "overflowX": "scroll",
                        "padding": ".5rem",
                      }
                    }
                  >
                    <div>
                      <div
                        style={
                          Object {
                            "paddingLeft": 18,
                            "paddingRight": 3,
                          }
                        }
                      >
                        <span
                          style={
                            Object {
                              "color": "#777",
                            }
                          }
                        >
                          &lt;
                          Button
                        </span>
                        <span>
                          <span>
                             
                            <span
                              style={Object {}}
                            >
                              title
                            </span>
                            <span>
                              =
                              <span
                                style={Object {}}
                              >
                                <span
                                  style={
                                    Object {
                                      "color": "#22a",
                                      "wordBreak": "break-word",
                                    }
                                  }
                                >
                                  "
                                  Should not dispatch onClick action
                                  "
                                </span>
                              </span>
                            </span>
                          </span>
                          <span>
                             
                            <span
                              style={Object {}}
                            >
                              onClick
                            </span>
                            <span>
                              =
                              <span
                                style={Object {}}
                              >
                                <span>
                                  {
                                  <span
                                    style={
                                      Object {
                                        "color": "#170",
                                      }
                                    }
                                  >
                                    onClick()
                                  </span>
                                  }
                                </span>
                              </span>
                            </span>
                          </span>
                          <span>
                             
                            <span
                              style={Object {}}
                            >
                              disabled
                            </span>
                            
                          </span>
                        </span>
                        <span
                          style={
                            Object {
                              "color": "#777",
                            }
                          }
                        >
                          &gt;
                        </span>
                      </div>
                      <div
                        style={
                          Object {
                            "paddingLeft": 33,
                            "paddingRight": 3,
                          }
                        }
                      >
                        <span
                          style={
                            Object {
                              "color": "#777",
                            }
                          }
                        >
                          Plain disabled button. Click event should 
                        </span>
                      </div>
                      <div>
                        <div
                          style={
                            Object {
                              "paddingLeft": 33,
                              "paddingRight": 3,
                            }
                          }
                        >
                          <span
                            style={
                              Object {
                                "color": "#777",
                              }
                            }
                          >
                            &lt;
                            strong
                          </span>
                          <span />
                          <span
                            style={
                              Object {
                                "color": "#777",
                              }
                            }
                          >
                            &gt;
                          </span>
                        </div>
                        <div
                          style={
                            Object {
                              "paddingLeft": 48,
                              "paddingRight": 3,
                            }
                          }
                        >
                          <span
                            style={
                              Object {
                                "color": "#777",
                              }
                            }
                          >
                            not
                          </span>
                        </div>
                        <div
                          style={
                            Object {
                              "paddingLeft": 33,
                              "paddingRight": 3,
                            }
                          }
                        >
                          <span
                            style={
                              Object {
                                "color": "#777",
                              }
                            }
                          >
                            &lt;/
                            strong
                            &gt;
                          </span>
                        </div>
                      </div>
                      <div
                        style={
                          Object {
                            "paddingLeft": 33,
                            "paddingRight": 3,
                          }
                        }
                      >
                        <span
                          style={
                            Object {
                              "color": "#777",
                            }
                          }
                        >
                           be fired.
                        </span>
                      </div>
                      <div
                        style={
                          Object {
                            "paddingLeft": 18,
                            "paddingRight": 3,
                          }
                        }
                      >
                        <span
                          style={
                            Object {
                              "color": "#777",
                            }
                          }
                        >
                          &lt;/
                          Button
                          &gt;
                        </span>
                      </div>
                    </div>
                  </pre>
                </div>
                <div>
                  <h1
                    style={
                      Object {
                        "borderBottom": "1px solid #EEE",
                        "fontSize": "25px",
                        "margin": "20px 0 0 0",
                        "padding": "0 0 5px 0",
                      }
                    }
                  >
                    Prop Types
                  </h1>
                  <div>
                    <h2
                      style={
                        Object {
                          "margin": "20px 0 0 0",
                        }
                      }
                    >
                      "
                      Button
                      " Component
                    </h2>
                    <table
                      className="css-1ytzlk7"
                    >
                      <thead>
                        <tr>
                          <th
                            className="css-d52hbj"
                          >
                            property
                          </th>
                          <th
                            className="css-d52hbj"
                          >
                            propType
                          </th>
                          <th
                            className="css-d52hbj"
                          >
                            required
                          </th>
                          <th
                            className="css-d52hbj"
                          >
                            default
                          </th>
                          <th
                            className="css-d52hbj"
                          >
                            description
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            title
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            onClick
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            disabled
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            <span>
                              {
                              <span
                                style={
                                  Object {
                                    "color": "#a11",
                                  }
                                }
                              >
                                false
                              </span>
                              }
                            </span>
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            children
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            className
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          data-radium={true}
          style={
            Object {
              "bottom": "auto",
              "height": 20,
              "left": -19,
              "position": "absolute",
              "right": "auto",
              "top": -19,
              "width": 20,
            }
          }
        >
          <div
            data-radium={true}
            style={
              Object {
                "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 0,
                "left": 0,
                "position": "absolute",
                "right": 5,
                "top": undefined,
              }
            }
          />
          <div
            data-radium={true}
            style={
              Object {
                "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 5,
                "left": "auto",
                "position": "absolute",
                "right": 0,
                "top": 0,
              }
            }
          />
        </div>
        <div
          data-radium={true}
          style={
            Object {
              "bottom": "auto",
              "height": 20,
              "left": "auto",
              "position": "absolute",
              "right": -19,
              "top": -19,
              "width": 20,
            }
          }
        >
          <div
            data-radium={true}
            style={
              Object {
                "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 0,
                "left": 5,
                "position": "absolute",
                "right": 0,
                "top": "auto",
              }
            }
          />
          <div
            data-radium={true}
            style={
              Object {
                "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 5,
                "left": 0,
                "position": "absolute",
                "right": "auto",
                "top": 0,
              }
            }
          />
        </div>
        <div
          data-radium={true}
          style={
            Object {
              "bottom": -19,
              "height": 20,
              "left": -19,
              "position": "absolute",
              "right": "auto",
              "top": "auto",
              "width": 20,
            }
          }
        >
          <div
            data-radium={true}
            style={
              Object {
                "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": "auto",
                "left": 0,
                "position": "absolute",
                "right": 5,
                "top": 0,
              }
            }
          />
          <div
            data-radium={true}
            style={
              Object {
                "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 0,
                "left": "auto",
                "position": "absolute",
                "right": 0,
                "top": 5,
              }
            }
          />
        </div>
        <div
          data-radium={true}
          style={
            Object {
              "bottom": -19,
              "height": 20,
              "left": "auto",
              "position": "absolute",
              "right": -19,
              "top": undefined,
              "width": 20,
            }
          }
        >
          <div
            data-radium={true}
            style={
              Object {
                "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": "auto",
                "left": 5,
                "position": "absolute",
                "right": 0,
                "top": 0,
              }
            }
          />
          <div
            data-radium={true}
            style={
              Object {
                "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 0,
                "left": 0,
                "position": "absolute",
                "right": "auto",
                "top": 5,
              }
            }
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Editor Storyshots Button plain 1`] = `
<div
  data-radium={true}
  style={
    Object {
      "background": "rgb(255, 255, 255)",
      "bottom": 0,
      "display": "flex",
      "flexDirection": "column",
      "left": 0,
      "position": "absolute",
      "right": 0,
      "top": 0,
    }
  }
>
  <div
    data-radium={true}
    style={
      Object {
        "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
        "marginLeft": 15,
        "marginRight": 15,
        "marginTop": 15,
        "paddingBottom": 15,
        "paddingTop": 2,
      }
    }
  >
    <h2
      data-radium={true}
      style={
        Object {
          "color": "rgba(0, 0, 0, 0.6)",
          "fontSize": 20,
          "fontWeight": 200,
          "margin": 0,
          "padding": 0,
        }
      }
    >
      Button
    </h2>
  </div>
  <div
    data-radium={true}
    style={
      Object {
        "boxSizing": "border-box",
        "flex": 1,
        "margin": 50,
        "position": "relative",
      }
    }
  >
    <div
      data-radium={true}
      style={
        Object {
          "alignItems": "center",
          "bottom": 0,
          "display": "flex",
          "flexDirection": "column",
          "justifyContent": "center",
          "left": 0,
          "position": "absolute",
          "right": 0,
          "top": 0,
        }
      }
    >
      <div
        data-radium={true}
        style={
          Object {
            "border": "solid 1px rgba(0, 0, 0, 0.0)",
            "boxSizing": "border-box",
            "height": "auto",
            "position": "relative",
            "width": "auto",
          }
        }
      >
        <div>
          <div
            style={
              Object {
                "position": "relative",
                "zIndex": 0,
              }
            }
          >
            <button
              className=""
              disabled={false}
              onClick={[Function]}
              title="Click should trigger onClick action"
            >
              Unstyled button. Pretty plain. Should be used with some styles.
            </button>
          </div>
          <button
            onClick={[Function]}
            style={
              Object {
                "background": "#28c",
                "border": "none",
                "borderRadius": "0 0 0 5px",
                "color": "#fff",
                "cursor": "pointer",
                "display": "block",
                "fontFamily": "sans-serif",
                "fontSize": "12px",
                "padding": "5px 15px",
                "position": "fixed",
                "right": 0,
                "top": 0,
              }
            }
            type="button"
          >
            Show Info
          </button>
          <div
            style={
              Object {
                "background": "white",
                "bottom": 0,
                "display": "none",
                "left": 0,
                "overflow": "auto",
                "padding": "0 40px",
                "position": "fixed",
                "right": 0,
                "top": 0,
                "zIndex": 99999,
              }
            }
          >
            <button
              onClick={[Function]}
              style={
                Object {
                  "background": "#28c",
                  "border": "none",
                  "borderRadius": "0 0 0 5px",
                  "color": "#fff",
                  "cursor": "pointer",
                  "display": "block",
                  "fontFamily": "sans-serif",
                  "fontSize": "12px",
                  "padding": "5px 15px",
                  "position": "fixed",
                  "right": 0,
                  "top": 0,
                }
              }
              type="button"
            >
              ×
            </button>
            <div
              style={undefined}
            >
              <div
                style={
                  Object {
                    "WebkitFontSmoothing": "antialiased",
                    "backgroundColor": "#fff",
                    "border": "1px solid #eee",
                    "borderRadius": "2px",
                    "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
                    "color": "#444",
                    "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
                    "fontSize": "15px",
                    "fontWeight": 300,
                    "lineHeight": 1.45,
                    "marginBottom": "20px",
                    "marginTop": "20px",
                    "padding": "20px 40px 40px",
                  }
                }
              >
                <div
                  style={
                    Object {
                      "borderBottom": "1px solid #eee",
                      "marginBottom": 10,
                      "paddingTop": 10,
                    }
                  }
                >
                  <h1
                    style={
                      Object {
                        "fontSize": "35px",
                        "margin": 0,
                        "padding": 0,
                      }
                    }
                  >
                    Button
                  </h1>
                  <h2
                    style={
                      Object {
                        "fontSize": "22px",
                        "fontWeight": 400,
                        "margin": "0 0 10px 0",
                        "padding": 0,
                      }
                    }
                  >
                    plain
                  </h2>
                </div>
                
                <div>
                  <h1
                    style={
                      Object {
                        "borderBottom": "1px solid #EEE",
                        "fontSize": "25px",
                        "margin": "20px 0 0 0",
                        "padding": "0 0 5px 0",
                      }
                    }
                  >
                    Story Source
                  </h1>
                  <pre
                    style={
                      Object {
                        "backgroundColor": "#fafafa",
                        "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
                        "fontSize": ".88em",
                        "lineHeight": 1.5,
                        "overflowX": "scroll",
                        "padding": ".5rem",
                      }
                    }
                  >
                    <div>
                      <div
                        style={
                          Object {
                            "paddingLeft": 18,
                            "paddingRight": 3,
                          }
                        }
                      >
                        <span
                          style={
                            Object {
                              "color": "#777",
                            }
                          }
                        >
                          &lt;
                          Button
                        </span>
                        <span>
                          <span>
                             
                            <span
                              style={Object {}}
                            >
                              title
                            </span>
                            <span>
                              =
                              <span
                                style={Object {}}
                              >
                                <span
                                  style={
                                    Object {
                                      "color": "#22a",
                                      "wordBreak": "break-word",
                                    }
                                  }
                                >
                                  "
                                  Click should trigger onClick action
                                  "
                                </span>
                              </span>
                            </span>
                          </span>
                          <span>
                             
                            <span
                              style={Object {}}
                            >
                              onClick
                            </span>
                            <span>
                              =
                              <span
                                style={Object {}}
                              >
                                <span>
                                  {
                                  <span
                                    style={
                                      Object {
                                        "color": "#170",
                                      }
                                    }
                                  >
                                    onClick()
                                  </span>
                                  }
                                </span>
                              </span>
                            </span>
                            
                          </span>
                        </span>
                        <span
                          style={
                            Object {
                              "color": "#777",
                            }
                          }
                        >
                          &gt;
                        </span>
                      </div>
                      <div
                        style={
                          Object {
                            "paddingLeft": 33,
                            "paddingRight": 3,
                          }
                        }
                      >
                        <span
                          style={
                            Object {
                              "color": "#777",
                            }
                          }
                        >
                          Unstyled button. Pretty plain. Should be used with some styles.
                        </span>
                      </div>
                      <div
                        style={
                          Object {
                            "paddingLeft": 18,
                            "paddingRight": 3,
                          }
                        }
                      >
                        <span
                          style={
                            Object {
                              "color": "#777",
                            }
                          }
                        >
                          &lt;/
                          Button
                          &gt;
                        </span>
                      </div>
                    </div>
                  </pre>
                </div>
                <div>
                  <h1
                    style={
                      Object {
                        "borderBottom": "1px solid #EEE",
                        "fontSize": "25px",
                        "margin": "20px 0 0 0",
                        "padding": "0 0 5px 0",
                      }
                    }
                  >
                    Prop Types
                  </h1>
                  <div>
                    <h2
                      style={
                        Object {
                          "margin": "20px 0 0 0",
                        }
                      }
                    >
                      "
                      Button
                      " Component
                    </h2>
                    <table
                      className="css-1ytzlk7"
                    >
                      <thead>
                        <tr>
                          <th
                            className="css-d52hbj"
                          >
                            property
                          </th>
                          <th
                            className="css-d52hbj"
                          >
                            propType
                          </th>
                          <th
                            className="css-d52hbj"
                          >
                            required
                          </th>
                          <th
                            className="css-d52hbj"
                          >
                            default
                          </th>
                          <th
                            className="css-d52hbj"
                          >
                            description
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            title
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            onClick
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            disabled
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            <span>
                              {
                              <span
                                style={
                                  Object {
                                    "color": "#a11",
                                  }
                                }
                              >
                                false
                              </span>
                              }
                            </span>
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            children
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            className
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          data-radium={true}
          style={
            Object {
              "bottom": "auto",
              "height": 20,
              "left": -19,
              "position": "absolute",
              "right": "auto",
              "top": -19,
              "width": 20,
            }
          }
        >
          <div
            data-radium={true}
            style={
              Object {
                "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 0,
                "left": 0,
                "position": "absolute",
                "right": 5,
                "top": undefined,
              }
            }
          />
          <div
            data-radium={true}
            style={
              Object {
                "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 5,
                "left": "auto",
                "position": "absolute",
                "right": 0,
                "top": 0,
              }
            }
          />
        </div>
        <div
          data-radium={true}
          style={
            Object {
              "bottom": "auto",
              "height": 20,
              "left": "auto",
              "position": "absolute",
              "right": -19,
              "top": -19,
              "width": 20,
            }
          }
        >
          <div
            data-radium={true}
            style={
              Object {
                "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 0,
                "left": 5,
                "position": "absolute",
                "right": 0,
                "top": "auto",
              }
            }
          />
          <div
            data-radium={true}
            style={
              Object {
                "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 5,
                "left": 0,
                "position": "absolute",
                "right": "auto",
                "top": 0,
              }
            }
          />
        </div>
        <div
          data-radium={true}
          style={
            Object {
              "bottom": -19,
              "height": 20,
              "left": -19,
              "position": "absolute",
              "right": "auto",
              "top": "auto",
              "width": 20,
            }
          }
        >
          <div
            data-radium={true}
            style={
              Object {
                "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": "auto",
                "left": 0,
                "position": "absolute",
                "right": 5,
                "top": 0,
              }
            }
          />
          <div
            data-radium={true}
            style={
              Object {
                "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 0,
                "left": "auto",
                "position": "absolute",
                "right": 0,
                "top": 5,
              }
            }
          />
        </div>
        <div
          data-radium={true}
          style={
            Object {
              "bottom": -19,
              "height": 20,
              "left": "auto",
              "position": "absolute",
              "right": -19,
              "top": undefined,
              "width": 20,
            }
          }
        >
          <div
            data-radium={true}
            style={
              Object {
                "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": "auto",
                "left": 5,
                "position": "absolute",
                "right": 0,
                "top": 0,
              }
            }
          />
          <div
            data-radium={true}
            style={
              Object {
                "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 0,
                "left": 0,
                "position": "absolute",
                "right": "auto",
                "top": 5,
              }
            }
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Editor Storyshots Button rounded and styled 1`] = `
<div
  data-radium={true}
  style={
    Object {
      "background": "rgb(255, 255, 255)",
      "bottom": 0,
      "display": "flex",
      "flexDirection": "column",
      "left": 0,
      "position": "absolute",
      "right": 0,
      "top": 0,
    }
  }
>
  <div
    data-radium={true}
    style={
      Object {
        "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
        "marginLeft": 15,
        "marginRight": 15,
        "marginTop": 15,
        "paddingBottom": 15,
        "paddingTop": 2,
      }
    }
  >
    <h2
      data-radium={true}
      style={
        Object {
          "color": "rgba(0, 0, 0, 0.6)",
          "fontSize": 20,
          "fontWeight": 200,
          "margin": 0,
          "padding": 0,
        }
      }
    >
      Button
    </h2>
  </div>
  <div
    data-radium={true}
    style={
      Object {
        "boxSizing": "border-box",
        "flex": 1,
        "margin": 50,
        "position": "relative",
      }
    }
  >
    <div
      data-radium={true}
      style={
        Object {
          "alignItems": "center",
          "bottom": 0,
          "display": "flex",
          "flexDirection": "column",
          "justifyContent": "center",
          "left": 0,
          "position": "absolute",
          "right": 0,
          "top": 0,
        }
      }
    >
      <div
        data-radium={true}
        style={
          Object {
            "border": "solid 1px rgba(0, 0, 0, 0.0)",
            "boxSizing": "border-box",
            "height": "auto",
            "position": "relative",
            "width": "auto",
          }
        }
      >
        <div>
          <div
            style={
              Object {
                "position": "relative",
                "zIndex": 0,
              }
            }
          >
            <button
              className="EditorButton Button--small u-rounded Button--primary"
              disabled={false}
              onClick={[Function]}
              title="Styles from suggestion panel button"
            >
              Button Button--small u-rounded Button--primary
            </button>
          </div>
          <button
            onClick={[Function]}
            style={
              Object {
                "background": "#28c",
                "border": "none",
                "borderRadius": "0 0 0 5px",
                "color": "#fff",
                "cursor": "pointer",
                "display": "block",
                "fontFamily": "sans-serif",
                "fontSize": "12px",
                "padding": "5px 15px",
                "position": "fixed",
                "right": 0,
                "top": 0,
              }
            }
            type="button"
          >
            Show Info
          </button>
          <div
            style={
              Object {
                "background": "white",
                "bottom": 0,
                "display": "none",
                "left": 0,
                "overflow": "auto",
                "padding": "0 40px",
                "position": "fixed",
                "right": 0,
                "top": 0,
                "zIndex": 99999,
              }
            }
          >
            <button
              onClick={[Function]}
              style={
                Object {
                  "background": "#28c",
                  "border": "none",
                  "borderRadius": "0 0 0 5px",
                  "color": "#fff",
                  "cursor": "pointer",
                  "display": "block",
                  "fontFamily": "sans-serif",
                  "fontSize": "12px",
                  "padding": "5px 15px",
                  "position": "fixed",
                  "right": 0,
                  "top": 0,
                }
              }
              type="button"
            >
              ×
            </button>
            <div
              style={undefined}
            >
              <div
                style={
                  Object {
                    "WebkitFontSmoothing": "antialiased",
                    "backgroundColor": "#fff",
                    "border": "1px solid #eee",
                    "borderRadius": "2px",
                    "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
                    "color": "#444",
                    "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
                    "fontSize": "15px",
                    "fontWeight": 300,
                    "lineHeight": 1.45,
                    "marginBottom": "20px",
                    "marginTop": "20px",
                    "padding": "20px 40px 40px",
                  }
                }
              >
                <div
                  style={
                    Object {
                      "borderBottom": "1px solid #eee",
                      "marginBottom": 10,
                      "paddingTop": 10,
                    }
                  }
                >
                  <h1
                    style={
                      Object {
                        "fontSize": "35px",
                        "margin": 0,
                        "padding": 0,
                      }
                    }
                  >
                    Button
                  </h1>
                  <h2
                    style={
                      Object {
                        "fontSize": "22px",
                        "fontWeight": 400,
                        "margin": "0 0 10px 0",
                        "padding": 0,
                      }
                    }
                  >
                    rounded and styled
                  </h2>
                </div>
                
                <div>
                  <h1
                    style={
                      Object {
                        "borderBottom": "1px solid #EEE",
                        "fontSize": "25px",
                        "margin": "20px 0 0 0",
                        "padding": "0 0 5px 0",
                      }
                    }
                  >
                    Story Source
                  </h1>
                  <pre
                    style={
                      Object {
                        "backgroundColor": "#fafafa",
                        "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
                        "fontSize": ".88em",
                        "lineHeight": 1.5,
                        "overflowX": "scroll",
                        "padding": ".5rem",
                      }
                    }
                  >
                    <div>
                      <div
                        style={
                          Object {
                            "paddingLeft": 18,
                            "paddingRight": 3,
                          }
                        }
                      >
                        <span
                          style={
                            Object {
                              "color": "#777",
                            }
                          }
                        >
                          &lt;
                          Button
                        </span>
                        <span>
                          <span>
                             
                            <span
                              style={Object {}}
                            >
                              title
                            </span>
                            <span>
                              =
                              <span
                                style={Object {}}
                              >
                                <span
                                  style={
                                    Object {
                                      "color": "#22a",
                                      "wordBreak": "break-word",
                                    }
                                  }
                                >
                                  "
                                  Styles from suggestion panel button
                                  "
                                </span>
                              </span>
                            </span>
                          </span>
                          <span>
                             
                            <span
                              style={Object {}}
                            >
                              onClick
                            </span>
                            <span>
                              =
                              <span
                                style={Object {}}
                              >
                                <span>
                                  {
                                  <span
                                    style={
                                      Object {
                                        "color": "#170",
                                      }
                                    }
                                  >
                                    onClick()
                                  </span>
                                  }
                                </span>
                              </span>
                            </span>
                          </span>
                          <span>
                             
                            <span
                              style={Object {}}
                            >
                              className
                            </span>
                            <span>
                              =
                              <span
                                style={Object {}}
                              >
                                <span
                                  style={
                                    Object {
                                      "color": "#22a",
                                      "wordBreak": "break-word",
                                    }
                                  }
                                >
                                  "
                                  EditorButton Button--small u-rounded Button--prima…
                                  "
                                </span>
                              </span>
                            </span>
                            
                          </span>
                        </span>
                        <span
                          style={
                            Object {
                              "color": "#777",
                            }
                          }
                        >
                          &gt;
                        </span>
                      </div>
                      <div
                        style={
                          Object {
                            "paddingLeft": 33,
                            "paddingRight": 3,
                          }
                        }
                      >
                        <span
                          style={
                            Object {
                              "color": "#777",
                            }
                          }
                        >
                          Button Button--small u-rounded Button--primary
                        </span>
                      </div>
                      <div
                        style={
                          Object {
                            "paddingLeft": 18,
                            "paddingRight": 3,
                          }
                        }
                      >
                        <span
                          style={
                            Object {
                              "color": "#777",
                            }
                          }
                        >
                          &lt;/
                          Button
                          &gt;
                        </span>
                      </div>
                    </div>
                  </pre>
                </div>
                <div>
                  <h1
                    style={
                      Object {
                        "borderBottom": "1px solid #EEE",
                        "fontSize": "25px",
                        "margin": "20px 0 0 0",
                        "padding": "0 0 5px 0",
                      }
                    }
                  >
                    Prop Types
                  </h1>
                  <div>
                    <h2
                      style={
                        Object {
                          "margin": "20px 0 0 0",
                        }
                      }
                    >
                      "
                      Button
                      " Component
                    </h2>
                    <table
                      className="css-1ytzlk7"
                    >
                      <thead>
                        <tr>
                          <th
                            className="css-d52hbj"
                          >
                            property
                          </th>
                          <th
                            className="css-d52hbj"
                          >
                            propType
                          </th>
                          <th
                            className="css-d52hbj"
                          >
                            required
                          </th>
                          <th
                            className="css-d52hbj"
                          >
                            default
                          </th>
                          <th
                            className="css-d52hbj"
                          >
                            description
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            title
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            onClick
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            disabled
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            <span>
                              {
                              <span
                                style={
                                  Object {
                                    "color": "#a11",
                                  }
                                }
                              >
                                false
                              </span>
                              }
                            </span>
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            children
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                        <tr>
                          <td
                            className="css-1ygfcef"
                          >
                            className
                          </td>
                          <td
                            className="css-1ygfcef"
                          >
                            <span />
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          >
                            -
                          </td>
                          <td
                            className="css-d52hbj"
                          />
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          data-radium={true}
          style={
            Object {
              "bottom": "auto",
              "height": 20,
              "left": -19,
              "position": "absolute",
              "right": "auto",
              "top": -19,
              "width": 20,
            }
          }
        >
          <div
            data-radium={true}
            style={
              Object {
                "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 0,
                "left": 0,
                "position": "absolute",
                "right": 5,
                "top": undefined,
              }
            }
          />
          <div
            data-radium={true}
            style={
              Object {
                "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 5,
                "left": "auto",
                "position": "absolute",
                "right": 0,
                "top": 0,
              }
            }
          />
        </div>
        <div
          data-radium={true}
          style={
            Object {
              "bottom": "auto",
              "height": 20,
              "left": "auto",
              "position": "absolute",
              "right": -19,
              "top": -19,
              "width": 20,
            }
          }
        >
          <div
            data-radium={true}
            style={
              Object {
                "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 0,
                "left": 5,
                "position": "absolute",
                "right": 0,
                "top": "auto",
              }
            }
          />
          <div
            data-radium={true}
            style={
              Object {
                "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 5,
                "left": 0,
                "position": "absolute",
                "right": "auto",
                "top": 0,
              }
            }
          />
        </div>
        <div
          data-radium={true}
          style={
            Object {
              "bottom": -19,
              "height": 20,
              "left": -19,
              "position": "absolute",
              "right": "auto",
              "top": "auto",
              "width": 20,
            }
          }
        >
          <div
            data-radium={true}
            style={
              Object {
                "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": "auto",
                "left": 0,
                "position": "absolute",
                "right": 5,
                "top": 0,
              }
            }
          />
          <div
            data-radium={true}
            style={
              Object {
                "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 0,
                "left": "auto",
                "position": "absolute",
                "right": 0,
                "top": 5,
              }
            }
          />
        </div>
        <div
          data-radium={true}
          style={
            Object {
              "bottom": -19,
              "height": 20,
              "left": "auto",
              "position": "absolute",
              "right": -19,
              "top": undefined,
              "width": 20,
            }
          }
        >
          <div
            data-radium={true}
            style={
              Object {
                "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": "auto",
                "left": 5,
                "position": "absolute",
                "right": 0,
                "top": 0,
              }
            }
          />
          <div
            data-radium={true}
            style={
              Object {
                "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
                "bottom": 0,
                "left": 0,
                "position": "absolute",
                "right": "auto",
                "top": 5,
              }
            }
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Editor Storyshots CommentBox default 1`] = `
<div
  className="TransUnit-commentBox"
>
  <div
    className="form-group"
  >
    <label
      className="control-label"
      htmlFor="formControlsTextarea"
    >
      <span
        className=""
      >
        <svg
          className="s0"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-comment\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       Post a comment
    </label>
    <br />
    <textarea
      className="form-control"
      id="formControlsTextarea"
      maxLength={undefined}
      onChange={[Function]}
      placeholder="..."
      type={undefined}
      value=""
    />
  </div>
  <button
    className="EditorButton Button--small u-rounded Button--primary u-pullRight btn btn-default"
    disabled={true}
    onClick={[Function]}
    type="button"
  >
    Post comment
  </button>
</div>
`;

exports[`Editor Storyshots Concurrent editing modal 1`] = `undefined`;

exports[`Editor Storyshots Concurrent editing notification 1`] = `
<div
  className="alert alert-danger"
  role="alert"
>
  <span
    className=""
  >
    <svg
      className="s2"
      dangerouslySetInnerHTML={
        Object {
          "__html": "<use xlink:href=\\"#Icon-warning\\" />",
        }
      }
      style={
        Object {
          "fill": "currentColor",
        }
      }
    />
  </span>
  <strong>
    Concurrent editing detected.
  </strong>
   
  <span
    className="alert-link"
  >
    <a
      href=""
    >
      Resolve merge conflicts
    </a>
     before continuing.
  </span>
</div>
`;

exports[`Editor Storyshots Concurrent editing transunit items 1`] = `
<span>
  <h1>
    TransUnit items
  </h1>
  <img
    className="img-responsive"
    src="https://i.imgur.com/yQWlJaH.png"
  />
  <h2>
    Concurrent user notice
  </h2>
  <button
    className="EditorButton Button--link Button--small Button--concurrent btn btn-default"
    disabled={false}
    onClick={[Function]}
    title="Click should trigger onClick action"
    type="button"
  >
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-user\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     username
  </button>
  <h2>
    Resolve merge conflict button
  </h2>
  <button
    className="EditorButton Button--secondary u-rounded btn btn-default"
    disabled={false}
    onClick={[Function]}
    title="Click should trigger onClick action"
    type="button"
  >
    Resolve conflict
  </button>
</span>
`;

exports[`Editor Storyshots DateAndTimeDisplay default 1`] = `
<span
  className={undefined}
>
  <span
    className=""
  >
    <svg
      className="n1"
      dangerouslySetInnerHTML={
        Object {
          "__html": "<use xlink:href=\\"#Icon-clock\\" />",
        }
      }
      style={
        Object {
          "fill": "currentColor",
        }
      }
    />
  </span>
   
  <span>
    Dec 16, 2016
  </span>
   
  <span>
    2:18 AM
  </span>
</span>
`;

exports[`Editor Storyshots DateAndTimeDisplay styling examples 1`] = `
<ul>
  <li>
    <span
      className={undefined}
    >
      <span
        className=""
      >
        <svg
          className="n1"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-clock\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      <span>
        Oct 26, 1985
      </span>
       
      <span>
        1:21 AM
      </span>
    </span>
  </li>
  <li>
    <span
      className="u-textMicro"
    >
      <span
        className=""
      >
        <svg
          className="n1"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-clock\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      <span>
        Oct 26, 1985
      </span>
       
      <span>
        1:22 AM
      </span>
    </span>
  </li>
  <li>
    <span
      className="u-textMuted u-textMini"
    >
      <span
        className=""
      >
        <svg
          className="n1"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-clock\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      <span>
        Oct 26, 1985
      </span>
       
      <span>
        1:20 AM
      </span>
    </span>
  </li>
  <li
    className="u-sP-1-4"
  >
    <span
      className="u-bgHigher u-sP-1-4"
    >
      <span
        className=""
      >
        <svg
          className="n1"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-clock\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      <span>
        Oct 21, 2015
      </span>
       
      <span>
        12:00 AM
      </span>
    </span>
  </li>
  <li
    className="u-sP-1-2"
  >
    <span
      className="u-bgHigher u-sP-1-2 u-textMuted"
    >
      <span
        className=""
      >
        <svg
          className="n1"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-clock\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      <span>
        Nov 12, 1955
      </span>
       
      <span>
        12:00 AM
      </span>
    </span>
  </li>
</ul>
`;

exports[`Editor Storyshots GlossarySearchInput empty 1`] = `
<div
  className="InlineSearch"
>
  <div
    className="EditorInputGroup EditorInputGroup--outlined EditorInputGroup--rounded is-focused"
  >
    <span
      className="EditorInputGroup-addon"
      onClick={[Function]}
    >
      <span
        className=""
        title="Search glossary"
      >
        <svg
          className="n1"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-search\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
    </span>
    <input
      className="undefined EditorInputGroup-input u-sizeLineHeight-1_1-4"
      maxLength="100"
      onChange={[Function]}
      placeholder="Search glossary…"
      type="search"
      value=""
    />
  </div>
</div>
`;

exports[`Editor Storyshots GlossarySearchInput with text 1`] = `
<div
  className="InlineSearch"
>
  <div
    className="EditorInputGroup EditorInputGroup--outlined EditorInputGroup--rounded is-focused"
  >
    <span
      className="EditorInputGroup-addon"
      onClick={[Function]}
    >
      <span
        className=""
        title="Search glossary"
      >
        <svg
          className="n1"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-search\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
    </span>
    <input
      className="undefined EditorInputGroup-input u-sizeLineHeight-1_1-4"
      maxLength="100"
      onChange={[Function]}
      placeholder="Search glossary…"
      type="search"
      value="some text"
    />
  </div>
</div>
`;

exports[`Editor Storyshots GlossaryTerm Without translations 1`] = `
<table
  className="table"
>
  <thead>
    <tr>
      <th>
        Source
      </th>
      <th>
        Translation
      </th>
      <th />
      <th
        className="align-right hide-md"
      >
        Details
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td
        className="GlossaryText StringLong"
        data-filetype="text"
      >
        <button
          className="btn btn-link"
          disabled={false}
          onBlur={[Function]}
          onClick={null}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          type="button"
        >
          <span>
            <span
              className="hide-mdplus u-textMeta"
            >
              Source
            </span>
            <span
              className={undefined}
            >
              Ambulance
            </span>
          </span>
        </button>
      </td>
      <td
        className="GlossaryText StringLong"
        data-filetype="text"
      >
        <button
          className="btn btn-link"
          disabled={false}
          onBlur={[Function]}
          onClick={null}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          type="button"
        >
          <span
            className="u-textMuted"
          >
            <span
              className="hide-mdplus u-textMeta"
            >
              Translation
            </span>
            <span
              className={undefined}
            >
              -none-
            </span>
          </span>
        </button>
      </td>
      <td
        title="No translation to copy."
      >
        <button
          className="EditorButton Button--small u-rounded Button--primary btn btn-default"
          disabled={true}
          onClick={[Function]}
          type="button"
        >
          Copy
        </button>
      </td>
      <td
        className="info-icon"
      >
        <button
          className="Button--link s1"
          disabled={false}
          onClick={[Function]}
          title="Details"
        >
          <span
            className=""
            title="Details"
          >
            <svg
              className="s1"
              dangerouslySetInnerHTML={
                Object {
                  "__html": "<use xlink:href=\\"#Icon-info\\" />",
                }
              }
              style={
                Object {
                  "fill": "currentColor",
                }
              }
            />
          </span>
        </button>
      </td>
    </tr>
    <tr>
      <td
        className="GlossaryText StringLong"
        data-filetype="text"
      >
        <button
          className="btn btn-link"
          disabled={false}
          onBlur={[Function]}
          onClick={null}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          type="button"
        >
          <span>
            <span
              className="hide-mdplus u-textMeta"
            >
              Source
            </span>
            <span
              className={undefined}
            >
              Hospital
            </span>
          </span>
        </button>
      </td>
      <td
        className="GlossaryText StringLong"
        data-filetype="text"
      >
        <button
          className="btn btn-link"
          disabled={false}
          onBlur={[Function]}
          onClick={null}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          type="button"
        >
          <span
            className="u-textMuted"
          >
            <span
              className="hide-mdplus u-textMeta"
            >
              Translation
            </span>
            <span
              className={undefined}
            >
              -none-
            </span>
          </span>
        </button>
      </td>
      <td
        title="No translation to copy."
      >
        <button
          className="EditorButton Button--small u-rounded Button--primary btn btn-default"
          disabled={true}
          onClick={[Function]}
          type="button"
        >
          Copy
        </button>
      </td>
      <td
        className="info-icon"
      >
        <button
          className="Button--link s1"
          disabled={false}
          onClick={[Function]}
          title="Details"
        >
          <span
            className=""
            title="Details"
          >
            <svg
              className="s1"
              dangerouslySetInnerHTML={
                Object {
                  "__html": "<use xlink:href=\\"#Icon-info\\" />",
                }
              }
              style={
                Object {
                  "fill": "currentColor",
                }
              }
            />
          </span>
        </button>
      </td>
    </tr>
    <tr>
      <td
        className="GlossaryText StringLong"
        data-filetype="text"
      >
        <button
          className="btn btn-link"
          disabled={false}
          onBlur={[Function]}
          onClick={null}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          type="button"
        >
          <span>
            <span
              className="hide-mdplus u-textMeta"
            >
              Source
            </span>
            <span
              className={undefined}
            >
              Doctor
            </span>
          </span>
        </button>
      </td>
      <td
        className="GlossaryText StringLong"
        data-filetype="text"
      >
        <button
          className="btn btn-link"
          disabled={false}
          onBlur={[Function]}
          onClick={null}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          type="button"
        >
          <span
            className="u-textMuted"
          >
            <span
              className="hide-mdplus u-textMeta"
            >
              Translation
            </span>
            <span
              className={undefined}
            >
              -none-
            </span>
          </span>
        </button>
      </td>
      <td
        title="No translation to copy."
      >
        <button
          className="EditorButton Button--small u-rounded Button--primary btn btn-default"
          disabled={true}
          onClick={[Function]}
          type="button"
        >
          Copy
        </button>
      </td>
      <td
        className="info-icon"
      >
        <button
          className="Button--link s1"
          disabled={false}
          onClick={[Function]}
          title="Details"
        >
          <span
            className=""
            title="Details"
          >
            <svg
              className="s1"
              dangerouslySetInnerHTML={
                Object {
                  "__html": "<use xlink:href=\\"#Icon-info\\" />",
                }
              }
              style={
                Object {
                  "fill": "currentColor",
                }
              }
            />
          </span>
        </button>
      </td>
    </tr>
  </tbody>
</table>
`;

exports[`Editor Storyshots GlossaryTerm in a table 1`] = `
<table
  className="table"
>
  <thead>
    <tr>
      <th>
        Source
      </th>
      <th>
        Translation
      </th>
      <th />
      <th
        className="align-right hide-md"
      >
        Details
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td
        className="GlossaryText StringLong"
        data-filetype="text"
      >
        <button
          className="btn btn-link"
          disabled={false}
          onBlur={[Function]}
          onClick={null}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          type="button"
        >
          <span>
            <span
              className="hide-mdplus u-textMeta"
            >
              Source
            </span>
            <span
              className={undefined}
            >
              Ambulance
            </span>
          </span>
        </button>
      </td>
      <td
        className="GlossaryText StringLong"
        data-filetype="text"
      >
        <button
          className="btn btn-link"
          disabled={false}
          onBlur={[Function]}
          onClick={null}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          type="button"
        >
          <span
            className=""
          >
            <span
              className="hide-mdplus u-textMeta"
            >
              Translation
            </span>
            <span
              className={undefined}
            >
              Krankenwagen
            </span>
          </span>
        </button>
      </td>
      <td
        title="Insert translated term at the cursor position."
      >
        <button
          className="EditorButton Button--small u-rounded Button--primary btn btn-default"
          disabled={false}
          onClick={[Function]}
          type="button"
        >
          Copy
        </button>
      </td>
      <td
        className="info-icon"
      >
        <button
          className="Button--link s1"
          disabled={false}
          onClick={[Function]}
          title="Details"
        >
          <span
            className=""
            title="Details"
          >
            <svg
              className="s1"
              dangerouslySetInnerHTML={
                Object {
                  "__html": "<use xlink:href=\\"#Icon-info\\" />",
                }
              }
              style={
                Object {
                  "fill": "currentColor",
                }
              }
            />
          </span>
        </button>
      </td>
    </tr>
    <tr>
      <td
        className="GlossaryText StringLong"
        data-filetype="text"
      >
        <button
          className="btn btn-link"
          disabled={false}
          onBlur={[Function]}
          onClick={null}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          type="button"
        >
          <span>
            <span
              className="hide-mdplus u-textMeta"
            >
              Source
            </span>
            <span
              className={undefined}
            >
              Hospital
            </span>
          </span>
        </button>
      </td>
      <td
        className="GlossaryText StringLong"
        data-filetype="text"
      >
        <button
          className="btn btn-link"
          disabled={false}
          onBlur={[Function]}
          onClick={null}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          type="button"
        >
          <span
            className=""
          >
            <span
              className="hide-mdplus u-textMeta"
            >
              Translation
            </span>
            <span
              className={undefined}
            >
              Krankenhaus
            </span>
          </span>
        </button>
      </td>
      <td
        title="Insert translated term at the cursor position."
      >
        <button
          className="EditorButton Button--small u-rounded Button--primary btn btn-default"
          disabled={false}
          onClick={[Function]}
          type="button"
        >
          Copy
        </button>
      </td>
      <td
        className="info-icon"
      >
        <button
          className="Button--link s1"
          disabled={false}
          onClick={[Function]}
          title="Details"
        >
          <span
            className=""
            title="Details"
          >
            <svg
              className="s1"
              dangerouslySetInnerHTML={
                Object {
                  "__html": "<use xlink:href=\\"#Icon-info\\" />",
                }
              }
              style={
                Object {
                  "fill": "currentColor",
                }
              }
            />
          </span>
        </button>
      </td>
    </tr>
    <tr>
      <td
        className="GlossaryText StringLong"
        data-filetype="text"
      >
        <button
          className="btn btn-link"
          disabled={false}
          onBlur={[Function]}
          onClick={null}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          type="button"
        >
          <span>
            <span
              className="hide-mdplus u-textMeta"
            >
              Source
            </span>
            <span
              className={undefined}
            >
              Doctor
            </span>
          </span>
        </button>
      </td>
      <td
        className="GlossaryText StringLong"
        data-filetype="text"
      >
        <button
          className="btn btn-link"
          disabled={false}
          onBlur={[Function]}
          onClick={null}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          type="button"
        >
          <span
            className=""
          >
            <span
              className="hide-mdplus u-textMeta"
            >
              Translation
            </span>
            <span
              className={undefined}
            >
              Arzt
            </span>
          </span>
        </button>
      </td>
      <td
        title="Insert translated term at the cursor position."
      >
        <button
          className="EditorButton Button--small u-rounded Button--primary btn btn-default"
          disabled={false}
          onClick={[Function]}
          type="button"
        >
          Copy
        </button>
      </td>
      <td
        className="info-icon"
      >
        <button
          className="Button--link s1"
          disabled={false}
          onClick={[Function]}
          title="Details"
        >
          <span
            className=""
            title="Details"
          >
            <svg
              className="s1"
              dangerouslySetInnerHTML={
                Object {
                  "__html": "<use xlink:href=\\"#Icon-info\\" />",
                }
              }
              style={
                Object {
                  "fill": "currentColor",
                }
              }
            />
          </span>
        </button>
      </td>
    </tr>
  </tbody>
</table>
`;

exports[`Editor Storyshots GlossaryTerm simple term on its own 1`] = `
<table
  className="table"
>
  <tbody>
    <tr>
      <td
        className="GlossaryText StringLong"
        data-filetype="text"
      >
        <button
          className="btn btn-link"
          disabled={false}
          onBlur={[Function]}
          onClick={null}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          type="button"
        >
          <span>
            <span
              className="hide-mdplus u-textMeta"
            >
              Source
            </span>
            <span
              className={undefined}
            >
              Ambulance
            </span>
          </span>
        </button>
      </td>
      <td
        className="GlossaryText StringLong"
        data-filetype="text"
      >
        <button
          className="btn btn-link"
          disabled={false}
          onBlur={[Function]}
          onClick={null}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          type="button"
        >
          <span
            className=""
          >
            <span
              className="hide-mdplus u-textMeta"
            >
              Translation
            </span>
            <span
              className={undefined}
            >
              Krankenwagen
            </span>
          </span>
        </button>
      </td>
      <td
        title="Insert translated term at the cursor position."
      >
        <button
          className="EditorButton Button--small u-rounded Button--primary btn btn-default"
          disabled={false}
          onClick={[Function]}
          type="button"
        >
          Copy
        </button>
      </td>
      <td
        className="info-icon"
      >
        <button
          className="Button--link s1"
          disabled={false}
          onClick={[Function]}
          title="Details"
        >
          <span
            className=""
            title="Details"
          >
            <svg
              className="s1"
              dangerouslySetInnerHTML={
                Object {
                  "__html": "<use xlink:href=\\"#Icon-info\\" />",
                }
              }
              style={
                Object {
                  "fill": "currentColor",
                }
              }
            />
          </span>
        </button>
      </td>
    </tr>
  </tbody>
</table>
`;

exports[`Editor Storyshots GlossaryTermModal details still loading 1`] = `
<div>
  <h1>
    Lorem Ipsum
  </h1>
  <div
    dangerouslySetInnerHTML={
      Object {
        "__html": "<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</p>",
      }
    }
  />
  <ul
    dangerouslySetInnerHTML={
      Object {
        "__html": "<li>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</li>
<li>Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.</li>
<li>Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.</li>
<li>Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.</li>
<li>Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.</li>",
      }
    }
  />
  <h2>
    Dolor Sit Amet
  </h2>
  <div
    dangerouslySetInnerHTML={
      Object {
        "__html": "<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</p>
<p>Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.</p>
<p>Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.</p>
<p>Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.</p>
<p>Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.</p>",
      }
    }
  />
  <ul
    dangerouslySetInnerHTML={
      Object {
        "__html": "<li>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</li>
<li>Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.</li>
<li>Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.</li>
<li>Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.</li>
<li>Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.</li>",
      }
    }
  />
  <div
    className="static-modal"
  />
</div>
`;

exports[`Editor Storyshots GlossaryTermModal with 1 detail item 1`] = `
<div>
  <h1>
    Lorem Ipsum
  </h1>
  <div
    dangerouslySetInnerHTML={
      Object {
        "__html": "<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</p>",
      }
    }
  />
  <ul
    dangerouslySetInnerHTML={
      Object {
        "__html": "<li>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</li>
<li>Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.</li>
<li>Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.</li>
<li>Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.</li>
<li>Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.</li>",
      }
    }
  />
  <h2>
    Dolor Sit Amet
  </h2>
  <div
    dangerouslySetInnerHTML={
      Object {
        "__html": "<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</p>
<p>Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.</p>
<p>Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.</p>
<p>Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.</p>
<p>Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.</p>",
      }
    }
  />
  <ul
    dangerouslySetInnerHTML={
      Object {
        "__html": "<li>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</li>
<li>Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.</li>
<li>Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.</li>
<li>Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.</li>
<li>Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.</li>",
      }
    }
  />
  <div
    className="static-modal"
  />
</div>
`;

exports[`Editor Storyshots GlossaryTermModal with 3 detail items 1`] = `
<div>
  <h1>
    Lorem Ipsum
  </h1>
  <div
    dangerouslySetInnerHTML={
      Object {
        "__html": "<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</p>",
      }
    }
  />
  <ul
    dangerouslySetInnerHTML={
      Object {
        "__html": "<li>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</li>
<li>Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.</li>
<li>Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.</li>
<li>Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.</li>
<li>Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.</li>",
      }
    }
  />
  <h2>
    Dolor Sit Amet
  </h2>
  <div
    dangerouslySetInnerHTML={
      Object {
        "__html": "<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</p>
<p>Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.</p>
<p>Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.</p>
<p>Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.</p>
<p>Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.</p>",
      }
    }
  />
  <ul
    dangerouslySetInnerHTML={
      Object {
        "__html": "<li>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</li>
<li>Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.</li>
<li>Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.</li>
<li>Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.</li>
<li>Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.</li>",
      }
    }
  />
  <div
    className="static-modal"
  />
</div>
`;

exports[`Editor Storyshots LanguageSelectList default 1`] = `
<div
  className="btn-toolbar"
  role="toolbar"
>
  <button
    className="Button Button--small u-rounded Button--primary is-active btn btn-default"
    disabled={false}
    onClick={[Function]}
    type="button"
  >
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-language\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
    Current
  </button>
  <button
    className="Button Button--small u-rounded Button--primary btn btn-default"
    disabled={false}
    onClick={[Function]}
    type="button"
  >
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-language\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
    All
  </button>
  <button
    className="Button Button--small u-rounded Button--primary btn btn-default"
    disabled={false}
    onClick={[Function]}
    type="button"
  >
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-language\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
    Source
  </button>
</div>
`;

exports[`Editor Storyshots ProgressBar Large 1`] = `
<div
  className="Progressbar Progressbar--lg"
>
  <span
    className="Progressbar-item Progressbar-approved"
    style={
      Object {
        "marginLeft": "0%",
        "width": "20%",
      }
    }
  />
  <span
    className="Progressbar-item Progressbar-translated"
    style={
      Object {
        "marginLeft": "20%",
        "width": "30%",
      }
    }
  />
  <span
    className="Progressbar-item Progressbar-needswork"
    style={
      Object {
        "marginLeft": "50%",
        "width": "20%",
      }
    }
  />
  <span
    className="Progressbar-item Progressbar-rejected"
    style={
      Object {
        "marginLeft": "70%",
        "width": "10%",
      }
    }
  />
  <span
    className="Progressbar-item Progressbar-untranslated"
    style={
      Object {
        "marginLeft": "80%",
        "width": "20%",
      }
    }
  />
</div>
`;

exports[`Editor Storyshots ProgressBar Medium (default) 1`] = `
<div
  className="Progressbar"
>
  <span
    className="Progressbar-item Progressbar-approved"
    style={
      Object {
        "marginLeft": "0%",
        "width": "20%",
      }
    }
  />
  <span
    className="Progressbar-item Progressbar-translated"
    style={
      Object {
        "marginLeft": "20%",
        "width": "30%",
      }
    }
  />
  <span
    className="Progressbar-item Progressbar-needswork"
    style={
      Object {
        "marginLeft": "50%",
        "width": "20%",
      }
    }
  />
  <span
    className="Progressbar-item Progressbar-rejected"
    style={
      Object {
        "marginLeft": "70%",
        "width": "10%",
      }
    }
  />
  <span
    className="Progressbar-item Progressbar-untranslated"
    style={
      Object {
        "marginLeft": "80%",
        "width": "20%",
      }
    }
  />
</div>
`;

exports[`Editor Storyshots ProgressBar Small 1`] = `
<div
  className="Progressbar Progressbar--sm"
>
  <span
    className="Progressbar-item Progressbar-approved"
    style={
      Object {
        "marginLeft": "0%",
        "width": "20%",
      }
    }
  />
  <span
    className="Progressbar-item Progressbar-translated"
    style={
      Object {
        "marginLeft": "20%",
        "width": "30%",
      }
    }
  />
  <span
    className="Progressbar-item Progressbar-needswork"
    style={
      Object {
        "marginLeft": "50%",
        "width": "20%",
      }
    }
  />
  <span
    className="Progressbar-item Progressbar-rejected"
    style={
      Object {
        "marginLeft": "70%",
        "width": "10%",
      }
    }
  />
  <span
    className="Progressbar-item Progressbar-untranslated"
    style={
      Object {
        "marginLeft": "80%",
        "width": "20%",
      }
    }
  />
</div>
`;

exports[`Editor Storyshots RejectTranslationModal Criteria chosen 1`] = `
<div>
  <h1>
    Lorem Ipsum
  </h1>
  <div
    dangerouslySetInnerHTML={
      Object {
        "__html": "<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</p>",
      }
    }
  />
  <ul
    dangerouslySetInnerHTML={
      Object {
        "__html": "<li>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</li>
<li>Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.</li>
<li>Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.</li>
<li>Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.</li>
<li>Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.</li>",
      }
    }
  />
  <h2>
    Dolor Sit Amet
  </h2>
  <div
    dangerouslySetInnerHTML={
      Object {
        "__html": "<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</p>
<p>Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.</p>
<p>Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.</p>
<p>Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.</p>
<p>Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.</p>",
      }
    }
  />
  <ul
    dangerouslySetInnerHTML={
      Object {
        "__html": "<li>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</li>
<li>Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.</li>
<li>Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.</li>
<li>Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.</li>
<li>Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.</li>",
      }
    }
  />
  <div
    className="static-modal"
  />
</div>
`;

exports[`Editor Storyshots RejectTranslationModal Initial state 1`] = `
<div>
  <h1>
    Lorem Ipsum
  </h1>
  <div
    dangerouslySetInnerHTML={
      Object {
        "__html": "<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</p>",
      }
    }
  />
  <ul
    dangerouslySetInnerHTML={
      Object {
        "__html": "<li>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</li>
<li>Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.</li>
<li>Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.</li>
<li>Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.</li>
<li>Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.</li>",
      }
    }
  />
  <h2>
    Dolor Sit Amet
  </h2>
  <div
    dangerouslySetInnerHTML={
      Object {
        "__html": "<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</p>
<p>Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.</p>
<p>Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.</p>
<p>Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.</p>
<p>Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.</p>",
      }
    }
  />
  <ul
    dangerouslySetInnerHTML={
      Object {
        "__html": "<li>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</li>
<li>Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.</li>
<li>Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.</li>
<li>Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.</li>
<li>Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.</li>",
      }
    }
  />
  <div
    className="static-modal"
  />
</div>
`;

exports[`Editor Storyshots SelectButton active 1`] = `
<button
  className="Button Button--small u-rounded Button--secondary is-active btn btn-default"
  disabled={false}
  onClick={[Function]}
  type="button"
>
  <span
    className=""
  >
    <svg
      className="n1"
      dangerouslySetInnerHTML={
        Object {
          "__html": "<use xlink:href=\\"#Icon-clock\\" />",
        }
      }
      style={
        Object {
          "fill": "currentColor",
        }
      }
    />
  </span>
   
  All
</button>
`;

exports[`Editor Storyshots SelectButton default 1`] = `
<button
  className="Button Button--small u-rounded Button--secondary btn btn-default"
  disabled={false}
  onClick={[Function]}
  type="button"
>
  <span
    className=""
  >
    <svg
      className="n1"
      dangerouslySetInnerHTML={
        Object {
          "__html": "<use xlink:href=\\"#Icon-clock\\" />",
        }
      }
      style={
        Object {
          "fill": "currentColor",
        }
      }
    />
  </span>
   
  All
</button>
`;

exports[`Editor Storyshots SelectButtonList default 1`] = `
<div
  className="btn-toolbar"
  role="toolbar"
>
  <button
    className="Button Button--small u-rounded Button--secondary btn btn-default"
    disabled={false}
    onClick={[Function]}
    type="button"
  >
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-clock\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
    All
  </button>
  <button
    className="Button Button--small u-rounded Button--secondary btn btn-default"
    disabled={false}
    onClick={[Function]}
    type="button"
  >
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-comment\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
    Comments
  </button>
  <button
    className="Button Button--small u-rounded Button--secondary btn btn-default"
    disabled={false}
    onClick={[Function]}
    type="button"
  >
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-refresh\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
    Updates
  </button>
</div>
`;

exports[`Editor Storyshots SelectButtonList first button active 1`] = `
<div
  className="btn-toolbar"
  role="toolbar"
>
  <button
    className="Button Button--small u-rounded Button--secondary is-active btn btn-default"
    disabled={false}
    onClick={[Function]}
    type="button"
  >
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-clock\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
    All
  </button>
  <button
    className="Button Button--small u-rounded Button--secondary btn btn-default"
    disabled={false}
    onClick={[Function]}
    type="button"
  >
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-comment\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
    Comments
  </button>
  <button
    className="Button Button--small u-rounded Button--secondary btn btn-default"
    disabled={false}
    onClick={[Function]}
    type="button"
  >
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-refresh\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
    Updates
  </button>
</div>
`;

exports[`Editor Storyshots TextDiff default 1`] = `
<div
  className="Difference"
>
  <span>
    The 
  </span>
  <del>
    original
  </del>
  <ins>
    changed
  </ins>
  <span>
     text, 
  </span>
  <del>
    whatever
  </del>
  <ins>
    what
  </ins>
  <span>
     it 
  </span>
  <del>
    was
  </del>
  <ins>
    now is
  </ins>
  <span>
    .
  </span>
</div>
`;