@terraware/web-components 1.0.21 → 1.0.22

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 (8) hide show
  1. package/components/DatePicker/DatePicker.d.ts +4 -2
  2. package/components/DatePicker/DatePicker.d.ts.map +1 -1
  3. package/components/DatePicker/DatePicker.js +22 -7
  4. package/components/DatePicker/styles.scss +38 -1
  5. package/components/Message/styles.scss +8 -4
  6. package/package.json +1 -1
  7. package/stories/DatePicker.stories.d.ts.map +1 -1
  8. package/stories/Message.stories.d.ts.map +1 -1
package/components/DatePicker/DatePicker.d.ts CHANGED
@@ -8,11 +8,13 @@ export interface Props {
8
8
  onChange: (id: string, value?: string | null) => void;
9
9
  'aria-label': string;
10
10
  onKeyPress?: KeyboardEventHandler;
11
- maxDate?: string;
12
- error?: boolean;
11
+ minDate?: any;
12
+ maxDate?: any;
13
+ errorText?: string;
13
14
  helperText?: string;
14
15
  disabled?: boolean;
15
16
  className?: string;
17
+ onError?: (reason: any, value: any) => void;
16
18
  }
17
19
  export default function DatePicker(props: Props): JSX.Element;
18
20
  //# sourceMappingURL=DatePicker.d.ts.map
package/components/DatePicker/DatePicker.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAIpD,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA0B5D"}
1
+ {"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAKpD,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAC7C;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA+C5D"}
package/components/DatePicker/DatePicker.js CHANGED
@@ -19,6 +19,8 @@ var _xDatePickers = require("@mui/x-date-pickers");
19
19
 
20
20
  var _AdapterDateFns = require("@mui/x-date-pickers/AdapterDateFns");
21
21
 
22
+ var _Icon = _interopRequireDefault(require("../Icon/Icon"));
23
+
22
24
  require("./styles.scss");
23
25
 
24
26
  function DatePicker(props) {
@@ -27,25 +29,38 @@ function DatePicker(props) {
27
29
 
28
30
  }, [window.navigator.language]);
29
31
 
32
+ var renderInput = function renderInput(params) {
33
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.TextField, Object.assign({}, params, {
34
+ id: props.id,
35
+ onKeyPress: props.onKeyPress
36
+ })), props.errorText && /*#__PURE__*/_react.default.createElement("div", {
37
+ className: "textfield-error-text-container"
38
+ }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
39
+ name: "error",
40
+ className: "textfield-error-text--icon"
41
+ }), /*#__PURE__*/_react.default.createElement("label", {
42
+ htmlFor: props.id,
43
+ className: "textfield-error-text"
44
+ }, props.errorText)));
45
+ };
46
+
30
47
  return /*#__PURE__*/_react.default.createElement("div", {
31
- className: "date-picker ".concat(props.className)
48
+ className: "date-picker ".concat(props.className, " ").concat(props.errorText ? 'date-picker--error' : '')
32
49
  }, /*#__PURE__*/_react.default.createElement(_xDatePickers.LocalizationProvider, {
33
50
  dateAdapter: _AdapterDateFns.AdapterDateFns
34
51
  }, props.label && /*#__PURE__*/_react.default.createElement("label", {
35
52
  htmlFor: props.id,
36
53
  className: "textfield-label"
37
54
  }, props.label), /*#__PURE__*/_react.default.createElement(_xDatePickers.DesktopDatePicker, {
55
+ onError: props.onError,
56
+ minDate: props.minDate,
57
+ maxDate: props.maxDate,
38
58
  inputFormat: "yyyy-MM-dd",
39
59
  value: props.value ? (0, _moment.default)(props.value, 'YYYY-MM-DD').toDate() : null,
40
60
  onChange: function onChange(newValue) {
41
61
  props.onChange(props.id, newValue);
42
62
  },
43
- renderInput: function renderInput(params) {
44
- return /*#__PURE__*/_react.default.createElement(_material.TextField, Object.assign({}, params, {
45
- id: props.id,
46
- onKeyPress: props.onKeyPress
47
- }));
48
- },
63
+ renderInput: renderInput,
49
64
  disabled: props.disabled
50
65
  })));
51
66
  }
