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

package/dist/cjs/SingleLineEditor.js

@@ -80,22 +80,15 @@ function SingleLineEditor(props) {
             onChange: (e)=>{
                 setValue(e.target.value);
             }
-        }), props.withCharValidation && _react.createElement("div", {
-            className: _styles.validationRow
+        }), _react.createElement("div", {
+            className: _styles.counterRow
         }, _react.createElement(_fieldeditorshared.CharCounter, {
             value: value || '',
-            checkConstraint: checkConstraint
-        }), _react.createElement(_fieldeditorshared.CharValidation, {
+            checkConstraint: checkConstraint,
             constraints: constraints
-        })), props.withCharValidation === false && _react.createElement("div", {
-            className: _styles.validationRow
-        }, _react.createElement(_fieldeditorshared.CharCounter, {
-            value: value || '',
-            checkConstraint: ()=>true
         })));
     });
 }
 SingleLineEditor.defaultProps = {
-    isInitiallyDisabled: true,
-    withCharValidation: true
+    isInitiallyDisabled: true
 };

package/dist/cjs/SingleLineEditor.test.js

@@ -78,14 +78,13 @@ describe('SingleLineEditor', ()=>{
                 }
             };
         });
-        const { getByTestId, getByText } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
+        const { getByTestId } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
             field: field,
             isInitiallyDisabled: false,
             locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
         }));
         expect(getByTestId('cf-ui-text-input')).toHaveValue(initialValue);
-        expect(getByText(`${initialValue.length} characters`)).toBeInTheDocument();
-        expect(getByText('Maximum 256 characters')).toBeInTheDocument();
+        expect(getByTestId('cf-ui-char-counter')).toHaveTextContent(`${initialValue.length} / 256`);
     });
     it('calls field.setValue when user types and calls field.removeValue when user clears the input', async ()=>{
         const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
@@ -133,13 +132,12 @@ describe('SingleLineEditor', ()=>{
                 id: 'field-id'
             };
         });
-        const { getByText } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
+        const { getByTestId } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
             field: field,
             isInitiallyDisabled: false,
             locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
         }));
-        expect(getByText('0 characters')).toBeInTheDocument();
-        expect(getByText('Maximum 256 characters')).toBeInTheDocument();
+        expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 256');
     });
     it('shows proper validation message (Text)', ()=>{
         const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
@@ -149,13 +147,12 @@ describe('SingleLineEditor', ()=>{
                 id: 'field-id'
             };
         });
-        const { getByText } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
+        const { getByTestId } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
             field: field,
             isInitiallyDisabled: false,
             locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
         }));
-        expect(getByText('0 characters')).toBeInTheDocument();
-        expect(getByText('Maximum 50000 characters')).toBeInTheDocument();
+        expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 50000');
     });
     it('shows proper min-max validation message', ()=>{
         const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
@@ -173,13 +170,12 @@ describe('SingleLineEditor', ()=>{
                 id: 'field-id'
             };
         });
-        const { getByText } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
+        const { getByTestId } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
             field: field,
             isInitiallyDisabled: false,
             locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
         }));
-        expect(getByText('0 characters')).toBeInTheDocument();
-        expect(getByText('Requires between 100 and 1000 characters')).toBeInTheDocument();
+        expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 1000');
     });
     it('shows proper min validation message', ()=>{
         const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
@@ -196,37 +192,12 @@ describe('SingleLineEditor', ()=>{
                 id: 'field-id'
             };
         });
-        const { getByText } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
-            field: field,
-            isInitiallyDisabled: false,
-            locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
-        }));
-        expect(getByText('0 characters')).toBeInTheDocument();
-        expect(getByText('Requires at least 1000 characters')).toBeInTheDocument();
-    });
-    it('renders no validation message if withCharValidation is falsy', ()=>{
-        const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
-            return {
-                ...field,
-                type: 'Symbol',
-                validations: [
-                    {
-                        size: {
-                            min: 100,
-                            max: 1000
-                        }
-                    }
-                ],
-                id: 'field-id'
-            };
-        });
-        const { getByText, queryByText } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
+        const { getByTestId } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
             field: field,
-            withCharValidation: false,
             isInitiallyDisabled: false,
             locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
         }));
