From 277a23630e49d7c591fff754e5f7b077aa57cf3b Mon Sep 17 00:00:00 2001 From: tcbegley Date: Fri, 13 Aug 2021 21:42:42 +0100 Subject: [PATCH 01/77] Alert --- src/components/Alert.js | 13 +++++++------ src/components/__tests__/Alert.test.js | 16 ++++++++-------- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/components/Alert.js b/src/components/Alert.js index 9853fab0f..8fc6ce066 100644 --- a/src/components/Alert.js +++ b/src/components/Alert.js @@ -1,7 +1,7 @@ import React, {useEffect, useRef} from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; -import {Alert as RSAlert} from 'reactstrap'; +import {default as RBAlert} from 'react-bootstrap/Alert'; import {bootstrapColors} from '../private/BootstrapColors'; /** @@ -46,10 +46,11 @@ const Alert = props => { const isBootstrapColor = bootstrapColors.has(color); return ( - { } > {children} - + ); }; diff --git a/src/components/__tests__/Alert.test.js b/src/components/__tests__/Alert.test.js index f9c43fbfd..0a77aafa3 100644 --- a/src/components/__tests__/Alert.test.js +++ b/src/components/__tests__/Alert.test.js @@ -25,16 +25,16 @@ describe('Alert', () => { test('applies contextual colors with "color" prop', () => { const { - container: {firstChild: alertSuccess}, + container: {firstChild: alertSuccess} } = render(); const { - container: {firstChild: alertPrimary}, + container: {firstChild: alertPrimary} } = render(); const { - container: {firstChild: alertDanger}, + container: {firstChild: alertDanger} } = render(); const { - container: {firstChild: alertDark}, + container: {firstChild: alertDark} } = render(); expect(alertSuccess).toHaveClass('alert-success'); @@ -45,7 +45,7 @@ describe('Alert', () => { test('applies custom color with "color" prop', () => { const { - container: {firstChild: alert}, + container: {firstChild: alert} } = render(); expect(alert).toHaveStyle('background-color: #FA7268;'); @@ -54,9 +54,9 @@ describe('Alert', () => { test('renders a dismiss button with dismissable=true', () => { const alertDismissable = render(); - expect(alertDismissable.container.querySelector('button.close')).not.toBe( - null - ); + expect( + alertDismissable.container.querySelector('button.btn-close') + ).not.toBe(null); }); test('self dismisses if duration is set', () => { From e90cbe688b7626d48e5c86c3a5ea9cc19316d22d Mon Sep 17 00:00:00 2001 From: tcbegley Date: Fri, 13 Aug 2021 21:50:50 +0100 Subject: [PATCH 02/77] Badge --- src/components/Badge.js | 20 +++++++++++++++----- src/components/__tests__/Badge.test.js | 10 +++++----- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/src/components/Badge.js b/src/components/Badge.js index c3b0935d4..6c838cd81 100644 --- a/src/components/Badge.js +++ b/src/components/Badge.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; -import {Badge as RSBadge} from 'reactstrap'; +import {default as RBBadge} from 'react-bootstrap/Badge'; import Link from '../private/Link'; import {bootstrapColors} from '../private/BootstrapColors'; @@ -18,6 +18,7 @@ const Badge = props => { style, className, class_name, + text_color, ...otherProps } = props; @@ -34,10 +35,11 @@ const Badge = props => { otherProps[href ? 'preOnClick' : 'onClick'] = incrementClicks; return ( - { } > {children} - + ); }; @@ -101,6 +103,14 @@ Badge.propTypes = { */ color: PropTypes.string, + /** + * Badge color, options: primary, secondary, success, info, warning, danger, + * link or any valid CSS color of + * your choice (e.g. a hex code, a decimal code or a CSS color name) + * Default: secondary. + */ + text_color: PropTypes.string, + /** * Make badge "pill" shaped (rounded ends, like a pill). Default: False. */ diff --git a/src/components/__tests__/Badge.test.js b/src/components/__tests__/Badge.test.js index 638ab8dad..fab3651bc 100644 --- a/src/components/__tests__/Badge.test.js +++ b/src/components/__tests__/Badge.test.js @@ -30,10 +30,10 @@ describe('Badge', () => { container: {firstChild: badgeDark}, } = render(); - expect(badgeSecondary).toHaveClass('badge-secondary'); - expect(badgePrimary).toHaveClass('badge-primary'); - expect(badgeSuccess).toHaveClass('badge-success'); - expect(badgeDark).toHaveClass('badge-dark'); + expect(badgeSecondary).toHaveClass('badge bg-secondary'); + expect(badgePrimary).toHaveClass('badge bg-primary'); + expect(badgeSuccess).toHaveClass('badge bg-success'); + expect(badgeDark).toHaveClass('badge bg-dark'); }); test('applies pill styles with "pill" prop', () => { @@ -41,7 +41,7 @@ describe('Badge', () => { container: {firstChild: badge}, } = render(); - expect(badge).toHaveClass('badge-pill'); + expect(badge).toHaveClass('badge rounded-pill'); }); test('render as a link when href is set', () => { From e778c16f5f8383da4d84dff3dd91ffde11eab965 Mon Sep 17 00:00:00 2001 From: tcbegley Date: Fri, 13 Aug 2021 22:02:04 +0100 Subject: [PATCH 03/77] Button --- src/components/Button.js | 17 +++++++---------- src/components/__tests__/Button.test.js | 9 +-------- 2 files changed, 8 insertions(+), 18 deletions(-) diff --git a/src/components/Button.js b/src/components/Button.js index d90ec77a3..904cbd1f8 100644 --- a/src/components/Button.js +++ b/src/components/Button.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; -import {Button as RSButton} from 'reactstrap'; +import {default as RBButton} from 'react-bootstrap/Button'; import Link from '../private/Link'; /** @@ -27,6 +27,8 @@ const Button = props => { value, className, class_name, + color, + outline, ...otherProps } = props; @@ -42,8 +44,9 @@ const Button = props => { otherProps[useLink ? 'preOnClick' : 'onClick'] = incrementClicks; return ( - { } > {children} - + ); }; @@ -147,12 +150,6 @@ Button.propTypes = { */ active: PropTypes.bool, - /** - * Create block level button, one that spans the full width of its parent. - * Default: False - */ - block: PropTypes.bool, - /** * Button color, options: primary, secondary, success, info, warning, danger, * link. Default: secondary. diff --git a/src/components/__tests__/Button.test.js b/src/components/__tests__/Button.test.js index 7931ffe96..7340bc424 100644 --- a/src/components/__tests__/Button.test.js +++ b/src/components/__tests__/Button.test.js @@ -58,7 +58,7 @@ describe('Button', () => { } = render(