playbook_ui 14.5.0 → 14.6.0.pre.alpha.play1586datearea4218

data/app/pb_kits/playbook/pb_phone_number_input/types.d.ts

@@ -1 +1,4 @@
-declare module 'intl-tel-input'
+declare module 'intl-tel-input/build/js/intlTelInputWithUtils.js' {
+    const intlTelInput: any;
+    export default intlTelInput;
+}

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -21,7 +21,7 @@ import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import { uniqueId } from 'lodash';
 
-type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth'>
+type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth' | 'maxHeight' | 'minHeight'>
 
 type PbPopoverProps = {
   aria?: { [key: string]: string };
@@ -79,6 +79,7 @@ const Popover = (props: PbPopoverProps) => {
     maxWidth,
     minHeight,
     minWidth,
+    width,
     targetId,
   } = props;
 
@@ -97,7 +98,8 @@ const Popover = (props: PbPopoverProps) => {
       maxHeight ? { maxHeight: maxHeight } : {},
       maxWidth ? { maxWidth: maxWidth } : {},
       minHeight ? { minHeight: minHeight } : {},
-      minWidth ? { minWidth: minWidth } : {}
+      minWidth ? { minWidth: minWidth } : {},
+      width ? { width: width } : {}
     );
   };
   const ariaProps = buildAriaProps(aria);
@@ -167,6 +169,7 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
     maxWidth,
     minHeight,
     minWidth,
+    width,
   } = props;
 
   useEffect(() => {
@@ -216,6 +219,7 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
         placement={placement}
         referenceElement={referenceElement}
         targetId={targetId}
+        width={width}
         zIndex={zIndex}
         {...props}
     >

data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb

@@ -14,7 +14,7 @@
         trigger_element_id: "regular-popover-1",
         tooltip_id: "tooltip-1",
         offset: true,
-        position: "top"
+        position: "top",
     }) do %>
         I'm a popover. I can show content of any size.
     <% end %>

data/app/pb_kits/playbook/pb_popover/popover.rb

@@ -12,6 +12,7 @@ module Playbook
       prop :max_width
       prop :min_width
       prop :min_height
+      prop :width
       prop :z_index, type: Playbook::Props::String
       prop :offset, type: Playbook::Props::Boolean, default: false
       prop :close_on_click, type: Playbook::Props::Enum,
@@ -36,11 +37,12 @@ module Playbook
         out += "max-width: #{max_width}; " if max_width.present?
         out += "min-height: #{min_height}; " if min_height.present?
         out += "min-width: #{min_width};" if min_width.present?
+        out += "width: #{width};" if width.present?
         out
       end
 
       def width_height_class_helper
-        "overflow_handling" if max_height || max_width
+        "overflow_handling" if max_height || max_width || width
       end
 
       def data

