feat(text-input): setup helper text props & slot

carbon-design-system · Apr 15, 2023 · 4c86386 · 4c86386
1 parent 24ec986
commit 4c86386
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 0 deletions.
diff --git a/src/components/CvTextInput/CvTextInput.vue b/src/components/CvTextInput/CvTextInput.vue
@@ -45,6 +45,9 @@
     <div v-if="isWarn" :class="`${carbonPrefix}--form__requirement`">
       <slot name="warn-text">{{ warnText }}</slot>
     </div>
+    <div v-if="isHelper" :class="[`${carbonPrefix}--form__helper-text`]">
+      <slot name="helper-text">{{ helperText }}</slot>
+    </div>
   </div>
 </template>
 
@@ -55,6 +58,7 @@ import { useCvId, props as propsCvId } from '../../use/cvId';
 import { WarningFilled16, WarningAltFilled16 } from '@carbon/icons-vue';
 
 const props = defineProps({
+  helperText: { type: String, default: undefined },
   invalidMessage: { type: String, default: undefined },
   label: String,
   modelValue: String,
@@ -67,13 +71,18 @@ const emit = defineEmits(['update:modelValue']);
 const slots = useSlots();
 const isInvalid = ref(false);
 const isWarn = ref(false);
+const isHelper = ref(false);
 
 function updateMessageFlags() {
   isInvalid.value = !!(
     props.invalidMessage?.length || slots['invalid-message']
   );
   isWarn.value =
     !isInvalid.value && !!(props.warnText?.length || slots['warn-text']);
+  isHelper.value =
+    !isInvalid.value &&
+    !isWarn.value &&
+    !!(props.helperText?.length || slots['helper-text']);
 }
 
 onBeforeMount(updateMessageFlags);

diff --git a/src/components/CvTextInput/__tests__/CvTextInput.spec.js b/src/components/CvTextInput/__tests__/CvTextInput.spec.js
@@ -208,4 +208,97 @@ describe('CvTextInput', () => {
       expect(queryByText(dummySlottedWarnMessage)).toBeNull();
     });
   });
+
+  describe('Helper text', () => {
+    it("displays 'helper-text' slot content", () => {
+      const dummySlottedMessage = 'Slotted helper text';
+      const { getByText } = render(CvTextInput, {
+        slots: { 'helper-text': dummySlottedMessage },
+      });
+
+      const wrapper = getByText(dummySlottedMessage);
+      expect(wrapper.textContent).toBe(dummySlottedMessage);
+      expect(wrapper.classList.contains('bx--form__helper-text')).toBeTruthy();
+    });
+
+    it("displays 'helper-text' prop", () => {
+      const dummyHelperText = 'Prop helper text';
+      const { getByText } = render(CvTextInput, {
+        props: { helperText: dummyHelperText },
+      });
+
+      const wrapper = getByText(dummyHelperText);
+      expect(wrapper.textContent).toBe(dummyHelperText);
+      expect(wrapper.classList.contains('bx--form__helper-text')).toBeTruthy();
+    });
+
+    it('favors helper text slot when both prop and slot are set', () => {
+      const dummyHelperText = 'Prop helper text';
+      const dummySlottedMessage = 'Slotted helper text';
+      const { getByText } = render(CvTextInput, {
+        props: { helperText: dummyHelperText },
+        slots: { 'helper-text': dummySlottedMessage },
+      });
+
+      const wrapper = getByText(dummySlottedMessage);
+      expect(wrapper.textContent).toBe(dummySlottedMessage);
+      expect(wrapper.classList.contains('bx--form__helper-text')).toBeTruthy();
+    });
+
+    it('does not display helper text prop when invalid message slot is set', () => {
+      const dummyHelperText = 'Prop helper text';
+      const dummySlottedMessage = 'Slotted invalid message';
+      const { getByText, queryByText } = render(CvTextInput, {
+        props: { helperText: dummyHelperText },
+        slots: { 'invalid-message': dummySlottedMessage },
+      });
+
+      const wrapper = getByText(dummySlottedMessage);
+      expect(wrapper.textContent).toBe(dummySlottedMessage);
+      expect(queryByText(dummyHelperText)).toBeNull();
+    });
+
+    it('does not display helper text prop when warn text slot is set', () => {
+      const dummyHelperText = 'Prop helper text';
+      const dummySlottedMessage = 'Slotted warn text';
+      const { getByText, queryByText } = render(CvTextInput, {
+        props: { helperText: dummyHelperText },
+        slots: { 'warn-text': dummySlottedMessage },
+      });
+
+      const wrapper = getByText(dummySlottedMessage);
+      expect(wrapper.textContent).toBe(dummySlottedMessage);
+      expect(queryByText(dummyHelperText)).toBeNull();
+    });
+
+    it('does not display helper slot when invalid message slot is set', () => {
+      const dummySlottedHelperMessage = 'Slotted helper text';
+      const dummySlottedInvalidMessage = 'Slotted invalid message';
+      const { getByText, queryByText } = render(CvTextInput, {
+        slots: {
+          'invalid-message': dummySlottedInvalidMessage,
+          'helper-text': dummySlottedHelperMessage,
+        },
+      });
+
+      const wrapper = getByText(dummySlottedInvalidMessage);
+      expect(wrapper.textContent).toBe(dummySlottedInvalidMessage);
+      expect(queryByText(dummySlottedHelperMessage)).toBeNull();
+    });
+
+    it('does not display helper slot when warn text slot is set', () => {
+      const dummySlottedHelperMessage = 'Slotted helper text';
+      const dummySlottedWarnMessage = 'Slotted warn text';
+      const { getByText, queryByText } = render(CvTextInput, {
+        slots: {
+          'warn-text': dummySlottedWarnMessage,
+          'helper-text': dummySlottedHelperMessage,
+        },
+      });
+
+      const wrapper = getByText(dummySlottedWarnMessage);
+      expect(wrapper.textContent).toBe(dummySlottedWarnMessage);
+      expect(queryByText(dummySlottedHelperMessage)).toBeNull();
+    });
+  });
 });