From 697e0f01f549f9d09ec6d45b6ef5efbf0afaf58f Mon Sep 17 00:00:00 2001
From: Herwin Bozet <herwin.bozet@gmail.com>
Date: Tue, 26 Nov 2024 22:54:02 +0100
Subject: [PATCH] Added input sections stubs, Added textarea basic rules Update
 index.php, inputs.php, and 3 more files...

---
 htdocs/index.php                 | 43 +++++++++++-------
 htdocs/parts/core/inputs.php     | 77 ++++++++++++++++++++++++++++++++
 htdocs/parts/examples/inputs.php | 37 +++++++++++++++
 htdocs/parts/sidebar.php         | 10 +++++
 scss/site/input.scss             | 21 ++++++---
 5 files changed, 166 insertions(+), 22 deletions(-)
 create mode 100644 htdocs/parts/core/inputs.php
 create mode 100644 htdocs/parts/examples/inputs.php

diff --git a/htdocs/index.php b/htdocs/index.php
index 14482e2..3f62cf9 100644
--- a/htdocs/index.php
+++ b/htdocs/index.php
@@ -58,55 +58,64 @@
     <!-- Introduction -->
     <?php include("./parts/intro.php"); ?>
 
-    <!-- Text > Weights -->
+
+    <!-- Core > Text > Weights -->
     <?php include("./parts/text_weights.php"); ?>
 
-    <!-- Text > Styles -->
+    <!-- Core > Text > Styles -->
     <?php include("./parts/text_styles.php"); ?>
 
-    <!-- Text > Alignment -->
+    <!-- Core > Text > Alignment -->
     <?php include("./parts/text_alignment.php"); ?>
 
-    <!-- Text > Modifiers -->
+    <!-- Core > Text > Modifiers -->
     <?php include("./parts/text_modifiers.php"); ?>
 
-    <!-- Text > Links -->
+    <!-- Core > Text > Links -->
     <?php include("./parts/text_links.php"); ?>
 
-    <!-- Text > Misc -->
+    <!-- Core > Text > Misc -->
     <?php include("./parts/text_misc.php"); ?>
 
-    <!-- Spacing -->
+    <!-- Core > Spacing -->
     <?php include("./parts/spacing.php"); ?>
 
-    <!-- Rounding -->
+    <!-- Core > Rounding -->
     <?php include("./parts/rounding.php"); ?>
 
-    <!-- Lists > Base -->
+    <!-- Core > Lists > Base -->
     <?php include("./parts/lists_base.php"); ?>
 
-    <!-- Lists > Composed
+    <!-- Core > Lists > Composed
     <?php include("./parts/lists_composed.php"); ?>-->
 
-    <!-- Grids -->
+    <!-- Core > Grids -->
     <?php include("./parts/grids.php"); ?>
 
-    <!-- Tables -->
+    <!-- Core > Tables -->
     <?php include("./parts/tables_core.php"); ?>
 
-    <!-- Horizontal Rulers -->
+    <!-- Core > Inputs -->
+    <?php include("./parts/core/inputs.php"); ?>
+
+
+    <!-- Site > Horizontal Rulers -->
     <?php include("./parts/horizontal_rulers.php"); ?>
 
-    <!-- Backgrounds -->
+    <!-- Site > Backgrounds -->
     <?php include("./parts/backgrounds.php"); ?>
 
-    <!-- Buttons -->
+    <!-- Site > Buttons -->
     <?php include("./parts/buttons.php"); ?>
 
-    <!-- Tables -->
+    <!-- Site > Tables -->
     <?php include("./parts/tables_site.php"); ?>
 
-    <!-- Tables -->
+
+    <!-- Examples > Inputs -->
+    <?php include("./parts/examples/inputs.php"); ?>
+
+    <!-- Examples > Tables -->
     <?php include("./parts/examples/cards.php"); ?>
 </main>
 
