Created new studioBanner for form validation

contentcuration/contentcuration/frontend/settings/pages/Storage/RequestForm.vue

@@ -4,12 +4,13 @@
     ref="form"
     @submit.prevent="submit"
   >
-    <Banner
-      :value="Boolean(errorCount())"
+    <StudioBanner
+      v-if="Boolean(errorCount())"
       error
-      :text="errorText()"
-      class="my-2"
-    />
+      class="studio-banner"
+    >
+      {{ errorText() }}
+    </StudioBanner>
 
     <!-- Nature of content -->
     <h3>{{ $tr('natureOfYourContentLabel') }}</h3>
@@ -264,11 +265,12 @@
 
   import sortBy from 'lodash/sortBy';
   import { mapActions, mapState } from 'vuex';
+  import useKLiveRegion from 'kolibri-design-system/lib/composables/useKLiveRegion';
   import { generateFormMixin, constantsTranslationMixin } from 'shared/mixins';
   import { LicensesList } from 'shared/leUtils/Licenses';
   import CountryField from 'shared/views/form/CountryField';
   import MultiSelect from 'shared/views/form/MultiSelect';
-  import Banner from 'shared/views/Banner';
+  import StudioBanner from 'shared/views/StudioBanner';
   import InfoModal from 'shared/views/InfoModal';
 
   const formMixin = generateFormMixin({
@@ -320,10 +322,14 @@
     components: {
       CountryField,
       MultiSelect,
-      Banner,
+      StudioBanner,
       InfoModal,
     },
     mixins: [constantsTranslationMixin, formMixin],
+    setup() {
+      const { sendPoliteMessage } = useKLiveRegion();
+      return { sendPoliteMessage };
+    },
     computed: {
       ...mapState('settings', ['channels']),
       orgSelected() {
@@ -392,6 +398,7 @@
         if (this.$refs.form.scrollIntoView) {
           this.$refs.form.scrollIntoView({ behavior: 'smooth' });
         }
+        this.sendPoliteMessage(this.errorText());
       },
 
       // eslint-disable-next-line kolibri/vue-no-unused-methods, vue/no-unused-properties
@@ -524,4 +531,9 @@
     line-height: 1.5;
   }
 
+  .studio-banner {
+    margin-top: 8px;
+    margin-bottom: 8px;
+  }
+
 </style>

contentcuration/contentcuration/frontend/shared/views/StudioBanner.vue

@@ -0,0 +1,37 @@
+<template>
+
+  <div
+    class="banner"
+    data-testid="studio-banner"
+    :style="{ backgroundColor: error ? $themePalette.red.v_100 : '' }"
+  >
+    <slot>
+      {{ text }}
+    </slot>
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'StudioBanner',
+    props: {
+      error: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .banner {
+    padding: 16px;
+  }
+
+</style>

contentcuration/contentcuration/frontend/shared/views/__tests__/studioBanner.spec.js

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import StudioBanner from '../StudioBanner.vue';
+
+const sampleErrorMessage = 'This is an error message';
+
+describe('StudioBanner', () => {
+  test('render with defaults values', () => {
+    render(StudioBanner, {
+      props: {
+        error: false,
+      },
+      routes: new VueRouter(),
+      slots: {
+        default: 'normal text',
+      },
+    });
+    const banner = screen.getByTestId('studio-banner');
+    expect(banner).toBeInTheDocument();
+  });
+
+  test('render with error true', () => {
+    render(StudioBanner, {
+      props: {
+        error: true,
+      },
+      routes: new VueRouter(),
+      slots: {
+        default: sampleErrorMessage,
+      },
+    });
+
+    const banner = screen.getByTestId('studio-banner');
+    expect(banner).toBeInTheDocument();
+    expect(banner).toHaveStyle('background-color: rgb(255, 217, 211)');
+    expect(screen.getByText(sampleErrorMessage)).toBeInTheDocument();
+  });
+});