Merge pull request #80 from Ultimaker/changes-for-cloud-2fa-story

Changes for cloud 2fa story

Author: DanielSchiavini

src/components/input_fields/__tests__/__snapshots__/textarea_field.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`The textarea field component should render a wrapper 1`] = `
 <InputFieldWrapper
+  className="input-field--textarea"
   id="testInputField"
   labelLayoutWidth="1/1"
   labelWidthBreakpoint="sm"

src/components/input_fields/textarea_field.tsx

@@ -1,7 +1,8 @@
 // Copyright (c) 2018 Ultimaker B.V.
 import * as React from 'react';
+import classNames from 'classnames';
 
-import InputFieldWrapper, {InputFieldProps} from './input_field_wrapper';
+import InputFieldWrapper, { InputFieldProps } from './input_field_wrapper';
 import Textarea from '../textarea';
 import splitTextByNewLine from '../../utils/split_text_by_new_line';
 
@@ -39,25 +40,30 @@ class TextareaField extends React.Component<TextareaFieldProps, TextareaFieldSta
     }
 
     private _onChange(value: string): void {
-        this.setState({touched: true});
+        this.setState({ touched: true });
         this.props.onChangeHandler(this.props.id, value);
     }
 
     render() {
-        const {value, textareaAutoGrow, focusOnLoad, placeholder, children, ...wrapperProps} = this.props;
-        const {id, staticField} = wrapperProps;
-        const {touched} = this.state;
-        return <InputFieldWrapper touched={touched} inputChildren={children} {...wrapperProps}>{
-            staticField ? splitTextByNewLine(value) :
-            <Textarea
-                id={id}
-                onChangeHandler={this._onChange}
-                placeholder={placeholder}
-                value={value || ""}
-                autofocus={focusOnLoad}
-                autoGrow={textareaAutoGrow}
-            />
-        }</InputFieldWrapper>;
+        const { value, textareaAutoGrow, focusOnLoad, placeholder, className, children, ...wrapperProps } = this.props;
+        const { id, staticField } = wrapperProps;
+        const { touched } = this.state;
+        return <InputFieldWrapper
+            touched={touched}
+            className={classNames(className, "input-field--textarea")}
+            inputChildren={children}
+            {...wrapperProps}
+        >
+            {staticField ? splitTextByNewLine(value) :
+                <Textarea
+                    id={id}
+                    onChangeHandler={this._onChange}
+                    placeholder={placeholder}
+                    value={value || ""}
+                    autofocus={focusOnLoad}
+                    autoGrow={textareaAutoGrow}
+                />
+            }</InputFieldWrapper>;
     }
 }
 

src/components/modal.tsx

@@ -2,12 +2,12 @@ import * as React from 'react';
 import { TransitionMotion, spring } from 'react-motion';
 import classNames = require('classnames');
 
-export type ModalWidth = 'sm' | 'md';
+export type ModalWidth = 'sm' | 'md' | 'lg';
 
 export interface ModalProps {
     /** Called when the background overlay is clicked */
     onOverlayClickHandler?: Function;
-    /** The width of the modal: 'sm' | 'md' */
+    /** The width of the modal: 'sm' | 'md' | 'lg' */
     width?: ModalWidth;
 }
 

src/stories/modal.stories.tsx

@@ -24,6 +24,7 @@ stories.addDecorator(withKnobs)
 const widthOptions = {
     sm: 'sm',
     md: 'md',
+    lg: 'lg',
 };
 const widthDefaultValue = 'sm';
 

src/stylesheets/_base.scss

@@ -19,11 +19,6 @@ body {
     overflow-x: hidden;
 }
 
-p {
-    margin: 0;
-    min-height: 2.2rem;
-}
-
 .app {
     display: flex;
     min-height: 100vh;

src/stylesheets/_input_fields.scss

@@ -78,6 +78,13 @@
         }
     }
 
+    &.input-field--textarea {
+        .static-field p {
+            margin: 0;
+            min-height: 2.2rem;
+        }
+    }
+
     .input-field__label {
         @include font-size-text-2;
 

src/stylesheets/_modal.scss

@@ -29,6 +29,10 @@
         }
 
         &.modal__content--md {
+            width: 50.4rem;
+        }
+
+        &.modal__content--lg {
             width: 67.2rem;
         }
     }