Revamp Design Library v3 (#359)

Co-authored-by: Tim Jacomb <timjacomb1@gmail.com>

README.md

@@ -1,7 +1,8 @@
 <a href="https://weekly.ci.jenkins.io/design-library/">
-  <img src="https://raw.githubusercontent.com/jenkinsci/design-library-plugin/master/logo.svg">
+  <img src="logo.svg" alt="Logo">
 </a>
 
+[![View Design Library](https://img.shields.io/badge/view-design_library-F2709C)](https://weekly.ci.jenkins.io/design-library)
 [![Join the chat at https://gitter.im/jenkinsci/ux-sig](https://badges.gitter.im/jenkinsci/ux-sig.svg)](https://gitter.im/jenkinsci/ux-sig)
 [![Jenkins Plugin](https://img.shields.io/jenkins/plugin/v/design-library.svg)](https://plugins.jenkins.io/design-library/)
 [![Jenkins Plugin Installs](https://img.shields.io/jenkins/plugin/i/design-library.svg?color=blue)](https://plugins.jenkins.io/design-library/)
@@ -13,7 +14,7 @@ This plugin contains:
 - demonstration of UI components available in Jenkins
 - snippets of Jelly ready-to-use examples
 
-## Usage
+## Contributing
 
 You can open this project as a [Gitpod workspace](https://www.gitpod.io/) which comes pre-configured with all the tools you will need.
 
@@ -25,5 +26,3 @@ which will open the workspace in IntelliJ IDEA using JetBrains Gateway.
 Alternatively clone this project and run `mvn hpi:run`.
 
 Go to the **Design Library** menu item or straight to http://localhost:8080/jenkins/design-library/ and play with UI components.
-
-If you just want to see this plugin in action then you can also visit the latest version of this plugin in our [Jenkins "weekly" live installation](https://weekly.ci.jenkins.io/design-library/).

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

@@ -1,11 +1,13 @@
 package io.jenkins.plugins.designlibrary;
 
+import edu.umd.cs.findbugs.annotations.NonNull;
 import hudson.Extension;
 
 @Extension
 public class AppBar extends UISample {
+
     @Override
-    public String getDisplayName() {
+    public @NonNull String getDisplayName() {
         return "App bars";
     }
 
@@ -14,6 +16,11 @@ public String getIconFileName() {
         return "symbol-app-bar";
     }
 
+    @Override
+    public String getDescription() {
+        return "Frames your page and contains your most important actions.";
+    }
+
     @Extension
     public static final class DescriptorImpl extends UISampleDescriptor {}
 }

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

@@ -4,16 +4,17 @@
 
 @Extension
 public class Banner extends UISample {
-    @Override
-    public String getDisplayName() {
-        return "Banner";
-    }
 
     @Override
     public String getIconFileName() {
         return "symbol-information-circle-outline plugin-ionicons-api";
     }
 
+    @Override
+    public String getDescription() {
+        return "Banners are a handy way to display small snippets of text and actions.";
+    }
+
     @Extension
     public static final class DescriptorImpl extends UISampleDescriptor {}
 }

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

@@ -12,6 +12,11 @@ public String getIconFileName() {
         return "symbol-buttons";
     }
 
+    @Override
+    public String getDescription() {
+        return "Triggers specific actions with a click or tap.";
+    }
+
     @Extension
     public static final class DescriptorImpl extends UISampleDescriptor {}
 }

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

@@ -6,13 +6,18 @@
 public class Cards extends UISample {
 
     @Override
-    public String getDisplayName() {
-        return "Cards";
+    public String getIconFileName() {
+        return "symbol-cards";
     }
 
     @Override
-    public String getIconFileName() {
-        return "symbol-cards";
+    public String getDescription() {
+        return "Use cards to surface related information and controls to users.";
+    }
+
+    @Override
+    public String getSince() {
+        return "2.479.1";
     }
 
     @Extension

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

@@ -0,0 +1,16 @@
+package io.jenkins.plugins.designlibrary;
+
+public enum Category {
+    COMPONENT("Components"),
+    PATTERN("Patterns");
+
+    Category(String displayName) {
+        this.displayName = displayName;
+    }
+
+    private final String displayName;
+
+    public String getDisplayName() {
+        return displayName;
+    }
+}

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

@@ -12,6 +12,11 @@ public String getIconFileName() {
         return "symbol-checkbox-outline plugin-ionicons-api";
     }
 
+    @Override
+    public String getDescription() {
+        return "Allows users to select one or more items from a list.";
+    }
+
     @Extension
     public static final class DescriptorImpl extends UISampleDescriptor {}
 }

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

@@ -11,6 +11,16 @@ public String getIconFileName() {
         return "symbol-water-outline plugins-ionicons-api";
     }
 
+    @Override
+    public String getDescription() {
+        return "Defines the palette for consistent use of color throughout the design system.";
+    }
+
+    @Override
+    public Category getCategory() {
+        return Category.PATTERN;
+    }
+
     public List<Semantic> getSemantics() {
         return List.of(
                 new Semantic("Accent", "Use for branding", "accent-color"),

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

@@ -1,15 +1,28 @@
 package io.jenkins.plugins.designlibrary;
 
+import edu.umd.cs.findbugs.annotations.NonNull;
 import hudson.Extension;
 import hudson.util.ListBoxModel;
 
 @Extension
 public class Dialogs extends UISample {
+
+    @NonNull
+    @Override
+    public String getDisplayName() {
+        return super.getDisplayName();
+    }
+
     @Override
     public String getIconFileName() {
         return "symbol-chatbox-ellipses-outline plugin-ionicons-api";
     }
 
+    @Override
+    public String getDescription() {
+        return "Displays overlay windows for additional information or user input without navigating away.";
+    }
+
     @Extension
     public static final class DescriptorImpl extends UISampleDescriptor {
         public ListBoxModel doFillFlavorItems() {

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

@@ -4,16 +4,17 @@
 
 @Extension
 public class File extends UISample {
-    @Override
-    public String getDisplayName() {
-        return "File";
-    }
 
     @Override
     public String getIconFileName() {
         return "symbol-cloud-upload-outline plugin-ionicons-api";
     }
 
+    @Override
+    public String getDescription() {
+        return "Enables file upload functionality.";
+    }
+
     @Extension
     public static final class DescriptorImpl extends UISampleDescriptor {}
 }

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

@@ -0,0 +1,48 @@
+package io.jenkins.plugins.designlibrary;
+
+import hudson.Extension;
+import hudson.model.RootAction;
+import java.util.List;
+import java.util.Map;
+
+/**
+ * Entry point to all the UI samples.
+ *
+ * @author Kohsuke Kawaguchi
+ */
+@Extension
+public class Home implements RootAction {
+
+    public String getIconFileName() {
+        return "symbol-design-library plugin-design-library";
+    }
+
+    public String getDisplayName() {
+        return "Design Library";
+    }
+
+    public String getUrlName() {
+        return "design-library";
+    }
+
+    public List<UISample> getAll() {
+        return UISample.getAll();
+    }
+
+    public static Map<Category, List<UISample>> getGrouped() {
+        return UISample.getGrouped();
+    }
+
+    /**
+     * Dynamically retrieves the appropriate UI sample based on the current URL
+     */
+    public UISample getDynamic(String name) {
+        for (UISample ui : getAll()) {
+            String urlName = ui.getUrlName();
+            if (urlName != null && urlName.equals(name)) {
+                return ui;
+            }
+        }
+        return null;
+    }
+}