Beautify OcContextualHelper

src/components/atoms/OcContextualHelper/OcContextualHelper.spec.js

@@ -27,7 +27,9 @@ describe("OcContextualHelper", () => {
     })
     it("should set a readMore link", async () => {
       const wrapper = getWrapperWithProps({ readMoreLink: "owncloud.design" })
-      expect(wrapper.find(".info-more-link").attributes()["href"]).toBe("owncloud.design")
+      const attributes = wrapper.find(".info-more-link").attributes()
+      expect(attributes["href"]).toBe("owncloud.design")
+      expect(attributes["target"]).toBe("_blank")
     })
     it("should set end-text prop", async () => {
       const wrapper = getWrapperWithProps({ endText: "test-my-text" })

src/components/atoms/OcContextualHelper/OcContextualHelper.vue

@@ -1,16 +1,12 @@
 <template>
-  <div>
-    <oc-button :id="`${buttonId}`" appearance="raw"> info </oc-button>
-    <oc-drop
-      :drop-id="dropId"
-      :toggle="`#${buttonId}`"
-      mode="click"
-      close-on-click
-      padding-size="small"
-    >
-      <div style="font-size: 14px">
+  <div class="oc-contextual-helper">
+    <oc-button :id="`${buttonId}`" appearance="raw">
+      <oc-icon name="question" fill-type="line" size="small" />
+    </oc-button>
+    <oc-drop :drop-id="dropId" :toggle="`#${buttonId}`" mode="click" close-on-click>
+      <div class="info-drop-content">
         <span class="info-text" v-text="text" />
-        <ul v-if="list.length" class="info-list">
+        <ul v-if="list.length" class="info-list oc-pl-l">
           <li v-for="(item, index) in list" :key="index">
             {{ item }}
           </li>
@@ -26,16 +22,16 @@
 
 <script>
 import OcButton from "../../atoms/OcButton/OcButton.vue"
+import OcIcon from "../../atoms/OcIcon/OcIcon.vue"
 
 export default {
   name: "OcContextualHelper",
   status: "unreleased",
-  components: { OcButton },
+  components: { OcButton, OcIcon },
   props: {
     text: {
       type: String,
       required: false,
-      default: "",
     },
     list: {
       type: Array,
@@ -45,12 +41,10 @@ export default {
     endText: {
       type: String,
       required: false,
-      default: "",
     },
     readMoreLink: {
       type: String,
       required: false,
-      default: "",
     },
   },
   computed: {
@@ -65,16 +59,53 @@ export default {
 }
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.oc-contextual-helper {
+  display: inline-block;
+  .oc-button {
+    vertical-align: middle;
+  }
+  .info-drop-content {
+    font-size: 14px;
+    color: var(--oc-color-text-muted);
+  }
+  .info-list {
+    list-style-position: outside;
+    li {
+      padding-left: 0px;
+    }
+  }
+}
+</style>
 
 <docs>
 ## Examples
+Use text only.
+```js
+<template>
+  <div>
+    <oc-contextual-helper v-bind="helperContent"/>
+  </div>
+</template>
+<script>
+export default {
+  computed: {
+    helperContent() {
+      return {
+        text: "Invite persons or groups to access this file or folder.",
+      }
+    }
+  },
+}
+</script>
+```
 
+Use Text, List, End-Text and Read-More-Link.
 ```js
 <template>
-<div>
-  <oc-contextual-helper v-bind="helperContent"/>
-</div>
+  <div>
+    <oc-contextual-helper v-bind="helperContent"/>
+  </div>
 </template>
 <script>
 export default {
@@ -86,9 +117,9 @@ export default {
           "Enter a name or group to share this item",
           "If you share a folder,  all of its contents and subfolders will be shared with the entered persons or groups",
           "Invited persons or groups will be notified via e-mail or in-app notification",
-          "Invited persons can not see who else has access"
         ],
-        endText: "endtext"
+        endText: "Invited persons can not see who else has access",
+        readMoreLink: "https://owncloud.design"
       }
     }
   },