New component Accordion

demo/Demo.js

@@ -202,8 +202,8 @@ const Demo = () => (
           <Card color="dark" outline={true}>
             <CardHeader>Header</CardHeader>
             <CardBody>
-              <h5 class_name="card-title">This card has a header</h5>
-              <p class_name="card-text">And some text in the body</p>
+              <h5 className="card-title">This card has a header</h5>
+              <p className="card-text">And some text in the body</p>
             </CardBody>
             <CardFooter>Footer</CardFooter>
           </Card>
@@ -215,25 +215,25 @@ const Demo = () => (
               src="https://images.pexels.com/photos/457882/pexels-photo-457882.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350"
             />
             <CardBody>
-              <h5 class_name="card-title">Card with image</h5>
-              <p class_name="card-text">This card has an image</p>
+              <h5 className="card-title">Card with image</h5>
+              <p className="card-text">This card has an image</p>
             </CardBody>
           </Card>
         </Col>
         <Col md={3}>
           <Card>
             <CardBody>
-              <h5 class_name="card-title">Here's another card</h5>
-              <p class_name="card-text">With some text, and a button</p>
+              <h5 className="card-title">Here's another card</h5>
+              <p className="card-text">With some text, and a button</p>
               <Button color="success">Click here</Button>
             </CardBody>
           </Card>
         </Col>
         <Col md={3}>
           <Card>
             <CardBody>
-              <h5 class_name="card-title">Here's yet another card</h5>
-              <p class_name="card-text">With some text, and some links</p>
+              <h5 className="card-title">Here's yet another card</h5>
+              <p className="card-text">With some text, and some links</p>
               <CardLink href="https://www.asidatascience.com">
                 External
               </CardLink>
@@ -247,17 +247,17 @@ const Demo = () => (
       <CardDeck>
         <Card>
           <CardBody>
-            <h5 class_name="card-title">The first card</h5>
-            <p class_name="card-text">
+            <h5 className="card-title">The first card</h5>
+            <p className="card-text">
               This is a card with some text on it, it's the first one in the
               deck.
             </p>
           </CardBody>
         </Card>
         <Card>
           <CardBody>
-            <h5 class_name="card-title">The second card</h5>
-            <p class_name="card-text">
+            <h5 className="card-title">The second card</h5>
+            <p className="card-text">
               This is a card with some text on it, it's the second one in the
               deck. It has a bit more text in it so that we can see how the
               vertical spacing will work.
@@ -266,9 +266,9 @@ const Demo = () => (
         </Card>
         <Card outline={true} color="primary">
           <CardBody>
-            <h5 class_name="card-title">The third card</h5>
-            <h6 class_name="card-subtitle">...and the last :(</h6>
-            <p class_name="card-text">This card doesn't have much text...</p>
+            <h5 className="card-title">The third card</h5>
+            <h6 className="card-subtitle">...and the last :(</h6>
+            <p className="card-text">This card doesn't have much text...</p>
             <Button color="danger">Click me</Button>
           </CardBody>
         </Card>
@@ -365,7 +365,7 @@ const Demo = () => (
       <FadeComponent>
         <Card>
           <CardBody>
-            <p class_name="card-text">This content fades in and out</p>
+            <p className="card-text">This content fades in and out</p>
           </CardBody>
         </Card>
       </FadeComponent>

docs/components_page/__init__.py

@@ -59,6 +59,7 @@ def _get_label(slug):
 
 def register_apps():
     component_bodies = {
+        "accordion": {"markdown_path": COMPONENTS / "accordion.md"},
         "alert": {"markdown_path": COMPONENTS / "alert.md"},
         "badge": {"markdown_path": COMPONENTS / "badge.md"},
         "button": {"markdown_path": COMPONENTS / "button.md"},

docs/components_page/components/__tests__/test_accordion.py

@@ -0,0 +1,68 @@
+"""
+Testing of callbacks in non-Python Accordion snippets.
+"""
+from pathlib import Path
+
+import dash.testing.wait as wait
+
+from .helpers import load_jl_app, load_r_app
+
+HERE = Path(__file__).parent
+
+
+def test_r_simple(dashr):
+    r_app = load_r_app((HERE.parent / "accordion" / "simple.R"), "accordion")
+    dashr.start_server(r_app)
+    check_simple_callbacks(dashr)
+
+
+def test_jl_simple(dashjl):
+    jl_app = load_jl_app(
+        (HERE.parent / "accordion" / "simple.jl"), "accordion"
+    )
+    dashjl.start_server(jl_app)
+    check_simple_callbacks(dashjl)
+
+
+def check_simple_callbacks(runner):
+    # Find the accordion object
+    accordion_comp = runner.find_element("#accordion")
+    accordion_text = runner.find_element("#accordion-contents")
+
+    # Check it has 3 page-items objects in it
+    pages = accordion_comp.find_elements(".accordion-item")
+    wait.until(
+        lambda: len(pages) == 3,
+        timeout=4,
+    )
+
+    # Click the third section
+    wait.until(
+        lambda: pages[2].find_elements(".accordion-collapse").text
+        == "This is the content of the third section",
+        timeout=4,
+    )
+    pages[2].find_elements(".accordion-button").click()
+
+    # Check the text in contents changes to "Item selected: item-2"
+    wait.until(
+        lambda: accordion_text.text == "Item selected: item-2",
+        timeout=4,
+    )
+
+    # Change the slider to value 1
+    runner.click_at_coord_fractions(
+        runner.find_element("#item-change"), 0.5, 0.25
+    )
+
+    # Check the text in contents changes to "Item selected: item-1"
+    wait.until(
+        lambda: accordion_text.text == "Item selected: item-1",
+        timeout=4,
+    )
+
+    # Check that the right section is showing
+    item = accordion_comp.find_element(".show")
+    wait.until(
+        lambda: item.text == "This is the content of the second section"
+    )

docs/components_page/components/accordion.md

@@ -0,0 +1,22 @@
+---
+title: Accordion
+lead: Use the Accordion component to create collapsible lists.
+---
+
+You can create an accordion using the `Accordion` and `AccordionItem` components. Each item in the accordion can be assiged a specific `item_id` which is used in the `active_item` property to determine which section is open. If no `item_id` is specified, the sections are labelled as `item-0`, `item-1`, ... consecutively. Each section header is determined by the `title` prop of the `AccordionItem`.
+
+{{example:components/accordion/simple.py:accordion}}
+
+## Start Collapsed
+
+You can set which item is opened when it is first started using the `active_item` property. If this is not defined, the first item will be open by default. If you want no items to be open on start up, you can specify `start_collapsed=True`.
+
+{{example:components/accordion/collapsed.py:accordion}}
+
+## Flush
+
+Add flush to change some of the styling, including removing borders, and rounding some of the edges to fit in line with the parent container.
+
+{{example:components/accordion/flush.py:accordion}}
+
+{{apidoc:src/components/accordion/Accordion.js}}

docs/components_page/components/accordion/collapsed.R

@@ -0,0 +1,22 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+accordion <- htmlDiv(
+    dbcAccordion(
+        list(
+            dbcAccordionItem(
+                "This is the content of the first section",
+                title="Item 1",
+            ),
+            dbcAccordionItem(
+                "This is the content of the second section",
+                title="Item 2",
+            ),
+            dbcAccordionItem(
+                "This is the content of the third section",
+                title="Item 3",
+            ),
+        ),
+        start_collapsed=TRUE,
+    ),
+)

docs/components_page/components/accordion/collapsed.jl

@@ -0,0 +1,21 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+accordion = html_div(
+    dbc_accordion(
+        [
+            dbc_accordionitem(
+                "This is the content of the first section",
+                title="Item 1",
+            ),
+            dbc_accordionitem(
+                "This is the content of the second section",
+                title="Item 2",
+            ),
+            dbc_accordionitem(
+                "This is the content of the third section",
+                title="Item 3",
+            ),
+        ],
+        start_collapsed=true,
+    ),
+)

docs/components_page/components/accordion/collapsed.py

@@ -0,0 +1,22 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+
+accordion = html.Div(
+    dbc.Accordion(
+        [
+            dbc.AccordionItem(
+                "This is the content of the first section",
+                title="Item 1",
+            ),
+            dbc.AccordionItem(
+                "This is the content of the second section",
+                title="Item 2",
+            ),
+            dbc.AccordionItem(
+                "This is the content of the third section",
+                title="Item 3",
+            ),
+        ],
+        start_collapsed=True,
+    ),
+)

docs/components_page/components/accordion/flush.R

@@ -0,0 +1,22 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+accordion <- htmlDiv(
+    dbcAccordion(
+        list(
+            dbcAccordionItem(
+                "This is the content of the first section",
+                title="Item 1",
+            ),
+            dbcAccordionItem(
+                "This is the content of the second section",
+                title="Item 2",
+            ),
+            dbcAccordionItem(
+                "This is the content of the third section",
+                title="Item 3",
+            ),
+        ),
+        flush=TRUE,
+    ),
+)

docs/components_page/components/accordion/flush.jl

@@ -0,0 +1,21 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+accordion = html_div(
+    dbc_accordion(
+        [
+            dbc_accordionitem(
+                "This is the content of the first section",
+                title="Item 1",
+            ),
+            dbc_accordionitem(
+                "This is the content of the second section",
+                title="Item 2",
+            ),
+            dbc_accordionitem(
+                "This is the content of the third section",
+                title="Item 3",
+            ),
+        ],
+        flush=true,
+    ),
+)

docs/components_page/components/accordion/flush.py

@@ -0,0 +1,22 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+
+accordion = html.Div(
+    dbc.Accordion(
+        [
+            dbc.AccordionItem(
+                "This is the content of the first section",
+                title="Item 1",
+            ),
+            dbc.AccordionItem(
+                "This is the content of the second section",
+                title="Item 2",
+            ),
+            dbc.AccordionItem(
+                "This is the content of the third section",
+                title="Item 3",
+            ),
+        ],
+        flush=True,
+    ),
+)

docs/components_page/components/accordion/simple.R

@@ -0,0 +1,55 @@
+library(dashBootstrapComponents)
+library(dashCoreComponents)
+library(dashHtmlComponents)
+
+accordion <- htmlDiv(
+    list(
+        htmlDiv("Select an item", id="accordion-contents"),
+        dbcAccordion(
+            list(
+                dbcAccordionItem(
+                    "This is the content of the first section",
+                    title="Item 1",
+                ),
+                dbcAccordionItem(
+                    "This is the content of the second section",
+                    title="Item 2",
+                ),
+                dbcAccordionItem(
+                    "This is the content of the third section",
+                    title="Item 3",
+                ),
+            ),
+            id="accordion",
+        ),
+        htmlDiv(
+            "Or set the open item dynamically using the slider below",
+            class_name="py-2",
+        ),
+        dccSlider(
+            id="item-change",
+            min=0,
+            max=2,
+            step=1,
+            value=0,
+            marks=list(0="0", 1="1", 2="2")
+        ),
+    )
+)
+
+
+@app.callback(
+    Output("accordion-contents", "children"),
+    [Input("accordion", "active_item")],
+)
+def change_item(item):
+    if item:
+        return f"Item selected: {item}"
+    return "Select an item"
+
+
+@app.callback(
+    Output("accordion", "active_item"), [Input("item-change", "value")]
+)
+def change_active_item(value):
+    return f"item-{value}"