Add OcInfoDrop component (#2286)

* Add OcInfoDrop component

* Remove gettext

* Lint

* Bind

* Add ref to drop

* Add changelog items

* Add props description

* Fix unit tests

changelog/unreleased/enhancement-add-oc-info-drop

@@ -0,0 +1,5 @@
+Enhancement: Add OcInfoDrop
+
+We've added the new component OcInfoDrop, which will be consumed by the OcContextualHelper component.
+
+https://github.com/owncloud/owncloud-design-system/pull/2286

src/components/molecules/OcContextualHelper/OcContextualHelper.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="oc-contextual-helper">
+    <oc-button :id="buttonId" appearance="raw">
+      <oc-icon name="question" fill-type="line" size="small" />
+    </oc-button>
+    <oc-info-drop :drop-id="dropId" :toggle="toggleId" v-bind="$props" />
+  </div>
+</template>
+
+<script>
+import uniqueId from "../../../utils/uniqueId"
+import OcButton from "../../atoms/OcButton/OcButton.vue"
+import OcIcon from "../../atoms/OcIcon/OcIcon.vue"
+import OcInfoDrop from "../../molecules/OcInfoDrop/OcInfoDrop.vue"
+
+export default {
+  name: "OcContextualHelper",
+  status: "unreleased",
+  components: { OcButton, OcIcon, OcInfoDrop },
+  props: {
+    /**
+     * Title
+     */
+    title: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    /**
+     * Text at the beginning
+     */
+    text: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    /**
+     * List element
+     */
+    list: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    /**
+     * Text at the end
+     */
+    endText: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    /**
+     * Read more link at the end
+     */
+    readMoreLink: {
+      type: String,
+      required: false,
+      default: "",
+    },
+  },
+  computed: {
+    dropId() {
+      return uniqueId("oc-contextual-helper-")
+    },
+    buttonId() {
+      return `${this.dropId}-button`
+    },
+    toggleId() {
+      return `#${this.buttonId}`
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.oc-contextual-helper {
+  display: inline-block;
+  .oc-button {
+    vertical-align: middle;
+  }
+}
+</style>
+
+<docs>
+## Examples
+A simple example, using only text.
+```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>
+```
+
+An example using Title, Text, List, End-Text and Read-More-Link properties.
+```js
+<template>
+  <div>
+    <oc-contextual-helper v-bind="helperContent"/>
+  </div>
+</template>
+<script>
+export default {
+  computed: {
+    helperContent() {
+      return {
+        title: 'Choose how access is granted ',
+        text: "Share a file or folder by link",
+        list: [
+          {text: "Only invited people can access", headline: true},
+          {text: "Only people from the list \"Invited people\" can access. If there is no list, no people are invited yet."},
+          {text: "Everyone with the link", headline: true },
+          {text: "Everyone with the link can access. Note: If you share this link with people from the list \"Invited people\", they need to login-in so that their individual assigned permissions can take effect. If they are not logged-in, the permissions of the link take effect." }
+        ],
+        endText: "Invited persons can not see who else has access",
+        readMoreLink: "https://owncloud.design"
+      }
+    }
+  },
+}
+</script>
+```
+</docs>

src/components/atoms/OcContextualHelper/OcContextualHelper.spec.js → src/components/molecules/OcInfoDrop/OcInfoDrop.spec.js

@@ -1,4 +1,4 @@
-import OcContextualHelper from "./OcContextualHelper.vue"
+import OcInfoDrop from "./OcInfoDrop.vue"
 import { createLocalVue, shallowMount } from "@vue/test-utils"
 import GetTextPlugin from "vue-gettext"
 
@@ -8,9 +8,9 @@ localVue.use(GetTextPlugin, {
   silent: true,
 })
 
-describe("OcContextualHelper", () => {
+describe("OcInfoDrop", () => {
   function getWrapperWithProps(props) {
-    return shallowMount(OcContextualHelper, {
+    return shallowMount(OcInfoDrop, {
       localVue: localVue,
       propsData: props,
       stubs: {