kitchen-simulator 5.0.0-test.17 → 5.0.0-test.18

package/src/components/style/form-select.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import * as SharedStyle from '../../shared-style';
+import styled from 'styled-components';
+import {
+  TEXT_COLOR_NEUTRAL_3,
+  DEFAULT_FONT_FAMILY,
+  SECONDARY_PURPLE_COLOR
+} from '../../constants';
+
+const StyledSelect = styled.select`
+  display: block;
+  width: 120px;
+  float: right;
+  padding: 15px 10px 12px 0px;
+  color: ${TEXT_COLOR_NEUTRAL_3};
+  border: 2px solid;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 17px;
+  text-align: right;
+  outline: none;
+  border-radius: 5px;
+  :hover {
+    border-color: ${SECONDARY_PURPLE_COLOR};
+  }
+  :focus {
+    border-color: ${SECONDARY_PURPLE_COLOR};
+  }
+`;
+
+export default function FormSelect({ children, style, ...rest }) {
+  return (
+    <StyledSelect type="text" style={style} {...rest}>
+      {children}
+    </StyledSelect>
+  );
+}

package/src/components/style/form-slider.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import ReactRange from '@mapbox/react-range';
+import FormTextInput from './form-text-input';
+
+const sliderContainerStyle = {
+  display: 'inline-block',
+  width: '80%',
+  marginRight: '5%'
+};
+const sliderStyle = { display: 'block', width: '100%', height: '30px' };
+const textContainerStyle = {
+  display: 'inline-block',
+  width: '15%',
+  float: 'right'
+};
+const textStyle = { height: '34px', textAlign: 'center' };
+
+export default function FormNumberInput({ value, onChange, ...rest }) {
+  return (
+    <div>
+      <div style={sliderContainerStyle}>
+        <ReactRange
+          type="range"
+          style={sliderStyle}
+          onChange={onChange}
+          value={value}
+          {...rest}
+        />
+      </div>
+
+      <div style={textContainerStyle}>
+        <FormTextInput value={value} onChange={onChange} style={textStyle} />
+      </div>
+    </div>
+  );
+}

package/src/components/style/form-submit-button.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Button from './button';
+import * as SharedStyle from '../../shared-style';
+
+const STYLE = {
+  borderColor: '#415375',
+  backgroundColor: '#415375',
+  color: SharedStyle.COLORS.white
+};
+
+const STYLE_HOVER = {
+  borderColor: '#1f3149',
+  backgroundColor: '#1f3149',
+  color: SharedStyle.COLORS.white
+};
+
+export default function FormSubmitButton({ children, ...rest }) {
+  return (
+    <Button type="submit" style={STYLE} styleHover={STYLE_HOVER} {...rest}>
+      {children}
+    </Button>
+  );
+}

package/src/components/style/form-text-input.jsx

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import * as SharedStyle from '../../shared-style';
+import {
+  PROJECT_NAME_LENGTH_LIMIT,
+  TEXT_COLOR_NEUTRAL_3,
+  BG_COLOR_0,
+  DEFAULT_FONT_FAMILY,
+  SECONDARY_PURPLE_COLOR
+} from '../../constants';
+import styled from 'styled-components';
+
+const StyledInput = styled.input`
+  display: block;
+  padding: 15px 10px 12px 0px;
+  width: 120px;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 17px;
+  color: ${TEXT_COLOR_NEUTRAL_3};
+  background-color: ${BG_COLOR_0};
+  border: 2px solid;
+  text-align: right;
+  float: right;
+  border-radius: 5px;
+  outline: 0;
+  :focus {
+    border-color: ${SECONDARY_PURPLE_COLOR};
+  }
+`;
+
+export default class FormTextInput extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { focus: false };
+    this.input = React.createRef(null);
+  }
+
+  componentDidMount() {
+    if (this.input.current) {
+      this.input.current.select();
+    }
+  }
+
+  render() {
+    let { style, ...rest } = this.props;
+
+    return (
+      <StyledInput
+        ref={this.input}
+        onFocus={e => this.setState({ focus: true })}
+        onBlur={e => this.setState({ focus: false })}
+        style={style}
+        // autoFocus
+        type="text"
+        {...rest}
+        maxLength={PROJECT_NAME_LENGTH_LIMIT}
+      />
+    );
+  }
+}
+
+FormTextInput.defaultProps = {
+  style: {}
+};