Skip to content

Commit c51d1a6

Browse files
hikkitadahikkitada
committed
2 parents dece7c1 + a860be2 commit c51d1a6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+6467
-1888
lines changed

‎README.md

Lines changed: 144 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -11,73 +11,185 @@ npm start
1111
open http://localhost:3000
1212
```
1313

14+
## Tests
15+
16+
```
17+
npm test
18+
```
19+
1420
## Components
1521

16-
### [Button](https://www.lightningdesignsystem.com/components/buttons#neutral)
22+
### Table of Contents
23+
* [Buttons](#buttons)
24+
* [Button Groups](#button-groups)
25+
* [Lookups](#lookups)
26+
* [Modals](#modals)
27+
* [Picklists](#picklists)
28+
* [Utility Icons](#utility-icons)
29+
30+
31+
### [Buttons](https://www.lightningdesignsystem.com/components/buttons)
1732

1833
```jsx
1934

20-
<SLDSButton
21-
label='Test Button'
22-
variant='neutral'
23-
iconName='download'
24-
iconSize='small'
25-
iconPosition='left'
26-
onClick={this.handleButtonClick} />
35+
import {SLDSButton} from 'design-system-react';
2736

28-
Required Prop:
37+
...
38+
39+
1. <SLDSButton label='Neutral' variant='neutral' onClick={this.handleNeutralClick} />
40+
2. <SLDSButton label='Neutral Icon' variant='neutral' iconName='download' iconSize='small' iconPosition='right' onClick={this.handleNeutralClick} />
41+
3. <SLDSButton label='Disabled' variant='neutral' disabled={true} onClick={this.handleDisabledClick} />
42+
4. <SLDSButton label='Brand' variant='brand' onClick={this.handleBrandClick} />
43+
5. <SLDSButton label='Settings' variant='icon' iconName='settings' iconSize='large' onClick={this.handleIconClick} />
44+
6. <SLDSButton label='User' variant='icon' inverse={true} iconName='user' iconSize='large' onClick={this.handleIconClick} />
45+
7. <SLDSButton label='Edit' variant='icon' hint={true} iconName='edit' iconSize='large' onClick={this.handleIconClick} />
46+
47+
Required Prop
2948
* Only label is required
3049

31-
Optional Props:
32-
* variant must be neutral, brand, or icon (inverse, stateful, icon more, and hint coming soon)
33-
* iconSize must be small, medium, or large
34-
* iconPosition must be left or right
50+
Default Props Prop Values
51+
* label='' Required Prop
52+
* variant='base' ['base', 'neutral', 'brand', 'destructive', 'icon'] Use icon if you want an icon only button
53+
* disabled={false}
54+
* tabindex=''
55+
* inverse={false}
56+
* stateful={false}
57+
* responsive={false}
58+
* iconName='' see https://www.lightningdesignsystem.com/resources/icons#utility for names
59+
* iconVariant='bare' ['bare', 'container', 'border', 'border-filled', 'small', 'more']
60+
* iconSize='medium' ['x-small', 'medium', 'small', 'large']
61+
* iconPosition='left' ['left', 'right', 'large']
62+
* className = '' custom classes on the button tag
63+
64+
```
65+
66+
[![browser support](/readme-assets/SLDSButtons.png)](/readme-assets/SLDSButtons.png)
67+
68+
69+
### [Button Groups](https://www.lightningdesignsystem.com/components/button-groups)
70+
71+
```jsx
72+
73+
import {SLDSButtonGroup} from 'design-system-react';
74+
75+
...
76+
77+
<SLDSButtonGroup>
78+
<SLDSButton label='Refresh' variant='neutral' />
79+
<SLDSButton label='Edit' variant='neutral' />
80+
<SLDSButton label='Save' variant='neutral' />
81+
<SLDSButton label='More Options' variant='icon' iconName='down' iconVariant='border-filled' />
82+
</SLDSButtonGroup>
83+
84+
<SLDSButtonGroup>
85+
<SLDSButton label='Chart' variant='icon' iconName='chart' iconVariant='border'/>
86+
<SLDSButton label='Filter' variant='icon' iconName='filter' iconVariant='border'/>
87+
<SLDSButton label='Sort' variant='icon' iconName='sort' iconVariant='more'/>
88+
</SLDSButtonGroup>
3589

