/pulsar-react

Pulsar components for React

Primary LanguageCSS

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>