Merge pull request #60 from salesforce-ux/documentation

Documentation

Author: ivansfdc

.eslintrc

@@ -0,0 +1,94 @@
+{
+  "parser": "babel-eslint",
+    "env": {
+      "browser": true,
+      "node": true,
+      "es6": true
+    },
+
+    "plugins": ["react"],
+
+    "ecmaFeatures": {
+      "arrowFunctions": true,
+      "binaryLiterals": true,
+      "blockBindings": true,
+      "classes": true,
+      "defaultParams": true,
+      "destructuring": true,
+      "forOf": true,
+      "generators": true,
+      "modules": true,
+      "objectLiteralComputedProperties": true,
+      "objectLiteralDuplicateProperties": true,
+      "objectLiteralShorthandMethods": true,
+      "objectLiteralShorthandProperties": true,
+      "octalLiterals": true,
+      "regexUFlag": true,
+      "regexYFlag": true,
+      "spread": true,
+      "superInFunctions": true,
+      "templateStrings": true,
+      "unicodeCodePointEscapes": true,
+      "globalReturn": true,
+      "jsx": true
+    },
+
+    "rules": {
+
+      //
+      // Errors
+      //
+      // These are rules you must adhere to (please)
+      //
+      "no-dupe-keys": 2, // disallow duplicate keys when creating object literals
+      "no-dupe-args": 2, // disallow duplicate arguments in functions
+      "no-extra-semi": 2, // disallow unnecessary semicolons
+      "valid-typeof": 2, // Ensure that the results of typeof are compared against a valid string
+      "no-native-reassign": 2, // disallow reassignments of native objects
+
+
+      //
+      // Warnings - Stylistic Issues
+      //
+      // These rules are for code consistency and following best practices
+      //
+      "default-case": 1, // require default case in switch statements (off by default)
+      "dot-notation": 1, // encourages use of dot notation whenever possible
+      "eqeqeq": 1, // require the use of === and !==
+      "indent": [1, 2], // this option sets a specific tab width for your code (off by default)
+      "brace-style": 1, // enforce one true brace style (off by default)
+      "camelcase": 1, // require camel case names
+      "key-spacing": [1, {"beforeColon": false, "afterColon": true}], // enforces spacing between keys and values in object literal properties
+
+
+      //
+      // Strict Mode
+      //
+      // These rules relate to using strict mode.
+      //
+      "strict": 0, // controls location of Use Strict Directives. 0: required by `babel-eslint`
+
+
+
+      //
+      // Variables
+      //
+      // These rules have to do with variable declarations.
+      //
+      "no-redeclare": 2, // disallow declaring the same variable more then once
+      "no-unused-vars": 2, // disallow declaration of variables that are not used in the code
+
+
+
+      //
+      // eslint-plugin-react
+      //
+      // React specific linting rules for ESLint
+      //
+      "react/display-name": 1, // Prevent missing displayName in a React component definition
+      "react/jsx-no-undef": 2, // Disallow undeclared variables in JSX
+      "react/no-multi-comp": 1, // Prevent multiple component definition per file
+      "react/no-unknown-property": 2, // Prevent usage of unknown DOM property
+      "react/prop-types": 1, // Prevent missing props validation in a React component definition
+    }
+}

components/SLDSButton/index.js

@@ -9,45 +9,45 @@ Neither the name of salesforce.com, inc. nor the names of its contributors may b
 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.
 */
 
-import React from 'react';
-const classNames = require('classnames');
-import createChainedFunction from '../utils/create-chained-function';
-import {ButtonIcon, Icon} from '../SLDSIcons.js';
-import omit from 'lodash.omit';
+import React from "react";
+const classNames = require("classnames");
+import createChainedFunction from "../utils/create-chained-function";
+import {ButtonIcon} from "../SLDSIcons.js";
+import omit from "lodash.omit";
 
 class Button extends React.Component {
 
   constructor(props) {
     super(props);
-    this.displayName = 'SLDSButton';
+    this.displayName = "SLDSButton";
     this.state = { active: false };
-  };
+  }
 
   componentWillMount(){
     /*===============================
-    TODO: refactor so that React doesn't throw warnings in console
+    TODO: refactor so that React doesn"t throw warnings in console
     for (var key in this.props) {
-      if(this.props.hasOwnProperty(key) && typeof(this.props[key]) === 'string' && key !== 'label'){
+      if(this.props.hasOwnProperty(key) && typeof(this.props[key]) === "string" && key !== "label"){
         this.props[key] = this.props[key].toLowerCase();
       }
     }
     ===============================*/
   }
 
