layout adjustments

webapp/components/form/buttonGroup.js

@@ -5,40 +5,52 @@ import PropTypes from 'prop-types'
 
 import * as R from 'ramda'
 
-const ButtonGroup = ({ items, groupName, multiple, selectedItemKey, onChange, disabled, deselectable, className }) => (
+const ButtonGroup = ({
+  items,
+  groupName,
+  multiple,
+  selectedItemKey,
+  onChange,
+  disabled: disabledProp,
+  deselectable,
+  className,
+}) => (
   <div className={`btn-group${className ? ` ${className}` : ''}`}>
     {items.map((item) => {
-      const selected = selectedItemKey === item.key || (multiple && R.includes(item.key, selectedItemKey))
+      const { key, disabled, icon, label } = item
+      const selected = selectedItemKey === key || (multiple && R.includes(key, selectedItemKey))
       return (
         <button
-          data-testid={groupName ? `${groupName}_${item.key}` : null}
-          key={item.key}
+          data-testid={groupName ? `${groupName}_${key}` : null}
+          key={key}
           type="button"
           className={`btn btn-s${selected ? ' active' : ''}${deselectable ? ' deselectable' : ''}`}
           onClick={() => {
             let value
             if (multiple) {
-              value = R.ifElse(R.always(selected), R.without(item.key), R.append(item.key))(selectedItemKey)
+              value = R.ifElse(R.always(selected), R.without(key), R.append(key))(selectedItemKey)
             } else if (selected) {
               value = null
             } else {
-              value = item.key
+              value = key
             }
             onChange(value)
           }}
-          aria-disabled={Boolean(item.disabled) || disabled}
+          aria-disabled={Boolean(disabled) || disabledProp}
         >
-          {item.label}
+          {icon && icon({ key })}
+          {label}
         </button>
       )
     })}
   </div>
 )
 
-export const toButtonGroupItems = ({ i18n, object, labelPrefix }) =>
+export const toButtonGroupItems = ({ i18n, object, labelPrefix, icon = null }) =>
   Object.keys(object).map((key) => ({
     key,
     label: i18n.t(`${labelPrefix}${key}`),
+    icon,
   }))
 
 ButtonGroup.propTypes = {

webapp/components/survey/NodeDefDetails/FormHeaderProps.js

@@ -1,3 +1,5 @@
+import './FormHeaderProps.scss'
+
 import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
 
@@ -7,12 +9,19 @@ import { useI18n } from '@webapp/store/system'
 import { FormItem } from '@webapp/components/form/Input'
 import ButtonGroup, { toButtonGroupItems } from '@webapp/components/form/buttonGroup'
 
-import { headerColors } from '@webapp/components/survey/SurveyForm/nodeDefs/nodeDefUIProps'
+import { headerColors, headerColorCodesByColor } from '@webapp/components/survey/SurveyForm/nodeDefs/nodeDefUIProps'
 
 import { State } from './store'
 
 const headerColorItems = ({ i18n }) =>
-  toButtonGroupItems({ i18n, object: headerColors, labelPrefix: 'nodeDefEdit.formHeaderProps.headerColor.' })
+  toButtonGroupItems({
+    i18n,
+    object: headerColors,
+    labelPrefix: 'nodeDefEdit.formHeaderProps.headerColor.',
+    icon: ({ key }) => (
+      <span className="form-header-color-icon" style={{ backgroundColor: headerColorCodesByColor[key] }} />
+    ),
+  })
 
 const FormHeaderProps = (props) => {
   const { state, Actions } = props
@@ -32,15 +41,14 @@ const FormHeaderProps = (props) => {
   )
 
   return (
-    <>
-      <FormItem label={i18n.t('nodeDefEdit.formHeaderProps.headerColorLabel')}>
-        <ButtonGroup
-          selectedItemKey={selectedHeaderColorKey}
-          onChange={onHeaderColorChange}
-          items={headerColorItems({ i18n })}
-        />
-      </FormItem>
-    </>
+    <FormItem label={i18n.t('nodeDefEdit.formHeaderProps.headerColorLabel')}>
+      <ButtonGroup
+        className="form-header-color-btn-group"
+        selectedItemKey={selectedHeaderColorKey}
+        onChange={onHeaderColorChange}
+        items={headerColorItems({ i18n })}
+      />
+    </FormItem>
   )
 }
 

webapp/components/survey/NodeDefDetails/FormHeaderProps.scss

@@ -0,0 +1,11 @@
+.btn-group.form-header-color-btn-group {
+  button {
+    display: flex;
+    gap: 1rem;
+
+    .form-header-color-icon {
+      height: 1rem;
+      width: 1rem;
+    }
+  }
+}

webapp/components/survey/NodeDefDetails/NodeDefDetails.js

@@ -53,7 +53,7 @@ const NodeDefDetails = () => {
             }
           />
           <div className="attribute-selector">
-            {nodeDefType} {NodeDefUIProps.getIconByType(nodeDefType)}
+            {i18n.t(`surveyForm.addChildToTypes.${nodeDefType}`)} {NodeDefUIProps.getIconByType(nodeDefType)}
           </div>
         </FormItem>
 

webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefFormHeader.js

@@ -1,21 +1,31 @@
 import './nodeDefFormHeader.scss'
 
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import * as NodeDef from '@core/survey/nodeDef'
 
 import Markdown from '@webapp/components/markdown'
+import * as NodeDefUIProps from '@webapp/components/survey/SurveyForm/nodeDefs/nodeDefUIProps'
 
 import { useSurveyPreferredLang } from '@webapp/store/survey'
 
-const NodeDefFormHeader = ({ nodeDef }) => {
+const NodeDefFormHeader = (props) => {
+  const { nodeDef } = props
+
   const lang = useSurveyPreferredLang()
 
+  const backgroundColor = NodeDefUIProps.headerColorCodesByColor[NodeDef.getHeaderColor(nodeDef)]
+
   return (
-    <div className="survey-form__node-def-form-header" style={{ backgroundColor: NodeDef.getHeaderColor(nodeDef) }}>
+    <div className="survey-form__node-def-form-header" style={{ backgroundColor }}>
       <Markdown source={NodeDef.getLabel(nodeDef, lang)} />
     </div>
   )
 }
 
+NodeDefFormHeader.propTypes = {
+  nodeDef: PropTypes.object.isRequired,
+}
+
 export default NodeDefFormHeader

webapp/components/survey/SurveyForm/nodeDefs/nodeDefUIProps.js

@@ -176,9 +176,17 @@ export const getDefaultPropsByType = (type, cycle) => {
 }
 
 export const headerColors = {
-  blue: '#b3e5fc',
-  green: '#b2dfdb',
-  orange: '#ffe0b2',
-  red: '#ffcdd2',
-  yellow: '#f0f4c3',
+  blue: 'blue',
+  green: 'green',
+  orange: 'orange',
+  red: 'red',
+  yellow: 'yellow',
+}
+
+export const headerColorCodesByColor = {
+  [headerColors.blue]: '#b3e5fc',
+  [headerColors.green]: '#b2dfdb',
+  [headerColors.orange]: '#ffe0b2',
+  [headerColors.red]: '#ffcdd2',
+  [headerColors.yellow]: '#f0f4c3',
 }