data/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<P>(
+  element: React.ReactNode,
+  component: React.ComponentType<P>
+): element is React.ReactElement<P> {
+  return React.isValidElement<P>(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 (
-    <div 
+    <div
         {...htmlProps}
         className={classnames(timelineItemCss, globalProps(props), className)}
     >
-      <div className="pb_timeline_item_left_block">
-        {date &&
-          <DateStacked
-              align="center"
-              date={date}
-              size="sm"
-          />
-        }
-      </div>
-      <div className="pb_timeline_item_step">
-        <IconCircle
-            icon={icon}
-            size="xs"
-            variant={iconColor}
-        />
-        <div className="pb_timeline_item_connector" />
-      </div>
-      <div className="pb_timeline_item_right_block">
-        {children}
-      </div>
+        {labelChild || (
+          <div className="pb_timeline_item_left_block">
+            {date && (
+              <DateStacked
+                  align="center"
+                  date={date}
+                  size="sm"
+              />
+            )}
+          </div>
+        )}
+        {stepChild || (
+          <div className="pb_timeline_item_step">
+            <IconCircle icon={icon}
+                size="xs"
+                variant={iconColor}
+            />
+            <div className="pb_timeline_item_connector" />
+          </div>
+        )}
+        {detailChild || (
+          <div className="pb_timeline_item_right_block">
+           { otherChildren }
+          </div>
+        )}
     </div>
   )
 }

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

data/app/pb_kits/playbook/pb_timeline/date_area.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 %>
+

data/app/pb_kits/playbook/pb_timeline/date_area.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTimeline
+    class DateArea < Playbook::KitBase
+      prop :date
+
+      def classname
+        generate_classname("pb_timeline_item_left_block")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_timeline/detail_area.html.erb

@@ -0,0 +1,3 @@
+<%= pb_content_tag do %>
+  <%= content.presence %>
+<% end %>

data/app/pb_kits/playbook/pb_timeline/detail_area.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTimeline
+    class DetailArea < Playbook::KitBase
+      def classname
+        generate_classname("pb_timeline_item_right_block")
+      end
+    end
+  end
+end

data/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.date_area do %>
+        <%= pb_rails("timeline/date_area") do %>
+          <%= pb_rails("title", props: { text: "Any Kit Here", size: 2 }) %>
+        <% end %>
+      <% end %>
+    
+      <% item.node_area do %>
+        <%= pb_rails("timeline/node_area", props: { icon: 'check', icon_color: 'teal' }) %>
+      <% end %>
+    
+      <% item.detail_area 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.node_area do %>
+        <%= pb_rails("timeline/node_area") do %>
+          <%= pb_rails("pill", props: { text: "Any Kit" , variant: "success" }) %>
+        <% end %>
+      <% end %>
+    
+      <% item.detail_area 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 %>

data/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) => (
+  <div>
+    <Timeline orientation="horizontal"
+        showDate
+        {...props}
+    >
+      <Timeline.Item lineStyle="solid"
+          {...props}
+      >
+        <Timeline.Label>
+          <Title size={2}
+              text='Any Kit Here'
+          />
+        </Timeline.Label>
+        <Timeline.Step icon="user"
+            iconColor="royal"
+        />
+        <Timeline.Detail>
+          <TitleDetail detail="37-27 74th Street"
+              title="Jackson Heights"
+              {...props}
+          />
+        </Timeline.Detail>
+      </Timeline.Item>
+
+      <Timeline.Item lineStyle="dotted"
+          {...props}
+      >
+        <Timeline.Label>
+          <Pill text="Any Kit"
+              variant="success"
+          />
+        </Timeline.Label>
+        <Timeline.Detail>
+          <TitleDetail detail="81 Gate St Brooklyn"
+              title="Greenpoint"
+              {...props}
+          />
+        </Timeline.Detail>
+      </Timeline.Item>
+
+      <Timeline.Item lineStyle="solid"
+          {...props}
+      >
+        <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
+        <Timeline.Step icon="map-marker-alt"
+            iconColor="purple"
+        />
+        <Timeline.Detail>
+          <TitleDetail detail="72 E St Astoria"
+              title="Society Hill"
+              {...props}
+          />
+        </Timeline.Detail>
+      </Timeline.Item>
+    </Timeline>
+  </div>
+)
+
+export default TimelineWithChildren

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md

@@ -0,0 +1,4 @@
+You can use whatever kit you want for the date area of the timeline item, the node area, and the content area at the bottom or left.
+
+Checkout the code in this example to see the children kits in action.
+

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

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

data/app/pb_kits/playbook/pb_timeline/item.html.erb

@@ -1,25 +1,21 @@
 <%= pb_content_tag do %>
+  <% if date_area %>
+    <%= date_area %>
+  <% else %>
+    <%= pb_rails("timeline/date_area", props: { date: date }) %>
+  <% end %>
 
-  <div class="pb_timeline_item_left_block">
-    <% if object.date.present? %>
-      <%= pb_rails("date_stacked", props: {
-        date: object.date,
-        size: "sm",
-        align: "center"
-      }) %>
-    <% end %>
-  </div>
-
-  <div class="pb_timeline_item_step">
-    <%= pb_rails("icon_circle", props: {
-      icon: object.icon,
-      variant: object.icon_color,
-      size: "xs"
-    }) %>
-    <div class="pb_timeline_item_connector"></div>
-  </div>
+  <% if node_area %>
+    <%= node_area %>
+  <% else %>
+    <%= pb_rails("timeline/node_area", props: { icon: icon, icon_color: icon_color }) %>
+  <% end %>
 
-  <div class="pb_timeline_item_right_block">
-    <%= content.presence %>
-  </div>
+  <% if detail_area %>
+    <%= detail_area %>
+  <% else %>
+    <%= pb_rails("timeline/detail_area") do %>
+      <%= content %>
+    <% end %>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_timeline/item.rb

@@ -13,6 +13,10 @@ module Playbook
                         values: %w[solid dotted],
                         default: "solid"
 
+      renders_one :date_area
+      renders_one :node_area
+      renders_one :detail_area
+
       def classname
         generate_classname("pb_timeline_item_kit", line_style)
       end

data/app/pb_kits/playbook/pb_timeline/node_area.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 %>
+  <div class="pb_timeline_item_connector"></div>
+<% end %>
+
+

data/app/pb_kits/playbook/pb_timeline/node_area.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTimeline
+    class NodeArea < 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';