test options for custom icons and labels (#4981)

* options for custom icons and labels

* add checkbox help

* fix choice label text position

---------

Co-authored-by: Harouna Traoré <haroun@users.noreply.github.com>

Author: haroun

CHANGELOG.md

@@ -7,6 +7,7 @@
 * Implemented GET /api/v1/@apostrophecms/login/whoami route such that it returns the details of the currently logged in user; added the route to the login module.
   Thanks to [sombitganguly](https://github.com/sombitganguly) for this contribution.
 * Adds keyboard shortcuts for manipulating widgets in areas. Includes Cut, Copy, Paste, Delete, and Duplicate.
+* Automatic translation now supports a disclaimer and an help text for the checkbox. You can now set the disclaimer by setting `automaticTranslationDisclaimer` `i18n` key and the help text by setting `automaticTranslationCheckboxHelp` `i18n` key.
 * Adds dynamic choices working with piece manager filters. 
 * Allow `import.imageTags` (array of image tag IDs) to be passed to the rich text widget when importing (see https://docs.apostrophecms.org/reference/api/rich-text.html#importing-inline-images).
 * Adds a new way to make `GET` requests with a large query string. It can become a `POST` request containing the key `__aposGetWithQuery` in its body.

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

@@ -46,6 +46,8 @@
   "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.",
   "automaticTranslationErrorTargets": "Badly formatted translation targets.",

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

@@ -231,12 +231,19 @@
                     {{ $t('apostrophe:automaticTranslationSettings') }}
                   </span>
                 </p>
+                <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"
                 />
@@ -449,7 +456,8 @@ export default {
       translationEnabled: apos.modules['@apostrophecms/translation'].enabled,
       translationErrMsg: null,
       translationShowRetry: false,
-      translationShowLoader: false
+      translationShowLoader: false,
+      automaticTranslationDisclaimer: this.$t('apostrophe:automaticTranslationDisclaimer')
     };
   },
   computed: {

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
+    <div
       v-if="choice.label"
       :class="{'apos-sr-only': field.hideLabel }"
       class="apos-choice-label-text"
     >
-      {{ $t(choice.label) }}
-    </span>
+      <span>
+        {{ $t(choice.label) }}
+      </span>
+      <!-- eslint-disable vue/no-v-html -->
+      <p
+        v-if="(choice.help || choice.htmlHelp)"
+        class="apos-choice-label-text--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-text {
+  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>