-        expect(getByText('0 characters')).toBeInTheDocument();
-        expect(queryByText('Requires between 100 and 1000 characters')).not.toBeInTheDocument();
+        expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0');
+        expect(getByTestId('cf-ui-char-counter')).not.toHaveTextContent('0 / 1000');
     });
 });

package/dist/cjs/styles.js

@@ -9,11 +9,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    counterRow: function() {
+        return counterRow;
+    },
     rightToLeft: function() {
         return rightToLeft;
-    },
-    validationRow: function() {
-        return validationRow;
     }
 });
 const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
@@ -23,12 +23,12 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const validationRow = (0, _emotion.css)({
-    display: 'flex',
-    justifyContent: 'space-between',
+const counterRow = (0, _emotion.css)({
+    float: 'right',
+    marginLeft: _f36tokens.default.spacingS,
     fontSize: _f36tokens.default.fontSizeM,
     marginTop: _f36tokens.default.spacingXs,
-    color: _f36tokens.default.gray700
+    color: _f36tokens.default.gray500
 });
 const rightToLeft = (0, _emotion.css)({
     direction: 'rtl'

package/dist/esm/SingleLineEditor.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TextInput } from '@contentful/f36-components';
-import { FieldConnector, ConstraintsUtils, CharCounter, CharValidation } from '@contentful/field-editor-shared';
+import { FieldConnector, ConstraintsUtils, CharCounter } from '@contentful/field-editor-shared';
 import * as styles from './styles';
 function isSupportedFieldTypes(val) {
     return val === 'Symbol' || val === 'Text';
@@ -29,22 +29,15 @@ export function SingleLineEditor(props) {
             onChange: (e)=>{
                 setValue(e.target.value);
             }
-        }), props.withCharValidation && React.createElement("div", {
-            className: styles.validationRow
+        }), React.createElement("div", {
+            className: styles.counterRow
         }, React.createElement(CharCounter, {
             value: value || '',
-            checkConstraint: checkConstraint
-        }), React.createElement(CharValidation, {
+            checkConstraint: checkConstraint,
             constraints: constraints
-        })), props.withCharValidation === false && React.createElement("div", {
-            className: styles.validationRow
-        }, React.createElement(CharCounter, {
-            value: value || '',
-            checkConstraint: ()=>true
         })));
     });
 }
 SingleLineEditor.defaultProps = {
-    isInitiallyDisabled: true,
-    withCharValidation: true
+    isInitiallyDisabled: true
 };

package/dist/esm/SingleLineEditor.test.js

@@ -33,14 +33,13 @@ describe('SingleLineEditor', ()=>{
                 }
             };
         });
