feat(components):Light version IconSwitch and DateTimePicker

src/components/DateTimePicker/DateTimePicker.jsx

@@ -32,22 +32,27 @@ export const PICKER_KINDS = {
 
 export const PRESET_VALUES = [
   {
+    id: 'item-01',
     label: 'Last 30 minutes',
     offset: 30,
   },
   {
+    id: 'item-02',
     label: 'Last 1 hour',
     offset: 60,
   },
   {
+    id: 'item-03',
     label: 'Last 6 hours',
     offset: 360,
   },
   {
+    id: 'item-04',
     label: 'Last 12 hours',
     offset: 720,
   },
   {
+    id: 'item-05',
     label: 'Last 24 hours',
     offset: 1440,
   },
@@ -72,6 +77,7 @@ const propTypes = {
     PropTypes.exact({
       timeRangeKind: PropTypes.oneOf([PICKER_KINDS.PRESET]).isRequired,
       timeRangeValue: PropTypes.exact({
+        id: PropTypes.string,
         label: PropTypes.string.isRequired,
         offset: PropTypes.number.isRequired,
       }).isRequired,
@@ -156,6 +162,8 @@ const propTypes = {
     cancelBtnLabel: PropTypes.string,
     backBtnLabel: PropTypes.string,
   }),
+  /** Light version  */
+  light: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -231,6 +239,7 @@ const defaultProps = {
     cancelBtnLabel: 'Cancel',
     backBtnLabel: 'Back',
   },
+  light: false,
 };
 
 const DateTimePicker = ({
@@ -247,6 +256,7 @@ const DateTimePicker = ({
   onCancel,
   onApply,
   i18n,
+  light,
   ...others
 }) => {
   const strings = {
@@ -275,6 +285,7 @@ const DateTimePicker = ({
   const dateTimePickerBaseValue = {
     kind: '',
     preset: {
+      id: presets[0].id,
       label: presets[0].label,
       offset: presets[0].offset,
     },
@@ -404,7 +415,15 @@ const DateTimePicker = ({
       value.kind = customRangeKind;
     } else {
       const preset = presets
-        .filter(p => p.offset === (clickedPreset ? clickedPreset.offset : selectedPreset))
+        .filter(p => {
+          let filteredPreset;
+          if (p.id) {
+            filteredPreset = p.id === (clickedPreset ? clickedPreset.id : selectedPreset);
+          } else {
+            filteredPreset = p.offset === (clickedPreset ? clickedPreset.offset : selectedPreset);
+          }
+          return filteredPreset;
+        })
         .pop();
       value.preset = preset;
       value.kind = PICKER_KINDS.PRESET;
@@ -476,7 +495,7 @@ const DateTimePicker = ({
   };
 
   const onPresetClick = preset => {
-    setSelectedPreset(preset.offset);
+    setSelectedPreset(preset.id ?? preset.offset);
     renderValue(preset);
   };
 
@@ -548,7 +567,7 @@ const DateTimePicker = ({
     // If value was changed reset when going back to Preset
     if (absoluteValue.startDate !== '' || relativeValue.lastNumber > 0) {
       if (selectedPreset) {
-        onPresetClick(presets.filter(x => x.offset === selectedPreset)[0]);
+        onPresetClick(presets.filter(p => p.id ?? p.offset === selectedPreset)[0]);
         resetAbsoluteValue();
         resetRelativeValue();
       } else {
@@ -665,7 +684,11 @@ const DateTimePicker = ({
       id={`${iotPrefix}--date-time-picker__wrapper`}
       className={`${iotPrefix}--date-time-picker__wrapper`}
     >
-      <div className={`${iotPrefix}--date-time-picker__box`}>
+      <div
+        className={`${iotPrefix}--date-time-picker__box ${
+          light ? `${iotPrefix}--date-time-picker__box--light` : ''
+        }`}
+      >
         <div
           className={`${iotPrefix}--date-time-picker__field`}
           role="button"
@@ -721,7 +744,7 @@ const DateTimePicker = ({
                         `${iotPrefix}--date-time-picker__listitem ${iotPrefix}--date-time-picker__listitem--preset`,
                         {
                           [`${iotPrefix}--date-time-picker__listitem--preset-selected`]:
-                            selectedPreset === preset.offset,
+                            selectedPreset === (preset.id ?? preset.offset),
                         }
                       )}
                     >

src/components/DateTimePicker/DateTimePicker.story.jsx

@@ -112,4 +112,22 @@ storiesOf('Watson IoT Experimental/DateTime Picker', module)
         />
       </div>
     );
+  })
+  .add('Light version', () => {
+    const size = select('size', Object.keys(CARD_SIZES), CARD_SIZES.MEDIUMWIDE);
+    return (
+      <div style={{ width: `${getCardMinSize('lg', size).x}px`, margin: spacing06 }}>
+        <DateTimePicker
+          dateTimeMask={text('dateTimeMask', 'YYYY-MM-DD HH:mm')}
+          relatives={[
+            {
+              label: 'Yesterday',
+              value: RELATIVE_VALUES.YESTERDAY,
+            },
+          ]}
+          light
+          hasTimeInput={boolean('hasTimeInput', true)}
+        />
+      </div>
+    );
   });

src/components/DateTimePicker/DateTimePicker.test.jsx

@@ -45,9 +45,23 @@ describe('DateTimePicker', () => {
     mount(
       <DateTimePicker
         {...dateTimePickerProps}
+        presets={[
+          {
+            label: 'Last 30 minutes',
+            offset: 30,
+          },
+          {
+            label: 'Last 1 hour',
+            offset: 60,
+          },
+        ]}
         defaultValue={{
           timeRangeKind: PICKER_KINDS.PRESET,
-          timeRangeValue: PRESET_VALUES[1],
+          // test not having id
+          timeRangeValue: {
+            label: 'Last 30 minutes',
+            offset: 30,
+          },
         }}
       />
     );
@@ -427,22 +441,27 @@ describe('DateTimePicker', () => {
 
     const presets = [
       {
+        id: 'item-01',
         label: 'last-30-min',
         offset: 30,
       },
       {
+        id: 'item-02',
         label: 'last-1-hour',
         offset: 60,
       },
       {
+        id: 'item-03',
         label: 'last-6-hour',
         offset: 360,
       },
       {
+        id: 'item-04',
         label: 'last-12-hour',
         offset: 720,
       },
       {
+        id: 'item-05',
         label: 'last-24-hour',
         offset: 1440,
       },