Skip to content

Commit 88088e0

Browse files
donniebergdonnieberg
committed
Merge pull request #6 from ux/master
Update gh-pages to master
2 parents 3d793d3 + 33f9b30 commit 88088e0

File tree

122 files changed

+20094
-9091
lines changed

Some content is hidden

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

122 files changed

+20094
-9091
lines changed

‎.eslintrc

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
{
2+
"parser": "babel-eslint",
3+
"env": {
4+
"browser": true,
5+
"node": true,
6+
"es6": true
7+
},
8+
9+
"plugins": ["react"],
10+
11+
"ecmaFeatures": {
12+
"arrowFunctions": true,
13+
"binaryLiterals": true,
14+
"blockBindings": true,
15+
"classes": true,
16+
"defaultParams": true,
17+
"destructuring": true,
18+
"forOf": true,
19+
"generators": true,
20+
"modules": true,
21+
"objectLiteralComputedProperties": true,
22+
"objectLiteralDuplicateProperties": true,
23+
"objectLiteralShorthandMethods": true,
24+
"objectLiteralShorthandProperties": true,
25+
"octalLiterals": true,
26+
"regexUFlag": true,
27+
"regexYFlag": true,
28+
"spread": true,
29+
"superInFunctions": true,
30+
"templateStrings": true,
31+
"unicodeCodePointEscapes": true,
32+
"globalReturn": true,
33+
"jsx": true
34+
},
35+
36+
"rules": {
37+
38+
//
39+
// Errors
40+
//
41+
// These are rules you must adhere to (please)
42+
//
43+
"no-dupe-keys": 2, // disallow duplicate keys when creating object literals
44+
"no-dupe-args": 2, // disallow duplicate arguments in functions
45+
"no-extra-semi": 2, // disallow unnecessary semicolons
46+
"valid-typeof": 2, // Ensure that the results of typeof are compared against a valid string
47+
"no-native-reassign": 2, // disallow reassignments of native objects
48+
49+
50+
//
51+
// Warnings - Stylistic Issues
52+
//
53+
// These rules are for code consistency and following best practices
54+
//
55+
"default-case": 1, // require default case in switch statements (off by default)
56+
"dot-notation": 1, // encourages use of dot notation whenever possible
57+
"eqeqeq": 1, // require the use of === and !==
58+
"indent": [1, 2], // this option sets a specific tab width for your code (off by default)
59+
"brace-style": 1, // enforce one true brace style (off by default)
60+
"camelcase": 1, // require camel case names
61+
"key-spacing": [1, {"beforeColon": false, "afterColon": true}], // enforces spacing between keys and values in object literal properties
62+
63+
64+
//
65+
// Strict Mode
66+
//
67+
// These rules relate to using strict mode.
68+
//
69+
"strict": 0, // controls location of Use Strict Directives. 0: required by `babel-eslint`
70+
71+
72+
73+
//
74+
// Variables
75+
//
76+
// These rules have to do with variable declarations.
77+
//
78+
"no-redeclare": 2, // disallow declaring the same variable more then once
79+
"no-unused-vars": 2, // disallow declaration of variables that are not used in the code
80+
81+
82+
83+
//
84+
// eslint-plugin-react
85+
//
86+
// React specific linting rules for ESLint
87+
//
88+
"react/display-name": 1, // Prevent missing displayName in a React component definition
89+
"react/jsx-no-undef": 2, // Disallow undeclared variables in JSX
90+
"react/no-multi-comp": 1, // Prevent multiple component definition per file
91+
"react/no-unknown-property": 2, // Prevent usage of unknown DOM property
92+
"react/prop-types": 1, // Prevent missing props validation in a React component definition
93+
}
94+
}

‎README.md

