feat: add default variant to Alert/Badge (react-bootstrap#5456)

This sets a default variant and bg of "primary" for Alert and Badge
respectively, allowing them to be used without having to set a variant
or bg.

Bootstrap's docs on Alerts require the use of a contextual class
(https://getbootstrap.com/docs/5.1/components/alerts/) in order to have
proper styling.

This aligns Alert and Badge variant functionality with that of Button
and Navbar.

This could be viewed as a breaking change (e.g. for someone using Alert
without a variant [as it now adds one] or someone relying on Button's
`.btn-null` [if the variant was null]).  However, I'm inclined to view
this as a feature as it is adding & declaring functionality in the
public API where behaviour wasn't previously explicitly defined in
examples or docs.

Author: davidjb

src/Alert.tsx

@@ -87,6 +87,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+  variant: 'primary',
   show: true,
   transition: Fade,
   closeLabel: 'Close alert',

src/Badge.tsx

@@ -43,6 +43,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+  bg: 'primary',
   pill: false,
 };
 

test/AlertSpec.js

@@ -31,12 +31,21 @@ describe('<Alert>', () => {
       .simulate('click');
   });
 
-  it('Should have use variant class', () => {
+  it('Should default to variant="primary"', () => {
+    mount(<Alert>Message</Alert>).assertSingle(`.alert-primary`);
+  });
+
+  it('Should use variant class', () => {
     mount(<Alert variant="danger">Message</Alert>).assertSingle(
       '.alert-danger',
     );
   });
 
+  it('Should not have variant class when variant=null', () => {
+    const wrapper = mount(<Alert variant={null}>Message</Alert>);
+    expect(wrapper.find('.alert-primary').length).to.equal(0);
+  });
+
   it('should forward refs to the alert', () => {
     const ref = React.createRef();
     mount(<Alert ref={ref}>Yo</Alert>);

test/BadgeSpec.js

@@ -22,4 +22,17 @@ describe('Badge', () => {
       </Badge>,
     ).assertSingle('a[href="#"]');
   });
+
+  it('Should default to bg="primary"', () => {
+    mount(<Badge>Message</Badge>).assertSingle(`.bg-primary`);
+  });
+
+  it('Should use bg class', () => {
+    mount(<Badge bg="danger">Message</Badge>).assertSingle('.bg-danger');
+  });
+
+  it('Should not have bg class when bg=null', () => {
+    const wrapper = mount(<Badge bg={null}>Message</Badge>);
+    expect(wrapper.find('.bg-primary').length).to.equal(0);
+  });
 });