A collection of Pulsar components implemented using React.
| Component | Status |
|---|---|
| ButtonGroup | ✅ |
| Checkbox | ✅ |
| Choice | ✅ |
| Color | ✅ |
| Compound | ✅ (achieved with form group inline variant |
| Content | ✅ |
| DateInput | ✅ |
| File | ✅ |
| Form | ✅ |
| Hidden | ✅ |
| InlineCheckbox | ✅ |
| InlineRadioButton | ✅ |
| PasswordInput | ✅ |
| RadioButton | ✅ |
| Range | ✅ |
| Select | ✅ |
| Select2 | ✅ |
| TextArea | ✅ |
| TextInput | ✅ |
| TimeInput | ✅ |
| ToggleSwitch | ✅ |
| Component | Status |
|---|---|
| ErrorBlock | ✅ |
| ErrorSummary | ✖ |
| Fieldset | ✅ |
| FormGroup | ✅ |
| FormLabel | ✅ |
| HelpBlock | ✅ |
| Component | Status |
|---|---|
| Badge | ✅ |
| Block list | ✖ |
| Breadcrumb | ✖ |
| Button | ✅ |
| Button group | ✅ |
| Dropdown button | ✅ |
| Card | ✖ no current Twig helper |
| Datatable | ✖ |
| Flash message | ✖ |
| Icon | ✖ |
| Label | ✅ |
| Link | ✅ |
| Link list | ✅ Achievable by nesting a List>ListItem>Link |
| List | ✅ New OrderedList & UnorderedList components |
| Loading spinner | ✖ |
| Media | ✖ |
| Metadata | ✖ |
| Modal | ✖ |
| Pagination | ✖ |
| Panel | ✖ |
| Popover | ✖ |
| Progress bar | ✖ |
| Progress list | ✖ |
| Remove button | ✖ |
| Status | ✖ |
| Table | ✖ |
| Tooltip | ✖ |
Button
<Button>Foo</Button>Button group (Form)
<FormGroup buttonGroup labelText="Group label">
<ButtonGroupItem type="radio" id="foo-1" name="group-1">Foo</ButtonGroupItem>
<ButtonGroupItem type="radio" id="bar-1" name="group-1">Bar</ButtonGroupItem>
<ButtonGroupItem type="radio" id="baz-1" name="group-1">Baz</ButtonGroupItem>
</FormGroup>
<FormGroup buttonGroup labelText="Group label">
<ButtonGroupItem type="checkbox" id="foo-1" name="group-1">Foo</ButtonGroupItem>
<ButtonGroupItem type="checkbox" id="bar-1" name="group-1">Bar</ButtonGroupItem>
<ButtonGroupItem type="checkbox" id="baz-1" name="group-1">Baz</ButtonGroupItem>
</FormGroup>Button group (HTML)
<ButtonGroup>
<Button>Foo</Button>
</ButtonGroup>Checkbox
<FormGroup checkbox labelText="Group label">
<Checkbox name="foo" />
</FormGroup>Choice
<FormGroup choiceGroup labelText="Assign blame to">
<ChoiceGroupItem type="radio" name="choice-1" value="choice-1-sun">Sunshine</ChoiceGroupItem>
<ChoiceGroupItem type="radio" name="choice-1" value="choice-1-moon">Moonlight</ChoiceGroupItem>
<ChoiceGroupItem type="radio" name="choice-1" value="choice-1-good">Good times</ChoiceGroupItem>
<ChoiceGroupItem type="radio" name="choice-1" value="choice-1-boog">Boogie</ChoiceGroupItem>
</FormGroup>Color
<FormGroup labelText="Group label">
<ColorInput name="foo" />
</FormGroup>Compound
<FormGroup inline labelText="Group label">
<TextInput width={1} name="dd" placeholder="DD" />
<TextInput width={1} name="mm" placeholder="MM" />
<TextInput width={1} name="yyyy" placeholder="YYYY" />
</FormGroup>Content
<FormGroup content labelText="Group label">
<Content>This is content</Content>
</FormGroup>DateInput
<FormGroup labelText="Group label">
<DateInput name="foo" />
</FormGroup>Dropdown Button
<DropdownButton
label="Menu"
items={[
{ id: 'chocolate', label: 'Chocolate' },
{ id: 'strawberry', label: 'Strawberry' },
{ id: 'vanilla', label: 'Vanilla' }
]}
/>ErrorSummary
To do...
Fieldset
<Fieldset legendText="Legend">
</Fieldset>File
<FormGroup labelText="Group label">
<FileInput name="foo" />
</FormGroup>Form
<Form></Form>Hidden
<HiddenInput name="foo" />InlineCheckbox
<FormGroup inlineCheckbox>
<InlineCheckbox
labelText="Inline checkbox"
name="foo"
/>
</FormGroup>InlineRadioButton
<FormGroup inlineRadioButton>
<InlineRadioButton
labelText="Inline radio"
name="foo"
/>
</FormGroup>Label
<Label>foo</Label>Link
<Link href="#foo">Bar</Link>Ordered List
<OrderedList>
<ListItem>Foo</ListItem>
</OrderedList>PasswordInput
<FormGroup labelText="Group label">
<PasswordInput name="foo" />
</FormGroup>RadioButton
<FormGroup radioButton labelText="Radio">
<RadioButton name="foo" />
</FormGroup>Range
<FormGroup rangeInput labelText="Group label">
<RangeInput name="foo" />
</FormGroup>Select
<FormGroup labelText="Group label">
<Select
options=[
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]
/>
</FormGroup>Select2
<FormGroup labelText="Group label">
<Select2
options=[
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]
/>
</FormGroup>TextArea
<FormGroup labelText="Group label">
<TextArea name="foo"></TextArea>
</FormGroup>TextInput
<FormGroup labelText="Group label">
<TextInput name="foo" />
</FormGroup>TimeInput
<FormGroup labelText="Group label">
<TimeInput name="foo" />
</FormGroup>ToggleSwitch
<FormGroup labelText="Group label">
<ToggleSwitch name="foo" />
</FormGroup>Unordered List
<UnorderedList>
<ListItem>Foo</ListItem>
</UnorderedList>