Merge pull request #11 from adidas/feature/forms

Forms: fixes and example page
adidas · Nov 14, 2018 · 4336d2e · 4336d2e
2 parents 736a3bb + 0b5afd9
commit 4336d2e
Show file tree

Hide file tree

Showing 53 changed files with 3,324 additions and 1,177 deletions.
diff --git a/.gitignore b/.gitignore
@@ -16,6 +16,7 @@
 dist
 docs
 node_modules
+test/results
 
 # Untracked application files and directories:
 .nuxt

diff --git a/.travis.yml b/.travis.yml
@@ -9,6 +9,7 @@ install:
 script:
 - npm run lint
 - npm run build
+- npm run test
 - if [ "$TRAVIS_BRANCH" == "master" ]; then
     HOSTNAME=//adidas.github.io/ BASE=/adidas-yarn-design-system/ npm run doc;
   fi

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,35 @@
+# 1.4.0
+
+- Fixed forms and controls.
+- Fixed navigation tabs.
+- Fixed minor style issues and variable values.
+  - Components: articles, buttons, sidebar and tags.
+- Added test tools using `jest`.
+  -  Unit tests for application startup scripts.
+- Added forms component example.
+- Removed distributed `yarn.js` library because the lack of necessary functionaly.
+
+### [ forms ]
+
+- Added `--checkmark` modifier to customize checkboxes.
+- Added `.form-inline` class.
+- Fixed `.form-group`, `.control` classes and their subclasses.
+- Removed `form-control__tag`, `form-control__tags` classes.
+- Improved code of feedback classes using a mixin.
+
+### [ input-groups ]
+
+- Added `.input-group-addon--icon` class.
+
+### [ navs ]
+
+- Fixed navigation tabs and pills style.
+
+### [ example ]
+
+- Added forms component for input, checkbox, radio button and text area.
+- Refactored pages layout using containers.
+
 # 1.3.0
 
 - Added ordered/unordered list style.

diff --git a/example/components/nav-tabs/default.vue b/example/components/nav-tabs/default.vue
@@ -0,0 +1,25 @@
+<template>
+  <ul class="nav nav-pills">
+    <li class="nav-tab"
+        v-for="{ id, to, active } in tabs"
+        :key="id"
+        :class="{ active: active }">
+      <nuxt-link class="nav-link" :to="to">
+        {{ $t(`tabs.${ id }`) }}
+      </nuxt-link>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: 'nav-tabs',
+  props: [ 'tabs' ]
+};
+</script>
+
+<style lang="less">
+  .nav.nav-pills {
+    margin-bottom: 0;
+  }
+</style>
diff --git a/example/components/page-title/default.vue b/example/components/page-title/default.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="jumbotron">
+    <div class="row">
+      <div class="col-xs-12 col-sm-8 col-sm-offset-2">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/example/containers/markdown.vue b/example/containers/markdown.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="container">
+    <page-title>
+      <slot name="header"></slot>
+    </page-title>
+    <div class="row">
+      <div class="col-xs-12 col-sm-8 col-sm-offset-2">
+        <markdown-renderer type="url" :src="src"/>
+      </div>
+    </div>
+    <slot name="content"></slot>
+  </div>
+</template>
+
+<script>
+import MarkdownRenderer from '~/components/markdown/renderer';
+
+export default {
+  props: [ 'src' ],
+  components: {
+    MarkdownRenderer
+  }
+};
+</script>
diff --git a/example/containers/tabs.vue b/example/containers/tabs.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <nav-tabs class="col-xs-12" :tabs="tabs"/>
+    </div>
+    <page-title>
+      <slot name="header"></slot>
+    </page-title>
+    <slot name="content"></slot>
+  </div>
+</template>
+
+<script>
+import NavTabs from '~/components/nav-tabs/default.vue';
+import { getFormTabs } from '~/services/forms';
+
+export default {
+  props: [ 'page' ],
+  computed: {
+    tabs() {
+      return getFormTabs(this.page);
+    }
+  },
+  components: {
+    NavTabs
+  }
+};
+</script>
diff --git a/example/locales/en.json b/example/locales/en.json
@@ -17,6 +17,10 @@
     "contact": "contact",
     "imprint": "imprint",
     "button": "button",
+    "checked": "checked",
+    "unchecked": "unchecked",
+    "selected": "selected",
+    "disabled": "disabled",
     "color": "color",
     "colors": {
       "blue": "blue",
@@ -42,8 +46,25 @@
       "middle": "middle",
       "top": "top",
       "bottom": "bottom"
+    },
+    "input": {
+      "text": "Unput text",
+      "text-left": "@:common.input.text (left)",
+      "text-right": "@:common.input.text (right)",
+      "group": "Unput group",
+      "group-left": "@:common.input.group (left)",
+      "group-right": "@:common.input.group (right)"
+    },
+    "form": {
+      "horizontal-input": "Horizontal input"
     }
   },
+  "tabs": {
+    "input": "Input",
+    "checkbox": "Checkbox",
+    "radio": "Radio button",
+    "textarea": "Textarea"
+  },
   "views": {
     "index": {
       "name": "Home",
@@ -161,6 +182,50 @@
         "mobile": "Mobile buttons"
       }
     },
