feat: create section and subsection in library (#2013)

Adds create section and subsection buttons in sidebar.

src/generic/block-type-utils/constants.ts

@@ -6,7 +6,6 @@ import {
   ContentPaste as ContentPasteIcon,
   Edit as EditIcon,
   EditNote as EditNoteIcon,
-  CalendarViewDay,
   HelpOutline as HelpOutlineIcon,
   LibraryAdd as LibraryIcon,
   Lock as LockIcon,
@@ -15,6 +14,9 @@ import {
   TextFields as TextFieldsIcon,
   VideoCamera as VideoCameraIcon,
   Folder,
+  ViewCarousel,
+  ViewDay,
+  WidthWide,
 } from '@openedx/paragon/icons';
 import NewsstandIcon from '../NewsstandIcon';
 
@@ -36,7 +38,9 @@ export const COMPONENT_TYPES = {
 export const UNIT_TYPE_ICONS_MAP: Record<string, React.ComponentType> = {
   video: VideoCameraIcon,
   other: BookOpenIcon,
-  vertical: CalendarViewDay,
+  vertical: ViewDay,
+  sequential: WidthWide,
+  chapter: ViewCarousel,
   problem: EditIcon,
   lock: LockIcon,
 };
@@ -57,8 +61,10 @@ export const COMPONENT_TYPE_ICON_MAP: Record<string, React.ComponentType> = {
 export const STRUCTURAL_TYPE_ICONS: Record<string, React.ComponentType> = {
   vertical: UNIT_TYPE_ICONS_MAP.vertical,
   unit: UNIT_TYPE_ICONS_MAP.vertical,
-  sequential: Folder,
-  chapter: Folder,
+  sequential: UNIT_TYPE_ICONS_MAP.sequential,
+  subsection: UNIT_TYPE_ICONS_MAP.sequential,
+  chapter: UNIT_TYPE_ICONS_MAP.chapter,
+  section: UNIT_TYPE_ICONS_MAP.chapter,
   collection: Folder,
   libraryContent: Folder,
   paste: ContentPasteIcon,
@@ -75,8 +81,10 @@ export const COMPONENT_TYPE_STYLE_COLOR_MAP = {
   [COMPONENT_TYPES.dragAndDrop]: 'component-style-default',
   vertical: 'component-style-vertical',
   unit: 'component-style-vertical',
-  sequential: 'component-style-default',
-  chapter: 'component-style-default',
+  sequential: 'component-style-sequential',
+  subsection: 'component-style-sequential',
+  chapter: 'component-style-chapter',
+  section: 'component-style-chapter',
   collection: 'component-style-collection',
   other: 'component-style-other',
 };

src/generic/block-type-utils/index.scss

@@ -123,6 +123,56 @@
   }
 }
 
+.component-style-sequential {
+  background-color: #EA3E3E;
+
+  .pgn__icon:not(.btn-icon-before) {
+    color: white;
+  }
+
+  .btn-icon {
+    &:hover, &:active, &:focus {
+      background-color: darken(#EA3E3E, 15%);
+    }
+  }
+
+  .btn {
+    background-color: lighten(#0B8E77, 10%);
+    border: 0;
+
+    &:hover, &:active, &:focus {
+      background-color: lighten(#0B8E77, 20%);
+      border: 1px solid $primary;
+      margin: -1px;
+    }
+  }
+}
+
+.component-style-chapter {
+  background-color: #45009E;
+
+  .pgn__icon:not(.btn-icon-before) {
+    color: white;
+  }
+
+  .btn-icon {
+    &:hover, &:active, &:focus {
+      background-color: darken(#45009E, 15%);
+    }
+  }
+
+  .btn {
+    background-color: lighten(#0B8E77, 10%);
+    border: 0;
+
+    &:hover, &:active, &:focus {
+      background-color: lighten(#0B8E77, 20%);
+      border: 1px solid $primary;
+      margin: -1px;
+    }
+  }
+}
+
 .component-style-other {
   background-color: #646464;
 

src/generic/key-utils.ts

@@ -51,15 +51,19 @@ export const buildCollectionUsageKey = (learningContextKey: string, collectionId
 };
 
 export enum ContainerType {
+  Section = 'section',
+  Subsection = 'subsection',
   Unit = 'unit',
   /**
-   * Vertical is the old name for Unit. Generally, **please avoid using this term entirely in any libraries code** or
-   * anything based on the new Learning Core "Containers" framework - just call it a unit. We do still need to use this
-   * in the modulestore-based courseware, and currently the /xblock/ API used to copy library containers into courses
-   * also requires specifying this, though that should change to a better API that does the unit->vertical conversion
-   * automatically in the future.
-   * TODO: we should probably move this to a separate enum/mapping, and keep this for the new container types only.
+   * Chapter, Sequential and Vertical are the old names for section, subsection and unit.
+   * Generally, **please avoid using this term entirely in any libraries code** or
+   * anything based on the new Learning Core "Containers" framework - just call it a unit, section or subsection. We
+   * do still need to use this in the modulestore-based courseware, and currently the /xblock/ API used to copy
+   * library containers into courses also requires specifying this, though that should change to a better API
+   * that does the unit->vertical conversion automatically in the future.
    */
+  Chapter = 'chapter',
+  Sequential = 'sequential',
   Vertical = 'vertical',
 }