@contentful/field-editor-single-line 1.3.9 → 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 (8) hide show
  1. package/dist/cjs/SingleLineEditor.js +11 -8
  2. package/dist/cjs/SingleLineEditor.test.js +15 -13
  3. package/dist/cjs/styles.js +7 -7
  4. package/dist/esm/SingleLineEditor.js +11 -8
  5. package/dist/esm/SingleLineEditor.test.js +15 -13
  6. package/dist/esm/styles.js +7 -7
  7. package/dist/types/styles.d.ts +1 -1
  8. package/package.json +3 -3
package/dist/cjs/SingleLineEditor.js CHANGED
@@ -57,7 +57,7 @@ function isSupportedFieldTypes(val) {
57
57
  return val === 'Symbol' || val === 'Text';
58
58
  }
59
59
  function SingleLineEditor(props) {
60
- const { field, locales, withCharValidation } = props;
60
+ const { field, locales } = props;
61
61
  if (!isSupportedFieldTypes(field.type)) {
62
62
  throw new Error(`"${field.type}" field type is not supported by SingleLineEditor`);
63
63
  }
@@ -80,15 +80,18 @@ function SingleLineEditor(props) {
80
80
  onChange: (e)=>{
81
81
  setValue(e.target.value);
82
82
  }
83
- }), _react.createElement("div", {
84
- className: _styles.validationRow(withCharValidation)
85
- }, _react.createElement(_fieldeditorshared.CharValidation, {
86
- constraints: constraints,
87
- enabled: withCharValidation
88
- }), _react.createElement(_fieldeditorshared.CharCounter, {
83
+ }), props.withCharValidation && _react.createElement("div", {
84
+ className: _styles.validationRow
85
+ }, _react.createElement(_fieldeditorshared.CharCounter, {
89
86
  value: value || '',
90
- checkConstraint: checkConstraint,
87
+ checkConstraint: checkConstraint
88
+ }), _react.createElement(_fieldeditorshared.CharValidation, {
91
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
92
95
  })));
93
96
  });
94
97
  }
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,12 @@ describe('SingleLineEditor', ()=>{
170
173
  id: 'field-id'
171
174
  };
172
175
  });
173
- const { getByText, 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();
179
182
  expect(getByText('Requires between 100 and 1000 characters')).toBeInTheDocument();
180
183
  });
181
184
  it('shows proper min validation message', ()=>{
@@ -193,13 +196,12 @@ describe('SingleLineEditor', ()=>{
193
196
  id: 'field-id'
194
197
  };
195
198
  });
196
- const { getByText, getByTestId } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
199
+ const { getByText } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
197
200
  field: field,
198
201
  isInitiallyDisabled: false,
199
202
  locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
200
203
  }));
201
- expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0');
202
- expect(getByTestId('cf-ui-char-counter')).not.toHaveTextContent('0 / 1000');
204
+ expect(getByText('0 characters')).toBeInTheDocument();
203
205
  expect(getByText('Requires at least 1000 characters')).toBeInTheDocument();
204
206
  });
205
207
  it('renders no validation message if withCharValidation is falsy', ()=>{
@@ -218,13 +220,13 @@ describe('SingleLineEditor', ()=>{
218
220
  id: 'field-id'
219
221
  };
220
222
  });
221
- const { queryByText, getByTestId } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
223
+ const { getByText, queryByText } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
222
224
  field: field,
223
225
  withCharValidation: false,
224
226
  isInitiallyDisabled: false,
225
227
  locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
226
228
  }));
227
- expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 1000');
229
+ expect(getByText('0 characters')).toBeInTheDocument();
228
230
  expect(queryByText('Requires between 100 and 1000 characters')).not.toBeInTheDocument();
229
231
  });
230
232
  });
package/dist/cjs/styles.js CHANGED
@@ -23,13 +23,13 @@ function _interop_require_default(obj) {
23
23
  default: obj
24
24
  };
25
25
  }
26
- const validationRow = (withValidation)=>(0, _emotion.css)({
27
- display: 'flex',
28
- justifyContent: withValidation ? 'space-between' : 'flex-end',
29
- fontSize: _f36tokens.default.fontSizeM,
30
- marginTop: _f36tokens.default.spacingXs,
31
- color: _f36tokens.default.gray500
32
- });
26
+ const validationRow = (0, _emotion.css)({
27
+ display: 'flex',
28
+ justifyContent: 'space-between',
29
+ fontSize: _f36tokens.default.fontSizeM,
30
+ marginTop: _f36tokens.default.spacingXs,
31
+ color: _f36tokens.default.gray700
32
+ });
33
33
  const rightToLeft = (0, _emotion.css)({
34
34
  direction: 'rtl'
35
35
  });
