Create OcContextualHelper component (#2064)

* Create OcContextualHelper component

* Make linter happy

changelog/unreleased/enhancement-add-contextual-helper-component

@@ -0,0 +1,7 @@
+Enhancement: Add OcContextualHelper
+
+We've added a contextual helper component to provide more information
+based on the context
+
+https://github.com/owncloud/web/issues/6590
+https://github.com/owncloud/owncloud-design-system/pull/2064

src/components/atoms/OcButton/OcButton.vue

@@ -56,6 +56,17 @@ export default {
       type: String,
       default: null,
     },
+    /**
+     * When setting the button’s type to a link, use this option to give a give a target.
+     * `_blank, _self, _parent, _top`
+     */
+    target: {
+      type: String,
+      default: null,
+      validator: value => {
+        return value.match(/(_blank|_self|_parent|_top)/)
+      },
+    },
     /**
      * When setting the button’s type to a router-link, use this option to give a to.
      */
@@ -144,6 +155,7 @@ export default {
     additionalAttributes() {
       return {
         ...(this.href && { href: this.href }),
+        ...(this.target && { target: this.target }),
         ...(this.to && { to: this.to }),
         ...(this.type === "button" && { type: this.submit }),
       }

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

@@ -0,0 +1,45 @@
+import OcContextualHelper from "./OcContextualHelper.vue"
+import { createLocalVue, shallowMount } from "@vue/test-utils"
+import GetTextPlugin from "vue-gettext"
+
+const localVue = createLocalVue()
+localVue.use(GetTextPlugin, {
+  translations: "does-not-matter.json",
+  silent: true,
+})
+
+describe("OcContextualHelper", () => {
+  function getWrapperWithProps(props) {
+    return shallowMount(OcContextualHelper, {
+      localVue: localVue,
+      propsData: props,
+      stubs: {
+        OcDrop: true,
+      },
+    })
+  }
+  describe("should use props correctly", () => {
+    it("should set text prop", () => {
+      const wrapper = getWrapperWithProps({ text: "test-my-text" })
+      expect(wrapper.find(".info-text").text()).toBe("test-my-text")
+    })
+    it("should set list prop", async () => {
+      const listValues = ["a-list-value", "b-list-value", "c-list-value"]
+      const wrapper = getWrapperWithProps({ list: listValues })
+      const result = wrapper.find(".info-list").text()
+      listValues.forEach(value => {
+        expect(result).toContain(value)
+      })
+    })
+    it("should set a readMore link", async () => {
+      const wrapper = getWrapperWithProps({ readMoreLink: "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" })
+      expect(wrapper.find(".info-text-end").text()).toBe("test-my-text")
+    })
+  })
+})

src/components/atoms/OcContextualHelper/OcContextualHelper.vue

@@ -0,0 +1,138 @@
+<template>
+  <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="toggleId" mode="click" close-on-click>
+      <div class="info-drop-content">
+        <p class="info-text" v-text="text" />
+        <ul v-if="list.length" class="info-list oc-pl-l">
+          <li v-for="(item, index) in list" :key="index" class="oc-pl-rm">
+            {{ item }}
+          </li>
+        </ul>
+        <p class="info-text-end" v-text="endText" />
+        <oc-button
+          v-if="readMoreLink"
+          v-translate
+          type="a"
+          appearance="raw"
+          size="small"
+          class="info-more-link"
+          :href="readMoreLink"
+          target="_blank"
+          >Read more</oc-button
+        >
+      </div>
+    </oc-drop>
+  </div>
+</template>
+
+<script>
+import uniqueId from "../../../utils/uniqueId"
+import OcButton from "../../atoms/OcButton/OcButton.vue"
+import OcIcon from "../../atoms/OcIcon/OcIcon.vue"
+import OcDrop from "../../atoms/OcDrop/OcDrop.vue"
+
+export default {
+  name: "OcContextualHelper",
+  status: "unreleased",
+  components: { OcButton, OcIcon, OcDrop },
+  props: {
+    text: {
+      type: String,
+      required: false,
+    },
+    list: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    endText: {
+      type: String,
+      required: false,
+    },
+    readMoreLink: {
+      type: String,
+      required: false,
+    },
+  },
+  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;
+  }
+  .info-drop-content {
+    font-size: var(--oc-font-size-small);
+    color: var(--oc-color-text-default);
+  }
+  .info-more-link {
+    font-size: var(--oc-font-size-small) !important;
+  }
+}
+</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: this.$gettext("Invite persons or groups to access this file or folder."),
+      }
+    }
+  },
+}
+</script>
+```
+
+An example using 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 {
+        text: this.$gettext("Invite persons or groups to access this file or folder."),
+        list: [
+          this.$gettext("Enter a name or group to share this item"),
+          this.$gettext("If you share a folder,  all of its contents and subfolders will be shared with the entered persons or groups"),
+          this.$gettext("Invited persons or groups will be notified via e-mail or in-app notification"),
+        ],
+        endText: this.$gettext("Invited persons can not see who else has access"),
+        readMoreLink: "https://owncloud.design"
+      }
+    }
+  },
+}
+</script>
+```
+</docs>

src/tokens/ods/font.yaml

@@ -3,6 +3,8 @@ font:
   size:
     default:
       value: 1rem
+    small:
+      value: 0.88rem
     medium:
       value: 1.25rem
     large: