diff --git a/playbook/app/pb_kits/playbook/pb_timeline/_timeline.scss b/playbook/app/pb_kits/playbook/pb_timeline/_timeline.scss index a48472e7a1..4970aa125d 100644 --- a/playbook/app/pb_kits/playbook/pb_timeline/_timeline.scss +++ b/playbook/app/pb_kits/playbook/pb_timeline/_timeline.scss @@ -8,6 +8,12 @@ $icon_margin: $space_xs/2; $icon_height: 28px; $height_from_top: $icon_height/2 - $connector_width/2; +// Add gap variables +$gap_xs: $height_from_top + $space_xs; +$gap_sm: $height_from_top + $space_sm; +$gap_md: $height_from_top + $space_md; +$gap_lg: $height_from_top + $space_lg; + @mixin pb_timeline_line_solid($width, $height, $margin) { width: $width; height: $height; @@ -156,7 +162,7 @@ $height_from_top: $icon_height/2 - $connector_width/2; } } } - } + } } } &[class*=_vertical] { @@ -266,5 +272,41 @@ $height_from_top: $icon_height/2 - $connector_width/2; } } } + &[class*=_gap_xs] { + [class*=pb_timeline_item_kit] { + [class=pb_timeline_item_step] { + [class=pb_timeline_item_connector] { + height: $gap_xs !important; + } + } + } + } + &[class*=_gap_sm] { + [class*=pb_timeline_item_kit] { + [class=pb_timeline_item_step] { + [class=pb_timeline_item_connector] { + height: $gap_sm !important; + } + } + } + } + &[class*=_gap_md] { + [class*=pb_timeline_item_kit] { + [class=pb_timeline_item_step] { + [class=pb_timeline_item_connector] { + height: $gap_md !important; + } + } + } + } + &[class*=_gap_lg] { + [class*=pb_timeline_item_kit] { + [class=pb_timeline_item_step] { + [class=pb_timeline_item_connector] { + height: $gap_lg !important; + } + } + } + } } } diff --git a/playbook/app/pb_kits/playbook/pb_timeline/_timeline.tsx b/playbook/app/pb_kits/playbook/pb_timeline/_timeline.tsx index a0e3f53af6..58595e700d 100644 --- a/playbook/app/pb_kits/playbook/pb_timeline/_timeline.tsx +++ b/playbook/app/pb_kits/playbook/pb_timeline/_timeline.tsx @@ -20,6 +20,7 @@ type TimelineProps = { id?: string, orientation?: string, showDate?: boolean, + gap?: 'xs' | 'sm' | 'md' | 'lg' | 'none', } & GlobalProps const Timeline = ({ @@ -31,13 +32,16 @@ const Timeline = ({ id, orientation = 'horizontal', showDate = false, + gap = 'none', ...props }: TimelineProps): React.ReactElement => { const ariaProps = buildAriaProps(aria) const dataProps = buildDataProps(data) const htmlProps = buildHtmlProps(htmlOptions) const dateStyle = showDate === true ? '_with_date' : '' - const timelineCss = buildCss('pb_timeline_kit', `_${orientation}`, dateStyle) + const gapStyle = gap === 'none' ? '' : `gap_${gap}` + const timelineCss = buildCss('pb_timeline_kit', `${orientation}`, dateStyle, gapStyle) + return (
+ <%= pb_rails("flex/flex_item") do %> + <%= pb_rails("timeline", props: {orientation: "vertical", gap: "xs"}) do %> + <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %> + <%= pb_rails("body", props: { + text: "Conversation started", + color: "light" + }) %> + <% end %> + <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %> + <%= pb_rails("body", props: { + text: "Trip #12422", + color: "light" + }) %> + <% end %> + <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %> + <%= pb_rails("body", props: { + text: "Refund issue #12422", + color: "light" + }) %> + <% end %> + <% end %> + <% end %> + + <%= pb_rails("flex/flex_item") do %> + <%= pb_rails("timeline", props: {orientation: "vertical", gap: "sm"}) do %> + <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %> + <%= pb_rails("body", props: { + text: "Conversation started", + color: "light" + }) %> + <% end %> + <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %> + <%= pb_rails("body", props: { + text: "Trip #12422", + color: "light" + }) %> + <% end %> + <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %> + <%= pb_rails("body", props: { + text: "Refund issue #12422", + color: "light" + }) %> + <% end %> + <% end %> + <% end %> + + <%= pb_rails("flex/flex_item") do %> + <%= pb_rails("timeline", props: {orientation: "vertical", gap: "md"}) do %> + <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %> + <%= pb_rails("body", props: { + text: "Conversation started", + color: "light" + }) %> + <% end %> + <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %> + <%= pb_rails("body", props: { + text: "Trip #12422", + color: "light" + }) %> + <% end %> + <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %> + <%= pb_rails("body", props: { + text: "Refund issue #12422", + color: "light" + }) %> + <% end %> + <% end %> + <% end %> + + <%= pb_rails("flex/flex_item") do %> + <%= pb_rails("timeline", props: {orientation: "vertical", gap: "lg"}) do %> + <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %> + <%= pb_rails("body", props: { + text: "Conversation started", + color: "light" + }) %> + <% end %> + <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %> + <%= pb_rails("body", props: { + text: "Trip #12422", + color: "light" + }) %> + <% end %> + <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %> + <%= pb_rails("body", props: { + text: "Refund issue #12422", + color: "light" + }) %> + <% end %> + <% end %> + <% end %> +<% end %> + diff --git a/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx b/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx new file mode 100644 index 0000000000..e6a9486f04 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx @@ -0,0 +1,180 @@ +import React from 'react' + +import Timeline from '../_timeline' +import Flex from "../../pb_flex/_flex" +import FlexItem from "../../pb_flex/_flex_item" +import Body from '../../pb_body/_body' + +const TimelineWithGap = (props) => ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+) + +export default TimelineWithGap diff --git a/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md b/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md new file mode 100644 index 0000000000..975b37e3cc --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md @@ -0,0 +1 @@ +Use the optional `gap` prop to render the timeline kit with adjusted spacing between nodes. The `gap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing. 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 1cd961b5d5..158dba6f19 100644 --- a/playbook/app/pb_kits/playbook/pb_timeline/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_timeline/docs/example.yml @@ -1,14 +1,16 @@ examples: - + rails: - timeline_default: Default - timeline_vertical: Vertical - timeline_with_date: With Date - timeline_with_children: With Children - - + - timeline_with_gap: With Gap + + react: - timeline_default: Default - timeline_vertical: Vertical - timeline_with_date: With Date - timeline_with_children: With Children + - timeline_with_gap: With Gap 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 8da0d1e1f0..896428a6f2 100644 --- a/playbook/app/pb_kits/playbook/pb_timeline/docs/index.js +++ b/playbook/app/pb_kits/playbook/pb_timeline/docs/index.js @@ -2,3 +2,5 @@ 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' +export { default as TimelineWithGap } from './_timeline_with_gap.jsx' + diff --git a/playbook/app/pb_kits/playbook/pb_timeline/timeline.rb b/playbook/app/pb_kits/playbook/pb_timeline/timeline.rb index 3b4e9e41e0..0f24d365ee 100644 --- a/playbook/app/pb_kits/playbook/pb_timeline/timeline.rb +++ b/playbook/app/pb_kits/playbook/pb_timeline/timeline.rb @@ -8,9 +8,15 @@ class Timeline < Playbook::KitBase default: "horizontal" prop :show_date, type: Playbook::Props::Boolean, default: false + prop :gap, type: Playbook::Props::Enum, + values: %w[xs sm md lg none], + default: "none" def classname - generate_classname("pb_timeline_kit", orientation, date_class) + generate_classname("pb_timeline_kit", + orientation, + date_class, + gap_class) end private @@ -18,6 +24,10 @@ def classname def date_class show_date ? "with_date" : nil end + + def gap_class + gap == "none" ? nil : "gap_#{gap}" + end end end end 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 9468e2070d..4ce60c65fe 100644 --- a/playbook/app/pb_kits/playbook/pb_timeline/timeline.test.js +++ b/playbook/app/pb_kits/playbook/pb_timeline/timeline.test.js @@ -147,26 +147,26 @@ test('should pass id prop', () => { test('should have horizontal orientation by default', () => { render() const kit = screen.getByTestId(testId) - expect(kit).toHaveClass('pb_timeline_kit__horizontal') + expect(kit).toHaveClass('pb_timeline_kit_horizontal') }) test('should pass vertical orientation', () => { const props = { orientation: 'vertical' } render() const kit = screen.getByTestId(testId) - expect(kit).toHaveClass('pb_timeline_kit__vertical') + expect(kit).toHaveClass('pb_timeline_kit_vertical') }) test('should pass showDate prop', () => { const props = { showDate: true } render() const kit = screen.getByTestId(testId) - expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date') + expect(kit).toHaveClass('pb_timeline_kit_horizontal__with_date') }) test('should pass showDate prop with Children', () => { const props = { showDate: true } render() const kit = screen.getByTestId(testId) - expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date') + expect(kit).toHaveClass('pb_timeline_kit_horizontal__with_date') })