Skip to content

Commit da54877

Browse files
interactivellamainteractivellama
authored
Merge pull request #785 from interactivellama/subcomponents
Add subcomponents to package.json
2 parents a8573c5 + fb8dcbc commit da54877

File tree

61 files changed

+13920
-59
lines changed

Some content is hidden

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

61 files changed

+13920
-59
lines changed

‎components/app-launcher/index.jsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,6 @@ import checkProps from './check-props';
2929

3030
// ## Children
3131
import Modal from '../modal';
32-
// DO NOT REMOVE UNTIL THIS IS RESOLVED https://github.com/salesforce-ux/design-system-react-site/issues/56
33-
import AppLauncherSection from './section'; // eslint-disable-line no-unused-vars
34-
import AppLauncherTile from './tile'; // eslint-disable-line no-unused-vars
35-
// //////////////////////////////////////////////////////////////////////////////////
3632

3733
// ## Constants
3834
import { APP_LAUNCHER } from '../../utilities/constants';

‎components/global-navigation-bar/region.jsx

Lines changed: 46 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -70,52 +70,53 @@ const renderTertiary = (dividerClass, className, children) =>
7070
/**
7171
* Regions make up a GlobalNavigation Bar and typically contain links and dropdowns. The Primary region contains the AppSwitcher, Application Name, and Object Switcher. The secondary region typically has navigation betweens sections of the application. The tertiary region is aligned to the right side of the screen and contains shortcuts or actions.
7272
*/
73-
const Region = (props) => {
74-
let region;
75-
const dividerClass = props.dividerPosition ? `slds-context-bar__item--divider-${props.dividerPosition}` : null;
76-
77-
switch (props.region) {
78-
case 'primary':
79-
region = renderPrimary(dividerClass, props.className, props.children);
80-
break;
81-
case 'secondary':
82-
region = renderSecondary(dividerClass, props.className, props.children, props.navigation);
83-
break;
84-
case 'tertiary':
85-
region = renderTertiary(dividerClass, props.className, props.children);
86-
break;
87-
default:
88-
// do nothing
73+
const Region = React.createClass({
74+
displayName: GLOBAL_NAVIGATION_BAR_REGION,
75+
76+
propTypes: {
77+
/**
78+
* Contents of region. Expects `GlobalNavigationBarLink`, `GlobalNavigationBarDropdown`, `GlobalNavigationBarApplicationName`, `AppSwitcher`, but could be any component. This is the place to pass in an Object Switcher until that is supported.
79+
*/
80+
children: PropTypes.node,
81+
/**
82+
* Determines position of separating bar.
83+
*/
84+
dividerPosition: PropTypes.oneOf(['left', 'right']),
85+
/**
86+
* CSS classes to be added to the region
87+
*/
88+
className: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
89+
/**
90+
* Wraps the `secondary` region in a `nav` and adds a role attribute
91+
*/
92+
navigation: PropTypes.bool,
93+
/**
94+
* Region wrap children in styling specific to that region.
95+
*/
96+
region: PropTypes.oneOf(['primary', 'secondary', 'tertiary']).isRequired
97+
},
98+
99+
render () {
100+
let region;
101+
const dividerClass = this.props.dividerPosition ? `slds-context-bar__item--divider-${this.props.dividerPosition}` : null;
102+
103+
switch (this.props.region) {
104+
case 'primary':
105+
region = renderPrimary(dividerClass, this.props.className, this.props.children);
106+
break;
107+
case 'secondary':
108+
region = renderSecondary(dividerClass, this.props.className, this.props.children, this.props.navigation);
109+
break;
110+
case 'tertiary':
111+
region = renderTertiary(dividerClass, this.props.className, this.props.children);
112+
break;
113+
default:
114+
// do nothing
115+
}
116+
117+
return region;
89118
}
90-
91-
return region;
92-
};
93-
94-
Region.displayName = GLOBAL_NAVIGATION_BAR_REGION;
95-
96-
Region.propTypes = {
97-
/**
98-
* Contents of region. Expects `GlobalNavigationBarLink`, `GlobalNavigationBarDropdown`, `GlobalNavigationBarApplicationName`, `AppSwitcher`, but could be any component. This is the place to pass in an Object Switcher until that is supported.
99-
*/
100-
children: PropTypes.node,
101-
/**
102-
* Determines position of separating bar.
103-
*/
104-
dividerPosition: PropTypes.oneOf(['left', 'right']),
105-
/**
106-
* CSS classes to be added to the region
107-
*/
108-
className: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
109-
/**
110-
* Wraps the `secondary` region in a `nav` and adds a role attribute
111-
*/
112-
navigation: PropTypes.bool,
113-
/**
114-
* Region wrap children in styling specific to that region.
115-
*/
116-
region: PropTypes.oneOf(['primary', 'secondary', 'tertiary']).isRequired
117-
};
118-
119+
});
119120

120121
module.exports = Region;
121122
module.exports.regions = regions;

‎components/icon/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import SLDSUtilityIcon from '../utilities/utility-icon';
3030
import { ICON } from '../../utilities/constants';
3131

3232
/**
33-
* The Icon component is the Lightning Design System Icon component and should be used for naked icons. For icons that are buttons, use the <a href='#/button'>SLDSButton component</a> component with <code>variant='icon'</code>.
33+
* The Icon component is the Lightning Design System Icon component and should be used for naked icons. For icons that are buttons, use the <a href='/components/buttons/'>Button component</a> component with <code>variant='icon'</code>.
3434
*/
3535
const Icon = React.createClass({
3636
// ### Display Name

‎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>

0 commit comments

Comments
 (0)