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>
@@ -268,7 +269,7 @@
   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,7 +321,7 @@
     components: {
       CountryField,
       MultiSelect,
-      Banner,
+      StudioBanner,
       InfoModal,
     },
     mixins: [constantsTranslationMixin, formMixin],
@@ -524,4 +525,9 @@
     line-height: 1.5;
   }
 
+  .studio-banner {
+    margin-top: 8px !important;
+    margin-bottom: 8px !important;
+  }
+
 </style>

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

@@ -0,0 +1,50 @@
+<template>
+
+  <div
+    class="banner"
+    data-testid="studio-banner"
+    :style="{ backgroundColor: error ? $themePalette.red.v_100 : '' }"
+  >
+    <slot>
+      {{ text }}
+    </slot>
+  </div>
+
+</template>
+
+
+<script>
+
+  import useKLiveRegion from 'kolibri-design-system/lib/composables/useKLiveRegion';
+
+  export default {
+    name: 'StudioBanner',
+    setup() {
+      const { sendPoliteMessage } = useKLiveRegion();
+      return { sendPoliteMessage };
+    },
+    props: {
+      error: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    mounted() {
+      const slotContent = this.$slots.default;
+      const textContent = slotContent[0].text;
+      if (textContent && this.error) {
+        this.sendPoliteMessage(textContent);
+      }
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .banner {
+    padding: 16px;
+  }
+
+</style>

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

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import StudioBanner from '../StudioBanner.vue';
+
+// Mock the Kolibri design system composable
+const mockSendPoliteMessage = jest.fn();
+jest.mock('kolibri-design-system/lib/composables/useKLiveRegion', () => ({
+  __esModule: true,
+  default: () => ({
+    sendPoliteMessage: mockSendPoliteMessage,
+  }),
+}));
+
+const sampleErrorMessage = 'This is an error message';
+
+describe('StudioBanner', () => {
+  beforeEach(() => {
+    mockSendPoliteMessage.mockClear();
+  });
+
+  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();
+  });
+});