+    "components-forms": {
+      "name": "Forms"
+    },
+    "components-form-input": {
+      "name": "Inputs",
+      "sections": {
+        "basic": {
+          "name": "Basic inputs",
+          "text": "Text input",
+          "readonly": "Readonly input",
+          "disabled": "Disabled input",
+          "required": "Required input value"
+        },
+        "feedback": {
+          "name": "Feedback inputs",
+          "success": "Success state",
+          "warning": "Warning state",
+          "error": "Error state",
+          "basic": "Basic feedback"
+        },
+        "horizontal": {
+          "name": "Horizontal form"
+        },
+        "inline": {
+          "name": "Inline form"
+        }
+      }
+    },
+    "components-form-checkbox": {
+      "name": "Checkboxes"
+    },
+    "components-form-radio": {
+      "name": "Radio buttons",
+      "values": {
+        "first": "First value",
+        "second": "Second value",
+        "third": "Third value"
+      }
+    },
+    "components-form-textarea": {
+      "name": "Textarea",
+      "label": "Free text area",
+      "label-disabled": "Free text area (disabled)"
+    },
     "plugins": {
       "name": "Plugins",
       "description": "CSS extensions for @:meta.yarn"

diff --git a/example/pages/components/buttons.vue b/example/pages/components/buttons.vue
@@ -1,13 +1,9 @@
 <template>
   <div class="container">
-    <div class="jumbotron">
-      <div class="row">
-        <div class="col-xs-12 col-sm-10 col-sm-offset-1">
-          <p>{{ $t('views.components.name') }}</p>
-          <h2>{{ $t('views.components-buttons.name') }}</h2>
-        </div>
-      </div>
-    </div>
+    <page-title>
+      <p>{{ $t('views.components.name') }}</p>
+      <h2>{{ $t('views.components-buttons.name') }}</h2>
+    </page-title>
     <div class="row">
       <div class="col-xs-12 col-sm-10 col-sm-offset-1">
         <section class="section">

diff --git a/example/pages/components/form/checkbox.vue b/example/pages/components/form/checkbox.vue
@@ -0,0 +1,78 @@
+<template>
+  <tabs-container page="checkbox">
+    <template slot="header">
+      <p>{{ $t('views.components-forms.name') }}</p>
+      <h2>{{ $t('views.components-form-checkbox.name') }}</h2>
+    </template>
+    <template slot="content">
+      <div class="container">
+        <section class="section row">
+          <form @submit.prevent>
+            <div class="col-xs-12 col-sm-6">
+              <label class="control control--checkbox">
+                <input class="control__input" type="checkbox"/>
+                <span class="control__indicator yarn-icon yarn-icon yarn-icon--checkbox"></span>
+                <span class="control__label">{{ $t('common.unchecked') }}</span>
+              </label>
+              <label class="control control--checkbox">
+                <input class="control__input" type="checkbox" checked="checked"/>
+                <div class="control__indicator yarn-icon yarn-icon yarn-icon--checkbox"></div>
+                <span class="control__label">{{ $t('common.checked') }}</span>
+              </label>
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <label class="control control--checkbox disabled">
+                <input class="control__input" type="checkbox" disabled="disabled"/>
+                <span class="control__indicator yarn-icon yarn-icon yarn-icon--checkbox"></span>
+                <span class="control__label">{{ $t('common.unchecked') }} ({{ $t('common.disabled') }})</span>
+              </label>
+              <label class="control control--checkbox disabled">
+                <input class="control__input" type="checkbox" disabled="disabled" checked="checked"/>
+                <span class="control__indicator yarn-icon yarn-icon yarn-icon--checkbox"></span>
+                <span class="control__label">{{ $t('common.checked') }} ({{ $t('common.disabled') }})</span>
+              </label>
+            </div>
+          </form>
+        </section>
+        <section class="section row">
+          <form @submit.prevent>
+            <div class="col-xs-12 row">
+              <div class="col-xs-12 col-sm-6">
+                <label class="control control--checkmark background-color--yellow-20">
+                  <input class="control__input" type="checkbox"/>
+                  <span class="control__indicator control__indicator--checkmark">
+                    <span class="yarn-icon yarn-icon--checkmark"></span>
+                  </span>
+                  <span class="control__label">{{ $t('common.unchecked') }}</span>
+                </label>
+                <label class="control control--checkmark background-color--orange-20">
+                  <input class="control__input" type="checkbox" checked="checked"/>
+                  <span class="control__indicator control__indicator--checkmark">
+                    <span class="yarn-icon yarn-icon--checkmark"></span>
+                  </span>
+                  <span class="control__label">{{ $t('common.checked') }}</span>
+                </label>
+              </div>
+              <div class="col-xs-12 col-sm-6">
+                <label class="control control--checkmark disabled background-color--yellow-20">
+                  <input class="control__input" type="checkbox" disabled="disabled"/>
+                  <span class="control__indicator control__indicator--checkmark">
+                    <span class="yarn-icon yarn-icon--checkmark"></span>
+                  </span>
+                  <span class="control__label">{{ $t('common.unchecked') }} ({{ $t('common.disabled') }})</span>
+                </label>
+                <label class="control control--checkmark disabled background-color--orange-20">
+                  <input class="control__input" type="checkbox" disabled="disabled" checked="checked"/>
+                  <span class="control__indicator control__indicator--checkmark">
+                    <span class="yarn-icon yarn-icon--checkmark"></span>
+                  </span>
+                  <span class="control__label">{{ $t('common.checked') }} ({{ $t('common.disabled') }})</span>
+                </label>
+              </div>
+            </div>
+          </form>
+        </section>
+      </div>
+    </template>
+  </tabs-container>
+</template>
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,6 +16,7 @@ @@
     dist
     docs
     node_modules
+    test/results
     # Untracked application files and directories:
     .nuxt
@@ Expand Down @@