playbook_ui 14.6.2.pre.alpha.PLAY1607dependencydisplayymlupdate4271 → 14.6.2.pre.alpha.PLAY15814384

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -10,6 +10,24 @@
 $pb_selectable_card_indicator_size: 22px;
 $pb_selectable_card_border: 2px;
 
+$pb_selectable_space_classes: (
+  xxs: $space_xxs,
+  xs: $space_xs,
+  sm: $space_sm,
+  md: $space_md,
+  lg: $space_lg,
+  xl: $space_xl,
+);
+$pb_selectable_paddings: (
+  p: "padding",
+  pr: "padding-right",
+  pl: "padding-left",
+  pt: "padding-top",
+  pb: "padding-bottom",
+  px: ("padding-left", "padding-right"),
+  py: ("padding-top", "padding-bottom")
+);
+
 [class^=pb_selectable_card_kit] {
   display: block;
   margin-bottom: 0;
@@ -28,7 +46,6 @@ $pb_selectable_card_border: 2px;
     padding: $space_sm;
     margin-bottom: $space_sm;
     cursor: pointer;
-    outline: 1px solid transparent;
 
     @media (hover:hover) {
       &:hover {
@@ -74,6 +91,7 @@ $pb_selectable_card_border: 2px;
 
         position: relative;
         @include pb_card_selected;
+        padding: calc(#{$space_sm} - 1px);
         transition-property: none;
         transition-duration: 0s;
 
@@ -88,6 +106,54 @@ $pb_selectable_card_border: 2px;
           background-color: $royal;
         }
       }
+
+      // Selected card has 1px more border
+      // Remove 1px so content does not "jump"
+      @each $position_name,
+      $position in $pb_selectable_paddings {
+        @each $space_name,
+        $space in $pb_selectable_space_classes {
+          ~ label.#{$position_name}_#{$space_name} {
+            @if type-of($position)=="list" {
+              @each $coordinate in $position {
+                #{$coordinate}: calc(#{$space} - 1px) !important;
+              }
+            }
+
+            @else {
+              #{$position}: calc(#{$space} - 1px) !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.display_input {
+    input[type="checkbox"],
+    input[type="radio"] {
+      &:checked {
+        ~label {
+          border-width: $pb_card_border_width;
+          outline: 1px solid $primary;
+        }
+
+      }
+    }
+
+    > label {
+      outline: 1px solid transparent;
+      padding: $space_sm;
+    }
+
+    &.dark {
+      input[type="checkbox"],
+      input[type="radio"] {
+        &:checked ~ label {
+          border-width: $pb_card_border_width;
+          outline: 1px solid $primary;
+        }
+      }
     }
   }
 

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx

@@ -67,6 +67,7 @@ const SelectableCard = (props: SelectableCardProps) => {
       'disabled': disabled,
       'enabled': !disabled,
     }),
+  variant === 'displayInput' ? 'display_input' : '',
   { error },
   dark ? 'dark' : '',
   className

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -25,7 +25,7 @@
           <% end %>
           <div class="separator"></div>
           <div class="psuedo_separator"></div>
-          <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true }) do %>
+          <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true, dark: object.dark }) do %>
             <% if content.nil? %>
               <%= pb_rails("body", props: { text: object.text }) %>
             <% else %>

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb

@@ -25,7 +25,7 @@ module Playbook
 
       def classname
         [
-          generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class),
+          generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class) + display_input_class,
           error_class,
           dark_props,
         ].compact.join(" ")
@@ -79,6 +79,10 @@ module Playbook
       def error_class
         error ? "error" : nil
       end
+
+      def display_input_class
+        variant == "display_input" ? " display_input" : ""
+      end
     end
   end
 end

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/detail.html.erb

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

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

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.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 %>

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.Step>
+          <Pill text="Any Kit"
+              variant="success"
+          />
+        </Timeline.Step>
+        <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,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.
+

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 label %>
+    <%= label %>
+  <% else %>
+    <%= pb_rails("timeline/label", 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 step %>
+    <%= step %>
+  <% else %>
+    <%= pb_rails("timeline/step", props: { icon: icon, icon_color: icon_color }) %>
+  <% end %>
 
-  <div class="pb_timeline_item_right_block">
-    <%= content.presence %>
-  </div>
+  <% if detail%>
+    <%= detail%>
+  <% else %>
+    <%= pb_rails("timeline/detail") 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 :label
+      renders_one :step
+      renders_one :detail
+
       def classname
         generate_classname("pb_timeline_item_kit", line_style)
       end

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

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

data/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 %>
+  <div class="pb_timeline_item_connector"></div>
+<% end %>
+
+

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