docs: Add toggle switch page (#62)

* Init

* Update icon, change samples

* Cleanup for release

Co-authored-by: Tim Jacomb <21194782+timja@users.noreply.github.com>

Author: janfaracik

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

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

src/main/resources/images/symbols/toggle-switch.svg

@@ -0,0 +1,34 @@
+<?jelly escape-by-default='true'?>
+<j:jelly xmlns:j="jelly:core" xmlns:s="/lib/samples" xmlns:f="/lib/form">
+  <s:sample>
+    <div class="app-component-sample">
+      <f:toggleSwitch name="enabled" title="Hello world" />
+    </div>
+    <pre>
+      <code class="sample-remote language-xml" data-sample="default.jelly"/>
+    </pre>
+
+    <p class="jenkins-description">You can invert the position of the label with the <code>invertLabel</code> attribute.</p>
+    <div class="app-component-sample app-component-sample--right-alignment">
+      <f:toggleSwitch name="enabled" title="Hello world" invertLabel="true" />
+    </div>
+    <pre>
+      <code class="sample-remote language-xml" data-sample="inverted.jelly"/>
+    </pre>
+
+    <h2>${%Dynamic labels}</h2>
+    <p class="jenkins-description">Toggle switches labels can update in real time to reflect their status by setting the <code>checkTitle</code> attribute.</p>
+    <p class="jenkins-description">Try clicking on the toggle switch below to see how this works.</p>
+
+    <div class="app-component-sample">
+      <f:toggleSwitch name="enable"
+                      title="${%Disabled}"
+                      checkedTitle="${%Enabled}"
+                      checked="true"
+                      tooltip="${%Enable or disable the current project}" />
+    </div>
+    <pre>
+      <code class="sample-remote language-xml" data-sample="dynamic.jelly"/>
+    </pre>
+  </s:sample>
+</j:jelly>

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

@@ -23,6 +23,10 @@
     align-items: unset;
   }
 
+  &--right-alignment {
+    align-items: flex-end;
+  }
+
   #bottom-sticker {
     margin-left: -1rem;
     width: calc(100% + 2rem);

src/main/resources/scss/components/_component-sample.scss

@@ -0,0 +1 @@
+<f:toggleSwitch name="enabled" title="Hello world" />

src/main/webapp/ToggleSwitch/default.jelly

@@ -0,0 +1,5 @@
+<f:toggleSwitch name="enable"
+                title="${%Disabled}"
+                checkedTitle="${%Enabled}"
+                checked="true"
+                tooltip="${%Enable or disable the current project}" />

src/main/webapp/ToggleSwitch/dynamic.jelly

@@ -0,0 +1 @@
+<f:toggleSwitch name="enabled" title="Hello world" invertLabel="true" />