@contentful/field-editor-single-line 1.3.10 → 1.3.11

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 (9) hide show
  1. package/dist/cjs/SingleLineEditor.js +11 -4
  2. package/dist/cjs/SingleLineEditor.test.js +40 -11
  3. package/dist/cjs/styles.js +7 -7
  4. package/dist/esm/SingleLineEditor.js +12 -5
  5. package/dist/esm/SingleLineEditor.test.js +40 -11
  6. package/dist/esm/styles.js +4 -4
  7. package/dist/types/SingleLineEditor.d.ts +5 -0
  8. package/dist/types/styles.d.ts +1 -1
  9. package/package.json +3 -3
package/dist/cjs/SingleLineEditor.js CHANGED
@@ -80,15 +80,22 @@ function SingleLineEditor(props) {
80
80
  onChange: (e)=>{
81
81
  setValue(e.target.value);
82
82
  }
83
- }), _react.createElement("div", {
84
- className: _styles.counterRow
83
+ }), props.withCharValidation && _react.createElement("div", {
84
+ className: _styles.validationRow
85
85
  }, _react.createElement(_fieldeditorshared.CharCounter, {
86
86
  value: value || '',
87
- checkConstraint: checkConstraint,
87
+ checkConstraint: checkConstraint
88
+ }), _react.createElement(_fieldeditorshared.CharValidation, {
88
89
  constraints: constraints
90
+ })), props.withCharValidation === false && _react.createElement("div", {
91
+ className: _styles.validationRow
92
+ }, _react.createElement(_fieldeditorshared.CharCounter, {
93
+ value: value || '',
94
+ checkConstraint: ()=>true
89
95
  })));
90
96
  });
91
97
  }
92
98
  SingleLineEditor.defaultProps = {
93
- isInitiallyDisabled: true
99
+ isInitiallyDisabled: true,
100
+ withCharValidation: true
94
101
  };
package/dist/cjs/SingleLineEditor.test.js CHANGED
@@ -78,13 +78,14 @@ describe('SingleLineEditor', ()=>{
78
78
  }
79
79
  };
80
80
  });
81
- const { getByTestId } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
81
+ const { getByTestId, getByText } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
82
82
  field: field,
83
83
  isInitiallyDisabled: false,
84
84
  locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
85
85
  }));
86
86
  expect(getByTestId('cf-ui-text-input')).toHaveValue(initialValue);
87
- expect(getByTestId('cf-ui-char-counter')).toHaveTextContent(`${initialValue.length} / 256`);
87
+ expect(getByText(`${initialValue.length} characters`)).toBeInTheDocument();
88
+ expect(getByText('Maximum 256 characters')).toBeInTheDocument();
88
89
  });
89
90
  it('calls field.setValue when user types and calls field.removeValue when user clears the input', async ()=>{
90
91
  const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
@@ -132,12 +133,13 @@ describe('SingleLineEditor', ()=>{
132
133
  id: 'field-id'
133
134
  };
134
135
  });
135
- const { getByTestId } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
136
+ const { getByText } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
136
137
  field: field,
137
138
  isInitiallyDisabled: false,
138
139
  locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
139
140
  }));
140
- expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 256');
141
+ expect(getByText('0 characters')).toBeInTheDocument();
142
+ expect(getByText('Maximum 256 characters')).toBeInTheDocument();
141
143
  });
142
144
  it('shows proper validation message (Text)', ()=>{
143
145
  const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
@@ -147,12 +149,13 @@ describe('SingleLineEditor', ()=>{
147
149
  id: 'field-id'
148
150
  };
149
151
  });
150
- const { getByTestId } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
152
+ const { getByText } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
151
153
  field: field,
152
154
  isInitiallyDisabled: false,
153
155
  locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
154
156
  }));
155
- expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 50000');
157
+ expect(getByText('0 characters')).toBeInTheDocument();
158
+ expect(getByText('Maximum 50000 characters')).toBeInTheDocument();
156
159
  });
