Skip to content

Commit f399ba0

Browse files
interactivellamainteractivellama
committed
Add examples for doc site consumption
1 parent 0d31349 commit f399ba0

File tree

56 files changed

+13776
-0
lines changed

Some content is hidden

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

56 files changed

+13776
-0
lines changed

‎examples/app-launcher-examples-1.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
const SLDSAppLauncherExample = React.createClass({
2+
displayName: 'SLDSAppLauncherExample2',
3+
4+
render () {
5+
const search = <SLDSSearch onChange={function (event) { console.log('Search term:', event.target.value); }} placeholder="Find an app" assistiveText="Find an app" />;
6+
const headerButton = <SLDSButton label="App Exchange" />;
7+
8+
return (
9+
<SLDSGlobalNavigationBar>
10+
<SLDSGlobalNavigationBarRegion
11+
region="primary"
12+
>
13+
<SLDSAppLauncher
14+
triggerName="App Name"
15+
search={search}
16+
modalHeaderButton={headerButton}
17+
>
18+
<SLDSAppLauncherSection title="Tile Section">
19+
<SLDSAppLauncherTile
20+
title="Marketing Cloud"
21+
iconText="MC"
22+
description="Send emails, track emails, read emails! Emails!"
23+
/>
24+
<SLDSAppLauncherTile
25+
title="Call Center"
26+
description="The key to call center and contact center is not to use too many words!"
27+
descriptionHeading="Call Center"
28+
iconText="CC"
29+
/>
30+
</SLDSAppLauncherSection>
31+
<SLDSAppLauncherSection title="Small Tile Section">
32+
<SLDSAppLauncherTile
33+
title="Journey Builder"
34+
iconText="JB"
35+
size="small"
36+
/>
37+
<SLDSAppLauncherTile
38+
title="Sales Cloud"
39+
iconNode={<SLDSIcon name="campaign" category="standard" size="large" />}
40+
size="small"
41+
/>
42+
</SLDSAppLauncherSection>
43+
</SLDSAppLauncher>
44+
</SLDSGlobalNavigationBarRegion>
45+
</SLDSGlobalNavigationBar>
46+
);
47+
}
48+
});
49+
50+
ReactDOM.render(<SLDSAppLauncherExample />, mountNode);

‎examples/bread-crumb-examples-1.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
class BreadCrumbExample extends React.Component {
2+
render () {
3+
const trail = [
4+
(<a href="#">Parent Entity</a>),
5+
(<a href="#">Parent Record Name</a>)
6+
];
7+
8+
return (
9+
<SLDSBreadCrumb trail={trail} />
10+
);
11+
}
12+
}
13+
14+
ReactDOM.render(<BreadCrumbExample />, mountNode);

‎examples/button-examples-1.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div className="slds-x-small-buttons--horizontal">
2+
<SLDSButton
3+
label="Base"
4+
onClick={function(e){console.log("Base Button e.target:", e.target)}}
5+
variant="base" />
6+
7+
<SLDSButton
8+
label="Neutral" />
9+
10+
<SLDSButton
11+
iconName="download"
12+
iconPosition="left"
13+
label="Neutral Icon" />
14+
15+
<SLDSButton
16+
label="Responsive"
17+
responsive={true} />
18+
</div>

‎examples/button-examples-2.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<div className="slds-x-small-buttons--horizontal">
2+
<SLDSButton
3+
label="Brand"
4+
variant="brand"
5+
/>
6+
7+
<SLDSButton
8+
disabled={true}
9+
label="Disabled"
10+
onClick={function(){alert("Disabled Button Clicked")}}
11+
variant="brand"
12+
/>
13+
14+
<SLDSButton
15+
label="Destructive"
16+
variant="destructive"
17+
/>
18+
19+
<div style={{backgroundColor: "#16325c", padding: "10px", display: "inline-block"}} className="slds-m-horizontal--small">
20+
<SLDSButton
21+
inverse
22+
label="Inverse"
23+
variant="base"
24+
/>
25+
</div>
26+
</div>

