Doc generation

circle.yml

@@ -19,7 +19,7 @@ checkout:
   post:
     - git pull origin ${CIRCLE_BRANCH}
     - git clone git@github.com:wholesale-design-system/styleguide.git
-    - git config --global user.email circleci@circleci
+    - git config --global user.email t.schlage@gmx.net
     - git config --global user.name "${CIRCLE_PROJECT_USERNAME}"
 
 dependencies:

doc/components/date-picker.md

@@ -0,0 +1,45 @@
+# Date Picker
+
+## Simple date picker
+A date picker consist in general of an input element and a picker dialog which appears when the input
+is focused and gives the user the ability to select a date in a natural way. Our date picker is a complete
+component which comes with all of these. As with all of our components the changes are propagated via 
+custom change events which contains details about the selected date as object and pre-formatted string.
+Like a common input element you can set the `placeholder` and `value` attribute while the value has to be
+a date string which is parsable by `Date.parse()` or which matches the value in the `format` attribute if specified.
+
+<ws-date-picker placeholder="Select a date" change.delegate="log('Date1 changed', $event)"></ws-date-picker>
+```html
+<ws-date-picker placeholder="Select a date" id="date1"></ws-date-picker>
+<script>
+  document.getElementById('date1').addEventListener('change', event => console.log('Date1 changed', event));
+</script>
+```
+
+## Formatting dates
+If you have a localized website or simply have a global date format you want to use, you can change the 
+formatting of the date picker component by adding the `format` attribute. The pattern for the format follows 
+the rules of the [flatpickr](https://chmln.github.io/flatpickr/formatting/). For instance `Y-m-d` will
+result in the date `2017-06-04` which will be displayed in the input and passed through the change event.
+
+<ws-date-picker value="2017-06-04" format="Y-m-d" change.delegate="log('Date2 changed', $event.detail.value)"></ws-date-picker>
+```html
+<ws-date-picker value="2017-06-04" format="Y-m-d" id="date2"></ws-date-picker>
+<script>
+  document.getElementById('date2').addEventListener('change', event => console.log('Date2 changed', event));
+</script>
+```
+
+## Custom options
+Since our date picker is based on the flatpickr you can configure it like the flatpickr by passing an
+object through the `options` attribute. All possible options can be found [here](https://chmln.github.io/flatpickr/options/).
+
+<ws-date-picker value="2017-06-15" format="Y-m-d" options.bind="{minDate: '2017-06-01', maxDate: '2017-06-24'}"></ws-date-picker>
+```html
+<ws-date-picker
+  value="2017-06-15"
+  format="Y-m-d" 
+  options='{"minDate": "2017-06-01", "maxDate": "2017-06-24"}'>
+</ws-date-picker>
+```
+

doc/components/dropdown.md

@@ -26,6 +26,11 @@ like `text="Click me" icon="icon-filter"`. As following you can see an example o
   </div>
 </div>
 
+**Disabled**
+As any common html element the dropdown can be disabled by adding the `disabled="1"` flag to it.
+The style of the trigger will change and the dropdown con not be opened any more.
+<ws-dropdown type="button" text="Click me" items.bind='["Item 1", "Item 2"]' disabled="1"></ws-dropdown>
+
 **Items**:
 All dropdown elements requires the items attribute to be specified with an list of dropdown items.
 An item can be either a simple string or a object containing the following keys:

doc/components/notification.md

@@ -0,0 +1,52 @@
+# Notification
+
+## Setup
+Because the notifications are elements which should be displayed on top of everything and relative to the window
+you have to add the tag `<ws-notification></ws-notification>` to the most root container you can add.
+So either document body or the application root depending on your setup. This notification element is
+just the holder / list of notifications.
+
+## Creating notifications
+To create a notification you have to publish a custom event to the window containing the relevant data.
+The type of the event has to be `ws-notification-open` and the details has to be an object containing:
+- **title**: string, required
+- **description**: string, optional
+- **type**: info|error|warning|success, default: info
+- **lifetime**: number, milliseconds until disappearing, default: 2147483647
+
+<button class="mod-small" id="notification1" click.delegate="notification({title: 'Do you want to stay logged in?', type: 'info', lifetime: 5000})">Show notification</button>
+```html
+<button class="mod-small" id="notification1">Show notification</button>
+<script type="text/javascript">
+  document.getElementById('notification1').addEventListener('click', event => {
+    window.dispatchEvent(new CustomEvent('ws-notification-open', {detail: {title: 'Do you want to stay logged in?', type: 'info', lifetime: 5000}}));
+  });
+</script>
+```
+
+## Options
+Here you can try out the different combinations of the options you can provide to the notification.
+<div class="row collapse">
+  <div class="column small-6">
+    <label>Title</label>
+    <input type="text" placeholder="Title" value="Some title" ref="navTitle" />
+  </div>
+  <div class="column small-6">
+    <label>Description</label>
+    <input type="text" placeholder="Title" ref="navDescription" />
+  </div>
+  <div class="column small-6">
+    <label>Type</label>
+    <select ref="navType">
+      <option value="info">Info</option>
+      <option value="success">Success</option>
+      <option value="warning">Warning</option>
+      <option value="error">Error</option>
+    </select>
+  </div>
+  <div class="column small-6">
+    <label>Lifetime</label>
+    <input type="number" placeholder="Title" value="5000" ref="navLifetime" />
+  </div>
+</div></br>
+<button class="mod-small" click.delegate="notification({title: navTitle.value, description: navDescription.value, type: navType.value, lifetime: navLifetime.value})">Show notification</button>