157
160
  it('shows proper min-max validation message', ()=>{
158
161
  const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
@@ -170,12 +173,13 @@ describe('SingleLineEditor', ()=>{
170
173
  id: 'field-id'
171
174
  };
172
175
  });
173
- const { getByTestId } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
176
+ const { getByText } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
174
177
  field: field,
175
178
  isInitiallyDisabled: false,
176
179
  locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
177
180
  }));
178
- expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 1000');
181
+ expect(getByText('0 characters')).toBeInTheDocument();
182
+ expect(getByText('Requires between 100 and 1000 characters')).toBeInTheDocument();
179
183
  });
180
184
  it('shows proper min validation message', ()=>{
181
185
  const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
@@ -192,12 +196,37 @@ describe('SingleLineEditor', ()=>{
192
196
  id: 'field-id'
193
197
  };
194
198
  });
195
- const { getByTestId } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
199
+ const { getByText } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
200
+ field: field,
201
+ isInitiallyDisabled: false,
202
+ locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
203
+ }));
204
+ expect(getByText('0 characters')).toBeInTheDocument();
205
+ expect(getByText('Requires at least 1000 characters')).toBeInTheDocument();
206
+ });
207
+ it('renders no validation message if withCharValidation is falsy', ()=>{
208
+ const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
209
+ return {
210
+ ...field,
211
+ type: 'Symbol',
212
+ validations: [
213
+ {
214
+ size: {
215
+ min: 100,
216
+ max: 1000
217
+ }
218
+ }
219
+ ],
220
+ id: 'field-id'
221
+ };
222
+ });
223
+ const { getByText, queryByText } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
196
224
  field: field,
225
+ withCharValidation: false,
197
226
  isInitiallyDisabled: false,
198
227
  locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
199
228
  }));
200
- expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0');
201
- expect(getByTestId('cf-ui-char-counter')).not.toHaveTextContent('0 / 1000');
229
+ expect(getByText('0 characters')).toBeInTheDocument();
230
+ expect(queryByText('Requires between 100 and 1000 characters')).not.toBeInTheDocument();
202
231
  });
203
232
  });
package/dist/cjs/styles.js CHANGED
@@ -9,11 +9,11 @@ function _export(target, all) {
9
9
  });
10
10
  }
11
11
  _export(exports, {
12
- counterRow: function() {
13
- return counterRow;
14
- },
15
12
  rightToLeft: function() {
16
13
  return rightToLeft;
14
+ },
15
+ validationRow: function() {
16
+ return validationRow;
17
17
  }
18
18
  });
19
19
  const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
@@ -23,12 +23,12 @@ function _interop_require_default(obj) {
23
23
  default: obj
24
24
  };
25
25
  }
26
- const counterRow = (0, _emotion.css)({
27
- float: 'right',
28
- marginLeft: _f36tokens.default.spacingS,
26
+ const validationRow = (0, _emotion.css)({
27
+ display: 'flex',
28
+ justifyContent: 'space-between',
29
29
  fontSize: _f36tokens.default.fontSizeM,
30
30
  marginTop: _f36tokens.default.spacingXs,
31
- color: _f36tokens.default.gray500
31
+ color: _f36tokens.default.gray700
32
32
  });
33
33
  const rightToLeft = (0, _emotion.css)({
34
34
  direction: 'rtl'
package/dist/esm/SingleLineEditor.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { TextInput } from '@contentful/f36-components';
3
- import { FieldConnector, ConstraintsUtils, CharCounter } from '@contentful/field-editor-shared';
3
+ import { FieldConnector, ConstraintsUtils, CharCounter, CharValidation } from '@contentful/field-editor-shared';
4
4
  import * as styles from './styles';
5
5
  function isSupportedFieldTypes(val) {
6
6
  return val === 'Symbol' || val === 'Text';
@@ -29,15 +29,22 @@ export function SingleLineEditor(props) {
29
29
  onChange: (e)=>{
30
30
  setValue(e.target.value);
31
31
  }
32
- }), React.createElement("div", {
33
- className: styles.counterRow
32
+ }), props.withCharValidation && React.createElement("div", {
33
+ className: styles.validationRow
34
34
  }, React.createElement(CharCounter, {
35
35
  value: value || '',
36
- checkConstraint: checkConstraint,
36
+ checkConstraint: checkConstraint
37
+ }), React.createElement(CharValidation, {
37
38
  constraints: constraints
39
+ })), props.withCharValidation === false && React.createElement("div", {
40
+ className: styles.validationRow
41
+ }, React.createElement(CharCounter, {
42
+ value: value || '',
43
+ checkConstraint: ()=>true
38
44
  })));
39
45
  });
40
46
  }
