Added form components

src/assets/stylesheets/styles.css

@@ -2,44 +2,6 @@
   #STYLES
 \*------------------------------------*/
 
-/**
- * CONTENTS
- *
- * SETTINGS
- * Global...............Global variables and settings
- * Colors...............Global color variables
- *
- * TOOLS
- * -
- *
- * BASE
- * Page.................Page setup like html and body
- * Form.................Inputs
- * Table................Table
- * Type.................Header, links, paragraphs
- * Quote................Blockquote
- *
- * COMPONENTS
- * Button...............Buttons
- * Card.................Cards
- * Container............Container to center your web site
- * Form.................Forms
- * Grid.................Global grid system based on Lost
- * Heading..............Heading
- * Icon.................Icons
- * Label................Labels
- * List.................List
- * Media................Media
- * Message..............Message
- * Pagination...........Pagination
- * Panel................Panels
- * Paragraph............Paragraph
- * Wrapper..............Wrappers for full width backgrounds
- *
- * Utilities
- * Global...............Global utility states like u-hidden
- */
-
 
 /*
  * #SETTINGS
@@ -69,6 +31,8 @@
 @import "../../components/Card/Card.css";
 @import "../../components/Container/Container.css";
 @import "../../components/Form/Form.css";
+@import "../../components/FormField/FormField.css";
+@import "../../components/FormSelect/FormSelect.css";
 @import "../../components/Grid/Grid.css";
 @import "../../components/Heading/Heading.css";
 @import "../../components/Icon/Icon.css";

src/components/Card/Card.html

@@ -23,4 +23,5 @@
       {{ caller() }}
     </div>
   </div>
+
 {% endmacro %}

src/components/Form/Form.html

@@ -0,0 +1,8 @@
+{% from 'components/FormInput/FormInput.html' import FormInput %}
+
+{% macro Form(value='', type='', description='', label='') %}
+
+  {{ FormInput(value=value) }}
+  <label>{{ label }}</label>
+
+{% endmacro %}

src/components/Form/example.html

@@ -0,0 +1,3 @@
+{% from 'components/Form/Form.html' import Form %}
+
+{{ Form(label='Label', type='text', value='pietje', description='desc') }}

src/components/FormCheckbox/FormCheckbox.html

@@ -0,0 +1,3 @@
+{% macro FormCheckbox() %}
+  <input type="checkbox">
+{% endmacro %}

src/components/FormCheckbox/example.html

@@ -0,0 +1,3 @@
+{% from 'components/FormCheckbox/FormCheckbox.html' import FormCheckbox %}
+
+{{ FormCheckbox() }}

src/components/FormField/FormField.css

@@ -0,0 +1,12 @@
+/*------------------------------------*\
+  #COMPONENTS-FORM-FIELD
+\*------------------------------------*/
+
+.c-form-field {
+
+}
+
+.c-form-field--error {
+
+  color: var(--color-alert-50);
+}

src/components/FormField/FormField.html

@@ -0,0 +1,9 @@
+{% macro FormField(label='', error='', description='') %}
+
+  <div class="c-form-field {% if error == 'true' %} c-form-field--error {% endif %}">
+    <label>{{ label }}</label>
+    {{ caller() }}
+    <small>{{ description }}</small>
+  </div>
+
+{% endmacro %}

src/components/FormField/example.html

@@ -0,0 +1,10 @@
+{% from 'components/FormField/FormField.html' import FormField %}
+{% from 'components/FormInput/FormInput.html' import FormInput %}
+
+{% call FormField(label='Label', error='true', description='Dit is een beschrijving') %}
+  {% call FormInput(type='text', value='Tekst') %}{% endcall %}
+{% endcall %}
+
+{% call FormField(label='Label', description='Dit is een beschrijving') %}
+  {% call FormInput(type='text') %}{% endcall %}
+{% endcall %}

src/components/FormInput/FormInput.html

@@ -0,0 +1,5 @@
+{% macro FormInput(type='text', value='', placeholder='', disabled='false') %}
+
+  <input type="{{ type }}" placeholder="{{ placeholder }}" value="{{ value }}" {% if disabled == 'true' %} disabled {% endif %}>
+
+{% endmacro %}

src/components/FormInput/example.html

