From 02b3b71e62668493f61253a6a67919ec4c18ba97 Mon Sep 17 00:00:00 2001
From: bestguy <7zark7@gmail.com>
Date: Fri, 7 May 2021 17:32:56 -0700
Subject: [PATCH] feat(ListGroup): Add ListGroupNumbered

---
 docs/lib/Components/ListGroupPage.js   | 12 ++++++++++++
 docs/lib/examples/ListGroupNumbered.js | 20 ++++++++++++++++++++
 src/ListGroup.js                       | 12 +++++++++---
 src/__tests__/ListGroup.spec.js        |  8 ++++++++
 types/lib/ListGroup.d.ts               |  1 +
 5 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 docs/lib/examples/ListGroupNumbered.js

diff --git a/docs/lib/Components/ListGroupPage.js b/docs/lib/Components/ListGroupPage.js
index 9d3054cf6..bdd21b9ed 100644
--- a/docs/lib/Components/ListGroupPage.js
+++ b/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>
     );
   }
diff --git a/docs/lib/examples/ListGroupNumbered.js b/docs/lib/examples/ListGroupNumbered.js
new file mode 100644
index 000000000..4317d089a
--- /dev/null
+++ b/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;
diff --git a/src/ListGroup.js b/src/ListGroup.js
index 0e539a053..354b14cc1 100644
--- a/src/ListGroup.js
+++ b/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,6 +34,7 @@ const ListGroup = (props) => {
     tag: Tag,
     flush,
     horizontal,
+    numbered,
     ...attributes
   } = props;
   const classes = mapToCssModules(classNames(
@@ -39,7 +42,10 @@ const ListGroup = (props) => {
     '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 (
diff --git a/src/__tests__/ListGroup.spec.js b/src/__tests__/ListGroup.spec.js
index f2de17693..b06e886ef 100644
--- a/src/__tests__/ListGroup.spec.js
+++ b/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>);
 
diff --git a/types/lib/ListGroup.d.ts b/types/lib/ListGroup.d.ts
index c6902f4ef..b51fc56ef 100644
--- a/types/lib/ListGroup.d.ts
+++ b/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;
 }