Improved Tabs component

.babelrc

@@ -1,3 +1,6 @@
 {
-    "extends": "./node_modules/dash-components-archetype/config/babel/babelrc"
+    "extends": "./node_modules/dash-components-archetype/config/babel/babelrc",
+    "plugins": [
+        "styled-jsx/babel"
+      ]
 }

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.24.0] - UNRELEASED
+### Added
+- New Tabs and Tab components!
+
 ## [0.23.0]
 ### Added
 - Upgraded Plotly.js, the underlying library behind the

dash_core_components/__init__.py

@@ -32,7 +32,7 @@
         'external_url': (
             'https://unpkg.com/dash-core-components@{}'
             '/dash_core_components/bundle.js'
-        ).format(__version__),
+        ).format('0.24.0-rc6'),
         'namespace': 'dash_core_components'
     }
 ]
@@ -51,7 +51,7 @@
             'https://unpkg.com/[email protected]/styles.css',
             'https://unpkg.com/[email protected]/styles.css',
             'https://unpkg.com/[email protected]/assets/index.css',
-            'https://unpkg.com/dash-core-components@{}/dash_core_components/[email protected]'.format(__version__)
+            'https://unpkg.com/dash-core-components@{}/dash_core_components/[email protected]'.format('0.24.0-rc6')
         ],
         'namespace': 'dash_core_components'
     }

dash_core_components/metadata.json

@@ -139,73 +139,6 @@
       }
     }
   },
-  "src/components/Confirm.react.js": {
-    "description": "Confirm wraps window.confirm",
-    "displayName": "Confirm",
-    "methods": [],
-    "props": {
-      "id": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": ""
-      },
-      "message": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": ""
-      },
-      "init": {
-        "type": {
-          "name": "shape",
-          "value": {
-            "value": {
-              "name": "any",
-              "required": false
-            },
-            "ask": {
-              "name": "bool",
-              "required": false
-            }
-          }
-        },
-        "required": false,
-        "description": ""
-      },
-      "result": {
-        "type": {
-          "name": "shape",
-          "value": {
-            "timestamp": {
-              "name": "custom",
-              "raw": "PropTypes.integer",
-              "required": false
-            },
-            "value": {
-              "name": "any",
-              "required": false
-            }
-          }
-        },
-        "required": false,
-        "description": "",
-        "defaultValue": {
-          "value": "{\n    timestamp: -1\n}",
-          "computed": false
-        }
-      },
-      "setProps": {
-        "type": {
-          "name": "func"
-        },
-        "required": false,
-        "description": "Dash-assigned callback that gets fired when the value changes."
-      }
-    }
-  },
   "src/components/DatePickerRange.react.js": {
     "description": "DatePickerRange is a tailor made component designed for selecting\ntimespan across multiple days off of a calendar.\n\nThe DatePicker integrates well with the Python datetime module with the\nstartDate and endDate being returned in a string format suitable for\ncreating datetime objects.\n\nThis component is based off of Airbnb's react-dates react component\nwhich can be found here: https://github.com/airbnb/react-dates",
     "displayName": "DatePickerRange",
@@ -2489,6 +2422,224 @@
       }
     }
   },
