maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Removed colour picker from onboarding as it's never used. (#16491)

Browse source
This commit is contained in:
Nick Taylor 2022-02-09 06:17:16 -05:00 • committed by GitHub
parent f72e60b15d
commit 32e1b3f228
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 0 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/javascript/onboarding/components/ProfileForm.jsx
View file

@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
import { userData, updateOnboarding } from '../utilities';
import { Navigation } from './Navigation';
import { ColorPicker } from './ProfileForm/ColorPicker';
import { TextArea } from './ProfileForm/TextArea';
import { TextInput } from './ProfileForm/TextInput';
import { CheckBox } from './ProfileForm/CheckBox';
@ -124,14 +123,6 @@ export class ProfileForm extends Component {
onFieldChange={this.handleFieldChange}
/>
);
case 'color_field':
return (
<ColorPicker
key={field.id}
field={field}
onColorChange={this.handleColorPickerChange}
/>
);
case 'text_area':
return (
<TextArea

64
app/javascript/onboarding/components/ProfileForm/ColorPicker.jsx
View file

@ -1,64 +0,0 @@
/**
* A color input and a text input that reacts to an onColorChange change event.
*
* @example
* field = {
* "id": 164,
* "attribute_name": "brand_color1",
* "description": "Used for backgrounds, borders etc.",
* "input_type": "color_field",
* "label": "Brand color 1",
* "placeholder_text": "#000000"
* }
* <ColorPicker
key={field.id}
field={field}
onColorChange={this.handleColorPickerChange}/>
* 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';
export function ColorPicker(props) {
const { onColorChange } = props;
const { attribute_name, placeholder_text, description, label } = props.field;
return (
<FormField>
<label class="crayons-field__label" htmlFor={attribute_name}>
{label}
</label>
<div class="flex items-center w-100 m:w-50">
<input
placeholder={placeholder_text}
class="crayons-textfield js-color-field"
type="text"
name={attribute_name}
id={attribute_name}
onChange={onColorChange}
/>
<input
class="crayons-color-selector js-color-field ml-2"
type="color"
name={attribute_name}
id={attribute_name}
onChange={onColorChange}
/>
</div>
{description && <p class="crayons-field__description">{description}</p>}
</FormField>
);
}
ColorPicker.propTypes = {
field: PropTypes.shape({
attribute_name: PropTypes.string.isRequired,
placeholder_text: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
}).isRequired,
};