add trailing icon variant for button (#12714), UI updates/ launch lessons modals (#12727)

services/QuillLMS/app/assets/stylesheets/pages/index.scss

@@ -63,7 +63,6 @@
 @import 'premium_hub';
 @import 'premium_page.scss';
 @import 'press.scss';
-@import 'preview_or_launch_modal.scss';
 @import 'privacy.scss';
 @import 'profile.scss';
 @import 'progress_reports';

services/QuillLMS/app/assets/stylesheets/shared/modals.scss

@@ -500,7 +500,9 @@
 .enable-more-than-ten-labels-modal,
 .link-provider-account-modal,
 .canvas-modal,
-.import-provider-classrooms-modal {
+.import-provider-classrooms-modal,
+.preview-or-launch-modal,
+.name-lesson-modal {
   max-width: 636px;
   width: 100%;
   overflow: visible;
@@ -531,12 +533,28 @@
     }
   }
   .form-buttons, .buttons {
-    .quill-button:first-of-type {
-      margin-right: 8px;
+    .quill-button {
+      margin-left: 8px;
     }
   }
 }
 
+// need these z-indexes due to button behavior/styling in lesson customization
+
+.name-lesson-modal-background {
+  z-index: 100;
+}
+
+.name-lesson-modal {
+  z-index: 101;
+  .title {
+    margin-top: 0 !important;
+  }
+  .input-container {
+    margin-bottom: 24px;
+  }
+}
+
 .share-activity-pack-modal {
   bottom: 0;
   margin-bottom: 0;

services/QuillLMS/client/app/bundles/Lessons/components/customize/editionNamingModal.tsx

@@ -1,20 +1,26 @@
 import * as React from 'react'
+import { Input } from '../../../Shared'
 
-const EditionNamingModal: React.SFC<any> = (props) => {
+const EditionNamingModal = ({ deleteNewEdition, updateName, name, saveNameAndGoToCustomize }) => {
   return (
-    <div className="name-modal-container">
-      <div className="name-modal-background" />
-      <div className="name-modal">
-        <button className="interactive-wrapper focus-on-light exit" onClick={props.deleteNewEdition} type="button"><img alt="Close icon" src="https://assets.quill.org/images/icons/CloseIcon.svg" /></button>
-        <img alt="" className="illustration" src="https://assets.quill.org/images/illustrations/edition-published.svg" />
-        <h1>Name this edition of the lesson</h1>
+    <div className="modal-container">
+      <div className="modal-background name-lesson-modal-background" />
+      <div className="name-lesson-modal quill-modal modal-body">
+        <h1 className="title">Name this edition of the lesson</h1>
         <p className="explanation">You will see the name of your edition when you launch the lesson and it will help you identify this edition from the rest of the editions.</p>
-        <div className="name-section">
-          <p>Edition Name</p>
-          <input onChange={props.updateName} placeholder="Enter a name for your edition" value={props.name} />
+        <Input
+          className="bordered large"
+          handleChange={updateName}
+          id="edition-name"
+          label="Edition name"
+          placeholder="Enter a name for your edition"
+          type="text"
+          value={name}
+        />
+        <div className="form-buttons">
+          <button className="quill-button outlined medium green focus-on-light" onClick={deleteNewEdition}>Cancel customization</button>
+          <button className="quill-button contained medium green focus-on-light" onClick={saveNameAndGoToCustomize}>Start customizing</button>
         </div>
-        <button className={props.buttonClassName} onClick={props.saveNameAndGoToCustomize}>Start Customizing</button>
-        <span className="cancel" onClick={props.deleteNewEdition}>Cancel Customization</span>
       </div>
     </div>
   )

services/QuillLMS/client/app/bundles/Lessons/styles/components/_customize.scss

@@ -1,5 +1,4 @@
 @import 'customize/_choose_edition.scss';
-@import 'customize/_name_modal.scss';
 @import 'customize/_name_and_sample_question_modal.scss';
 @import 'customize/_publish_success_modal.scss';
 @import 'customize/_customize_edition.scss';

services/QuillLMS/client/app/bundles/Lessons/styles/style.scss

@@ -1,4 +1,5 @@
 @import '../../../../../app/assets/stylesheets/variables.scss';
+@import '../../../../../app/assets/stylesheets/shared/modals.scss';
 @import 'variables';
 @import "components/student-nav";
 @import "components/student-container";

services/QuillLMS/client/app/bundles/Staff/components/styleGuide/__tests__/__snapshots__/buttons.test.tsx.snap

@@ -378,7 +378,7 @@ exports[`Buttons it should render 1`] = `
           <p
             class="option-label"
           >
-            With Icon
+            With Icon (Leading)
           </p>
           <div
             class="quill-button-container states"
@@ -408,6 +408,42 @@ exports[`Buttons it should render 1`] = `
             quill-button small contained icon
           </p>
         </div>
+        <div
+          class="option-container"
+        >
+          <p
+            class="option-label"
+          >
+            With Icon (Trailing)
+          </p>
+          <div
+            class="quill-button-container states"
+          >
+            <button
+              class="quill-button focus-on-light small contained icon"
+            >
+              Button
+              <img
+                alt=""
+                src="https://assets.quill.org/images/icons/xs/star-white.svg"
+              />
+            </button>
+            <button
+              class="quill-button focus-on-light small outlined icon"
+            >
+              Button
+              <img
+                alt=""
+                src="https://assets.quill.org/images/icons/xs/star-green.svg"
+              />
+            </button>
+          </div>
+          <p
+            class="option-label"
+          >
+            quill-button small contained icon
+          </p>
+        </div>
       </div>
     </div>
   </div>

services/QuillLMS/client/app/bundles/Staff/components/styleGuide/buttons.tsx

@@ -101,7 +101,7 @@ const Buttons = () => {
       <div className="variations-container">
         <div className="options-container">
           <div className="option-container">
-            <p className="option-label">With Icon</p>
+            <p className="option-label">With Icon (Leading)</p>
             <div className="quill-button-container states">
               <button className="quill-button focus-on-light small contained icon">
                 <img alt="" src={WHITE_STAR_ICON_SRC} />
@@ -114,6 +114,20 @@ const Buttons = () => {
             </div>
             <p className="option-label">quill-button small contained icon</p>
           </div>
+          <div className="option-container">
+            <p className="option-label">With Icon (Trailing)</p>
+            <div className="quill-button-container states">
+              <button className="quill-button focus-on-light small contained icon">
+                {BUTTON}
+                <img alt="" src={WHITE_STAR_ICON_SRC} />
+              </button>
+              <button className="quill-button focus-on-light small outlined icon">
+                {BUTTON}
+                <img alt="" src={GREEN_STAR_ICON_SRC} />
+              </button>
+            </div>
+            <p className="option-label">quill-button small contained icon</p>
+          </div>
         </div>
       </div>
     </div>

services/QuillLMS/client/app/bundles/Teacher/components/shared/__tests__/__snapshots__/preview_or_launch_modal.test.tsx.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PreviewOrLaunchModal component should render 1`] = `
+<div
+  className="modal-container"
+>
+  <div
+    className="modal-background"
+  />
+  <div
+    className="preview-or-launch-modal quill-modal modal-body"
+  >
+    <h1
+      className="title"
+    >
+      Would you like to preview this lesson?
+    </h1>
+    <p>
+      You can either preview this lesson or launch it. If you are ready to use this lesson with your students now, launch it.
+    </p>
+    <div
+      className="form-buttons"
+    >
+      <a
+        className="quill-button contained medium green focus-on-light"
+        href="/preview_lesson/3q432432"
+      >
+        Preview Lesson
+      </a>
+      <a
+        className="quill-button contained medium green focus-on-light"
+        href="/teachers/classroom_units/32323/launch_lesson/3q432432"
+      >
+        Launch Lesson
+      </a>
+      <button
+        className="quill-button outlined medium grey focus-on-light"
+        onClick={[MockFunction]}
+        type="button"
+      >
+        Cancel
+      </button>
+    </div>
+  </div>
+</div>
+`;