Merge pull request #6617 from topcoder-platform/reskin-missing-asterisk

fix: missing asterisk

Author: dedywahyudi

src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx

@@ -451,7 +451,7 @@ export default class Work extends ConsentComponent {
                 </div>
                 <div styleName="form-body">
                   <form styleName="workplace-form" noValidate autoComplete="off">
-                    <FormField label="Company *" style={{ flex: '0 0 100%' }}>
+                    <FormField label="Company" style={{ flex: '0 0 100%' }} required>
                       <FormInputText
                         id="company"
                         name="company"

src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx

@@ -376,7 +376,7 @@ export default class Languages extends ConsentComponent {
               </div>
               <div styleName="form-body">
                 <form styleName="language-form" noValidate autoComplete="off">
-                  <FormField label="Language *" style={{ flex: '0 0 100%' }}>
+                  <FormField label="Language" style={{ flex: '0 0 100%' }} required>
                     <FormInputSelect
                       name="language"
                       options={dropdowns.language}

src/shared/components/Settings/FormField/index.jsx

@@ -9,12 +9,14 @@ import cn from 'classnames';
 import './styles.scss';
 
 const FormField = ({
+  children, label = '', disabled, style, required,
   children, label = '', disabled, style, isTextarea,
 }) => (
   <div styleName="form-field-wrapper" style={style}>
     <div styleName="form-field">
-      <div styleName={cn('label', { disabled, isTextarea })} role="presentation">
+      <div styleName={cn('label', disabled ? 'disabled' : null, isTextarea)} role="presentation">
         {label}
+        { required && <span styleName="required">*</span> }
       </div>
       {children}
     </div>
@@ -26,6 +28,7 @@ FormField.defaultProps = {
   children: null,
   disabled: false,
   style: {},
+  required: false,
   isTextarea: false,
 };
 
@@ -34,6 +37,7 @@ FormField.propTypes = {
   children: PT.node,
   disabled: PT.bool,
   style: PT.object,
+  required: PT.bool,
   isTextarea: PT.bool,
 };
 

src/shared/components/Settings/FormField/styles.scss

@@ -30,6 +30,11 @@
         color: $color-black-60;
       }
 
+      .required {
+        color: $member-red;
+        margin-left: 5px;
+      }
+
       &.isTextarea {
         top: 10px;
       }

src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx

@@ -32,7 +32,7 @@ const Hobbies = (props) => {
       <div styleName="form-container-default">
         <form name="device-form" noValidate autoComplete="off">
           {/* Hobby */}
-          <FormField label="Hobby">
+          <FormField label="Hobby" required>
             <FormInputText
               id="hobby"
               name="hobby"

src/shared/components/Settings/ProfileSettings/Learning/index.jsx

@@ -38,7 +38,7 @@ const Learning = (props) => {
       <div styleName="form-container-default">
         <form name="device-form" noValidate autoComplete="off">
           {/* Name of College or University */}
-          <FormField label="Name of College or University">
+          <FormField label="Name of College or University" required>
             <FormInputText
               id="schoolCollegeName"
               name="schoolCollegeName"

src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx

@@ -34,7 +34,7 @@ const PersonalDetails = (props) => {
         <form name="basic-info-form" noValidate autoComplete="off">
 
           {/* First Name */}
-          <FormField label="First Name">
+          <FormField label="First Name" required>
             <FormInputText
               disabled={!canModifyTrait}
               id="firstName"
@@ -57,7 +57,7 @@ const PersonalDetails = (props) => {
           </FormField>
 
           {/* Last Name */}
-          <FormField label="Last Name">
+          <FormField label="Last Name" required>
             <FormInputText
               disabled={!canModifyTrait}
               id="lastName"
@@ -192,7 +192,7 @@ const PersonalDetails = (props) => {
           </FormField>
 
           {/* Country */}
-          <FormField label="Country">
+          <FormField label="Country" required>
             <Select
               name="country"
               options={countries}

src/shared/components/Settings/Tools/Devices/index.jsx

@@ -497,7 +497,7 @@ export default class Devices extends ConsentComponent {
               </div>
               <div styleName="form-body">
                 <form styleName="device-form" noValidate autoComplete="off">
-                  <FormField label="Device Type *" style={{ flex: '0 0 100%' }}>
+                  <FormField label="Device Type" style={{ flex: '0 0 100%' }} required>
                     <FormInputSelect
                       name="Device Type"
                       options={types}

src/shared/components/Settings/Tools/ServiceProviders/index.jsx

@@ -336,7 +336,7 @@ export default class ServiceProviders extends ConsentComponent {
               </div>
               <div styleName="form-body">
                 <form styleName="service-provider-form" noValidate autoComplete="off">
-                  <FormField label="Service Provider Type *" style={{ flex: '0 0 100%' }}>
+                  <FormField label="Service Provider Type" style={{ flex: '0 0 100%' }} required>
                     <FormInputSelect
                       name="serviceProviderType"
                       options={dropdowns.serviceProviderType}
@@ -355,7 +355,7 @@ export default class ServiceProviders extends ConsentComponent {
                     }
                   </FormField>
 
-                  <FormField label="Service Provider Name *" style={{ flex: '0 0 100%' }}>
+                  <FormField label="Service Provider Name" style={{ flex: '0 0 100%' }} required>
                     <FormInputText
                       disabled={!canModifyTrait}
                       id="name"

src/shared/components/Settings/Tools/Software/index.jsx

@@ -342,7 +342,7 @@ export default class Software extends ConsentComponent {
               </div>
               <div styleName="form-body">
                 <form styleName="software-form" noValidate autoComplete="off">
-                  <FormField label="Software Type *" style={{ flex: '0 0 100%' }}>
+                  <FormField label="Software Type" style={{ flex: '0 0 100%' }} required>
                     <FormInputSelect
                       name="softwareType"
                       options={dropdowns.type}
@@ -361,7 +361,7 @@ export default class Software extends ConsentComponent {
                     }
                   </FormField>
 
-                  <FormField label="Software Name *" style={{ flex: '0 0 100%' }}>
+                  <FormField label="Software Name" style={{ flex: '0 0 100%' }} required>
                     <FormInputText
                       disabled={!canModifyTrait}
                       id="name"