Merge pull request #206 from mortendk/component-form-options

form options for radio, checkbox and dropdown / select

src/system/netlifycms/fields/component.njk

@@ -317,16 +317,44 @@
               - { label: title, name: title, widget: string, default: 'Contact', required: false }
               - { label: Form name, name: name, widget: string, default: 'Contact', required: true, hint: "The name of the form for netlify" }
               - { label: action url, name: action, widget: string, default: 'Contact', required: false, hint: "Link to the page the form goes to after submit" }
-              - label: elements
+              - label: Form elements
                 name: elements
                 widget: list
                 summary: '{{fields.title}} || {{fields.inputtype}}'
                 add_to_top: true
-                fields:
-                  - { label: inputtype, name: inputtype, widget: select, options: ["text", "email", "tel", "url","date","textarea"], default: text }
-                  - { label: title, name: title, widget: string, required: false }
-                  - { label: placeholder, name: placeholder, widget: string, required: false }
-                  - { label: required, name: required, widget: boolean, default: false, required: false }
+                types:
+                  - label: "Input : text, tel, phone, url"
+                    name: text
+                    widget: list
+                    fields:
+                      - { label: inputtype, name: inputtype, widget: select, options: ["text", "email", "tel", "url","date"], default: text }
+                      - { label: title, name: title, widget: string, required: true }
+                      - { label: placeholder, name: placeholder, widget: string, required: false }
+                      - { label: required, name: required, widget: boolean, default: false, required: false }
+                  - label: Textarea
+                    name: textarea
+                    widget: list
+                    fields:
+                      - { label: title, name: title, widget: string, required: true, default: Message }
+                      - { label: required, name: required, widget: boolean, default: false, required: false }
+
+                  - label: "Options: Dropdown / Checkbox / Radio"
+                    name: options
+                    widget: list
+                    fields:
+                      - { label: title, name: title, widget: string, required: true }
+                      - { label: "Option type", name: inputtype, widget: select, options: ["Dropdown", "Radio", "Checkbox"], default: Dropdown }
+                      - { label: required, name: required, widget: boolean, default: false, required: false }
+                      - label: option
+                        name: option
+                        widget: list
+                        summary: '{{fields.title}} || {{fields.inputtype}}'
+                        add_to_top: true
+                        fields:
+                          - { label: title, name: title, widget: string, required: true }
+                          - { label: "checked/selected", name: checked, widget: boolean, default: false, required: false }
+
+
               - { label: text, name: text, widget: markdown, required: false }
               - name: "template"
                 label: "Template"

src/themes/grunn/assets/css/style.css

@@ -2176,10 +2176,6 @@ form button:focus {
   flex: none;
 }
 
-.flex-1 {
-  flex: 1 1 0%;
-}
-
 .flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -2200,14 +2196,6 @@ form button:focus {
   flex-basis: 15rem;
 }
 
-.basis-1\/3 {
-  flex-basis: 33.333333%;
-}
-
-.basis-2\/3 {
-  flex-basis: 66.666667%;
-}
-
 .-translate-y-20 {
   --tw-translate-y: -5rem;
   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));
@@ -2416,24 +2404,10 @@ form button:focus {
   border-radius: 0.5rem;
 }
 
-.rounded-none {
-  border-radius: 0px;
-}
-
 .rounded-sm {
   border-radius: 0.125rem;
 }
 
-.rounded-l-md {
-  border-top-left-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
-.rounded-r-md {
-  border-top-right-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
-}
-
 .border-4 {
   border-width: 4px;
 }
@@ -2450,10 +2424,6 @@ form button:focus {
   border-bottom-width: 4px;
 }
 
-.border-r-0 {
-  border-right-width: 0px;
-}
-
 .border-red-400 {
   --tw-border-opacity: 1;
   border-color: rgb(248 113 113 / var(--tw-border-opacity));
@@ -2492,11 +2462,6 @@ form button:focus {
   border-color: rgb(45 212 191 / var(--tw-border-opacity));
 }
 
-.border-gray-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity));
-}
-
 .border-teal-300 {
   --tw-border-opacity: 1;
   border-color: rgb(94 234 212 / var(--tw-border-opacity));
@@ -2615,11 +2580,6 @@ form button:focus {
   background-color: rgb(6 182 212 / var(--tw-bg-opacity));
 }
 
-.bg-gray-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-}
-
 .bg-lime-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(163 230 53 / var(--tw-bg-opacity));
@@ -3016,11 +2976,6 @@ form button:focus {
   color: rgb(3 105 161 / var(--tw-text-opacity));
 }
 
