Merge c25f21d into 363cd0a

package.json

@@ -11,7 +11,8 @@
       "^<core>/(.*)$": "<rootDir>/src/core/$1",
       "^<fixtures>/(.*)$": "<rootDir>/src/fixtures/$1",
       "^<atoms>/(.*)$": "<rootDir>/src/components/UI/atoms/$1",
-      "^<molecules>/(.*)$": "<rootDir>/src/components/UI/molecules/$1"
+      "^<molecules>/(.*)$": "<rootDir>/src/components/UI/molecules/$1",
+      "^<helpers>/(.*)$": "<rootDir>/src/helpers/$1"
     },
     "coverageReporters": [
       "json-summary",

src/components/UI/atoms/Icon/Icon.jsx

@@ -63,7 +63,7 @@ Icon.defaultProps = {
   color: 'primary',
 };
 
-Icon.Container = styled.svg`
+Icon.Container = styled.div`
 ${({
     color,
     height,

src/components/UI/atoms/InputField/InputField.jsx

@@ -12,6 +12,7 @@ import width from '<variables>/width';
  * @description - Input field Component
  *
  * @prop {string} fontSize - font Size
+ * @prop {string} id - for label
  * @prop {string} color - color
  * @prop {string} type - type
  * @prop {string} placeholder - placeholder
@@ -25,6 +26,7 @@ import width from '<variables>/width';
  */
 const InputField = ({
   type,
+  id,
   placeholder,
   name,
   value,
@@ -40,6 +42,7 @@ const InputField = ({
 }) => (
   <InputField.Container
     type={type}
+    id={id}
     placeholder={placeholder}
     name={name}
     value={value}
@@ -57,6 +60,7 @@ const InputField = ({
 
 InputField.propTypes = {
   type: PropTypes.oneOf(['number', 'email', 'password', 'text']).isRequired,
+  id: PropTypes.string,
   placeholder: PropTypes.string,
   name: PropTypes.string,
   value: PropTypes.string,
@@ -72,11 +76,11 @@ InputField.propTypes = {
 };
 
 InputField.defaultProps = {
-  padding: 'zero',
+  padding: 'xs',
   fontSize: 'normal',
   color: 'primary',
   content: 'false',
-  background: 'lightPink',
+  backgroundColor: 'lightPink',
 };
 
 InputField.Container = styled.input`

src/components/UI/atoms/layouts/FlexContainer/FlexContainer.jsx

@@ -55,6 +55,7 @@ FlexContainer.Container = styled.div`
     },
   }) => `
     display: ${display};
+    flex-direction:column;
     background-color: ${backgroundColors[backgroundColor]};
     margin: ${spacing[margin]};
     padding: ${spacing[padding]};

src/components/UI/molecules/InputTextField/InputTextField.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import InputField from '<atoms>/InputField/InputField';
+import Text from '<atoms>/Text/Text';
+import FlexContainer from '<atoms>/layouts/FlexContainer/FlexContainer';
+import Label from '<molecules>/label/Label';
+import themeBorderRadius from '<variables>/border';
+import width from '<variables>/width';
+import { textColors } from '<variables>/colorPalette';
+
+/**
+ * @description - InputFormField component combined with an error field
+ *
+ * @prop {string} - placeholder
+ * @prop {string | number} - value
+ * @prop {string} - errorMessage
+ * @prop {func} - onChange
+ * @prop {string} - inputWidth
+ *
+ * @returns {JSX} - Input, Text, FlexContainer Component
+ *
+ * InputForm field Component
+ */
+const InputTextField = ({
+  value,
+  placeholder,
+  onChange,
+  errorMessage,
+  inputWidth,
+  borderRadius,
+  type,
+  name,
+  label,
+  color,
+}) => {
+  const id = btoa(`${name}-${value}`);
+
+  return (
+
+    <FlexContainer>
+      {label && <Label
+        id={id}
+        htmlFor={id}
+        color = {color}
+      >
+        {label}
+      </Label>}
+      <InputField
+        id={id}
+        name={name}
+        type={type}
+        placeholder={placeholder}
+        value={value}
+        inputWidth={inputWidth}
+        borderRadius={borderRadius}
+        error={errorMessage}
+        onChange={onChange} />
+      {errorMessage
+        && <span><Text color='red' fontSize='small' display='block'>
+          {errorMessage}
+        </Text></span>}
+    </FlexContainer>
+
+  );
+};
+
+InputTextField.propTypes = {
+  type: PropTypes.oneOf(['number', 'email', 'password', 'text']).isRequired,
+  label: PropTypes.string,
+  inputWidth: PropTypes.oneOf(Object.keys(width)),
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  errorMessage: PropTypes.string,
+  borderRadius: PropTypes.oneOf(Object.keys(themeBorderRadius)),
+  onChange: PropTypes.func.isRequired,
+  color: PropTypes.oneOf(Object.keys(textColors)),
+};
+
+InputTextField.defaultProps = {
+  type: 'text',
+};
+
+export default InputTextField;

src/components/UI/molecules/InputTextField/InputTextField.md

@@ -0,0 +1,65 @@
+InputFormField Default:
+```jsx
+<InputTextField
+  label='First Name'
+  name='firstname'
+  type='text'
+  placeholder='Enter first name'
+  onChange={e => setText(e.target.value)}
+  inputWidth='fullWidth'
+  value='asd1'
+/>
+```
+
+example
+```jsx
+<InputTextField
+  label='First Name'
+  name='firstname'
+  type='text'
+  placeholder='enter first name'
+  onChange={e => setText(e.target.value)}
+  inputWidth='fullWidth'
+  value='asd2'
+/>
+```
+Form field with password 
+```jsx
+<InputTextField
+  label='Password '
+  name='password'
+  type='password'
+  placeholder='enter password'
+  onChange={e => setText(e.target.value)}
+  inputWidth='fullWidth'
+  value='asd3'
+/>
+```
+
+Form field with error message
+```jsx
+<InputTextField
+  label='First Name'
+  name='firstname'
+  type='password'
+  placeholder='enter first name'
+  onChange={e => setText(e.target.value)}
+  inputWidth='fullWidth'
+  errorMessage='first name is required'
+  value='asd4'
+/>
+```
+
+Form field with half width
+```jsx
+<InputTextField
+  label='First Name'
+  name='firstname'
+  type='text'
+  placeholder='enter first name'
+  onChange={e => setText(e.target.value)}
+  inputWidth='searchBarWidth'
+  errorMessage='first name is required'
+  value='asd5'
+/>
+```

src/components/UI/molecules/InputTextField/InputTextField.spec.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render, cleanup } from '<src>/helpers/testUtils';
+import InputTextField from './InputTextField';
+import '@testing-library/jest-dom/extend-expect';
+
+afterEach(cleanup);
+
+const defaultProps = {
+  label: 'First Name',
+  name: 'firstname',
+  type: 'text',
+  errorMessage: 'this field required',
+  onChange: () => {},
+};
+
+// const id = getStringId(5);
+
+const setUp = (props) => {
+  const utils = render(<InputTextField {...defaultProps} {...props} />);
+  return utils;
+};
+
+describe('Input Text Fields', () => {
+  it('should render a input field component', () => {
+    const { container } = setUp();
+    expect(container).toBeTruthy();
+  });
+
+  it('should render  and return the first name', () => {
+    const { getByLabelText } = setUp({ type: 'password' });
+    const input = getByLabelText(defaultProps.label);
+
+    expect(input.getAttribute('name')).toBe('firstname');
+  });
+
+
+  it('should render a input password field component', () => {
+    const { getByLabelText } = setUp({ type: 'password' });
+    const input = getByLabelText(defaultProps.label);
+
+    expect(input.getAttribute('type')).toBe('password');
+  });
+
+  it('should render a input password field component and return the id', () => {
+    const { getByLabelText } = setUp({ type: 'password' });
+    const input = getByLabelText(defaultProps.label);
+    const value = input.getAttribute('id');
+
+    expect(input.getAttribute(input.attributes[1].name)).toBe(value);
+  });
+
+  it('should render password field component and return error message', () => {
+    const { container } = setUp({ type: 'password' });
+
+    expect(container.lastChild).toHaveTextContent(defaultProps.errorMessage);
+  });
+});