playbook_ui_docs 14.5.0.pre.alpha.play1549upgradereactmodal4130 → 14.5.0.pre.alpha.play1586datearea4115

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 68ea0a4e975e4be67876497386e199d418dde3f9bcf1389bd660e9bc94536aa6
-  data.tar.gz: 21d1a2c7275e82697543a93b266822377e7ed79b26c77b2320d748520a5b5c50
+  metadata.gz: a847719b201dc5ce3ce4544be2b042a85252f7df9a8816bd4b37f8954b83fb17
+  data.tar.gz: 9575429c1c32f9486b30e95ddae8bdae22b21a7b69016c87f1305a95dd542f4a
 SHA512:
-  metadata.gz: 3d63e20382a86bcd6969f9188f70d3aa53da8651ac3f0528af87514f91b35dc455f17ac21de8aa1a4a3646d96823d6599385264a8a7aaef3e550c72b126d136f
-  data.tar.gz: 61420392d6dfdcaf35ff0b20558ee2cc81e1edbc2203fd8bb1b65324c0c90095b662d508904296d67033957cf997ab2c907d28fa3ae045ef3ab5d59b4341b140
+  metadata.gz: 4c2751f5b4b505802f92b8ea2ba349a5874932f5d9c80ecfde109f18e576f98280996c0beda756b1d021bde85c68e3f7e2df58d2f4b5dd3b015c1b26970c48ad
+  data.tar.gz: 0c76001ce79abce4b3cdcde1a4e130cde54d9a3041376c8cf02a009145c43c58306e88ffaa8d41061b795f9d8e5e47be1890ee13dfb0860d614ee53052afc056

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml

@@ -3,13 +3,11 @@ examples:
   rails:
   - multiple_users_stacked_default: Default
   - multiple_users_stacked_bubble: Bubble
-  - multiple_users_stacked_size: Sizes
 
 
   react:
   - multiple_users_stacked_default: Default
   - multiple_users_stacked_bubble: Bubble
-  - multiple_users_stacked_size: Sizes
 
   swift: 
   - multiple_users_stacked_default_swift: Default

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js

@@ -1,3 +1,2 @@
 export { default as MultipleUsersStackedDefault } from './_multiple_users_stacked_default.jsx'
 export { default as MultipleUsersStackedBubble } from './_multiple_users_stacked_bubble.jsx'
-export { default as MultipleUsersStackedSize } from './_multiple_users_stacked_size.jsx'

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,72 @@
+import React from 'react'
+
+import Timeline from '../_timeline'
+import TimelineItem from '../_item'
+import TimelineDateArea from '../_date_area'
+import TimelineNodeArea from '../_node_area'
+import TimelineDetailArea from '../_detail_area'
+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}
+    >
+      <TimelineItem lineStyle="solid"
+          {...props}
+      >
+        <TimelineDateArea>
+          <Title size={2}
+              text='Any Kit Here'
+          />
+        </TimelineDateArea>
+        <TimelineNodeArea icon="user"
+            iconColor="royal"
+        />
+        <TimelineDetailArea>
+          <TitleDetail detail="37-27 74th Street"
+              title="Jackson Heights"
+              {...props}
+          />
+        </TimelineDetailArea>
+      </TimelineItem>
+
+      <TimelineItem lineStyle="dotted"
+          {...props}
+      >
+        <TimelineNodeArea>
+          <Pill text="Any Kit"
+              variant="success"
+          />
+        </TimelineNodeArea>
+        <TimelineDetailArea>
+          <TitleDetail detail="81 Gate St Brooklyn"
+              title="Greenpoint"
+              {...props}
+          />
+        </TimelineDetailArea>
+      </TimelineItem>
+
+      <TimelineItem lineStyle="solid"
+          {...props}
+      >
+        <TimelineDateArea date={new Date(new Date().setDate(new Date().getDate() + 1))} />
+        <TimelineNodeArea icon="map-marker-alt"
+            iconColor="purple"
+        />
+        <TimelineDetailArea>
+          <TitleDetail detail="72 E St Astoria"
+              title="Society Hill"
+              {...props}
+          />
+        </TimelineDetailArea>
+      </TimelineItem>
+    </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'