hydrogen

A React component library for Hydrogen

How to use
Documentation

How to use

Installing dependencies

yarn

Running Tests

yarn test

Documentation

Run Docz local server to view UI components on localhost
Typically this will run on http://127.0.0.1:3000/

yarn docz:dev

Components

Below you will find information about each individual component and an example usage. Prop tables included.

Button

<Button primary>Primary</Button>
<Button action="true">Action Button</Button>
<Button>Default</Button>

Button.propTypes = {
 onClick: PropTypes.func,
 primary: PropTypes.any,
 action: PropTypes.string
};

Callouts

<Callout 
 buttonTextPrimary="Action Item 1" 
 buttonTextSecondary="Action Item 2" 
 primaryAction={()=>alert('Primary')} 
 secondaryAction={()=>alert('Secondary')}>
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
</Callout>
<Callout buttonTextPrimary="Action Item 1" small>
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
</Callout>
 
Callout.propTypes = {
 primaryAction: PropTypes.func,
 secondaryAction: PropTypes.func,
 buttonTextPrimary: PropTypes.string,
 buttonTextSecondary: PropTypes.string,
};

Cells

<CellGroup>
 <Cell id={1} value="Top" name="color" onChange={(v) => console.log(v.target.value)}>Top Cell</Cell>
 <Cell id={2} value="Mid" name="color" onChange={(v) => console.log(v.target.value)}>Middle Cell</Cell>
 <Cell id={3} value="Bot" name="color" onChange={(v) => console.log(v.target.value)}>Bottom Cell</Cell>
</CellGroup>
 
Cell.propTypes = {
 onChange: PropTypes.func,
 name: PropTypes.string,
 checked: PropTypes.bool,
 value: PropTypes.string,
 id: PropTypes.node
};

Dropdown

<Dropdown
 options={[{value: 'red', name: 'Red'}, {value: 'blue', name: 'Blue'}, {value: 'green', name: 'Green'}]}
 label="Colors of Rainbow" 
 name="colors" />
 
Dropdown.propTypes = {
 onChange: PropTypes.func,
 name: PropTypes.string,
 value: PropTypes.string,
 options: PropTypes.any.isRequired
};

Horizontal Bar Graph

<VisualCardBarGraph 
   title="Savings Progress"
   value1={64} subtitle1={'Subtitle1'} 
   value2={120} subtitle2={'Subtitle2'} 
   value3={100} subtitle3={'Subtitle3'} 
 />
 
VisualCardBarGraph.propTypes = {
 title: PropTypes.string,
 value1: PropTypes.number.isRequired,
 value2: PropTypes.number,
 value3: PropTypes.number,
 subtitle1: PropTypes.string.isRequired,
 subtitle2: PropTypes.string,
 subtitle3: PropTypes.string,
};

Icons

See here for a complete list

<Icon size={30} color="black" icon="Analytics" />
 
Icon.defaultProps = {
 className: '',
 color: '',
 size: '100%',
};

Insight Cards (responsive)

 <InsightIconCard label='Education' value={230000} goal={400000} icon="Education" />
 <InsightProfileCard 
   profile="Investment Profile 1" 
   time="2-5 years" 
   best={132000} 
   worst={400} 
   average={3400} 
   onClick={() => alert('View Portfolio')}/>
 <br />
 
InsightIconCard.propTypes = {
 icon: PropTypes.string,
 label: PropTypes.string,
 value: PropTypes.number,
 goal: PropTypes.number,
 onClick: PropTypes.func
};

InsightProfileCard.propTypes = {
 profile: PropTypes.string,
 time: PropTypes.string,
 best: PropTypes.number,
 worst: PropTypes.number,
 onClick: PropTypes.func
};

Insight Tabs

<InsightTab label='Goal Name Long' balance={230000} tracking={true} selected={true} />
 
InsightTab.propTypes = {
 onClick: PropTypes.func,
 menuClick: PropTypes.func,
 label: PropTypes.string.isRequired,
 balance: PropTypes.number.isRequired,
 tracking: PropTypes.bool,
 selected: PropTypes.bool,
};

