fix(Progress): add custom classNames to progress-bar (#319)

fixes #318

 will now be passed through to  with  prop
 allows similar pass through on single bars
 can also be used with  prop and will act as in place of  for convenience

docs/lib/Components/ProgressPage.js

@@ -50,7 +50,8 @@ export default class ProgressPage extends React.Component {
   animated: PropTypes.bool,
   stripped: PropTypes.bool,
   color: PropTypes.string,
-  className: PropTypes.string
+  className: PropTypes.string,
+  barClassName: PropTypes.string // used to add class to the inner progress-bar element
 };
 
 Progress.defaultProps = {

src/Progress.js

@@ -20,6 +20,7 @@ const propTypes = {
   striped: PropTypes.bool,
   color: PropTypes.string,
   className: PropTypes.string,
+  barClassName: PropTypes.string,
   cssModule: PropTypes.object,
 };
 
@@ -33,6 +34,7 @@ const Progress = (props) => {
   const {
     children,
     className,
+    barClassName,
     cssModule,
     value,
     max,
@@ -54,6 +56,7 @@ const Progress = (props) => {
 
   const progressBarClasses = mapToCssModules(classNames(
     'progress-bar',
+    bar ? className || barClassName : barClassName,
     animated ? 'progress-bar-animated' : null,
     color ? `bg-${color}` : null,
     striped || animated ? 'progress-bar-striped' : null

src/__tests__/Progress.spec.js

@@ -77,6 +77,14 @@ describe('Progress', () => {
     expect(wrapper.hasClass('progress')).toBe(true);
   });
 
+  it('should render additional classes on the inner progress bar', () => {
+    const wrapper = shallow(<Progress barClassName="other" />);
+
+    expect(wrapper.hasClass('other')).toBe(false);
+    expect(wrapper.hasClass('progress')).toBe(true);
+    expect(wrapper.find('.progress-bar').hasClass('other')).toBe(true);
+  });
+
   it('should render custom tag', () => {
     const wrapper = shallow(<Progress tag="main" />);
 
@@ -97,6 +105,22 @@ describe('Progress', () => {
     expect(wrapper.hasClass('progress-bar')).toBe(true);
   });
 
+  it('should render additional classes', () => {
+    const wrapper = shallow(<Progress bar className="yo" />);
+
+    expect(wrapper.type()).toBe('div');
+    expect(wrapper.hasClass('progress-bar')).toBe(true);
+    expect(wrapper.hasClass('yo')).toBe(true);
+  });
+
+  it('should render additional classes using the barClassName', () => {
+    const wrapper = shallow(<Progress bar barClassName="yo" />);
+
+    expect(wrapper.type()).toBe('div');
+    expect(wrapper.hasClass('progress-bar')).toBe(true);
+    expect(wrapper.hasClass('yo')).toBe(true);
+  });
+
   it('should render the children (label)', () => {
     const wrapper = shallow(<Progress>0%</Progress>);