feat: reorganize props of multline and loalized inputs and fields (#389)

BREAKING: Changed APIs of LocalizedMultilineTextField, LocalizedTextField, MultilineTextField, LocalizedMultilineTextInput, LocalizedTextInput and MultilineTextInput

src/components/fields/localized-multiline-text-field/localized-multiline-text-field.js

@@ -35,14 +35,17 @@ class LocalizedMultilineTextField extends React.Component {
     selectedLanguage: PropTypes.string.isRequired,
     onBlur: PropTypes.func,
     onFocus: PropTypes.func,
-    isMultilineDefaultExpanded: PropTypes.bool,
-    hideLanguageControls: PropTypes.bool,
-    areLanguagesDefaultOpened: (props, propName, componentName, ...rest) => {
-      if (props.hideLanguageControls && typeof props[propName] === 'boolean') {
+    defaultExpandMultilineText: PropTypes.bool,
+    hideLanguageExpansionControls: PropTypes.bool,
+    defaultExpandLanguages: (props, propName, componentName, ...rest) => {
+      if (
+        props.hideLanguageExpansionControls &&
+        typeof props[propName] === 'boolean'
+      ) {
         throw new Error(
           oneLine`
             ${componentName}: "${propName}" does not have any effect when
-            "hideLanguageControls" is set.
+            "hideLanguageExpansionControls" is set.
           `
         );
       }
@@ -107,9 +110,11 @@ class LocalizedMultilineTextField extends React.Component {
             selectedLanguage={this.props.selectedLanguage}
             onBlur={this.props.onBlur}
             onFocus={this.props.onFocus}
-            isMultilineDefaultExpanded={this.props.isMultilineDefaultExpanded}
-            hideLanguageControls={this.props.hideLanguageControls}
-            areLanguagesDefaultOpened={this.props.areLanguagesDefaultOpened}
+            defaultExpandMultilineText={this.props.defaultExpandMultilineText}
+            hideLanguageExpansionControls={
+              this.props.hideLanguageExpansionControls
+            }
+            defaultExpandLanguages={this.props.defaultExpandLanguages}
             isAutofocussed={this.props.isAutofocussed}
             isDisabled={this.props.isDisabled}
             isReadOnly={this.props.isReadOnly}

src/components/fields/localized-multiline-text-field/localized-multiline-text-field.spec.js

@@ -80,7 +80,7 @@ it('should have an HTML name for input, according to the language', () => {
 it('should have an HTML name for every input when all inputs are visible', () => {
   const { container } = renderLocalizedMultilineTextField({
     name: 'foo',
-    areLanguagesDefaultOpened: true,
+    defaultExpandLanguages: true,
   });
   expect(container.querySelector('[name="foo.en"]')).toBeInTheDocument();
   expect(container.querySelector('[name="foo.de"]')).toBeInTheDocument();
@@ -170,7 +170,7 @@ describe('when disabled', () => {
   it('should disable all inputs when all languages  are visible', () => {
     const { getByLabelText } = renderLocalizedMultilineTextField({
       isDisabled: true,
-      areLanguagesDefaultOpened: true,
+      defaultExpandLanguages: true,
     });
     expect(getByLabelText('EN')).toHaveAttribute('disabled');
     expect(getByLabelText('DE')).toHaveAttribute('disabled');
@@ -187,7 +187,7 @@ describe('when readOnly', () => {
   it('should disable all inputs when all languages are visible', () => {
     const { getByLabelText } = renderLocalizedMultilineTextField({
       isReadOnly: true,
-      areLanguagesDefaultOpened: true,
+      defaultExpandLanguages: true,
     });
     expect(getByLabelText('EN')).toHaveAttribute('readonly');
     expect(getByLabelText('DE')).toHaveAttribute('readonly');

src/components/fields/localized-multiline-text-field/localized-multiline-text-field.story.js

@@ -30,16 +30,16 @@ storiesOf('Fields', module)
           const name = text('name', '');
           const hint = text('hint', 'More information about the product');
 
-          const areLanguagesDefaultOpened = boolean(
-            'areLanguagesDefaultOpened',
+          const defaultExpandLanguages = boolean(
+            'defaultExpandLanguages',
             false
           );
-          const isMultilineDefaultExpanded = boolean(
-            'isMultilineDefaultExpanded',
+          const defaultExpandMultilineText = boolean(
+            'defaultExpandMultilineText',
             false
           );
 
-          const key = `${isMultilineDefaultExpanded}-${areLanguagesDefaultOpened}`;
+          const key = `${defaultExpandMultilineText}-${defaultExpandLanguages}`;
 
           const errorsByLanguage = boolean('errorsByLanguage', false);
 
@@ -83,13 +83,16 @@ storiesOf('Fields', module)
               )}
               onBlur={action('onBlur')}
               onFocus={action('onFocus')}
-              hideLanguageControls={boolean('hideLanguageControls', false)}
-              areLanguagesDefaultOpened={
+              hideLanguageExpansionControls={boolean(
+                'hideLanguageExpansionControls',
+                false
+              )}
+              defaultExpandLanguages={
                 // we need to set undefined instead of false to avoid prop-type
-                // warnings in case hideLanguageControls is true
-                areLanguagesDefaultOpened || undefined
+                // warnings in case hideLanguageExpansionControls is true
+                defaultExpandLanguages || undefined
               }
-              isMultilineDefaultExpanded={isMultilineDefaultExpanded}
+              defaultExpandMultilineText={defaultExpandMultilineText}
               isAutofocussed={boolean('isAutofocussed', false)}
               isDisabled={boolean('isDisabled', false)}
               isReadOnly={boolean('isReadOnly', false)}

src/components/fields/localized-multiline-text-field/localized-multiline-text-field.visualroute.js

@@ -27,7 +27,7 @@ export const component = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint="m"
-        isMultilineDefaultExpanded={true}
+        defaultExpandMultilineText={true}
       />
     </Spec>
     <Spec label="when multiline text and languages are expanded by default">
@@ -37,8 +37,8 @@ export const component = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint="m"
-        isMultilineDefaultExpanded={true}
-        areLanguagesDefaultOpened={true}
+        defaultExpandMultilineText={true}
+        defaultExpandLanguages={true}
       />
     </Spec>
     <Spec label="when language controls are hidden">
@@ -48,7 +48,7 @@ export const component = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint="m"
-        hideLanguageControls={true}
+        hideLanguageExpansionControls={true}
       />
     </Spec>
     <Spec label="when languages are opened by default">
@@ -58,7 +58,7 @@ export const component = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint="m"
-        areLanguagesDefaultOpened={true}
+        defaultExpandLanguages={true}
       />
     </Spec>
     <Spec label="when read-only and open">
@@ -69,7 +69,7 @@ export const component = () => (
         selectedLanguage="en"
         horizontalConstraint="m"
         isReadOnly={true}
-        areLanguagesDefaultOpened={true}
+        defaultExpandLanguages={true}
       />
     </Spec>
     <Spec label="when read-only and closed">
@@ -90,7 +90,7 @@ export const component = () => (
         selectedLanguage="en"
         horizontalConstraint="m"
         isDisabled={true}
-        areLanguagesDefaultOpened={true}
+        defaultExpandLanguages={true}
       />
     </Spec>
     <Spec label="when disabled and closed">