refactor(settings-preview): better handle multi-line string

Author: landonreed

Diff for: lib/components/form/form.css

@@ -126,6 +126,11 @@
   font-size: 14px;
   line-height: 1.4;
   margin-top: -1px;
+  white-space: pre-wrap;
+}
+
+.otp .settings-preview .summary.tall {
+  line-height: 2.6;
 }
 
 .otp:not(.mobile) .settings-preview .summary {

Diff for: lib/components/form/settings-preview.js

@@ -25,8 +25,7 @@ class SettingsPreview extends Component {
   static defaultProps = {
     editButtonText: <i className='fa fa-pencil' />,
     messages: {
-      // Label accepted as two-element array or single (not array) string literal.
-      label: ['Transit Options', '& Preferences']
+      label: 'Transit Options\n& Preferences'
     }
   }
 
@@ -43,24 +42,13 @@ class SettingsPreview extends Component {
         {showDot && <div className='dot' />}
       </div>
     )
-
+    // Add tall class to account for vertical centering if there is only
+    // one line in the label (default is 2).
+    const addClass = messages.label.match(/\n/) ? '' : ' tall'
     return (
       <div className='settings-preview' onClick={this.props.onClick}>
-        <div className='summary'>
-          {// If settings preview is multiple lines, split
-            Array.isArray(messages.label)
-              ? <span>
-                {messages.label[0]}
-                <br />
-                {messages.label[1]}
-              </span>
-              : <span
-                // Increase line height if number of lines is 1 for vertical
-                // centering.
-                style={{lineHeight: 2.6}}>
-                {messages.label}
-              </span>
-          }
+        <div className={`summary${addClass}`}>
+          {messages.label}
         </div>
         {button}
         <div style={{ clear: 'both' }} />