Add spinners

docs/components_page/components/spinner/__init__.py

@@ -0,0 +1,72 @@
+from pathlib import Path
+
+import dash_core_components as dcc
+import dash_html_components as html
+
+from ...api_doc import ApiDoc
+from ...helpers import ExampleContainer, HighlightedSource
+from ...metadata import get_component_metadata
+from .button import spinners as spinners_button
+from .grow import spinners as spinners_grow
+from .simple import spinners as spinners_simple
+from .size import spinners as spinners_size
+
+HERE = Path(__file__).parent
+
+spinners_simple_source = (HERE / "simple.py").read_text()
+spinners_grow_source = (HERE / "grow.py").read_text()
+spinners_size_source = (HERE / "size.py").read_text()
+spinners_button_source = (HERE / "button.py").read_text()
+
+content = [
+    html.H2("Spinners", className="display-4"),
+    html.P(
+        dcc.Markdown(
+            "Indicate the loading state of a component or page with the "
+            "`Spinner` component."
+        ),
+        className="lead",
+    ),
+    html.H4("Basic usage"),
+    html.P(
+        dcc.Markdown(
+            "By default, `Spinner` uses the current text color for its border "
+            "color. Override the color of the `Spinner` using the `color` "
+            "argument and one of the eight supported contextual color names."
+        )
+    ),
+    ExampleContainer(spinners_simple),
+    HighlightedSource(spinners_simple_source),
+    html.H4("Growing spinners"),
+    html.P(
+        dcc.Markdown(
+            "There are two types of spinner, border and grow. Border spinners "
+            "are the default and can be seen above. To use grow spinners set "
+            '`type="grow"`.'
+        )
+    ),
+    ExampleContainer(spinners_grow),
+    HighlightedSource(spinners_grow_source),
+    html.H4("Size"),
+    html.P(
+        dcc.Markdown(
+            'Create a small spinner with `size="sm"` or use inline style '
+            "arguments for full control of the size of the spinner."
+        )
+    ),
+    ExampleContainer(spinners_size),
+    HighlightedSource(spinners_size_source),
+    html.H4("Buttons"),
+    html.P(
+        dcc.Markdown(
+            "The `Spinner` component can be used inside buttons to indicate "
+            "that an action is currently processing or taking place."
+        )
+    ),
+    ExampleContainer(spinners_button),
+    HighlightedSource(spinners_button_source),
+    ApiDoc(
+        get_component_metadata("src/components/Spinner.js"),
+        component_name="Spinner",
+    ),
+]

docs/components_page/components/spinner/button.py

@@ -0,0 +1,18 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+
+spinners = html.Div(
+    [
+        dbc.Button(
+            dbc.Spinner(size="sm"),
+            color="primary",
+            disabled=True,
+            className="mr-1",
+        ),
+        dbc.Button(
+            [dbc.Spinner(size="sm"), " Loading..."],
+            color="primary",
+            disabled=True,
+        ),
+    ]
+)

docs/components_page/components/spinner/grow.py

@@ -0,0 +1,15 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+
+spinners = html.Div(
+    [
+        dbc.Spinner(color="primary", type="grow"),
+        dbc.Spinner(color="secondary", type="grow"),
+        dbc.Spinner(color="success", type="grow"),
+        dbc.Spinner(color="warning", type="grow"),
+        dbc.Spinner(color="danger", type="grow"),
+        dbc.Spinner(color="info", type="grow"),
+        dbc.Spinner(color="light", type="grow"),
+        dbc.Spinner(color="dark", type="grow"),
+    ]
+)

docs/components_page/components/spinner/simple.py

@@ -0,0 +1,15 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+
+spinners = html.Div(
+    [
+        dbc.Spinner(color="primary"),
+        dbc.Spinner(color="secondary"),
+        dbc.Spinner(color="success"),
+        dbc.Spinner(color="warning"),
+        dbc.Spinner(color="danger"),
+        dbc.Spinner(color="info"),
+        dbc.Spinner(color="light"),
+        dbc.Spinner(color="dark"),
+    ]
+)

docs/components_page/components/spinner/size.py

@@ -0,0 +1,10 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+
+spinners = html.Div(
+    [
+        dbc.Spinner(size="sm"),
+        html.Hr(),
+        dbc.Spinner(style={"width": "3rem", "height": "3rem"}),
+    ]
+)

docs/components_page/page.py

@@ -19,6 +19,7 @@
 from .components.navbar import get_content as get_navbar_content
 from .components.popover import get_content as get_popover_content
 from .components.progress import get_content as get_progress_content
+from .components.spinner import content as spinner_content
 from .components.table import content as table_content
 from .components.tabs import get_content as get_tabs_content
 from .components.tooltip import content as tooltip_content
@@ -56,6 +57,7 @@
     SidebarEntry("navbar", "Navbar"),
     SidebarEntry("popover", "Popover"),
     SidebarEntry("progress", "Progress"),
+    SidebarEntry("spinner", "Spinners"),
     SidebarEntry("table", "Table"),
     SidebarEntry("tabs", "Tabs"),
     SidebarEntry("tooltip", "Tooltip"),
@@ -93,6 +95,7 @@ def __init__(self, app):
             "navbar": get_navbar_content(self._app),
             "popover": get_popover_content(self._app),
             "progress": get_progress_content(self._app),
+            "spinner": spinner_content,
             "table": table_content,
             "tabs": get_tabs_content(self._app),
             "tooltip": tooltip_content,

src/components/Spinner.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Spinner as RSSpinner} from 'reactstrap';
+
+const Spinner = props => {
+  const {children, ...otherProps} = props;
+  return <RSSpinner {...otherProps}>{children}</RSSpinner>;
+};
+
+Spinner.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.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Spinner color, options: primary, secondary, success, info, warning, danger,
+   * link. If not specified will default to text colour.
+   */
+  color: PropTypes.string,
+
+  /**
+   * The type of spinner. Options 'border' and 'grow'. Default 'border'.
+   */
+  type: PropTypes.string,
+
+  /**
+   * The spinner size. Options are 'sm', 'md' and 'lg'.
+   */
+  size: PropTypes.string
+};
+
+export default Spinner;

src/index.js

@@ -57,6 +57,7 @@ export {default as Progress} from './components/Progress';
 export {default as RadioItems} from './components/input/RadioItems';
 export {default as RadioButton} from './components/input/RadioButton';
 export {default as Row} from './components/layout/Row';
+export {default as Spinner} from './components/Spinner';
 export {default as Tab} from './components/tabs/Tab';
 export {default as Tabs} from './components/tabs/Tabs';
 export {default as Table} from './components/Table';