From 64247bedd7a88f105ca5f5791c02a5aeda43ce18 Mon Sep 17 00:00:00 2001
From: maki <makiniqa@sutty.nl>
Date: Mon, 14 Oct 2024 15:02:55 -0300
Subject: [PATCH] feat: checkbox component #12

---
 _data/components.yml                      |  1 +
 _includes/attributes/form_dependency.html | 16 +++++++++
 _includes/form/checkbox.html              | 40 +++++++++++++++++++++++
 _includes/theme/checkbox.html             |  2 ++
 4 files changed, 59 insertions(+)
 create mode 100644 _includes/attributes/form_dependency.html
 create mode 100644 _includes/form/checkbox.html
 create mode 100644 _includes/theme/checkbox.html

diff --git a/_data/components.yml b/_data/components.yml
index 7ee0d47..f107ec9 100644
--- a/_data/components.yml
+++ b/_data/components.yml
@@ -8,3 +8,4 @@
 - "button_with_link"
 - "button_with_copy"
 - "buttons"
+- "checkbox"
diff --git a/_includes/attributes/form_dependency.html b/_includes/attributes/form_dependency.html
new file mode 100644
index 0000000..db9554b
--- /dev/null
+++ b/_includes/attributes/form_dependency.html
@@ -0,0 +1,16 @@
+{%- comment -%}
+  Estable relaciones de dependencia entre campos
+
+  @param :depends [String] Atributo name del campo del que depende
+  @param :condition [String] Condición (every, some)
+  @param :values [Array] Valores que cumplen la condición
+{%- endcomment -%}
+
+data-form-dependency-target="dependency" data-action="form-dependency#update" data-label="
+{{- include.label | escape_once -}}
+"
+{% if include.depends %}
+  data-depends="{{ include.depends }}" data-condition="{{ include.condition }}" data-values="
+  {{- include.values | jsonify | escape -}}
+  "
+{% endif %}
diff --git a/_includes/form/checkbox.html b/_includes/form/checkbox.html
new file mode 100644
index 0000000..3d2b674
--- /dev/null
+++ b/_includes/form/checkbox.html
@@ -0,0 +1,40 @@
+{%- comment -%}
+  componente de checkbox
+
+  @param :field [String]
+  @param :label [String]
+  @param :value [String]
+  @param :id [String]
+  @param :class [String] Las clases del componente
+  @param :checked [Boolean]
+  @param :depends [String] Atributo name del campo del que depende
+  @param :condition [String] Condición (every, some)
+  @param :values [Array] Valores que cumplen la condición
+{%- endcomment -%}
+
+<div class="{{ include.class }} d-flex flex-row align-items-center">
+  <div class="custom-control custom-checkbox">
+    <input
+      {%
+        include attributes/form_dependency.html
+        depends=include.depends
+        condition=include.condition
+        values=include.values
+        label=include.label
+      %}
+      type="checkbox"
+      class="custom-control-input"
+      id="{{ include.id }}"
+      name="{{ include.field }}"
+      value="{{ include.value | escape_once }}"
+      {{ include.checked | present | value_if: 'checked' }}
+    >
+
+    <label
+      class="custom-control-label pl-1"
+      for="{{ include.id }}"
+    >
+      {{ include.label | default: include.value }}
+    </label>
+  </div>
+</div>
\ No newline at end of file
diff --git a/_includes/theme/checkbox.html b/_includes/theme/checkbox.html
new file mode 100644
index 0000000..c169f06
--- /dev/null
+++ b/_includes/theme/checkbox.html
@@ -0,0 +1,2 @@
+{% include form/checkbox.html label="Acepto" id="tyc" field="tyc" value="algo" %}
+{% include form/checkbox.html label="Quiero mails" id="mails" field="tyc" value="otra cosa" %}
\ No newline at end of file
-- 
GitLab