Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add 'Cards' docs #347

Merged
merged 24 commits into from
Nov 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions pom.xml
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ THE SOFTWARE.
<parent>
<groupId>org.jenkins-ci.plugins</groupId>
<artifactId>plugin</artifactId>
<version>4.88</version>
<version>5.2</version>
<relativePath />
</parent>

Expand All @@ -44,7 +44,7 @@ THE SOFTWARE.
<properties>
<changelist>999999-SNAPSHOT</changelist>
<gitHubRepo>jenkinsci/design-library-plugin</gitHubRepo>
<jenkins.version>2.460</jenkins.version>
<jenkins.version>2.479.1</jenkins.version>
<node.version>20.18.0</node.version>
<npm.version>10.9.0</npm.version>
</properties>
Expand Down Expand Up @@ -72,8 +72,8 @@ THE SOFTWARE.
<dependencies>
<dependency>
<groupId>io.jenkins.tools.bom</groupId>
<artifactId>bom-weekly</artifactId>
<version>2961.v1f472390972e</version>
<artifactId>bom-2.479.x</artifactId>
<version>3482.vc10d4f6da_28a_</version>
<scope>import</scope>
<type>pom</type>
</dependency>
Expand Down
22 changes: 22 additions & 0 deletions src/main/java/io/jenkins/plugins/designlibrary/Cards.java
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
package io.jenkins.plugins.designlibrary;

import hudson.Extension;

@Extension
public class Cards extends UISample {

@Override
public String getDisplayName() {
return "Cards";
}

@Override
public String getIconFileName() {
return "symbol-cards";

Check warning on line 15 in src/main/java/io/jenkins/plugins/designlibrary/Cards.java

View check run for this annotation

ci.jenkins.io / Code Coverage

Not covered lines

Lines 6-15 are not covered by tests
}

@Extension
public static final class DescriptorImpl extends UISampleDescriptor {
}
}

8 changes: 8 additions & 0 deletions src/main/resources/images/symbols/cards.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:s="/lib/samples" xmlns:l="/lib/layout">
<s:sample>
<p class="jdl-leading-paragraph">${%description}</p>

<div class="app-cards__examples">
<l:card title="Pipeline" expandable="#">
<div class="app-cards__graph-view">
<div class="app-cards__graph-view__item">
<p>Start</p>
<div />
</div>
<div class="app-cards__graph-view__item">
<p>Parallel</p>
<div>
<l:icon src="symbol-status-blue" />
</div>
</div>
<div class="app-cards__graph-view__item">
<p>Deploy</p>
<div>
<l:icon src="symbol-status-blue" />
</div>
</div>
<div class="app-cards__graph-view__item">
<p>Linux publishing</p>
<div>
<l:icon src="symbol-status-blue" />
</div>
</div>
<div class="app-cards__graph-view__item">
<p>End</p>
<div />
</div>
</div>
</l:card>
<l:card title="Details">
<p class="app-cards__details__item">
<l:icon src="symbol-checkmark-circle-outline plugin-ionicons-api" />
Last success 16 hours ago
<a href="#">#375</a>
</p>
<p class="app-cards__details__item">
<l:icon src="symbol-close-circle-outline plugin-ionicons-api" />
Last failure One day ago
<a href="#">#370</a>
</p>
<p class="app-cards__details__item">
<l:icon src="symbol-timer-outline plugin-ionicons-api" />
Last duration 30 seconds
<a href="#">#375</a>
</p>
<p class="app-cards__details__item">
<l:icon src="symbol-logo-github plugin-ionicons-api" />
<a href="https://github.com/jenkinsci/jenkins">jenkinsci/jenkins</a>
</p>
</l:card>
<l:card title="Tests" expandable="#">
<div class="app-cards__tests">
<l:icon src="symbol-checkmark-done-outline plugin-ionicons-api" />
<p>All tests passed</p>
<p class="app-cards__tests__description">0 failures (±0), 273 skipped (+273), 56,679 ran</p>
<p class="app-cards__tests__description">Took 15 hours</p>
</div>
</l:card>
<j:set var="controls">
<a class="jenkins-card__reveal" href="#" tooltip="Download">
<l:icon src="symbol-download-outline plugin-ionicons-api" />
</a>
</j:set>
<l:card title="Console" expandable="#" controls="${controls}" id="app-cards__console">
<code>03:27:50 [INFO] Building Jenkins Design Library 322.vd4663a_6c03f8
03:27:50 [INFO] from pom.xml
03:27:50 [INFO] --------------------------------[ hpi ]---------------------------------
03:27:52 [INFO]
03:27:52 [INFO] --- clean:3.4.0:clean (default-clean) @ design-library ---
03:27:52 [INFO]
03:27:52 [INFO] --- hpi:3.57:validate (default-validate) @ design-library ---
03:27:52 [INFO] Created marker file
/home/jenkins/agent/workspace/ins_design-library-plugin_master/target/java-level/11
03:27:52 [INFO]
03:27:52 [INFO] --- hpi:3.57:validate-hpi (default-validate-hpi) @ design-library ---
03:27:52 [INFO]
03:27:52 [INFO] --- enforcer:3.5.0:enforce (display-info) @ design-library ---
03:27:52 [INFO] Rule 0: io.jenkins.tools.incrementals.enforcer.RequireExtensionVersion passed
03:27:52 [INFO] Rule 1: org.apache.maven.enforcer.rules.version.RequireMavenVersion passed
03:27:52 [INFO] Rule 2: org.apache.maven.enforcer.rules.version.RequireJavaVersion passed
03:27:53 [INFO] Rule 3: org.codehaus.mojo.extraenforcer.dependencies.EnforceBytecodeVersion passed
03:27:53 [INFO] Rule 4: org.apache.maven.enforcer.rules.dependency.BannedDependencies passed
03:27:53 [INFO] Ignoring requireUpperBoundDeps in org.ow2.asm:asm
03:27:53 [INFO] Rule 5: org.apache.maven.enforcer.rules.dependency.RequireUpperBoundDeps passed
</code>
</l:card>
</div>

