Enhancement: Give OcModal the option to use OcContextualHelper

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

@@ -0,0 +1,6 @@
+Enhancement: Give OcModal the option to use OcContextualHelper
+
+We've added the option for OcModal to use OcContextualHelper
+
+https://github.com/owncloud/owncloud-design-system/pull/2325
+https://github.com/owncloud/web/issues/6892

src/components/organisms/OcModal/OcModal.vue

@@ -42,6 +42,10 @@
               :aria-label="checkboxLabel"
             />
           </div>
+          <div v-if="contextualHelperData" class="oc-modal-body-contextual-helper">
+            <span class="text" v-text="contextualHelperLabel" />
+            <oc-contextual-helper class="oc-pl-xs" v-bind="contextualHelperData" />
+          </div>
           <div class="oc-modal-body-actions oc-flex oc-flex-right">
             <oc-button
               class="oc-modal-body-actions-cancel"
@@ -153,6 +157,22 @@ export default {
       required: false,
       default: "",
     },
+    /**
+     * Contextual helper label
+     */
+    contextualHelperLabel: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    /**
+     * Contextual helper data
+     */
+    contextualHelperData: {
+      type: Object,
+      required: false,
+      default: null,
+    },
     /**
      * Text of the cancel button
      */
@@ -467,6 +487,10 @@ export default {
       margin-top: var(--oc-space-small);
     }
 
+    &-contextual-helper {
+      margin-bottom: var(--oc-space-medium);
+    }
+
     &-input {
       /* FIXME: this is ugly, but required so that the bottom padding doesn't look off when reserving vertical space for error messages below the input. */
       margin-bottom: -20px;
@@ -548,6 +572,16 @@ export default {
     button-secondary-text="Accept some"
     class="oc-mb-l oc-position-relative"
   />
+  <oc-modal
+    icon="information"
+    title="Accept terms of use"
+    message="Do you accept our terms of use?"
+    button-cancel-text="Decline"
+    button-confirm-text="Accept"
+    contextual-helper-label="I need more information?"
+    :contextual-helper-data="{ title: 'This is more information' }"
+    class="oc-mb-l oc-position-relative"
+  />
 ```
 
 ```js

src/components/organisms/OcModal/__snapshots__/OcModal.spec.js.snap

@@ -11,6 +11,7 @@ exports[`OcModal displays input 1`] = `
       <div class="oc-modal-body">
         <oc-text-input-stub id="oc-textinput-1" type="text" value="New folder" clearbuttonaccessiblelabel="" label="Folder name" fixmessageline="true" class="oc-modal-body-input"></oc-text-input-stub>
         <!---->
+        <!---->
         <div class="oc-modal-body-actions oc-flex oc-flex-right">
           <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="outline" justifycontent="center" gapsize="medium" class="oc-modal-body-actions-cancel">Cancel</oc-button-stub>
           <!---->
@@ -33,6 +34,7 @@ exports[`OcModal hides icon if not specified 1`] = `
       <div class="oc-modal-body">
         <p class="oc-modal-body-message">Example message</p>
         <!---->
+        <!---->
         <div class="oc-modal-body-actions oc-flex oc-flex-right">
           <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="outline" justifycontent="center" gapsize="medium" class="oc-modal-body-actions-cancel">Cancel</oc-button-stub>
           <!---->
@@ -55,6 +57,7 @@ exports[`OcModal matches snapshot 1`] = `
       <div class="oc-modal-body">
         <p class="oc-modal-body-message">Example message</p>
         <!---->
+        <!---->
         <div class="oc-modal-body-actions oc-flex oc-flex-right">
           <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="outline" justifycontent="center" gapsize="medium" class="oc-modal-body-actions-cancel">Cancel</oc-button-stub>
           <!---->
@@ -79,6 +82,7 @@ exports[`OcModal overrides props message with slot 1`] = `
           <p>Slot message</p>
         </div>
         <!---->
+        <!---->
         <div class="oc-modal-body-actions oc-flex oc-flex-right">
           <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="outline" justifycontent="center" gapsize="medium" class="oc-modal-body-actions-cancel">Cancel</oc-button-stub>
           <!---->