Redesign contextual helper

changelog/unreleased/change-redesign-contextual-helper

@@ -0,0 +1,6 @@
+Change: Redesign contextual helper
+
+We've redesigned the contextual helper, which accepts now a title property and is able to display a description list.
+
+https://github.com/owncloud/owncloud-design-system/pull/2271
+https://github.com/owncloud/web/issues/7331

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

@@ -19,16 +19,24 @@ describe("OcContextualHelper", () => {
     })
   }
   describe("should use props correctly", () => {
+    it("should set title prop", () => {
+      const wrapper = getWrapperWithProps({ title: "test-my-title" })
+      expect(wrapper.find(".info-title").text()).toBe("test-my-title")
+    })
     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 listValues = [
+        { text: "a-list-value" },
+        { text: "b-list-value" },
+        { text: "c-list-value" },
+      ]
       const wrapper = getWrapperWithProps({ list: listValues })
       const result = wrapper.find(".info-list").text()
       listValues.forEach(value => {
-        expect(result).toContain(value)
+        expect(result).toContain(value.text)
       })
     })
     it("should set a readMore link", async () => {

src/components/atoms/OcContextualHelper/OcContextualHelper.vue

@@ -3,14 +3,20 @@
     <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>
+    <oc-drop class="oc-width-1-1" :drop-id="dropId" :toggle="toggleId" mode="click" close-on-click>
       <div class="info-drop-content">
+        <div v-if="title" class="oc-flex oc-flex-between info-header oc-border-b oc-pb-s">
+          <span class="oc-m-rm info-title" v-text="title" />
+          <oc-button appearance="raw">
+            <oc-icon name="close" fill-type="line" size="medium" />
+          </oc-button>
+        </div>
         <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>
+        <dl v-if="list.length" class="info-list">
+          <component :is="item.headline ? 'dt' : 'dd'" v-for="(item, index) in list" :key="index">
+            {{ item.text }}
+          </component>
+        </dl>
         <p class="info-text-end" v-text="endText" />
         <oc-button
           v-if="readMoreLink"
@@ -39,9 +45,15 @@ export default {
   status: "unreleased",
   components: { OcButton, OcIcon, OcDrop },
   props: {
+    title: {
+      type: String,
+      required: false,
+      default: "",
+    },
     text: {
       type: String,
       required: false,
+      default: "",
     },
     list: {
       type: Array,
@@ -51,10 +63,12 @@ export default {
     endText: {
       type: String,
       required: false,
+      default: "",
     },
     readMoreLink: {
       type: String,
       required: false,
+      default: "",
     },
   },
   computed: {
@@ -84,6 +98,25 @@ export default {
   .info-more-link {
     font-size: var(--oc-font-size-small) !important;
   }
+  .info-header {
+    align-items: center;
+  }
+  .info-title {
+    font-size: 1.125rem;
+  }
+  .info-list {
+    dt {
+      &:first-child {
+        margin-top: 0;
+      }
+      font-weight: bold;
+      margin-bottom: var(--oc-space-xsmall);
+      margin-top: var(--oc-space-small);
+    }
+    dd {
+      margin-left: 0;
+    }
+  }
 }
 </style>
 
@@ -109,7 +142,7 @@ export default {
 </script>
 ```
 
-An example using Text, List, End-Text and Read-More-Link properties.
+An example using Title, Text, List, End-Text and Read-More-Link properties.
 ```js
 <template>
   <div>
@@ -121,11 +154,13 @@ export default {
   computed: {
     helperContent() {
       return {
-        text: this.$gettext("Invite persons or groups to access this file or folder."),
+        title: this.$gettext('Choose how access is granted '),
+        text: this.$gettext("Share a file or folder by link"),
         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"),
+          {text: this.$gettext("Only invited people can access"), headline: true},
+          {text: this.$gettext("Only people from the list \"Invited people\" can access. If there is no list, no people are invited yet.")},
+          {text: this.$gettext("Everyone with the link"), headline: true },
+          {text: this.$gettext("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: this.$gettext("Invited persons can not see who else has access"),
         readMoreLink: "https://owncloud.design"