Sha256: 095f44e443b1029d42c0cc416a0263a63d69049bf2ccd6c81490839198f1cf39

Contents?: true

Size: 1.07 KB

Versions: 1

Compression:

Stored size: 1.07 KB

Contents

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 TimelineNodeAreaProps = {
  icon?: string,
  iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
  children?: React.ReactNode,
  className?: string,
  htmlOptions?: { [key: string]: any },
} & GlobalProps

const TimelineNodeArea: React.FC<TimelineNodeAreaProps> = ({
  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 TimelineNodeArea

Version data entries

1 entries across 1 versions & 1 rubygems

Version Path
playbook_ui-14.5.0.pre.alpha.play1586datearea4115 app/pb_kits/playbook/pb_timeline/_node_area.tsx