From da4711581ada825deebb4a6645addbcf23b3a495 Mon Sep 17 00:00:00 2001
From: Adam Butterworth <abutterworth@edx.org>
Date: Fri, 13 Mar 2020 14:55:48 -0400
Subject: [PATCH] Responsive instructor toolbar and progressive disclosure
 (#29)

TNL-7072
---
 src/courseware/InstructorToolbar.jsx | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/courseware/InstructorToolbar.jsx b/src/courseware/InstructorToolbar.jsx
index b6a34d8a..a682e32c 100644
--- a/src/courseware/InstructorToolbar.jsx
+++ b/src/courseware/InstructorToolbar.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { Collapsible } from '@edx/paragon';
 
 function InstructorToolbar(props) {
   // TODO: Only render this toolbar if the user is course staff
@@ -10,11 +11,24 @@ function InstructorToolbar(props) {
 
   return (
     <div className="bg-primary text-light">
-      <div className="container-fluid py-3 d-flex justify-content-end align-items-center">
-        <div>
-          <p className="mb-0 mr-5">
-          You are currently previewing the new learning sequence experience. This preview is to allow for early content testing, especially for custom content blocks, with the goal of ensuring it renders as expected in the next experience. You can learn more through the following <a className="text-white" style={{ textDecoration: 'underline' }} href="https://partners.edx.org/announcements/author-preview-learning-sequence-experience-update" target="blank" rel="noopener">Partner Portal post</a>.  Please report any issues or provide <a className="text-white" style={{ textDecoration: 'underline' }} target="blank" rel="noopener" href="https://forms.gle/R6jMYJNTCj1vgC1D6">feedback using the linked form</a>.
-          </p>
+      <div className="container-fluid py-3 d-md-flex justify-content-end align-items-center">
+        <div className="flex-grow-1">
+          <Collapsible.Advanced className="mr-5 mb-md-0">
+              You are currently previewing the new learning sequence experience.
+            <Collapsible.Trigger className="d-inline-block ml-2" style={{ cursor: 'pointer' }}>
+              <Collapsible.Visible whenClosed>
+                <span style={{ borderBottom: 'solid 1px white' }}>More info</span> &rarr;
+              </Collapsible.Visible>
+            </Collapsible.Trigger>
+            <Collapsible.Body>
+                This preview is to allow for early content testing, especially for custom content blocks, with the goal of ensuring it renders as expected in the next experience. You can learn more through the following <a className="text-white" style={{ textDecoration: 'underline' }} href="https://partners.edx.org/announcements/author-preview-learning-sequence-experience-update" target="blank" rel="noopener">Partner Portal post</a>.  Please report any issues or provide <a className="text-white" style={{ textDecoration: 'underline' }} target="blank" rel="noopener" href="https://forms.gle/R6jMYJNTCj1vgC1D6">feedback using the linked form</a>.
+              <Collapsible.Trigger className="d-inline-block ml-2" style={{ cursor: 'pointer' }}>
+                <Collapsible.Visible whenOpen>
+                  <span style={{ borderBottom: 'solid 1px white' }}>Close</span> &times;
+                </Collapsible.Visible>
+              </Collapsible.Trigger>
+            </Collapsible.Body>
+          </Collapsible.Advanced>
         </div>
         <div className="flex-shrink-0">
           <a className="btn d-block btn-outline-light" href={props.activeUnitLmsWebUrl}>View unit in the existing experience</a>