Add 'On this page' side-panel and add supporting docs for 'Allow for more flexible layouts in layout.jelly #8794'

pom.xml

@@ -44,7 +44,7 @@ THE SOFTWARE.
     <properties>
         <changelist>999999-SNAPSHOT</changelist>
         <gitHubRepo>jenkinsci/design-library-plugin</gitHubRepo>
-        <jenkins.version>2.426.1</jenkins.version>
+        <jenkins.version>2.450-rc34741.99e5387832fa_</jenkins.version>
         <node.version>20.11.1</node.version>
         <npm.version>10.2.5</npm.version>
     </properties>

src/main/resources/io/jenkins/plugins/designlibrary/Layouts/index.jelly

@@ -38,10 +38,10 @@
     </div>
 
     <div class="jenkins-tab-pane">
-      <h2 class="jenkins-tab-pane__title">${%Two column}</h2>
+      <h2 class="jenkins-tab-pane__title">${%Multi column}</h2>
 
       <p class="jdl-leading-paragraph">
-        Two column layouts are for 'hub' style pages, pages that have child pages
+        Multi column layouts are for 'hub' style pages, pages that have child pages
         for the user to navigate to.
       </p>
 
@@ -58,18 +58,18 @@
         </thead>
         <tbody>
           <tr>
-            <td>${%two-column.do.1}</td>
-            <td>${%two-column.dont.1}</td>
+            <td>${%multi-column.do.1}</td>
+            <td>${%multi-column.dont.1}</td>
           </tr>
           <tr>
-            <td>${%two-column.do.2}</td>
-            <td>${%two-column.dont.2}</td>
+            <td>${%multi-column.do.2}</td>
+            <td>${%multi-column.dont.2}</td>
           </tr>
           <tr>
-            <td>${%two-column.do.3}</td>
+            <td>${%multi-column.do.3}</td>
           </tr>
           <tr>
-            <td>${%two-column.do.4}</td>
+            <td>${%multi-column.do.4}</td>
           </tr>
         </tbody>
       </table>
@@ -78,15 +78,19 @@
 
       <h3 class="jdl-heading">${%Usage}</h3>
 
-      <p class="jdl-paragraph">The 'two-column' layout is default, so you don't need to do anything to use it.</p>
-
-      <s:code file="twoColumn.jelly" language="xml" previewable="true" />
+      <s:code file="multiColumn.jelly" language="xml" previewable="true" />
 
       <p class="jdl-paragraph">
-        The example above is all you need to set up a two-column page,
+        The example above is all you need to set up a multi column page,
         it's complete with headings, sidebar items and content.
       </p>
 
+      <p class="jdl-paragraph">
+        There's two built in components for creating multi column pages, these are `l:side-panel` and `l:main-panel`. You can define your own columns easily:
+      </p>
+
+      <s:code file="customColumn.jelly" language="xml" />
+
       <h3 class="jdl-heading">${%Badges}</h3>
 
       <p class="jdl-paragraph">
@@ -136,8 +140,6 @@
 
       <h3 class="jdl-heading">${%Usage}</h3>
 
-      <p class="jdl-paragraph">Set the type attribute to 'one-column' to use this layout:</p>
-
       <s:code file="oneColumn.jelly" language="xml" previewable="true" />
     </div>
 

src/main/resources/io/jenkins/plugins/designlibrary/Layouts/index.properties

@@ -1,12 +1,12 @@
 do=Do
 dont=Don''t
 
-two-column.do.1=Include a title on your sidebar that best encapsulates its child pages
-two-column.do.2=Ensure all child pages share the same sidebar for consistency
-two-column.do.3=Buttons should only relate to/manipulate their parent column
-two-column.do.4=One (and only one) sidebar item should be in its selected state at a time
-two-column.dont.1=Don''t include hierarchical navigation in your sidebar, such as "Back to Dashboard" or "Up"
-two-column.dont.2=Don''t include actions or external pages in your sidebar, these belong in the top app bar
+multi-column.do.1=Include a title on your sidebar that best encapsulates its child pages
+multi-column.do.2=Ensure all child pages share the same sidebar for consistency
+multi-column.do.3=Buttons should only relate to/manipulate their parent column
+multi-column.do.4=One (and only one) sidebar item should be in its selected state at a time
+multi-column.dont.1=Don''t include hierarchical navigation in your sidebar, such as "Back to Dashboard" or "Up"
+multi-column.dont.2=Don''t include actions or external pages in your sidebar, these belong in the top app bar
 
-one-column.do.1=Use the "one-column" layout if your page doesn''t need a sidebar
+one-column.do.1=Use a one column layout if your page doesn''t need a sidebar
 one-column.dont.1=Avoid sprawling content, use tabs if your page is lengthy and can be separated into clearly labelled sections

src/main/resources/io/jenkins/plugins/designlibrary/Layouts/oneColumn.jelly

@@ -1,6 +1,6 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout">
-  <l:layout title="Heading" type="one-column">
+  <l:layout title="Heading">
     <l:main-panel>
       <l:app-bar title="Heading">
         <button class="jenkins-button">

src/main/resources/scss/abstracts/_overrides.scss

@@ -40,8 +40,8 @@ a {
 }
 
 #side-panel .jenkins-app-bar {
-  margin-top: 50px;
-  margin-bottom: -10px;
+  margin-top: 20px;
+  margin-bottom: 10px;
 }
 
 .app-sidepanel__jenkins-logo {

src/main/webapp/Layouts/customColumn.jelly

@@ -0,0 +1,5 @@
+<j:if test="${mode == 'side-panel' or mode == 'main'}">
+  <div>
+    My custom column
+  </div>
+</j:if>

src/main/webapp/Layouts/oneColumn.jelly

@@ -1,4 +1,4 @@
-<l:layout title="Heading" type="one-column">
+<l:layout title="Heading">
   <l:main-panel>
     <l:app-bar title="Heading">
       <button class="jenkins-button">