-  onClick(e) {
+  onClick() {
     this.setState({ active: !this.state.active });
   }
 
   getClassName() {
     let isSelected = this.props.stateful && this.state.active ? true : false;
     let notSelected = this.props.stateful && !this.state.active ? true : false;
-    return classNames(this.props.className, 'slds-button', {
+    return classNames(this.props.className, "slds-button", {
       [`slds-button--${this.props.variant}`]: this.props.variant,
       [`slds-button--icon-${this.props.iconVariant}`]: this.props.iconVariant,
-      ['slds-max-small-button--stretch']: this.props.responsive,
-      ['slds-not-selected']: notSelected,
-      ['slds-is-selected']: isSelected,
-      ['slds-button--icon-inverse']: this.props.inverse,
+      ["slds-max-small-button--stretch"]: this.props.responsive,
+      ["slds-not-selected"]: notSelected,
+      ["slds-is-selected"]: isSelected,
+      ["slds-button--icon-inverse"]: this.props.inverse,
     });
   }
 
@@ -69,25 +69,25 @@ class Button extends React.Component {
   }
 
   renderIconMore(){
-    if(this.props.iconVariant === 'more'){
+    if(this.props.iconVariant === "more"){
       return(
         <ButtonIcon
           variant={this.props.variant}
           disabled={this.props.disabled}
           inverse={this.props.inverse}
-          name='down'
-          size='x-small'
+          name="down"
+          size="x-small"
           />
       );
     }
   }
 
 
   render() {
-    const props = omit(this.props,'className');
+    const props = omit(this.props, "className");
     const click = createChainedFunction(this.props.onClick, this.onClick.bind(this));
-    const labelClasses = this.props.variant === 'icon' ? 'slds-assistive-text': '';
-    if (this.props.disabled) { props['disabled'] = 'disabled' };
+    const labelClasses = this.props.variant === "icon" ? "slds-assistive-text": "";
+    if (this.props.disabled) { props["disabled"] = "disabled" };
 
     if(this.props.stateful){
       return (
@@ -109,10 +109,10 @@ class Button extends React.Component {
     }else{
       return (
         <button tabIndex={this.props.tabindex} className={this.getClassName()} {...props} onClick={click}>
-          {this.props.iconPosition === 'right' ? <span className={labelClasses}>{this.props.label}</span>: null}
+          {this.props.iconPosition === "right" ? <span className={labelClasses}>{this.props.label}</span>: null}
           {this.renderIcon(this.props.iconName)}
           {this.renderIconMore()}
-          {(this.props.iconPosition === 'left' || !this.props.iconPosition) ? <span className={labelClasses}>{this.props.label}</span>: null}
+          {(this.props.iconPosition === "left" || !this.props.iconPosition) ? <span className={labelClasses}>{this.props.label}</span>: null}
           {this.props.children}
         </button>
       );
@@ -122,17 +122,17 @@ class Button extends React.Component {
 
 Button.propTypes = {
   label: React.PropTypes.string.isRequired,
-  variant: React.PropTypes.oneOf(['base', 'neutral', 'brand', 'destructive', 'icon']),
+  variant: React.PropTypes.oneOf(["base", "neutral", "brand", "destructive", "icon"]),
   tabindex: React.PropTypes.string,
   disabled: React.PropTypes.bool,
   inverse: React.PropTypes.bool,
   hint: React.PropTypes.bool,
   stateful: React.PropTypes.bool,
   responsive: React.PropTypes.bool,
   iconName: React.PropTypes.string,
-  iconVariant: React.PropTypes.oneOf(['bare', 'container', 'border', 'border-filled', 'small', 'more']),
-  iconSize: React.PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
-  iconPosition: React.PropTypes.oneOf(['left', 'right']),
+  iconVariant: React.PropTypes.oneOf(["bare", "container", "border", "border-filled", "small", "more"]),
+  iconSize: React.PropTypes.oneOf(["x-small", "small", "medium", "large"]),
+  iconPosition: React.PropTypes.oneOf(["left", "right"]),
   onClick: React.PropTypes.func,
 }
 

components/SLDSButtonGroup/index.js

@@ -9,9 +9,7 @@ Neither the name of salesforce.com, inc. nor the names of its contributors may b
 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.
 */
 
-import React from 'react';
-const classNames = require('classnames');
-import {ButtonIcon, Icon} from '../SLDSIcons.js';
+import React from "react";
 
 class ButtonGroup extends React.Component {
   constructor(props) {
@@ -26,7 +24,6 @@ class ButtonGroup extends React.Component {
     );
   }
 }
-ButtonGroup.propTypes = {
-};
+
 module.exports = ButtonGroup;