Lists and Tables

Simple Table

<SimpleTableTable>
 <SimpleTableTableRow>
   <SimpleTableTableHeader>Title of Column1</SimpleTableTableHeader>
   <SimpleTableTableHeader>Title of Column2</SimpleTableTableHeader>
 </SimpleTableTableRow>
 <SimpleTableTableRow>
   <SimpleTableTableCell>Title</SimpleTableTableCell>
   <SimpleTableTableCell>Value</SimpleTableTableCell>
 </SimpleTableTableRow>  
</SimpleTableTable>

Color List Table
<ColorListTable data={[{label: 'Label1', value: 60, color: '#A05195'}, {label: 'Label2', value: 40, color: '#F95D6A'}]}> 
 <ColorListTableRow>
   <ColorListTableCell>Default</ColorListTableCell>
   <ColorListTableCell>25%</ColorListTableCell>
 </ColorListTableRow>
 <ColorListTableRow>
   <ColorListTableCell>Default</ColorListTableCell>
   <ColorListTableCell>15%</ColorListTableCell>
 </ColorListTableRow>
 <ColorListTableRow>
   <ColorListTableCell>Default</ColorListTableCell>
   <ColorListTableCell>10%</ColorListTableCell>
 </ColorListTableRow>
 <ColorListTableRow>
   <ColorListTableCell>Default</ColorListTableCell>
   <ColorListTableCell>10%</ColorListTableCell>
 </ColorListTableRow>
 <ColorListTableRow>
   <ColorListTableCell>Default</ColorListTableCell>
   <ColorListTableCell>20%</ColorListTableCell>
 </ColorListTableRow>
 <ColorListTableRow>
   <ColorListTableCell>Default</ColorListTableCell>
   <ColorListTableCell>15%</ColorListTableCell>
 </ColorListTableRow>
 <ColorListTableRow>
   <ColorListTableCell>Default</ColorListTableCell>
   <ColorListTableCell>5%</ColorListTableCell>
 </ColorListTableRow>
</ColorListTable>

Finance Table
<FinanceTable>
 <FinanceHeaderRow color={"blue"}>
   <FinanceHeaderTitle>International Equities</FinanceHeaderTitle>
   <FinanceHeaderPercentage>25%</FinanceHeaderPercentage>
 </FinanceHeaderRow>
 <FinanceRow>
   <FinanceCellTicker>NSRGY</FinanceCellTicker>
   <FinanceCell>Nestle SA</FinanceCell>
   <FinanceCellPercentage>15%</FinanceCellPercentage>
 </FinanceRow>
 <FinanceRow>
   <FinanceCellTicker>XEF</FinanceCellTicker>
   <FinanceCell>iShares Core</FinanceCell>
   <FinanceCellPercentage>5%</FinanceCellPercentage>
 </FinanceRow>
 <FinanceRow>
   <FinanceCellTicker>NFLX</FinanceCellTicker>
   <FinanceCell>Netflix</FinanceCell>
   <FinanceCellPercentage>20%</FinanceCellPercentage>
 </FinanceRow>
</FinanceTable>

Collapse Table
<CollapseTable>
 <CollapseTableTitleRow>
   <CollapseTableTitle>Category Title</CollapseTableTitle>
   <CollapseTableTitle>Value</CollapseTableTitle>
   <CollapseTableTitle>Percentage</CollapseTableTitle>
   <CollapseTableTitle>Earnings</CollapseTableTitle>
 </CollapseTableTitleRow>
 <CollapseTableHeaderRow color={'#2F4B7C'} collapseId={'income'}>
   <CollapseTableRowHeader>Fixed Income</CollapseTableRowHeader>
   <CollapseTableRowHeader>15000</CollapseTableRowHeader>
   <CollapseTableRowHeader>39</CollapseTableRowHeader>
   <CollapseTableRowHeader>343</CollapseTableRowHeader>
 </CollapseTableHeaderRow>
 <CollapseTableRow parentId={'income'}>
   <CollapseTableCell>Netflix</CollapseTableCell>
   <CollapseTableCell>14000</CollapseTableCell>
   <CollapseTableCell>12</CollapseTableCell>
   <CollapseTableCell>300</CollapseTableCell>
 </CollapseTableRow>
 <CollapseTableRow parentId={'income'}>
   <CollapseTableCell>Microsoft</CollapseTableCell>
   <CollapseTableCell>2000</CollapseTableCell>
   <CollapseTableCell>2</CollapseTableCell>
   <CollapseTableCell>400</CollapseTableCell>
 </CollapseTableRow>
 <CollapseTableRow parentId={'income'}>
   <CollapseTableCell>Tesla</CollapseTableCell>
   <CollapseTableCell>9000</CollapseTableCell>
   <CollapseTableCell>49</CollapseTableCell>
   <CollapseTableCell>8200</CollapseTableCell>
 </CollapseTableRow>