@@ -0,0 +1,7 @@
+{% from 'components/FormInput/FormInput.html' import FormInput %}
+
+{{ FormInput(type='text', value='', placeholder='Met placeholder') }}
+{{ FormInput(type='text', value='Disabled', disabled="true") }}
+{{ FormInput(type='email', value='Met value', placeholder='') }}
+{{ FormInput(type='number', value='Met value', placeholder='') }}
+{{ FormInput(type='password', value='ditismijnpassword', placeholder='') }}

src/components/FormRadiobutton/FormRadiobutton.html

@@ -0,0 +1,3 @@
+{% macro FormRadiobutton() %}
+  <input type="radio">
+{% endmacro %}

src/components/FormRadiobutton/example.html

@@ -0,0 +1,3 @@
+{% from 'components/FormRadiobutton/FormRadiobutton.html' import FormRadiobutton %}
+
+{{ FormRadiobutton() }}

src/components/FormSelect/FormSelect.css

@@ -0,0 +1,17 @@
+.c-form-select {
+  border: 1px solid var(--color-neutral-30);
+  border-radius: var(--border-radius-10);
+  box-shadow: 0px 1px 3px color(var(--color-neutral-10) alpha(10%));
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  background: url('image.svg') right 0.5rem center no-repeat;
+
+  & select {
+    border: none;
+    box-shadow: none;
+    background: transparent;
+    background-image: none;
+    -webkit-appearance: none;
+  }
+}

src/components/FormSelect/FormSelect.html

@@ -0,0 +1,9 @@
+{% macro FormSelect() %}
+
+  <div class="c-form-select">
+    <select>
+      {{ caller() }}
+    </select>
+  </div>
+
+{% endmacro %}

src/components/FormSelect/example.html

@@ -0,0 +1,7 @@
+{% from 'components/FormSelect/FormSelect.html' import FormSelect %}
+
+{% call FormSelect() %}
+  <option>Value 1</option>
+  <option>Value 2</option>
+  <option>Value 3</option>
+{% endcall %}

src/components/FormTextarea/FormTextarea.html

@@ -0,0 +1,5 @@
+{% macro FormTextarea(placeholder='') %}
+
+  <textarea cols="50" rows="6" placeholder="{{ placeholder }}">{{ caller() }}</textarea>
+
+{% endmacro %}

src/components/FormTextarea/example.html

@@ -0,0 +1,3 @@
+{% from 'components/FormTextarea/FormTextarea.html' import FormTextarea %}
+
+{% call FormTextarea(placeholder='Placeholder') %}Dit is een textarea.{% endcall %}

src/components/Icon/example.html

@@ -1,3 +1,3 @@
 {% from 'components/Icon/Icon.html' import Icon %}
 
-{% call Icon(icon='printer') %}{% endcall %}
+{{ Icon(icon='printer') }}

src/components/Media/example.html

@@ -1,4 +1,4 @@
 {% from 'components/Media/Media.html' import Media %}
 
-{% call Media(type='image', url='https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Canis_lupus_laying.jpg/266px-Canis_lupus_laying.jpg', caption='My caption') %}{% endcall %}
-{% call Media(type='video', url='https://player.vimeo.com/video/155640569?title=0&byline=0&portrait=0') %}{% endcall %}
+{{ Media(type='image', url='https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Canis_lupus_laying.jpg/266px-Canis_lupus_laying.jpg', caption='My caption') }}
+{{ Media(type='video', url='https://player.vimeo.com/video/155640569?title=0&byline=0&portrait=0') }}

src/components/Pagination/example.html

@@ -1,3 +1,3 @@
 {% from 'components/Pagination/Pagination.html' import Pagination %}
 
-{% call Pagination() %}{% endcall %}
+{{ Pagination() }}

src/layout/styleguide.html

@@ -26,7 +26,6 @@ <h2 class="u-spacing">Styleguide</h2>
           <li><a href="/styleguide/index.html">Introduction</a></li>
           <li><a href="/styleguide/settings.html">Settings</a></li>
           <li><a href="/styleguide/base.html">Base</a></li>
-          <li><a href="/styleguide/layout.html">Layout</a></li>
           <li><a href="/styleguide/components.html">Components</a></li>
           <li><a href="/styleguide/utilities.html">Utilities</a></li>
         </ul>