‎examples/button-examples-3.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<div className="slds-x-small-buttons--horizontal">
2+
<SLDSButton
3+
assistiveText="Icon Bare Small"
4+
iconName="settings"
5+
iconSize="small"
6+
iconVariant="bare"
7+
onClick={function(){alert("Icon Bare Clicked")}} variant="icon" />
8+
9+
<SLDSButton
10+
assistiveText="Icon Container Small"
11+
iconName="settings"
12+
iconSize="small"
13+
iconVariant="container"
14+
variant="icon" />
15+
16+
<div style={{backgroundColor: "#4BC076", padding: "10px", display: "inline-block"}} className="slds-m-horizontal--small">
17+
<SLDSButton
18+
assistiveText="Icon Border medium"
19+
iconName="settings"
20+
iconVariant="border"
21+
variant="icon" />
22+
23+
<SLDSButton
24+
assistiveText="Icon Border-filled medium"
25+
iconName="settings"
26+
iconVariant="border-filled"
27+
variant="icon" />
28+
</div>
29+
30+
<SLDSButton
31+
assistiveText="Icon More large"
32+
iconName="settings"
33+
iconSize="large"
34+
iconVariant="more"
35+
variant="icon" />
36+
37+
<div style={{backgroundColor: "#16325c", padding: "10px", display: "inline-block"}} className="slds-m-horizontal--small">
38+
<SLDSButton
39+
assistiveText="Icon inverse"
40+
iconName="settings"
41+
iconSize="large"
42+
inverse
43+
variant="icon" />
44+
</div>
45+
46+
<div style={{backgroundColor: "#FFB75D", padding: "10px 50px", display: "inline-block"}} className="slds-hint-parent slds-m-horizontal--small">
47+
<SLDSButton
48+
assistiveText="Icon hint large"
49+
hint={true}
50+
iconName="settings"
51+
iconSize="large"
52+
variant="icon" />
53+
</div>
54+
</div>

‎examples/button-group-examples-1.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<SLDSButtonGroup>
2+
<SLDSButton label="Refresh" />
3+
<SLDSButton label="Edit" />
4+
<SLDSButton label="Save" />
5+
<SLDSMenuDropdown
6+
assistiveText="More Options"
7+
buttonVariant="icon"
8+
iconName="down"
9+
iconVariant="border-filled"
10+
onSelect={function (item) { console.log(item.label, 'selected'); }}
11+
openOn="click"
12+
options={[
13+
{ label: 'undo', value: 'A0' },
14+
{ label: 'redo', value: 'B0' },
15+
{ label: 'activate', value: 'C0' }
16+
]}
17+
/>
18+
</SLDSButtonGroup>

‎examples/button-group-examples-2.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<SLDSButtonGroup>
2+
<SLDSButtonStateful
3+
assistiveText="Show Chart"
4+
buttonVariant="icon"
5+
iconName="chart"
6+
iconVariant="border"
7+
variant="icon"
8+
/>
9+
<SLDSButtonStateful
10+
assistiveText="Filter"
11+
iconName="filter"
12+
iconVariant="border"
13+
variant="icon"
14+
/>
15+
<SLDSMenuDropdown
16+
assistiveText="Sort"
17+
checkmark
18+
iconName="sort"
19+
iconVariant="more"
20+
onSelect={function (item) { console.log(item.label, 'selected'); }}
21+
openOn="click"
22+
modal
23+
options={[
24+
{ label: 'Sort ascending', value: 'A0' },
25+
{ label: 'Sort descending', value: 'B0' }
26+
]}
27+
value="A0"
28+
variant="icon"
29+
/>
30+
</SLDSButtonGroup>

‎examples/button-stateful-examples-1.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<SLDSButtonStateful
2+
assistiveText="like"
3+
iconName="like"
4+
iconSize="large"
5+
variant="icon" />

‎examples/button-stateful-examples-2.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div className="slds-x-small-buttons--horizontal">
2+
<SLDSButtonStateful />
3+
4+
<div style={{backgroundColor: "#16325c", padding: "10px", display: "inline-block"}} className="slds-m-horizontal--small">
5+
<SLDSButtonStateful
6+
inverse
7+
stateOne={{iconName: "add", label: "Join"}}
8+
stateTwo={{iconName: "check", label: "Member"}}
9+
stateThree={{iconName: "close", label: "Leave"}}
10+
/>
11+
</div>
12+
</div>

