diff --git a/docs/content/components/timeline.md b/docs/content/components/timeline.md new file mode 100644 index 00000000..d8688c79 --- /dev/null +++ b/docs/content/components/timeline.md @@ -0,0 +1,189 @@ +--- +title: Timeline +path: components/timeline +status: Experimental +status_issue: 'https://github.com/github/design-systems/issues/101' +source: '' +bundle: timeline +--- + +The `TimelineItem` component is used to display items on a vertical timeline, connected by `TimelineItem-badge` elements. + +```html live +
+
+ + +
+ +
+ Monalisa created one + hot potato + Just now +
+
+``` + +## TimelineItem-badge + +The default TimelineItem-badge color is dark text on a light grey background. + +```html live + +
+
+ + + +
+
+ Default badge color +
+
+``` + +### Adding color to TimelineItem-badge + +To have color variants, use the [color utilities]() on the badge. Be cautious with color choices. We typically use them in the timeline to give meaning to the event in context of the timeline. + +```html live + +
+
+ + + +
+
+ Red background used when closed events occur +
+
+
+
+ + + +
+
+ Green background when opened or passed events occur +
+
+
+
+ + + +
+
+ Purple background used when pull requests are merged +
+
+
+
+ + + +
+
+ Blue background to indicate new events below +
+
+``` + +## TimelineItem--condensed + +TimelineItem has a condensed variant that will reduce the vertical padding and remove the background from the badge item. These are most commonly used in commits. + +```html live +
+
+ +
+
+ This is the message of a condensed TimelineItem +
+
+
+
+ +
+
+ This is the message of a condensed TimelineItem +
+
+``` + +## TimelineItem-avatar + +Sometimes you want to give ownership to an event by displaying an [Avatar]() of the author. To do this, you'll need to wrap the TimelineItem in a `
` and give it space for the avatar. `ml-6 pl-3` This is `40px`, the size of the image, and `16px` space for the gutter. + +```html live +
+
+
+ @octocat +
+ +
+ + +
+ +
+ Monalisa created one + hot potato + Just now +
+
+
+``` + +## TimelineItem-break + +To create a visual break in the timeline, use `TimelineItem-break`. This adds a horizontal bar across the timeline to show that something has disrupted it. Usually this happens when a close or merged event occurs. + +```html live +
+
+ + + +
+
+ Red background used when closed events occur +
+
+
+
+
+ + + +
+
+ Green background when opened or passed events occur +
+
+``` + +## Target TimelineItem + +```html live +
+ + + + + +
+ Monalisa created one + hot potato + Just now +
+
+``` \ No newline at end of file diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index c9f169d1..06629787 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -109,6 +109,8 @@ url: /components/select-menu-deprecated - title: Subhead url: /components/subhead + - title: Timeline + url: /components/timeline - title: Toasts url: /components/toasts - title: Tooltips diff --git a/src/timeline/README.md b/src/timeline/README.md new file mode 100644 index 00000000..a8acbfa7 --- /dev/null +++ b/src/timeline/README.md @@ -0,0 +1,25 @@ +--- +bundle: "timeline" +generated: true +--- + +# Primer CSS: `timeline` bundle + +## Usage + +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: + +```scss +@import "@primer/css/timeline/index.scss"; +``` + +## Build + +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/timeline.css`. + +## License + +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + + +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/timeline/index.scss b/src/timeline/index.scss new file mode 100644 index 00000000..fc899c24 --- /dev/null +++ b/src/timeline/index.scss @@ -0,0 +1 @@ +@import "./timeline-item.scss"; diff --git a/src/timeline/timeline-item.scss b/src/timeline/timeline-item.scss new file mode 100644 index 00000000..1dfd4410 --- /dev/null +++ b/src/timeline/timeline-item.scss @@ -0,0 +1,84 @@ +.TimelineItem { + position: relative; + display: flex; + padding: $spacer-3 0; + margin-left: $spacer-3; + + // The Timeline + &::before { + position: absolute; + top: 0; + bottom: 0; + left: 0; + display: block; + width: 2px; + content: ""; + background-color: $gray-200; + } + + &:target .TimelineItem-badge { + border-color: $blue-400; + box-shadow: 0 0 0.2em $blue-200; + } +} + +.TimelineItem-badge { + position: relative; + z-index: 1; + display: flex; + width: $spacer-5; + height: $spacer-5; + margin-right: $spacer-2; + margin-left: -$spacer-3 + 1; + color: $gray-700; + align-items: center; + background-color: $gray-200; + border: 2px solid $white; + border-radius: 50%; + justify-content: center; + flex-shrink: 0; +} + +.TimelineItem-body { + max-width: 100%; + margin-top: $spacer-1; + color: $gray-700; + flex: auto; +} + +.TimelineItem-avatar { + position: absolute; + left: -($spacer-6 + $spacer-5); + z-index: 1; +} + +.TimelineItem-break { + position: relative; + z-index: 1; + height: $spacer-4; + margin: 0; + margin-bottom: -$spacer-3; + margin-left: -($spacer-6 + $spacer-3); + background-color: $white; + border: 0; + border-top: 4px solid $gray-200; +} + +.TimelineItem--condensed { + padding-top: $spacer-1; + padding-bottom: 0; + + // TimelineItem--condensed is often grouped. (commits) + &:last-child { + padding-bottom: $spacer-3; + } + + .TimelineItem-badge { + height: $spacer-3; + margin-top: $spacer-2; + margin-bottom: $spacer-2; + color: $gray-400; + background-color: $white; + border: 0; + } +}