src/styleguide/components.html

@@ -61,84 +61,39 @@ <h2 class="sg-h2" id="list">Pagination</h2>
     {% include 'components/Pagination/example.html' %}
   </div>
 
+  <h2 class="sg-h2" id="list">FormInput</h2>
+  <div class="sg-component">
+    {% include 'components/FormInput/example.html' %}
+  </div>
 
+  <h2 class="sg-h2" id="list">FormSelect</h2>
+  <div class="sg-component">
+    {% include 'components/FormSelect/example.html' %}
+  </div>
 
-  Ok, voor het form heb je de volgende componenten:
-
-  Form
-  FormField
-  FormInput (type=text, email, number etc etc)
-  FormSelect
-  FormTextarea
-
-
-  <h2 class="sg-h2" id="forms">Component Form</h2>
-  <h3 class="sg-h3">Floated</h3>
-  <div class="sg-component">
-    <form action="/" method="post">
-      <fieldset>
-        <legend>Personal details</legend>
-        <ul class="c-form">
-          <li class="c-form__item">
-            <label class="c-form__label" for="#TAG1">Name</label>
-            <div class="c-form__fields">
-              <input type="text" id="#TAG1" name="#TAG1" />
-              <small>Please add your first and last name</small>
-            </div>
-          </li>
-          <li class="c-form__item c-form__item--error">
-            <label class="c-form__label" for="#TAG3">E-mail</label>
-            <div class="c-form__fields">
-              <input type="text" id="#TAG3" name="#TAG3" />
-              <ul class="c-form__errors">
-                <li>Oh no, that can't be your e-mail address</li>
-              </ul>
-            </div>
-          </li>
-          <li class="c-form__item">
-            <label class="c-form__label" for="#TAG4">Suggestions</label>
-            <div class="c-form__fields">
-
-              <select>
-                <option value="volvo">Volvo</option>
-                <option value="saab">Saab</option>
-                <option value="opel">Opel</option>
-                <option value="audi">Audi</option>
-              </select>
-
-              <br />
-
-              <select multiple>
-                <option value="volvo">Volvo</option>
-                <option value="saab">Saab</option>
-                <option value="opel">Opel</option>
-                <option value="audi">Audi</option>
-              </select>
-
-              <br />
-
-              <textarea cols="50" rows="6" id="#TAG4" name="#TAG4"></textarea>
-              <small>Your suggestions and feedback would be really helpful to us</small>
-            </div>
-          </li>
-          <li class="c-form__item">
-            <label class="c-form__label">Subscription</label>
-            <div class="c-form__fields">
-              <p class="c-form__description">Premium</p>
-            </div>
-          </li>
-          <li class="c-form__item">
-            <label class="c-form__label" for="#TAG6">Extra options</label>
-            <div class="c-form__fields">
-              <ul class="c-form__checklist">
-                <li><label for="#TAG6"><input type="checkbox" id="#TAG6" name="#TAG6" />I want to receive awesome newsletters</label></li>
-                <li><label for="#TAG7"><input type="checkbox" id="#TAG7" name="#TAG7" />Send me a wolf doll</label></li>
-              </ul>
-            </div>
-          </li>
-        </ul>
-      </fieldset>
-    </form>
+  <h2 class="sg-h2" id="list">FormTextarea</h2>
+  <div class="sg-component">
+    {% include 'components/FormTextarea/example.html' %}
+  </div>
+
+  <h2 class="sg-h2" id="list">FormRadiobutton</h2>
+  <div class="sg-component">
+    {% include 'components/FormRadiobutton/example.html' %}
+  </div>
+
+  <h2 class="sg-h2" id="list">FormCheckbox</h2>
+  <div class="sg-component">
+    {% include 'components/FormCheckbox/example.html' %}
+  </div>
+
+  <h2 class="sg-h2" id="list">FormField</h2>
+  <div class="sg-component">
+    {% include 'components/FormField/example.html' %}
+  </div>
+
+  <h2 class="sg-h2" id="list">Form</h2>
+  <div class="sg-component">
+    {% include 'components/Form/example.html' %}
   </div>
 
 {% endblock %}