Merge pull request #21 from OpenPecha/feature/collapsible-studio-course-outline-help-sidebar

feat: make studio course outline help sidebar collapsible with header

Author: 10kalden

src/course-outline/outline-sidebar/OutlineSidebar.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Hyperlink } from '@openedx/paragon';
+import { Collapsible, Hyperlink, Icon } from '@openedx/paragon';
+import { OpenInNew } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { HelpSidebar } from '../../generic/help-sidebar';
 import { useHelpUrls } from '../../help-urls/hooks';
 import { getFormattedSidebarMessages } from './utils';
+import messages from './messages';
 
 const OutlineSideBar = ({ courseId }) => {
   const intl = useIntl();
@@ -28,32 +30,38 @@ const OutlineSideBar = ({ courseId }) => {
     <HelpSidebar
       courseId={courseId}
       showOtherSettings={false}
-      className="outline-sidebar mt-4"
+      className="outline-sidebar"
       data-testid="outline-sidebar"
     >
-      {sidebarMessages.map(({ title, descriptions, link }, index) => {
-        const isLastSection = index === sidebarMessages.length - 1;
-
-        return (
-          <div className="outline-sidebar-section" key={title}>
-            <h4 className="help-sidebar-about-title">{title}</h4>
+      <div className="outline-sidebar-header">
+        <h3 className="outline-sidebar-header-title m-0">{intl.formatMessage(messages.sidebar_header)}</h3>
+      </div>
+      <div className="outline-sidebar-sections">
+        {sidebarMessages.map(({ title, descriptions, link }) => (
+          <Collapsible
+            key={title}
+            className="outline-sidebar-section border-0"
+            styling="card-lg"
+            unmountOnExit={false}
+            title={<h4 className="help-sidebar-about-title m-0">{title}</h4>}
+          >
             {descriptions.map((description) => (
               <p className="help-sidebar-about-descriptions" key={description}>{description}</p>
             ))}
             {Boolean(link) && Boolean(link.href) && (
               <Hyperlink
-                className="small"
+                className="outline-sidebar-section-link small d-inline-flex align-items-center"
                 destination={link.href}
                 target="_blank"
                 showLaunchIcon={false}
               >
                 {link.text}
+                <Icon src={OpenInNew} className="outline-sidebar-section-link-icon" />
               </Hyperlink>
             )}
-            {!isLastSection && <hr className="my-3.5" />}
-          </div>
-        );
-      })}
+          </Collapsible>
+        ))}
+      </div>
     </HelpSidebar>
   );
 };

src/course-outline/outline-sidebar/messages.js

@@ -1,6 +1,10 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
+  sidebar_header: {
+    id: 'course-authoring.course-outline.sidebar.header',
+    defaultMessage: 'Need help with your course?',
+  },
   section_1_title: {
     id: 'course-authoring.course-outline.sidebar.section-1.title',
     defaultMessage: 'Creating your course organization',

src/generic/help-sidebar/HelpSidebar.scss

@@ -32,3 +32,109 @@
     margin-bottom: .5rem;
   }
 }
+
+.outline-sidebar {
+  // Keep the header at the very top of the sidebar column (aligned with the
+  // StatusBar on the content side).
+  margin-top: 0;
+}
+
+.outline-sidebar .outline-sidebar-header {
+  // Offset the header so the FIRST collapsible card lines up with the top of
+  // the "Optimize your course with AI" box on the content side (the heading
+  // sits above it).
+  margin-top: 2.25rem;
+
+  .outline-sidebar-header-title {
+    font: normal var(--pgn-typography-font-weight-bold) 1.375rem/1.75rem var(--pgn-typography-font-family-base);
+    color: var(--pgn-color-info-500);
+  }
+}
+
+.outline-sidebar .outline-sidebar-sections {
+  // Align the first collapsible with the top border of the section cards on
+  // the content side.
+  margin-top: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: .75rem;
+}
+
+.outline-sidebar .outline-sidebar-section.collapsible-card-lg {
+  border: 1px solid var(--pgn-color-light-400) !important;
+  border-radius: .5rem;
+  background: var(--pgn-color-white);
+  overflow: hidden;
+  transition: border-color .15s ease, box-shadow .15s ease;
+
+  &:hover {
+    border-color: var(--pgn-color-info-300) !important;
+    box-shadow: 0 .125rem .5rem rgba(15, 14, 40, .06);
+  }
+
+  &.is-open {
+    border-color: var(--pgn-color-info-300) !important;
+    box-shadow: 0 .125rem .75rem rgba(15, 14, 40, .08);
+  }
+
+  .collapsible-trigger {
+    justify-content: space-between;
+    align-items: center;
+    text-decoration: none;
+    color: var(--pgn-color-black);
+    padding: .875rem 1rem;
+    border: 0;
+    cursor: pointer;
+    transition: background .15s ease;
+
+    &:hover {
+      background: var(--pgn-color-light-200);
+    }
+  }
+
+  .help-sidebar-about-title {
+    font: normal var(--pgn-typography-font-weight-bold) .9375rem/1.375rem var(--pgn-typography-font-family-base);
+    color: var(--pgn-color-black);
+  }
+
+  .collapsible-icon {
+    color: var(--pgn-color-gray-500);
+    margin-left: .5rem;
+    flex-shrink: 0;
+  }
+
+  &.is-open .collapsible-icon {
+    color: var(--pgn-color-info-500);
+  }
+
+  .collapsible-body {
+    padding: 0 1rem 1rem;
+  }
+
+  .help-sidebar-about-descriptions {
+    font: normal var(--pgn-typography-font-weight-normal) .875rem/1.5rem var(--pgn-typography-font-family-base);
+    color: $text-color-base;
+    margin-bottom: .75rem;
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+
+  .outline-sidebar-section-link {
+    margin-top: .75rem;
+    color: var(--pgn-color-info-500);
+    font-weight: var(--pgn-typography-font-weight-bold);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    .outline-sidebar-section-link-icon {
+      width: 1rem;
+      height: 1rem;
+      margin-left: .25rem;
+    }
+  }
+}