playbook_ui_docs 14.6.0.pre.alpha.PBNTR5554217 → 14.6.0.pre.alpha.play1586datearea4218

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 48af2d6724d13ad7bb928c14b9790b25166cb3a131429dc44e51c6099e43bcca
-  data.tar.gz: e59306a5d6d499c559cf8975bec2da61d5384b517be2d7fb14475629c0c9b184
+  metadata.gz: 524818494ebeff5e4d2f14bd7c4c1c96f2c6b61788549a7faf2fe449d43a265d
+  data.tar.gz: c8ea5ecf479b5433bf2d6e1420de229cd8660c97ae3ff6da1db55d52a2ab98a1
 SHA512:
-  metadata.gz: b0e285d87f0e1a95023a6d9e3b9419794815d8ed5e10e1793b6c4412a91d1ce23a44f3856a51951125655c0a81a447b5426389e5705dfe4875fbbaed132c7848
-  data.tar.gz: f183b1788112a55ef6480426858358abbadd320895060d5bbb93317d71b89730729dee6bb2c72ba08d67bf2ecbf1b7d7e1d5c837e6b9dbe0f8ec3870879e44a6
+  metadata.gz: 0e473ed267bd902b60bd6141a9bd77d9a60a0242396270facd236475d1f01cd809f6bb73c4a507c52f7a466c882e7671c41b19d51a8ebaca46cc8fba1be46ad3
+  data.tar.gz: 8aa5f706620faa129b63e9036fb4ceecfed9ddc3243d84ca25366fdbf5274b443f8b2486728b5bee189aa56e6af7d6797ca1c5695847b70fb0c1cbabee31ff4c

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

@@ -8,8 +8,7 @@ examples:
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
-  - currency_comma_separator: Comma Separator
-  
+
   react:
   - currency_variants: Variants
   - currency_size: Size
@@ -18,7 +17,6 @@ examples:
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
-  - currency_comma_separator: Comma Separator
 
   swift:
   - currency_size_swift: Size

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

@@ -5,4 +5,3 @@ export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
 export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
 export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
-export { default as CurrencyCommaSeparator } from './_currency_comma_separator.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,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'