feat(text-input): setup invalid state

- Define 'invalid message' prop & slot
- Add 'data-invalid' to input wrapper
- Add *--text-input--invalid class to input
- Add WarningFilled16 icon

src/components/CvTextInput/CvTextInput.vue

@@ -9,31 +9,60 @@
     <label :for="cvId" :class="[`${carbonPrefix}--label`]">
       {{ label }}
     </label>
-    <div :class="[`${carbonPrefix}--text-input__field-wrapper`]">
+    <div
+      :class="[`${carbonPrefix}--text-input__field-wrapper`]"
+      :data-invalid="isInvalid"
+    >
+      <WarningFilled16
+        v-if="isInvalid"
+        :class="`${carbonPrefix}--text-input__invalid-icon`"
+      />
       <input
         :id="cvId"
-        :class="[`${carbonPrefix}--text-input`]"
+        :class="[
+          `${carbonPrefix}--text-input`,
+          {
+            [`${carbonPrefix}--text-input--invalid`]: isInvalid,
+          },
+        ]"
         v-bind="$attrs"
         type="text"
         :value="modelValue"
         @input="$event => $emit('update:modelValue', $event.target.value)"
       />
     </div>
+    <div v-if="isInvalid" :class="`${carbonPrefix}--form-requirement`">
+      <slot name="invalid-message">{{ invalidMessage }}</slot>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { onBeforeMount, onBeforeUpdate, ref, useSlots } from 'vue';
 import { carbonPrefix } from '../../global/settings';
 import { useCvId, props as propsCvId } from '../../use/cvId';
+import { WarningFilled16 } from '@carbon/icons-vue';
 
 const props = defineProps({
+  invalidMessage: { type: String, default: undefined },
   label: String,
   modelValue: String,
   ...propsCvId,
 });
 
 const cvId = useCvId(props);
 const emit = defineEmits(['update:modelValue']);
+const slots = useSlots();
+const isInvalid = ref(false);
+
+function updateMessageFlags() {
+  isInvalid.value = !!(
+    props.invalidMessage?.length || slots['invalid-message']
+  );
+}
+
+onBeforeMount(updateMessageFlags);
+onBeforeUpdate(updateMessageFlags);
 </script>
 
 <script>

src/components/CvTextInput/__tests__/CvTextInput.spec.js

@@ -78,4 +78,41 @@ describe('CvTextInput', () => {
       expect(input.value).toBe('');
     });
   });
+
+  describe('Invalid state', () => {
+    it("displays 'invalid-message' slot content", () => {
+      const dummySlottedMessage = 'Slotted invalid message';
+      const { getByText } = render(CvTextInput, {
+        slots: { 'invalid-message': dummySlottedMessage },
+      });
+
+      const wrapper = getByText(dummySlottedMessage);
+      expect(wrapper.textContent).toBe(dummySlottedMessage);
+      expect(wrapper.classList.contains('bx--form-requirement')).toBeTruthy();
+    });
+
+    it("displays 'invalid-message' prop", () => {
+      const dummyInvalidMessage = 'Prop invalid message';
+      const { getByText } = render(CvTextInput, {
+        props: { invalidMessage: dummyInvalidMessage },
+      });
+
+      const wrapper = getByText(dummyInvalidMessage);
+      expect(wrapper.textContent).toBe(dummyInvalidMessage);
+      expect(wrapper.classList.contains('bx--form-requirement')).toBeTruthy();
+    });
+
+    it('favors invalid message slot when both prop and slot are set', () => {
+      const dummyInvalidMessage = 'Prop invalid message';
+      const dummySlottedMessage = 'Slotted invalid message';
+      const { getByText } = render(CvTextInput, {
+        props: { invalidMessage: dummyInvalidMessage },
+        slots: { 'invalid-message': dummySlottedMessage },
+      });
+
+      const wrapper = getByText(dummySlottedMessage);
+      expect(wrapper.textContent).toBe(dummySlottedMessage);
+      expect(wrapper.classList.contains('bx--form-requirement')).toBeTruthy();
+    });
+  });
 });