dashboard-shell-shell 1.0.10000011122 → 1.6.0-alpha.2

package/components/form/ArrayList.vue

@@ -49,6 +49,10 @@ export default {
       type:    Boolean,
       default: false,
     },
+    addClass: {
+      type:    String,
+      default: '',
+    },
     addIcon: {
       type:    String,
       default: '',
@@ -178,7 +182,7 @@ export default {
 
   computed: {
     _addLabel() {
-      return this.addLabel || this.t('generic.add');
+      return this.addLabel || this.t('generic.ariaLabel.genericAddRow');
     },
     _removeLabel() {
       return this.removeLabel || this.t('generic.remove');
@@ -254,153 +258,183 @@ export default {
 </script>
 
 <template>
-  <div>
-    <div
-      v-if="title"
-      class="clearfix"
-    >
-      <slot name="title">
-        <h3>
-          {{ title }}
-          <span
-            v-if="required"
-            class="required"
-          >*</span>
-          <i
-            v-if="showProtip"
-            v-clean-tooltip="protip"
-            class="icon icon-info"
-          />
-        </h3>
-      </slot>
-    </div>
-    <div
-      v-if="showAdd && !isView"
-      class="footer"
-    >
-      <slot
-        v-if="showAdd"
-        name="add"
-        :add="add"
-      >
-        <button
-          type="button"
-          class="btn role-primary add"
-          :disabled="loading || disableAdd"
-          :data-testid="`${componentTestid}-button`"
-          :aria-label="_addLabel"
-          role="button"
-          @click="add()"
+  <div
+    class="array-list-main-container"
+    role="group"
+    :aria-label="title || t('generic.ariaLabel.arrayList')"
+  >
+
+    <div class="row">
+      <div v-if="title" style="width: 100%;" class="col">
+        <div
+          class="clearfix"
+          role="group"
         >
-          <i
-            class="mr-5 icon"
-            :class="loading ? ['icon-lg', 'icon-spinner','icon-spin']: [addIcon]"
-          />
-          {{ _addLabel }}
-        </button>
-      </slot>
-    </div>
-    <template v-if="rows.length">
-      <div v-if="showHeader">
-        <slot name="column-headers">
-          <label class="value text-label mb-10">
-            {{ valueLabel }}
-          </label>
-        </slot>
+          <slot name="title">
+            <h3>
+              {{ title }}
+              <span
+                v-if="required"
+                class="required"
+                aria-hidden="true"
+              >*</span>
+              <i
+                v-if="showProtip"
+                v-clean-tooltip="{content: protip, triggers: ['hover', 'touch', 'focus'] }"
+                class="icon icon-info"
+                tabindex="0"
+              />
+            </h3>
+          </slot>
+        </div>
       </div>
-      <div
-        v-for="(row, idx) in rows"
-        :key="idx"
-        :data-testid="`${componentTestid}-box${ idx }`"
-        class="box"
-      >
-        <slot
-          name="columns"
-          :queueUpdate="queueUpdate"
-          :i="idx"
-          :rows="rows"
-          :row="row"
-          :mode="mode"
-          :isView="isView"
-        >
-          <div class="value">
-            <slot
-              name="value"
-              :row="row"
-              :mode="mode"
-              :isView="isView"
-              :queue-update="queueUpdate"
+      <div style="width: 100%;" class="col">
+        <div>
+          <template v-if="rows.length">
+            <div
+              v-if="showHeader"
+              class="array-list-header-group"
+              role="group"
+            >
+              <slot name="column-headers">
+                <label class="value text-label mb-10">
+                  {{ valueLabel }}
+                </label>
+              </slot>
+            </div>
+            <div
+              v-for="(row, idx) in rows"
+              :key="idx"
+              :data-testid="`${componentTestid}-box${ idx }`"
+              class="box"
+              :class="{'hide-remove-is-view': isView}"
+              role="group"
             >
-              <TextAreaAutoGrow
-                v-if="valueMultiline"
-                ref="value"
-                v-model:value="row.value"
-                :data-testid="`${componentTestid}-textarea-${idx}`"
-                :placeholder="valuePlaceholder"
+              <slot
+                name="columns"
+                :queueUpdate="queueUpdate"
+                :i="idx"
+                :rows="rows"
+                :row="row"
                 :mode="mode"
-                :disabled="disabled"
-                @paste="onPaste(idx, $event)"
-                @update:value="queueUpdate"
-              />
-              <LabeledInput
-                v-else-if="rules.length > 0"
-                ref="value"
-                v-model:value="row.value"
-                :data-testid="`${componentTestid}-labeled-input-${idx}`"
-                :placeholder="valuePlaceholder"
-                :disabled="isView || disabled"
-                :rules="rules"
-                :compact="false"
-                @paste="onPaste(idx, $event)"
-                @update:value="queueUpdate"
+                :isView="isView"
+              >
+                <div class="value">
+                  <slot
+                    name="value"
+                    :row="row"
+                    :mode="mode"
+                    :isView="isView"
+                    :queue-update="queueUpdate"
+                  >
+                    <TextAreaAutoGrow
+                      v-if="valueMultiline"
+                      ref="value" 
+                      v-model:value="row.value"
+                      :data-testid="`${componentTestid}-textarea-${idx}`"
+                      :placeholder="valuePlaceholder"
+                      :mode="mode"
+                      :disabled="disabled"
+                      :aria-label="a11yLabel ? `${a11yLabel} ${t('generic.ariaLabel.genericRow', {index: idx+1})}` : undefined"
+                      @paste="onPaste(idx, $event)"
+                      @update:value="queueUpdate"
+                    />
+                    <LabeledInput
+                      v-else-if="rules.length > 0"
+                      ref="value"
+                      v-model:value="row.value"
+                      :data-testid="`${componentTestid}-labeled-input-${idx}`"
+                      :placeholder="valuePlaceholder"
+                      :disabled="isView || disabled"
+                      :rules="rules"
+                      :compact="false"
+                      :aria-label="a11yLabel ? `${a11yLabel} ${t('generic.ariaLabel.genericRow', {index: idx+1})}` : undefined"
+                      @paste="onPaste(idx, $event)"
+                      @update:value="queueUpdate"
+                    />
+                    <input
+                      v-else
+                      ref="value"
+                      v-model="row.value"
+                      :data-testid="`${componentTestid}-input-${idx}`"
+                      :placeholder="valuePlaceholder"
+                      :disabled="isView || disabled"
+                      :aria-label="a11yLabel ? `${a11yLabel} ${t('generic.ariaLabel.genericRow', {index: idx+1})}` : undefined"
+                      @paste="onPaste(idx, $event)"
+                    >
+                  </slot>
+                </div>
+              </slot>
+              <div
+                v-if="showRemove && !isView"
+                class="remove"
+              >
+                <slot
+                  name="remove-button"
+                  :remove="() => remove(row, idx)"
+                  :i="idx"
+                  :row="row"
+                >
+                  <button
+                    type="button"
+                    :disabled="isView"
+                    class="btn role-link"
+                    :data-testid="`${componentTestid}-remove-item-${idx}`"
+                    :aria-label="t('generic.ariaLabel.remove', {index: idx+1})"
+                    role="button"
+                    @click="remove(row, idx)"
+                  >
+                    {{ _removeLabel }}
+                  </button>
+                </slot>
+              </div>
+              <slot
+                name="value-sub-row"
+                :row="row"
+                :mode="mode"
+                :isView="isView"
               />
-              <input
-                v-else
-                ref="value"
-                v-model="row.value"
-                :data-testid="`${componentTestid}-input-${idx}`"
-                :placeholder="valuePlaceholder"
-                :disabled="isView || disabled"
-                :aria-label="a11yLabel ? a11yLabel : undefined"
-                @paste="onPaste(idx, $event)"
+            </div>
+          </template>
+          <div v-else>
+            <slot name="empty">
+              <div
+                v-if="mode==='view'"
+                class="text-muted"
               >
+                &mdash;
+              </div>
             </slot>
           </div>
-        </slot>
-        <div
-          v-if="showRemove"
-          class="remove"
-        >
-          <slot
-            name="remove-button"
-            :remove="() => remove(row, idx)"
-            :i="idx"
-            :row="row"
+          <div
+            v-if="showAdd && !isView"
+            class="footer"
           >
-            <button
-              type="button"
-              :disabled="isView"
-              class="btn role-link"
-              :data-testid="`${componentTestid}-remove-item-${idx}`"
-              :aria-label="`${_removeLabel} ${idx + 1}`"
-              role="button"
-              @click="remove(row, idx)"
+            <slot
+              v-if="showAdd"
+              name="add"
+              :add="add"
             >
-              {{ _removeLabel }}
-            </button>
-          </slot>
+              <button
+                type="button"
+                class="btn role-tertiary add"
+                :class="[addClass]"
+                :disabled="loading || disableAdd"
+                :data-testid="`${componentTestid}-button`"
+                :aria-label="_addLabel"
+                role="button"
+                @click="add()"
+              >
+                <i
+                  class="mr-5 icon"
+                  :class="loading ? ['icon-lg', 'icon-spinner','icon-spin']: [addIcon]"
+                />
+                {{ _addLabel }}
+              </button>
+            </slot>
+          </div>
         </div>
       </div>
-    </template>
-    <div v-else>
-      <slot name="empty">
-        <div
-          v-if="mode==='view'"
-          class="text-muted"
-        >
-          &mdash;
-        </div>
-      </slot>
     </div>
 
   </div>
@@ -416,13 +450,15 @@ export default {
   }
 
   .box {
-    display: grid;
-    grid-template-columns: auto $array-list-remove-margin;
-    align-items: center;
-    margin-bottom: 10px;
+    // display: grid;
+    // grid-template-columns: auto $array-list-remove-margin;
+    // align-items: center;
+    // margin-bottom: 10px;
+    display: flex;
     .value {
-      flex: 1;
+      // flex: 1;
       INPUT {
+        width: $input-width;
         height: $input-height;
         border: solid var(--border-width) var(--input-border);
         padding: 4px 11px;
@@ -434,9 +470,15 @@ export default {
   }
   .remove {
     text-align: right;
+    display: flex;
+    align-items: center;
+
+    button{
+      min-width: auto;
+    }
   }
   .footer {
-    margin-bottom: 24px;
+    margin-bottom: 20px;
     .protip {
       float: right;
       padding: 5px 0;
@@ -453,4 +495,7 @@ export default {
     margin-bottom: 10px;
   }
     
+  H3{
+    width: 160px;
+  }
 </style>

package/components/form/ArrayListGrouped.vue

@@ -120,15 +120,16 @@ export default {
 
 <style lang="scss">
 .array-list-grouped {
-    & > .box {
+    .box {
+      border: 0px solid var(--tabbed-border) !important;
       position: relative;
       display: block;
 
       & > .remove {
         position: absolute;
 
-        top: 10px;
-        right: 10px;
+        top: 0px !important;
+        right: 0px !important;
         & > .close{
           width: 32px;
           min-width: 32px !important;
@@ -140,6 +141,7 @@ export default {
       }
 
       & > .info-box {
+        border: 1px solid var(--tabbed-border) !important;
         margin-bottom: 0;
         padding-right: 25px;
       }

package/components/form/BannerSettings.vue

@@ -5,6 +5,9 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { RadioGroup } from '@components/Form/Radio';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { ToggleSwitch } from '@components/Form/ToggleSwitch';
+import { TextAreaAutoGrow } from '@components/Form/TextArea';
+import { Banner } from '@components/Banner';
 
 export default ({
   name: 'BannerSettings',
@@ -28,12 +31,13 @@ export default ({
   },
 
   components: {
-    Checkbox, ColorInput, LabeledInput, LabeledSelect, RadioGroup
+    Banner, Checkbox, ColorInput, LabeledInput, LabeledSelect, RadioGroup, TextAreaAutoGrow, ToggleSwitch
   },
 
   data() {
     const showAsDialog = !!this.value[this.bannerType]?.button || false;
     const buttonText = this.value[this.bannerType]?.button || this.t('banner.showAsDialog.defaultButtonText');
+    const isHtml = !!this.value[this.bannerType]?.html; // HTML display if the 'html' field is set (otherwise default is text)
 
     return {
       showAsDialog,
@@ -42,7 +46,9 @@ export default ({
       themeVars:               {
         bannerBgColor:   getComputedStyle(document.body).getPropertyValue('--default'),
         bannerTextColor: getComputedStyle(document.body).getPropertyValue('--banner-text-color')
-      }
+      },
+      bannerTitleId: `describe-banners-${ this.bannerType }-id`,
+      isHtml,
     };
   },
 
@@ -59,6 +65,12 @@ export default ({
       if (neu !== old) {
         this.value[this.bannerType].button = neu;
       }
+    },
+
+    isHtml(neu, old) {
+      if (neu !== old) {
+        this.value[this.bannerType].isHtml = neu; // Keep track of the content type (this is not persisted)
+      }
     }
   },
 
@@ -104,15 +116,54 @@ export default ({
 </script>
 
 <template>
-  <div class="row mb-20">
-    <div class="col span-12">
-      <div class="row">
+  <div>
+    <div class="row">
+      <div class="col span-6">
+        <ColorInput
+          v-model:value="value[bannerType].color"
+          :default-value="themeVars.bannerTextColor"
+          :label="t('banner.textColor')"
+          :mode="mode"
+          :aria-label="`${t(`banner.${bannerType}`)} ${t('banner.textColor')}`"
+        />
+      </div>
+      <div class="col span-6">
+        <ColorInput
+          v-model:value="value[bannerType].background"
+          :default-value="themeVars.bannerBgColor"
+          :label="t('banner.background')"
+          :mode="mode"
+          :aria-label="`${t(`banner.${bannerType}`)} ${t('banner.background')}`"
+        />
+      </div>
+    </div>
+    <div class="row mb-20">
+      <ToggleSwitch
+        v-model:value="isHtml"
+        :aria-label="`${t(`banner.${bannerType}`)} ${t('banner.toggleTextHtml')}`"
+        :data-testid="`banner_content_type_toggle${bannerType}`"
+        :disabled="isUiDisabled"
+        :off-label="t('banner.type.text')"
+        :on-label="t('banner.type.html')"
+      />
+    </div>
+    <div v-if="!isHtml">
+      <div
+        class="row"
+      >
+        <p
+          :id="bannerTitleId"
+          class="sr-only"
+        >
+          {{ t(`banner.${bannerType}`) }}
+        </p>
         <div class="col span-6">
           <LabeledInput
             v-model:value="value[bannerType].text"
             :disabled="isUiDisabled"
             :label="t('banner.text')"
             type="multiline"
+            :aria-describedby="bannerTitleId"
           />
           <p
             v-if="isConsentBanner"
@@ -120,26 +171,20 @@ export default ({
           >
             {{ t('banner.consentFootnote') }}
           </p>
-          <div
-            v-if="isConsentBanner"
-            class="mt-10"
-          >
-            <Checkbox
-              v-model:value="showAsDialog"
-              name="bannerDecoration"
-              class="banner-decoration-checkbox"
-              :mode="mode"
-              :label="t('banner.showAsDialog.label')"
-              :tooltip="t('banner.showAsDialog.tooltip')"
-            />
-            <LabeledInput
-              v-model:value="buttonText"
-              :disabled="!showAsDialog || isUiDisabled"
-              :label="t('banner.buttonText')"
-            />
-          </div>
         </div>
-        <div class="col span-2">
+        <div class="col span-6">
+          <LabeledSelect
+            v-model:value="value[bannerType].fontSize"
+            :data-testid="`banner_font_size_options${bannerType}`"
+            :disabled="isUiDisabled"
+            :label="t('banner.bannerFontSize.label')"
+            :options="uiBannerFontSizeOptions"
+            :aria-describedby="bannerTitleId"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col span-6">
           <RadioGroup
             v-model:value="value[bannerType].textAlignment"
             name="bannerAlignment"
@@ -148,51 +193,75 @@ export default ({
             :options="radioOptions.options"
             :labels="radioOptions.labels"
             :mode="mode"
+            :aria-label="`${t(`banner.${bannerType}`)} ${t('banner.bannerAlignment.label')}`"
           />
         </div>
-        <div class="col span-2">
-          <h3>
+        <div style="display: flex;" class="col span-6">
+          <p style="width: 160px;" id="decoration-banner-title-id">
             {{ t('banner.bannerDecoration.label') }}
-          </h3>
-          <div
-            v-for="(o, i) in textDecorationOptions"
-            :key="i"
-          >
-            <Checkbox
-              v-model:value="value[bannerType][o.style]"
-              name="bannerDecoration"
-              :data-testid="`banner_decoration_checkbox${bannerType}${o.label}`"
-              class="banner-decoration-checkbox"
-              :mode="mode"
-              :label="o.label"
-            />
+          </p>
+          <div style="display: flex;">
+            <div
+              v-for="(o, i) in textDecorationOptions"
+              :key="i"
+            >
+              <Checkbox
+                v-model:value="value[bannerType][o.style]"
+                name="bannerDecoration"
+                :data-testid="`banner_decoration_checkbox${bannerType}${o.label}`"
+                class="banner-decoration-checkbox"
+                :mode="mode"
+                :label="o.label"
+                :aria-describedby="`${bannerTitleId} decoration-banner-title-id`"
+              />
+            </div>
           </div>
         </div>
-        <div class="col span-2">
-          <LabeledSelect
-            v-model:value="value[bannerType].fontSize"
-            :data-testid="`banner_font_size_options${bannerType}`"
-            :disabled="isUiDisabled"
-            :label="t('banner.bannerFontSize.label')"
-            :options="uiBannerFontSizeOptions"
-          />
-        </div>
       </div>
-      <div class="row mt-10">
-        <div class="col span-6">
-          <ColorInput
-            v-model:value="value[bannerType].color"
-            :default-value="themeVars.bannerTextColor"
-            :label="t('banner.textColor')"
+    </div>
+    <div
+      v-else
+      class="row"
+    >
+      <div class="col span-12">
+        <Banner
+          :disabled="isUiDisabled"
+          color="warning"
+        >
+          {{ t('banner.htmlWarning') }}
+        </Banner>
+        <TextAreaAutoGrow
+          v-model:value="value[bannerType].html"
+          :aria-label="`${t(`banner.${bannerType}`)} ${t('banner.htmlContent')}`"
+          :data-testid="`banner_html${bannerType}`"
+          :min-height="64"
+          :disabled="isUiDisabled"
+          :placeholder="t('banner.type.html')"
+        />
+      </div>
+    </div>
+    <div
+      v-if="isConsentBanner"
+      class="row"
+    >
+      <div class="col span-6">
+        <div class="mt-10">
+          <Checkbox
+            v-model:value="showAsDialog"
+            name="bannerShowAsDialog"
+            class="banner-decoration-checkbox"
+            :data-testid="`banner_show_as_dialog_checkbox${bannerType}`"
             :mode="mode"
+            :label="t('banner.showAsDialog.label')"
+            :tooltip="t('banner.showAsDialog.tooltip')"
+            :aria-describedby="bannerTitleId"
           />
-        </div>
-        <div class="col span-6">
-          <ColorInput
-            v-model:value="value[bannerType].background"
-            :default-value="themeVars.bannerBgColor"
-            :label="t('banner.background')"
-            :mode="mode"
+          <LabeledInput
+            v-model:value="buttonText"
+            :data-testid="`banner_accept_button${bannerType}`"
+            :disabled="!showAsDialog || isUiDisabled"
+            :label="t('banner.buttonText')"
+            :aria-describedby="bannerTitleId"
           />
         </div>
       </div>