PR: form-review:#2- added personal information component no css, pulled branch RB-design

next.config.js

@@ -1,9 +1,10 @@
 const withImages = require('next-images');
 const path = require('path');
 const webpack = require('webpack');
-module.exports =  withImages({
+
+module.exports = withImages({
   webpack: config => {
     config.resolve.alias['~'] = path.resolve('src');
     return config;
-  }
+  },
 });

src/assets/image.js

@@ -16,4 +16,22 @@ import ViewHidden from '~/assets/images/eye-hidden.png';
 import ProfileImage from '~/assets/images/image-small.png';
 import UpRightArrow from '~/assets/images/up-right-arrow.png';
 
-export {Logo, Image, Edit, View, ProfileImage, Trash, Download, Copy, Email, Check, Delete, EditGray, Add, ViewHidden, UpRightArrow, Close, Calendar};
+export {
+  Logo,
+  Image,
+  Edit,
+  View,
+  ProfileImage,
+  Trash,
+  Download,
+  Copy,
+  Email,
+  Check,
+  Delete,
+  EditGray,
+  Add,
+  ViewHidden,
+  UpRightArrow,
+  Close,
+  Calendar,
+};

src/assets/sass/modules/Button/_button.scss

@@ -8,7 +8,7 @@
   border-radius: 2px;
   cursor: pointer;
 
-  @include m(cancel){
+  @include m(cancel) {
     border: 1px solid $alto;
     padding: 8px 16px;
     color: $alto;

src/assets/sass/modules/PersonalInformation/_personal-information.scss

@@ -5,7 +5,7 @@
 .personal-info-row {
   display: flex;
   justify-content: space-between;
-  padding-bottom: 20px;
+  padding-top: 20px;
   font: normal normal 16px/19px $font-primary;
 
   &:last-child {

src/assets/sass/modules/Skills/_skills.scss

@@ -12,6 +12,9 @@
     justify-content: space-between;
     align-items: center;
   }
+  @include m(hidden) {
+    color: $dusty-gray;
+  }
 }
 
 .chip-input-value {

src/assets/sass/modules/_global.scss

@@ -57,7 +57,7 @@
   }
 }
 
-.hidden-tag{
+.hidden-tag {
   border-radius: 95px;
   background: $nobel;
   color: $white;
@@ -66,6 +66,6 @@
   margin-left: 10px;
 }
 
-.close-option{
+.close-option {
   text-align: right;
 }

src/assets/sass/utilities/_config.scss

@@ -2,16 +2,16 @@ $font-primary: 'Inter', sans-serif;
 
 $dusty-gray: #999999;
 $mine-shaft: #333333;
-$deep-koamaru: #102B7B;
+$deep-koamaru: #102b7b;
 $white: #ffffff;
-$mercury: #E6E6E6;
-$shamrock: #2ECC71;
-$alto: #D2D2D2;
-$dodger-blue: #29B6F6;
-$gallery: #EEEEEE;
-$pomegranate: #F44336;
-$wild-sand: #F6F6F6;
+$mercury: #e6e6e6;
+$shamrock: #2ecc71;
+$alto: #d2d2d2;
+$dodger-blue: #29b6f6;
+$gallery: #eeeeee;
+$pomegranate: #f44336;
+$wild-sand: #f6f6f6;
 $dove-gray: #666666;
-$nobel: #B3B3B3;
+$nobel: #b3b3b3;
 $dove-gray-light: #737373;
 $black: #000000;

src/assets/sass/utilities/_utilities.scss

@@ -38,29 +38,29 @@
 
 // Media queries -- please use this one
 @mixin for-size($break) {
-  @if $break== "small" {
+  @if $break== 'small' {
     @media (min-width: $small) {
       // browser width >= 600px
       @content;
     }
-  } @else if $break== "medium" {
+  } @else if $break== 'medium' {
     @media (min-width: $medium) {
       // 800 px > browser width >= 600 px
       @content;
     }
-  } @else if $break== "large" {
+  } @else if $break== 'large' {
     @media (min-width: $large) {
       // browser width >= 800px
       @content;
     }
-  } @else if $break== "extra-large" {
+  } @else if $break== 'extra-large' {
     @media (min-width: $extra-large) {
       // browser width >= 800px
       @content;
     }
   } @else {
-    @if (type-of($break) == "number") {
-      @media (min-width: $break + "px") {
+    @if (type-of($break) == 'number') {
+      @media (min-width: $break + 'px') {
         // browser width >= given breakpoint in number
         @content;
       }
@@ -72,8 +72,8 @@
 
 // Media queries for both min-width and min-height
 @mixin for-sizes($width, $height) {
-  @if (type-of($width) == "number" and type-of($height) == "number") {
-    @media (min-width: $width + "px") and (min-height: $height + "px") {
+  @if (type-of($width) == 'number' and type-of($height) == 'number') {
+    @media (min-width: $width + 'px') and (min-height: $height + 'px') {
       // browser width >= given breakpoint in number and
       // browser height >= given breakpoint in number
       @content;
@@ -109,7 +109,7 @@
 
 //Pseudo-elements
 @mixin psuedo-el($el, $el-width: null, $el-height: null) {
-  @if $el== ":before" or $el== "after" {
+  @if $el== ':before' or $el== 'after' {
     &:#{$el} {
       @extend %pseudos;
       width: $el-width;
@@ -123,7 +123,7 @@
 
 //Set Background
 @mixin bg($img, $repeat: no-repeat, $position: 0 0, $size: cover) {
-  background-image: url("#{$path--rel}/#{$img}");
+  background-image: url('#{$path--rel}/#{$img}');
   background-repeat: $repeat;
   background-position: $position;
   background-size: $size;

src/components/achievements/AchievementItem.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import ProptTypes from 'prop-types';
+import EditOptions from '~/components/editoptions/EditOptions';
+
+const AchievementItem = ({ title, date, visibility, preview }) => {
+  return (
+    <div className="achievements__row">
+      <div className="achievements__row-header">
+        <div className="sub-title">{title}</div>
+        {!preview && <EditOptions isHidden={!visibility} />}
+      </div>
+      <div className="achievements__year">{date}</div>
+    </div>
+  );
+};
+
+AchievementItem.propTypes = {
+  title: ProptTypes.string,
+  date: ProptTypes.string,
+  visibility: ProptTypes.bool,
+  preview: ProptTypes.bool,
+};
+
+export default AchievementItem;

src/components/achievements/Achievements.js

@@ -1,27 +1,29 @@
 import React from 'react';
-import CardHeader from '~/components/cardheader/CardHeader';
-import EditOptions from '~/components/editoptions/EditOptions';
+import PropTypes from 'prop-types';
 import { Add } from '~/assets/image';
+import AchievementItem from './AchievementItem';
+import CardHeader from '~/components/cardheader/CardHeader';
 import CardFooter from '~/components/cardfooter/CardFooter';
 
-const Achievements = () => {
-	return (
-		<div className="achievements-block">
-			<div className="card">
-				<CardHeader title="Achievements" />
-				<div className="achievements">
-					<div className="achievements__row">
-						<div className="achievements__row-header">
-							<div className="sub-title">Headhunt Award</div>
-							<EditOptions />
-						</div>
-						<div className="achievements__year">December 2012</div>
-					</div>
-				</div>
-				<CardFooter icon={Add} label="Add another achievement" />
-			</div>
-		</div>
-	)
-}
+const Achievements = ({ achievements, preview }) => {
+  const achievementsList = achievements.map(({ title, date, visibility }) => (
+    <AchievementItem key={title} title={title} date={date} visibility={visibility} preview={preview} />
+  ));
+
+  return (
+    <div className="achievements-block">
+      <div className="card">
+        <CardHeader title="Achievements" />
+        {achievementsList}
+        <CardFooter icon={Add} label="Add another achievement" />
+      </div>
+    </div>
+  );
+};
+
+Achievements.propTypes = {
+  achievements: PropTypes.array,
+  preview: PropTypes.bool,
+};
 
 export default Achievements;

src/components/button/Button.js

@@ -1,9 +1,18 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
-const Button = ({ content, isCancel }) => {
-	return (
-		<button className={isCancel ? "btn--cancel" : "btn"}>{content}</button>
-	)
-}
+const Button = ({ content, isCancel, onClick }) => {
+  return (
+    <button className={isCancel ? 'btn--cancel' : 'btn'} onClick={e => onClick(e)}>
+      {content}
+    </button>
+  );
+};
+
+Button.propTypes = {
+  content: PropTypes.string,
+  isCancel: PropTypes.bool,
+  onClick: PropTypes.func,
+};
 
 export default Button;

src/components/cardfooter/CardFooter.js

@@ -1,16 +1,20 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const CardFooter = ({ icon, label }) => {
-	return (
-		<div className="card__footer">
-			<span className="card__footer-icon">
-				<img src={icon} alt="Add" />
-			</span>
-			<span className="card__footer-label text-link">
-				{label}
-			</span>
-		</div>
-	)
-}
+  return (
+    <div className="card__footer">
+      <span className="card__footer-icon">
+        <img src={icon} alt="Add" />
+      </span>
+      <span className="card__footer-label text-link">{label}</span>
+    </div>
+  );
+};
+
+CardFooter.propTypes = {
+  icon: PropTypes.string,
+  label: PropTypes.string,
+};
 
 export default CardFooter;

src/components/cardheader/CardHeader.js

@@ -1,19 +1,24 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const CardHeader = ({ title, icon = null }) => {
-	return (
-		<div className="card-header">
-			<div className="card-header__l">
-				<div className="title">{title}</div>
-			</div>
-			{!icon ? ''
-				:
-				<div className="card-header__r">
-					<img src={icon} alt="Edit" />
-				</div>
-			}
-		</div>
-	)
-}
+  return (
+    <div className="card-header">
+      <div className="card-header__l">
+        <div className="title">{title}</div>
+      </div>
+      {icon && (
+        <div className="card-header__r">
+          <img src={icon} alt="Edit" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+CardHeader.propTypes = {
+  title: PropTypes.string,
+  icon: PropTypes.string,
+};
 
 export default CardHeader;