Add Input styles

recipes/package.json

@@ -20,6 +20,7 @@
     "@types/storybook__addon-links": "^3.3.4",
     "@types/storybook__react": "^4.0.1",
     "axios": "^0.18.0",
+    "classnames": "^2.2.6",
     "moment": "^2.24.0",
     "node-sass": "^4.11.0",
     "ramda": "^0.26.1",

recipes/src/components/Input/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import TextField, { HelperText, Input as Field } from '@material/react-text-field';
+import classNames from 'classnames';
 
 import '@material/react-text-field/dist/text-field.css';
 import './styles.scss';
@@ -11,14 +12,37 @@ type InputProps = {
 	onChange: (e: any) => void,
 	textarea?: boolean,
 	onKeyDown? : (e: any) => void,
-	type?: "text"|"number"
+	type?: 'text'|'number',
+	style?: 'display'|'regular',
+	icon?: string,
 };
 
-const Input = ({label, helperText, textarea, value, onChange, onKeyDown, type = "text"}: InputProps) => (
+const Input = ({
+	label,
+	helperText,
+	textarea,
+	value,
+	onChange,
+	onKeyDown,
+	type = 'text',
+	style = 'regular',
+	icon,
+}: InputProps) => {
+	const fieldClasses = classNames(
+		'cbk-input',
+		{
+			'cbk-input--prefilled': value!=='',
+			[`cbk-input-${style}`]: true,
+			'mdc-text-field--no-label': style === 'display',
+		}
+	);
+	return (
 	<TextField
 		label={label}
 		helperText={helperText ? (<HelperText>{helperText || ''}</HelperText>) : undefined}
 		textarea={textarea}
+		className={fieldClasses}
+		fullWidth={style==='display'}
 	>
 		<Field
 			value={value}
@@ -27,8 +51,10 @@ const Input = ({label, helperText, textarea, value, onChange, onKeyDown, type =
 			onKeyDown={onKeyDown}
 			type={type}
 			min={0}
+			rows={1}
+			placeholder={style === 'display' ? label : ''}
 		/>
 	</TextField>
-);
+)};
 
 export default Input;

recipes/src/components/Input/styles.scss

@@ -1,3 +1,36 @@
-.mdc-text-field {
+@import 'styles/_variables.scss';
+
+.cbk-input.mdc-text-field {
   width: 100%;
-}
+  background-color: white;
+  label,
+  ::placeholder {
+    text-transform: capitalize;
+  }
+}
+
+.cbk-input--prefilled label.mdc-floating-label {
+  transform: translateY(-50%) scale(0.75);
+}
+
+.cbk-input {
+  &-display {
+    input
+     {
+      font-family: $font-family-display;
+      font-size: $font-size-xx-large;
+      font-weight: $font-weight-bold;
+      border-bottom: 0;
+    }
+  }
+}
+
+.cbk-input.mdc-text-field--focused,
+.cbk-input.mdc-text-field:hover,
+.mdc-text-field__input:hover {
+  background-color: white;
+}
+
+.mdc-text-field:hover::before {
+  opacity: 0;
+}

recipes/src/containers/Recipes/Create.tsx

@@ -70,9 +70,9 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
               <Cell columns={10}>
                 <Input 
                   label='name'
-                  helperText='Recipe name'
                   value={form.name}
                   onChange={this.updateField(['name'])}
+                  style='display'
                 />
 
                 <Input