</CollapseTable>

CollapseTableHeaderRow.propTypes = {
 collapseId: PropTypes.string.isRequired,
 color: PropTypes.string,
};

CollapseTableRow.propTypes = {
 parentId: PropTypes.string.isRequired,
};

FinanceHeaderRow.propTypes = {
 color: PropTypes.string,
};

ColorListTable.propTypes = {
 data: PropTypes.shape({
   label: PropTypes.string,
   value: PropTypes.number,
   color: PropTypes.string
 }),
};

Rating Stars

<Rating onChange={(evt) => console.log(evt.target.value)}/>
  
Rating.propTypes = {
  onChange: PropTypes.func,
};

Radio and Checkbox

<RadioGroup>
 <Radio id={1} value="Top" name="radios" onChange={(v) => console.log(v.target.value)}>Default</Radio>
 <Radio id={2} value="Bot" name="radios" onChange={(v) => console.log(v.target.value)}>Selected</Radio>
</RadioGroup>

<CheckboxGroup>
 <Checkbox id={3} value="Top" name="boxes" onChange={(v) => console.log(v.target.value)}>Default</Checkbox>
 <Checkbox id={4} value="Bot" name="boxes" onChange={(v) => console.log(v.target.value)}>Selected</Checkbox>
</CheckboxGroup>
 
Checkbox.propTypes = {
 type: PropTypes.string,
 name: PropTypes.string.isRequired,
 checked: PropTypes.bool,
 onChange: PropTypes.func.isRequired,
}

Radio.propTypes = {
 type: PropTypes.string,
 name: PropTypes.string.isRequired,
 onChange: PropTypes.func.isRequired,
}

Recommendation Tabs (responsive)

<TabsWrapper>
  <RecommendationTab 
    key='1' 
    label='Increase monthly auto deposit to' 
    target="$1820.00" 
    current="$300.00" 
    icon="Circle-Dollar"/>
  <RecommendationTab 
    key='2' 
    selected 
    label='Add a one-time deposit of' 
    target="$300.00" 
    current="$20.00" 
    icon="Circle-Dollar" />
  <RecommendationTab key='3' label='Increase retirement age to' target="26" current="20" icon="Circle-Dollar"/>
</TabsWrapper>
  
RecommendationTab.propTypes = {
  selected: PropTypes.any,
  icon: PropTypes.string,
  current: PropTypes.any,
  label: PropTypes.string,
  target: PropTypes.any
};

Selection Cards

<IconCard label='Quick to React' icon="Health" />
<TextCard top="Label" option="Option 1" bottom="label 1" />

IconCard.propTypes = {
  onClick: PropTypes.func,
  icon: PropTypes.string.isRequired,
  label: PropTypes.string,
};

TextCard.propTypes = {
  onClick: PropTypes.func,
  top: PropTypes.string,
  option: PropTypes.string,
  bottom: PropTypes.string,
};

Sliders

<SliderBasic 
 min={1} 
 max={100} 
 default={10} 
 step={1} 
 tooltip={false} 
 onChange={(evt) => console.log('SliderBasic', evt)}
/>
<SliderBasic min={10} max={100} default={1} step={10} disabled />
<SliderGradient 
 label1="Option 1" 
 label2="Option 2" 
 tooltip={true} 
 onChange={(evt) => console.log('SliderGradient', evt)}
