refactor(datepicker): storybook improvements

Author: jenndiaz

components/datepicker/stories/datepicker.stories.js

@@ -34,7 +34,7 @@ export default {
 			control: "boolean",
 		},
 		isDateTimeRange: {
-			name: "Date Time Range styling",
+			name: "Date and Time styling",
 			type: { name: "boolean" },
 			table: {
 				type: { summary: "boolean" },

components/datepicker/stories/template.js

@@ -67,7 +67,7 @@ export const Template = ({
 				isQuiet,
 				isDisabled,
 				isReadOnly: readOnly,
-				isInvalid: isRange ? "" : isInvalid,
+				isInvalid: !isRange ? isInvalid : undefined,
 				customClasses: [`${rootClass}-textfield`],
 				customInputClasses: isRange ? [`${rootClass}-input`, `${rootClass}-startField`] : [`${rootClass}-input`],
 				placeholder: "Choose a date",