package/dist/esm/SingleLineEditor.js CHANGED
@@ -6,7 +6,7 @@ function isSupportedFieldTypes(val) {
6
6
  return val === 'Symbol' || val === 'Text';
7
7
  }
8
8
  export function SingleLineEditor(props) {
9
- const { field, locales, withCharValidation } = props;
9
+ const { field, locales } = props;
10
10
  if (!isSupportedFieldTypes(field.type)) {
11
11
  throw new Error(`"${field.type}" field type is not supported by SingleLineEditor`);
12
12
  }
@@ -29,15 +29,18 @@ export function SingleLineEditor(props) {
29
29
  onChange: (e)=>{
30
30
  setValue(e.target.value);
31
31
  }
32
- }), React.createElement("div", {
33
- className: styles.validationRow(withCharValidation)
34
- }, React.createElement(CharValidation, {
35
- constraints: constraints,
36
- enabled: withCharValidation
37
- }), React.createElement(CharCounter, {
32
+ }), props.withCharValidation && React.createElement("div", {
33
+ className: styles.validationRow
34
+ }, React.createElement(CharCounter, {
38
35
  value: value || '',
39
- checkConstraint: checkConstraint,
36
+ checkConstraint: checkConstraint
37
+ }), React.createElement(CharValidation, {
40
38
  constraints: constraints
39
+ })), props.withCharValidation === false && React.createElement("div", {
40
+ className: styles.validationRow
41
+ }, React.createElement(CharCounter, {
42
+ value: value || '',
43
+ checkConstraint: ()=>true
41
44
  })));
42
45
  });
43
46
  }
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,12 @@ describe('SingleLineEditor', ()=>{
125
128
  id: 'field-id'
126
129
  };
127
130
  });
128
- const { getByText, 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();
134
137
  expect(getByText('Requires between 100 and 1000 characters')).toBeInTheDocument();
135
138
  });
136
139
  it('shows proper min validation message', ()=>{
@@ -148,13 +151,12 @@ describe('SingleLineEditor', ()=>{
148
151
  id: 'field-id'
149
152
  };
150
153
  });
151
- const { getByText, getByTestId } = render(React.createElement(SingleLineEditor, {
154
+ const { getByText } = render(React.createElement(SingleLineEditor, {
152
155
  field: field,
153
156
  isInitiallyDisabled: false,
154
157
  locales: createFakeLocalesAPI()
155
158
  }));
156
- expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0');
157
- expect(getByTestId('cf-ui-char-counter')).not.toHaveTextContent('0 / 1000');
159
+ expect(getByText('0 characters')).toBeInTheDocument();
158
160
  expect(getByText('Requires at least 1000 characters')).toBeInTheDocument();
159
161
  });
160
162
  it('renders no validation message if withCharValidation is falsy', ()=>{
@@ -173,13 +175,13 @@ describe('SingleLineEditor', ()=>{
173
175
  id: 'field-id'
174
176
  };
175
177
  });
176
- const { queryByText, getByTestId } = render(React.createElement(SingleLineEditor, {
178
+ const { getByText, queryByText } = render(React.createElement(SingleLineEditor, {
177
179
  field: field,
178
180
  withCharValidation: false,
179
181
  isInitiallyDisabled: false,
180
182
  locales: createFakeLocalesAPI()
181
183
  }));
182
- expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 1000');
184
+ expect(getByText('0 characters')).toBeInTheDocument();
183
185
  expect(queryByText('Requires between 100 and 1000 characters')).not.toBeInTheDocument();
184
186
  });
185
187
  });
package/dist/esm/styles.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import tokens from '@contentful/f36-tokens';
2
2
  import { css } from 'emotion';
3
- export const validationRow = (withValidation)=>css({
4
- display: 'flex',
5
- justifyContent: withValidation ? 'space-between' : 'flex-end',
6
- fontSize: tokens.fontSizeM,
7
- marginTop: tokens.spacingXs,
8
- color: tokens.gray500
9
- });
3
+ export const validationRow = css({
4
+ display: 'flex',
5
+ justifyContent: 'space-between',
6
+ fontSize: tokens.fontSizeM,
7
+ marginTop: tokens.spacingXs,
8
+ color: tokens.gray700
9
+ });
10
10
  export const rightToLeft = css({
11
11
  direction: 'rtl'
12
12
  });
package/dist/types/styles.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const validationRow: (withValidation: boolean) => 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.9",
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.7",
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": "129510a558258ae7eb0c53e7845868048a465ca7"
53
+ "gitHead": "29cf5fb16a8d61f6c23678dad618c61aceec320d"
54
54
  }