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

exports[`Storyshots Common / Tutorial Tutorial Info 1`] = `
<div>
  <div
    style={
      Object {
        "position": "relative",
        "zIndex": 0,
      }
    }
  >
    <div
      className="sc-LzNap jRGkOz"
    >
      <div
        className="sc-LzNaN euxVIH"
      >
        <div
          className="sc-LzNaO hyqbWE"
        />
      </div>
    </div>
    <div
      className="sc-LzNaQ ioXkTN"
    >
      <div
        className="sc-LzNaR hRKVvf"
      >
        <h2>
          What is Civil?
        </h2>
        <p>
          Civil is a decentralized network for trustworthy and sustainable journalism. It is founded on the principle that a free press is essential to a fair and just society.
        </p>
        <p>
          Our community-run model providing members a say and share in the project’s operations and long-term evolution.
        </p>
        <p>
          More than 125 journalists representing 18 independent newsrooms, from Chicago to Singapore, are already part of the Civil community. And we’re just getting started!
        </p>
      </div>
    </div>
    <div
      className="sc-LzNaU begxdd"
    >
      <div
        className="sc-LzNaV iyUHaE"
      >
        <button
          className="sc-fzXfLO sc-fzXfLQ sc-LzNbv ctArDv"
          onClick={[Function]}
          theme={
            Object {
              "invertedButtonBackground": "#FFFFFF",
              "invertedButtonColor": "#2B56FF",
            }
          }
          type="button"
        >
          Back
        </button>
        <button
          className="sc-fzXfLO sc-fzXfLP sc-LzNbu brzQQE"
          onClick={[Function]}
          theme={
            Object {
              "primaryButtonBackground": "#2B56FF",
              "primaryButtonColor": "#FFFFFF",
              "primaryButtonDisabledBackground": "rgba(43, 86, 255, 0.5)",
              "primaryButtonDisabledColor": "#FFFFFF",
              "primaryButtonFontWeight": "normal",
              "primaryButtonHoverBackground": "#4066FF",
              "primaryButtonTextTransform": "uppercase",
              "sansSerifFont": "\\"Libre Franklin\\", sans-serif",
            }
          }
          type="button"
        >
          Continue
        </button>
      </div>
    </div>
  </div>
  <button
    className="info__show-button"
    onClick={[Function]}
    style={
      Object {
        "background": "#027ac5",
        "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
    className="info__overlay"
    style={
      Object {
        "background": "white",
        "bottom": 0,
        "display": "none",
        "height": "100vh",
        "left": 0,
        "overflow": "auto",
        "position": "fixed",
        "top": 0,
        "width": "100vw",
        "zIndex": 99999,
      }
    }
  >
    <button
      className="info__close-button"
      onClick={[Function]}
      style={
        Object {
          "background": "#027ac5",
          "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>
      <div
        style={
          Object {
            "backgroundColor": "#fff",
            "border": "1px solid #eee",
            "borderRadius": "2px",
            "color": "black",
            "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, 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,
              }
            }
          >
            Common / Tutorial
          </h1>
          <h2
            style={
              Object {
                "fontSize": "22px",
                "fontWeight": 400,
                "margin": "0 0 10px 0",
                "padding": 0,
              }
            }
          >
            Tutorial Info
          </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 {
                "alignItems": "center",
                "backgroundColor": "#fafafa",
                "display": "flex",
                "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
                "fontSize": ".88em",
                "justifyContent": "space-between",
                "lineHeight": 1.5,
                "overflowX": "scroll",
                "padding": ".5rem",
              }
            }
          >
            <div>
              <div
                style={
                  Object {
                    "paddingLeft": 18,
                    "paddingRight": 3,
                  }
                }
              >
                <span
                  style={
                    Object {
                      "color": "#444",
                    }
                  }
                >
                  &lt;
                  TutorialInfo
                </span>
                <span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      content
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        {
                        <span
                          style={
                            Object {
                              "color": "#666",
                            }
                          }
                        >
                          &lt;TopicTutorial /&gt;
                        </span>
                        }
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      activeSlide
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        {
                        <span
                          style={
                            Object {
                              "color": "#a11",
                            }
                          }
                        >
                          1
                        </span>
                        }
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      totalSlides
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        {
                        <span
                          style={
                            Object {
                              "color": "#a11",
                            }
                          }
                        >
                          3
                        </span>
                        }
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      onClickPrev
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        {
                        <span
                          style={
                            Object {
                              "color": "#170",
                            }
                          }
                        >
                          onClickFunc
                        </span>
                        }
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      onClickNext
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        {
                        <span
                          style={
                            Object {
                              "color": "#170",
                            }
                          }
                        >
                          onClickFunc
                        </span>
                        }
                      </span>
                    </span>
                    <br />
                  </span>
                </span>
                <span
                  style={
                    Object {
                      "color": "#444",
                    }
                  }
                >
                  /&gt;
                </span>
              </div>
            </div>
            <button
              onClick={[Function]}
              style={
                Object {
                  "alignSelf": "flex-start",
                  "backgroundColor": "rgb(255, 255, 255)",
                  "borderColor": "rgb(238, 238, 238)",
                  "borderImage": "initial",
                  "borderRadius": "3px",
                  "borderStyle": "solid",
                  "borderWidth": "1px",
                  "cursor": "pointer",
                  "flexShrink": "0",
                  "fontSize": "13px",
                  "overflow": "hidden",
                  "padding": "3px 10px",
                }
              }
              type="button"
            >
              Copy
            </button>
          </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>
            <h3
              style={
                Object {
                  "margin": "20px 0 0 0",
                }
              }
            >
              "
              TutorialInfo
              " Component
            </h3>
            <small>
              No propTypes defined!
            </small>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Common / Tutorial Tutorial Question 1`] = `
<div>
  <div
    style={
      Object {
        "position": "relative",
        "zIndex": 0,
      }
    }
  >
    <div
      className="sc-LzNap jRGkOz"
    >
      <div
        className="sc-LzNaN euxVIH"
      >
        <div
          className="sc-LzNaP bYBoYU"
        >
          1
           of 
          3
        </div>
        <div
          className="sc-LzNaO hyqbWE"
        />
      </div>
    </div>
    <div
      className="sc-LzNaQ ioXkTN"
    >
      <h2
        className="sc-LzNbx iVkyEU"
      >
        Quiz: 
        Quiz: Considerations before buying tokens
      </h2>
      <h3
        className="sc-LzNby kVOcFP"
      >
        <span>
          1
          .
        </span>
        Which of the following is important to you when purchasing a token?
      </h3>
      <div>
        <div
          className="sc-fzXfNf gqDmMZ"
        >
          <div>
            <div
              className="sc-LzNbC WfSvG"
            >
              <input
                name="topic1-1"
                onChange={[Function]}
                type="radio"
                value="Option 1"
              />
              <button
                className="sc-fzXfLO sc-fzXfLR sc-LzNbD doZCqK"
                onClick={[Function]}
                theme={
                  Object {
                    "secondaryButtonBackground": "#FFFFFF",
                    "secondaryButtonBorder": "#C4C2C0",
                    "secondaryButtonColor": "#7D7373",
                    "secondaryButtonHoverBackground": "#2B56FF",
                    "secondaryButtonHoverColor": "#FFFFFF",
                  }
                }
                type="button"
              >
                <div
                  className="sc-LzNbB dGTFrM"
                />
                Option 1
              </button>
            </div>
            <div
              className="sc-LzNbC WfSvG"
            >
              <input
                name="topic1-1"
                onChange={[Function]}
                type="radio"
                value="Option 2"
              />
              <button
                className="sc-fzXfLO sc-fzXfLR sc-LzNbD doZCqK"
                onClick={[Function]}
                theme={
                  Object {
                    "secondaryButtonBackground": "#FFFFFF",
                    "secondaryButtonBorder": "#C4C2C0",
                    "secondaryButtonColor": "#7D7373",
                    "secondaryButtonHoverBackground": "#2B56FF",
                    "secondaryButtonHoverColor": "#FFFFFF",
                  }
                }
                type="button"
              >
                <div
                  className="sc-LzNbB dGTFrM"
                />
                Option 2
              </button>
            </div>
            <div
              className="sc-LzNbC WfSvG"
            >
              <input
                name="topic1-1"
                onChange={[Function]}
                type="radio"
                value="Option 3"
              />
              <button
                className="sc-fzXfLO sc-fzXfLR sc-LzNbD doZCqK"
                onClick={[Function]}
                theme={
                  Object {
                    "secondaryButtonBackground": "#FFFFFF",
                    "secondaryButtonBorder": "#C4C2C0",
                    "secondaryButtonColor": "#7D7373",
                    "secondaryButtonHoverBackground": "#2B56FF",
                    "secondaryButtonHoverColor": "#FFFFFF",
                  }
                }
                type="button"
              >
                <div
                  className="sc-LzNbB dGTFrM"
                />
                Option 3
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      className="sc-LzNaU begxdd"
    >
      <div
        className="sc-LzNaV iyUHaE"
      >
        <button
          className="sc-fzXfLO sc-fzXfLQ sc-LzNbv ctArDv"
          onClick={[Function]}
          theme={
            Object {
              "invertedButtonBackground": "#FFFFFF",
              "invertedButtonColor": "#2B56FF",
            }
          }
          type="button"
        >
          Back to Tutorial
        </button>
        <button
          className="sc-fzXfLO sc-fzXfLP sc-LzNbu brzQQE disabled"
          disabled={true}
          onClick={[Function]}
          theme={
            Object {
              "primaryButtonBackground": "#2B56FF",
              "primaryButtonColor": "#FFFFFF",
              "primaryButtonDisabledBackground": "rgba(43, 86, 255, 0.5)",
              "primaryButtonDisabledColor": "#FFFFFF",
              "primaryButtonFontWeight": "normal",
              "primaryButtonHoverBackground": "#4066FF",
              "primaryButtonTextTransform": "uppercase",
              "sansSerifFont": "\\"Libre Franklin\\", sans-serif",
            }
          }
          type="button"
        >
          Check
        </button>
      </div>
    </div>
  </div>
  <button
    className="info__show-button"
    onClick={[Function]}
    style={
      Object {
        "background": "#027ac5",
        "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
    className="info__overlay"
    style={
      Object {
        "background": "white",
        "bottom": 0,
        "display": "none",
        "height": "100vh",
        "left": 0,
        "overflow": "auto",
        "position": "fixed",
        "top": 0,
        "width": "100vw",
        "zIndex": 99999,
      }
    }
  >
    <button
      className="info__close-button"
      onClick={[Function]}
      style={
        Object {
          "background": "#027ac5",
          "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>
      <div
        style={
          Object {
            "backgroundColor": "#fff",
            "border": "1px solid #eee",
            "borderRadius": "2px",
            "color": "black",
            "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, 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,
              }
            }
          >
            Common / Tutorial
          </h1>
          <h2
            style={
              Object {
                "fontSize": "22px",
                "fontWeight": 400,
                "margin": "0 0 10px 0",
                "padding": 0,
              }
            }
          >
            Tutorial Question
          </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 {
                "alignItems": "center",
                "backgroundColor": "#fafafa",
                "display": "flex",
                "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
                "fontSize": ".88em",
                "justifyContent": "space-between",
                "lineHeight": 1.5,
                "overflowX": "scroll",
                "padding": ".5rem",
              }
            }
          >
            <div>
              <div
                style={
                  Object {
                    "paddingLeft": 18,
                    "paddingRight": 3,
                  }
                }
              >
                <span
                  style={
                    Object {
                      "color": "#444",
                    }
                  }
                >
                  &lt;
                  TutorialQuestion
                </span>
                <span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      quizId
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        "
                        <span
                          style={
                            Object {
                              "color": "#22a",
                              "wordBreak": "break-word",
                            }
                          }
                        >
                          topic1
                        </span>
                        "
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      quizName
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        "
                        <span
                          style={
                            Object {
                              "color": "#22a",
                              "wordBreak": "break-word",
                            }
                          }
                        >
                          Quiz: Considerations before buying tokens
                        </span>
                        "
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      question
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        "
                        <span
                          style={
                            Object {
                              "color": "#22a",
                              "wordBreak": "break-word",
                            }
                          }
                        >
                          Which of the following is important to you when pu…
                        </span>
                        "
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      answer
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        "
                        <span
                          style={
                            Object {
                              "color": "#22a",
                              "wordBreak": "break-word",
                            }
                          }
                        >
                          Option 1
                        </span>
                        "
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      options
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        {
                        <span
                          style={
                            Object {
                              "color": "#666",
                            }
                          }
                        >
                          [
                          <span>
                            <span
                              style={
                                Object {
                                  "color": "#666",
                                }
                              }
                            >
                              {
                              <span>
                                <span
                                  style={
                                    Object {
                                      "color": "#666",
                                    }
                                  }
                                >
                                  text
                                </span>
                              </span>
                              : 
                              <span
                                style={
                                  Object {
                                    "color": "#22a",
                                    "wordBreak": "break-word",
                                  }
                                }
                              >
                                'Option 1'
                              </span>
                              }
                            </span>
                          </span>
                          ,
                          <span>
                            <span
                              style={
                                Object {
                                  "color": "#666",
                                }
                              }
                            >
                              {
                              <span>
                                <span
                                  style={
                                    Object {
                                      "color": "#666",
                                    }
                                  }
                                >
                                  text
                                </span>
                              </span>
                              : 
                              <span
                                style={
                                  Object {
                                    "color": "#22a",
                                    "wordBreak": "break-word",
                                  }
                                }
                              >
                                'Option 2'
                              </span>
                              }
                            </span>
                          </span>
                          ,
                          <span>
                            <span
                              style={
                                Object {
                                  "color": "#666",
                                }
                              }
                            >
                              {
                              <span>
                                <span
                                  style={
                                    Object {
                                      "color": "#666",
                                    }
                                  }
                                >
                                  text
                                </span>
                              </span>
                              : 
                              <span
                                style={
                                  Object {
                                    "color": "#22a",
                                    "wordBreak": "break-word",
                                  }
                                }
                              >
                                'Option 3'
                              </span>
                              }
                            </span>
                          </span>
                          ]
                        </span>
                        }
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      activeSlide
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        {
                        <span
                          style={
                            Object {
                              "color": "#a11",
                            }
                          }
                        >
                          1
                        </span>
                        }
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      totalSlides
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        {
                        <span
                          style={
                            Object {
                              "color": "#a11",
                            }
                          }
                        >
                          3
                        </span>
                        }
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      onClickPrev
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        {
                        <span
                          style={
                            Object {
                              "color": "#170",
                            }
                          }
                        >
                          onClickFunc
                        </span>
                        }
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      onClickNext
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        {
                        <span
                          style={
                            Object {
                              "color": "#170",
                            }
                          }
                        >
                          onClickFunc
                        </span>
                        }
                      </span>
                    </span>
                    <br />
                  </span>
                </span>
                <span
                  style={
                    Object {
                      "color": "#444",
                    }
                  }
                >
                  /&gt;
                </span>
              </div>
            </div>
            <button
              onClick={[Function]}
              style={
                Object {
                  "alignSelf": "flex-start",
                  "backgroundColor": "rgb(255, 255, 255)",
                  "borderColor": "rgb(238, 238, 238)",
                  "borderImage": "initial",
                  "borderRadius": "3px",
                  "borderStyle": "solid",
                  "borderWidth": "1px",
                  "cursor": "pointer",
                  "flexShrink": "0",
                  "fontSize": "13px",
                  "overflow": "hidden",
                  "padding": "3px 10px",
                }
              }
              type="button"
            >
              Copy
            </button>
          </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>
            <h3
              style={
                Object {
                  "margin": "20px 0 0 0",
                }
              }
            >
              "
              TutorialQuestion
              " Component
            </h3>
            <small>
              No propTypes defined!
            </small>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Common / Tutorial Tutorial Topic Completed 1`] = `
<div>
  <div
    style={
      Object {
        "position": "relative",
        "zIndex": 0,
      }
    }
  >
    <div
      className="sc-LzNaQ kaOOdL"
    >
      <svg
        height="50"
        viewBox="0 0 20 20"
        width="50"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g
          fill="none"
          fillRule="evenodd"
          transform="translate(1 1)"
        >
          <circle
            className="svg-stroke"
            cx="9"
            cy="9"
            r="8.25"
            stroke="#29cb42"
            strokeWidth="1.5"
          />
          <path
            className="svg-fill"
            d="m12.6 5-5.13 5.17-2.07-2.08-1.4 1.41 3.47 3.5 6.53-6.59z"
            fill="#29cb42"
            fillRule="nonzero"
          />
        </g>
      </svg>
      <p
        className="sc-LzNbz dbozJi"
      >
        Nice! You’ve completed Topic 1
      </p>
      <p
        className="sc-LzNbA bduLe"
      >
        Buying tokens, like any financial decision, is a risk. The price of tokens can fluctuate depending on various factors. It’ a good rule of thumb to look at the team behind the token – the founders, the advisors – as well as the token design and its supply.  It’s also important to diversify your portfolio across many investment vehicles – crypto assets and non-crypto assets.
      </p>
      <button
        className="sc-fzXfLO sc-fzXfLP sc-LzNbu brzQQE"
        onClick={[Function]}
        theme={
          Object {
            "primaryButtonBackground": "#2B56FF",
            "primaryButtonColor": "#FFFFFF",
            "primaryButtonDisabledBackground": "rgba(43, 86, 255, 0.5)",
            "primaryButtonDisabledColor": "#FFFFFF",
            "primaryButtonFontWeight": "normal",
            "primaryButtonHoverBackground": "#4066FF",
            "primaryButtonTextTransform": "uppercase",
            "sansSerifFont": "\\"Libre Franklin\\", sans-serif",
          }
        }
        type="button"
      >
        Continue to topic 2
      </button>
    </div>
  </div>
  <button
    className="info__show-button"
    onClick={[Function]}
    style={
      Object {
        "background": "#027ac5",
        "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
    className="info__overlay"
    style={
      Object {
        "background": "white",
        "bottom": 0,
        "display": "none",
        "height": "100vh",
        "left": 0,
        "overflow": "auto",
        "position": "fixed",
        "top": 0,
        "width": "100vw",
        "zIndex": 99999,
      }
    }
  >
    <button
      className="info__close-button"
      onClick={[Function]}
      style={
        Object {
          "background": "#027ac5",
          "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>
      <div
        style={
          Object {
            "backgroundColor": "#fff",
            "border": "1px solid #eee",
            "borderRadius": "2px",
            "color": "black",
            "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, 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,
              }
            }
          >
            Common / Tutorial
          </h1>
          <h2
            style={
              Object {
                "fontSize": "22px",
                "fontWeight": 400,
                "margin": "0 0 10px 0",
                "padding": 0,
              }
            }
          >
            Tutorial Topic Completed
          </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 {
                "alignItems": "center",
                "backgroundColor": "#fafafa",
                "display": "flex",
                "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
                "fontSize": ".88em",
                "justifyContent": "space-between",
                "lineHeight": 1.5,
                "overflowX": "scroll",
                "padding": ".5rem",
              }
            }
          >
            <div>
              <div
                style={
                  Object {
                    "paddingLeft": 18,
                    "paddingRight": 3,
                  }
                }
              >
                <span
                  style={
                    Object {
                      "color": "#444",
                    }
                  }
                >
                  &lt;
                  TutorialTopicCompleted
                </span>
                <span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      completedHeader
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        "
                        <span
                          style={
                            Object {
                              "color": "#22a",
                              "wordBreak": "break-word",
                            }
                          }
                        >
                          Nice! You’ve completed Topic 1
                        </span>
                        "
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      completedText
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        "
                        <span
                          style={
                            Object {
                              "color": "#22a",
                              "wordBreak": "break-word",
                            }
                          }
                        >
                          Buying tokens, like any financial decision, is a r…
                        </span>
                        "
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      continueBtnText
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        "
                        <span
                          style={
                            Object {
                              "color": "#22a",
                              "wordBreak": "break-word",
                            }
                          }
                        >
                          Continue to topic 2
                        </span>
                        "
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      lastTopic
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        {
                        <span
                          style={
                            Object {
                              "color": "#a11",
                            }
                          }
                        >
                          false
                        </span>
                        }
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      onClickNextTopic
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        {
                        <span
                          style={
                            Object {
                              "color": "#170",
                            }
                          }
                        >
                          onClickFunc
                        </span>
                        }
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      handleClose
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        {
                        <span
                          style={
                            Object {
                              "color": "#170",
                            }
                          }
                        >
                          onClickFunc
                        </span>
                        }
                      </span>
                    </span>
                    <br />
                  </span>
                </span>
                <span
                  style={
                    Object {
                      "color": "#444",
                    }
                  }
                >
                  /&gt;
                </span>
              </div>
            </div>
            <button
              onClick={[Function]}
              style={
                Object {
                  "alignSelf": "flex-start",
                  "backgroundColor": "rgb(255, 255, 255)",
                  "borderColor": "rgb(238, 238, 238)",
                  "borderImage": "initial",
                  "borderRadius": "3px",
                  "borderStyle": "solid",
                  "borderWidth": "1px",
                  "cursor": "pointer",
                  "flexShrink": "0",
                  "fontSize": "13px",
                  "overflow": "hidden",
                  "padding": "3px 10px",
                }
              }
              type="button"
            >
              Copy
            </button>
          </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>
            <h3
              style={
                Object {
                  "margin": "20px 0 0 0",
                }
              }
            >
              "
              TutorialTopicCompleted
              " Component
            </h3>
            <small>
              No propTypes defined!
            </small>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Common / Tutorial Tutorial Topic Intro 1`] = `
<div>
  <div
    style={
      Object {
        "position": "relative",
        "zIndex": 0,
      }
    }
  >
    <div
      className="sc-LzNap jRGkOz"
    >
      <div
        className="sc-LzNaN euxVIH"
      >
        <div
          className="sc-LzNaO frHWqn"
        />
      </div>
    </div>
    <div
      className="sc-LzNaQ ioXkTN"
    >
      <div
        className="sc-LzNaS eosKoM"
      >
        Topic 1: How to use Civil tokens
      </div>
      <div
        className="sc-LzNaT CHfKR"
      >
        <p>
          <b>
            You’ll learn
          </b>
        </p>
        <p>
          What is Civil, and what makes us different?
        </p>
        <p>
          How does a Newsroom join the Civil network?
        </p>
        <p>
          What are Civil tokens (CVL)?
        </p>
        <p>
          What is the Civil Registry?
        </p>
      </div>
    </div>
    <div
      className="sc-LzNaU begxdd"
    >
      <div
        className="sc-LzNaV hDQoM"
      >
        <div>
          <button
            className="sc-fzXfLO sc-fzXfLQ sc-LzNbw evMFJT"
            onClick={[Function]}
            theme={
              Object {
                "invertedButtonBackground": "#FFFFFF",
                "invertedButtonColor": "#2B56FF",
              }
            }
            type="button"
          >
            Skip to the quiz
          </button>
          <button
            className="sc-fzXfLO sc-fzXfLP sc-LzNbu brzQQE"
            onClick={[Function]}
            theme={
              Object {
                "primaryButtonBackground": "#2B56FF",
                "primaryButtonColor": "#FFFFFF",
                "primaryButtonDisabledBackground": "rgba(43, 86, 255, 0.5)",
                "primaryButtonDisabledColor": "#FFFFFF",
                "primaryButtonFontWeight": "normal",
                "primaryButtonHoverBackground": "#4066FF",
                "primaryButtonTextTransform": "uppercase",
                "sansSerifFont": "\\"Libre Franklin\\", sans-serif",
              }
            }
            type="button"
          >
            Let’s go
          </button>
        </div>
      </div>
    </div>
  </div>
  <button
    className="info__show-button"
    onClick={[Function]}
    style={
      Object {
        "background": "#027ac5",
        "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
    className="info__overlay"
    style={
      Object {
        "background": "white",
        "bottom": 0,
        "display": "none",
        "height": "100vh",
        "left": 0,
        "overflow": "auto",
        "position": "fixed",
        "top": 0,
        "width": "100vw",
        "zIndex": 99999,
      }
    }
  >
    <button
      className="info__close-button"
      onClick={[Function]}
      style={
        Object {
          "background": "#027ac5",
          "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>
      <div
        style={
          Object {
            "backgroundColor": "#fff",
            "border": "1px solid #eee",
            "borderRadius": "2px",
            "color": "black",
            "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, 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,
              }
            }
          >
            Common / Tutorial
          </h1>
          <h2
            style={
              Object {
                "fontSize": "22px",
                "fontWeight": 400,
                "margin": "0 0 10px 0",
                "padding": 0,
              }
            }
          >
            Tutorial Topic Intro
          </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 {
                "alignItems": "center",
                "backgroundColor": "#fafafa",
                "display": "flex",
                "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
                "fontSize": ".88em",
                "justifyContent": "space-between",
                "lineHeight": 1.5,
                "overflowX": "scroll",
                "padding": ".5rem",
              }
            }
          >
            <div>
              <div
                style={
                  Object {
                    "paddingLeft": 18,
                    "paddingRight": 3,
                  }
                }
              >
                <span
                  style={
                    Object {
                      "color": "#444",
                    }
                  }
                >
                  &lt;
                  TutorialTopicIntro
                </span>
                <span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      headerText
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        "
                        <span
                          style={
                            Object {
                              "color": "#22a",
                              "wordBreak": "break-word",
                            }
                          }
                        >
                          Topic 1: How to use Civil tokens
                        </span>
                        "
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      infoText
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        {
                        <span
                          style={
                            Object {
                              "color": "#666",
                            }
                          }
                        >
                          &lt;TopicIntro /&gt;
                        </span>
                        }
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      activeSlide
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        {
                        <span
                          style={
                            Object {
                              "color": "#a11",
                            }
                          }
                        >
                          0
                        </span>
                        }
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      totalSlides
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        {
                        <span
                          style={
                            Object {
                              "color": "#a11",
                            }
                          }
                        >
                          0
                        </span>
                        }
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      onClickNext
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        {
                        <span
                          style={
                            Object {
                              "color": "#170",
                            }
                          }
                        >
                          onClickFunc
                        </span>
                        }
                      </span>
                    </span>
                  </span>
                  <span>
                    <span>
                      <br />
                        
                    </span>
                    <span
                      style={Object {}}
                    >
                      onClickSkipTutorial
                    </span>
                    <span>
                      =
                      <span
                        style={Object {}}
                      >
                        {
                        <span
                          style={
                            Object {
                              "color": "#170",
                            }
                          }
                        >
                          onClickFunc
                        </span>
                        }
                      </span>
                    </span>
                    <br />
                  </span>
                </span>
                <span
                  style={
                    Object {
                      "color": "#444",
                    }
                  }
                >
                  /&gt;
                </span>
              </div>
            </div>
            <button
              onClick={[Function]}
              style={
                Object {
                  "alignSelf": "flex-start",
                  "backgroundColor": "rgb(255, 255, 255)",
                  "borderColor": "rgb(238, 238, 238)",
                  "borderImage": "initial",
                  "borderRadius": "3px",
                  "borderStyle": "solid",
                  "borderWidth": "1px",
                  "cursor": "pointer",
                  "flexShrink": "0",
                  "fontSize": "13px",
                  "overflow": "hidden",
                  "padding": "3px 10px",
                }
              }
              type="button"
            >
              Copy
            </button>
          </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>
            <h3
              style={
                Object {
                  "margin": "20px 0 0 0",
                }
              }
            >
              "
              TutorialTopicIntro
              " Component
            </h3>
            <small>
              No propTypes defined!
            </small>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;
