change: checkbox design hotfix

axzilla · Oct 12, 2024 · 2d747e7 · 2d747e7
1 parent 29e04c0
commit 2d747e7
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 157 deletions.
diff --git a/assets/css/input.css b/assets/css/input.css
@@ -59,4 +59,3 @@
       "calt" 1;
   }
 }
-
diff --git a/assets/css/output.css b/assets/css/output.css
@@ -759,10 +759,6 @@ body {
   margin-left: 0.25rem;
 }
 
-.ml-2 {
-  margin-left: 0.5rem;
-}
-
 .ml-auto {
   margin-left: auto;
 }
@@ -975,10 +971,6 @@ body {
   flex-shrink: 1;
 }
 
-.shrink-0 {
-  flex-shrink: 0;
-}
-
 .-translate-x-1\/4 {
   --tw-translate-x: -25%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1950,22 +1942,36 @@ body {
   opacity: 1;
 }
 
-.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
-  cursor: not-allowed;
+.peer:checked ~ .peer-checked\:bg-primary {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--primary) / var(--tw-bg-opacity));
 }
 
-.peer:disabled ~ .peer-disabled\:opacity-70 {
-  opacity: 0.7;
+.peer:focus-visible ~ .peer-focus-visible\:ring-2 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary) / var(--tw-bg-opacity));
+.peer:focus-visible ~ .peer-focus-visible\:ring-ring {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity));
 }
 
-.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
-  --tw-text-opacity: 1;
-  color: hsl(var(--primary-foreground) / var(--tw-text-opacity));
+.peer:focus-visible ~ .peer-focus-visible\:ring-offset-2 {
+  --tw-ring-offset-width: 2px;
+}
+
+.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.peer:disabled ~ .peer-disabled\:opacity-50 {
+  opacity: 0.5;
+}
+
+.peer:disabled ~ .peer-disabled\:opacity-70 {
+  opacity: 0.7;
 }
 
 .dark\:from-gray-900:is(.dark *) {
@@ -2164,4 +2170,3 @@ body {
 .\[\&_p\]\:leading-relaxed p {
   line-height: 1.625;
 }
-
diff --git a/pkg/components/checkbox.templ b/pkg/components/checkbox.templ
@@ -1,5 +1,9 @@
 package components
 
+import (
+	"github.com/axzilla/goilerplate/pkg/icons"
+)
+
 // CheckboxProps defines the properties for the Checkbox component.
 type CheckboxProps struct {
 	// ID is the unique identifier for the checkbox input.
@@ -25,67 +29,80 @@ type CheckboxProps struct {
 	// If string, it's treated as a JavaScript expression for dynamic disabling.
 	Disabled any
 
-	// Class specifies additional CSS classes to apply to the checkbox input.
+	// Class specifies additional CSS classes to apply to the checkbox container.
 	Class string
 
 	// Attributes allows passing additional HTML attributes to the checkbox input element.
 	Attributes templ.Attributes
 }
 
-// Checkbox renders a checkbox input element with an optional label.
+// Checkbox renders a customizable checkbox component with an associated label.
 //
 // Usage:
 //
 //	@components.Checkbox(components.CheckboxProps{
 //	  ID:      "terms",
-//	  Name:    "terms",
+//	  Name:    "accept_terms",
 //	  Value:   "accepted",
 //	  Label:   "I accept the terms and conditions",
 //	  Checked: true,
+//	  Disabled: "isSubmitting",
+//	  Class:   "mt-4",
+//	  Attributes: templ.Attributes{"data-testid": "terms-checkbox"},
 //	})
 //
 // Props:
-//   - ID: The unique identifier for the checkbox. Required.
-//   - Name: The name attribute for the checkbox. Default: "" (empty string)
-//   - Value: The value attribute for the checkbox. Default: "" (empty string)
-//   - Label: The text label for the checkbox. If empty, no label is rendered.
-//   - Checked: Controls the checked state. Can be bool or string. Default: nil
-//   - Disabled: Controls the disabled state. Can be bool or string. Default: nil
-//   - Class: Additional CSS classes for the checkbox input. Default: "" (empty string)
-//   - Attributes: Additional HTML attributes for the checkbox input. Default: nil
+//   - ID: The unique identifier for the checkbox input. Required.
+//   - Name: The name attribute for the checkbox input. Required.
+//   - Value: The value attribute for the checkbox input. Required.
+//   - Label: The text label associated with the checkbox. Optional.
+//   - Checked: Determines the checked state. Can be a bool or a string for dynamic binding. Optional.
+//   - Disabled: Determines the disabled state. Can be a bool or a string for dynamic binding. Optional.
+//   - Class: Additional CSS classes to apply to the checkbox container. Optional.
+//   - Attributes: Additional HTML attributes to apply to the checkbox input element. Optional.
 templ Checkbox(props CheckboxProps) {
-	<div class="flex items-center">
-		<input
-			type="checkbox"
-			id={ props.ID }
-			name={ props.Name }
-			value={ props.Value }
-			if props.Disabled != nil {
-				if disabledBool, ok := props.Disabled.(bool); ok {
-					disabled?={ disabledBool }
-				}
-				if disabledStr, ok := props.Disabled.(string); ok {
-					:disabled={ disabledStr }
+	<div class={ "flex items-center space-x-2", props.Class }>
+		<div class="relative">
+			<input
+				type="checkbox"
+				id={ props.ID }
+				name={ props.Name }
+				value={ props.Value }
+				if props.Disabled != nil {
+					if disabledBool, ok := props.Disabled.(bool); ok {
+						disabled?={ disabledBool }
+					}
+					if disabledStr, ok := props.Disabled.(string); ok {
+						:disabled={ disabledStr }
+					}
 				}
-			}
-			if props.Checked != nil {
-				if checkedBool, ok := props.Checked.(bool); ok {
-					checked?={ checkedBool }
+				if props.Checked != nil {
+					if checkedBool, ok := props.Checked.(bool); ok {
+						checked?={ checkedBool }
+					}
+					if checkedStr, ok := props.Checked.(string); ok {
+						:checked={ checkedStr }
+					}
 				}
-				if checkedStr, ok := props.Checked.(string); ok {
-					:checked={ checkedStr }
-				}
-			}
-			class={ "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-                "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-                props.Class }
-			{ props.Attributes... }
-		/>
+				class="absolute w-full h-full opacity-0 z-10 cursor-pointer peer"
+				{ props.Attributes... }
+			/>
+			<div
+				class="h-4 w-4 rounded-sm border border-primary ring-offset-background 
+                       peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 
+                       peer-disabled:cursor-not-allowed peer-disabled:opacity-50
+                       flex items-center justify-center
+                       bg-background peer-checked:bg-primary transition-colors"
+			>
+				<div class="text-primary-foreground">
+					@icons.Check(icons.IconProps{Size: "12"})
+				</div>
+			</div>
+		</div>
 		if props.Label != "" {
 			<label
 				for={ props.ID }
-				class={ "ml-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-                    templ.KV("text-muted-foreground", props.Disabled) }
+				class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 			>
 				{ props.Label }
 			</label>