@infonomic/uikit 5.29.0 → 5.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/widgets/datepicker/datepicker.js +2 -2
  2. package/package.json +1 -1
  3. package/src/widgets/datepicker/datepicker.stories.tsx +22 -7
  4. package/src/widgets/datepicker/datepicker.tsx +2 -2
package/dist/widgets/datepicker/datepicker.js CHANGED
@@ -73,7 +73,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
73
73
  e.stopPropagation();
74
74
  setIsOpen(true);
75
75
  },
76
- value: date ? `${format(date, 'PP HH:mm')}` : '',
76
+ value: date ? format(date, 'datetime' === mode ? 'PP HH:mm' : 'PP') : '',
77
77
  placeHolder: placeHolderText,
78
78
  helpText: helpText,
79
79
  disabled: false,
@@ -199,7 +199,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
199
199
  children: [
200
200
  /*#__PURE__*/ jsx("div", {
201
201
  className: datepicker_module["content-status"],
202
- children: date ? `${format(date, 'PPPp')}` : 'No date selected'
202
+ children: date ? format(date, 'datetime' === mode ? 'PPPp' : 'PPP') : 'No date selected'
203
203
  }),
204
204
  /*#__PURE__*/ jsxs("div", {
205
205
  className: datepicker_module["content-actions"],
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@infonomic/uikit",
3
3
  "private": false,
4
4
  "license": "MIT",
5
- "version": "5.29.0",
5
+ "version": "5.30.0",
6
6
  "type": "module",
7
7
  "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
8
8
  "keywords": [
package/src/widgets/datepicker/datepicker.stories.tsx CHANGED
@@ -13,13 +13,28 @@ export const Default = (): React.JSX.Element => {
13
13
 
14
14
  return (
15
15
  <div style={{ maxWidth: '270px', margin: '2rem auto' }}>
16
- <DatePicker
17
- onDateChange={handleDateChange}
18
- id="published_on"
19
- name="published_on"
20
- variant="outlined"
21
- helpText="Select published on date."
22
- />
16
+ <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '1.5rem' }}>
17
+ <span>Date and Time</span>
18
+ <DatePicker
19
+ onDateChange={handleDateChange}
20
+ id="published_on"
21
+ name="published_on"
22
+ variant="outlined"
23
+ helpText="Select published on date."
24
+ />
25
+ </div>
26
+
27
+ <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '1.5rem' }}>
28
+ <span>Date</span>
29
+ <DatePicker
30
+ onDateChange={handleDateChange}
31
+ mode="date"
32
+ id="published_on"
33
+ name="published_on"
34
+ variant="outlined"
35
+ helpText="Select published on date."
36
+ />
37
+ </div>
23
38
  </div>
24
39
  )
25
40
  }
package/src/widgets/datepicker/datepicker.tsx CHANGED
@@ -156,7 +156,7 @@ export function DatePicker({
156
156
  e.stopPropagation()
157
157
  setIsOpen(true)
158
158
  }}
159
- value={date ? `${format(date, 'PP HH:mm')}` : ''}
159
+ value={date ? format(date, mode === 'datetime' ? 'PP HH:mm' : 'PP') : ''}
160
160
  placeHolder={placeHolderText}
161
161
  helpText={helpText}
162
162
  disabled={false}
@@ -272,7 +272,7 @@ export function DatePicker({
272
272
  </div>
273
273
  <div className={styles['status-and-actions']}>
274
274
  <div className={styles['content-status']}>
275
- {date ? `${format(date, 'PPPp')}` : 'No date selected'}
275
+ {date ? format(date, mode === 'datetime' ? 'PPPp' : 'PPP') : 'No date selected'}
276
276
  </div>
277
277
  <div className={styles['content-actions']}>
278
278
  <div>