Use default classes

package.json

@@ -35,10 +35,10 @@
   },
   "homepage": "https://github.com/Bandwidth/shared-components#readme",
   "peerDependencies": {
-    "prop-types": "15.5.8",
-    "react": "16.0.0",
-    "react-dom": "16.0.0",
-    "styled-components": "4.0.2"
+    "prop-types": "^15.5.8",
+    "react": "^16.8.0",
+    "react-dom": "^16.0.0",
+    "styled-components": "^4.0.2"
   },
   "dependencies": {
     "animation-timer": "1.0.12",

src/components/Accordion/Accordion.js

@@ -93,7 +93,7 @@ class Accordion extends React.Component {
     startExpanded: false,
     isCollapsed: null,
     onToggle: null,
-    className: null,
+    className: "scl-accordion",
     id: null,
     disabled: false,
     unmountClosed: false,
@@ -145,7 +145,7 @@ class Accordion extends React.Component {
     } = this.props;
 
     return (
-      <Border disabled={disabled} {...rest}>
+      <Border className="scl-accordion-border" disabled={disabled} {...rest}>
         <ExpandToggle
           id={id}
           className={className}

src/components/Alert/Alert.js

@@ -67,7 +67,7 @@ export default class Alert extends React.PureComponent {
   static defaultProps = {
     type: 'info',
     textOnly: false,
-    className: null,
+    className: "scl-alert",
     id: null,
     spacing: '0',
     Border: styles.Border,

src/components/Badge/Badge.js

@@ -27,7 +27,7 @@ Badge.propTypes = {
 };
 
 Badge.defaultProps = {
-  className: null,
+  className: "scl-badge",
   id: null,
 };
 

src/components/Breadcrumb/Breadcrumb.js

@@ -8,6 +8,7 @@ const Breadcrumb = styled.div`
 
 Breadcrumb.defaultProps = {
   spacing: { bottom: 'md', top: 'md' },
+  className: "scl-breadcrumb"
 };
 
 /**

src/components/Breadcrumb/BreadcrumbGroup.js

@@ -24,6 +24,10 @@ const Breadcrumbs = styled.div`
   }
 `;
 
+Breadcrumbs.defaultProps = {
+  className: "scl-breadcrumb-group"
+}
+
 Breadcrumbs.propTypes = {
   children: props => {
     if (!props.children) return;
@@ -35,7 +39,7 @@ Breadcrumbs.propTypes = {
       const childName = child.type.displayName || child.type.name || child.type;
       return new Error(dedent`Invalid child component for Breadcrumbs: ${childName}.  Only ${
         Breadcrumb.displayName
-      } \
+        } \
         components may be nested within Breadcrumbs.`);
     }
   },

src/components/Button/Button.js

@@ -122,7 +122,7 @@ Button.defaultProps = {
   leftIcon: null,
   rightIcon: null,
   iconHelper: icons,
-  className: null,
+  className: "scl-button",
   id: null,
 };
 

src/components/Button/SubmitButton.js

@@ -60,7 +60,7 @@ class SubmitButton extends React.Component {
     leftIcon: null,
     pristineContents: 'Up to Date',
     id: null,
-    className: null,
+    className: "scl-button-submit",
     onClick: () => null,
   };
 

src/components/Card/Card.js

@@ -15,6 +15,7 @@ class Card extends React.Component {
 
   static defaultProps = {
     CardWrapper: styles.Wrapper,
+    className: "scl-card"
   };
 
   static styles = styles;

src/components/Checkbox/Checkbox.js

@@ -58,7 +58,7 @@ export default class Checkbox extends React.PureComponent {
   };
 
   static defaultProps = {
-    className: null,
+    className: "scl-checkbox",
     id: null,
     value: undefined,
     checked: undefined,

src/components/DatePicker/DatePicker.js

@@ -44,6 +44,7 @@ class DatePicker extends React.PureComponent {
   };
 
   static defaultProps = {
+    className: "scl-date-picker",
     Wrapper: styles.Wrapper,
     displayFormat: 'MMM DD YYYY',
     invalid: false,

src/components/DatePicker/DateRangePicker.js

@@ -51,6 +51,7 @@ class DateRangePicker extends React.PureComponent {
   };
 
   static defaultProps = {
+    className: "scl-date-range-picker",
     Wrapper: styles.RangeWrapper,
     LineSeparator: styles.LineSeparator,
     invalid: false,

src/components/DateTimePicker/DateTimePicker.js

@@ -45,6 +45,7 @@ class DateTimePicker extends React.PureComponent {
   };
 
   static defaultProps = {
+    className: "scl-date-time-picker",
     onChange: noop,
     displayFormat: 'MMM DD YYYY [at] hh:mm A',
     utc: false,

src/components/DateTimePicker/DateTimeRangePicker.js

@@ -60,6 +60,7 @@ class DateTimeRangePicker extends React.PureComponent {
   };
 
   static defaultProps = {
+    className: "scl-date-time-range-picker",
     onChange: noop,
     displayFormat: 'MMM DD YYYY [at] hh:mm A',
     timeDisplayFormat: 'hh:mm',

src/components/DragList/DragList.js

@@ -22,6 +22,7 @@ class DragList extends React.PureComponent {
   static Container = DragContainer;
 
   static propTypes = {
+    className: "scl-drag-list",
     children: PropTypes.node.isRequired,
   };
 

src/components/DragList/DragListItem.js

@@ -38,6 +38,10 @@ class DragListItem extends React.PureComponent {
     onMove: PropTypes.func.isRequired,
   };
 
+  static defaultProps = {
+    className: "scl-drag-list-item"
+  }
+
   componentDidMount() {
     // Use empty image as a drag preview so browsers don't draw it
     // and we can draw whatever we want on the custom drag layer instead.

src/components/FileLoader/FileLoader.js

@@ -40,7 +40,7 @@ export default class FileLoader extends React.Component {
   static defaultProps = {
     required: false,
     disabled: false,
-    className: null,
+    className: "scl-file-loader",
     id: null,
     DropArea: styles.DropArea,
     Preview: styles.Preview,

src/components/Gutter/Gutter.js

@@ -19,7 +19,7 @@ Gutter.propTypes = {
 };
 
 Gutter.defaultProps = {
-  className: null,
+  className: "scl-gutter",
   id: null,
 };
 

src/components/H/H1.js

@@ -38,7 +38,7 @@ H1.propTypes = {
 
 H1.defaultProps = {
   spacing: { bottom: 'lg' },
-  className: null,
+  className: "scl-header-1",
   id: null,
 };
 

src/components/H/H2.js

@@ -32,7 +32,7 @@ H2.propTypes = {
 
 H2.defaultProps = {
   spacing: { bottom: 'lg' },
-  className: null,
+  className: "scl-header-2",
   id: null,
 };
 

src/components/H/H3.js

@@ -36,7 +36,7 @@ H3.propTypes = {
 
 H3.defaultProps = {
   spacing: { bottom: 'lg' },
-  className: null,
+  className: "scl-header-3",
   id: null,
 };
 

src/components/H/H4.js

@@ -34,7 +34,7 @@ H4.propTypes = {
 
 H4.defaultProps = {
   spacing: { bottom: 'lg' },
-  className: null,
+  className: "scl-header-4",
   id: null,
 };
 

src/components/H/H5.js

@@ -32,7 +32,7 @@ H5.propTypes = {
 
 H5.defaultProps = {
   spacing: { bottom: 'lg' },
-  className: null,
+  className: "scl-header-5",
   id: null,
 };
 H5.Skeleton = () => <Skeleton width="200px" height="1.15em" />;

src/components/HeaderBar/HeaderBar.js

@@ -10,6 +10,10 @@ const HeaderBar = styled.div.withConfig({ displayName: 'HeaderBar' })`
   padding-left: ${themeGet('spacing.medium')};
 `;
 
+HeaderBar.defaultProps = {
+  className: "scl-header-bar"
+}
+
 /**
  * @component
  */

src/components/HelpText/HelpText.js

@@ -34,7 +34,7 @@ HelpText.propTypes = {
 };
 
 HelpText.defaultProps = {
-  className: null,
+  className: "scl-helptext",
   id: null,
 };
 

src/components/Icon/Icon.js

@@ -13,7 +13,7 @@ const Icon = styled.i.withConfig({ displayName: 'Icon' })`
   cursor: ${({ onClick }) => (onClick ? 'pointer' : 'inherit')};
   &::before {
     content: "${({ name, iconsHelper }) =>
-      iconsHelper(name) || iconsHelper('help_2')}";
+    iconsHelper(name) || iconsHelper('help_2')}";
     display: block;
     color: inherit;
   }
@@ -43,7 +43,7 @@ Icon.propTypes = {
 };
 
 Icon.defaultProps = {
-  className: null,
+  className: "scl-icon",
   id: null,
   iconsHelper: icons,
   color: null,

src/components/Input/Input.js

@@ -149,7 +149,7 @@ class Input extends React.PureComponent {
     onBlur: () => null,
     onFocus: () => null,
     onKeyDown: () => null,
-    className: null,
+    className: "scl-input",
     invalid: false,
     error: false,
     placeholder: '',

src/components/Label/Label.js

@@ -58,7 +58,7 @@ Label.propTypes = {
 
 Label.defaultProps = {
   disabled: false,
-  className: null,
+  className: "scl-label",
   id: null,
   required: false,
 };

src/components/Link/Link.js

@@ -52,6 +52,7 @@ Link.defaultProps = Link.Positive.defaultProps = Link.Negative.defaultProps = Li
   appearFocused: false,
   newTab: undefined,
   icon: null,
+  className: "scl-link"
 };
 
 Link.Wrap.propTypes = {

src/components/List/ListItem.js

@@ -23,7 +23,7 @@ ListItem.propTypes = {
 };
 
 ListItem.defaultProps = {
-  className: null,
+  className: "scl-list-item",
   id: null,
 };
 

src/components/List/OrderedList.js

@@ -35,7 +35,7 @@ OrderedList.propTypes = {
 };
 
 OrderedList.defaultProps = {
-  className: null,
+  className: "scl-ordered-list",
   id: null,
 };
 

src/components/List/UnorderedList.js

@@ -36,7 +36,7 @@ UnorderedList.propTypes = {
 };
 
 UnorderedList.defaultProps = {
-  className: null,
+  className: "scl-unordered-list",
   id: null,
 };
 

src/components/Loader/Loader.js

@@ -33,7 +33,7 @@ class Loader extends React.PureComponent {
   static defaultProps = {
     size: '20px',
     color: null,
-    className: null,
+    className: "scl-loader",
     id: null,
     Ring: styles.Ring,
     Container: styles.Container,

src/components/Logo/Logo.js

@@ -36,7 +36,7 @@ Logo.propTypes = {
 };
 
 Logo.defaultProps = {
-  className: null,
+  className: "scl-logo",
   id: null,
   color: null,
   height: null,

src/components/MethodTag/MethodTag.js

@@ -47,7 +47,7 @@ MethodTag.propTypes = {
 };
 
 MethodTag.defaultProps = {
-  className: null,
+  className: "scl-method-tag",
   id: null,
 };
 

src/components/Modal/Modal.js

@@ -98,7 +98,7 @@ class Modal extends React.Component {
   static defaultProps = {
     title: null,
     onBlockerClicked: () => null,
-    className: null,
+    className: "scl-modal",
     id: null,
     actionContent: null,
     ActionContent: styles.ActionContent,

src/components/Money/Money.js

@@ -34,7 +34,7 @@ class Money extends React.Component {
 
   static defaultProps = {
     showSign: true,
-    className: null,
+    className: "scl-money",
     id: null,
     value: 0,
     Styles: styles.MoneyStyles,

src/components/Navigation/NavigationTitle.js

@@ -33,7 +33,7 @@ class LogoHeader extends React.Component {
 
   static defaultProps = {
     children: 'Bandwidth',
-    className: null,
+    className: "scl-navigation-title",
     id: null,
     LogoPairWrapper: styles.LogoPairWrapper,
     Logo: DefaultLogo,

src/components/Navigation/styles/Bar.js

@@ -21,6 +21,10 @@ const NavigationBar = styled.header.withConfig({
   }
 `;
 
+NavigationBar.defaultProps = {
+  className: 'scl-navigation-bar'
+}
+
 NavigationBar.Sub = styled(NavigationBar)`
   background: ${get('colors.gray.light')};
   color: ${get('colors.text.default')};

src/components/Navigation/styles/Item.js

@@ -105,7 +105,7 @@ NavigationItem.propTypes = {
 };
 
 NavigationItem.defaultProps = {
-  className: null,
+  className: "scl-nav-item",
   id: null,
   active: false,
   disabled: false,