Added Label component (#17)

Fixes #15

index.js

@@ -52,4 +52,5 @@ export * from './src/components/ToggleField';
 export * from './src/components/RangeField';
 export * from './src/components/Icon';
 export * from './src/components/Expander';
+export * from './src/components/Label';
 export * from './src/provider';

src/components/Label.js

@@ -0,0 +1,55 @@
+/*
+ * OS.js - JavaScript Cloud/Web Desktop Platform
+ *
+ * Copyright (c) 2011-2019, Anders Evenrud <[email protected]>
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * 1. Redistributions of source code must retain the above copyright notice, this
+ *    list of conditions and the following disclaimer
+ * 2. Redistributions in binary form must reproduce the above copyright notice,
+ *    this list of conditions and the following disclaimer in the documentation
+ *    and/or other materials provided with the distribution
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
+ * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * @author  Anders Evenrud <[email protected]>
+ * @licence Simplified BSD License
+ */
+
+import {h} from 'hyperapp';
+import {Element} from './Element';
+
+/**
+ * A label element
+ * @param {Object} props Properties
+ * @param {string} [props.text] Label Text
+ * @param {string} [props.placement] Placement
+ * @param {string} [props.for] The "for" attribute
+ * @param {BoxProperties} [props.box] Box Properties
+ * @param {h[]} children Children
+ */
+export const Label = (props = {}, children = []) => {
+  const placement = props.placement || 'top';
+  const text = props.text || '';
+
+  const elementProps = Object.assign({
+    class: ['osjs-gui-field-label', 'osjs-gui-field-label-on-' + placement]
+  }, props.box || {});
+
+  return h(Element, elementProps, [
+    h('label', {for: props.for}, text),
+    children
+  ]);
+};

src/styles/_input.scss

@@ -145,6 +145,51 @@
   }
 }
 
+.osjs-gui-field-label {
+  $half-margin: $base-margin / 2;
+
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: left;
+
+  & > label {
+    display: block;
+  }
+
+  & > .osjs-gui {
+    margin: 0;
+  }
+
+  &.osjs-gui-field-label-on-top {
+    flex-direction: column;
+
+    & > label {
+      margin-bottom: $half-margin;
+    }
+  }
+
+  &.osjs-gui-field-label-on-bottom {
+    flex-direction: column-reverse;
+
+    & > label {
+      margin-top: $half-margin;
+    }
+  }
+
+  &.osjs-gui-field-label-on-left {
+    flex-direction: row;
+    align-items: center;
+
+    & > label {
+      margin-right: $half-margin;
+    }
+
+    & > .osjs-gui {
+      flex: 1 1;
+    }
+  }
+}
+
 .osjs-root[data-dir="rtl"] {
   .osjs-gui-select-field > div::after {
     right: auto;