-.text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
 .text-green-900 {
   --tw-text-opacity: 1;
   color: rgb(20 83 45 / var(--tw-text-opacity));
@@ -3041,6 +2996,11 @@ form button:focus {
   color: rgb(124 45 18 / var(--tw-text-opacity));
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -3077,12 +3037,6 @@ form button:focus {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-sm {
-  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .drop-shadow-lg {
   --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -3462,11 +3416,6 @@ pre[class*="language-"] {
   background-color: rgb(190 242 100 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-slate-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(203 213 225 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-sky-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(125 211 252 / var(--tw-bg-opacity));
@@ -3545,11 +3494,6 @@ pre[class*="language-"] {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-cyan-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(6 182 212 / var(--tw-ring-opacity));
-}
-
 .focus\:ring-white:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
@@ -3718,11 +3662,6 @@ pre[class*="language-"] {
   .sm\:hidden {
     display: none;
   }
-
-  .sm\:text-sm {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
 }
 
 @media (min-width: 768px) {

src/themes/grunn/includes/components/form/field/input.njk

@@ -2,19 +2,19 @@
 <div class="flex flex-col">
 
   <label
-    for="form-item-{{ item.title | urlencode }}"
-    class="font-bold text-lg text-slate-700 dark:text-cyan-100 hover:text-slate-800 hover:cursor-pointer">
+    for="form-item-{{ item.title | slugify }}"
+    class="font-bold text-lg hover:text-slate-800 hover:cursor-pointer">
     {{ item.title }}
     {% if item.required %} * {% endif %}
   </label>
 
   <input
-  type="{{ item.inputtype }}"
-    name="{{ name }}"
-    id="form-item-{{ item.title | urlencode }}"
+    type="{{ item.inputtype }}"
+    name="{{ item.title | slugify }}"
+    id="form-item-{{ item.title | slugify }}"
     placeholder="{{ item.placeholder }} "
     {% if item.required %}required{% endif %}
-    class="rounded bg-slate-200 border-slate-300 dark:text-slate-800
+    class="rounded bg-slate-200 border-slate-300 text-gray-800
            focus:outline-none focus:border-white focus:ring-2 focus:ring-offset-2 focus:ring-offset-cyan-500 focus:ring-white
            focus:bg-slate-200"
   />

src/themes/grunn/includes/components/form/field/options.njk

@@ -0,0 +1,46 @@
+{%- if env.mode != 'prod' %}<!-- 👋 field/options.njk --> file{%- endif  -%}
+<div class="flex flex-col">
+
+  <label
+    for="form-item-{{ item.title | slugify }}"
+    class="font-bold text-lg hover:text-slate-800 hover:cursor-pointer">
+    {{ item.title }}
+    {% if item.required %} * {% endif %}
+  </label>
+
+{# Dropdown #}
+{% if item.inputtype == "Dropdown" %}
+  <select name="select">
+
+  {% for option in item.option %}
+   <option label="{{ option.title | slugify }}" {% if option.checked %} selected {% endif %}>
+    {{ option.title }}
+  </option>
+  {% endfor %}
+
+  </select>
+{# /Dropdown #}
+
+{% elif item.inputtype == "Radio" %}
+{# Radio #}
+  {% for option in item.option %}
+  <div class="py-4">
+    <input type="radio" id="{{ option.title | slugify }}" name="{{item.title | slugify }}" {% if option.checked %}checked{% endif %}>
+    <label for="{{ option.title | slugify }}"> {{ option.title }} </label>
+  </div>
+  {% endfor %}
+{# /Radio #}
+
+{% elif item.inputtype == "Checkbox" %}
+{# Checkbox #}
+  {% for option in item.option %}
+  <div class="py-4">
+    <input type="checkbox" id="{{ option.title | slugify }}" {% if option.checked %}checked{% endif %}>
+    <label for="{{ option.title | slugify }}"> {{ option.title }} </label>
+  </div>
+  {% endfor %}
+
+{% endif %}
+{#/ Checkbox #}
+</div>
+

src/themes/grunn/includes/components/form/field/textarea.njk

@@ -2,16 +2,20 @@
 <div class="flex flex-col ">
 
   <label
-    for="form-item-{{ item.title | urlencode  }}"
-    class="font-bold text-lg text-slate-700 dark:text-cyan-100 hover:text-slate-800 hover:cursor-pointer">{{ item.title }}</label>
+    for="form-item-{{ item.title | slugify  }}"
+    class="font-bold text-lg hover:cursor-pointer">
+    {{ item.title }}
+    {% if item.required %} * {% endif %}
+  </label>
+
+  <textarea
+    name="{{ item.title | slugify }}"
+    id="form-item-{{ item.title | slugify  }}"
+    placeholder="{{ item.placeholder }} "
+    {% if item.required %}required{% endif %}
+    class="w-full h-80
+          rounded bg-slate-200 border-slate-300  dark:text-slate-800
+          focus:outline-none focus:border-white focus:ring-2 focus:ring-offset-2 focus:ring-offset-cyan-500 focus:ring-white
+          focus:bg-slate-200"></textarea>
 
-    <textarea
-      name="{{ name }}"
-      id="form-item-{{ item.title | urlencode  }}"
-      placeholder="{{ item.placeholder }} "
-      {% if item.required %}required{% endif %}
-      class="w-full h-80
-            rounded bg-slate-200 border-slate-300  dark:text-slate-800
-            focus:outline-none focus:border-white focus:ring-2 focus:ring-offset-2 focus:ring-offset-cyan-500 focus:ring-white
-            focus:bg-slate-200"></textarea>
 </div>

src/themes/grunn/includes/components/form/form.njk

@@ -28,20 +28,19 @@
     {# Create form elements #}
     {% for item in component.elements %}
 
-      {% if item.inputtype == "textarea" %}
+      {% if item.type == "textarea" %}
         {% include "components/form/field/textarea.njk" %}
-      {% else %}
+      {% elif item.type == "text" %}
         {% include "components/form/field/input.njk" %}
-      {% endif %}
+      {% elif item.type == "options" %}
+        {% include "components/form/field/options.njk" %}
+     {% endif %}
 
     {% endfor %}
 
 
     <div class="flex flex-row justify-end">
 
-      {# <input type="reset" value="reset"
-             class="px-4 py-2 rounded-sm font-bold uppercase bg-slate-400 text-slate-800 hover:bg-slate-300">
-  #}
       <button
           aria-label="Submit"
           class="px-4 py-2 rounded-sm font-bold uppercase bg-lime-400 text-green-900 hover:bg-lime-300">Send</button>