{
size="xxs"
status={null}
/>
- {
color={color}
icon={icon}
/>
-
+ alert('Click!')}
+ tabIndex={0}
+ truncate={1}
+ />
+ {alert('Click!')}}
+ tabIndex={0}
+ text="icon and a very long tag to show truncation"
+ truncate={1}
+ />
+ {alert('Click!')}}
+ tabIndex={0}
+ text="form pill with a very long tag to show truncation"
+ truncate={1}
+ />
+
)
}
diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md
deleted file mode 100644
index e960dc2deb..0000000000
--- a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md
+++ /dev/null
@@ -1 +0,0 @@
-For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md
new file mode 100644
index 0000000000..fc0593464e
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md
@@ -0,0 +1,3 @@
+For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
+
+__NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md
new file mode 100644
index 0000000000..5b35756d8c
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md
@@ -0,0 +1 @@
+For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb b/playbook/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb
index b9ddf68b86..4e42ddabb6 100644
--- a/playbook/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb
@@ -1,19 +1,57 @@
<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
<% if object.name.present? %>
<%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
- <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
+ <% if object.truncate %>
+
---
.../pb_kits/playbook/pb_timeline/_item.tsx | 82 +++++++++++++-----
.../playbook/pb_timeline/_timeline.tsx | 8 ++
.../playbook/pb_timeline/detail.html.erb | 3 +
.../pb_kits/playbook/pb_timeline/detail.rb | 11 +++
.../docs/_timeline_with_children.html.erb | 43 ++++++++++
.../docs/_timeline_with_children.jsx | 68 +++++++++++++++
.../docs/_timeline_with_children.md | 2 +
.../playbook/pb_timeline/docs/example.yml | 3 +-
.../playbook/pb_timeline/docs/index.js | 1 +
.../playbook/pb_timeline/item.html.erb | 38 ++++-----
.../app/pb_kits/playbook/pb_timeline/item.rb | 4 +
.../playbook/pb_timeline/label.html.erb | 12 +++
.../app/pb_kits/playbook/pb_timeline/label.rb | 13 +++
.../playbook/pb_timeline/step.html.erb | 14 ++++
.../app/pb_kits/playbook/pb_timeline/step.rb | 16 ++++
.../pb_timeline/subcomponents/Detail.tsx | 29 +++++++
.../pb_timeline/subcomponents/Label.tsx | 38 +++++++++
.../pb_timeline/subcomponents/Step.tsx | 42 ++++++++++
.../pb_timeline/subcomponents/index.tsx | 3 +
.../playbook/pb_timeline/timeline.test.js | 84 +++++++++++++++++++
.../playbook/kits/timeline_detail_spec.rb | 13 +++
.../playbook/kits/timeline_label_spec.rb | 15 ++++
.../playbook/kits/timeline_step_spec.rb | 21 +++++
23 files changed, 518 insertions(+), 45 deletions(-)
create mode 100644 playbook/app/pb_kits/playbook/pb_timeline/detail.html.erb
create mode 100644 playbook/app/pb_kits/playbook/pb_timeline/detail.rb
create mode 100644 playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb
create mode 100644 playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx
create mode 100644 playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md
create mode 100644 playbook/app/pb_kits/playbook/pb_timeline/label.html.erb
create mode 100644 playbook/app/pb_kits/playbook/pb_timeline/label.rb
create mode 100644 playbook/app/pb_kits/playbook/pb_timeline/step.html.erb
create mode 100644 playbook/app/pb_kits/playbook/pb_timeline/step.rb
create mode 100644 playbook/app/pb_kits/playbook/pb_timeline/subcomponents/Detail.tsx
create mode 100644 playbook/app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx
create mode 100644 playbook/app/pb_kits/playbook/pb_timeline/subcomponents/Step.tsx
create mode 100644 playbook/app/pb_kits/playbook/pb_timeline/subcomponents/index.tsx
create mode 100644 playbook/spec/pb_kits/playbook/kits/timeline_detail_spec.rb
create mode 100644 playbook/spec/pb_kits/playbook/kits/timeline_label_spec.rb
create mode 100644 playbook/spec/pb_kits/playbook/kits/timeline_step_spec.rb
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/_item.tsx b/playbook/app/pb_kits/playbook/pb_timeline/_item.tsx
index 3d6ef9eafd..f5aa0d6d2b 100644
--- a/playbook/app/pb_kits/playbook/pb_timeline/_item.tsx
+++ b/playbook/app/pb_kits/playbook/pb_timeline/_item.tsx
@@ -1,12 +1,15 @@
import React from 'react'
import classnames from 'classnames'
-
import { buildCss, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from "../utilities/globalProps";
+import { globalProps, GlobalProps } from "../utilities/globalProps"
import DateStacked from '../pb_date_stacked/_date_stacked'
import IconCircle from '../pb_icon_circle/_icon_circle'
+import TimelineLabel from './subcomponents/Label'
+import TimelineStep from './subcomponents/Step'
+import TimelineDetail from './subcomponents/Detail'
+
type ItemProps = {
className?: string,
children?: React.ReactNode[] | React.ReactNode,
@@ -17,6 +20,13 @@ type ItemProps = {
lineStyle?: 'solid' | 'dotted',
} & GlobalProps
+function isElementOfType = ({
+ children,
+ className,
+ htmlOptions = {},
+ ...props
+}) => {
+ const htmlProps = buildHtmlProps(htmlOptions)
+ return (
+ = ({
+ date,
+ children,
+ className,
+ htmlOptions = {},
+ ...props
+}) => {
+ const htmlProps = buildHtmlProps(htmlOptions)
+ return (
+ = ({
+ icon = 'user',
+ iconColor = 'default',
+ children,
+ className,
+ htmlOptions = {},
+ ...props
+}) => {
+ const htmlProps = buildHtmlProps(htmlOptions)
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+)
+
test('should pass data prop', () => {
render(
{
)
}
+
export default FormPill
diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb
index 3e66bb7446..a298f19a09 100644
--- a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb
@@ -13,7 +13,30 @@
id: "typeahead-form-pill",
is_multi: true,
options: names,
- label: "Names",
+ label: "Truncation Within Typeahead",
pills: true,
truncate: 1,
}) %>
+
+<%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
+<%= pb_rails("card", props: { max_width: "xs" }) do %>
+ <%= pb_rails("form_pill", props: {
+ name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
+ avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+ tabindex: 0,
+ truncate: 1,
+ id: "truncation-1"
+ }) %>
+ <%= pb_rails("form_pill", props: {
+ icon: "badge-check",
+ text: "icon and a very long tag to show truncation",
+ tabindex: 0,
+ truncate: 1,
+ id: "truncation-2"
+ }) %>
+ <%= pb_rails("form_pill", props: {
+ text: "form pill long tag no tooltip show truncation",
+ tabindex: 0,
+ truncate: 1,
+ }) %>
+<% end %>
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx
index b599017782..51a8a3e2a5 100644
--- a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx
+++ b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx
@@ -1,5 +1,5 @@
import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
const names = [
{ label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
@@ -15,11 +15,34 @@ const FormPillTruncatedText = (props) => {
+ <%= pb_rails("title", props: {
+ classname: "pb_form_pill_text truncate_#{object.truncate}",
+ id: object.id,
+ size: 4,
+ text: object.name,
+ }) %>
+ <% if object.id.present? %>
+ <%= pb_rails("tooltip", props: {
+ position: "top",
+ tooltip_id: "tooltip-#{object.id}",
+ trigger_element_selector: "##{object.id}"
+ }) do %>
+ <%= object.name %>
+ <% end %>
+ <% end %>
+
+ <% else %>
+ <%= pb_rails("title", props: { classname: "pb_form_pill_text", id: object.id, size: 4, text: object.name }) %>
+ <% end %>
<% if object.icon.present? %>
<%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
<% end %>
<% elsif object.text.present? %>
- <% if object.icon.present? %>
- <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
- <% end %>
- <% if object.text.present? %>
- <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
- <% end %>
+ <% if object.icon.present? %>
+ <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
+ <% end %>
+ <% if object.truncate %>
+
+ <%= pb_rails("title", props: {
+ classname: "pb_form_pill_tag truncate_#{object.truncate}",
+ id: object.id,
+ size: 4,
+ text: object.text,
+ }) %>
+ <% if object.id.present? %>
+ <%= pb_rails("tooltip", props: {
+ position: "top",
+ tooltip_id: "tooltip-#{object.id}",
+ trigger_element_selector: "##{object.id}"
+ }) do %>
+ <%= object.text %>
+ <% end %>
+ <% end %>
+
+ <% else %>
+ <%= pb_rails("title", props: { classname: "pb_form_pill_tag", id: object.id, size: 4, text: object.text, }) %>
+ <% end %>
<% end %>
<%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
<%= pb_rails("icon", props: { icon: 'times', fixed_width: true, size: object.close_icon_size }) %>
<% end %>
-<% end %>
+<% end %>
\ No newline at end of file
From c5f4170098a8f927b913befa70b5817bbb8ae4ea Mon Sep 17 00:00:00 2001
From: Mark Rosenberg <38965626+markdoeswork@users.noreply.github.com>
Date: Tue, 5 Nov 2024 13:01:53 -0500
Subject: [PATCH 4/4] [PLAY-1586] Timeline Sub Sub Components (#3801)
**What does this PR do?** A clear and concise description with your
runway ticket url.
Runway https://runway.powerhrg.com/backlog_items/PLAY-1586
In this story we let devs add children or "what ever kit they want" to
the date and node area of the timeline kit
The major changes to react is in the
`playbook/app/pb_kits/playbook/pb_timeline/_item.tsx` and in rails i
added a new pattern to be able to conditionally render fragments of
content
I have an alpha here https://github.com/powerhome/nitro-web/pull/43266
**Screenshots:** Screenshots to visualize your addition/change
**How to test?** Steps to confirm the desired behavior:
1. Go to
https://pr3801.playbook.beta.px.powerapp.cloud/kits/timeline/react#with-children
2. Witness greatness
#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [x] **TESTS** I have added test coverage to my code.
---------
Co-authored-by: Jasper Furniss ( + element: React.ReactNode, + component: React.ComponentType
+): element is React.ReactElement
{ + return React.isValidElement
(element) && element.type === component +} + const TimelineItem = ({ className, children, @@ -31,31 +41,57 @@ const TimelineItem = ({ const htmlProps = buildHtmlProps(htmlOptions) + const childrenArray = React.Children.toArray(children) + + const labelChild = childrenArray.find( + (child): child is React.ReactElement => isElementOfType(child, TimelineLabel) + ) + + const stepChild = childrenArray.find( + (child): child is React.ReactElement => isElementOfType(child, TimelineStep) + ) + + const detailChild = childrenArray.find( + (child): child is React.ReactElement => isElementOfType(child, TimelineDetail) + ) + + const otherChildren = childrenArray.filter( + (child) => + !isElementOfType(child, TimelineLabel) && + !isElementOfType(child, TimelineStep) && + !isElementOfType(child, TimelineDetail) + ) + return ( -
-
)
}
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/_timeline.tsx b/playbook/app/pb_kits/playbook/pb_timeline/_timeline.tsx
index e58d9f8acb..a0e3f53af6 100644
--- a/playbook/app/pb_kits/playbook/pb_timeline/_timeline.tsx
+++ b/playbook/app/pb_kits/playbook/pb_timeline/_timeline.tsx
@@ -5,6 +5,11 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
import { GlobalProps, globalProps } from '../utilities/globalProps'
import TimelineItem from './_item'
+import {
+ TimelineStep,
+ TimelineLabel,
+ TimelineDetail,
+} from './subcomponents'
type TimelineProps = {
aria?: { [key: string]: string },
@@ -47,5 +52,8 @@ const Timeline = ({
}
Timeline.Item = TimelineItem
+Timeline.Step = TimelineStep
+Timeline.Label = TimelineLabel
+Timeline.Detail = TimelineDetail
export default Timeline
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/detail.html.erb b/playbook/app/pb_kits/playbook/pb_timeline/detail.html.erb
new file mode 100644
index 0000000000..919544cc91
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_timeline/detail.html.erb
@@ -0,0 +1,3 @@
+<%= pb_content_tag do %>
+ <%= content.presence %>
+<% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/detail.rb b/playbook/app/pb_kits/playbook/pb_timeline/detail.rb
new file mode 100644
index 0000000000..810248dae4
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_timeline/detail.rb
@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Playbook
+ module PbTimeline
+ class Detail < Playbook::KitBase
+ def classname
+ generate_classname("pb_timeline_item_right_block")
+ end
+ end
+ end
+end
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb b/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb
new file mode 100644
index 0000000000..1725989c17
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb
@@ -0,0 +1,43 @@
+<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
+ <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
+
+ <% item.label do %>
+ <%= pb_rails("timeline/label") do %>
+ <%= pb_rails("title", props: { text: "Any Kit Here", size: 2 }) %>
+ <% end %>
+ <% end %>
+
+ <% item.step do %>
+ <%= pb_rails("timeline/step", props: { icon: 'check', icon_color: 'teal' }) %>
+ <% end %>
+
+ <% item.detail do %>
+ <%= pb_rails("title_detail", props: {
+ title: "Jackson Heights",
+ detail: "37-27 74th Street"
+ }) %>
+ <% end %>
+ <% end %>
+ <%= pb_rails("timeline/item", props: { line_style: "dotted"}) do |item| %>
+
+ <% item.step do %>
+ <%= pb_rails("timeline/step") do %>
+ <%= pb_rails("pill", props: { text: "Any Kit" , variant: "success" }) %>
+ <% end %>
+ <% end %>
+
+ <% item.detail do %>
+ <%= pb_rails("title_detail", props: {
+ title: "Greenpoint",
+ detail: "81 Gate St Brooklyn"
+ }) %>
+ <% end %>
+ <% end %>
+
+ <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do |item| %>
+ <%= pb_rails("title_detail", props: {
+ title: "Society Hill",
+ detail: "72 E St Astoria"
+ }) %>
+ <% end %>
+<% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx b/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx
new file mode 100644
index 0000000000..c426fbc066
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx
@@ -0,0 +1,68 @@
+import React from 'react'
+
+import Timeline from '../_timeline'
+import Title from '../../pb_title/_title'
+import Pill from '../../pb_pill/_pill'
+
+import TitleDetail from '../../pb_title_detail/_title_detail'
+
+const TimelineWithChildren = (props) => (
+
- {date &&
-
-
-
-
- {children}
-
+ {labelChild || (
+
+ {date && (
+
+ )}
+ {stepChild || (
+
+
+ )}
+ {detailChild || (
+
+ { otherChildren }
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+)
+
+export default TimelineWithChildren
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md b/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md
new file mode 100644
index 0000000000..dc0264dd9e
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md
@@ -0,0 +1,2 @@
+Any kit can be used inside of our compound components of label, step, or detail. Expand the code snippet below to see how to use these children elements.
+
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/docs/example.yml b/playbook/app/pb_kits/playbook/pb_timeline/docs/example.yml
index 2cf2a99a73..1cd961b5d5 100644
--- a/playbook/app/pb_kits/playbook/pb_timeline/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_timeline/docs/example.yml
@@ -4,10 +4,11 @@ examples:
- timeline_default: Default
- timeline_vertical: Vertical
- timeline_with_date: With Date
+ - timeline_with_children: With Children
react:
- timeline_default: Default
- timeline_vertical: Vertical
- timeline_with_date: With Date
-
+ - timeline_with_children: With Children
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/docs/index.js b/playbook/app/pb_kits/playbook/pb_timeline/docs/index.js
index 35398d22d6..8da0d1e1f0 100644
--- a/playbook/app/pb_kits/playbook/pb_timeline/docs/index.js
+++ b/playbook/app/pb_kits/playbook/pb_timeline/docs/index.js
@@ -1,3 +1,4 @@
export { default as TimelineDefault } from './_timeline_default.jsx'
export { default as TimelineVertical } from './_timeline_vertical.jsx'
export { default as TimelineWithDate } from './_timeline_with_date.jsx'
+export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/item.html.erb b/playbook/app/pb_kits/playbook/pb_timeline/item.html.erb
index cb815cb6e2..8f7153b22b 100644
--- a/playbook/app/pb_kits/playbook/pb_timeline/item.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_timeline/item.html.erb
@@ -1,25 +1,21 @@
<%= pb_content_tag do %>
+ <% if label %>
+ <%= label %>
+ <% else %>
+ <%= pb_rails("timeline/label", props: { date: date }) %>
+ <% end %>
-
- <% if object.date.present? %>
- <%= pb_rails("date_stacked", props: {
- date: object.date,
- size: "sm",
- align: "center"
- }) %>
- <% end %>
-
-
-
- <%= pb_rails("icon_circle", props: {
- icon: object.icon,
- variant: object.icon_color,
- size: "xs"
- }) %>
-
-
+ <% if step %>
+ <%= step %>
+ <% else %>
+ <%= pb_rails("timeline/step", props: { icon: icon, icon_color: icon_color }) %>
+ <% end %>
-
- <%= content.presence %>
-
+ <% if detail%>
+ <%= detail%>
+ <% else %>
+ <%= pb_rails("timeline/detail") do %>
+ <%= content %>
+ <% end %>
+ <% end %>
<% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/item.rb b/playbook/app/pb_kits/playbook/pb_timeline/item.rb
index f5c5830777..9a954cc413 100644
--- a/playbook/app/pb_kits/playbook/pb_timeline/item.rb
+++ b/playbook/app/pb_kits/playbook/pb_timeline/item.rb
@@ -13,6 +13,10 @@ class Item < Playbook::KitBase
values: %w[solid dotted],
default: "solid"
+ renders_one :label
+ renders_one :step
+ renders_one :detail
+
def classname
generate_classname("pb_timeline_item_kit", line_style)
end
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/label.html.erb b/playbook/app/pb_kits/playbook/pb_timeline/label.html.erb
new file mode 100644
index 0000000000..c7b4b3b18b
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_timeline/label.html.erb
@@ -0,0 +1,12 @@
+<%= pb_content_tag do %>
+ <% if object.date.present? %>
+ <%= pb_rails("date_stacked", props: {
+ date: object.date,
+ size: "sm",
+ align: "center"
+ }) %>
+ <% else %>
+ <%= content.presence %>
+ <% end %>
+<% end %>
+
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/label.rb b/playbook/app/pb_kits/playbook/pb_timeline/label.rb
new file mode 100644
index 0000000000..bfb74a469f
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_timeline/label.rb
@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Playbook
+ module PbTimeline
+ class Label < Playbook::KitBase
+ prop :date
+
+ def classname
+ generate_classname("pb_timeline_item_left_block")
+ end
+ end
+ end
+end
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/step.html.erb b/playbook/app/pb_kits/playbook/pb_timeline/step.html.erb
new file mode 100644
index 0000000000..533e1cb383
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_timeline/step.html.erb
@@ -0,0 +1,14 @@
+<%= pb_content_tag do %>
+ <% if object.icon.present? %>
+ <%= pb_rails("icon_circle", props: {
+ icon: object.icon,
+ variant: object.icon_color,
+ size: "xs"
+ }) %>
+ <% else %>
+ <%= content.presence %>
+ <% end %>
+
+<% end %>
+
+
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/step.rb b/playbook/app/pb_kits/playbook/pb_timeline/step.rb
new file mode 100644
index 0000000000..a80d28d51a
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_timeline/step.rb
@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Playbook
+ module PbTimeline
+ class Step < Playbook::KitBase
+ prop :icon, type: Playbook::Props::String
+ prop :icon_color, type: Playbook::Props::Enum,
+ values: %w[default royal blue purple teal red yellow green],
+ default: "default"
+
+ def classname
+ generate_classname("pb_timeline_item_step")
+ end
+ end
+ end
+end
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/subcomponents/Detail.tsx b/playbook/app/pb_kits/playbook/pb_timeline/subcomponents/Detail.tsx
new file mode 100644
index 0000000000..0365376132
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_timeline/subcomponents/Detail.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildHtmlProps } from '../../utilities/props'
+import { globalProps, GlobalProps } from "../../utilities/globalProps"
+
+type TimelineDetailProps = {
+ children?: React.ReactNode,
+ className?: string,
+ htmlOptions?: { [key: string]: any },
+} & GlobalProps
+
+const TimelineDetail: React.FC
+ {children}
+
+ )
+}
+
+export default TimelineDetail
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx b/playbook/app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx
new file mode 100644
index 0000000000..717e92aeaf
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildHtmlProps } from '../../utilities/props'
+import { globalProps, GlobalProps } from "../../utilities/globalProps"
+import DateStacked from '../../pb_date_stacked/_date_stacked'
+
+type TimelineLabelProps = {
+ date?: Date,
+ children?: React.ReactNode,
+ className?: string,
+ htmlOptions?: { [key: string]: any },
+} & GlobalProps
+
+const TimelineLabel: React.FC
+ {children}
+ {date && (
+
+ )
+}
+
+export default TimelineLabel
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/subcomponents/Step.tsx b/playbook/app/pb_kits/playbook/pb_timeline/subcomponents/Step.tsx
new file mode 100644
index 0000000000..648c1d9b0a
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_timeline/subcomponents/Step.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildHtmlProps } from '../../utilities/props'
+import { globalProps, GlobalProps } from "../../utilities/globalProps"
+import IconCircle from '../../pb_icon_circle/_icon_circle'
+
+type TimelineStepProps = {
+ icon?: string,
+ iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
+ children?: React.ReactNode,
+ className?: string,
+ htmlOptions?: { [key: string]: any },
+} & GlobalProps
+
+const TimelineStep: React.FC
+ {children ? (
+ children
+ ) : (
+
+ )
+}
+
+export default TimelineStep
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/subcomponents/index.tsx b/playbook/app/pb_kits/playbook/pb_timeline/subcomponents/index.tsx
new file mode 100644
index 0000000000..693e027a7d
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_timeline/subcomponents/index.tsx
@@ -0,0 +1,3 @@
+export { default as TimelineLabel } from './Label';
+export { default as TimelineDetail } from './Detail';
+export { default as TimelineStep } from './Step';
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/timeline.test.js b/playbook/app/pb_kits/playbook/pb_timeline/timeline.test.js
index fa71db5bad..9468e2070d 100644
--- a/playbook/app/pb_kits/playbook/pb_timeline/timeline.test.js
+++ b/playbook/app/pb_kits/playbook/pb_timeline/timeline.test.js
@@ -2,6 +2,10 @@ import React from 'react'
import { render, screen } from '../utilities/test-utils'
import Timeline from './_timeline'
+import TimelineItem from './_item'
+import TimelineLabel from './subcomponents/Label'
+import TimelineStep from './subcomponents/Step'
+import TimelineDetail from './subcomponents/Detail'
import TitleDetail from '../pb_title_detail/_title_detail'
const testId = 'timeline'
@@ -43,18 +47,91 @@ const TimelineDefault = (props) => (
)
+const TimelineWithChildren = (props) => (
+ <>
+