feat: add share link button when hide from toc is enabled in sections (#34043)

* feat: add share link modal when hide from toc is enabled

Adds a new button in the child subsections of sections with Hide From TOC enabled.
This button displays a new modal with two tabs. The first tab displays a button
that allows you to copy the link of that subsection to the clipboard. The second
tab displays a button that allows you to copy the embedded link of the same
subsection to the clipboard.

Ref: https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3853975595/Feature+Enhancement+Proposal+Hide+Sections+from+course+outline

cms/static/sass/elements/_modal-window.scss

@@ -143,6 +143,40 @@
           }
         }
       }
+
+      .subsection-share-link-tabs-header {
+        margin-bottom: $baseline;
+        border-bottom: 1px solid $gray-l3;
+
+        li.subsection-share-link-tab-buttons {
+          display: inline-block;
+          margin-right: $baseline;
+
+          .subsection-share-link-tab-button {
+            @extend %t-copy-sub1;
+            @extend %t-regular;
+
+            background-image: none;
+            background-color: $white;
+            color: $gray-d1;
+            border-radius: 0;
+            box-shadow: none;
+            border: 0;
+            padding: ($baseline/4) ($baseline/2);
+            text-transform: uppercase;
+
+            &:hover {
+              background-color: theme-color("inverse");
+              color: theme-color("primary");
+            }
+
+            &.active {
+              border-bottom: 4px solid theme-color("primary");
+              color: theme-color("primary");
+            }
+          }
+        }
+      }
     }
 
     .modal-section-title {
@@ -183,6 +217,28 @@
           @extend %t-icon4;
         }
       }
+
+      .subsection-share-link-container {
+        display: flex;
+        align-items: center;
+
+        .copy-link-button {
+          border-radius: ($baseline/4);
+          font-size: 1.5rem;
+          font-weight: 600;
+          padding: 0.7rem 1rem;
+
+          .icon-copy-clipboard {
+            color: $white;
+          }
+        }
+
+        .share-link-animated-svg {
+          border-radius: 0.5rem;
+          margin-left: 1rem;
+          box-shadow: 0 0 7px $shadow-d1;
+        }
+      }
     }
 
     // TODO: need to sync up (alongside general editing mode) with xblocks.scss UI

cms/static/sass/elements/_modules.scss

@@ -666,6 +666,29 @@ $outline-indent-width: $baseline;
       .icon {
         @include margin-right($baseline/4);
       }
+
+      .status-message {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        @media (max-width: 768px) {
+          flex-direction: column;
+        }
+      }
+
+      .subsection-share-link-button {
+        border-radius: ($baseline/4);
+        font-size: 1.2rem;
+        font-weight: 600;
+        padding: 0.5rem 1rem;
+        margin: 0 1rem;
+
+        .icon-share-link {
+          color: $white !important;
+          transform: rotate(90deg);
+        }
+      }
     }
 
     .status-message-copy {