‎examples/card-examples-1.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
const sampleItems = [{
2+
name: 'Cloudhub'}, {
3+
name: 'Cloudhub + Anypoint Connectors'},{
4+
name: 'Cloud City'}];
5+
6+
const CardExample = React.createClass({
7+
displayName: 'CardExample',
8+
9+
getInitialState () {
10+
return {
11+
items: sampleItems,
12+
isFiltering: false
13+
};
14+
},
15+
16+
render () {
17+
const isEmpty = (this.state.items.length === 0);
18+
19+
return (
20+
<div className="slds-grid slds-grid--vertical">
21+
22+
<SLDSCard
23+
id="ExampleCard"
24+
filter={
25+
(!isEmpty || this.state.isFiltering) && <SLDSCardFilter onChange={this.handleFilterChange} />
26+
}
27+
headerActions={
28+
!isEmpty && <SLDSButton label="Delete All Items" onClick={this.handleDeleteAllItems} />
29+
}
30+
heading="Releated Items"
31+
icon={<SLDSIcon category="standard" name="document" size="small" />}
32+
empty={isEmpty ? <SLDSCardEmpty heading="No Related Items">
33+
<SLDSButton label="Add Item" onClick={this.handleAddItem} />
34+
</SLDSCardEmpty> : null}
35+
>
36+
<SLDSDataTable items={this.state.items} id="SLDSDataTableExample-1" bordered>
37+
<SLDSDataTableColumn
38+
label="Opportunity Name"
39+
property="name"
40+
truncate
41+
/>
42+
</SLDSDataTable>
43+
</SLDSCard>
44+
45+
</div>
46+
);
47+
},
48+
49+
handleFilterChange (event) {
50+
const filteredItems = sampleItems.filter( (item) => RegExp(event.target.value, 'i').test(item.name));
51+
this.setState({isFiltering: true, items: filteredItems});
52+
},
53+
54+
handleDeleteAllItems () {
55+
this.setState({isFiltering: false, items: []});
56+
},
57+
58+
handleAddItem () {
59+
this.setState({items: sampleItems});
60+
},
61+
});
62+
63+
ReactDOM.render(<CardExample />, mountNode);

‎examples/custom-renderers/custom-list-item-label.cjsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
React = require('react')
2+
SLDS = require('design-system-react/components')
3+
SLDSPicklistBase = SLDS.SLDSPicklistBase
4+
SLDSIcon = SLDS.SLDSIcon
5+
6+
module.exports = React.createClass(
7+
getDefaultProps: ->
8+
{
9+
index: 0
10+
label: ''
11+
value: null
12+
inverted: false
13+
isSelected: false
14+
isHighlighted: false
15+
data: {}
16+
}
17+
handleMouseOver: (event) ->
18+
console.log 'OVER: ' + @props.label
19+
return
20+
21+
render: ->
22+
23+
<section
24+
onMouseOver={@handleMouseOver}
25+
>
26+
<SLDSIcon name='like' position='left' category='utility' size="x-small" className="slds-icon--selected slds-icon-text-default slds-m-right--x-small" />
27+
{
28+
@props.data.strongLabel
29+
}
30+
</section>
31+
)

‎examples/custom-renderers/custom-lookup-list-item-label.cjsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
React = require('react')
2+
SLDS = require('design-system-react/components')
3+
SLDSPicklistBase = SLDS.SLDSPicklistBase
4+
SLDSIcon = SLDS.SLDSIcon
5+
6+
escapeRegExp = require('lodash.escaperegexp')
7+
8+
module.exports = React.createClass(
9+
10+
getDefaultProps: ->
11+
{
12+
index: 0
13+
label: ''
14+
value: null
15+
inverted: false
16+
isSelected: false
17+
isHighlighted: false
18+
data: {}
19+
}
20+
21+
boldSearchText: (children) ->
22+
regex = @props.boldRegex
23+
if !regex
24+
term = @props.searchTerm
25+
if !children or !term
26+
return children
27+
regex = new RegExp('(' + escapeRegExp(term) + ')', 'gi')
28+
React.Children.map children, (c) ->
29+
if typeof c == 'string' then <span dangerouslySetInnerHTML={{ __html: c.replace(regex, '<mark>$1</mark>')}}></span> else c
30+
31+
render: ->
32+
<section>
33+
<SLDSIcon name='open_folder' category="utility" size="small" className="slds-icon-text-default" />
34+
35+
{ this.boldSearchText(this.props.children.label) }
36+
</section>
37+
)

0 commit comments

Comments
 (0)