-        const { getByTestId, getByText } = render(React.createElement(SingleLineEditor, {
+        const { getByTestId } = render(React.createElement(SingleLineEditor, {
             field: field,
             isInitiallyDisabled: false,
             locales: createFakeLocalesAPI()
         }));
         expect(getByTestId('cf-ui-text-input')).toHaveValue(initialValue);
-        expect(getByText(`${initialValue.length} characters`)).toBeInTheDocument();
-        expect(getByText('Maximum 256 characters')).toBeInTheDocument();
+        expect(getByTestId('cf-ui-char-counter')).toHaveTextContent(`${initialValue.length} / 256`);
     });
     it('calls field.setValue when user types and calls field.removeValue when user clears the input', async ()=>{
         const [field] = createFakeFieldAPI((field)=>{
@@ -88,13 +87,12 @@ describe('SingleLineEditor', ()=>{
                 id: 'field-id'
             };
         });
-        const { getByText } = render(React.createElement(SingleLineEditor, {
+        const { getByTestId } = render(React.createElement(SingleLineEditor, {
             field: field,
             isInitiallyDisabled: false,
             locales: createFakeLocalesAPI()
         }));
-        expect(getByText('0 characters')).toBeInTheDocument();
-        expect(getByText('Maximum 256 characters')).toBeInTheDocument();
+        expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 256');
     });
     it('shows proper validation message (Text)', ()=>{
         const [field] = createFakeFieldAPI((field)=>{
@@ -104,13 +102,12 @@ describe('SingleLineEditor', ()=>{
                 id: 'field-id'
             };
         });
-        const { getByText } = render(React.createElement(SingleLineEditor, {
+        const { getByTestId } = render(React.createElement(SingleLineEditor, {
             field: field,
             isInitiallyDisabled: false,
             locales: createFakeLocalesAPI()
         }));
-        expect(getByText('0 characters')).toBeInTheDocument();
-        expect(getByText('Maximum 50000 characters')).toBeInTheDocument();
+        expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 50000');
     });
     it('shows proper min-max validation message', ()=>{
         const [field] = createFakeFieldAPI((field)=>{
@@ -128,13 +125,12 @@ describe('SingleLineEditor', ()=>{
                 id: 'field-id'
             };
         });
-        const { getByText } = render(React.createElement(SingleLineEditor, {
+        const { getByTestId } = render(React.createElement(SingleLineEditor, {
             field: field,
             isInitiallyDisabled: false,
             locales: createFakeLocalesAPI()
         }));
-        expect(getByText('0 characters')).toBeInTheDocument();
-        expect(getByText('Requires between 100 and 1000 characters')).toBeInTheDocument();
+        expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 1000');
     });
     it('shows proper min validation message', ()=>{
         const [field] = createFakeFieldAPI((field)=>{
@@ -151,37 +147,12 @@ describe('SingleLineEditor', ()=>{
                 id: 'field-id'
             };
         });
-        const { getByText } = render(React.createElement(SingleLineEditor, {
-            field: field,
-            isInitiallyDisabled: false,
-            locales: createFakeLocalesAPI()
-        }));
-        expect(getByText('0 characters')).toBeInTheDocument();
-        expect(getByText('Requires at least 1000 characters')).toBeInTheDocument();
-    });
-    it('renders no validation message if withCharValidation is falsy', ()=>{
-        const [field] = createFakeFieldAPI((field)=>{
-            return {
-                ...field,
-                type: 'Symbol',
-                validations: [
-                    {
-                        size: {
-                            min: 100,
-                            max: 1000
-                        }
-                    }
-                ],
-                id: 'field-id'
-            };
-        });
-        const { getByText, queryByText } = render(React.createElement(SingleLineEditor, {
+        const { getByTestId } = render(React.createElement(SingleLineEditor, {
             field: field,
-            withCharValidation: false,
             isInitiallyDisabled: false,
             locales: createFakeLocalesAPI()
         }));
-        expect(getByText('0 characters')).toBeInTheDocument();
-        expect(queryByText('Requires between 100 and 1000 characters')).not.toBeInTheDocument();
+        expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0');
+        expect(getByTestId('cf-ui-char-counter')).not.toHaveTextContent('0 / 1000');
     });
 });

package/dist/esm/styles.js

@@ -1,11 +1,11 @@
 import tokens from '@contentful/f36-tokens';
 import { css } from 'emotion';
-export const validationRow = css({
-    display: 'flex',
-    justifyContent: 'space-between',
+export const counterRow = css({
+    float: 'right',
+    marginLeft: tokens.spacingS,
     fontSize: tokens.fontSizeM,
     marginTop: tokens.spacingXs,
-    color: tokens.gray700
+    color: tokens.gray500
 });
 export const rightToLeft = css({
     direction: 'rtl'

package/dist/types/SingleLineEditor.d.ts

@@ -9,10 +9,6 @@ export interface SingleLineEditorProps {
      * is the field manually disabled
      */
     isDisabled?: boolean;
-    /**
-     * whether char validation should be shown or not
-     */
-    withCharValidation: boolean;
     /**
      * sdk.field
      */
@@ -26,6 +22,5 @@ export declare function SingleLineEditor(props: SingleLineEditorProps): JSX.Elem
 export declare namespace SingleLineEditor {
     var defaultProps: {
         isInitiallyDisabled: boolean;
-        withCharValidation: boolean;
     };
 }

package/dist/types/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const validationRow: string;
+export declare const counterRow: string;
 export declare const rightToLeft: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-single-line",
-  "version": "1.3.8",
+  "version": "1.3.10",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -37,7 +37,7 @@
   "dependencies": {
     "@contentful/f36-components": "^4.0.27",
     "@contentful/f36-tokens": "^4.0.0",
-    "@contentful/field-editor-shared": "^1.4.6",
+    "@contentful/field-editor-shared": "^1.4.8",
     "emotion": "^10.0.17",
     "lodash": "^4.17.15"
   },
@@ -50,5 +50,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "894934e9a2888aeb0a894cfebea3e034ba830f2a"
+  "gitHead": "1d7d630fe6f9576ee4cf35feed8badc8440acbf1"
 }