Feature/skills question

src/components/Select/Select.jsx

@@ -16,6 +16,9 @@ const Select = (props) => {
   if (props.showDropdownIndicator) {
     containerclass = 'react-select-container'
   }
+  if (props.heightAuto) {
+    containerclass += ' height-auto'
+  }
 
   if (props.createOption) {
     return (
@@ -24,7 +27,6 @@ const Select = (props) => {
         createOptionPosition="first"
         className={containerclass}
         classNamePrefix="react-select"
-        noOptionsMessage={() => ('Type to search')}
       />
     )
   } else {
@@ -34,10 +36,13 @@ const Select = (props) => {
         createOptionPosition="first"
         className={containerclass}
         classNamePrefix="react-select"
-        noOptionsMessage={() => ('Type to search')}
       />
     )
   }
 }
 
+Select.defaultProps = {
+  noOptionsMessage: () => 'Type to search'
+}
+
 export default Select

src/components/Select/Select.scss

@@ -5,6 +5,13 @@
 	$reactselectcontentheight: 20px;
 	@mixin reactselectstyles {
 
+		&.height-auto .react-select__control{
+			height: auto;
+			& > div {
+				height: auto;
+			}
+		}
+
 		& .react-select__control:hover {
 			border-color: $tc-gray-50;
 		}

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

@@ -22,7 +22,8 @@ const TYPE = {
   ADD_ONS: 'add-ons',
   TEXTINPUT: 'textinput',
   TEXTBOX: 'textbox',
-  NUMBERINPUT: 'numberinput'
+  NUMBERINPUT: 'numberinput',
+  SKILLS: 'skills'
 }
 
 /**
@@ -33,7 +34,7 @@ const TYPE = {
  * @returns {Function} valueMapper
  */
 const createValueMapper = (valuesMap) => (value) => (
-  valuesMap[value] && (valuesMap[value].summaryLabel || valuesMap[value].label)
+  valuesMap[value] && (valuesMap[value].summaryLabel || valuesMap[value].label || valuesMap[value].title)
 )
 
 class Accordion extends React.Component {
@@ -113,6 +114,7 @@ class Accordion extends React.Component {
     case TYPE.CHECKBOX_GROUP: return value.map(mapValue).join(', ')
     case TYPE.RADIO_GROUP: return mapValue(value)
     case TYPE.ADD_ONS: return `${value.length} selected`
+    case TYPE.SKILLS: return value.map(mapValue).join(', ')
     default: return value
     }
   }

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

@@ -0,0 +1,76 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import './SkillsCheckboxGroup.scss'
+
+class SkillsCheckboxGroup extends Component {
+
+  constructor(props) {
+    super(props)
+    this.changeValue = this.changeValue.bind(this)
+  }
+
+  changeValue() {
+    const value = []
+    this.props.options.forEach((option, key) => {
+      if (this['element-' + key].checked) {
+        value.push(option.value)
+      }
+    })
+    this.props.setValue(value)
+    this.props.onChange(this.props.name, value)
+  }
+
+  render() {
+    const { label, name = 'tc-checkbox-group', options, layout, wrapperClass, getValue, disabled } = this.props
+    const curValue = getValue() || []
+
+    const renderOption = (cb, key) => {
+      const checked = curValue.includes(cb.value)
+      const checkboxDisabled = cb.disabled || disabled
+      const rClass = cn('tc-checkbox-group-item', { disabled, selected: checked })
+      const id = name+'-opt-'+key
+      const setRef = (c) => this['element-' + key] = c
+      return (
+        <div styleName={rClass} key={key}>
+          <div styleName="checkmark">
+            <input
+              id={id}
+              ref={setRef}
+              type="checkbox"
+              name={name}
+              checked={checked}
+              disabled={checkboxDisabled}
+              onChange={this.changeValue}
+            />
+            <label htmlFor={id}/>
+          </div>
+          <label htmlFor={id}>{cb.title}</label>
+          {
+            cb.description && checked && <div styleName="item-description"> {cb.description} </div>
+          }
+        </div>
+      )
+    }
+    const chkGrpClass = cn('tc-checkbox-group', wrapperClass, {
+      horizontal: layout === 'horizontal',
+      vertical: layout === 'vertical'
+    })
+    return (
+      <div styleName={chkGrpClass}>
+        <label styleName="group-label">{label}</label>
+        <div styleName="group-options">{options.map(renderOption)}</div>
+      </div>
+    )
+  }
+}
+
+SkillsCheckboxGroup.PropTypes = {
+  options: PropTypes.arrayOf(PropTypes.object).isRequired
+}
+
+SkillsCheckboxGroup.defaultProps = {
+  onChange: () => {}
+}
+
+export default SkillsCheckboxGroup

src/projects/detail/components/SkillsQuestion/SkillsCheckboxGroup.scss

@@ -0,0 +1,118 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.tc-checkbox-group {
+  &.horizontal {
+    .group-options {
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+  &.vertical {
+    .group-options {
+      flex-direction: column;
+    }
+  }
+  .group-label {
+    @include roboto;
+    font-size: 13px;
+    display: block;
+    margin: 10px auto;
+    color: $tc-gray-70;
+  }
+  .group-options {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.tc-checkbox-group-item {
+  margin: 0 0 10px 0;
+  background-color: $tc-gray-neutral-light;
+  padding: 10px;
+  border-radius: 4px;
+  display: block;
+  width: auto;
+
+  &:first-child {
+    margin-top: 10px;
+  }
+  &.disabled {
+    > label {
+      color: $tc-gray-30;
+      cursor: default;
+    }
+  }
+  &.selected {
+    background-color: $tc-dark-blue-10;
+  }
+  .checkmark {
+    flex: 0 0 20px;
+    height: 20px;
+    width: 20px;
+    margin: 0;
+    padding: 0;
+    vertical-align: bottom;
+    position: relative;
+    display: inline-block;
+    > input {
+      display: none;
+      &:checked ~ label {
+        background: $tc-dark-blue-100;
+        border-color: $tc-dark-blue-100;
+        &:after {
+          opacity: 1;
+          border-color: $tc-gray-0;
+        }
+      }
+    }
+    > label {
+      font-weight: 400;
+      color: $tc-gray-100;
+      font-size: 12px;
+      cursor: pointer;
+      position: absolute;
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      top: 0;
+      left: 0;
+      border-radius: 2px;
+      box-shadow: none;
+      border: 1px solid $tc-gray-50;
+      background: $tc-gray-neutral-light;
+      transition: all .150s ease-in-out;
+
+      &:after {
+        opacity: 0;
+        content: '';
+        position: absolute;
+        width: 13px;
+        height: 7px;
+        background: transparent;
+        top: 4px;
+        left: 3px;
+        border: 3px solid $tc-dark-blue-100;
+        border-top: none;
+        border-right: none;
+        transform: rotate(-45deg);
+        transition: all .150s ease-in-out;
+      }
+    }
+  }
+  .item-description {
+    color: $tc-gray-70;
+    font-size: 13px;
+    margin-top: 10px;
+    line-height: 20px;
+  }
+  > label {
+    @include roboto;
+    color: $tc-gray-100;
+    margin-right: 0;
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 10px;
+    user-select: none;
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,110 @@
+import React from 'react'
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import { HOC as hoc } from 'formsy-react'
+import SkillsCheckboxGroup from './SkillsCheckboxGroup'
+import Select from '../../../../components/Select/Select'
+import './SkillsQuestion.scss'
+
+class SkillsQuestion extends React.Component {
+  constructor(props) {
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+  }
+
+  handleChange(val = []) {
+    const { setValue, onChange, name } = this.props
+    onChange(name, val)
+    setValue(val)
+  }
+
+  componentDidUpdate(prevProps) {
+    const { skillsCategoriesField, currentProjectData, options, getValue, onChange, setValue, name } = this.props
+    const prevSelectedCategories = _.get(prevProps.currentProjectData, skillsCategoriesField, [])
+    const selectedCategories = _.get(currentProjectData, skillsCategoriesField, [])
+
+    if (selectedCategories.length !== prevSelectedCategories.length) {
+      const currentValues = getValue() || []
+      const prevAvailableOptions = options.filter(option => _.intersection(option.categories, prevSelectedCategories).length > 0)
+      const nextAvailableOptions = options.filter(option => _.intersection(option.categories, selectedCategories).length > 0)
+      const prevValues = currentValues.filter(skill => prevAvailableOptions.some(option => option.value === skill))
+      const nextValues = currentValues.filter(skill => nextAvailableOptions.some(option => option.value === skill))
+
+      if (prevValues.length < nextValues.length) {
+        onChange(name, prevValues)
+        setValue(prevValues)
+      } else if (prevValues.length > nextValues.length) {
+        onChange(name, nextValues)
+        setValue(nextValues)
+      }
+    }
+  }
+
+  render() {
+    const {
+      isFormDisabled,
+      isPristine,
+      isValid,
+      getErrorMessage,
+      validationError,
+      disabled,
+      currentProjectData,
+      skillsCategoriesField,
+      options,
+      getValue
+    } = this.props
+
+    const selectedCategories = _.get(currentProjectData, skillsCategoriesField, [])
+    const availableOptions = options.filter(option => _.intersection(option.categories, selectedCategories).length > 0)
+    let currentValues = getValue() || []
+    currentValues = currentValues.filter(skill => availableOptions.some(option => option.value === skill))
+
+    const questionDisabled = isFormDisabled() || disabled || selectedCategories.length === 0
+    const hasError = !isPristine() && !isValid()
+    const errorMessage = getErrorMessage() || validationError
+
+    const checkboxGroupOptions = availableOptions.filter(option => option.isFrequent)
+    const checkboxGroupValues = currentValues.filter(val => _.some(checkboxGroupOptions, option => option.value === val ))
+    const selectGroupOptions = availableOptions.filter(option => !option.isFrequent)
+    const selectGroupValues = currentValues.filter(val => _.some(selectGroupOptions, option => option.value === val ))
+
+    return (
+      <div>
+        <SkillsCheckboxGroup
+          disabled={questionDisabled}
+          options={checkboxGroupOptions}
+          getValue={() => checkboxGroupValues}
+          setValue={(val) => { this.handleChange(_.union(val, selectGroupValues)) }}
+        />
+        <div styleName="select-wrapper">
+          <Select
+            isMulti
+            closeMenuOnSelect
+            showDropdownIndicator
+            isClearable
+            isSearchable
+            heightAuto
+            placeholder="Start typing a skill then select from the list"
+            value={selectGroupOptions.filter(option => selectGroupValues.some(val => option.value === val))}
+            getOptionLabel={(option) => option.title}
+            onChange={(val) => { this.handleChange(_.union(val.map(val => val.value), checkboxGroupValues)) }}
+            noOptionsMessage={() => 'No results found'}
+            options={selectGroupOptions}
+            isDisabled={questionDisabled}
+          />
+        </div>
+        { hasError && (<p styleName="error-message">{errorMessage}</p>) }
+      </div>
+    )
+  }
+}
+
+SkillsQuestion.propTypes = {
+  options: PropTypes.arrayOf(PropTypes.object).isRequired
+}
+
+SkillsQuestion.defaultProps = {
+  onChange: () => {}
+}
+
+export default hoc(SkillsQuestion)