From 748b3f52c82676ab291e4f0fb0dfbcb4be2139f8 Mon Sep 17 00:00:00 2001 From: tcbegley Date: Sun, 15 Aug 2021 16:28:55 +0100 Subject: [PATCH 1/8] Monkeypatch doc tests --- .../components/__tests__/conftest.py | 34 +++++++++++++++++++ .../components/__tests__/helpers.py | 11 ++++-- 2 files changed, 42 insertions(+), 3 deletions(-) create mode 100644 docs/components_page/components/__tests__/conftest.py diff --git a/docs/components_page/components/__tests__/conftest.py b/docs/components_page/components/__tests__/conftest.py new file mode 100644 index 000000000..0fbbb4d6f --- /dev/null +++ b/docs/components_page/components/__tests__/conftest.py @@ -0,0 +1,34 @@ +import dash_core_components as dcc +import dash_html_components as html + + +# TODO: delete once Dash 2.0 is released +def class_name_shim(fn): + def new_init(self, *args, **kwargs): + kwargs["className"] = kwargs.get("class_name", kwargs.get("className")) + return fn( + self, + *args, + **{k: v for k, v in kwargs.items() if k != "class_name"} + ) + + return new_init + + +for component in [ + dcc.Markdown, + html.A, + html.Blockquote, + html.Div, + html.H1, + html.H2, + html.H3, + html.H4, + html.H5, + html.H6, + html.Hr, + html.I, + html.P, + html.Small, +]: + component.__init__ = class_name_shim(component.__init__) diff --git a/docs/components_page/components/__tests__/helpers.py b/docs/components_page/components/__tests__/helpers.py index 20296cb1d..a085be6b7 100644 --- a/docs/components_page/components/__tests__/helpers.py +++ b/docs/components_page/components/__tests__/helpers.py @@ -8,7 +8,8 @@ def py_source_to_app(py_source, env): Create a Dash app from a string defining the app. """ env = env or {} - exec(py_source, env) + # TODO: remove class_name modifiers + exec(py_source.replace("class_name", "className"), env) return env["app"] @@ -56,7 +57,9 @@ def load_r_app(path, component_name): snippet=path.read_text(), components=component_name, port=8050, - ) + ).replace( + "class_name", "className" + ) # TODO: remove this in future def load_jl_app(path, component_name): @@ -64,4 +67,6 @@ def load_jl_app(path, component_name): snippet=path.read_text(), components=component_name, port=8050, - ) + ).replace( + "class_name", "className" + ) # TODO: remove this in future From 5e770fef477cbff603356a2478d87908ac247d78 Mon Sep 17 00:00:00 2001 From: AnnMarieW Date: Mon, 16 Aug 2021 12:02:44 -0700 Subject: [PATCH 2/8] Card --- docs/components_page/components/card.md | 16 ---- .../components/card/layout/columns.R | 61 ------------- .../components/card/layout/columns.jl | 47 ---------- .../components/card/layout/columns.py | 61 ------------- .../components/card/layout/deck.R | 57 ------------- .../components/card/layout/deck.jl | 35 -------- .../components/card/layout/deck.py | 53 ------------ docs/demos/theme_explorer/card.py | 2 +- src/components/card/Card.js | 12 ++- src/components/card/CardBody.js | 6 +- src/components/card/CardColumns.js | 85 ------------------- src/components/card/CardDeck.js | 85 ------------------- src/components/card/CardFooter.js | 6 +- src/components/card/CardGroup.js | 6 +- src/components/card/CardHeader.js | 6 +- src/components/card/CardImg.js | 6 +- src/components/card/CardImgOverlay.js | 6 +- src/components/card/CardLink.js | 8 +- src/components/card/__tests__/Card.test.js | 15 ++-- .../card/__tests__/CardColumns.test.js | 23 ----- .../card/__tests__/CardDeck.test.js | 17 ---- src/index.js | 2 - 22 files changed, 39 insertions(+), 576 deletions(-) delete mode 100644 docs/components_page/components/card/layout/columns.R delete mode 100644 docs/components_page/components/card/layout/columns.jl delete mode 100644 docs/components_page/components/card/layout/columns.py delete mode 100644 docs/components_page/components/card/layout/deck.R delete mode 100644 docs/components_page/components/card/layout/deck.jl delete mode 100644 docs/components_page/components/card/layout/deck.py delete mode 100644 src/components/card/CardColumns.js delete mode 100644 src/components/card/CardDeck.js delete mode 100644 src/components/card/__tests__/CardColumns.test.js delete mode 100644 src/components/card/__tests__/CardDeck.test.js diff --git a/docs/components_page/components/card.md b/docs/components_page/components/card.md index e8041c475..0048040fb 100644 --- a/docs/components_page/components/card.md +++ b/docs/components_page/components/card.md @@ -91,24 +91,8 @@ Use the `CardGroup` component to render cards as a single attached element with {{example:components/card/layout/group.py:cards}} -### Card deck - -The `CardDeck` component will lay cards out with equal width and height, without attaching them to one another like the `CardGroup` component. - -{{example:components/card/layout/deck.py:cards}} - -### Card columns - -Cards can be organised into [Masonry](https://masonry.desandro.com/)-like columns using the `CardColumns` component. Cards are ordered top to bottom and left to right. - -{{example:components/card/layout/columns.py:cards}} - -{{apidoc:src/components/card/CardDeck.js}} - {{apidoc:src/components/card/CardGroup.js}} -{{apidoc:src/components/card/CardColumns.js}} - {{apidoc:src/components/card/Card.js}} {{apidoc:src/components/card/CardHeader.js}} diff --git a/docs/components_page/components/card/layout/columns.R b/docs/components_page/components/card/layout/columns.R deleted file mode 100644 index dce16e70c..000000000 --- a/docs/components_page/components/card/layout/columns.R +++ /dev/null @@ -1,61 +0,0 @@ -library(dashBootstrapComponents) -library(dashHtmlComponents) - -card_content_1 <- list( - dbcCardHeader("Card header"), - dbcCardBody( - list( - htmlH5("Card title", class_name = "card-title"), - htmlP( - "This is some card content that we'll reuse", - class_name = "card-text" - ) - ) - ) -) - -card_content_2 <- dbcCardBody( - list( - htmlBlockquote( - list( - htmlP( - paste( - "A learning experience is one of those things that says,", - "'You know that thing you just did? Don't do that.'" - ) - ), - htmlFooter( - htmlSmall("Douglas Adams", class_name = "text-muted") - ) - ), - class_name = "blockquote" - ) - ) -) - -card_content_3 <- list( - dbcCardImg(src = "/static/images/placeholder286x180.png", top = TRUE), - dbcCardBody( - list( - htmlH5("Card with image", class_name = "card-title"), - htmlP("This card has an image on top, and a button below", - class_name = "card-text", - ), - dbcButton("Click me!", color = "primary") - ) - ) -) - -cards <- dbcCardColumns( - list( - dbcCard(card_content_1, color = "primary", inverse = TRUE), - dbcCard(card_content_2, body = TRUE), - dbcCard(card_content_1, color = "secondary", inverse = TRUE), - dbcCard(card_content_3, color = "info", inverse = TRUE), - dbcCard(card_content_1, color = "success", inverse = TRUE), - dbcCard(card_content_1, color = "warning", inverse = TRUE), - dbcCard(card_content_1, color = "danger", inverse = TRUE), - dbcCard(card_content_3, color = "light"), - dbcCard(card_content_1, color = "dark", inverse = TRUE) - ) -) diff --git a/docs/components_page/components/card/layout/columns.jl b/docs/components_page/components/card/layout/columns.jl deleted file mode 100644 index 61d3c2136..000000000 --- a/docs/components_page/components/card/layout/columns.jl +++ /dev/null @@ -1,47 +0,0 @@ -using DashBootstrapComponents, DashHtmlComponents - -card_content_1 = [ - dbc_cardheader("Card header"), - dbc_cardbody([ - html_h5("Card title", class_name="card-title"), - html_p("This is some card content that we'll reuse", class_name="card-text"), - ]), -]; - -card_content_2 = dbc_cardbody([ - html_blockquote( - [ - html_p( - "A learning experience is one of those things that says, " * - "'You know that thing you just did? Don't do that.'", - ), - html_footer(html_small("Douglas Adams", class_name="text-muted")), - ], - class_name="blockquote", - ), -]); - -card_content_3 = [ - dbc_cardimg(src="/static/images/placeholder286x180.png", top=true), - dbc_cardbody([ - html_h5("Card with image", class_name="card-title"), - html_p( - "This card has an image on top, and a button below", - class_name="card-text", - ), - dbc_button("Click me!", color="primary"), - ]), -]; - - -cards = dbc_cardcolumns([ - dbc_card(card_content_1, color="primary", inverse=true), - dbc_card(card_content_2, body=true), - dbc_card(card_content_1, color="secondary", inverse=true), - dbc_card(card_content_3, color="info", inverse=true), - dbc_card(card_content_1, color="success", inverse=true), - dbc_card(card_content_1, color="warning", inverse=true), - dbc_card(card_content_1, color="danger", inverse=true), - dbc_card(card_content_3, color="light"), - dbc_card(card_content_1, color="dark", inverse=true), -]); diff --git a/docs/components_page/components/card/layout/columns.py b/docs/components_page/components/card/layout/columns.py deleted file mode 100644 index 7cf78bf73..000000000 --- a/docs/components_page/components/card/layout/columns.py +++ /dev/null @@ -1,61 +0,0 @@ -import dash_bootstrap_components as dbc -import dash_html_components as html - -card_content_1 = [ - dbc.CardHeader("Card header"), - dbc.CardBody( - [ - html.H5("Card title", class_name="card-title"), - html.P( - "This is some card content that we'll reuse", - class_name="card-text", - ), - ] - ), -] - -card_content_2 = dbc.CardBody( - [ - html.Blockquote( - [ - html.P( - "A learning experience is one of those things that says, " - "'You know that thing you just did? Don't do that.'" - ), - html.Footer( - html.Small("Douglas Adams", class_name="text-muted") - ), - ], - class_name="blockquote", - ) - ] -) - -card_content_3 = [ - dbc.CardImg(src="/static/images/placeholder286x180.png", top=True), - dbc.CardBody( - [ - html.H5("Card with image", class_name="card-title"), - html.P( - "This card has an image on top, and a button below", - class_name="card-text", - ), - dbc.Button("Click me!", color="primary"), - ] - ), -] - - -cards = dbc.CardColumns( - [ - dbc.Card(card_content_1, color="primary", inverse=True), - dbc.Card(card_content_2, body=True), - dbc.Card(card_content_1, color="secondary", inverse=True), - dbc.Card(card_content_3, color="info", inverse=True), - dbc.Card(card_content_1, color="success", inverse=True), - dbc.Card(card_content_1, color="warning", inverse=True), - dbc.Card(card_content_1, color="danger", inverse=True), - dbc.Card(card_content_3, color="light"), - dbc.Card(card_content_1, color="dark", inverse=True), - ] -) diff --git a/docs/components_page/components/card/layout/deck.R b/docs/components_page/components/card/layout/deck.R deleted file mode 100644 index 450da951c..000000000 --- a/docs/components_page/components/card/layout/deck.R +++ /dev/null @@ -1,57 +0,0 @@ -library(dashBootstrapComponents) -library(dashHtmlComponents) - -cards <- dbcCardDeck( - list( - dbcCard( - dbcCardBody( - list( - htmlH5("Card 1", class_name = "card-title"), - htmlP( - paste( - "This card has some text content, which is a little", - "bit longer than the second card." - ), - class_name = "card-text" - ), - dbcButton( - "Click here", color = "success", class_name = "mt-auto" - ) - ) - ) - ), - dbcCard( - dbcCardBody( - list( - htmlH5("Card 2", class_name = "card-title"), - htmlP( - "This card has some text content.", - class_name = "card-text", - ), - dbcButton( - "Click here", color = "warning", class_name = "mt-auto" - ) - ) - ) - ), - dbcCard( - dbcCardBody( - list( - htmlH5("Card 3", class_name = "card-title"), - htmlP( - paste( - "This card has some text content, which is longer", - "than both of the other two cards, in order to", - "demonstrate the equal height property of cards in a", - "card group." - ), - class_name = "card-text", - ), - dbcButton( - "Click here", color = "danger", class_name = "mt-auto" - ) - ) - ) - ) - ) -) diff --git a/docs/components_page/components/card/layout/deck.jl b/docs/components_page/components/card/layout/deck.jl deleted file mode 100644 index d3b590167..000000000 --- a/docs/components_page/components/card/layout/deck.jl +++ /dev/null @@ -1,35 +0,0 @@ -using DashBootstrapComponents, DashHtmlComponents - -cards = dbc_carddeck([ - dbc_card( - dbc_cardbody([ - html_h5("Card 1", class_name="card-title"), - html_p( - "This card has some text content, which is a little " * - "bit longer than the second card.", - class_name="card-text", - ), - dbc_button("Click here", color="success", class_name="mt-auto"), - ]), - ), - dbc_card( - dbc_cardbody([ - html_h5("Card 2", class_name="card-title"), - html_p("This card has some text content.", class_name="card-text"), - dbc_button("Click here", color="warning", class_name="mt-auto"), - ]), - ), - dbc_card( - dbc_cardbody([ - html_h5("Card 3", class_name="card-title"), - html_p( - "This card has some text content, which is longer " * - "than both of the other two cards, in order to " * - "demonstrate the equal height property of cards in a " * - "card group.", - class_name="card-text", - ), - dbc_button("Click here", color="danger", class_name="mt-auto"), - ]), - ), -]); diff --git a/docs/components_page/components/card/layout/deck.py b/docs/components_page/components/card/layout/deck.py deleted file mode 100644 index a6e475b6c..000000000 --- a/docs/components_page/components/card/layout/deck.py +++ /dev/null @@ -1,53 +0,0 @@ -import dash_bootstrap_components as dbc -import dash_html_components as html - -cards = dbc.CardDeck( - [ - dbc.Card( - dbc.CardBody( - [ - html.H5("Card 1", class_name="card-title"), - html.P( - "This card has some text content, which is a little " - "bit longer than the second card.", - class_name="card-text", - ), - dbc.Button( - "Click here", color="success", class_name="mt-auto" - ), - ] - ) - ), - dbc.Card( - dbc.CardBody( - [ - html.H5("Card 2", class_name="card-title"), - html.P( - "This card has some text content.", - class_name="card-text", - ), - dbc.Button( - "Click here", color="warning", class_name="mt-auto" - ), - ] - ) - ), - dbc.Card( - dbc.CardBody( - [ - html.H5("Card 3", class_name="card-title"), - html.P( - "This card has some text content, which is longer " - "than both of the other two cards, in order to " - "demonstrate the equal height property of cards in a " - "card group.", - class_name="card-text", - ), - dbc.Button( - "Click here", color="danger", class_name="mt-auto" - ), - ] - ) - ), - ] -) diff --git a/docs/demos/theme_explorer/card.py b/docs/demos/theme_explorer/card.py index 510ac0fd4..e75beacf1 100644 --- a/docs/demos/theme_explorer/card.py +++ b/docs/demos/theme_explorer/card.py @@ -6,7 +6,7 @@ cards = html.Div( [ make_subheading("Card", "card"), - dbc.CardDeck( + dbc.CardGroup( [ dbc.Card( [ diff --git a/src/components/card/Card.js b/src/components/card/Card.js index 9f55d64fb..080643a65 100644 --- a/src/components/card/Card.js +++ b/src/components/card/Card.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; -import {Card as RSCard} from 'reactstrap'; +import {default as RBCard} from 'react-bootstrap/Card'; import {bootstrapColors} from '../../private/BootstrapColors'; /** @@ -14,6 +14,8 @@ const Card = (props) => { const { children, color, + inverse, + outline, style, loading_state, className, @@ -22,17 +24,19 @@ const Card = (props) => { } = props; const isBootstrapColor = bootstrapColors.has(color); return ( - {children} - + ); }; diff --git a/src/components/card/CardBody.js b/src/components/card/CardBody.js index 17f6206b5..086660e24 100644 --- a/src/components/card/CardBody.js +++ b/src/components/card/CardBody.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; -import {CardBody as RSCardBody} from 'reactstrap'; +import {default as RBCard} from 'react-bootstrap/Card'; /** * Wrap the content of your `Card` in `CardBody` to apply padding and other @@ -10,7 +10,7 @@ import {CardBody as RSCardBody} from 'reactstrap'; const CardBody = (props) => { const {children, loading_state, className, class_name, ...otherProps} = props; return ( - { {...omit(['setProps'], otherProps)} > {children} - + ); }; diff --git a/src/components/card/CardColumns.js b/src/components/card/CardColumns.js deleted file mode 100644 index 45c5f2e0e..000000000 --- a/src/components/card/CardColumns.js +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import {omit} from 'ramda'; -import {CardColumns as RSCardColumns} from 'reactstrap'; - -/** - * Display a series of cards in vertical columns using a masonry style layout. - */ -const CardColumns = (props) => { - const {children, loading_state, className, class_name, ...otherProps} = props; - return ( - - {children} - - ); -}; - -CardColumns.propTypes = { - /** - * The ID of this component, used to identify dash components - * in callbacks. The ID needs to be unique across all of the - * components in an app. - */ - id: PropTypes.string, - - /** - * The children of this component - */ - children: PropTypes.node, - - /** - * Defines CSS styles which will override styles previously set. - */ - style: PropTypes.object, - - /** - * Often used with CSS to style elements with common properties. - */ - class_name: PropTypes.string, - - /** - * **DEPRECATED** Use `class_name` instead. - * - * Often used with CSS to style elements with common properties. - */ - className: PropTypes.string, - - /** - * A unique identifier for the component, used to improve - * performance by React.js while rendering components - * See https://reactjs.org/docs/lists-and-keys.html for more info - */ - key: PropTypes.string, - - /** - * HTML tag to use for the card columns container, default: div - */ - tag: PropTypes.string, - - /** - * Object that holds the loading state object coming from dash-renderer - */ - loading_state: PropTypes.shape({ - /** - * Determines if the component is loading or not - */ - is_loading: PropTypes.bool, - /** - * Holds which property is loading - */ - prop_name: PropTypes.string, - /** - * Holds the name of the component that is loading - */ - component_name: PropTypes.string, - }), -}; - -export default CardColumns; diff --git a/src/components/card/CardDeck.js b/src/components/card/CardDeck.js deleted file mode 100644 index f7bd4bb27..000000000 --- a/src/components/card/CardDeck.js +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import {omit} from 'ramda'; -import {CardDeck as RSCardDeck} from 'reactstrap'; - -/** - * Create a set of cards with equal width and height using CardDeck. - */ -const CardDeck = (props) => { - const {children, loading_state, className, class_name, ...otherProps} = props; - return ( - - {children} - - ); -}; - -CardDeck.propTypes = { - /** - * The ID of this component, used to identify dash components - * in callbacks. The ID needs to be unique across all of the - * components in an app. - */ - id: PropTypes.string, - - /** - * The children of this component - */ - children: PropTypes.node, - - /** - * Defines CSS styles which will override styles previously set. - */ - style: PropTypes.object, - - /** - * Often used with CSS to style elements with common properties. - */ - class_name: PropTypes.string, - - /** - * **DEPRECATED** Use `class_name` instead. - * - * Often used with CSS to style elements with common properties. - */ - className: PropTypes.string, - - /** - * A unique identifier for the component, used to improve - * performance by React.js while rendering components - * See https://reactjs.org/docs/lists-and-keys.html for more info - */ - key: PropTypes.string, - - /** - * HTML tag to use for the card deck, default: div - */ - tag: PropTypes.string, - - /** - * Object that holds the loading state object coming from dash-renderer - */ - loading_state: PropTypes.shape({ - /** - * Determines if the component is loading or not - */ - is_loading: PropTypes.bool, - /** - * Holds which property is loading - */ - prop_name: PropTypes.string, - /** - * Holds the name of the component that is loading - */ - component_name: PropTypes.string, - }), -}; - -export default CardDeck; diff --git a/src/components/card/CardFooter.js b/src/components/card/CardFooter.js index 1719a1924..57c6f0255 100644 --- a/src/components/card/CardFooter.js +++ b/src/components/card/CardFooter.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; -import {CardFooter as RSCardFooter} from 'reactstrap'; +import {default as RBCard} from 'react-bootstrap/Card'; /** * Use the CardFooter component to add a footer to any card. @@ -9,7 +9,7 @@ import {CardFooter as RSCardFooter} from 'reactstrap'; const CardFooter = (props) => { const {children, loading_state, className, class_name, ...otherProps} = props; return ( - { {...omit(['setProps'], otherProps)} > {children} - + ); }; diff --git a/src/components/card/CardGroup.js b/src/components/card/CardGroup.js index e9003dca8..031a90689 100644 --- a/src/components/card/CardGroup.js +++ b/src/components/card/CardGroup.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; -import {CardGroup as RSCardGroup} from 'reactstrap'; +import RBCardGroup from 'react-bootstrap/CardGroup' /** * Use CardGroup to render cards as a single, attached element of columns with @@ -10,7 +10,7 @@ import {CardGroup as RSCardGroup} from 'reactstrap'; const CardGroup = (props) => { const {children, loading_state, className, class_name, ...otherProps} = props; return ( - { {...omit(['setProps'], otherProps)} > {children} - + ); }; diff --git a/src/components/card/CardHeader.js b/src/components/card/CardHeader.js index 7755d33bc..fc5c3228a 100644 --- a/src/components/card/CardHeader.js +++ b/src/components/card/CardHeader.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; -import {CardHeader as RSCardHeader} from 'reactstrap'; +import {default as RBCard} from 'react-bootstrap/Card'; /** * Use the CardHeader component to add a header to any card. @@ -9,7 +9,7 @@ import {CardHeader as RSCardHeader} from 'reactstrap'; const CardHeader = (props) => { const {children, loading_state, className, class_name, ...otherProps} = props; return ( - { {...omit(['setProps'], otherProps)} > {children} - + ); }; diff --git a/src/components/card/CardImg.js b/src/components/card/CardImg.js index 5e0b19417..0f7c56ea3 100644 --- a/src/components/card/CardImg.js +++ b/src/components/card/CardImg.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; -import {CardImg as RSCardImg} from 'reactstrap'; +import {default as RBCard} from 'react-bootstrap/Card'; /** * Use CardImg to add images to your cards. @@ -9,7 +9,7 @@ import {CardImg as RSCardImg} from 'reactstrap'; const CardImg = (props) => { const {children, loading_state, className, class_name, ...otherProps} = props; return ( - { {...omit(['setProps'], otherProps)} > {children} - + ); }; diff --git a/src/components/card/CardImgOverlay.js b/src/components/card/CardImgOverlay.js index dbdbcfc58..9d278456e 100644 --- a/src/components/card/CardImgOverlay.js +++ b/src/components/card/CardImgOverlay.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; -import {CardImgOverlay as RSCardImgOverlay} from 'reactstrap'; +import {default as RBCard} from 'react-bootstrap/Card'; /** * Use CardImgOverlay to turn an image into the background of your card and add @@ -10,7 +10,7 @@ import {CardImgOverlay as RSCardImgOverlay} from 'reactstrap'; const CardImgOverlay = (props) => { const {children, loading_state, className, class_name, ...otherProps} = props; return ( - { {...omit(['setProps'], otherProps)} > {children} - + ); }; diff --git a/src/components/card/CardLink.js b/src/components/card/CardLink.js index 198df18b9..427dade7f 100644 --- a/src/components/card/CardLink.js +++ b/src/components/card/CardLink.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; -import {CardLink as RSCardLink} from 'reactstrap'; +import {default as RBCard} from 'react-bootstrap/Card'; import Link from '../../private/Link'; /** @@ -28,18 +28,18 @@ const CardLink = (props) => { }; return ( - {children} - + ); }; diff --git a/src/components/card/__tests__/Card.test.js b/src/components/card/__tests__/Card.test.js index 3b26fbea4..06d2a733e 100644 --- a/src/components/card/__tests__/Card.test.js +++ b/src/components/card/__tests__/Card.test.js @@ -47,6 +47,14 @@ describe('Card', () => { expect(cardDark).toHaveClass('border-dark'); }); + test('applies text-white class with "inverse" prop', () => { + const { + container: {firstChild: cardInverse}, + } = render(); + + expect(cardInverse).toHaveClass('text-white'); + }); + test('applies card-body class with "body" prop', () => { const { container: {firstChild: cardBody}, @@ -55,11 +63,4 @@ describe('Card', () => { expect(cardBody).toHaveClass('card-body'); }); - test('applies text-white class with "inverse" prop', () => { - const { - container: {firstChild: cardInverse}, - } = render(); - - expect(cardInverse).toHaveClass('text-white'); - }); }); diff --git a/src/components/card/__tests__/CardColumns.test.js b/src/components/card/__tests__/CardColumns.test.js deleted file mode 100644 index aa48cb03d..000000000 --- a/src/components/card/__tests__/CardColumns.test.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import {render} from '@testing-library/react'; -import CardColumns from '../CardColumns'; - -describe('CardColumns', () => { - test('renders a div with class "card-columns"', () => { - const cardColumns = render(); - - expect(cardColumns.container.querySelector('div.card-columns')).not.toBe( - null - ); - }); - - test('renders its content', () => { - const cardColumns = render( - Some card columns content - ); - - expect(cardColumns.container).toHaveTextContent( - 'Some card columns content' - ); - }); -}); diff --git a/src/components/card/__tests__/CardDeck.test.js b/src/components/card/__tests__/CardDeck.test.js deleted file mode 100644 index 489798236..000000000 --- a/src/components/card/__tests__/CardDeck.test.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import {render} from '@testing-library/react'; -import CardDeck from '../CardDeck'; - -describe('CardDeck', () => { - test('renders a div with class "card-deck"', () => { - const cardDeck = render(); - - expect(cardDeck.container.querySelector('div.card-deck')).not.toBe(null); - }); - - test('renders its content', () => { - const cardDeck = render(Some card deck content); - - expect(cardDeck.container).toHaveTextContent('Some card deck content'); - }); -}); diff --git a/src/index.js b/src/index.js index 70cf727a3..4d401a388 100644 --- a/src/index.js +++ b/src/index.js @@ -4,8 +4,6 @@ export {default as Button} from './components/Button'; export {default as ButtonGroup} from './components/ButtonGroup'; export {default as Card} from './components/card/Card'; export {default as CardBody} from './components/card/CardBody'; -export {default as CardColumns} from './components/card/CardColumns'; -export {default as CardDeck} from './components/card/CardDeck'; export {default as CardFooter} from './components/card/CardFooter'; export {default as CardGroup} from './components/card/CardGroup'; export {default as CardHeader} from './components/card/CardHeader'; From c96ccc7320348f6564ab4038c24ac6e9145ab111 Mon Sep 17 00:00:00 2001 From: AnnMarieW Date: Wed, 18 Aug 2021 15:18:01 -0700 Subject: [PATCH 3/8] Nav and NavBar Update to Collapse to remove navbar prop --- src/components/Collapse.js | 10 -- src/components/nav/Nav.js | 58 +++++++++++- src/components/nav/NavItem.js | 10 +- src/components/nav/Navbar.js | 23 +++-- src/components/nav/NavbarBrand.js | 8 +- src/components/nav/NavbarCollapse.js | 93 +++++++++++++++++++ src/components/nav/NavbarSimple.js | 17 ++-- src/components/nav/NavbarToggler.js | 9 +- src/components/nav/__tests__/Nav.test.js | 6 +- src/components/nav/__tests__/NavItem.test.js | 12 +-- src/components/nav/__tests__/Navbar.test.js | 4 - .../nav/__tests__/NavbarSimple.test.js | 4 - src/index.js | 1 + 13 files changed, 190 insertions(+), 65 deletions(-) create mode 100644 src/components/nav/NavbarCollapse.js diff --git a/src/components/Collapse.js b/src/components/Collapse.js index 7fcad8c80..ae04d6241 100644 --- a/src/components/Collapse.js +++ b/src/components/Collapse.js @@ -68,21 +68,11 @@ Collapse.propTypes = { */ key: PropTypes.string, - /** - * HTML tag to use for the collapse contents. Default: div. - */ - tag: PropTypes.string, - /** * Whether collapse is currently open. */ is_open: PropTypes.bool, - /** - * Set to True when using a collapse inside a navbar. - */ - navbar: PropTypes.bool, - /** * Object that holds the loading state object coming from dash-renderer */ diff --git a/src/components/nav/Nav.js b/src/components/nav/Nav.js index e8046b55b..54652d859 100644 --- a/src/components/nav/Nav.js +++ b/src/components/nav/Nav.js @@ -1,23 +1,66 @@ import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; -import {Nav as RSNav} from 'reactstrap'; +import {default as RBNav} from 'react-bootstrap/Nav'; +import classNames from 'classnames'; + +const horizontalMap = { + start: 'justify-content-start', + center: 'justify-content-center', + end: 'justify-content-end', + around: 'justify-content-around', + between: 'justify-content-between' +}; + +const verticalMap = { + xs: 'flex-xs-column', + sm: 'flex-sm-column', + md: 'flex-md-column', + lg: 'flex-lg-column', + xl: 'flex-xl-column' +}; /** * Nav can be used to group together a collection of navigation links. */ const Nav = props => { - const {children, loading_state, className, class_name, ...otherProps} = props; + const { + children, + loading_state, + className, + class_name, + pills, + justified, + horizontal, + vertical, + navbar_scroll, + ...otherProps + } = props; + + const horizontalClass = horizontal && horizontalMap[horizontal]; + + const verticalClass = + vertical === true ? 'flex-column' : vertical && verticalMap[vertical]; + + const classes = classNames( + class_name || className, + horizontalClass, + verticalClass + ); + return ( - {children} - + ); }; @@ -100,6 +143,11 @@ Nav.propTypes = { */ navbar: PropTypes.bool, + /** + * Enable vertical scrolling within the toggleable contents of a collapsed Navbar. + */ + navbar_scroll: PropTypes.bool, + /** * Object that holds the loading state object coming from dash-renderer */ diff --git a/src/components/nav/NavItem.js b/src/components/nav/NavItem.js index f8c0cf55a..ac5783dfa 100644 --- a/src/components/nav/NavItem.js +++ b/src/components/nav/NavItem.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; -import {NavItem as RSNavItem} from 'reactstrap'; +import {default as RBNav} from 'react-bootstrap/Nav'; /** * Create a single item in a `Nav`. @@ -9,7 +9,7 @@ import {NavItem as RSNavItem} from 'reactstrap'; const NavItem = (props) => { const {children, loading_state, className, class_name, ...otherProps} = props; return ( - { } > {children} - + ); }; @@ -58,10 +58,6 @@ NavItem.propTypes = { */ key: PropTypes.string, - /** - * Apply active style to item. - */ - active: PropTypes.bool, /** * Object that holds the loading state object coming from dash-renderer diff --git a/src/components/nav/Navbar.js b/src/components/nav/Navbar.js index bc4a8dc61..224961d4d 100644 --- a/src/components/nav/Navbar.js +++ b/src/components/nav/Navbar.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; -import {Navbar as RSNavbar} from 'reactstrap'; +import {default as RBNavbar} from 'react-bootstrap/Navbar' import {bootstrapColors} from '../../private/BootstrapColors'; /** @@ -15,13 +15,18 @@ const Navbar = (props) => { loading_state, className, class_name, + light, + dark, + tag, ...otherProps } = props; const isBootstrapColor = bootstrapColors.has(color); return ( - { } > {children} - + ); }; @@ -92,16 +97,18 @@ Navbar.propTypes = { /** * Fix the navbar's position at the top or bottom of the page, options: top, bottom */ - fixed: PropTypes.string, + fixed: PropTypes.oneOf(['top', 'bottom']), /** - * Stick the navbar to the top or the bottom of the viewport, options: top, bottom + * Position the navbar at the top of the viewport, but only after scrolling past it. + * A convenience prop for the sticky-top positioning class. Not supported in <= IE11 + * and other older browsers * * With `sticky`, the navbar remains in the viewport when you scroll. By * contrast, with `fixed`, the navbar will remain at the top or bottom of - * the page. + * the page. sticky='top' */ - sticky: PropTypes.string, + sticky: PropTypes.oneOf(['top']), /** * Sets the color of the Navbar. Main options are primary, light and dark, default light. diff --git a/src/components/nav/NavbarBrand.js b/src/components/nav/NavbarBrand.js index 9873ba463..a3a8feb54 100644 --- a/src/components/nav/NavbarBrand.js +++ b/src/components/nav/NavbarBrand.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; -import {NavbarBrand as RSNavbarBrand} from 'reactstrap'; +import {default as RBNavbar} from 'react-bootstrap/Navbar' import Link from '../../private/Link'; /** @@ -10,16 +10,16 @@ import Link from '../../private/Link'; const NavbarBrand = (props) => { const {children, loading_state, className, class_name, ...otherProps} = props; return ( - {children} - + ); }; diff --git a/src/components/nav/NavbarCollapse.js b/src/components/nav/NavbarCollapse.js new file mode 100644 index 000000000..f6b2a70bb --- /dev/null +++ b/src/components/nav/NavbarCollapse.js @@ -0,0 +1,93 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import {omit} from 'ramda'; +import {default as RBNavbar} from 'react-bootstrap/Navbar'; + +/** + * Create a single item in a `Nav`. + */ +const NavbarCollapse = props => { + const { + children, + loading_state, + className, + class_name, + is_open, + ...otherProps + } = props; + return ( + + {children} + + ); +}; + +NavbarCollapse.propTypes = { + /** + * The ID of this component, used to identify dash components + * in callbacks. The ID needs to be unique across all of the + * components in an app. + */ + id: PropTypes.string, + + /** + * The children of this component + */ + children: PropTypes.node, + + /** + * Defines CSS styles which will override styles previously set. + */ + style: PropTypes.object, + + /** + * Often used with CSS to style elements with common properties. + */ + class_name: PropTypes.string, + + /** + * **DEPRECATED** Use `class_name` instead. + * + * Often used with CSS to style elements with common properties. + */ + className: PropTypes.string, + + /** + * Whether collapse is currently open. + */ + is_open: PropTypes.bool, + + /** + * A unique identifier for the component, used to improve + * performance by React.js while rendering components + * See https://reactjs.org/docs/lists-and-keys.html for more info + */ + key: PropTypes.string, + + /** + * Object that holds the loading state object coming from dash-renderer + */ + loading_state: PropTypes.shape({ + /** + * Determines if the component is loading or not + */ + is_loading: PropTypes.bool, + /** + * Holds which property is loading + */ + prop_name: PropTypes.string, + /** + * Holds the name of the component that is loading + */ + component_name: PropTypes.string + }) +}; + +export default NavbarCollapse; diff --git a/src/components/nav/NavbarSimple.js b/src/components/nav/NavbarSimple.js index 5fd83f8d6..c069b899f 100644 --- a/src/components/nav/NavbarSimple.js +++ b/src/components/nav/NavbarSimple.js @@ -1,7 +1,8 @@ import React, {useState} from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; -import {Collapse, Container, Navbar as RSNavbar} from 'reactstrap'; +import {default as RBNavbar} from 'react-bootstrap/Navbar' +import {Container} from 'react-bootstrap' import {bootstrapColors} from '../../private/BootstrapColors'; import Nav from './Nav'; @@ -22,6 +23,8 @@ const NavbarSimple = (props) => { links_left, fluid, color, + dark, + light, style, loading_state, className, @@ -35,7 +38,9 @@ const NavbarSimple = (props) => { const toggle = () => setNavbarOpen(!navbarOpen); return ( - { )} - -