feat: One off campaign UI (#2621)

app/javascript/dashboard/components/ui/stories/DateRangePicker.stories.js

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import WootDateRangePicker from '../DateRangePicker';
+import WootDateRangePicker from '../DateRangePicker.vue';
 
 export default {
   title: 'Components/Date Picker/Date Range Picker',
@@ -34,5 +34,5 @@ const Template = (args, { argTypes }) => ({
 export const DateRangePicker = Template.bind({});
 DateRangePicker.args = {
   onChange: action('applied'),
-  value: [new Date(), new Date()],
+  value: new Date(),
 };

app/javascript/dashboard/components/ui/stories/DateTimePicker.stories.js

@@ -0,0 +1,38 @@
+import { action } from '@storybook/addon-actions';
+import WootDateTimePicker from '../DateTimePicker.vue';
+
+export default {
+  title: 'Components/Date Picker/Date Time Picker',
+  argTypes: {
+    confirmText: {
+      defaultValue: 'Apply',
+      control: {
+        type: 'text',
+      },
+    },
+    placeholder: {
+      defaultValue: 'Select date time',
+      control: {
+        type: 'text',
+      },
+    },
+    value: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { WootDateTimePicker },
+  template:
+    '<woot-date-time-picker v-bind="$props" @change="onChange"></woot-date-time-picker>',
+});
+
+export const DateTimePicker = Template.bind({});
+DateTimePicker.args = {
+  onChange: action('applied'),
+  value: new Date(),
+};