3690
```
3791

38-
### [PickList Base](http://www.lightningdesignsystem.com/components/picklists#base&role=regular&status=all)
92+
[![browser support](/readme-assets/SLDSButtonGroups.png)](/readme-assets/SLDSButtonGroups.png)
93+
94+
95+
### [Lookups](https://www.lightningdesignsystem.com/components/lookups)
96+
#### *Base, single select only. Other variants coming soon.
97+
98+
```jsx
99+
100+
import {SLDSLookup} from 'design-system-react';
101+
102+
...
103+
104+
const items = [
105+
{label:'Paddy\'s Pub'},
106+
{label:'Tyrell Corp'},
107+
{label:'Paper St. Soap Company'},
108+
{label:'Nakatomi Investments'},
109+
{label:'Acme Landscaping'},
110+
{label:'Acme Construction'}
111+
];
112+
113+
<SLDSLookup items={items} label="Accounts" type="account" onNewItem={this.newItem} onSearchRecords={this.searchRecords} />
114+
115+
```
116+
117+
[![browser support](/readme-assets/SLDSLookups.gif)](/readme-assets/SLDSLookups.gif)
118+
119+
120+
### [Modals](https://www.lightningdesignsystem.com/components/modals)
121+
122+
```jsx
123+
124+
import {SLDSButton} from 'design-system-react';
125+
import {SLDSModal} from 'design-system-react';
126+
127+
...
128+
129+
<SLDSButton label='Open Modal' variant='brand' onClick={this.openModal} />
130+
131+
<SLDSModal
132+
isOpen={this.state.modalIsOpen}
133+
title={<span>Lightning Design System: Style with Ease</span>}
134+
footer={[
135+
<SLDSButton key='cancelBtn' label='Cancel' variant='neutral' onClick={this.closeModal} />,
136+
<SLDSButton key='saveBtn' label='Save' variant='brand' onClick={this.handleSubmitModal} />
137+
]}
138+
onRequestClose={this.closeModal}>
139+
{this.getModalContent()}
140+
</SLDSModal>
141+
142+
```
143+
144+
[![browser support](/readme-assets/SLDSModals.gif)](/readme-assets/SLDSModals.gif)
145+
146+
147+
### [PickLists](http://www.lightningdesignsystem.com/components/picklists#base&role=regular&status=all)
148+
#### *Base only. Other variants coming soon.
39149

40150
```jsx
41151

42152
import {SLDSPicklistBase} from 'design-system-react';
43153

44154
...
45155

46-
<SLDSPicklistBase
47-
options={[
156+
const options = [
48157
{label:'A Option',value:'A0'},
49158
{label:'B Option',value:'B0'},
50159
{label:'C Option',value:'C0'},
51160
{label:'D Option',value:'D0'},
52-
]}
53-
value='A0'
54-
label='Contacts'
55-
onSelect={(value)=>{
56-
console.log('selected: ',value);
57-
}}
58-
placeholder='Select a contact'/>
161+
];
162+
163+
<SLDSPicklistBase options={options} label="Contacts" placeholder="Select a contact"/>
59164

60165
```
61166

62167
[![browser support](/readme-assets/SLDSPicklistBase.gif)](/readme-assets/SLDSPicklistBase.gif)
63168

64169

65-
### Work in progress
170+
### [Utility Icons](https://www.lightningdesignsystem.com/resources/icons#utility)
66171

67-
### [DatePicker Base](http://www.lightningdesignsystem.com/components/datepickers#base)
68-
69-
[![browser support](/readme-assets/SLDSDatePickerBase.gif)](/readme-assets/SLDSDatePickerBase.gif)
172+
```jsx
70173

174+
import {SLDSUtilityIcon} from 'design-system-react';
71175

176+
...
72177

73-
## Tests
178+
<SLDSUtilityIcon name='adduser' className='slds-input__icon slds-icon-text-default'/>
74179

75180
```
76-
npm test
77-
```
181+
182+
[![browser support](/readme-assets/SLDSUtilityIcons.png)](/readme-assets/SLDSUtilityIcons.png)
183+
184+
185+
## Work in progress
186+
187+
### [DatePickers (base)](http://www.lightningdesignsystem.com/components/datepickers#base)
188+
189+
[![browser support](/readme-assets/SLDSDatePickerBase.gif)](/readme-assets/SLDSDatePickerBase.gif)
78190

