feat(ListGroup): Add ListGroupNumbered

docs/lib/Components/ListGroupPage.js

@@ -11,6 +11,7 @@ import ListGroupContextualClassesExample from '../examples/ListGroupContextualCl
 import ListGroupCustomContentExample from '../examples/ListGroupCustomContent';
 import ListGroupFlushExample from '../examples/ListGroupFlush';
 import ListGroupHorizontalExample from '../examples/ListGroupHorizontal';
+import ListGroupNumberedExample from '../examples/ListGroupNumbered';
 
 const ListGroupBadgeExampleSource = require('!!raw-loader!../examples/ListGroupBadge');
 const ListGroupExampleSource = require('!!raw-loader!../examples/ListGroup');
@@ -20,6 +21,7 @@ const ListGroupContextualClassesExampleSource = require('!!raw-loader!../example
 const ListGroupCustomContentExampleSource = require('!!raw-loader!../examples/ListGroupCustomContent');
 const ListGroupFlushExampleSource = require('!!raw-loader!../examples/ListGroupFlush')
 const ListGroupHorizontalExampleSource = require("!!raw-loader!../examples/ListGroupHorizontal");
+const ListGroupNumberedExampleSource = require("!!raw-loader!../examples/ListGroupNumbered");
 
 export default class ListGroupPage extends React.Component {
   render() {
@@ -121,6 +123,16 @@ export default class ListGroupPage extends React.Component {
             {ListGroupHorizontalExampleSource}
           </PrismCode>
         </pre>
+
+        <legend>Numbered</legend>
+        <div className="docs-example">
+          <ListGroupNumberedExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {ListGroupNumberedExampleSource}
+          </PrismCode>
+        </pre>
       </div>
     );
   }

docs/lib/examples/ListGroupNumbered.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ListGroup, ListGroupItem } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <div>
+      <p>The <code>numbered</code> prop can be used to opt into numbered list group items.</p>
+      <ListGroup numbered>
+        <ListGroupItem>Cras justo odio</ListGroupItem>
+        <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
+        <ListGroupItem>Morbi leo risus</ListGroupItem>
+        <ListGroupItem>Porta ac consectetur ac</ListGroupItem>
+        <ListGroupItem>Vestibulum at eros</ListGroupItem>
+      </ListGroup>
+    </div>
+
+  );
+}
+
+export default Example;

src/ListGroup.js

@@ -8,12 +8,14 @@ const propTypes = {
   flush: PropTypes.bool,
   className: PropTypes.string,
   cssModule: PropTypes.object,
-  horizontal: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
+  horizontal: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  numbered: PropTypes.bool
 };
 
 const defaultProps = {
   tag: 'ul',
-  horizontal: false
+  horizontal: false,
+  numbered: false
 };
 
 const getHorizontalClass = horizontal => {
@@ -32,14 +34,18 @@ const ListGroup = (props) => {
     tag: Tag,
     flush,
     horizontal,
+    numbered,
     ...attributes
   } = props;
   const classes = mapToCssModules(classNames(
     className,
     'list-group',
     // list-group-horizontal cannot currently be mixed with list-group-flush
     // we only try to apply horizontal classes if flush is false
-    flush ? 'list-group-flush' : getHorizontalClass(horizontal)
+    flush ? 'list-group-flush' : getHorizontalClass(horizontal),
+    {
+      'list-group-numbered': numbered
+    }
   ), cssModule);
 
   return (

src/__tests__/ListGroup.spec.js

@@ -43,6 +43,14 @@ describe('ListGroup', () => {
     expect(wrapper.hasClass("list-group-horizontal-lg")).toBe(true);
   });
 
+  it('should render with "numbered"', () => {
+    const wrapper = shallow(<ListGroup numbered>Yo!</ListGroup>);
+
+    expect(wrapper.text()).toBe("Yo!");
+    expect(wrapper.hasClass("list-group")).toBe(true);
+    expect(wrapper.hasClass("list-group-numbered")).toBe(true);
+  });
+
   it('should render additional classes', () => {
     const wrapper = shallow(<ListGroup className="other">Yo!</ListGroup>);
 

types/lib/ListGroup.d.ts

@@ -6,6 +6,7 @@ export interface ListGroupProps extends React.HTMLAttributes<HTMLElement> {
   tag?: React.ElementType;
   flush?: boolean;
   horizontal?: boolean | string;
+  numbered?: boolean;
   cssModule?: CSSModule;
 }