removed timeline item from nav and linked from timeline page

primer · Jun 28, 2023 · 62db1d5 · 62db1d5
1 parent ba464ea
commit 62db1d5
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/content/components/timeline-item.mdx b/content/components/timeline-item.mdx
@@ -10,7 +10,4 @@ import {Link, Text} from '@primer/react'
 import {Link as GatsbyLink} from 'gatsby'
 export default ComponentLayout
 
-<Note variant="warning">
-  <Text sx={{display: 'block', fontWeight: 'bold', mb: 2}}>Guidelines for this component are in progress</Text>
-  <Text>Interested in contributing? Review the guidelines for <Link as={GatsbyLink} to="/guides/contribute/documentation#documenting-components">writing component documentation</Link> and open a pull request in our <Link as={GatsbyLink} to="https://github.com/primer/design">documentation repository.</Link></Text>
-</Note>
+For usage guidelines of this component, see [timeline](/components/timeline).
diff --git a/content/components/timeline.mdx b/content/components/timeline.mdx
@@ -2,6 +2,8 @@
 title: Timeline
 description: The timeline component is used to display items on a vertical timeline, connected by timeline elements.
 reactId: timeline
+railsIds:
+- Primer::Beta::TimelineItem
 ---
 
 import ComponentLayout from '~/src/layouts/component-layout'
@@ -12,4 +14,24 @@ export default ComponentLayout
 <Note variant="warning">
   <Text sx={{display: 'block', fontWeight: 'bold', mb: 2}}>Guidelines for this component are in progress</Text>
   <Text>Interested in contributing? Review the guidelines for <Link as={GatsbyLink} to="/guides/contribute/documentation#documenting-components">writing component documentation</Link> and open a pull request in our <Link as={GatsbyLink} to="https://github.com/primer/design">documentation repository.</Link></Text>
-</Note>
+</Note>
+
+<br />
+
+<img
+  width="960"
+  role="presentation"
+  src="https://github.com/primer/design/assets/586552/f1ef5e7c-86fb-4131-be14-4831923065cf"
+  alt="timeline component item"
+/>
+
+## Usage
+
+Timeline displays items on a connected vertical timeline. It's primarily used to document the history and activity of a given pull request or issue.
+
+<img
+  width="960"
+  role="presentation"
+  src="https://github.com/primer/design/assets/586552/d44a8384-44fc-4879-9f1b-a4d33a53d994"
+  alt="timeline component"
+/>
diff --git a/src/@primer/gatsby-theme-doctocat/nav.yml b/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -270,8 +270,6 @@
       url: /components/textarea
     - title: Timeline
       url: /components/timeline
-    - title: Timeline item
-      url: /components/timeline-item
     - title: Toggle switch
       url: /components/toggle-switch
     - title: Token