fix(documentation): Fixed some minor documentation bugs.

Alexander Janet · Alexander Janet · commit 37061548e06e · 2019-03-11T09:30:56.000+13:00
diff --git a/src/Alert/index.js b/src/Alert/index.js
@@ -92,7 +92,10 @@ export const propTypes = {
   /**
    * Transition's duration used to dismiss alert automatically.
    */
-  autoHideDuration: PropTypes.number,
+  autoHideDuration: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
   /** Theme variables. */
   theme: PropTypes.shape({
     '$alert-padding-x': PropTypes.string,
diff --git a/src/Blockquote/index.js b/src/Blockquote/index.js
@@ -15,6 +15,8 @@ import mapToCssModules from 'map-to-css-modules';
 export const defaultProps = {
   tag: 'blockquote',
   theme: {
+    $spacer: '1rem',
+    '$spacer-halved': '0.5rem',
     '$blockquote-small-color': '#636c72',
     '$blockquote-font-size': '1.25rem',
     '$blockquote-border-color': '#eceeef',
@@ -32,6 +34,8 @@ export const propTypes = {
   tag: PropTypes.any,
   /** Theme variables. Can be: */
   theme: PropTypes.shape({
+    $spacer: PropTypes.string,
+    '$spacer-halved': PropTypes.string,
     '$blockquote-small-color': PropTypes.string,
     '$blockquote-font-size': PropTypes.string,
     '$blockquote-border-color': PropTypes.string,
diff --git a/src/Breadcrumb/index.js b/src/Breadcrumb/index.js
@@ -21,6 +21,7 @@ export const defaultProps = {
     '$breadcrumb-divider-color': '#636c72',
     '$breadcrumb-active-color': '#636c72',
     '$breadcrumb-divider': '"/"',
+    '$spacer-y': '1rem',
     '$enable-rounded': false,
   },
 };
@@ -42,6 +43,7 @@ export const propTypes = {
     '$breadcrumb-divider-color': PropTypes.string,
     '$breadcrumb-active-color': PropTypes.string,
     '$breadcrumb-divider': PropTypes.string,
+    '$spacer-y': PropTypes.string,
     '$enable-rounded': PropTypes.bool,
   }),
   /**
diff --git a/src/Code/index.js b/src/Code/index.js
@@ -18,6 +18,7 @@ export const defaultProps = {
     '$code-color': '#bd4147',
     '$code-bg': '#f7f7f9',
     '$enable-rounded': false,
+    '$font-family-monospace': 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
   },
 };
 export const propTypes = {
@@ -37,6 +38,7 @@ export const propTypes = {
     '$code-color': PropTypes.string,
     '$code-bg': PropTypes.string,
     '$enable-rounded': PropTypes.bool,
+    '$font-family-monospace': PropTypes.string,
   }),
 };
 class CodeUnstyled extends React.Component { // eslint-disable-line react/prefer-stateless-function
diff --git a/src/Collapse/index.md b/src/Collapse/index.md
@@ -5,6 +5,8 @@ Add react `state` and `handleClick` function or use directly our example below.
 `<Collapse />` component example:
 
 ```js
+console.log(Button)
+
 initialState = {
   isOpen: false,
 };
diff --git a/src/Dropdown/index.md b/src/Dropdown/index.md
@@ -1,21 +1,22 @@
 `<Dropdown />` component example:
 
 ```js
+console.log(Dropdown)
+
 initialState = {
   isOpen: false,
 };
-<div>
- <Dropdown isOpen={state.isOpen} toggle={() => setState({ isOpen: !state.isOpen })}>
-   <DropdownToggle caret>
-     Dropdown
-   </DropdownToggle>
-   <DropdownMenu>
-     <DropdownItem header>Header</DropdownItem>
-     <DropdownItem disabled>Disabled</DropdownItem>
-     <DropdownItem>Default item</DropdownItem>
-     <DropdownItem divider />
-     <DropdownItem>Another default item</DropdownItem>
-   </DropdownMenu>
- </Dropdown>
-</div>
+
+<Dropdown isOpen={state.isOpen} toggle={() => setState({ isOpen: !state.isOpen })}>
+ <DropdownToggle caret>
+   Dropdown
+ </DropdownToggle>
+ <DropdownMenu>
+   <DropdownItem header>Header</DropdownItem>
+   <DropdownItem disabled>Disabled</DropdownItem>
+   <DropdownItem>Default item</DropdownItem>
+   <DropdownItem divider />
+   <DropdownItem>Another default item</DropdownItem>
+ </DropdownMenu>
+</Dropdown>
 ```
diff --git a/src/Dt/index.js b/src/Dt/index.js
@@ -9,6 +9,7 @@ import { makeGridColumns } from '@bootstrap-styled/css-mixins/lib/grid-framework
 
 export const defaultProps = {
   theme: {
+    '$dt-font-weight': 'bold',
     '$grid-columns': '12',
     '$grid-gutter-width': '30px',
     '$grid-breakpoints': {
@@ -24,6 +25,7 @@ export const defaultProps = {
 export const propTypes = {
   /** Theme variables. Can be: */
   theme: PropTypes.shape({
+    '$dt-font-weight': PropTypes.string,
     '$grid-columns': PropTypes.string,
     '$grid-gutter-width': PropTypes.string,
     '$grid-breakpoints': PropTypes.object,
diff --git a/src/Form/index.js b/src/Form/index.js
@@ -440,6 +440,8 @@ const Form = styled(FormUnstyled)`
     */
 
     & .form-control-static {
+      display: block;
+      width: 100%;
       padding-top: ${props.theme['$input-padding-y']};
       padding-bottom: ${props.theme['$input-padding-y']};
       margin-bottom: 0; /* match inputs if this class comes on inputs with default margins */
diff --git a/src/H1/index.js b/src/H1/index.js
@@ -85,7 +85,6 @@ class H1Unstyled extends React.Component { // eslint-disable-line react/prefer-s
       lead,
       ...attributes
     } = omit(this.props, ['theme']);
-
     const classes = mapToCssModules(cn(
       className,
       lead ? 'lead' : false,
diff --git a/src/Hr/index.js b/src/Hr/index.js
@@ -4,13 +4,15 @@ import PropTypes from 'prop-types';
 
 export const defaultProps = {
   theme: {
+    '$spacer-y': '1rem',
     '$hr-border-width': '1px',
     '$hr-border-color': 'rgba(0, 0, 0, 0.1)',
   },
 };
 export const propTypes = {
   /** Theme variables. Can be: */
   theme: PropTypes.shape({
+    '$spacer-y': PropTypes.string,
     '$hr-border-width': PropTypes.string,
     '$hr-border-color': PropTypes.string,
   }),
diff --git a/src/Input/index.md b/src/Input/index.md
@@ -17,7 +17,7 @@ Different `<Input />` **type**:
 <Form>
   <FormGroup>
     <Label htmlFor="exampleEmail">Static</Label>
-    <Input static>Some static value</Input>
+    <Input static defaultValue="Some static value" />
   </FormGroup>
   <FormGroup>
     <Label htmlFor="exampleEmail">Email</Label>
diff --git a/src/Label/index.js b/src/Label/index.js
@@ -36,6 +36,7 @@ export const propTypes = {
   tag: PropTypes.any,
   /** Theme variables. Can be: */
   theme: PropTypes.shape({
+    '$label-margin-bottom': PropTypes.string,
     '$btn-padding-x': PropTypes.string,
     '$btn-padding-y': PropTypes.string,
     '$btn-line-height': PropTypes.string,
@@ -111,6 +112,7 @@ export const propTypes = {
 export const defaultProps = {
   tag: 'label',
   theme: {
+    '$label-margin-bottom': '.5rem',
     '$enable-rounded': true,
     '$enable-shadows': false,
     '$enable-hover-media-query': true,
diff --git a/src/Modal/index.js b/src/Modal/index.js
@@ -60,6 +60,7 @@ export const propTypes = {
     '$modal-title-line-height': PropTypes.string,
     '$modal-inner-padding': PropTypes.string,
     '$modal-footer-border-color': PropTypes.string,
+    '$modal-footer-border-width': PropTypes.string,
   }),
   /** Toggles opened CSS style. */
   isOpen: PropTypes.bool,
@@ -168,6 +169,7 @@ export const defaultProps = {
     '$modal-title-line-height': '1.5',
     '$modal-inner-padding': '15px',
     '$modal-footer-border-color': '#eceeef',
+    '$modal-footer-border-width': '1px',
   },
   fade: true,
   onOpened: null,
diff --git a/src/Table/index.js b/src/Table/index.js
@@ -18,6 +18,7 @@ export const defaultProps = {
   tag: 'table',
   responsiveTag: 'div',
   theme: {
+    $spacer: '1rem',
     '$body-bg': '#fff',
     '$table-cell-padding': '.75rem',
     '$table-sm-cell-padding': '.3rem',
@@ -67,6 +68,7 @@ export const propTypes = {
   responsiveTag: PropTypes.any,
   /** Theme variables. Can be: */
   theme: PropTypes.shape({
+    $spacer: PropTypes.string,
     '$body-bg': PropTypes.string,
     '$table-cell-padding': PropTypes.string,
     '$table-sm-cell-padding': PropTypes.string,
@@ -152,7 +154,7 @@ const Table = styled(TableUnstyled)`
     &.table {
       width: 100%;
       max-width: 100%;
-      margin-bottom: ${props.theme['$spacer']};
+      margin-bottom: ${props.theme.$spacer};
       background-color: ${props.theme['$table-bg']};
 
       th,
diff --git a/styleguide.config.js b/styleguide.config.js
@@ -1,5 +1,5 @@
-const pkg = require('./package.json');
 const { createConfig } = require('@rollup-umd/documentation');
+const pkg = require('./package.json');
 
 const config = createConfig({
   pagePerSection: true,
@@ -13,4 +13,3 @@ const config = createConfig({
 delete config.webpackConfig.resolve.alias[pkg.name];
 
 module.exports = config;
-
diff --git a/styleguide/setup.js b/styleguide/setup.js
@@ -5,10 +5,13 @@ import Option from '../src/Option';
 import Output from '../src/Output';
 import Section from '../src/Section';
 import TetherContent from '../src/TetherContent';
+import Dropdown from '../src/Dropdown';
+
 global.BootstrapProvider = BootstrapProvider;
 global.Col = Col;
 global.Label = Label;
 global.Option = Option;
 global.Output = Output;
 global.Section = Section;
 global.TetherContent = TetherContent;
+global.Dropdown = Dropdown;
diff --git a/styleguide/styleguide.ext.json b/styleguide/styleguide.ext.json
@@ -78,7 +78,6 @@
             "src/Fieldset/index.js",
             "src/Footer/index.js",
             "src/H1/index.js",
-            "src/H1/index.js",
             "src/H2/index.js",
             "src/H3/index.js",
             "src/H4/index.js",
