playbook_ui 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4316 → 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4380

data/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

data/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<TimelineDetailProps> = ({
+  children,
+  className,
+  htmlOptions = {},
+  ...props
+}) => {
+  const htmlProps = buildHtmlProps(htmlOptions)
+  return (
+    <div
+        {...htmlProps}
+        className={classnames('pb_timeline_item_right_block', globalProps(props), className)}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default TimelineDetail

data/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<TimelineLabelProps> = ({
+  date,
+  children,
+  className,
+  htmlOptions = {},
+  ...props
+}) => {
+  const htmlProps = buildHtmlProps(htmlOptions)
+  return (
+    <div
+        {...htmlProps}
+        className={classnames('pb_timeline_item_left_block', globalProps(props), className)}
+    >
+      {children}
+      {date && (
+        <DateStacked align="center"
+            date={date}
+            size="sm"
+        />
+      )}
+    </div>
+  )
+}
+
+export default TimelineLabel

data/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<TimelineStepProps> = ({
+  icon = 'user',
+  iconColor = 'default',
+  children,
+  className,
+  htmlOptions = {},
+  ...props
+}) => {
+  const htmlProps = buildHtmlProps(htmlOptions)
+  return (
+    <div
+        {...htmlProps}
+        className={classnames('pb_timeline_item_step', globalProps(props), className)}
+    >
+      {children ? (
+        children
+      ) : (
+        <IconCircle icon={icon}
+            size="xs"
+            variant={iconColor}
+        />
+      )}
+      <div className="pb_timeline_item_connector" />
+    </div>
+  )
+}
+
+export default TimelineStep

data/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';

data/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) => (
+  <>
+    <Timeline
+        className={className}
+        data={{ testid: testId }}
+        orientation="horizontal"
+        showDate
+        {...props}
+    >
+      <TimelineItem lineStyle="solid"
+          {...props}
+      >
+        <TimelineLabel date={new Date()} />
+        <TimelineStep icon="user"
+            iconColor="royal"
+        />
+        <TimelineDetail>
+          <TitleDetail
+              detail="37-27 74th Street"
+              title="Jackson Heights"
+              {...props}
+          />
+        </TimelineDetail>
+      </TimelineItem>
+
+      <TimelineItem lineStyle="dotted"
+          {...props}
+      >
+        <TimelineStep icon="check"
+            iconColor="teal"
+        />
+        <TimelineDetail>
+          <TitleDetail
+              detail="81 Gate St Brooklyn"
+              title="Greenpoint"
+              {...props}
+          />
+        </TimelineDetail>
+      </TimelineItem>
+
+      <TimelineItem lineStyle="solid"
+          {...props}
+      >
+        <TimelineLabel
+            date={new Date(new Date().setDate(new Date().getDate() + 1))}
+        />
+        <TimelineStep icon="map-marker-alt"
+            iconColor="purple"
+        />
+        <TimelineDetail>
+          <TitleDetail
+              detail="72 E St Astoria"
+              title="Society Hill"
+              {...props}
+          />
+        </TimelineDetail>
+      </TimelineItem>
+    </Timeline>
+  </>
+)
+
 test('should pass data prop', () => {
     render(<TimelineDefault />)
     const kit = screen.getByTestId(testId)
     expect(kit).toBeInTheDocument()
 })
 
+test('should pass data prop using children', () => {
+    render(<TimelineWithChildren />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toBeInTheDocument()
+})
+
 test('should pass className prop', () => {
     render(<TimelineDefault />)
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveClass(className)
 })
 
+test('should pass className prop with children', () => {
+    render(<TimelineWithChildren />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(className)
+})
+
 test('should pass aria prop', () => {
     render(<TimelineDefault />)
     const kit = screen.getByTestId(testId)
@@ -86,3 +163,10 @@ test('should pass showDate prop', () => {
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
 })
+
+test('should pass showDate prop with Children', () => {
+    const props = { showDate: true }
+    render(<TimelineWithChildren {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
+})