style talent picker component

src/components/PositiveNumberInput/PositiveNumberInput.jsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import PT from 'prop-types'
+import { noop, omit } from 'lodash'
+
+class PositiveNumberInput extends React.PureComponent {
+  constructor(props) {
+    super(props)
+
+    this.isInputValid = true
+
+    this.onKeyDown = this.onKeyDown.bind(this)
+    this.onPaste = this.onPaste.bind(this)
+    this.onKeyUp = this.onKeyUp.bind(this)
+  }
+
+  onKeyDown(evt) {
+    const isPrintableKey = evt.key.length === 1 && !(evt.ctrlKey || evt.metaKey)
+    const digitPattern = /\d/
+
+    // Don't allow typing non digit characters
+    if (isPrintableKey && !digitPattern.test(evt.key)) {
+      evt.preventDefault()
+    }
+    this.props.onKeyDown(evt)
+  }
+
+  onPaste(evt) {
+    const text = evt.clipboardData.getData('text')
+    const digitsPattern = /^\d+$/
+
+    // Don't allow pasting non digit text
+    if (!digitsPattern.test(text)) {
+      evt.preventDefault()
+    }
+    this.props.onPaste(evt)
+  }
+
+  onKeyUp(evt) {
+    const isValid = evt.target.validity.valid
+    if (isValid !== this.isInputValid) {
+      this.isInputValid = isValid
+      this.props.onValidityChange(isValid)
+    }
+    this.props.onKeyUp(evt)
+  }
+
+  render() {
+    const props = omit(this.props, ['onValidityChange'])
+    return <input type="number" min={0} {...props} onKeyDown={this.onKeyDown} onPaste={this.onPaste} onKeyUp={this.onKeyUp} />
+  }
+}
+
+PositiveNumberInput.defaultProps = {
+  onKeyDown: noop,
+  onPaste: noop,
+  onKeyUp: noop,
+  onValidityChange: noop
+
+}
+
+PositiveNumberInput.propTypes = {
+  onKeyDown: PT.func,
+  onPaste: PT.func,
+  onKeyUp: PT.func,
+  onValidityChange: PT.func
+}
+
+
+export default PositiveNumberInput

src/projects/detail/components/Accordion/Accordion.jsx

@@ -171,7 +171,8 @@ class Accordion extends React.Component {
     case TYPE.SELECT_DROPDOWN: return mapValue(value)
     case TYPE.TALENT_PICKER: {
       const getRoleName = (role) => _.find(options, { role }).roleTitle
-      return _.filter(value, (v) => v.people !== '0').map((v) => `${getRoleName(v.role)}: ${v.people}`).join(', ')
+      const totalPeoplePerRole = _.mapValues(_.groupBy(value, v => v.role), valuesUnderGroup => _.sumBy(valuesUnderGroup, v => Number(v.people)))
+      return _.toPairs(totalPeoplePerRole).filter(([, people]) => people > 0).map(([role, people]) => `${getRoleName(role)} ${people}`).join(', ')
     }
     default: return value
     }

src/projects/detail/components/SkillsQuestion/SkillsQuestionBase.jsx

@@ -165,6 +165,7 @@ class SkillsQuestion extends React.PureComponent {
       skillsCategories,
       currentProjectData,
       categoriesField,
+      selectWrapperClass,
     } = this.props
     const { availableOptions, customOptionValue } = this.state
 
