@infonomic/uikit 5.29.0 → 5.31.0

package/README.md

@@ -52,11 +52,12 @@ And then in your application in a global.css or other root CSS file...
 
 ```css
 /**
- * Core uikit styles including var system for breakpoints,
- * colors, scales, utils  etc., which can be optionally
+ * Optional reset and core styles including var system for 
+ * breakpoints, colors, scales, utils  etc., which can be
  * integrated with Tailwind (colors, breakpoints etc.) via
  * Tailwind theme configuration.
  */
+@import '@infonomic/uikit/reset.css';
 @import '@infonomic/uikit/styles.css';
 
 /**
@@ -98,33 +99,6 @@ Here's an example Tailwind CSS integration. Note that we have our own reset, and
 
 @custom-variant dark (&:is(.dark *));
 
-/* 
-   Set the utility class in Tailwind to match our own, as for now
-   at least, we add the 'container' class attribute to our container
-   component - which conflicts with Tailwind's own container utility.
-*/
-@utility container {
-  width: 100%;
-  padding: 0 16px;
-  margin: 0 auto;
-  max-width: 960px;
-
-  /* Large */
-  @media (min-width: 1050px) {
-    max-width: 1024px;
-  }
-
-  /* X-Large */
-  @media (min-width: 1230px) {
-    max-width: 1190px;
-  }
-
-  /* 2X-Large */
-  @media (min-width: 1500px) {
-    max-width: 1400px;
-  }
-}
-
 @theme {
   --breakpoint-*: initial;
   --breakpoint-sm: 640px;

package/dist/widgets/datepicker/datepicker.js

@@ -73,7 +73,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                         e.stopPropagation();
                         setIsOpen(true);
                     },
-                    value: date ? `${format(date, 'PP HH:mm')}` : '',
+                    value: date ? format(date, 'datetime' === mode ? 'PP HH:mm' : 'PP') : '',
                     placeHolder: placeHolderText,
                     helpText: helpText,
                     disabled: false,
@@ -199,7 +199,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                                     children: [
                                         /*#__PURE__*/ jsx("div", {
                                             className: datepicker_module["content-status"],
-                                            children: date ? `${format(date, 'PPPp')}` : 'No date selected'
+                                            children: date ? format(date, 'datetime' === mode ? 'PPPp' : 'PPP') : 'No date selected'
                                         }),
                                         /*#__PURE__*/ jsxs("div", {
                                             className: datepicker_module["content-actions"],

package/package.json

@@ -2,7 +2,7 @@
   "name": "@infonomic/uikit",
   "private": false,
   "license": "MIT",
-  "version": "5.29.0",
+  "version": "5.31.0",
   "type": "module",
   "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
   "keywords": [

package/src/widgets/datepicker/datepicker.stories.tsx

@@ -13,13 +13,30 @@ export const Default = (): React.JSX.Element => {
 
   return (
     <div style={{ maxWidth: '270px', margin: '2rem auto' }}>
-      <DatePicker
-        onDateChange={handleDateChange}
-        id="published_on"
-        name="published_on"
-        variant="outlined"
-        helpText="Select published on date."
-      />
+      <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '1.5rem' }}>
+        <span>Date and Time</span>
+        <DatePicker
+          onDateChange={handleDateChange}
+          id="published_on"
+          name="published_on"
+          yearsInPast={70}
+          variant="outlined"
+          helpText="Select published on date."
+        />
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '1.5rem' }}>
+        <span>Date</span>
+        <DatePicker
+          onDateChange={handleDateChange}
+          mode="date"
+          id="published_on"
+          name="published_on"
+          variant="outlined"
+          yearsInPast={70}
+          helpText="Select published on date."
+        />
+      </div>
     </div>
   )
 }

package/src/widgets/datepicker/datepicker.tsx

@@ -156,7 +156,7 @@ export function DatePicker({
             e.stopPropagation()
             setIsOpen(true)
           }}
-          value={date ? `${format(date, 'PP HH:mm')}` : ''}
+          value={date ? format(date, mode === 'datetime' ? 'PP HH:mm' : 'PP') : ''}
           placeHolder={placeHolderText}
           helpText={helpText}
           disabled={false}
@@ -272,7 +272,7 @@ export function DatePicker({
             </div>
             <div className={styles['status-and-actions']}>
               <div className={styles['content-status']}>
-                {date ? `${format(date, 'PPPp')}` : 'No date selected'}
+                {date ? format(date, mode === 'datetime' ? 'PPPp' : 'PPP') : 'No date selected'}
               </div>
               <div className={styles['content-actions']}>
                 <div>