feat(atoms): add user flow styles for input

8base · Aug 8, 2018 · 2f82549 · 2f82549
1 parent cb2b962
commit 2f82549
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 91 deletions.
diff --git a/src/atoms/dataEntry/Input/Input.js b/src/atoms/dataEntry/Input/Input.js
@@ -23,7 +23,9 @@ type InputCommonProps = {
   maxLength?: number,
   /** callback to set input ref */
   insideRef?:(HTMLInputElement) => void,
-}
+  /** kind of the input */
+  kind?: 'bordered' | 'underline',
+};
 
 type InputProps = {
   /** input name */
@@ -44,7 +46,7 @@ type InputProps = {
   onChange?: (value?: string | number, event?: SyntheticInputEvent<HTMLInputElement>) => void,
   onFocus?: (?SyntheticFocusEvent<HTMLInputElement>) => void,
   onBlur?: (?SyntheticFocusEvent<HTMLInputElement>) => void,
-} & InputCommonProps
+} & InputCommonProps;
 
 class Input extends PureComponent<InputProps> {
   static defaultProps = {
@@ -55,6 +57,7 @@ class Input extends PureComponent<InputProps> {
     square: false,
     stretch: true,
     type: 'text',
+    kind: 'bordered',
   }
 
   onChange = (event: *) => {
@@ -90,6 +93,8 @@ class Input extends PureComponent<InputProps> {
       stretch,
       type,
       value,
+      name,
+      kind,
       ...rest } = this.props;
     const hasLeftIcon = !!leftIcon;
     const hasRightIcon = !!rightIcon;
@@ -108,6 +113,8 @@ class Input extends PureComponent<InputProps> {
       type,
       value,
       insideRef,
+      name,
+      kind,
     };
 
     return (

diff --git a/src/atoms/dataEntry/Input/Input.theme.js b/src/atoms/dataEntry/Input/Input.theme.js
@@ -7,8 +7,6 @@ const name = 'input';
 
 const theme = createTheme(name, (colors: *): * => ({
   input: {
-    border: `1px solid ${colors.PRIMARY_BORDER_COLOR}`,
-    borderRadius: '5px',
     color: colors.PRIMARY_TEXT_COLOR,
     fontSize: '1.4rem',
     fontWeight: 400,
@@ -31,6 +29,16 @@ const theme = createTheme(name, (colors: *): * => ({
       right: { textAlign: 'right ' },
       center: { textAlign: 'center ' },
     },
+    kind: {
+      bordered: {
+        border: `1px solid ${colors.PRIMARY_BORDER_COLOR}`,
+        borderRadius: '5px',
+      },
+      underline: {
+        border: 0,
+        borderBottom: `1px solid ${colors.PRIMARY_BORDER_COLOR}`,
+      },
+    },
   },
 
   inputSquare: {
@@ -54,16 +62,17 @@ const theme = createTheme(name, (colors: *): * => ({
   },
 
   defaults: {
+    kind: 'app',
   },
 }));
 
-const InputWrapperTag = createStyledTag(name, props => ({
+const InputWrapperTag = createStyledTag(`${name}Wrapper`, props => ({
   display: 'inline-flex',
   position: 'relative',
   width: props.stretch && !props.square ? '100%' : 'auto',
 }));
 
-const InputIndicatorTag = createStyledTag(name, props => ({
+const InputIndicatorTag = createStyledTag(`${name}Indicator`, props => ({
   display: props.hasRightIcon ? 'none' : 'block',
   position: 'absolute',
   ...getThemeStyle(props, name).inputIndicator,
@@ -78,12 +87,12 @@ const iconsStyles = {
   width: '3rem',
 };
 
-const InputLeftIconTag = createStyledTag(name, {
+const InputLeftIconTag = createStyledTag(`${name}LeftIcon`, {
   ...iconsStyles,
   left: '1rem',
 });
 
-const InputRightIconTag = createStyledTag(name, {
+const InputRightIconTag = createStyledTag(`${name}RightIcon`, {
   ...iconsStyles,
   right: '1rem',
 });