Pulsar React Components

A collection of Pulsar components implemented using React.

Form input component support

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	✅

Form structure component support

Component	Status
ErrorBlock	✅
ErrorSummary	✖
Fieldset	✅
FormGroup	✅
FormLabel	✅
HelpBlock	✅

HTML component support

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	✖

Basic examples

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>