/>
<SliderCircle 
  label1='Option 1' 
  label2='Option 2' 
  onChange={(position) => console.log('SliderCircle', position)}
/>

SliderBasic.propTypes = {
  min: PropTypes.number.isRequired,
  max: PropTypes.number.isRequired,
  step: PropTypes.number.isRequired,
  tooltip: PropTypes.bool,
  disabled: PropTypes.bool,
  onChange: PropTypes.func
};

SliderGradient.propTypes = {
  min: PropTypes.number.isRequired,
  max: PropTypes.number.isRequired,
  step: PropTypes.number.isRequired,
  tooltip: PropTypes.bool,
  disabled: PropTypes.bool,
  onChange: PropTypes.func
};

SliderCircle.propTypes = {
  onChange: PropTypes.func,
};

SliderCircle.defaultProps = {
  position: 0,
  clickable: true,
  positionChangeListener: null,
}

Tab Selectors

<TabsContainer>
  <Tab size="small" label="Item Selected" key={'1'}/>
  <Tab size="small" label="Item Middle" key={'2'} selected />
  <Tab size="small" label="Item Right" key={'3'}/>
</TabsContainer>
<TabsContainer>
  <Tab size="large" label="Item Left" key={'1'} selected />
  <Tab size="large" label="Item Middle" key={'2'}/>
  <Tab size="large" label="Item Right" key={'3'}/>
</TabsContainer>
<TimeTabsContainer>
  <TimeTab label="1D" key={'1'}/>
  <TimeTab label="1M" key={'2'}/>
  <TimeTab label="1Y" key={'3'} selected />
  <TimeTab label="SY" key={'4'}/>
</TimeTabsContainer>

Tab.propTypes = {
  onClick: PropTypes.func,
  label: PropTypes.string,
  key: PropTypes.number,
  selected: PropTypes.bool,
  size: PropTypes.PropTypes.oneOf(['large', 'small']),
};

TimeTab.propTypes = {
  onClick: PropTypes.func,
  label: PropTypes.string,
  key: PropTypes.number,
  selected: PropTypes.bool,
};

Text Fields

<TextField placeholder="Default" name="text1"/>
<TextField placeholder="Enter your name..." name="text2" label="First Name"/>
<TextField error="This is an example of error text." name="text4" label="Error" invalid />
<SearchField />
<DateFields />

TextField.propTypes = {
  invalid: PropTypes.bool,
  placeholder: PropTypes.string,
  name: PropTypes.string,
  label: PropTypes.string,
  onChange: PropTypes.func,
};

SearchField.propTypes = {
  invalid: PropTypes.bool,
  placeholder: PropTypes.string,
  name: PropTypes.string,
  label: PropTypes.string,
  onChange: PropTypes.func,
  onSubmit: PropTypes.func
};

DateFields.propTypes = {
  invalid: PropTypes.bool,
  name: PropTypes.string,
  label: PropTypes.string,
  onChange: PropTypes.func,
};

Rating Stars

<Tooltip text='5 or more characters' position='bottom'>Hover me! (Bottom)</Tooltip>

Tooltip.propTypes = {
  text: PropTypes.string,
  position: PropTypes.oneOf(['top', 'bottom']),
};

jamehydro

hydrogen

Table of contents

How to use

Installing dependencies

Running Tests

Documentation

Components

Button

Callouts

Cells

Dropdown

Horizontal Bar Graph

Icons

Insight Cards (responsive)

Insight Tabs

Lists and Tables

Rating Stars

Radio and Checkbox

Recommendation Tabs (responsive)

Selection Cards

Sliders

Tab Selectors

Text Fields

Rating Stars

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

jamehydro

hydrogen

Table of contents

How to use

Installing dependencies

Running Tests

Documentation

Components

Button

Callouts

Cells

Dropdown

Horizontal Bar Graph

Icons

Insight Cards (responsive)

Insight Tabs

Lists and Tables

Rating Stars

Radio and Checkbox

Recommendation Tabs (responsive)

Selection Cards

Sliders

Tab Selectors

Text Fields

Rating Stars

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads