Skip to content

Commit f15714b

Browse files
donniebergdonnieberg
committed
Add proper proptypes and such to SLDSButtonGroup
1 parent 12f4f1b commit f15714b

File tree

10 files changed

+195
-63
lines changed

10 files changed

+195
-63
lines changed

‎components/SLDSButton/index.jsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const propTypes = {
3434
const defaultProps = {};
3535

3636

37-
class Button extends React.Component {
37+
class SLDSButton extends React.Component {
3838

3939
constructor(props) {
4040
super(props);
@@ -128,8 +128,8 @@ class Button extends React.Component {
128128
}
129129
}
130130

131-
Button.displayName = displayName;
132-
Button.propTypes = propTypes;
133-
Button.defaultProps = defaultProps;
131+
SLDSButton.displayName = displayName;
132+
SLDSButton.propTypes = propTypes;
133+
SLDSButton.defaultProps = defaultProps;
134134

135-
module.exports = Button;
135+
module.exports = SLDSButton;

‎components/SLDSButtonGroup/index.jsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,30 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
1111

1212
import React from "react";
1313

14-
class ButtonGroup extends React.Component {
14+
const displayName = "SLDSButtonGroup";
15+
const propTypes = {
16+
children: React.PropTypes.element.isRequired
17+
};
18+
const defaultProps = {};
19+
20+
class SLDSButtonGroup extends React.Component {
1521
constructor(props) {
1622
super(props);
1723
this.state = {};
1824
}
25+
1926
render() {
2027
return (
2128
<div className="slds-button-group" role="group">
2229
{this.props.children}
2330
</div>
24-
);
31+
)
2532
}
2633
}
2734

35+
SLDSButtonGroup.displayName = displayName;
36+
SLDSButtonGroup.propTypes = propTypes;
37+
SLDSButtonGroup.defaultProps = defaultProps;
38+
2839
module.exports = ButtonGroup;
2940

‎dist/design-system-react.js

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,10 @@ return /******/ (function(modules) { // webpackBootstrap
119119

120120
var _SLDSNotification2 = _interopRequireDefault(_SLDSNotification);
121121

122+
var _SLDSUtilityIcon = __webpack_require__(36);
123+
124+
var _SLDSUtilityIcon2 = _interopRequireDefault(_SLDSUtilityIcon);
125+
122126
module.exports = {
123127
SLDSPicklistBase: _SLDSPicklistBase2['default'],
124128
SLDSDropdownBase: _SLDSDropdownBase2['default'],
@@ -131,7 +135,8 @@ return /******/ (function(modules) { // webpackBootstrap
131135
SLDSModalTrigger: _SLDSModalTrigger2['default'],
132136
SLDSIcons: _SLDSIcons2['default'],
133137
SLDSNotification: _SLDSNotification2['default'],
134-
SLDSTooltip: _SLDSTooltip2['default']
138+
SLDSTooltip: _SLDSTooltip2['default'],
139+
SLDSUtilityIcon: _SLDSUtilityIcon2['default']
135140
};
136141

137142
/***/ },
@@ -3462,41 +3467,29 @@ return /******/ (function(modules) { // webpackBootstrap
34623467
displayName: 'ButtonIcon',
34633468

34643469
getDefaultProps: function getDefaultProps() {
3465-
34663470
return {
34673471
category: 'utility' };
34683472
},
34693473

34703474
// Utility Icon Reference: https://www.lightningdesignsystem.com/resources/icons#utility
34713475
render: function render() {
3472-
34733476
var className = 'slds-button__icon';
3474-
if (this.props.variant !== 'icon') {
3477+
var label = null;
3478+
3479+
if (this.props.position) {
34753480
//If no position prop given, default to left
3476-
this.props.position ? className += ' slds-button__icon--' + this.props.position : className += ' slds-button__icon--left';
3481+
className += ' slds-button__icon--' + this.props.position;
34773482
}
34783483
if (this.props.size) {
34793484
className += ' slds-button__icon--' + this.props.size;
34803485
}
3481-
if (this.props.inverse) {
3482-
className += ' slds-button__icon--inverse';
3483-
}
3484-
if (this.props.stateful) {
3485-
className += ' slds-button__icon--stateful';
3486-
}
3487-
if (this.props.hint) {
3488-
className += ' slds-button__icon--hint';
3489-
}
34903486
if (this.props.destructive) {
34913487
className += ' slds-button__icon--destructive';
34923488
}
3493-
/*
3494-
if(this.props.category === 'utility'){
3495-
return <SLDSUtilityIcon name={this.props.name} aria-hidden='true' className={className} />;
3496-
}
3497-
return <svg aria-hidden='true' className={className} dangerouslySetInnerHTML={{__html: useTag }} />;
3498-
*/
3499-
return _react2['default'].createElement(_SLDSUtilityIcon2['default'], { name: this.props.name, category: this.props.category, 'aria-hidden': 'true', className: className });
3489+
if (this.props.assistiveText) {
3490+
label = _react2['default'].createElement('span', { className: 'slds-assistive-text' }, this.props.assistiveText);
3491+
}
3492+
return _react2['default'].createElement('span', null, label, _react2['default'].createElement(_SLDSUtilityIcon2['default'], { name: this.props.name, category: this.props.category, 'aria-hidden': 'true', className: className }));
35003493
}
35013494

35023495
});
@@ -3520,9 +3513,6 @@ return /******/ (function(modules) { // webpackBootstrap
35203513
var label = null;
35213514

35223515
var className = 'slds-icon';
3523-
if (this.props.stateful) {
3524-
className += '--stateful';
3525-
}
35263516
if (this.props.className) {
35273517
className += ' ' + this.props.className;
35283518
}
@@ -11288,7 +11278,7 @@ return /******/ (function(modules) { // webpackBootstrap
1128811278
}
1128911279
return _react2["default"].createElement(_SLDSButton2["default"], {
1129011280
label: "Dismiss Notification",
11291-
variant: "icon",
11281+
variant: "icon-inverse",
1129211282
iconName: "close",
1129311283
iconSize: size,
1129411284
inverse: true,

‎dist/design-system-react.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/design-system-react.min.js

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/design-system-react.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/SLDSButton/SLDSButtonStateful/index.js

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
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+
"use strict";
13+
14+
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
15+
16+
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
17+
18+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
19+
20+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
21+
22+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
23+
24+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
25+
26+
var _react = require("react");
27+
28+
var _react2 = _interopRequireDefault(_react);
29+
30+
var _SLDSIcons = require('../../SLDSIcons');
31+
32+
var classNames = require("classnames");
33+
34+
var displayName = "SLDSButtonStateful";
35+
var propTypes = {};
36+
var defaultProps = {};
37+
38+
var SLDSButtonStateful = (function (_React$Component) {
39+
_inherits(SLDSButtonStateful, _React$Component);
40+
41+
function SLDSButtonStateful(props) {
42+
_classCallCheck(this, SLDSButtonStateful);
43+
44+
_get(Object.getPrototypeOf(SLDSButtonStateful.prototype), "constructor", this).call(this, props);
45+
this.state = { active: false };
46+
}
47+
48+
_createClass(SLDSButtonStateful, [{
49+
key: "handleClick",
50+
value: function handleClick() {
51+
this.setState({ active: !this.state.active });
52+
}
53+
}, {
54+
key: "getClassName",
55+
value: function getClassName() {
56+
var _classNames;
57+
58+
return classNames(this.props.className, "slds-button", (_classNames = {}, _defineProperty(_classNames, "slds-button--neutral", this.props.type !== "icon"), _defineProperty(_classNames, "slds-button--inverse", this.props.variant === "inverse"), _defineProperty(_classNames, "slds-not-selected", !this.state.active), _defineProperty(_classNames, "slds-is-selected", this.state.active), _defineProperty(_classNames, "slds-button--icon-border", this.props.type === "icon"), _classNames));
59+
}
60+
}, {
61+
key: "render",
62+
value: function render() {
63+
if (this.props.type === "follow") {
64+
return _react2["default"].createElement(
65+
"button",
66+
{ className: this.getClassName(), "aria-live": "assertive", onClick: this.handleClick.bind(this) },
67+
_react2["default"].createElement(
68+
"span",
69+
{ className: "slds-text-not-selected" },
70+
_react2["default"].createElement(_SLDSIcons.ButtonIcon, { disabled: this.props.disabled, name: "add", size: "small", position: "left", className: "slds-button__icon--stateful" }),
71+
"Follow"
72+
),
73+
_react2["default"].createElement(
74+
"span",
75+
{ className: "slds-text-selected" },
76+
_react2["default"].createElement(_SLDSIcons.ButtonIcon, { disabled: this.props.disabled, name: "check", size: "small", position: "left", className: "slds-button__icon--stateful" }),
77+
"Following"
78+
),
79+
_react2["default"].createElement(
80+
"span",
81+
{ className: "slds-text-selected-focus" },
82+
_react2["default"].createElement(_SLDSIcons.ButtonIcon, { disabled: this.props.disabled, name: "close", size: "small", position: "left", className: "slds-button__icon--stateful" }),
83+
"Unfollow"
84+
)
85+
);
86+
} else if (this.props.type === "join") {
87+
return _react2["default"].createElement(
88+
"button",
89+
{ className: this.getClassName(), "aria-live": "assertive", onClick: this.handleClick.bind(this) },
90+
_react2["default"].createElement(
91+
"span",
92+
{ className: "slds-text-not-selected" },
93+
_react2["default"].createElement(_SLDSIcons.ButtonIcon, { disabled: this.props.disabled, name: "add", size: "small", position: "left", className: "slds-button__icon--stateful" }),
94+
"Join"
95+
),
96+
_react2["default"].createElement(
97+
"span",
98+
{ className: "slds-text-selected" },
99+
_react2["default"].createElement(_SLDSIcons.ButtonIcon, { disabled: this.props.disabled, name: "check", size: "small", position: "left", className: "slds-button__icon--stateful" }),
100+
"Member"
101+
),
102+
_react2["default"].createElement(
103+
"span",
104+
{ className: "slds-text-selected-focus" },
105+
_react2["default"].createElement(_SLDSIcons.ButtonIcon, { disabled: this.props.disabled, name: "close", size: "small", position: "left", className: "slds-button__icon--stateful" }),
106+
"Leave"
107+
)
108+
);
109+
} else if (this.props.type === "icon") {
110+
return _react2["default"].createElement(
111+
"button",
112+
{ className: this.getClassName(), onClick: this.handleClick.bind(this) },
113+
_react2["default"].createElement(_SLDSIcons.ButtonIcon, { disabled: this.props.disabled, name: this.props.iconName, size: this.props.iconSize, assistiveText: this.props.assistiveText, className: "slds-button__icon--stateful" })
114+
);
115+
} else {
116+
return _react2["default"].createElement(
117+
"div",
118+
{ className: "" },
119+
"SLDS Stateful Button needs proper type prop: follow, join, or icon."
120+
);
121+
}
122+
}
123+
}]);
124+
125+
return SLDSButtonStateful;
126+
})(_react2["default"].Component);
127+
128+
SLDSButtonStateful.displayName = displayName;
129+
SLDSButtonStateful.propTypes = propTypes;
130+
SLDSButtonStateful.defaultProps = defaultProps;
131+
132+
module.exports = SLDSButtonStateful;

‎lib/SLDSIcons.js

Lines changed: 17 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -30,41 +30,38 @@ var ButtonIcon = _react2['default'].createClass({
3030
displayName: 'ButtonIcon',
3131

3232
getDefaultProps: function getDefaultProps() {
33-
3433
return {
3534
category: 'utility' };
3635
},
3736

3837
// Utility Icon Reference: https://www.lightningdesignsystem.com/resources/icons#utility
3938
render: function render() {
40-
4139
var className = 'slds-button__icon';
42-
if (this.props.variant !== 'icon') {
40+
var label = null;
41+
42+
if (this.props.position) {
4343
//If no position prop given, default to left
44-
this.props.position ? className += ' slds-button__icon--' + this.props.position : className += ' slds-button__icon--left';
44+
className += ' slds-button__icon--' + this.props.position;
4545
}
4646
if (this.props.size) {
4747
className += ' slds-button__icon--' + this.props.size;
4848
}
49-
if (this.props.inverse) {
50-
className += ' slds-button__icon--inverse';
51-
}
52-
if (this.props.stateful) {
53-
className += ' slds-button__icon--stateful';
54-
}
55-
if (this.props.hint) {
56-
className += ' slds-button__icon--hint';
57-
}
5849
if (this.props.destructive) {
5950
className += ' slds-button__icon--destructive';
6051
}
61-
/*
62-
if(this.props.category === 'utility'){
63-
return <SLDSUtilityIcon name={this.props.name} aria-hidden='true' className={className} />;
64-
}
65-
return <svg aria-hidden='true' className={className} dangerouslySetInnerHTML={{__html: useTag }} />;
66-
*/
67-
return _react2['default'].createElement(_SLDSUtilityIcon2['default'], { name: this.props.name, category: this.props.category, 'aria-hidden': 'true', className: className });
52+
if (this.props.assistiveText) {
53+
label = _react2['default'].createElement(
54+
'span',
55+
{ className: 'slds-assistive-text' },
56+
this.props.assistiveText
57+
);
58+
}
59+
return _react2['default'].createElement(
60+
'span',
61+
null,
62+
label,
63+
_react2['default'].createElement(_SLDSUtilityIcon2['default'], { name: this.props.name, category: this.props.category, 'aria-hidden': 'true', className: className })
64+
);
6865
}
6966

7067
});
@@ -88,9 +85,6 @@ var Icon = _react2['default'].createClass({
8885
var label = null;
8986

9087
var className = 'slds-icon';
91-
if (this.props.stateful) {
92-
className += '--stateful';
93-
}
9488
if (this.props.className) {
9589
className += ' ' + this.props.className;
9690
}

‎lib/SLDSNotification/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ var SLDSNotification = (function (_React$Component) {
7171
}
7272
return _react2["default"].createElement(_SLDSButton2["default"], {
7373
label: "Dismiss Notification",
74-
variant: "icon",
74+
variant: "icon-inverse",
7575
iconName: "close",
7676
iconSize: size,
7777
inverse: true,

‎lib/index.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,10 @@ var _SLDSNotification = require('./SLDSNotification');
6161

6262
var _SLDSNotification2 = _interopRequireDefault(_SLDSNotification);
6363

64+
var _SLDSUtilityIcon = require('./SLDSUtilityIcon');
65+
66+
var _SLDSUtilityIcon2 = _interopRequireDefault(_SLDSUtilityIcon);
67+
6468
module.exports = {
6569
SLDSPicklistBase: _SLDSPicklistBase2['default'],
6670
SLDSDropdownBase: _SLDSDropdownBase2['default'],
@@ -73,5 +77,6 @@ module.exports = {
7377
SLDSModalTrigger: _SLDSModalTrigger2['default'],
7478
SLDSIcons: _SLDSIcons2['default'],
7579
SLDSNotification: _SLDSNotification2['default'],
76-
SLDSTooltip: _SLDSTooltip2['default']
80+
SLDSTooltip: _SLDSTooltip2['default'],
81+
SLDSUtilityIcon: _SLDSUtilityIcon2['default']
7782
};

0 commit comments

Comments
 (0)