<hr />

<s:dos-donts>
<tr>
<td>${%do.1}</td>
<td>${%dont.1}</td>
</tr>
<tr>
<td>${%do.2}</td>
<td>${%dont.2}</td>
</tr>
<tr>
<td>${%do.3}</td>
</tr>
</s:dos-donts>

<hr />

<div class="jdl-component-group">
<div class="jdl-component-sample">
<j:set var="controls">
<a class="jenkins-card__reveal" href="#" tooltip="Custom action">
<l:icon src="symbol-sparkles-outline plugin-ionicons-api" />
</a>
</j:set>
<l:card title="Card title" expandable="#" controls="${controls}" id="app-cards__example">
Card content
</l:card>
</div>
<s:code language="xml" file="card.jelly" />
</div>
</s:sample>
</j:jelly>
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
description=Use cards to surface related information and controls to users.
do.1=Keep your card glanceable, let the user expand your card for more information
do.2=Make your cards scalable to different screen sizes
do.3=Do use hierarchy and symbols to add visual context
dont.1=Don''t add unnecessary visual elements that clutter the card
dont.2=Don''t have too many actions on one card
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,20 @@
</div>
<p class="app-home__subheading">${%topics}</p>
<div class="app-home__side-by-side">
<a class="app-card__container" href="Cards">
<div class="app-card__preview">
<l:icon src="symbol-cards plugin-design-library" />
</div>
<div class="app-card__title">${%cards} <span class="app-card__new-tag">${%New}</span></div>
<div class="app-card__description">${%cards-description}</div>
</a>
<a class="app-card__container" href="Dropdowns">
<div class="app-card__preview">
<l:icon src="symbol-dropdowns plugin-design-library" />
</div>
<div class="app-card__title">${%dropdowns} <span class="app-card__new-tag">${%New}</span></div>
<div class="app-card__description">${%dropdowns-description}</div>
</a>
<a class="app-card__container" href="Buttons">
<div class="app-card__preview">
<l:icon src="symbol-buttons plugin-design-library" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ title=Design<br/>Library
welcome=Welcome to Jenkins Design Library
description=Design Library makes it easy for developers to build complex and consistent interfaces using Jenkins UI components.
topics=Topics for modernising your interface
cards=Cards
cards-description=Use cards to surface related information and controls to users
dropdowns=Dropdowns
dropdowns-description=Group less used controls under one roof
buttons=Buttons
buttons-description=Use the new Jenkins buttons design
symbols=Symbols
Expand Down
4 changes: 2 additions & 2 deletions src/main/resources/scss/abstracts/_typography.scss
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
@use "mixins";

.jdl-heading {
font-weight: 600;
font-weight: 500;
font-size: 1.2rem;
margin: 0 0 var(--jdl-spacing) 0;
}

.jdl-leading-paragraph {
font-size: 1.2rem;
font-weight: 600;
font-weight: 500;
margin: 0 0 var(--jdl-spacing) 0;
line-height: 1.66;

Expand Down
4 changes: 2 additions & 2 deletions src/main/resources/scss/components/_dos-donts.scss
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

thead {
th {
font-weight: 600;
font-weight: 500;
font-size: 1rem;
text-align: left;
opacity: 0.75;
Expand All @@ -35,7 +35,7 @@
td {
position: relative;
font-size: 1.1rem;
font-weight: 600;
font-weight: 500;
line-height: 1.66;
padding-left: calc(2rem + 1.5ch);

Expand Down
Loading