7a9629172d
* feat: v1 of the profile form * feat: fix inputs and create a handleChange event * feat: update the submit values to represent values from the form * feat: ensure that errors and success is handled on send * refactor: remove unused code * feat: replace the old profile form with a new one * fix: use the renames file * refactor: safety net for groups * chore: fix code climate issue * tests: amend + add tests * test: fix broken spec * feat: update the setup for the test * tests: refactored them to move the fake response into the before all * feat: clunky way to quickly cater for color field since it was a quick and easy implementation * feat: add a field.description to the color field * refactor: pull some duplicate code into a new function * chore: cater for a textarea field * overflow issue * refactor: use FormField instead of manual divs * Update spec/requests/users_onboarding_spec.rb Co-authored-by: Vaidehi Joshi <vaidehi.sj@gmail.com> * Update spec/requests/users_onboarding_spec.rb Co-authored-by: Vaidehi Joshi <vaidehi.sj@gmail.com> * refactor: move out of method and into a constant * refactor: user_onboarding_update to be more readable * refactor: use current.save instead of declaring a new variable * refactor: remove explicit check for bookean * refactor: use request from '@utilities/http' instead :) * refactor: no need for if with destructured groups * refactor: move color field to its own component * chore: remove colorfield now thats its a component * fix: forgot about field * feat: a text area component * chore: remove textField function in favor of component * refactor: checkbox refactor * refactor: add a switch statement * chore: move into a more organized folder * fix: move the handler to props and off from field * fix: add a conditional so we dont hit an error undefined method `success?' for nil:NilClass * refactor: change from component to function * feat: add a key attribute * refactor: add role for readers * refactor: remove unnecessary guard clauses * refactor: use function instead of an arrow * chore: document components * test * padding * fixes * test: fix the tests by using more general matchers Co-authored-by: Paweł Ludwiczak <ludwiczakpawel@gmail.com> Co-authored-by: Vaidehi Joshi <vaidehi.sj@gmail.com>
58 lines
1.5 KiB
JavaScript
58 lines
1.5 KiB
JavaScript
/**
|
|
* A text field with a label that reacts to an onFieldChange event.
|
|
*
|
|
* @example
|
|
* field = {
|
|
* "id": 140,
|
|
* "attribute_name": "website_url",
|
|
* "description": null,
|
|
* "input_type": "text_input",
|
|
* "label": "Webiste URL",
|
|
* "placeholder_text": ""
|
|
*}
|
|
*
|
|
* <TextInput
|
|
key={field.id}
|
|
field={field}
|
|
onFieldChange={this.handleFieldChange} />
|
|
|
|
* Note:
|
|
* field is an json object that will contain the following attributes: attribute_name, placeholder_text, description, label.
|
|
*/
|
|
|
|
import { h } from 'preact';
|
|
import PropTypes from 'prop-types';
|
|
import { FormField } from '@crayons';
|
|
|
|
function TextInput(props) {
|
|
const { onFieldChange } = props;
|
|
const { attribute_name, placeholder_text, description, label } = props.field;
|
|
|
|
return (
|
|
<FormField>
|
|
<label class="crayons-field__label" htmlFor={attribute_name}>
|
|
{label}
|
|
</label>
|
|
<input
|
|
class="crayons-textfield"
|
|
placeholder={placeholder_text}
|
|
name={attribute_name}
|
|
id={attribute_name}
|
|
onChange={onFieldChange}
|
|
/>
|
|
{description && <p class="crayons-field__description">{description}</p>}
|
|
</FormField>
|
|
);
|
|
}
|
|
|
|
TextInput.propTypes = {
|
|
field: PropTypes.shape({
|
|
attribute_name: PropTypes.string.isRequired,
|
|
placeholder_text: PropTypes.string.isRequired,
|
|
description: PropTypes.string.isRequired,
|
|
label: PropTypes.string.isRequired,
|
|
input_type: PropTypes.string.isRequired,
|
|
}).isRequired,
|
|
};
|
|
|
|
export default TextInput;
|