import React from 'react' import { FormGroup, TextInput } from '../../' const FormGroupDefault = (props) => ( <div> <FormGroup> <TextInput label="First Name" placeholder="Enter First Name" {...props} /> <TextInput label="Middle Intial" placeholder="Enter Middle Initial" {...props} /> <TextInput label="Last Name" placeholder="Enter Last Name" {...props} /> </FormGroup> </div> ) export default FormGroupDefault
import React from 'react' import { Button, FormGroup, TextInput } from '../../' const FormGroupButton = (props) => ( <div> <div> <FormGroup> <TextInput label="With Label" placeholder="Search" {...props} /> <Button onClick={() => alert('Button Clicked!')} text="Submit" variant="secondary" {...props} /> </FormGroup> </div> <br /> <div> <FormGroup> <TextInput placeholder="Search" {...props} /> <Button onClick={() => alert('Button Clicked!')} text="Submit" variant="secondary" {...props} /> </FormGroup> </div> </div> ) export default FormGroupButton
import React from 'react' import { DatePicker, FormGroup, TextInput } from '../../' const FormGroupDatePicker = (props) => ( <div> <FormGroup> <TextInput label="Event" placeholder="Event Name" {...props} /> <DatePicker label="event date" pickerId="date-picker-default" {...props} /> </FormGroup> </div> ) export default FormGroupDatePicker
import React from 'react' import { FormGroup, Select, TextInput } from '../../' const FormGroupSelect = (props) => { const options = [ { value: 'Country' }, { value: 'Pop' }, { value: 'Rock' }, { value: 'Hip-Hop/Rap' }, { value: 'Classical' }, { value: 'Gospel' }, { value: 'Alternative' }, { value: 'Indie' }, { value: 'Other' }, ] return ( <div> <FormGroup> <TextInput label="Artist" placeholder="Enter Artist Name" {...props} /> <Select blankSelection="Genre" options={options} {...props} /> </FormGroup> </div> ) } export default FormGroupSelect
import React, { useState } from 'react' import { FormGroup, SelectableCard } from '../../' const FormGroupSelectableCard = (props) => { const [value, setValue] = useState('') const handleSelect = (event) => { setValue(event.target.value) } return ( <div> <FormGroup> <SelectableCard checked={value === 'cat'} inputId="cat1" multi={false} name="animal" onChange={handleSelect} value="cat" {...props} > {'Cat'} </SelectableCard> <SelectableCard checked={value === 'dog'} inputId="dog1" multi={false} name="animal" onChange={handleSelect} value="dog" {...props} > {'Dog'} </SelectableCard> </FormGroup> </div> ) } export default FormGroupSelectableCard
import React, { useState } from 'react' import { FormGroup, SelectableCardIcon } from '../../' const FormGroupSelectableCardIcon = (props) => { const [selectedFormat, toggleFormat] = useState(null) return ( <div> <FormGroup> <SelectableCardIcon checked={selectedFormat === 'basketball'} icon="basketball-ball" inputId={7} name="select" onChange={() => toggleFormat('basketball')} titleText="Basketball" value="basketball" {...props} /> <SelectableCardIcon checked={selectedFormat === 'football'} icon="football-ball" inputId={8} name="select" onChange={() => toggleFormat('football')} titleText="Football" value="football" {...props} /> </FormGroup> </div> ) } export default FormGroupSelectableCardIcon