79191

80192
### Future Pipeline
81-
* Lookups
82-
* Modals
193+
* Button - stateful variant
194+
* Lookup - multi-select, multi-scope variants
83195

‎components/SLDSButton/index.js

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ class Button extends React.Component {
4343
let notSelected = this.props.stateful && !this.state.active ? true : false;
4444
return classNames(this.props.className, 'slds-button', {
4545
[`slds-button--${this.props.variant}`]: this.props.variant,
46+
[`slds-button--icon-${this.props.iconVariant}`]: this.props.iconVariant,
47+
['slds-max-small-button--stretch']: this.props.responsive,
4648
['slds-not-selected']: notSelected,
4749
['slds-is-selected']: isSelected,
4850
});
@@ -56,6 +58,7 @@ class Button extends React.Component {
5658
disabled={this.props.disabled}
5759
inverse={this.props.inverse}
5860
stateful={this.props.stateful}
61+
hint={this.props.hint}
5962
name={this.props.iconName}
6063
size={this.props.iconSize}
6164
position={this.props.iconPosition}
@@ -64,18 +67,34 @@ class Button extends React.Component {
6467
}
6568
}
6669

70+
renderIconMore(){
71+
if(this.props.iconVariant === 'more'){
72+
return(
73+
<ButtonIcon
74+
variant={this.props.variant}
75+
disabled={this.props.disabled}
76+
inverse={this.props.inverse}
77+
name='down'
78+
size='x-small'
79+
/>
80+
);
81+
}
82+
}
83+
6784

6885
render() {
69-
const props = omit('className', this.props);
86+
const props = omit(this.props,'className');
7087
const click = createChainedFunction(this.props.onClick, this.onClick.bind(this));
7188
const labelClasses = this.props.variant === 'icon' ? 'slds-assistive-text': '';
7289
if (this.props.disabled) { props['disabled'] = 'disabled' };
7390

7491
return (
75-
<button className={this.getClassName()} {...props} onClick={click}>
92+
<button tabIndex={this.props.tabindex} className={this.getClassName()} {...props} onClick={click}>
7693
{this.props.iconPosition === 'right' ? <span className={labelClasses}>{this.props.label}</span>: null}
7794
{this.renderIcon()}
95+
{this.renderIconMore()}
7896
{(this.props.iconPosition === 'left' || !this.props.iconPosition) ? <span className={labelClasses}>{this.props.label}</span>: null}
97+
{this.props.children}
7998
</button>
8099
);
81100
}
@@ -84,10 +103,14 @@ class Button extends React.Component {
84103
Button.propTypes = {
85104
label: React.PropTypes.string.isRequired,
86105
variant: React.PropTypes.oneOf(['base', 'neutral', 'brand', 'destructive', 'icon']),
106+
tabindex: React.PropTypes.string,
87107
disabled: React.PropTypes.bool,
88108
inverse: React.PropTypes.bool,
109+
hint: React.PropTypes.bool,
89110
stateful: React.PropTypes.bool,
111+
responsive: React.PropTypes.bool,
90112
iconName: React.PropTypes.string,
113+
iconVariant: React.PropTypes.oneOf(['bare', 'container', 'border', 'border-filled', 'small', 'more']),
91114
iconSize: React.PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
92115
iconPosition: React.PropTypes.oneOf(['left', 'right']),
93116
}

‎components/SLDSButtonGroup/index.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/*
2+
Copyright (c) 2015, salesforce.com, inc. All rights reserved.
3+
4+
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
5+
Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
6+
Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
7+
Neither the name of salesforce.com, inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
8+
9+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
10+
*/
11+
12+
import React from 'react';
13+
const classNames = require('classnames');
14+
import {ButtonIcon, Icon} from '../SLDSIcons.js';
15+
16+
class ButtonGroup extends React.Component {
17+
constructor(props){
18+
super(props);
19+
this.state = {};
20+
}
21+
render(){
22+
return(
23+
<div className="slds-button-group" role="group">
24+
{this.props.children}
25+
</div>
26+
);
27+
}
28+
}
29+
ButtonGroup.propTypes = {
30+
};
31+
module.exports = ButtonGroup;
32+

0 commit comments

Comments
 (0)