package/components/DatePicker/styles.scss CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  .date-picker {
9
9
  display: flex;
10
- flex-flow: row wrap;
10
+ flex-flow: column wrap;
11
11
 
12
12
  .textfield-label {
13
13
  font-family: $tw-fnt-frm-fld-label-font-family;
@@ -21,6 +21,43 @@
21
21
  max-width: 100%;
22
22
  }
23
23
 
24
+ &--error {
25
+ .MuiInputBase-root {
26
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
27
+ background-color: $tw-clr-frm-fld-text-input-fill-error;
28
+
29
+ &:hover {
30
+ border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
31
+ }
32
+
33
+ &:active {
34
+ border: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-frm-fld-text-input-stroke-error;
35
+ }
36
+ }
37
+ }
38
+
39
+ .textfield-error-text-container {
40
+ display: flex;
41
+ margin-top: $tw-spc-base-x-small;
42
+
43
+ .textfield-error-text {
44
+ font-family: $tw-fnt-frm-fld-error-text-font-family;
45
+ font-size: $tw-fnt-frm-fld-error-text-font-size;
46
+ font-weight: $tw-fnt-frm-fld-error-text-font-weight;
47
+ line-height: $tw-fnt-frm-fld-error-text-line-height;
48
+ color: $tw-clr-frm-fld-error-text;
49
+ width: 100%;
50
+ max-width: 100%;
51
+
52
+ &--icon {
53
+ fill: $tw-clr-frm-fld-error-text;
54
+ width: $tw-fnt-frm-fld-error-text-line-height;
55
+ height: $tw-fnt-frm-fld-error-text-line-height;
56
+ margin-right: $tw-spc-base-x-small;
57
+ }
58
+ }
59
+ }
60
+
24
61
  .MuiInputBase-root {
25
62
  border: 1px solid $tw-clr-base-semantic-passive;
26
63
  position: unset;
package/components/Message/styles.scss CHANGED
@@ -132,7 +132,7 @@
132
132
  }
133
133
  border: 1px solid $tw-clr-icon-fill-passive;
134
134
  &.tw-message--toast {
135
- box-shadow: 0 2px $tw-clr-icon-fill-passive;
135
+ box-shadow: 0 2px $tw-clr-icon-fill-passive;
136
136
  }
137
137
  .tw-message--left-side {
138
138
  background-color: $tw-clr-icon-fill-passive;
@@ -150,7 +150,7 @@
150
150
  }
151
151
  border: 1px solid $tw-clr-icon-fill-critical;
152
152
  &.tw-message--toast {
153
- box-shadow: 0 2px $tw-clr-icon-fill-critical;
153
+ box-shadow: 0 2px $tw-clr-icon-fill-critical;
154
154
  }
155
155
  .tw-message--left-side {
156
156
  background-color: $tw-clr-icon-fill-critical;
@@ -168,7 +168,7 @@
168
168
  }
169
169
  border: 1px solid $tw-clr-icon-fill-warning;
170
170
  &.tw-message--toast {
171
- box-shadow: 0 2px $tw-clr-icon-fill-warning;
171
+ box-shadow: 0 2px $tw-clr-icon-fill-warning;
172
172
  }
173
173
  .tw-message--left-side {
174
174
  background-color: $tw-clr-icon-fill-warning;
@@ -186,10 +186,14 @@
186
186
  }
187
187
  border: 1px solid $tw-clr-icon-fill-success;
188
188
  &.tw-message--toast {
189
- box-shadow: 0 2px $tw-clr-icon-fill-success;
189
+ box-shadow: 0 2px $tw-clr-icon-fill-success;
190
190
  }
191
191
  .tw-message--left-side {
192
192
  background-color: $tw-clr-icon-fill-success;
193
193
  }
194
194
  }
195
+
196
+ &.tw-message--toast {
197
+ background-color: $tw-clr-base-white;
198
+ }
195
199
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@terraware/web-components",
3
- "version": "1.0.21",
3
+ "version": "1.0.22",
4
4
  "author": "Terraformation Inc.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/stories/DatePicker.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DatePicker.stories.d.ts","sourceRoot":"","sources":["../../src/stories/DatePicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AACtD,OAAO,UAAU,EAAE,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,qCAAqC,CAAC;;;;yBAO9E,OAAO,MAAM,SAAS,KAC5B,YAAY;;AANnB,wBAYE;AAcF,eAAO,MAAM,OAAO,4BAAoB,CAAC"}
1
+ {"version":3,"file":"DatePicker.stories.d.ts","sourceRoot":"","sources":["../../src/stories/DatePicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AACtD,OAAO,UAAU,EAAE,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,qCAAqC,CAAC;;;;yBAO9E,OAAO,MAAM,SAAS,KAC5B,YAAY;;AANnB,wBAYE;AAmBF,eAAO,MAAM,OAAO,4BAAoB,CAAC"}
package/stories/Message.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Message.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Message.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGzC,OAAO,OAAO,EAAE,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,+BAA+B,CAAC;;;;;AAE/E,wBAGE;AAMF,eAAO,MAAM,KAAK,qBAAoB,CAAC;AAWvC,eAAO,MAAM,IAAI,qBAAoB,CAAC"}
1
+ {"version":3,"file":"Message.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Message.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGzC,OAAO,OAAO,EAAE,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,+BAA+B,CAAC;;;;;AAE/E,wBAGE;AAUF,eAAO,MAAM,KAAK,qBAAoB,CAAC;AAWvC,eAAO,MAAM,IAAI,qBAAoB,CAAC"}