+  "src/components/Tab.react.js": {
+    "description": "",
+    "methods": [],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "The ID of this component, used to identify dash components\nin callbacks. The ID needs to be unique across all of the\ncomponents in an app."
+      },
+      "label": {
+        "type": {
+          "name": "custom",
+          "raw": "PropTypes.children"
+        },
+        "required": false,
+        "description": "The tab's label"
+      },
+      "children": {
+        "type": {
+          "name": "node"
+        },
+        "required": false,
+        "description": "The content of the tab - will only be displayed if this tab is selected"
+      },
+      "value": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "Value for determining which Tab is currently selected"
+      },
+      "disabled": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "Determines if tab is disabled or not - defaults to false",
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        }
+      },
+      "disabled_style": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": "Overrides the default (inline) styles when disabled",
+        "defaultValue": {
+          "value": "{\n  color: '#d6d6d6'\n}",
+          "computed": false
+        }
+      },
+      "disabled_className": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "Appends a class to the Tab component when it is disabled."
+      },
+      "className": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "Appends a class to the Tab component."
+      },
+      "selected_className": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "Appends a class to the Tab component when it is selected."
+      },
+      "style": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": "Overrides the default (inline) styles for the Tab component."
+      },
+      "selected_style": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": "Overrides the default (inline) styles for the Tab component when it is selected."
+      }
+    }
+  },
+  "src/components/Tabs.react.js": {
+    "description": "A Dash component that lets you render pages with tabs - the Tabs component's children\ncan be dcc.Tab components, which can hold a label that will be displayed as a tab, and can in turn hold\nchildren components that will be that tab's content.",
+    "displayName": "Tabs",
+    "methods": [
+      {
+        "name": "selectHandler",
+        "docblock": null,
+        "modifiers": [],
+        "params": [
+          {
+            "name": "value",
+            "type": null
+          }
+        ],
+        "returns": null
+      }
+    ],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "The ID of this component, used to identify dash components\nin callbacks. The ID needs to be unique across all of the\ncomponents in an app."
+      },
+      "value": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "The value of the currently selected Tab"
+      },
+      "className": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "Appends a class to the Tabs container holding the individual Tab components."
+      },
+      "content_className": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "Appends a class to the Tab content container holding the children of the Tab that is selected."
+      },
+      "parent_className": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "Appends a class to the top-level parent container holding both the Tabs container and the content container."
+      },
+      "style": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": "Appends (inline) styles to the Tabs container holding the individual Tab components."
+      },
+      "parent_style": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": "Appends (inline) styles to the top-level parent container holding both the Tabs container and the content container."
+      },
+      "content_style": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": "Appends (inline) styles to the tab content container holding the children of the Tab that is selected."
+      },
+      "vertical": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "Renders the tabs vertically (on the side)"
+      },
+      "mobile_breakpoint": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "Breakpoint at which tabs are rendered full width (can be 0 if you don't want full width tabs on mobile)",
+        "defaultValue": {
+          "value": "800",
+          "computed": false
+        }
+      },
+      "children": {
+        "type": {
+          "name": "node"
+        },
+        "required": false,
+        "description": "Array that holds Tab components"
+      },
+      "colors": {
+        "type": {
+          "name": "shape",
+          "value": {
+            "border": {
+              "name": "string",
+              "required": false
+            },
+            "primary": {
+              "name": "string",
+              "required": false
+            },
+            "background": {
+              "name": "string",
+              "required": false
+            }
+          }
+        },
+        "required": false,
+        "description": "Holds the colors used by the Tabs and Tab components. If you set these, you should specify colors for all properties, so: \ncolors: {\n   border: '#d6d6d6',\n   primary: '#1975FA',\n   background: '#f9f9f9'\n }",
+        "defaultValue": {
+          "value": "{\n  border: '#d6d6d6',\n  primary: '#1975FA',\n  background: '#f9f9f9'\n}",
+          "computed": false
+        }
+      }
+    }
+  },
   "src/components/Textarea.react.js": {
     "description": "A basic HTML textarea for entering multiline text.",
     "displayName": "Textarea",

dash_core_components/version.py

@@ -1 +1 @@
-__version__ = '0.23.0'
+__version__ = '0.24.0rc6'

demo/index.html

@@ -1,22 +1,26 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.css"/>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/theme/xq-light.min.css"/>
-        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/react-select.css"/>
-        <link rel="stylesheet" href="https://cdn.rawgit.com/chriddyp/abcbc02565dd495b676c3269240e09ca/raw/816de7d5c5d5626e3f3cac8e967070aa15da77e2/rc-slider.css"/>
-    </head>
 
-    <body>
-        <div id="react-demo-entry-point"></div>
-    </body>
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.css" />
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/theme/xq-light.min.css" />
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/react-select.css" />
+    <link rel="stylesheet" href="https://cdn.rawgit.com/chriddyp/abcbc02565dd495b676c3269240e09ca/raw/816de7d5c5d5626e3f3cac8e967070aa15da77e2/rc-slider.css"
+    />
+</head>
 
-    <footer>
-        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.js"></script>
-        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/mode/javascript/javascript.min.js"></script>
-        <script type="text/javascript" src="https://unpkg.com/react@15/dist/react.js"></script>
-        <script type="text/javascript" src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
-        <script type="text/javascript" src="/lib/bundle.js"></script>
-    </footer>
-</html>
+<body>
+    <div id="react-demo-entry-point"></div>
+</body>
+
+<footer>
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.js"></script>
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/mode/javascript/javascript.min.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/react@15/dist/react.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
+    <script type="text/javascript" src="/lib/bundle.js"></script>
+</footer>
+
+</html>