feat(localized-rich-text-input): add expand icon

Author: montezume

src/components/inputs/localized-rich-text-input/editor.js

@@ -118,6 +118,8 @@ const Editor = props => {
                 isReadOnly={props.isReadOnly}
                 editor={props.editor}
                 containerStyles={containerStyles}
+                showExpandIcon={props.showExpandIcon}
+                onClickExpand={props.onClickExpand}
               >
                 {props.children}
               </RichTextBody>
@@ -183,6 +185,8 @@ const renderEditor = (props, editor, next) => {
     toggleLanguage: props.options.toggleLanguage,
     languagesControl: props.options.languagesControl,
     isOpen: props.options.isOpen,
+    showExpandIcon: props.options.showExpandIcon,
+    onClickExpand: props.options.onClickExpand,
     ...filterDataAttributes(props),
   };
 

src/components/inputs/localized-rich-text-input/localized-rich-text-input.js

@@ -169,6 +169,8 @@ const LocalizedRichTextInput = props => {
               )}
               warning={props.warnings && props.warnings[language]}
               error={props.errors && props.errors[language]}
+              showExpandIcon={props.showExpandIcon}
+              onClickExpand={props.onClickExpand}
               {...createLocalizedDataAttributes(props, language)}
             />
           );
@@ -219,6 +221,8 @@ LocalizedRichTextInput.propTypes = {
   hasWarning: PropTypes.bool,
   errors: PropTypes.objectOf(PropTypes.node),
   warnings: PropTypes.objectOf(PropTypes.node),
+  showExpandIcon: PropTypes.bool.isRequired,
+  onClickExpand: requiredIf(PropTypes.func, props => props.showExpandIcon),
 };
 
 LocalizedRichTextInput.serialize = RichTextInput.serialize;

src/components/inputs/localized-rich-text-input/localized-rich-text-input.story.js

@@ -48,6 +48,8 @@ class StoryWrapper extends React.Component {
         name={text('name', 'productName')}
         value={props.value}
         onChange={this.onChange}
+        showExpandIcon={boolean('showExpandIcon', false)}
+        onClickExpand={() => alert('Expand')}
         selectedLanguage={select(
           'selectedLanguage',
           ['en', 'de', 'nan-Hant-TW'],

src/components/inputs/localized-rich-text-input/localized-rich-text-input.visualroute.js

@@ -211,6 +211,16 @@ const DefaultRoute = () => (
         hasWarning={true}
       />
     </Spec>
+    <Spec label="when showExpandIcon is enabled" omitPropsList>
+      <LocalizedRichTextInput
+        value={initialValue}
+        onChange={() => {}}
+        selectedLanguage="en"
+        horizontalConstraint="m"
+        showExpandIcon={true}
+        onClickExpand={() => {}}
+      />
+    </Spec>
   </Suite>
 );
 

src/components/inputs/localized-rich-text-input/rich-text-input.js

@@ -136,6 +136,8 @@ class RichTextInput extends React.PureComponent {
           hasError: this.props.hasError,
           hasErrorOnRemainingLanguages: this.props.hasErrorOnRemainingLanguages,
           placeholder: this.props.placeholder,
+          onClickExpand: this.props.onClickExpand,
+          showExpandIcon: this.props.showExpandIcon,
         }}
         onChange={this.onValueChange}
         plugins={plugins}
@@ -169,6 +171,8 @@ RichTextInput.propTypes = {
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
   value: Types.value.isRequired,
+  showExpandIcon: PropTypes.bool.isRequired,
+  onClickExpand: requiredIf(PropTypes.func, props => props.showExpandIcon),
 };
 
 export default RichTextInput;