diff --git a/htdocs/parts/core/inputs.php b/htdocs/parts/core/inputs.php
new file mode 100644
index 0000000..4248ea8
--- /dev/null
+++ b/htdocs/parts/core/inputs.php
@@ -0,0 +1,77 @@
+<?php
+// Making sure the file is included and not accessed directly.
+if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
+    header('HTTP/1.1 403 Forbidden');
+    die();
+}
+?>
+
+<a id="core-inputs"></a>
+<div class="p-xs b r-s bkgd-grid mt-m">
+    <h2 class="t-w-500 t-size-14">Inputs
+        <i class="fa-solid fa-pen-to-square f-right"></i>
+    </h2>
+</div>
+<section class="p-s">
+
+    <div class="bkgd-blue t-w-400 t-center w-full r-l border p-xs mt-xxs mb-m">
+        ℹ️ Check the <a href="#examples-inputs">Examples &gt; Inputs</a> section for styled examples.
+    </div>
+
+    <div class="px-s mb-m">
+        <label for="demo-core-text">Text Input: </label>
+        <input id="demo-core-text" type="text" value="Lorem ipsum">
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            label+input[type=text]
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <label for="demo-core-password">Password Input: </label>
+        <input id="demo-core-password" type="password" value="12345678">
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            label+input[type=password]
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <label for="demo-core-number">Number Input: </label>
+        <input id="demo-core-number" type="number" value="42">
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            label+input[type=number]
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <input type="radio" id="demo-core-radio-1">
+        <label for="demo-core-radio-1">Radio 1</label><br>
+        <input type="radio" id="demo-core-radio-2">
+        <label for="demo-core-radio-2">Radio 2</label><br>
+        <input type="radio" id="demo-core-radio-3">
+        <label for="demo-core-radio-3">Radio 3</label>
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            (input[type=radio]+label+br)*3
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <input type="checkbox" id="demo-core-combo-1">
+        <label for="demo-core-combo-1">Checkbox 1</label><br>
+        <input type="checkbox" id="demo-core-combo-2">
+        <label for="demo-core-combo-2">Checkbox 2</label><br>
+        <input type="checkbox" id="demo-core-combo-3">
+        <label for="demo-core-combo-3">Checkbox 3</label>
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            (input[type=checkbox]+label+br)*3
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <label for="demo-core-textarea"></label>
+        <textarea id="demo-core-textarea" rows="8">Lorem Ipsum</textarea>
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            label+textarea
+        </code>
+    </div>
+
+</section>
diff --git a/htdocs/parts/examples/inputs.php b/htdocs/parts/examples/inputs.php
new file mode 100644
index 0000000..7f48020
--- /dev/null
+++ b/htdocs/parts/examples/inputs.php
@@ -0,0 +1,37 @@
+<?php
+// Making sure the file is included and not accessed directly.
+if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
+    header('HTTP/1.1 403 Forbidden');
+    die();
+}
+?>
+
+<a id="examples-inputs"></a>
+<div class="p-xs b r-s bkgd-grid mt-m">
+    <h2 class="t-w-500 t-size-14">Inputs
+        <i class="fa-solid fa-pen-to-square f-right"></i>
+    </h2>
+</div>
+<section class="p-s">
+
+    <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Basic inputs</h3>
+
+    <div class="px-s mb-m">
+        <label for="demo-core-text">Text Input: </label>
+        <input id="demo-core-text" type="text" value="Lorem ipsum" class="p-xxs border r-m">
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            label+input[type=text]<b>.p-xxs.border.r-m</b>
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <label for="demo-core-textarea"></label>
+        <textarea id="demo-core-textarea" rows="8" class="p-xxs border r-m w-full ta-resize-v">Lorem Ipsum</textarea>
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            label+textarea<b>.p-xxs.border.r-m.w-full.ta-resize-v</b>
+        </code>
+
+    </div>
+
+    <p class="mt-m t-bold">TODO: Add other types</p>
+</section>
diff --git a/htdocs/parts/sidebar.php b/htdocs/parts/sidebar.php
index e4916f8..51bb3e0 100644
--- a/htdocs/parts/sidebar.php
+++ b/htdocs/parts/sidebar.php
@@ -80,6 +80,11 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
                     <i class="fa-solid fa-table pr-xs t-half-muted"></i>Tables
                 </p>
             </a>
+            <a class="a-hidden" href="#core-inputs">
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-pen-to-square pr-xs t-half-muted"></i>Inputs
+                </p>
+            </a>
         </div>
     </details>
 
@@ -112,6 +117,11 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
     <details class="by t-noselect" open>
         <summary class="p-xs bkgd-grid20 t-w-bold t-size-13">Examples</summary>
         <div class="p-xs px-m bt bkgd-grey t-size-11">
+            <a class="a-hidden" href="#examples-inputs">
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-pen-to-square pr-xs t-half-muted"></i>Inputs
+                </p>
+            </a>
             <a class="a-hidden" href="#examples-cards">
                 <p class="t-w-500 py-xs sidebar-entry">
                     <i class="fa-solid fa-address-card pr-xs t-half-muted"></i>Cards
diff --git a/scss/site/input.scss b/scss/site/input.scss
index 8af442d..45a3533 100644
--- a/scss/site/input.scss
+++ b/scss/site/input.scss
@@ -132,9 +132,20 @@ button + button, .button-link + .button-link > button {
 	//}
 }
 
-textarea {
 
-	&.no-resize {
-		resize: none;
-	}
-}
\ No newline at end of file
+// TODO: Move to core !
+.ta-resize {
+	resize: both;
+}
+
+.ta-resize-h {
+	resize: horizontal;
+}
+
+.ta-resize-v {
+	resize: vertical;
+}
+
+.ta-resize-none {
+	resize: none;
+}