@@ -189,13 +190,14 @@ class SkillsQuestion extends React.PureComponent {
 
     return (
       <div>
-        <SkillsCheckboxGroup
-          disabled={questionDisabled}
-          options={checkboxGroupOptions}
-          getValue={() => checkboxGroupValues}
-          setValue={(val) => { this.handleChange(_.union(val, selectGroupValues)) }}
-        />
-        <div styleName="select-wrapper">
+        {checkboxGroupOptions.length > 0 ? (
+          <SkillsCheckboxGroup
+            disabled={questionDisabled}
+            options={checkboxGroupOptions}
+            getValue={() => checkboxGroupValues}
+            setValue={(val) => { this.handleChange(_.union(val, selectGroupValues)) }}
+          />) : null}
+        <div styleName="select-wrapper" className={selectWrapperClass}>
           <Select
             createOption
             isMulti
@@ -232,6 +234,7 @@ SkillsQuestion.defaultProps = {
 
 SkillsQuestion.PropTypes = {
   skillsCategories: PropTypes.arrayOf(PropTypes.string),
+  selectWrapperClass: PropTypes.string
 }
 
 

src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.jsx

@@ -118,34 +118,29 @@ class TalentPickerQuestion extends Component {
     return (
       <div className={cn(wrapperClass)}>
         <div styleName="container">
-          <table styleName="table">
-            <thead>
-              <tr>
-                <th>Role</th>
-                <th>Number of People Required</th>
-                <th>Engagement Duration</th>
-                <th>Skill Required</th>
-                <th />
-              </tr>
-            </thead>
-            <tbody>
-              {options.length > 0 ? values.map((v, roleIndex) => {
-                const roleSetting = _.find(options, { role: v.role })
-                return (
-                  <TalentPickerRow
-                    key={roleIndex}
-                    rowIndex={roleIndex}
-                    value={v}
-                    canBeDeleted={this.canDeleteRole}
-                    roleSetting={roleSetting}
-                    onChange={this.handleValueChange}
-                    onDeleteRow={this.removeRole}
-                    onAddRow={this.insertRole}
-                  />
-                )
-              }) : null}
-            </tbody>
-          </table>
+          <div styleName="header-row">
+            <div styleName="col-title col-role">Role</div>
+            <div styleName="col-title col-people">People</div>
+            <div styleName="col-title col-duration">Duration (months)</div>
+            <div styleName="col-title col-actions"/>
+          </div>
+          <div styleName="body">
+            {options.length > 0 ? values.map((v, roleIndex) => {
+              const roleSetting = _.find(options, { role: v.role })
+              return (
+                <TalentPickerRow
+                  key={roleIndex}
+                  rowIndex={roleIndex}
+                  value={v}
+                  canBeDeleted={this.canDeleteRole}
+                  roleSetting={roleSetting}
+                  onChange={this.handleValueChange}
+                  onDeleteRow={this.removeRole}
+                  onAddRow={this.insertRole}
+                />
+              )
+            }) : null}
+          </div>
         </div>
         {hasError ? <p className="error-message">{errorMessage}</p> : null}
       </div>

src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.scss

@@ -1,30 +1,61 @@
 @import '~tc-ui/src/styles/tc-includes';
+@import '../../../../styles/includes';
 
 .container {
   font-size: 15px;
-  overflow-x: auto;
+  text-align: left;
+  margin-top: 5px;
 }
 
-.table {
-  text-align: left;
+.header-row {
+  @include roboto;
+
+  white-space: nowrap;
+  padding: 0 4px;
+  color: $tc-silver-110;
+  font-size: 13px;
+  line-height: 15px;
+  background-color: $tc-gray-neutral-light;
+  border: 1px solid $tc-gray-neutral-dark;
+  display: flex;
+
+  .body {
+    @include roboto;
 
-  td,
-  th {
-    white-space: nowrap;
-    padding: 10px;
+    color: $tc-gray-100;
   }
+}
+
+
+.col-title {
+  padding: 15px 7.5px;
+  flex-grow: 0;
+  flex-shrink: 0;
 
-  thead {
-    @include roboto-bold;
+  &.col-duration,
+  &.col-people {
+    width: 50%;
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-width: 0;
   }
 
-  tbody {
-    tr {
-      border: 1px solid $tc-gray-80;
-    }
+  &.col-role {
+    width: 168px;
+  }
+
+  &.col-actions {
+    width: 76px;
   }
 }
 
 .hide {
   display: none;
 }
+
+
+@media screen and (max-width: $screen-rg - 1px) {
+  .header-row {
+    display: none;
+  }
+}