Lines changed: 143 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,12 @@ npm test
2222
### Table of Contents
2323
* [Buttons](#buttons)
2424
* [Button Groups](#button-groups)
25+
* [Dropdowns](#dropdowns)
26+
* [Icons](#icons)
2527
* [Lookups](#lookups)
2628
* [Modals](#modals)
29+
* [Notifications](#notifications)
2730
* [Picklists](#picklists)
28-
* [Utility Icons](#utility-icons)
2931

3032

3133
### [Buttons](https://www.lightningdesignsystem.com/components/buttons)
@@ -35,37 +37,46 @@ npm test
3537
import {SLDSButton} from 'design-system-react';
3638

3739
...
38-
3940
1. <SLDSButton label='Neutral' variant='neutral' onClick={this.handleNeutralClick} />
4041
2. <SLDSButton label='Neutral Icon' variant='neutral' iconName='download' iconSize='small' iconPosition='right' onClick={this.handleNeutralClick} />
4142
3. <SLDSButton label='Disabled' variant='neutral' disabled={true} onClick={this.handleDisabledClick} />
4243
4. <SLDSButton label='Brand' variant='brand' onClick={this.handleBrandClick} />
4344
5. <SLDSButton label='Settings' variant='icon' iconName='settings' iconSize='large' onClick={this.handleIconClick} />
4445
6. <SLDSButton label='User' variant='icon' inverse={true} iconName='user' iconSize='large' onClick={this.handleIconClick} />
4546
7. <SLDSButton label='Edit' variant='icon' hint={true} iconName='edit' iconSize='large' onClick={this.handleIconClick} />
47+
8. <SLDSButton label='Follow' variant='neutral' stateful={true} notSelectedIcon='add' notSelectedLabel='Follow' selectedIcon='check' selectedLabel='Following' selectedFocusIcon='close' selectedFocusLabel='Unfollow' onClick={this.handleStatefulClick} />
4648

47-
Required Prop
48-
* Only label is required
49-
50-
Default Props Prop Values
51-
* label='' Required Prop
49+
Default Props Prop Values
5250
* 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
51+
* label=undefined Required Prop. If variant is icon, the label will be invisible but still readable by assistive technology.
52+
* disabled=false
53+
* tabindex=undefined
54+
* inverse=false
55+
* stateful=false
56+
* responsive=false
57+
* iconName=undefined see https://www.lightningdesignsystem.com/resources/icons#utility for names
58+
* className=undefined custom classes on the button tag
59+
60+
** If iconName exists
61+
* iconVariant='bare' ['bare', 'container', 'border', 'border-filled', 'small', 'more']
62+
* iconSize='medium' ['x-small', 'medium', 'small', 'large']
63+
* iconPosition='left' ['left', 'right', 'large']
64+
65+
** If stateful=true
66+
* notSelectedIcon=undefined
67+
* notSelectedLabel=undefined
68+
* selectedIcon=undefined
69+
* selectedLabel=undefined
70+
* selectedFocusIcon=undefined
71+
* selectedFocusLabel=undefined
6372

6473
```
6574

6675
[![browser support](/readme-assets/SLDSButtons.png)](/readme-assets/SLDSButtons.png)
6776

6877

78+
79+
6980
### [Button Groups](https://www.lightningdesignsystem.com/components/button-groups)
7081

7182
```jsx
@@ -86,12 +97,70 @@ import {SLDSButtonGroup} from 'design-system-react';
8697
<SLDSButton label='Filter' variant='icon' iconName='filter' iconVariant='border'/>
8798
<SLDSButton label='Sort' variant='icon' iconName='sort' iconVariant='more'/>
8899
</SLDSButtonGroup>
89-
90100
```
91101

92102
[![browser support](/readme-assets/SLDSButtonGroups.png)](/readme-assets/SLDSButtonGroups.png)
93103

94104

105+
106+
107+
### [Dropdowns](https://design-system-dev.herokuapp.com/components/menus#dropdown)
108+
109+
```jsx
110+
111+
import {SLDSDropdownBase} from 'design-system-react';
112+
113+
...
114+
const options = [
115+
{label:'A Option Option Super Super Long',value:'A0'},
116+
{label:'B Option',value:'B0'},
117+
{label:'C Option',value:'C0'},
118+
{label:'D Option',value:'D0'},
119+
{label:'E Option',value:'E0'},
120+
{label:'A1 Option',value:'A1'},
121+
{label:'B2 Option',value:'B1'},
122+
{label:'C2 Option',value:'C1'},
123+
{label:'D2 Option',value:'D1'},
124+
{label:'E2 Option Super Super Long',value:'E1'},
125+
];
126+
127+
<SLDSDropdownBase
128+
options={options}
129+
value='C0'
130+
label="Contacts"
131+
modal={true}
132+
placeholder="Select a contact"
133+
onSelect={this.handleOnSelect}
134+
onClick={this.handleOnClick}
135+
onUpdateHighlighted={this.handleOnUpdateHighlighted}
136+
/>
137+
138+
```
139+
140+
[![browser support](/readme-assets/SLDSDropdownBase.gif)](/readme-assets/SLDSDropdownBase.gif)
141+
142+
143+
144+
145+
146+
### [Icons](https://www.lightningdesignsystem.com/resources/icons#utility)
147+
148+
```jsx
149+
150+
import {SLDSIcons} from 'design-system-react';
151+
152+
...
153+
154+
<SLDSIcons.Icon name='open_folder' category='utility' className='slds-input__icon slds-icon-text-default' />
155+
156+
```
157+
158+
[![browser support](/readme-assets/SLDSUtilityIcons.png)](/readme-assets/SLDSUtilityIcons.png)
159+
160+
161+
162+
163+
95164
### [Lookups](https://www.lightningdesignsystem.com/components/lookups)
96165
#### *Base, single select only. Other variants coming soon.
97166

@@ -110,13 +179,27 @@ const items = [
110179
{label:'Acme Construction'}
111180
];
112181

113-
<SLDSLookup items={items} label="Accounts" type="account" onNewItem={this.newItem} onSearchRecords={this.searchRecords} />
182+
<SLDSLookup
183+
items={items}
184+
label="Account"
185+
type="account"
186+
iconCategory='standard'
187+
iconName='account'
188+
headerRenderer={SLDSLookup.DefaultHeader}
189+
footerRenderer={SLDSLookup.DefaultFooter}
190+
onChange={this.onChange}
191+
onItemSelect={this.selectItem}
192+
hasError={false}
193+
/>
114194

115195
```
116196

117197
[![browser support](/readme-assets/SLDSLookups.gif)](/readme-assets/SLDSLookups.gif)
118198

119199

200+
201+
202+
120203
### [Modals](https://www.lightningdesignsystem.com/components/modals)
121204

122205
```jsx
@@ -126,24 +209,51 @@ import {SLDSModal} from 'design-system-react';
126209

127210
...
128211

129-
<SLDSButton label='Open Modal' variant='brand' onClick={this.openModal} />
212+
<SLDSButton
213+
label='Open Modal'
214+
variant='brand'
215+
onClick={this.openModal}
216+
/>
130217

131218
<SLDSModal
132219
isOpen={this.state.modalIsOpen}
133220
title={<span>Lightning Design System: Style with Ease</span>}
134221
footer={[
135-
<SLDSButton key='cancelBtn' label='Cancel' variant='neutral' onClick={this.closeModal} />,
136-
<SLDSButton key='saveBtn' label='Save' variant='brand' onClick={this.handleSubmitModal} />
222+
<SLDSButton key='backBtn' label='Back' variant='neutral' onClick={this.closeModal} />,
223+
<SLDSButton key='nextBtn' label='Next' variant='brand' onClick={this.handleSubmitModal} />
137224
]}
138-
onRequestClose={this.closeModal}>
225+
onRequestClose={this.closeModal}
226+
>
139227
{this.getModalContent()}
140228
</SLDSModal>
141229

230+
Default Props Prop Values
231+
* size='medium' ['medium', 'large']
232+
* directional=false [true, false] If true, aligns buttons left and right in Footer
233+
* tagline='' Optional tagline underneath Header title
142234
```
143235

144236
[![browser support](/readme-assets/SLDSModals.gif)](/readme-assets/SLDSModals.gif)
145237

146238

239+
240+
241+
242+
### [Notifications](https://www.lightningdesignsystem.com/components/notifications)
243+
244+
```jsx
245+
246+
import {SLDSNotification} from 'design-system-react';
247+
248+
...
249+
250+
<SLDSNotification variant='alert' theme='success' icon='notification' texture={true} content={successMsg} onDismiss={this.dismissToast} />
251+
<SLDSNotification variant='alert' theme='error' icon='warning' texture={true} content={errorMsg} onDismiss={this.dismissToast} />
252+
<SLDSNotification variant='toast' theme='success' icon='notification' content={successMsg} />
253+
```
254+
255+
[![browser support](/readme-assets/SLDSNotifications.png)](/readme-assets/SLDSNotifications.png)
256+
147257
### [PickLists](http://www.lightningdesignsystem.com/components/picklists#base&role=regular&status=all)
148258
#### *Base only. Other variants coming soon.
149259

@@ -160,26 +270,23 @@ const options = [
160270
{label:'D Option',value:'D0'},
161271
];
162272

163-
<SLDSPicklistBase options={options} label="Contacts" placeholder="Select a contact"/>
273+
<SLDSPicklistBase
274+
options={options}
275+
value='C0'
276+
label="Contacts"
277+
modal={true}
278+
placeholder = "Select a contact"
279+
onSelect={this.handleOnSelect}
280+
onClick={this.handleOnClick}
281+
onUpdateHighlighted={this.handleOnUpdateHighlighted}
282+
/>
164283

165284
```
166285

167286
[![browser support](/readme-assets/SLDSPicklistBase.gif)](/readme-assets/SLDSPicklistBase.gif)
168287

169288

170-
### [Utility Icons](https://www.lightningdesignsystem.com/resources/icons#utility)
171-
172-
```jsx
173289

174-
import {SLDSUtilityIcon} from 'design-system-react';
175-
176-
...
177-
178-
<SLDSUtilityIcon name='adduser' className='slds-input__icon slds-icon-text-default'/>
179-
180-
```
181-
182-
[![browser support](/readme-assets/SLDSUtilityIcons.png)](/readme-assets/SLDSUtilityIcons.png)
183290

184291

185292
## Work in progress
@@ -189,7 +296,4 @@ import {SLDSUtilityIcon} from 'design-system-react';
189296
[![browser support](/readme-assets/SLDSDatePickerBase.gif)](/readme-assets/SLDSDatePickerBase.gif)
190297

191298

192-
### Future Pipeline
193-
* Button - stateful variant
194-
* Lookup - multi-select, multi-scope variants
195299

0 commit comments

Comments
 (0)