Created new studioBanner for form validation

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

@@ -4,11 +4,11 @@
     ref="form"
     @submit.prevent="submit"
   >
-    <Banner
-      :value="Boolean(errorCount())"
-      error
-      :text="errorText()"
+    <StudioBanner
+      v-if="Boolean(errorCount())"
       class="my-2"
+      error
+      :errorText="errorText()"
     />
 
     <!-- Nature of content -->
@@ -268,7 +268,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 +320,7 @@
     components: {
       CountryField,
       MultiSelect,
-      Banner,
+      StudioBanner,
       InfoModal,
     },
     mixins: [constantsTranslationMixin, formMixin],

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

@@ -0,0 +1,57 @@
+<template>
+
+  <div
+    class="banner notranslate"
+    data-testid="studio-banner"
+    :style="{ backgroundColor: error ? $themePalette.red.v_100 : '' }"
+  >
+    {{ errorText }}
+  </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,
+      },
+      errorText: {
+        type: String,
+        default: '',
+      },
+    },
+    watch: {
+      errorText(newText) {
+        if (newText.length && this.error) {
+          this.sendPoliteMessage(newText);
+        }
+      },
+    },
+    mounted() {
+      if (this.errorText.length && this.error) {
+        this.sendPoliteMessage(this.errorText);
+      }
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .banner {
+    padding: 16px;
+  }
+
+</style>

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

@@ -0,0 +1,53 @@
+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';
+const sampleInfoMessage = 'This is an info message';
+
+// Helper function to render the component with the provided props
+const renderComponent = (props = {}) =>
+  render(StudioBanner, {
+    props: {
+      error: false,
+      errorText: '',
+      ...props,
+    },
+    routes: new VueRouter(),
+  });
+
+describe('StudioBanner', () => {
+  beforeEach(() => {
+    mockSendPoliteMessage.mockClear();
+  });
+
+  test('smoke test - with default props', () => {
+    renderComponent({ errorText: sampleInfoMessage });
+
+    const banner = screen.getByTestId('studio-banner');
+    expect(banner).toBeInTheDocument();
+    expect(banner).toHaveClass('banner', 'notranslate');
+    expect(screen.getByText(sampleInfoMessage)).toBeInTheDocument();
+  });
+
+  test('error true with errorText', () => {
+    renderComponent({
+      error: true,
+      errorText: sampleErrorMessage,
+    });
+
+    const banner = screen.getByTestId('studio-banner');
+    expect(banner).toHaveStyle('background-color: rgb(255, 217, 211)');
+    expect(screen.getByText(sampleErrorMessage)).toBeInTheDocument();
+    expect(mockSendPoliteMessage).toHaveBeenCalledWith(sampleErrorMessage);
+  });
+});