postgresml · levkk · Apr 11, 2024 · Apr 11, 2024 · Apr 11, 2024 · Apr 11, 2024
diff --git a/pgml-dashboard/src/components/inputs/checkbox/checkbox.scss b/pgml-dashboard/src/components/inputs/checkbox/checkbox.scss
@@ -0,0 +1,17 @@
+div[data-controller="inputs-checkbox"] {
+    .form-check-label {
+        padding-left: 8px;
+        user-select: none; // Annoying to constantly highlight the text when clicking too fast.
+    }
+
+    .form-check-input {
+        &:not(:checked) {
+            border-color: #{$neon-tint-100};
+        }
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
+}
+
diff --git a/pgml-dashboard/src/components/inputs/checkbox/mod.rs b/pgml-dashboard/src/components/inputs/checkbox/mod.rs
@@ -0,0 +1,26 @@
+use pgml_components::{component, Component};
+use sailfish::TemplateOnce;
+
+use crate::utils::random_string;
+
+#[derive(TemplateOnce, Default)]
+#[template(path = "inputs/checkbox/template.html")]
+pub struct Checkbox {
+    name: String,
+    value: String,
+    label: Component,
+    id: String,
+}
+
+impl Checkbox {
+    pub fn new(name: &str, value: &str) -> Checkbox {
+        Checkbox {
+            name: name.to_string(),
+            value: value.to_string(),
+            label: Component::from(name),
+            id: random_string(16).to_lowercase(),
+        }
+    }
+}
+
+component!(Checkbox);
diff --git a/pgml-dashboard/src/components/inputs/checkbox/template.html b/pgml-dashboard/src/components/inputs/checkbox/template.html
@@ -0,0 +1,6 @@
+<div data-controller="inputs-checkbox">
+  <div class="form-check d-flex gap-2 align-items-center">
+    <input class="form-check-input" type="checkbox" id="<%= id %>" name="<%= name %>" value="<%= value %>">
+    <label class="form-check-label flex-grow-1" for="<%= id %>"><%+ label %></label>
+  </div>
+</div>
diff --git a/pgml-dashboard/src/components/inputs/mod.rs b/pgml-dashboard/src/components/inputs/mod.rs
@@ -1,6 +1,10 @@
 // This file is automatically generated.
 // You shouldn't modify it manually.
 
+// src/components/inputs/checkbox
+pub mod checkbox;
+pub use checkbox::Checkbox;
+
 // src/components/inputs/radio
 pub mod radio;
 pub use radio::Radio;

diff --git a/pgml-dashboard/src/components/pages/careers/apply/template.html b/pgml-dashboard/src/components/pages/careers/apply/template.html
@@ -4,7 +4,7 @@
   use crate::components::sections::Split;
   use crate::components::PostgresLogo;
 
-  let eyebrow_formated = r#"<span class="text-white-300">APPLY NOW</span>"#;
+  let eyebrow_formatted = r#"<span class="text-white-300 text-uppercase">Apply now</span>"#;
 
   let path = format!("/careers/apply/{}",job_title.replace(" ", "-").to_lowercase());
 
@@ -105,8 +105,7 @@
 
 <%+ 
   Split::new()
-    .eyebrow(Component::from(eyebrow_formated))
-    .title(Component::from(job_title))
+    .greeting(Component::from(eyebrow_formatted), Component::from(job_title))
     .display_area(Component::from(display_area))
     .with_navbar()
 %>
diff --git a/pgml-dashboard/src/components/pages/demo/template.html b/pgml-dashboard/src/components/pages/demo/template.html
@@ -6,7 +6,7 @@
 <% use crate::components::stimulus::StimulusAction; %>
 <% use crate::components::inputs::RangeGroupV2; %>
 <% use crate::components::inputs::select::{Select, Option}; %>
-<% use crate::components::inputs::{SwitchV2, Radio}; %>
+<% use crate::components::inputs::{SwitchV2, Radio, Checkbox}; %>
 <% use crate::components::cards::{Rgb, Secondary, Primary}; %>
 
 <div class="container" data-controller="pages-demo">
@@ -186,4 +186,19 @@
       </div>
     </div>
   </div>
+
+  <div class="py-5 mb-5">
+    <div class="card mb-3">
+      <div class="card-body">
+        <div class="d-flex">
+          <%+ Checkbox::new("Inline checkbox", "inline") %>
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <div class="card-body">
+        <%+ Checkbox::new("Take full width checkbox", "block") %>
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/pgml-dashboard/src/components/sections/split/greeting.html b/pgml-dashboard/src/components/sections/split/greeting.html
@@ -0,0 +1,10 @@
+<div class="py-5 text-center text-lg-start greeting">
+  <h6 class="h6 text-uppercase mb-0">
+    <small class="eyebrow-text">
+      <%+ eyebrow %>
+    </small>
+  </h6>
+  <h2 class="display-1 fw-bold text-capitalize">
+    <%+ title %>
+  </h2>
+</div>
diff --git a/pgml-dashboard/src/components/sections/split/mod.rs b/pgml-dashboard/src/components/sections/split/mod.rs
@@ -1,33 +1,51 @@
+//! Left/right split used in onboarding, signup, careers, etc.
+
 use pgml_components::component;
 use pgml_components::Component;
 use sailfish::TemplateOnce;
 
 #[derive(TemplateOnce, Default)]
 #[template(path = "sections/split/template.html")]
 pub struct Split {
-    eyebrow: Component,
-    title: Component,
+    greeting_area: Component,
     display_area: Component,
     with_navbar: bool,
 }
 
+// Greeting with its own styling.
+#[derive(TemplateOnce, Default, Clone)]
+#[template(path = "sections/split/greeting.html")]
+pub struct Greeting {
+    eyebrow: Component,
+    title: Component,
+}
+
+component!(Greeting);
+
+impl Greeting {
+    pub fn new(eyebrow: Component, title: Component) -> Greeting {
+        Greeting { eyebrow, title }
+    }
+}
+
 impl Split {
     pub fn new() -> Split {
         Split {
-            eyebrow: Component::from(String::from("")),
-            title: Component::from(String::from("")),
-            display_area: Component::from(String::from("")),
+            greeting_area: Component::default(),
+            display_area: Component::default(),
             with_navbar: false,
         }
     }
 
-    pub fn eyebrow(mut self, eyebrow: Component) -> Split {
-        self.eyebrow = eyebrow;
+    // Set the greeting.
+    pub fn greeting(mut self, eyebrow: Component, title: Component) -> Split {
+        self.greeting_area = Greeting::new(eyebrow, title).into();
         self
     }
 
-    pub fn title(mut self, title: Component) -> Split {
-        self.title = title;
+    // Set whatever you want on the left side of the display.
+    pub fn greeting_area(mut self, greeting_area: Component) -> Split {
+        self.greeting_area = greeting_area;
         self
     }
 

diff --git a/pgml-dashboard/src/components/sections/split/split.scss b/pgml-dashboard/src/components/sections/split/split.scss
@@ -7,11 +7,11 @@ div[data-controller="sections-split"] {
         }
     }
 
-    .signup-left {
+    .sections-split-left {
         background: #{$gray-700};
     }
 
-    .signup-right {
+    .sections-split-right {
         position: relative;
         background-color: #{$gray-800};
         overflow: hidden;

diff --git a/pgml-dashboard/src/components/sections/split/template.html b/pgml-dashboard/src/components/sections/split/template.html
@@ -1,42 +1,23 @@
-<% 
-  use pgml_components::Component;
-
-  let greeting = format!(r#"
-  <div class="py-5 text-center text-lg-start greeting">
-    <h6 class="h6 text-uppercase mb-0">
-      <small class="eyebrow-text">
-        {}
-      </small>
-    </h6>
-    <h2 class="display-1 fw-bold" style="text-transform: capitalize">
-      {}
-    </h2>
-  </div>
-  "#, 
-  eyebrow.render_once().unwrap(), 
-  title.render_once().unwrap());
-%>
-
-<div data-controller="sections-split" class="">
+<div data-controller="sections-split">
   <div class="row h-100 gx-0">
     <!-- left -->
     <div class="col-6 d-none d-lg-block">
-      <div class="d-flex flex-column signup-left" style="height: 100%;">
+      <div class="d-flex flex-column sections-split-left" style="height: 100%;">
         <div class="d-flex flex-column position-sticky justify-content-center left-center<% if with_navbar {%>-navbar<% } %>">
-          <%+ Component::from(greeting.clone()) %>
+          <%+ greeting_area.clone() %>
         </div>
       </div>
     </div>
 
     <!-- right -->
     <div class="col-12 col-lg-6 ">
-      <div class="d-flex flex-column align-items-center justify-content-center signup-right pt-lg-5 pt-0 pb-5 px-3 right-center<% if with_navbar {%>-navbar<% } %>">
+      <div class="d-flex flex-column align-items-center justify-content-center sections-split-right pt-lg-5 pt-0 pb-5 px-3 right-center<% if with_navbar {%>-navbar<% } %>">
         <div class="glow-1"></div>
         <div class="glow-2"></div>
         <div class="glow-3"></div>
         <div class="glow-4"></div>
         <div class="glow-5"></div>
-        <div class="d-flex d-lg-none"><%+ Component::from(greeting) %></div>
+        <div class="d-flex d-lg-none"><%+ greeting_area %></div>
 
         <%+ display_area %>
       </div>

diff --git a/pgml-dashboard/static/css/modules.scss b/pgml-dashboard/static/css/modules.scss
@@ -20,6 +20,7 @@
 @import "../../src/components/headings/gray/gray.scss";
 @import "../../src/components/icons/checkmark/checkmark.scss";
 @import "../../src/components/icons/twitter/twitter.scss";
+@import "../../src/components/inputs/checkbox/checkbox.scss";
 @import "../../src/components/inputs/radio/radio.scss";
 @import "../../src/components/inputs/range_group/range_group.scss";
 @import "../../src/components/inputs/range_group_v_2/range_group_v_2.scss";