41
47
  SingleLineEditor.defaultProps = {
42
- isInitiallyDisabled: true
48
+ isInitiallyDisabled: true,
49
+ withCharValidation: true
43
50
  };
package/dist/esm/SingleLineEditor.test.js CHANGED
@@ -33,13 +33,14 @@ describe('SingleLineEditor', ()=>{
33
33
  }
34
34
  };
35
35
  });
36
- const { getByTestId } = render(React.createElement(SingleLineEditor, {
36
+ const { getByTestId, getByText } = render(React.createElement(SingleLineEditor, {
37
37
  field: field,
38
38
  isInitiallyDisabled: false,
39
39
  locales: createFakeLocalesAPI()
40
40
  }));
41
41
  expect(getByTestId('cf-ui-text-input')).toHaveValue(initialValue);
42
- expect(getByTestId('cf-ui-char-counter')).toHaveTextContent(`${initialValue.length} / 256`);
42
+ expect(getByText(`${initialValue.length} characters`)).toBeInTheDocument();
43
+ expect(getByText('Maximum 256 characters')).toBeInTheDocument();
43
44
  });
44
45
  it('calls field.setValue when user types and calls field.removeValue when user clears the input', async ()=>{
45
46
  const [field] = createFakeFieldAPI((field)=>{
@@ -87,12 +88,13 @@ describe('SingleLineEditor', ()=>{
87
88
  id: 'field-id'
88
89
  };
89
90
  });
90
- const { getByTestId } = render(React.createElement(SingleLineEditor, {
91
+ const { getByText } = render(React.createElement(SingleLineEditor, {
91
92
  field: field,
92
93
  isInitiallyDisabled: false,
93
94
  locales: createFakeLocalesAPI()
94
95
  }));
95
- expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 256');
96
+ expect(getByText('0 characters')).toBeInTheDocument();
97
+ expect(getByText('Maximum 256 characters')).toBeInTheDocument();
96
98
  });
97
99
  it('shows proper validation message (Text)', ()=>{
98
100
  const [field] = createFakeFieldAPI((field)=>{
@@ -102,12 +104,13 @@ describe('SingleLineEditor', ()=>{
102
104
  id: 'field-id'
103
105
  };
104
106
  });
105
- const { getByTestId } = render(React.createElement(SingleLineEditor, {
107
+ const { getByText } = render(React.createElement(SingleLineEditor, {
106
108
  field: field,
107
109
  isInitiallyDisabled: false,
108
110
  locales: createFakeLocalesAPI()
109
111
  }));
110
- expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 50000');
112
+ expect(getByText('0 characters')).toBeInTheDocument();
113
+ expect(getByText('Maximum 50000 characters')).toBeInTheDocument();
111
114
  });
112
115
  it('shows proper min-max validation message', ()=>{
113
116
  const [field] = createFakeFieldAPI((field)=>{
@@ -125,12 +128,13 @@ describe('SingleLineEditor', ()=>{
125
128
  id: 'field-id'
126
129
  };
127
130
  });
128
- const { getByTestId } = render(React.createElement(SingleLineEditor, {
131
+ const { getByText } = render(React.createElement(SingleLineEditor, {
129
132
  field: field,
130
133
  isInitiallyDisabled: false,
131
134
  locales: createFakeLocalesAPI()
132
135
  }));
133
- expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 1000');
136
+ expect(getByText('0 characters')).toBeInTheDocument();
137
+ expect(getByText('Requires between 100 and 1000 characters')).toBeInTheDocument();
134
138
  });
135
139
  it('shows proper min validation message', ()=>{
136
140
  const [field] = createFakeFieldAPI((field)=>{
@@ -147,12 +151,37 @@ describe('SingleLineEditor', ()=>{
147
151
  id: 'field-id'
148
152
  };
149
153
  });
150
- const { getByTestId } = render(React.createElement(SingleLineEditor, {
154
+ const { getByText } = render(React.createElement(SingleLineEditor, {
155
+ field: field,
156
+ isInitiallyDisabled: false,
157
+ locales: createFakeLocalesAPI()
158
+ }));
159
+ expect(getByText('0 characters')).toBeInTheDocument();
160
+ expect(getByText('Requires at least 1000 characters')).toBeInTheDocument();
161
+ });
162
+ it('renders no validation message if withCharValidation is falsy', ()=>{
163
+ const [field] = createFakeFieldAPI((field)=>{
164
+ return {
165
+ ...field,
166
+ type: 'Symbol',
167
+ validations: [
168
+ {
169
+ size: {
170
+ min: 100,
171
+ max: 1000
172
+ }
173
+ }
174
+ ],
175
+ id: 'field-id'
176
+ };
177
+ });
178
+ const { getByText, queryByText } = render(React.createElement(SingleLineEditor, {
151
179
  field: field,
180
+ withCharValidation: false,
152
181
  isInitiallyDisabled: false,
153
182
  locales: createFakeLocalesAPI()
154
183
  }));
155
- expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0');
156
- expect(getByTestId('cf-ui-char-counter')).not.toHaveTextContent('0 / 1000');
184
+ expect(getByText('0 characters')).toBeInTheDocument();
185
+ expect(queryByText('Requires between 100 and 1000 characters')).not.toBeInTheDocument();
157
186
  });
158
187
  });
package/dist/esm/styles.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import tokens from '@contentful/f36-tokens';
2
2
  import { css } from 'emotion';
3
- export const counterRow = css({
4
- float: 'right',
5
- marginLeft: tokens.spacingS,
3
+ export const validationRow = css({
4
+ display: 'flex',
5
+ justifyContent: 'space-between',
6
6
  fontSize: tokens.fontSizeM,
7
7
  marginTop: tokens.spacingXs,
8
- color: tokens.gray500
8
+ color: tokens.gray700
9
9
  });
10
10
  export const rightToLeft = css({
11
11
  direction: 'rtl'
package/dist/types/SingleLineEditor.d.ts CHANGED
@@ -9,6 +9,10 @@ export interface SingleLineEditorProps {
9
9
  * is the field manually disabled
10
10
  */
11
11
  isDisabled?: boolean;
12
+ /**
13
+ * whether char validation should be shown or not
14
+ */
15
+ withCharValidation: boolean;
12
16
  /**
13
17
  * sdk.field
14
18
  */
@@ -22,5 +26,6 @@ export declare function SingleLineEditor(props: SingleLineEditorProps): JSX.Elem
22
26
  export declare namespace SingleLineEditor {
23
27
  var defaultProps: {
24
28
  isInitiallyDisabled: boolean;
29
+ withCharValidation: boolean;
25
30
  };
26
31
  }
package/dist/types/styles.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const counterRow: string;
1
+ export declare const validationRow: string;
2
2
  export declare const rightToLeft: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@contentful/field-editor-single-line",
3
- "version": "1.3.10",
3
+ "version": "1.3.11",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/types/index.d.ts",
@@ -37,7 +37,7 @@
37
37
  "dependencies": {
38
38
  "@contentful/f36-components": "^4.0.27",
39
39
  "@contentful/f36-tokens": "^4.0.0",
40
- "@contentful/field-editor-shared": "^1.4.8",
40
+ "@contentful/field-editor-shared": "^1.4.9",
41
41
  "emotion": "^10.0.17",
42
42
  "lodash": "^4.17.15"
43
43
  },
@@ -50,5 +50,5 @@
50
50
  "publishConfig": {
51
51
  "registry": "https://npm.pkg.github.com/"
52
52
  },
53
- "gitHead": "1d7d630fe6f9576ee4cf35feed8badc8440acbf1"
53
+ "gitHead": "29cf5fb16a8d61f6c23678dad618c61aceec320d"
54
54
  }