Merge pull request #542 from facultyai/default-colors

Fix default colours for Alert and Badge

Author: tcbegley

dash_bootstrap_components/__init__.py

@@ -2,6 +2,7 @@
 import os
 import sys
 
+from dash_bootstrap_components import themes  # noqa
 from dash_bootstrap_components import _components
 from dash_bootstrap_components._components import *  # noqa
 from dash_bootstrap_components._table import _generate_table_from_df

src/components/Alert.js

@@ -60,6 +60,7 @@ const Alert = props => {
 };
 
 Alert.defaultProps = {
+  color: 'success',
   is_open: true,
   duration: null
 };

src/components/Badge.js

@@ -48,6 +48,7 @@ const Badge = props => {
 };
 
 Badge.defaultProps = {
+  color: 'secondary',
   n_clicks: 0,
   n_clicks_timestamp: -1
 };

src/components/__tests__/Alert.test.js

@@ -24,18 +24,22 @@ describe('Alert', () => {
   });
 
   test('applies contextual colors with "color" prop', () => {
+    const {
+      container: {firstChild: alertSuccess}
+    } = render(<Alert />);
     const {
       container: {firstChild: alertPrimary}
     } = render(<Alert color="primary" />);
     const {
-      container: {firstChild: alertSuccess}
-    } = render(<Alert color="success" />);
+      container: {firstChild: alertDanger}
+    } = render(<Alert color="danger" />);
     const {
       container: {firstChild: alertDark}
     } = render(<Alert color="dark" />);
 
-    expect(alertPrimary).toHaveClass('alert-primary');
     expect(alertSuccess).toHaveClass('alert-success');
+    expect(alertPrimary).toHaveClass('alert-primary');
+    expect(alertDanger).toHaveClass('alert-danger');
     expect(alertDark).toHaveClass('alert-dark');
   });
 

src/components/__tests__/Badge.test.js

@@ -17,6 +17,9 @@ describe('Badge', () => {
   });
 
   test('applies contextual colors with "color" prop', () => {
+    const {
+      container: {firstChild: badgeSecondary}
+    } = render(<Badge />);
     const {
       container: {firstChild: badgePrimary}
     } = render(<Badge color="primary" />);
@@ -27,6 +30,7 @@ describe('Badge', () => {
       container: {firstChild: badgeDark}
     } = render(<Badge color="dark" />);
 
+    expect(badgeSecondary).toHaveClass('badge-secondary');
     expect(badgePrimary).toHaveClass('badge-primary');
     expect(badgeSuccess).toHaveClass('badge-success');
     expect(badgeDark).toHaveClass('badge-dark');
@@ -60,33 +64,31 @@ describe('Badge', () => {
     expect(mockSetProps.mock.calls[0][0].n_clicks).toBe(1);
   });
 
-    test('relative links are internal by default', () => {
-      const badge = render(
-        <Badge href="/relative">Clickable</Badge>
-      );
-
-      const mockEventListener = jest.fn();
-      window.addEventListener('_dashprivate_pushstate', mockEventListener);
-      window.scrollTo = jest.fn();
-
-      expect(mockEventListener.mock.calls).toHaveLength(0);
-      userEvent.click(badge.getByText('Clickable'));
-      expect(mockEventListener.mock.calls).toHaveLength(1);
-    });
-
-    test('relative links are external with external_link=true', () => {
-      const badge = render(
-        <Badge href="/relative" external_link>
-          Clickable
-        </Badge>
-      );
-
-      const mockEventListener = jest.fn();
-      window.addEventListener('_dashprivate_pushstate', mockEventListener);
-      window.scrollTo = jest.fn();
-
-      expect(mockEventListener.mock.calls).toHaveLength(0);
-      userEvent.click(badge.getByText('Clickable'));
-      expect(mockEventListener.mock.calls).toHaveLength(0);
-    });
+  test('relative links are internal by default', () => {
+    const badge = render(<Badge href="/relative">Clickable</Badge>);
+
+    const mockEventListener = jest.fn();
+    window.addEventListener('_dashprivate_pushstate', mockEventListener);
+    window.scrollTo = jest.fn();
+
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+    userEvent.click(badge.getByText('Clickable'));
+    expect(mockEventListener.mock.calls).toHaveLength(1);
+  });
+
+  test('relative links are external with external_link=true', () => {
+    const badge = render(
+      <Badge href="/relative" external_link>
+        Clickable
+      </Badge>
+    );
+
+    const mockEventListener = jest.fn();
+    window.addEventListener('_dashprivate_pushstate', mockEventListener);
+    window.scrollTo = jest.fn();
+
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+    userEvent.click(badge.getByText('Clickable'));
+    expect(mockEventListener.mock.calls).toHaveLength(0);
+  });
 });