add checkbox help

Author: haroun

modules/@apostrophecms/i18n/i18n/en.json

@@ -46,6 +46,7 @@
   "at": "at",
   "attachment": "Attachment",
   "automaticTranslationCheckbox": "Translate text content",
+  "automaticTranslationCheckboxHelp": "",
   "automaticTranslationDisclaimer": "",
   "automaticTranslationErrMsg": "An error happened while getting available languages for translation. Translation will be skipped.",
   "automaticTranslationErrorNoProvider": "Translation provider not found. Page \"{{ title }}\" was not translated.",

modules/@apostrophecms/i18n/ui/apos/components/AposI18nLocalize.vue

@@ -231,15 +231,19 @@
                     {{ $t('apostrophe:automaticTranslationSettings') }}
                   </span>
                 </p>
-                <p v-if="automaticTranslationDisclaimer" class="apos-wizard__translation-disclaimer">
+                <p
+                  v-if="automaticTranslationDisclaimer"
+                  class="apos-wizard__translation-disclaimer"
+                >
                   {{ automaticTranslationDisclaimer }}
                 </p>
                 <AposCheckbox
                   v-model="wizard.values.translateContent.data"
                   :field="{ name: 'translate' }"
                   :choice="{
                     value: wizard.values.translateContent.data,
-                    label: $t('apostrophe:automaticTranslationCheckbox')
+                    label: $t('apostrophe:automaticTranslationCheckbox'),
+                    htmlHelp: $t('apostrophe:automaticTranslationCheckboxHelp')
                   }"
                   data-apos-test="localizationTranslationCheck"
                 />

modules/@apostrophecms/submitted-draft/index.js

@@ -79,7 +79,7 @@ module.exports = {
       },
       modal: {
         default: {
-          '@apostrophecms/command-menu:taskbar-manager': {
+          '@apostrophecms/command-menu:taskbar': {
             label: 'apostrophe:commandMenuTaskbar',
             commands: [
               `${self.__meta.name}:taskbar-manager`

modules/@apostrophecms/ui/ui/apos/components/AposCheckbox.vue

@@ -30,13 +30,21 @@
         :size="10"
       />
     </span>
-    <span
-      v-if="choice.label"
-      :class="{'apos-sr-only': field.hideLabel }"
-      class="apos-choice-label-text"
-    >
-      {{ $t(choice.label) }}
-    </span>
+    <div class="apos-choice-label">
+      <span
+        v-if="choice.label"
+        :class="{'apos-sr-only': field.hideLabel }"
+        class="apos-choice-label-text"
+      >
+        {{ $t(choice.label) }}
+      </span>
+      <!-- eslint-disable vue/no-v-html -->
+      <p
+        v-if="(choice.help || choice.htmlHelp)"
+        class="apos-choice-label-help apos-field__help"
+        v-html="$t(choice.help || choice.htmlHelp)"
+      />
+    </div>
   </label>
 </template>
 
@@ -104,7 +112,23 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .apos-input-indicator {
-    border-radius: 3px;
+.apos-input-indicator {
+  border-radius: 3px;
+}
+
+.apos-choice-label {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: baseline;
+}
+
+.apos-field__help {
+  @include type-base;
+
+  & {
+    margin: 0 0 $spacing-base;
+    line-height: var(--a-line-tall);
+    color: var(--a-base-3);
   }
+}
 </style>