Add EuiTimeline

src-docs/src/routes.js

@@ -215,6 +215,8 @@ import { TextDiffExample } from './views/text_diff/text_diff_example';
 
 import { TextExample } from './views/text/text_example';
 
+import { TimelineExample } from './views/timeline/timeline_example';
+
 import { TitleExample } from './views/title/title_example';
 
 import { ToastExample } from './views/toast/toast_example';
@@ -496,6 +498,7 @@ const navigation = [
       ProgressExample,
       StatExample,
       TextExample,
+      TimelineExample,
       TitleExample,
       ToastExample,
       ToolTipExample,

src-docs/src/views/avatar/avatar_icon.js

@@ -21,7 +21,12 @@ export default () => {
        
       <EuiAvatar size="m" name="Medium size" iconType="managementApp" />
       &emsp;
-      <EuiAvatar size="l" name="Large" iconType="managementApp" />
+      <EuiAvatar
+        size="l"
+        color="subdued"
+        name="Large"
+        iconType="managementApp"
+      />
       &emsp;
       <EuiAvatar
         size="xl"

src-docs/src/views/timeline/timeline.tsx

@@ -0,0 +1,44 @@
+import React, { ReactElement } from 'react';
+import {
+  EuiTimeline,
+  EuiTimelineProps,
+  EuiText,
+  EuiAvatar,
+  EuiPanel,
+} from '../../../../src/components';
+
+const wrapper = (children: ReactElement) => (
+  <EuiPanel paddingSize="none" color="transparent">
+    <EuiText size="s">{children}</EuiText>
+  </EuiPanel>
+);
+
+const items: EuiTimelineProps['items'] = [
+  {
+    icon: <EuiAvatar name="email" iconType="email" color="subdued" />,
+    verticalAlign: 'center',
+    children: wrapper(
+      <p>
+        <strong>janet@elastic.co</strong> was invited to the project
+      </p>
+    ),
+  },
+  {
+    icon: <EuiAvatar name="pencil" iconType="pencil" color="subdued" />,
+    verticalAlign: 'center',
+    children: wrapper(
+      <p>
+        The project was renamed to <strong>Revenue Dashboard</strong>
+      </p>
+    ),
+  },
+  {
+    icon: (
+      <EuiAvatar name="folder closed" iconType="folderClosed" color="subdued" />
+    ),
+    verticalAlign: 'center',
+    children: wrapper(<p>The project was archived</p>),
+  },
+];
+
+export default () => <EuiTimeline items={items} />;

src-docs/src/views/timeline/timeline_complex.tsx

@@ -0,0 +1,157 @@
+import React, { useState } from 'react';
+import {
+  EuiTimelineItem,
+  EuiAvatar,
+  EuiText,
+  EuiSwitch,
+  EuiAccordion,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiBadge,
+  EuiTitle,
+  EuiSplitPanel,
+  EuiPanel,
+  EuiHorizontalRule,
+} from '../../../../src/components';
+
+import {
+  useGeneratedHtmlId,
+  euiPaletteColorBlind,
+} from '../../../../src/services';
+
+export default () => {
+  const [checked1, setChecked1] = useState(false);
+  const [checked2, setChecked2] = useState(false);
+  const [checked3, setChecked3] = useState(false);
+  const buttonElementAccordionId = useGeneratedHtmlId({
+    prefix: 'buttonElementAccordion',
+  });
+
+  const onChange1 = (e: {
+    target: { checked: React.SetStateAction<boolean> };
+  }) => {
+    setChecked1(e.target.checked);
+  };
+
+  const onChange2 = (e: {
+    target: { checked: React.SetStateAction<boolean> };
+  }) => {
+    setChecked2(e.target.checked);
+  };
+
+  const onChange3 = (e: {
+    target: { checked: React.SetStateAction<boolean> };
+  }) => {
+    setChecked3(e.target.checked);
+  };
+
+  const phase = (
+    title: string,
+    checked: boolean,
+    onChange: any,
+    avatarColor: string
+  ) => (
+    <EuiTimelineItem
+      icon={
+        checked ? (
+          <EuiAvatar
+            size="m"
+            name="check icon"
+            iconType="check"
+            color={avatarColor}
+          />
+        ) : (
+          <EuiAvatar size="s" name="dot icon" iconType="dot" color="subdued" />
+        )
+      }
+    >
+      <EuiSplitPanel.Outer color="transparent" hasBorder grow>
+        <EuiSplitPanel.Inner color={checked ? 'transparent' : 'subdued'}>
+          <EuiFlexGroup alignItems="center" gutterSize="s">
+            <EuiFlexItem grow={false}>
+              <EuiSwitch
+                showLabel={false}
+                label={checked ? `${title} is on` : `${title} is off`}
+                checked={checked}
+                onChange={onChange}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiTitle size="s">
+                <h2>{title}</h2>
+              </EuiTitle>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiSplitPanel.Inner>
+        <EuiHorizontalRule margin="none" />
+        <EuiSplitPanel.Inner>
+          <EuiText size="s" grow={false}>
+            <p>
+              Move data to the cold tier when you are searching it less often
+              and don’t need to update it. The cold tier is optimized for cost
+              savings over search performance.
+            </p>
+          </EuiText>
+
+          {checked && (
+            <>
+              <EuiSpacer />
+              <EuiAccordion
+                id={buttonElementAccordionId}
+                buttonElement="div"
+                buttonContent="Advanced settings"
+              >
+                <EuiPanel color="transparent">
+                  Any content inside of <strong>EuiAccordion</strong> will
+                  appear here.
+                </EuiPanel>
+              </EuiAccordion>
+            </>
+          )}
+        </EuiSplitPanel.Inner>
+      </EuiSplitPanel.Outer>
+    </EuiTimelineItem>
+  );
+
+  return (
+    <div>
+      <EuiTimelineItem
+        icon={
+          <EuiAvatar
+            size="m"
+            name="check icon"
+            iconType="check"
+            color={euiPaletteColorBlind()[0]}
+          />
+        }
+      >
+        <EuiSplitPanel.Outer color="transparent" hasBorder grow>
+          <EuiSplitPanel.Inner>
+            <EuiTitle size="s">
+              <h2>
+                Hot phase <EuiBadge color="warning">Required</EuiBadge>
+              </h2>
+            </EuiTitle>
+          </EuiSplitPanel.Inner>
+          <EuiHorizontalRule margin="none" />
+          <EuiSplitPanel.Inner>
+            <EuiText grow={false} size="s">
+              <p>
+                Store your most recent, most frequently-searched data in the hot
+                tier. The hot tier provides the best indexing and search
+                performance by using the most powerful, expensive hardware.
+              </p>
+            </EuiText>
+          </EuiSplitPanel.Inner>
+        </EuiSplitPanel.Outer>
+      </EuiTimelineItem>
+
+      {phase('Warm phase', checked1, onChange1, euiPaletteColorBlind()[1])}
+
+      {phase('Cold phase', checked2, onChange2, euiPaletteColorBlind()[2])}
+
+      {phase('Frozen phase', checked3, onChange3, euiPaletteColorBlind()[3])}
+    </div>
+  );
+};

src-docs/src/views/timeline/timeline_example.js

@@ -0,0 +1,147 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { GuideSectionTypes } from '../../components';
+
+import {
+  EuiCode,
+  EuiTimeline,
+  EuiTimelineItem,
+} from '../../../../src/components';
+
+import Timeline from './timeline';
+const timelineSource = require('!!raw-loader!./timeline');
+const timelineSnippet = `<EuiTimeline
+  timelines={[
+    {
+      icon: icon,
+      children: content,
+    },
+]}
+/>`;
+
+import TimelineItem from './timeline_item';
+const timelineItemSource = require('!!raw-loader!./timeline_item');
+const timelineItemSnippet = `<EuiTimelineItem icon={icon}>
+  {content}
+</EuiTimeline>`;
+
+import TimelineItemEvent from './timeline_item_event';
+const timelineItemEventSource = require('!!raw-loader!./timeline_item_event');
+const timelineItemEventSnippet = `<EuiTimelineItem icon={icon}>
+  <EuiPanel paddingSize="none" color="transparent">
+    <EuiText size="s">
+      <p>
+        <strong>Janet</strong> edited the dashboard 4 days ago
+      </p>
+    </EuiText>
+  </EuiPanel>
+</EuiTimeline>`;
+
+import TimelineComplex from './timeline_complex';
+const TimelineComplexSource = require('!!raw-loader!./timeline_complex');
+
+export const TimelineExample = {
+  title: 'Timeline',
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: timelineSource,
+        },
+      ],
+      text: (
+        <div>
+          The <strong>EuiTimeline</strong> is a component that standardizes the
+          way a timeline thread is displayed. Pass an array of{' '}
+          <strong>EuiTimelineItem</strong> objects and{' '}
+          <strong>EuiTimeline</strong> will generate a timeline thread.
+        </div>
+      ),
+      props: { EuiTimeline, EuiTimelineItem },
+      snippet: timelineSnippet,
+      demo: <Timeline />,
+    },
+    {
+      title: 'Timeline item',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: timelineItemSource,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            Use <strong>EuiTimelineItem</strong> to display timeline items. Each{' '}
+            <strong>EuiTimelineItem</strong> has two parts: an icon on the left
+            side and an event on the right side. To create an item you basically
+            need the following props:
+          </p>
+          <ul>
+            <li>
+              <EuiCode>icon</EuiCode>: main icon that appears on the left side.
+            </li>
+            <li>
+              <EuiCode>children</EuiCode>: event content. You can pass any node.
+            </li>
+          </ul>
+        </>
+      ),
+      props: { EuiTimelineItem },
+      snippet: timelineItemSnippet,
+      demo: <TimelineItem />,
+    },
+    {
+      title: 'Customizing an event',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: timelineItemEventSource,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            Although any node is allowed as a <EuiCode>children</EuiCode> the
+            recommendation is to use a{' '}
+            <Link to="/layout/panel">
+              <strong>EuiPanel</strong>
+            </Link>{' '}
+            or a{' '}
+            <Link to="/layout/panel#split-panels">
+              <strong>EuiSplitPanel</strong>
+            </Link>{' '}
+            when your content is text-based. For other types of components like
+            editors, the recommendation is to pass the{' '}
+            <EuiCode>children</EuiCode> without any wrapper.
+          </p>
+        </>
+      ),
+      snippet: timelineItemEventSnippet,
+      demo: <TimelineItemEvent />,
+    },
+    {
+      title: 'Complex example',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: TimelineComplexSource,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            This is an example of how you can customize and display multiple{' '}
+            <strong>EuiTimelineItem</strong>.
+          </p>
+        </div>
+      ),
+      props: {
+        EuiTimeline,
+        EuiTimelineItem,
+      },
+      demo: <TimelineComplex />,
+    },
+  ],
+};