[Timeline] Introduce new component

docs/pages/api-docs/timeline-connector.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'api/timeline-connector';
+const requireRaw = require.context('!raw-loader!./', false, /\/timeline-connector\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/timeline-connector.md

@@ -0,0 +1,55 @@
+---
+filename: /packages/material-ui-lab/src/TimelineConnector/TimelineConnector.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# TimelineConnector API
+
+<p class="description">The API documentation of the TimelineConnector React component. Learn more about the props and the CSS customization points.</p>
+
+## Import
+
+```js
+import TimelineConnector from '@material-ui/lab/TimelineConnector';
+// or
+import { TimelineConnector } from '@material-ui/lab';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+## Component name
+
+The `MuiTimelineConnector` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element (native element).
+
+## CSS
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiTimelineConnector-root</span> | Styles applied to the root element.
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
+- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
+- With a theme and an [`overrides` property](/customization/globals/#css).
+
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/TimelineConnector/TimelineConnector.js) for more detail.
+
+## Demos
+
+- [Timeline](/components/timeline/)
+

docs/pages/api-docs/timeline-content.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'api/timeline-content';
+const requireRaw = require.context('!raw-loader!./', false, /\/timeline-content\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/timeline-content.md

@@ -0,0 +1,56 @@
+---
+filename: /packages/material-ui-lab/src/TimelineContent/TimelineContent.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# TimelineContent API
+
+<p class="description">The API documentation of the TimelineContent React component. Learn more about the props and the CSS customization points.</p>
+
+## Import
+
+```js
+import TimelineContent from '@material-ui/lab/TimelineContent';
+// or
+import { TimelineContent } from '@material-ui/lab';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+## Component name
+
+The `MuiTimelineContent` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element (native element).
+
+## CSS
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiTimelineContent-root</span> | Styles applied to the root element.
+| <span class="prop-name">alignRight</span> | <span class="prop-name">.MuiTimelineContent-alignRight</span> | Styles applied to the root element if `align="right"`.
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
+- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
+- With a theme and an [`overrides` property](/customization/globals/#css).
+
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/TimelineContent/TimelineContent.js) for more detail.
+
+## Demos
+
+- [Timeline](/components/timeline/)
+

docs/pages/api-docs/timeline-dot.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'api/timeline-dot';
+const requireRaw = require.context('!raw-loader!./', false, /\/timeline-dot\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/timeline-dot.md

@@ -0,0 +1,63 @@
+---
+filename: /packages/material-ui-lab/src/TimelineDot/TimelineDot.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# TimelineDot API
+
+<p class="description">The API documentation of the TimelineDot React component. Learn more about the props and the CSS customization points.</p>
+
+## Import
+
+```js
+import TimelineDot from '@material-ui/lab/TimelineDot';
+// or
+import { TimelineDot } from '@material-ui/lab';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+## Component name
+
+The `MuiTimelineDot` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">color</span> | <span class="prop-type">'grey'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'</span> | <span class="prop-default">'grey'</span> | The dot can have a different colors. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'outlined'</span> | <span class="prop-default">'default'</span> | The dot can appear filled or outlined. |
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element (native element).
+
+## CSS
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiTimelineDot-root</span> | Styles applied to the root element.
+| <span class="prop-name">defaultGrey</span> | <span class="prop-name">.MuiTimelineDot-defaultGrey</span> | Styles applied to the root element if `color="grey"` and `variant="default"`.
+| <span class="prop-name">outlinedGrey</span> | <span class="prop-name">.MuiTimelineDot-outlinedGrey</span> | Styles applied to the root element if `color="grey"` and `variant="outlined"`.
+| <span class="prop-name">defaultPrimary</span> | <span class="prop-name">.MuiTimelineDot-defaultPrimary</span> | Styles applied to the root element if `color="primary"` and `variant="default"`.
+| <span class="prop-name">outlinedPrimary</span> | <span class="prop-name">.MuiTimelineDot-outlinedPrimary</span> | Styles applied to the root element if `color="primary"` and `variant="outlined"`.
+| <span class="prop-name">defaultSecondary</span> | <span class="prop-name">.MuiTimelineDot-defaultSecondary</span> | Styles applied to the root element if `color="secondary"` and `variant="default"`.
+| <span class="prop-name">outlinedSecondary</span> | <span class="prop-name">.MuiTimelineDot-outlinedSecondary</span> | Styles applied to the root element if `color="secondary"` and `variant="outlined"`.
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
+- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
+- With a theme and an [`overrides` property](/customization/globals/#css).
+
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/TimelineDot/TimelineDot.js) for more detail.
+
+## Demos
+
+- [Timeline](/components/timeline/)
+

docs/pages/api-docs/timeline-item.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'api/timeline-item';
+const requireRaw = require.context('!raw-loader!./', false, /\/timeline-item\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/timeline-item.md

@@ -0,0 +1,61 @@
+---
+filename: /packages/material-ui-lab/src/TimelineItem/TimelineItem.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# TimelineItem API
+
+<p class="description">The API documentation of the TimelineItem React component. Learn more about the props and the CSS customization points.</p>
+
+## Import
+
+```js
+import TimelineItem from '@material-ui/lab/TimelineItem';
+// or
+import { TimelineItem } from '@material-ui/lab';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+## Component name
+
+The `MuiTimelineItem` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element (native element).
+
+## CSS
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiTimelineItem-root</span> | Styles applied to the root element.
+| <span class="prop-name">alignLeft</span> | <span class="prop-name">.MuiTimelineItem-alignLeft</span> | Styles applied to the root element if `align="left"`.
+| <span class="prop-name">alignRight</span> | <span class="prop-name">.MuiTimelineItem-alignRight</span> | Styles applied to the root element if `align="right"`.
+| <span class="prop-name">alignAlternate</span> | <span class="prop-name">.MuiTimelineItem-alignAlternate</span> | Styles applied to the root element if `align="alternate"`.
+| <span class="prop-name">missingOppositeContent</span> | <span class="prop-name">.MuiTimelineItem-missingOppositeContent</span> | Styles applied to the root element if no there isn't TimelineOppositeContent provided.
+| <span class="prop-name">content</span> | <span class="prop-name">.MuiTimelineItem-content</span> | Styles applied to the timeline content node.
+| <span class="prop-name">oppositeContent</span> | <span class="prop-name">.MuiTimelineItem-oppositeContent</span> | Styles applied to the timeline opposite content node.
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
+- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
+- With a theme and an [`overrides` property](/customization/globals/#css).
+
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/TimelineItem/TimelineItem.js) for more detail.
+
+## Demos
+
+- [Timeline](/components/timeline/)
+

docs/pages/api-docs/timeline-opposite-content.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'api/timeline-opposite-content';
+const requireRaw = require.context('!raw-loader!./', false, /\/timeline-opposite-content\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/timeline-opposite-content.md

@@ -0,0 +1,56 @@
+---
+filename: /packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# TimelineOppositeContent API
+
+<p class="description">The API documentation of the TimelineOppositeContent React component. Learn more about the props and the CSS customization points.</p>
+
+## Import
+
+```js
+import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
+// or
+import { TimelineOppositeContent } from '@material-ui/lab';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+## Component name
+
+The `MuiTimelineOppositeContent` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element (native element).
+
+## CSS
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiTimelineOppositeContent-root</span> | Styles applied to the root element.
+| <span class="prop-name">alignRight</span> | <span class="prop-name">.MuiTimelineOppositeContent-alignRight</span> | Styles applied to the root element if `align="right"`.
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
+- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
+- With a theme and an [`overrides` property](/customization/globals/#css).
+
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js) for more detail.
+
+## Demos
+
+- [Timeline](/components/timeline/)
+

docs/pages/api-docs/timeline-separator.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'api/timeline-separator';
+const requireRaw = require.context('!raw-loader!./', false, /\/timeline-separator\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};