Overhaul ui-samples as the Jenkins Design Library

.gitignore

@@ -5,3 +5,4 @@
 .settings/
 .idea/
 .DS_Store
+*.iml

src/main/java/io/jenkins/plugins/designlibrary/AppBar.java

@@ -0,0 +1,21 @@
+package io.jenkins.plugins.designlibrary;
+
+import hudson.Extension;
+
+@Extension
+public class AppBar extends UISample {
+    @Override
+    public String getDisplayName() {
+        return "App bars";
+    }
+
+    @Override
+    public String getIconFileName() {
+        return "symbol-app-bar";
+    }
+
+    @Extension
+    public static final class DescriptorImpl extends UISampleDescriptor {
+    }
+}
+

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

@@ -0,0 +1,28 @@
+<?jelly escape-by-default='true'?>
+<j:jelly xmlns:j="jelly:core" xmlns:s="/lib/samples" xmlns:l="/lib/layout" xmlns:t="/lib/hudson">
+  <s:sample>
+    <div class="app-component-sample app-component-sample--full-width">
+      <div class="jenkins-app-bar jenkins-!-margin-bottom-0">
+        <div class="jenkins-app-bar__content">
+          <h1>Page title</h1>
+        </div>
+        <div class="jenkins-app-bar__controls">
+          <button class="jenkins-button jenkins-button--primary">
+            <l:icon src="symbol-add" />
+            Primary control
+          </button>
+          <button class="jenkins-button">Secondary</button>
+          <button class="jenkins-button">Secondary</button>
+          <t:help href="https://www.jenkins.io" />
+        </div>
+      </div>
+    </div>
+    <pre>
+      <code class="sample-remote language-xml" data-sample="appBar.jelly" />
+    </pre>
+
+    <p class="jenkins-description">
+      App bars provide glanceable information as well as important actions about the current page.
+    </p>
+  </s:sample>
+</j:jelly>

src/main/resources/io/jenkins/plugins/designlibrary/sample.css

@@ -10,6 +10,10 @@
   margin-bottom: var(--section-padding);
 }
 
+.app-component-sample--full-width {
+  align-items: unset;
+}
+
 .app-component-sample .jenkins-form-item {
   width: 100%;
   max-width: unset;

src/main/resources/io/jenkins/plugins/designlibrary/sample.js

@@ -34,4 +34,21 @@ document.addEventListener("DOMContentLoaded", () =>{
         element.innerHTML = Prism.highlight(element.innerHTML, Prism.languages[language], language)
       }
     });
+
+  if (!navigator.canShare) {
+    document.querySelector('#button-share').style.display = "none"
+  }
+
+  document.querySelector('#button-share').addEventListener('click', async () => {
+    try {
+      const shareData = {
+        title: document.title,
+        text: `Learn about ${document.querySelector("h1").textContent} on Jenkins Design Library`,
+        url: document.location.href
+      }
+      await navigator.share(shareData)
+    } catch (error) {
+      console.log(error)
+    }
+  });
 });

src/main/resources/lib/samples/sample.jelly

@@ -47,13 +47,17 @@ THE SOFTWARE.
 
     <st:include page="header" optional="true" />
 
+    <l:app-bar title="${title}">
+      <button id="button-share" class="jenkins-button" tooltip="${%Share page}">
+        <l:icon src="symbol-share" />
+      </button>
+    </l:app-bar>
+
     <l:side-panel>
       <s:sidepanel />
     </l:side-panel>
 
     <l:main-panel>
-      <h1>${title}</h1>
-
       <d:invokeBody/>
     </l:main-panel>
   </l:layout>

src/main/webapp/AppBar/appBar.jelly

@@ -0,0 +1,9 @@
+<l:app-bar title="Page title">
+  <button class="jenkins-button jenkins-button--primary">
+    <l:icon src="symbol-add" />
+    Primary control
+  </button>
+  <button class="jenkins-button">Secondary</button>
+  <button class="jenkins-button">Secondary</button>
+  <t:help href="https://www.jenkins.io" />
+</l:app-bar>