@pranaysahith/decap-cms-core 3.9.1

package/src/components/Editor/__tests__/__snapshots__/EditorToolbar.spec.js.snap

@@ -0,0 +1,4233 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EditorToolbar should render normal save button 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1),0 2px 54px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-6 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-8 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #ff003b;
+}
+
+.emotion-10 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-15 {
+  position: relative;
+  font-size: 14px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin: 0 10px;
+}
+
+.emotion-15 .e1jeq5dr0 {
+  color: #17a2b8;
+}
+
+.emotion-17 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  display: block;
+  padding-left: 20px;
+  padding-right: 40px;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-color: #17a2b8;
+}
+
+.emotion-17:after {
+  color: #fff;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-radius: 2px;
+  border-top: 6px solid currentColor;
+  border-bottom: 0;
+  content: '';
+  display: block;
+  position: absolute;
+  top: 16px;
+  right: 10px;
+  color: currentColor;
+}
+
+@media (max-width: 1200px) {
+  .emotion-17 {
+    padding-left: 10px;
+  }
+}
+
+.emotion-19 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #fcefea;
+  color: #D60032;
+}
+
+@media (max-width: 1200px) {
+  .emotion-19 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-21 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+.emotion-23 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-left-width: 1px;
+  padding: 0 7px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+  >
+    <mock-link
+      class="emotion-2 emotion-3"
+      to=""
+    >
+      <div
+        class="emotion-4 emotion-5"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-8 emotion-9"
+        >
+          editor.editorToolbar.unsavedChanges
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      <div
+        class="emotion-12 emotion-13"
+      >
+        <div>
+          <div
+            class="emotion-14 emotion-15 emotion-16"
+          >
+            <span
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="emotion-17 emotion-18"
+              role="button"
+              tabindex="0"
+            >
+              editor.editorToolbar.publish
+            </span>
+          </div>
+        </div>
+        <div>
+          <button
+            class="emotion-19 emotion-20"
+          >
+            editor.editorToolbar.deleteEntry
+          </button>
+        </div>
+      </div>
+      <div
+        class="emotion-21 emotion-22"
+      />
+    </div>
+    <div
+      class="emotion-23 emotion-24"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EditorToolbar should render normal save button 2`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1),0 2px 54px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-6 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-8 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #ff003b;
+}
+
+.emotion-10 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-15 {
+  position: relative;
+  font-size: 14px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin: 0 10px;
+}
+
+.emotion-15 .e1jeq5dr0 {
+  color: #17a2b8;
+}
+
+.emotion-17 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  display: block;
+  padding-left: 20px;
+  padding-right: 40px;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-color: #17a2b8;
+}
+
+.emotion-17:after {
+  color: #fff;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-radius: 2px;
+  border-top: 6px solid currentColor;
+  border-bottom: 0;
+  content: '';
+  display: block;
+  position: absolute;
+  top: 16px;
+  right: 10px;
+  color: currentColor;
+}
+
+@media (max-width: 1200px) {
+  .emotion-17 {
+    padding-left: 10px;
+  }
+}
+
+.emotion-19 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #fcefea;
+  color: #D60032;
+}
+
+@media (max-width: 1200px) {
+  .emotion-19 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-21 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+.emotion-23 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-left-width: 1px;
+  padding: 0 7px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+  >
+    <mock-link
+      class="emotion-2 emotion-3"
+      to=""
+    >
+      <div
+        class="emotion-4 emotion-5"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-8 emotion-9"
+        >
+          editor.editorToolbar.unsavedChanges
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      <div
+        class="emotion-12 emotion-13"
+      >
+        <div>
+          <div
+            class="emotion-14 emotion-15 emotion-16"
+          >
+            <span
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="emotion-17 emotion-18"
+              role="button"
+              tabindex="0"
+            >
+              editor.editorToolbar.publish
+            </span>
+          </div>
+        </div>
+        <div>
+          <button
+            class="emotion-19 emotion-20"
+          >
+            editor.editorToolbar.deleteEntry
+          </button>
+        </div>
+      </div>
+      <div
+        class="emotion-21 emotion-22"
+      />
+    </div>
+    <div
+      class="emotion-23 emotion-24"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EditorToolbar should render with default props 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1),0 2px 54px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-6 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-8 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
+}
+
+.emotion-10 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-14 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #ddf5f9;
+  color: #117888;
+}
+
+@media (max-width: 1200px) {
+  .emotion-14 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-16 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #fcefea;
+  color: #D60032;
+}
+
+@media (max-width: 1200px) {
+  .emotion-16 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-18 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+.emotion-20 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-left-width: 1px;
+  padding: 0 7px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+  >
+    <mock-link
+      class="emotion-2 emotion-3"
+      to=""
+    >
+      <div
+        class="emotion-4 emotion-5"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-8 emotion-9"
+        >
+          editor.editorToolbar.changesSaved
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      <div
+        class="emotion-12 emotion-13"
+      >
+        <button
+          class="emotion-14 emotion-15"
+        >
+          editor.editorToolbar.published
+        </button>
+        <div>
+          <button
+            class="emotion-16 emotion-17"
+          >
+            editor.editorToolbar.deleteEntry
+          </button>
+        </div>
+      </div>
+      <div
+        class="emotion-18 emotion-19"
+      />
+    </div>
+    <div
+      class="emotion-20 emotion-21"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1),0 2px 54px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-6 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-8 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
+}
+
+.emotion-10 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-14 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
+}
+
+@media (max-width: 1200px) {
+  .emotion-14 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-14[disabled] {
+  background-color: #eff0f4;
+  color: #798291;
+  cursor: default;
+}
+
+.emotion-17 {
+  position: relative;
+  font-size: 14px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin: 0 10px;
+}
+
+.emotion-17 .e1jeq5dr0 {
+  color: #17a2b8;
+}
+
+.emotion-19 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  display: block;
+  padding-left: 20px;
+  padding-right: 40px;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-color: #ddf5f9;
+  color: #17a2b8;
+}
+
+.emotion-19:after {
+  color: #fff;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-radius: 2px;
+  border-top: 6px solid currentColor;
+  border-bottom: 0;
+  content: '';
+  display: block;
+  position: absolute;
+  top: 16px;
+  right: 10px;
+  color: currentColor;
+}
+
+@media (max-width: 1200px) {
+  .emotion-19 {
+    padding-left: 10px;
+  }
+}
+
+.emotion-21 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #fcefea;
+  color: #D60032;
+}
+
+@media (max-width: 1200px) {
+  .emotion-21 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-23 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+.emotion-25 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-left-width: 1px;
+  padding: 0 7px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+  >
+    <mock-link
+      class="emotion-2 emotion-3"
+      to=""
+    >
+      <div
+        class="emotion-4 emotion-5"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-8 emotion-9"
+        >
+          editor.editorToolbar.changesSaved
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      <div
+        class="emotion-12 emotion-13"
+      >
+        <button
+          class="emotion-14 emotion-15"
+          disabled=""
+        >
+          editor.editorToolbar.save
+        </button>
+        <div
+          class="emotion-16 emotion-17 emotion-18"
+        >
+          <span
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="emotion-19 emotion-20"
+            role="button"
+            tabindex="0"
+          >
+            editor.editorToolbar.status
+          </span>
+        </div>
+        <button
+          class="emotion-21 emotion-22"
+        >
+          editor.editorToolbar.deletePublishedEntry
+        </button>
+      </div>
+      <div
+        class="emotion-23 emotion-24"
+      />
+    </div>
+    <div
+      class="emotion-25 emotion-26"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1),0 2px 54px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-6 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-8 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
+}
+
+.emotion-10 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-14 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
+}
+
+@media (max-width: 1200px) {
+  .emotion-14 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-14[disabled] {
+  background-color: #eff0f4;
+  color: #798291;
+  cursor: default;
+}
+
+.emotion-17 {
+  position: relative;
+  font-size: 14px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin: 0 10px;
+}
+
+.emotion-17 .emotion-25 {
+  color: #17a2b8;
+}
+
+.emotion-19 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  display: block;
+  padding-left: 20px;
+  padding-right: 40px;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-color: #ddf5f9;
+  color: #17a2b8;
+}
+
+.emotion-19:after {
+  color: #fff;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-radius: 2px;
+  border-top: 6px solid currentColor;
+  border-bottom: 0;
+  content: '';
+  display: block;
+  position: absolute;
+  top: 16px;
+  right: 10px;
+  color: currentColor;
+}
+
+@media (max-width: 1200px) {
+  .emotion-19 {
+    padding-left: 10px;
+  }
+}
+
+.emotion-21 {
+  position: relative;
+}
+
+.emotion-23 {
+  position: relative;
+  display: inline-block;
+}
+
+.emotion-23:hover+.emotion-29 {
+  visibility: visible;
+  opacity: 0.9;
+}
+
+.emotion-26 {
+  display: inline-block;
+  line-height: 0;
+  width: 18px;
+  height: 18px;
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
+
+.emotion-26 path:not(.no-fill),
+.emotion-26 circle:not(.no-fill),
+.emotion-26 polygon:not(.no-fill),
+.emotion-26 rect:not(.no-fill) {
+  fill: currentColor;
+}
+
+.emotion-26 path.clipped {
+  fill: transparent;
+}
+
+.emotion-26 svg {
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-28 {
+  visibility: hidden;
+  width: 321px;
+  background-color: #555;
+  color: #fff;
+  text-align: unset;
+  border-radius: 6px;
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  top: 145%;
+  left: 50%;
+  margin-left: -320px;
+  opacity: 0;
+  -webkit-transition: opacity 0.3s;
+  transition: opacity 0.3s;
+}
+
+.emotion-30 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+.emotion-32 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-left-width: 1px;
+  padding: 0 7px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+  >
+    <mock-link
+      class="emotion-2 emotion-3"
+      to=""
+    >
+      <div
+        class="emotion-4 emotion-5"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-8 emotion-9"
+        >
+          editor.editorToolbar.changesSaved
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      <div
+        class="emotion-12 emotion-13"
+      >
+        <button
+          class="emotion-14 emotion-15"
+          disabled=""
+        >
+          editor.editorToolbar.save
+        </button>
+        <div
+          class="emotion-16 emotion-17 emotion-18"
+        >
+          <span
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="emotion-19 emotion-20"
+            role="button"
+            tabindex="0"
+          >
+            editor.editorToolbar.status
+          </span>
+        </div>
+        <div
+          class="emotion-21 emotion-22"
+        >
+          <div
+            class="emotion-23 emotion-24"
+          >
+            <span
+              class="tooltip emotion-25 emotion-26 emotion-27"
+            >
+              <svg
+                class="bi bi-info-circle"
+                fill="currentColor"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
+                />
+                <path
+                  d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"
+                />
+              </svg>
+            </span>
+          </div>
+          <div
+            class="emotion-28 emotion-29"
+          >
+            editor.editorToolbar.statusInfoTooltipDraft
+          </div>
+        </div>
+      </div>
+      <div
+        class="emotion-30 emotion-31"
+      />
+    </div>
+    <div
+      class="emotion-32 emotion-33"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EditorToolbar should render with status=pending_publish,useOpenAuthoring=false 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1),0 2px 54px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-6 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-8 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
+}
+
+.emotion-10 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-14 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
+}
+
+@media (max-width: 1200px) {
+  .emotion-14 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-14[disabled] {
+  background-color: #eff0f4;
+  color: #798291;
+  cursor: default;
+}
+
+.emotion-17 {
+  position: relative;
+  font-size: 14px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin: 0 10px;
+}
+
+.emotion-17 .e1jeq5dr0 {
+  color: #17a2b8;
+}
+
+.emotion-19 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  display: block;
+  padding-left: 20px;
+  padding-right: 40px;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-color: #ddf5f9;
+  color: #17a2b8;
+}
+
+.emotion-19:after {
+  color: #fff;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-radius: 2px;
+  border-top: 6px solid currentColor;
+  border-bottom: 0;
+  content: '';
+  display: block;
+  position: absolute;
+  top: 16px;
+  right: 10px;
+  color: currentColor;
+}
+
+@media (max-width: 1200px) {
+  .emotion-19 {
+    padding-left: 10px;
+  }
+}
+
+.emotion-21 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #fcefea;
+  color: #D60032;
+}
+
+@media (max-width: 1200px) {
+  .emotion-21 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-23 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+.emotion-25 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-left-width: 1px;
+  padding: 0 7px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+  >
+    <mock-link
+      class="emotion-2 emotion-3"
+      to=""
+    >
+      <div
+        class="emotion-4 emotion-5"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-8 emotion-9"
+        >
+          editor.editorToolbar.changesSaved
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      <div
+        class="emotion-12 emotion-13"
+      >
+        <button
+          class="emotion-14 emotion-15"
+          disabled=""
+        >
+          editor.editorToolbar.save
+        </button>
+        <div
+          class="emotion-16 emotion-17 emotion-18"
+        >
+          <span
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="emotion-19 emotion-20"
+            role="button"
+            tabindex="0"
+          >
+            editor.editorToolbar.status
+          </span>
+        </div>
+        <button
+          class="emotion-21 emotion-22"
+        >
+          editor.editorToolbar.deletePublishedEntry
+        </button>
+      </div>
+      <div
+        class="emotion-23 emotion-24"
+      />
+    </div>
+    <div
+      class="emotion-25 emotion-26"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EditorToolbar should render with status=pending_publish,useOpenAuthoring=true 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1),0 2px 54px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-6 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-8 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
+}
+
+.emotion-10 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-14 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
+}
+
+@media (max-width: 1200px) {
+  .emotion-14 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-14[disabled] {
+  background-color: #eff0f4;
+  color: #798291;
+  cursor: default;
+}
+
+.emotion-17 {
+  position: relative;
+  font-size: 14px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin: 0 10px;
+}
+
+.emotion-17 .emotion-25 {
+  color: #17a2b8;
+}
+
+.emotion-19 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  display: block;
+  padding-left: 20px;
+  padding-right: 40px;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-color: #ddf5f9;
+  color: #17a2b8;
+}
+
+.emotion-19:after {
+  color: #fff;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-radius: 2px;
+  border-top: 6px solid currentColor;
+  border-bottom: 0;
+  content: '';
+  display: block;
+  position: absolute;
+  top: 16px;
+  right: 10px;
+  color: currentColor;
+}
+
+@media (max-width: 1200px) {
+  .emotion-19 {
+    padding-left: 10px;
+  }
+}
+
+.emotion-21 {
+  position: relative;
+}
+
+.emotion-23 {
+  position: relative;
+  display: inline-block;
+}
+
+.emotion-23:hover+.e1d2l9mo26 {
+  visibility: visible;
+  opacity: 0.9;
+}
+
+.emotion-26 {
+  display: inline-block;
+  line-height: 0;
+  width: 18px;
+  height: 18px;
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
+
+.emotion-26 path:not(.no-fill),
+.emotion-26 circle:not(.no-fill),
+.emotion-26 polygon:not(.no-fill),
+.emotion-26 rect:not(.no-fill) {
+  fill: currentColor;
+}
+
+.emotion-26 path.clipped {
+  fill: transparent;
+}
+
+.emotion-26 svg {
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+.emotion-30 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-left-width: 1px;
+  padding: 0 7px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+  >
+    <mock-link
+      class="emotion-2 emotion-3"
+      to=""
+    >
+      <div
+        class="emotion-4 emotion-5"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-8 emotion-9"
+        >
+          editor.editorToolbar.changesSaved
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      <div
+        class="emotion-12 emotion-13"
+      >
+        <button
+          class="emotion-14 emotion-15"
+          disabled=""
+        >
+          editor.editorToolbar.save
+        </button>
+        <div
+          class="emotion-16 emotion-17 emotion-18"
+        >
+          <span
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="emotion-19 emotion-20"
+            role="button"
+            tabindex="0"
+          >
+            editor.editorToolbar.status
+          </span>
+        </div>
+        <div
+          class="emotion-21 emotion-22"
+        >
+          <div
+            class="emotion-23 emotion-24"
+          >
+            <span
+              class="tooltip emotion-25 emotion-26 emotion-27"
+            >
+              <svg
+                class="bi bi-info-circle"
+                fill="currentColor"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
+                />
+                <path
+                  d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="emotion-28 emotion-29"
+      />
+    </div>
+    <div
+      class="emotion-30 emotion-31"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring=false 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1),0 2px 54px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-6 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-8 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
+}
+
+.emotion-10 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-14 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
+}
+
+@media (max-width: 1200px) {
+  .emotion-14 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-14[disabled] {
+  background-color: #eff0f4;
+  color: #798291;
+  cursor: default;
+}
+
+.emotion-17 {
+  position: relative;
+  font-size: 14px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin: 0 10px;
+}
+
+.emotion-17 .e1jeq5dr0 {
+  color: #17a2b8;
+}
+
+.emotion-19 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  display: block;
+  padding-left: 20px;
+  padding-right: 40px;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-color: #ddf5f9;
+  color: #17a2b8;
+}
+
+.emotion-19:after {
+  color: #fff;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-radius: 2px;
+  border-top: 6px solid currentColor;
+  border-bottom: 0;
+  content: '';
+  display: block;
+  position: absolute;
+  top: 16px;
+  right: 10px;
+  color: currentColor;
+}
+
+@media (max-width: 1200px) {
+  .emotion-19 {
+    padding-left: 10px;
+  }
+}
+
+.emotion-21 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #fcefea;
+  color: #D60032;
+}
+
+@media (max-width: 1200px) {
+  .emotion-21 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-23 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+.emotion-25 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-left-width: 1px;
+  padding: 0 7px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+  >
+    <mock-link
+      class="emotion-2 emotion-3"
+      to=""
+    >
+      <div
+        class="emotion-4 emotion-5"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-8 emotion-9"
+        >
+          editor.editorToolbar.changesSaved
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      <div
+        class="emotion-12 emotion-13"
+      >
+        <button
+          class="emotion-14 emotion-15"
+          disabled=""
+        >
+          editor.editorToolbar.save
+        </button>
+        <div
+          class="emotion-16 emotion-17 emotion-18"
+        >
+          <span
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="emotion-19 emotion-20"
+            role="button"
+            tabindex="0"
+          >
+            editor.editorToolbar.status
+          </span>
+        </div>
+        <button
+          class="emotion-21 emotion-22"
+        >
+          editor.editorToolbar.deletePublishedEntry
+        </button>
+      </div>
+      <div
+        class="emotion-23 emotion-24"
+      />
+    </div>
+    <div
+      class="emotion-25 emotion-26"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring=true 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1),0 2px 54px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-6 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-8 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
+}
+
+.emotion-10 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-14 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
+}
+
+@media (max-width: 1200px) {
+  .emotion-14 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-14[disabled] {
+  background-color: #eff0f4;
+  color: #798291;
+  cursor: default;
+}
+
+.emotion-17 {
+  position: relative;
+  font-size: 14px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin: 0 10px;
+}
+
+.emotion-17 .emotion-25 {
+  color: #17a2b8;
+}
+
+.emotion-19 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  display: block;
+  padding-left: 20px;
+  padding-right: 40px;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-color: #ddf5f9;
+  color: #17a2b8;
+}
+
+.emotion-19:after {
+  color: #fff;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-radius: 2px;
+  border-top: 6px solid currentColor;
+  border-bottom: 0;
+  content: '';
+  display: block;
+  position: absolute;
+  top: 16px;
+  right: 10px;
+  color: currentColor;
+}
+
+@media (max-width: 1200px) {
+  .emotion-19 {
+    padding-left: 10px;
+  }
+}
+
+.emotion-21 {
+  position: relative;
+}
+
+.emotion-23 {
+  position: relative;
+  display: inline-block;
+}
+
+.emotion-23:hover+.emotion-29 {
+  visibility: visible;
+  opacity: 0.9;
+}
+
+.emotion-26 {
+  display: inline-block;
+  line-height: 0;
+  width: 18px;
+  height: 18px;
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
+
+.emotion-26 path:not(.no-fill),
+.emotion-26 circle:not(.no-fill),
+.emotion-26 polygon:not(.no-fill),
+.emotion-26 rect:not(.no-fill) {
+  fill: currentColor;
+}
+
+.emotion-26 path.clipped {
+  fill: transparent;
+}
+
+.emotion-26 svg {
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-28 {
+  visibility: hidden;
+  width: 321px;
+  background-color: #555;
+  color: #fff;
+  text-align: unset;
+  border-radius: 6px;
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  top: 145%;
+  left: 50%;
+  margin-left: -320px;
+  opacity: 0;
+  -webkit-transition: opacity 0.3s;
+  transition: opacity 0.3s;
+}
+
+.emotion-30 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+.emotion-32 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-left-width: 1px;
+  padding: 0 7px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+  >
+    <mock-link
+      class="emotion-2 emotion-3"
+      to=""
+    >
+      <div
+        class="emotion-4 emotion-5"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-8 emotion-9"
+        >
+          editor.editorToolbar.changesSaved
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      <div
+        class="emotion-12 emotion-13"
+      >
+        <button
+          class="emotion-14 emotion-15"
+          disabled=""
+        >
+          editor.editorToolbar.save
+        </button>
+        <div
+          class="emotion-16 emotion-17 emotion-18"
+        >
+          <span
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="emotion-19 emotion-20"
+            role="button"
+            tabindex="0"
+          >
+            editor.editorToolbar.status
+          </span>
+        </div>
+        <div
+          class="emotion-21 emotion-22"
+        >
+          <div
+            class="emotion-23 emotion-24"
+          >
+            <span
+              class="tooltip emotion-25 emotion-26 emotion-27"
+            >
+              <svg
+                class="bi bi-info-circle"
+                fill="currentColor"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
+                />
+                <path
+                  d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"
+                />
+              </svg>
+            </span>
+          </div>
+          <div
+            class="emotion-28 emotion-29"
+          >
+            editor.editorToolbar.statusInfoTooltipInReview
+          </div>
+        </div>
+      </div>
+      <div
+        class="emotion-30 emotion-31"
+      />
+    </div>
+    <div
+      class="emotion-32 emotion-33"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EditorToolbar should render with workflow controls hasUnpublishedChanges=false,isNewEntry=false,isModification=false,useOpenAuthoring=false 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1),0 2px 54px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-6 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-8 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
+}
+
+.emotion-10 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-14 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
+}
+
+@media (max-width: 1200px) {
+  .emotion-14 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-14[disabled] {
+  background-color: #eff0f4;
+  color: #798291;
+  cursor: default;
+}
+
+.emotion-16 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #fcefea;
+  color: #D60032;
+}
+
+@media (max-width: 1200px) {
+  .emotion-16 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-18 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+.emotion-20 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-left-width: 1px;
+  padding: 0 7px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+  >
+    <mock-link
+      class="emotion-2 emotion-3"
+      to=""
+    >
+      <div
+        class="emotion-4 emotion-5"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-8 emotion-9"
+        >
+          editor.editorToolbar.changesSaved
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      <div
+        class="emotion-12 emotion-13"
+      >
+        <button
+          class="emotion-14 emotion-15"
+          disabled=""
+        >
+          editor.editorToolbar.save
+        </button>
+        <button
+          class="emotion-16 emotion-17"
+        >
+          editor.editorToolbar.deletePublishedEntry
+        </button>
+      </div>
+      <div
+        class="emotion-18 emotion-19"
+      />
+    </div>
+    <div
+      class="emotion-20 emotion-21"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EditorToolbar should render with workflow controls hasUnpublishedChanges=false,isNewEntry=false,isModification=false,useOpenAuthoring=true 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1),0 2px 54px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-6 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-8 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
+}
+
+.emotion-10 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-14 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
+}
+
+@media (max-width: 1200px) {
+  .emotion-14 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-14[disabled] {
+  background-color: #eff0f4;
+  color: #798291;
+  cursor: default;
+}
+
+.emotion-16 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+.emotion-18 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-left-width: 1px;
+  padding: 0 7px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+  >
+    <mock-link
+      class="emotion-2 emotion-3"
+      to=""
+    >
+      <div
+        class="emotion-4 emotion-5"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-8 emotion-9"
+        >
+          editor.editorToolbar.changesSaved
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      <div
+        class="emotion-12 emotion-13"
+      >
+        <button
+          class="emotion-14 emotion-15"
+          disabled=""
+        >
+          editor.editorToolbar.save
+        </button>
+      </div>
+      <div
+        class="emotion-16 emotion-17"
+      />
+    </div>
+    <div
+      class="emotion-18 emotion-19"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EditorToolbar should render with workflow controls hasUnpublishedChanges=true,isNewEntry=false,isModification=false,useOpenAuthoring=false 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1),0 2px 54px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-6 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-8 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
+}
+
+.emotion-10 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-14 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
+}
+
+@media (max-width: 1200px) {
+  .emotion-14 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-14[disabled] {
+  background-color: #eff0f4;
+  color: #798291;
+  cursor: default;
+}
+
+.emotion-16 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #fcefea;
+  color: #D60032;
+}
+
+@media (max-width: 1200px) {
+  .emotion-16 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-18 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+.emotion-20 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-left-width: 1px;
+  padding: 0 7px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+  >
+    <mock-link
+      class="emotion-2 emotion-3"
+      to=""
+    >
+      <div
+        class="emotion-4 emotion-5"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-8 emotion-9"
+        >
+          editor.editorToolbar.changesSaved
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      <div
+        class="emotion-12 emotion-13"
+      >
+        <button
+          class="emotion-14 emotion-15"
+          disabled=""
+        >
+          editor.editorToolbar.save
+        </button>
+        <button
+          class="emotion-16 emotion-17"
+        >
+          editor.editorToolbar.deleteUnpublishedEntry
+        </button>
+      </div>
+      <div
+        class="emotion-18 emotion-19"
+      />
+    </div>
+    <div
+      class="emotion-20 emotion-21"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EditorToolbar should render with workflow controls hasUnpublishedChanges=true,isNewEntry=false,isModification=false,useOpenAuthoring=true 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1),0 2px 54px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-6 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-8 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
+}
+
+.emotion-10 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-14 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
+}
+
+@media (max-width: 1200px) {
+  .emotion-14 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-14[disabled] {
+  background-color: #eff0f4;
+  color: #798291;
+  cursor: default;
+}
+
+.emotion-16 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #fcefea;
+  color: #D60032;
+}
+
+@media (max-width: 1200px) {
+  .emotion-16 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-18 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+.emotion-20 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-left-width: 1px;
+  padding: 0 7px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+  >
+    <mock-link
+      class="emotion-2 emotion-3"
+      to=""
+    >
+      <div
+        class="emotion-4 emotion-5"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-8 emotion-9"
+        >
+          editor.editorToolbar.changesSaved
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      <div
+        class="emotion-12 emotion-13"
+      >
+        <button
+          class="emotion-14 emotion-15"
+          disabled=""
+        >
+          editor.editorToolbar.save
+        </button>
+        <button
+          class="emotion-16 emotion-17"
+        >
+          editor.editorToolbar.deleteUnpublishedEntry
+        </button>
+      </div>
+      <div
+        class="emotion-18 emotion-19"
+      />
+    </div>
+    <div
+      class="emotion-20 emotion-21"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EditorToolbar should render with workflow controls hasUnpublishedChanges=true,isNewEntry=false,isModification=true,useOpenAuthoring=false 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1),0 2px 54px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-6 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-8 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
+}
+
+.emotion-10 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-14 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
+}
+
+@media (max-width: 1200px) {
+  .emotion-14 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-14[disabled] {
+  background-color: #eff0f4;
+  color: #798291;
+  cursor: default;
+}
+
+.emotion-16 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #fcefea;
+  color: #D60032;
+}
+
+@media (max-width: 1200px) {
+  .emotion-16 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-18 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+.emotion-20 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-left-width: 1px;
+  padding: 0 7px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+  >
+    <mock-link
+      class="emotion-2 emotion-3"
+      to=""
+    >
+      <div
+        class="emotion-4 emotion-5"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-8 emotion-9"
+        >
+          editor.editorToolbar.changesSaved
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      <div
+        class="emotion-12 emotion-13"
+      >
+        <button
+          class="emotion-14 emotion-15"
+          disabled=""
+        >
+          editor.editorToolbar.save
+        </button>
+        <button
+          class="emotion-16 emotion-17"
+        >
+          editor.editorToolbar.deleteUnpublishedChanges
+        </button>
+      </div>
+      <div
+        class="emotion-18 emotion-19"
+      />
+    </div>
+    <div
+      class="emotion-20 emotion-21"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EditorToolbar should render with workflow controls hasUnpublishedChanges=true,isNewEntry=false,isModification=true,useOpenAuthoring=true 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1),0 2px 54px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-6 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-8 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
+}
+
+.emotion-10 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-14 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
+}
+
+@media (max-width: 1200px) {
+  .emotion-14 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-14[disabled] {
+  background-color: #eff0f4;
+  color: #798291;
+  cursor: default;
+}
+
+.emotion-16 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #fcefea;
+  color: #D60032;
+}
+
+@media (max-width: 1200px) {
+  .emotion-16 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-18 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+.emotion-20 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-left-width: 1px;
+  padding: 0 7px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+  >
+    <mock-link
+      class="emotion-2 emotion-3"
+      to=""
+    >
+      <div
+        class="emotion-4 emotion-5"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-8 emotion-9"
+        >
+          editor.editorToolbar.changesSaved
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      <div
+        class="emotion-12 emotion-13"
+      >
+        <button
+          class="emotion-14 emotion-15"
+          disabled=""
+        >
+          editor.editorToolbar.save
+        </button>
+        <button
+          class="emotion-16 emotion-17"
+        >
+          editor.editorToolbar.deleteUnpublishedChanges
+        </button>
+      </div>
+      <div
+        class="emotion-18 emotion-19"
+      />
+    </div>
+    <div
+      class="emotion-20 emotion-21"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;