pebble-web 2.5.0 → 2.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pebble-web",
-  "version": "2.5.0",
+  "version": "2.5.2",
   "author": "ritz078 <rkritesh078@gmail.com>",
   "license": "MIT",
   "main": "dist/pebble-web.js",
@@ -44,12 +44,12 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "pebble-shared": "^2.4.0"
+    "pebble-shared": "^2.4.2"
   },
   "greenkeeper": {
     "ignore": [
       "rheostat"
     ]
   },
-  "gitHead": "caa00f9df1eadf04e33d85e4e7e40ab0386ed5b2"
+  "gitHead": "3fa42621310b7bb74d97296e741d68c124b0c25e"
 }

package/src/components/DateInput.tsx

@@ -5,7 +5,8 @@ import {
   dateClass,
   dropDownClassName,
   inputStyle,
-  wrapperStyle
+  wrapperStyle,
+  errorStyle
 } from "./styles/Date.styles";
 import Calendar from "./Calendar";
 import Input from "./Input";
@@ -83,7 +84,8 @@ export default class DateInput extends React.PureComponent<
       inputProps,
       placeholder,
       value: propsValue,
-      disabled
+      disabled,
+      errorMessage
     } = this.props;
 
     return (
@@ -100,7 +102,7 @@ export default class DateInput extends React.PureComponent<
                 onChange={noop}
                 type={"tel"}
                 value={value}
-                placeholder={`${placeholder} DD/MM/YYYY`}
+                placeholder={placeholder}
                 onClick={() => {
                   if (disabled) return;
                   toggleDropdown();
@@ -123,17 +125,20 @@ export default class DateInput extends React.PureComponent<
         modifiers={modifiers}
       >
         {({ toggle }) => (
-          <Calendar
-            hideShadow
-            className={dateClass}
-            selected={propsValue ? new Date(propsValue) : undefined}
-            {...calendarProps}
-            range={false}
-            onChange={date => {
-              this.onCalendarDateChange(date);
-              toggle();
-            }}
-          />
+          <>
+            <Calendar
+              hideShadow
+              className={dateClass}
+              selected={propsValue ? new Date(propsValue) : undefined}
+              {...calendarProps}
+              range={false}
+              onChange={date => {
+                this.onCalendarDateChange(date);
+                toggle();
+              }}
+            />
+            {errorMessage && <div className={errorStyle}>{errorMessage}</div>}
+          </>
         )}
       </DropDown>
     );

package/src/components/__tests__/dateInput.test.tsx

@@ -12,14 +12,15 @@ describe("DateInput", () => {
     const changeSpy = sinon.spy();
 
     const dateInput = mount(
-      <DateInput placeholder="Select Date" onChange={changeSpy} value={date} />
+      <DateInput
+        placeholder="Select Date DD/MM/YYYY"
+        onChange={changeSpy}
+        value={date}
+      />
     );
     dateInput.find(Input).simulate("click");
 
-    dateInput
-      .find(".react-calendar__tile")
-      .at(0)
-      .simulate("click");
+    dateInput.find(".react-calendar__tile").at(0).simulate("click");
 
     expect(changeSpy.calledOnce).toBeTruthy();
 

package/src/components/styles/Date.styles.ts

@@ -1,4 +1,6 @@
 import { css } from "emotion";
+import { colors } from "pebble-shared";
+import { typography } from "../../theme";
 import { inputMarginBottom } from "./Input.styles";
 
 export const dateClass = css({
@@ -17,3 +19,11 @@ export const inputStyle = css({
 export const wrapperStyle = css({
   marginBottom: 20
 });
+
+export const errorStyle = css({
+  ...typography.s.bold,
+  backgroundColor: colors.red.lightest,
+  color: colors.red.darker,
+  textAlign: "left",
+  padding: "11px 30px",
+})

package/src/components/typings/DateInput.ts

@@ -9,6 +9,7 @@ export interface DateInputProps {
   inputProps?: Omit<SimpleInputProps, "value" | "onChange" | "placeholder">;
   calendarProps?: DateSingle;
   disabled?: boolean;
+  errorMessage?: string;
 }
 
 export interface DateInputState {