feat: improved fd-input-group and added fd-form-label, fd-input-group…

…-search (…)

jest.setup.js

@@ -32,15 +32,15 @@ global.document.createRange = () => ({
 const VUE_WARN_TOKEN = "[Vue warn]";
 const VUE_ERROR_TOKEN = "[Vue error]";
 
-const _console__error = console.error; // eslint-disable-line no-console
+const _console__error = console.log; // eslint-disable-line no-console
 
 // eslint-disable-next-line no-console
 console.error = (msg, ...params) => {
   _console__error(msg, params);
 
   if (msg.indexOf(VUE_WARN_TOKEN) > -1 || msg.indexOf(VUE_ERROR_TOKEN) > -1) {
     throw Error(
-      "Detected a warning/error from Vue. This will fail the test that caused it. The causing error was logged above."
+      "Detected a warning/error from Vue. This will fail the test that caused it. The causing error was logged above and right here: "
     );
   }
 };

package.json

@@ -58,9 +58,9 @@
     "@vue/component-compiler": "^4.0.0",
     "@vue/eslint-config-prettier": "^4.0.1",
     "@vue/test-utils": "1.0.0-beta.29",
-    "@vuese/cli": "^2.4.1",
-    "@vuese/markdown-render": "^2.2.8",
-    "@vuese/parser": "^2.1.7",
+    "@vuese/cli": "^2.4.2",
+    "@vuese/markdown-render": "^2.2.9",
+    "@vuese/parser": "^2.1.8",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.8.0",

src/components/ButtonGroup/ButtonGroupButton.vue

@@ -4,7 +4,7 @@
     v-on="$listeners"
     :aria-pressed="String(pressed)"
     @click="toggle"
-    :compact="compact"
+    :compact="finalCompact"
     ><slot />
   </FdButton>
 </template>

src/components/Form/Controls/InputMixin.js

@@ -25,7 +25,7 @@ export default {
     inputClasses() {
       return {
         "fd-form__control": !this.plain,
-        "fd-input--compact": this.compact,
+        "fd-input--compact": this.finalCompact,
         ...this.inputStateClasses,
         "is-required": this.required
       };

src/components/Icon/__tests__/__snapshots__/Icon.test.js.snap

@@ -3,5 +3,6 @@
 exports[`Icon Test Scripts Renders correctly 1`] = `
 <span
   class="sap-icon--cart sap-icon--s"
+  role="presentation"
 />
 `;

src/components/InputGroup/InputGroup.vue

@@ -37,9 +37,7 @@ export default {
   components: { FdAddonBeforeProvider, FdAddonAfterProvider },
   props: {
     before: { type: String, default: null },
-    after: { type: String, default: null },
-    afterClass: { type: String, default: null },
-    compact: { type: Boolean, default: false }
+    after: { type: String, default: null }
   },
   computed: {
     hasBefore() {
@@ -53,7 +51,7 @@ export default {
       return [
         "fd-input-group__addon",
         "fd-input-group__addon--after",
-        this.compact ? "fd-input-group--compact" : "",
+        this.finalCompact ? "fd-input-group--compact" : "",
         ...(afterClass != null ? [afterClass] : [])
       ];
     },

src/components/InputGroup/InputGroupAddon.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script>
+// Use this in before-/after-slots within fd-input-groups.
 export default {
   name: "FdInputGroupAddon",
   inject: {

src/components/Form/Controls/__tests__/InputGroup.test.js → src/components/InputGroup/__tests__/InputGroup.test.js

@@ -1,23 +1,26 @@
 import { mount } from "@vue/test-utils";
-import InputGroup from "../InputGroup.vue";
-import Input from "../Input.vue";
+import FdInputGroup from "../InputGroup.vue";
+import FdInputGroupAddon from "../InputGroupAddon.vue";
+import FdInput from "../../Form/Controls/Input.vue";
 
 describe("InputGroup", () => {
   const before = "$";
   const after = "€";
 
-  const wrapper = mount(InputGroup, {
-    propsData: {
-      before,
-      after
-    },
-    slots: {
-      default: {
-        render(h) {
-          return h(Input);
-        }
-      }
-    }
+  const wrapper = mount({
+    components: { FdInputGroup, FdInputGroupAddon, FdInput },
+    template: `
+    <fd-input-group>
+      <template #before>
+        <fd-input-group-addon>$</fd-input-group-addon>
+      </template>
+      <template #after>
+        <fd-input-group-addon>€</fd-input-group-addon>
+      </template>
+      <template #input>
+        <fd-input />
+      </template>
+    </fd-input-group>`
   });
 
   it("renders correctly", () => {
@@ -34,14 +37,14 @@ describe("InputGroup", () => {
   });
 
   describe("Compact Style", () => {
-    const wrapper = mount(InputGroup, {
+    const wrapper = mount(FdInputGroup, {
       propsData: {
         compact: true
       },
       slots: {
         default: {
           render(h) {
-            return h(Input);
+            return h(FdInput);
           }
         }
       }

src/components/Form/Controls/__tests__/__snapshots__/InputGroup.test.js.snap → src/components/InputGroup/__tests__/__snapshots__/InputGroup.test.js.snap

@@ -4,15 +4,11 @@ exports[`InputGroup Compact Style renders correctly 1`] = `
 <div
   class="fd-input-group fd-input-group--compact"
 >
-  <!---->
-   
-  <input
-    class="fd-input fd-form__control"
-    placeholder=""
-    type="text"
-  />
-   
-  <!---->
+  
+      
+    
+      
+  
 </div>
 `;
 
@@ -25,13 +21,13 @@ exports[`InputGroup renders correctly 1`] = `
   >
     $
   </span>
-   
+    
   <input
-    class="fd-input fd-form__control"
+    class="fd-form__control fd-input"
     placeholder=""
     type="text"
   />
-   
+    
   <span
     class="fd-input-group__addon fd-input-group__addon--after"
   >

src/components/TimePicker/TimePicker.vue

@@ -21,6 +21,7 @@
           </template>
         </fd-input-group>
       </template>
+
       <fd-time-item
         :value="timeValue"
         :showMeridian="showMeridian"

src/docs/components/component-api.vue

@@ -15,17 +15,19 @@ export default {
   computed: {
     componentDocProps() {
       const json = this.jsonContent;
-      const { props = [] } = json;
+      const { name, props = [], events = [], slots = [] } = json;
       const documentedProps = props.map(prop => ({
         ...prop,
         type: prop.type || null,
         defaultValue: prop.default
       }));
+      const description = json.componentDesc.default;
       return {
-        name: json.name,
+        name,
+        description,
         documentedProps,
-        documentedEvents: json.events || [],
-        documentedSlots: json.slots || []
+        documentedEvents: events,
+        documentedSlots: slots
       };
     },
     jsonContent() {

src/docs/components/doc/component-doc.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <component-name :name="name" />
+    <div v-if="description.length > 0">{{ formattedDescription }}</div>
     <div
       class="component-doc__name"
       v-fd-type:5
@@ -46,6 +47,11 @@ import ComponentName from "./component-name.vue";
 
 export default {
   components: { ComponentName, EventDoc, PropDoc, SlotDoc },
+  computed: {
+    formattedDescription() {
+      return this.description.join("<br />");
+    }
+  },
   methods: {
     keyForProp(prop) {
       return `documented-component-${this.name}-prop-${prop.name}`;
@@ -59,6 +65,7 @@ export default {
   },
   props: {
     name: { type: String },
+    description: { type: Array, default: () => [] },
     documentedProps: { type: Array, default: () => [] },
     documentedSlots: { type: Array, default: () => [] },
     documentedEvents: { type: Array, default: () => [] }

src/docs/pages/Input Group/5-input-group-compact.vue

@@ -1,7 +1,4 @@
 <title>Compact Mode</title>
-<docs>
-  bla
-</docs>
 <template>
   <fd-form-item>
     <fd-form-label>Compact Input Group:</fd-form-label>

src/mixins/Compactable.js

@@ -1,13 +1,23 @@
 export default {
   inject: {
-    compactableContainer: { default: { compact: false } }
+    $_FdCompactMixin: {
+      default: null
+    }
+  },
+
+  props: {
+    compact: {
+      type: Boolean,
+      default: false
+    }
   },
+
   computed: {
-    enclosedByCompactContainer() {
-      return this.compactableContainer.compact;
-    },
-    compact() {
-      return this.enclosedByCompactContainer;
+    finalCompact() {
+      return (
+        this.compact ||
+        (this.$_FdCompactMixin && this.$_FdCompactMixin.data.value)
+      );
     }
   }
 };