playbook_ui_docs 14.6.2.pre.alpha.PLAY15814348 → 14.7.0.pre.alpha.PBNTR637quickpickdefaultdate4478

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +13 -2
  3. data/app/pb_kits/playbook/pb_card/docs/_card_light.jsx +3 -17
  4. data/app/pb_kits/playbook/pb_card/docs/_card_light.md +1 -1
  5. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb +26 -0
  6. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md +7 -0
  7. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb +38 -0
  8. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md +0 -0
  9. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb +19 -0
  10. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +6 -0
  11. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +24 -1
  12. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +25 -2
  13. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md +3 -0
  14. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md +1 -0
  15. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.jsx +51 -0
  16. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.md +1 -0
  17. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.jsx +26 -0
  18. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.md +1 -0
  19. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb +1 -0
  20. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx +11 -0
  21. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx +59 -0
  22. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.md +3 -0
  23. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx +20 -0
  24. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md +3 -0
  25. data/app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml +13 -0
  26. data/app/pb_kits/playbook/pb_skeleton_loading/docs/index.js +5 -0
  27. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +43 -0
  28. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +68 -0
  29. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md +2 -0
  30. data/app/pb_kits/playbook/pb_timeline/docs/example.yml +2 -1
  31. data/app/pb_kits/playbook/pb_timeline/docs/index.js +1 -0
  32. data/dist/playbook-doc.js +1 -1
  33. metadata +24 -3
  34. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +0 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ae22d798e0f1be8ba540d96ba7cfcf9ba02bb6fa118824a790c8ec74606bf03b
4
- data.tar.gz: 8c13f486768c53544d4fcb5fd9d84534cb52bc3519c6b89305f8f8a20c67cd79
3
+ metadata.gz: dbcbc16be8b0ff80eabc4f113b0cb0f40649ab6b32923f004551f23b3a281c12
4
+ data.tar.gz: d1f30d6186c9ca075bf9fb9b109476439422dc8b05bafd7fd5e737895cb7917e
5
5
  SHA512:
6
- metadata.gz: b8ab318d62a3615d3e75d4c2fa01f6f962db30b97af9a24451407fa2fbf5fedd5cdf1ef1d95e42aa5f36896418da63ba7b76f52937a24b159336f567ef5e612f
7
- data.tar.gz: 141120ab4a900cd21898fddbece7c8f4ea8bb7cafb9656e249725a6193e6791d9595d89c2dbc0dc424837016e11a12836c6b72d9355ad8601c7aabca9e836db4
6
+ metadata.gz: 584f1485eac89dd4c2ab63f58d6a09bbfbbe3d58d39666ecad723a0d7682e5b5808307db5bb3bf31cb879a192a6ef46090a249f713ffd27ab5d644ce1d43bd79
7
+ data.tar.gz: 6de0d45aac6578db04073699b4072db4e568fbce2a71717610858acc533eb8bd256e2e1baefe7f86113d9ff8691b311bdd257c1e6ff50d3df5041a990b802e60
@@ -1,5 +1,5 @@
1
1
  import React from "react"
2
- import { AdvancedTable, Pill, Body, Flex, Detail, Caption } from "playbook-ui"
2
+ import { AdvancedTable, Pill, Body, Flex, Detail, Caption, Badge, Title } from "playbook-ui"
3
3
  import MOCK_DATA from "./advanced_table_mock_data.json"
4
4
 
5
5
  const AdvancedTableCustomCell = (props) => {
@@ -8,7 +8,18 @@ const AdvancedTableCustomCell = (props) => {
8
8
  accessor: "year",
9
9
  label: "Year",
10
10
  cellAccessors: ["quarter", "month", "day"],
11
-
11
+ customRenderer: (row, value) => (
12
+ <Flex>
13
+ <Title size={4}
14
+ text={value}
15
+ />
16
+ <Badge dark
17
+ marginLeft="xxs"
18
+ text={row.original.newEnrollments > 20 ? "High" : "Low"}
19
+ variant="neutral"
20
+ />
21
+ </Flex>
22
+ ),
12
23
  },
13
24
  {
14
25
  accessor: "newEnrollments",
@@ -1,26 +1,12 @@
1
- import React from "react"
2
- import Card from "../_card"
1
+ import React from 'react'
2
+ import Card from '../_card'
3
3
 
4
4
  const CardLight = (props) => {
5
5
  return (
6
6
  <div>
7
- <Card
8
- height="100%"
9
- htmlOptions={{
10
- style: {
11
- width: "100%",
12
- backgroundColor: "blue",
13
- },
14
- tabIndex: 7
15
- }}
16
- minHeight="189px"
17
- {...props}
18
- >
19
- {"HELLO WORLD!!!"}
20
- </Card>
7
+ <Card {...props}>{'Card content'}</Card>
21
8
  </div>
22
9
  )
23
10
  }
24
11
 
25
12
  export default CardLight
26
-
@@ -1 +1 @@
1
- Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
1
+ Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
@@ -0,0 +1,26 @@
1
+ <% initial_items = [
2
+ {
3
+ id: "1",
4
+ url: "https://unsplash.it/500/400/?image=633",
5
+ },
6
+ {
7
+ id: "2",
8
+ url: "https://unsplash.it/500/400/?image=634",
9
+ },
10
+ {
11
+ id: "3",
12
+ url: "https://unsplash.it/500/400/?image=637",
13
+ },
14
+ ] %>
15
+
16
+ <%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
17
+ <%= pb_rails("draggable/draggable_container") do %>
18
+ <%= pb_rails("flex") do %>
19
+ <% initial_items.each do |item| %>
20
+ <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
21
+ <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url], margin: "xs" }) %>
22
+ <% end %>
23
+ <% end %>
24
+ <% end %>
25
+ <% end %>
26
+ <% end %>
@@ -0,0 +1,7 @@
1
+ The `draggable` kit gives you a full subcomponent structure that allows it to be used with almost any kit.
2
+
3
+ `initial_items` is a REQUIRED prop, which is the array of objects that contains data for the the draggable items.
4
+
5
+ `draggable/draggable_container` = This specifies the container within which items can be dropped.
6
+
7
+ `draggable/draggable_item` = This specifies the items that can be dragged and dropped. `drag_id` is a REQUIRED prop for draggable_item and must match the id on the items within `initial_items`.
@@ -0,0 +1,38 @@
1
+ <% initial_items = [
2
+ { id: "21", name: "Joe Black" },
3
+ { id: "22", name: "Nancy White" },
4
+ { id: "23", name: "Bill Green" },
5
+ ] %>
6
+
7
+ <%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
8
+ <%= pb_rails("draggable/draggable_container") do %>
9
+ <% initial_items.each do |item| %>
10
+ <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
11
+ <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs"}) do %>
12
+ <%= pb_rails("flex", props:{align_items: "stretch", flex_direction:"column"}) do %>
13
+ <%= pb_rails("flex", props:{gap: "xs"}) do %>
14
+ <%= pb_rails("title", props: { text: item[:name], tag: "h4", size: 4 }) %>
15
+ <%= pb_rails("badge", props: {text:"35-12345" ,variant: "primary"}) %>
16
+ <% end %>
17
+ <%= pb_rails("caption", props: { size: "xs", text: "8:00A • Township Name • 90210" }) %>
18
+ <%= pb_rails("flex", props:{gap: "xxs", spacing:"between"}) do %>
19
+ <%= pb_rails("flex", props:{gap: "xxs"}) do %>
20
+ <%= pb_rails("caption", props: { size: "xs" , color: "error" }) do %>
21
+ <%= pb_rails("icon", props: { icon: "house-circle-exclamation", fixed_width: true }) %>
22
+ <% end %>
23
+ <%= pb_rails("caption", props: { size: "xs" , color: "success" }) do %>
24
+ <%= pb_rails("icon", props: { icon: "file-circle-check", fixed_width: true }) %>
25
+ <% end %>
26
+ <% end %>
27
+ <%= pb_rails("flex") do %>
28
+ <%= pb_rails("badge", props: {text:"Schedule QA" ,variant: "warning", rounded: true}) %>
29
+ <%= pb_rails("badge", props: {text:"Flex" ,variant: "primary", rounded: true}) %>
30
+ <%= pb_rails("badge", props: {text:"R99" ,variant: "primary", rounded: true}) %>
31
+ <% end %>
32
+ <% end %>
33
+ <% end %>
34
+ <% end %>
35
+ <% end %>
36
+ <% end %>
37
+ <% end %>
38
+ <% end %>
@@ -0,0 +1,19 @@
1
+ <% initial_items = [
2
+ { id: "31", name: "Philadelphia" },
3
+ { id: "32", name: "New Jersey" },
4
+ { id: "33", name: "Maryland" },
5
+ { id: "34", name: "Connecticut" },
6
+
7
+ ] %>
8
+
9
+ <%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
10
+ <%= pb_rails("draggable/draggable_container") do %>
11
+ <%= pb_rails("list", props: {ordered: false}) do %>
12
+ <% initial_items.each do |item| %>
13
+ <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
14
+ <%= pb_rails("list/item") do %><%= item[:name] %><% end %>
15
+ <% end %>
16
+ <% end %>
17
+ <% end %>
18
+ <% end %>
19
+ <% end %>
@@ -8,4 +8,10 @@ examples:
8
8
  - draggable_with_cards: Draggable with Cards
9
9
  - draggable_multiple_containers: Dragging Across Multiple Containers
10
10
 
11
+ rails:
12
+ - draggable_default_rails: Default
13
+ - draggable_with_list_rails: Draggable with List Kit
14
+ - draggable_with_cards_rails: Draggable with Cards
15
+
16
+
11
17
 
@@ -13,7 +13,30 @@
13
13
  id: "typeahead-form-pill",
14
14
  is_multi: true,
15
15
  options: names,
16
- label: "Names",
16
+ label: "Truncation Within Typeahead",
17
17
  pills: true,
18
18
  truncate: 1,
19
19
  }) %>
20
+
21
+ <%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
22
+ <%= pb_rails("card", props: { max_width: "xs" }) do %>
23
+ <%= pb_rails("form_pill", props: {
24
+ name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
25
+ avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
26
+ tabindex: 0,
27
+ truncate: 1,
28
+ id: "truncation-1"
29
+ }) %>
30
+ <%= pb_rails("form_pill", props: {
31
+ icon: "badge-check",
32
+ text: "icon and a very long tag to show truncation",
33
+ tabindex: 0,
34
+ truncate: 1,
35
+ id: "truncation-2"
36
+ }) %>
37
+ <%= pb_rails("form_pill", props: {
38
+ text: "form pill long tag no tooltip show truncation",
39
+ tabindex: 0,
40
+ truncate: 1,
41
+ }) %>
42
+ <% end %>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import Typeahead from '../../pb_typeahead/_typeahead'
2
+ import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
3
3
 
4
4
  const names = [
5
5
  { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
@@ -15,11 +15,34 @@ const FormPillTruncatedText = (props) => {
15
15
  <Typeahead
16
16
  htmlOptions={{ style: { maxWidth: "240px" }}}
17
17
  isMulti
18
- label="Names"
18
+ label="Truncation Within Typeahead"
19
19
  options={names}
20
20
  truncate={1}
21
21
  {...props}
22
22
  />
23
+ <Caption text="Form Pill Truncation"/>
24
+ <Card maxWidth="xs">
25
+ <FormPill
26
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
27
+ name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
28
+ onClick={() => alert('Click!')}
29
+ tabIndex={0}
30
+ truncate={1}
31
+ />
32
+ <FormPill
33
+ icon="badge-check"
34
+ onClick={() => {alert('Click!')}}
35
+ tabIndex={0}
36
+ text="icon and a very long tag to show truncation"
37
+ truncate={1}
38
+ />
39
+ <FormPill
40
+ onClick={() => {alert('Click!')}}
41
+ tabIndex={0}
42
+ text="form pill with a very long tag to show truncation"
43
+ truncate={1}
44
+ />
45
+ </Card>
23
46
  </>
24
47
  )
25
48
  }
@@ -0,0 +1,3 @@
1
+ For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
2
+
3
+ __NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.
@@ -0,0 +1 @@
1
+ For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
@@ -0,0 +1,51 @@
1
+ import React from 'react'
2
+ import { Flex, SkeletonLoading } from "playbook-ui"
3
+
4
+
5
+ const SkeletonLoadingBorderRadius = (props) => (
6
+ <Flex justify="evenly">
7
+ <SkeletonLoading
8
+ borderRadius="rounded"
9
+ height="50px"
10
+ width="100px"
11
+ {...props}
12
+ />
13
+ <SkeletonLoading
14
+ borderRadius="xl"
15
+ height="50px"
16
+ width="100px"
17
+ {...props}
18
+ />
19
+ <SkeletonLoading
20
+ borderRadius="lg"
21
+ height="50px"
22
+ width="100px"
23
+ {...props}
24
+ />
25
+ <SkeletonLoading
26
+ borderRadius="md"
27
+ height="50px"
28
+ width="100px"
29
+ {...props}
30
+ />
31
+ <SkeletonLoading
32
+ height="50px"
33
+ width="100px"
34
+ {...props}
35
+ />
36
+ <SkeletonLoading
37
+ borderRadius="xs"
38
+ height="50px"
39
+ width="100px"
40
+ {...props}
41
+ />
42
+ <SkeletonLoading
43
+ borderRadius="none"
44
+ height="50px"
45
+ width="100px"
46
+ {...props}
47
+ />
48
+ </Flex>
49
+ )
50
+
51
+ export default SkeletonLoadingBorderRadius
@@ -0,0 +1 @@
1
+ The `borderRadius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.
@@ -0,0 +1,26 @@
1
+ import React from 'react'
2
+ import { Card, SkeletonLoading } from "playbook-ui"
3
+
4
+
5
+ const SkeletonLoadingColor = (props) => (
6
+ <div>
7
+ <Card
8
+ borderNone
9
+ {...props}
10
+ >
11
+ <SkeletonLoading {...props}/>
12
+ </Card>
13
+ <Card
14
+ background="light"
15
+ borderNone
16
+ {...props}
17
+ >
18
+ <SkeletonLoading
19
+ color="white"
20
+ {...props}
21
+ />
22
+ </Card>
23
+ </div>
24
+ )
25
+
26
+ export default SkeletonLoadingColor
@@ -0,0 +1 @@
1
+ The SkeletonLoading component has a default and a white `color` variant.
@@ -0,0 +1 @@
1
+ <%= pb_rails("skeleton_loading") %>
@@ -0,0 +1,11 @@
1
+ import React from 'react'
2
+ import { SkeletonLoading } from "playbook-ui"
3
+
4
+
5
+ const SkeletonLoadingDefault = (props) => (
6
+ <div>
7
+ <SkeletonLoading {...props} />
8
+ </div>
9
+ )
10
+
11
+ export default SkeletonLoadingDefault
@@ -0,0 +1,59 @@
1
+ import React from 'react'
2
+ import { Card, SkeletonLoading } from "playbook-ui"
3
+
4
+
5
+ const SkeletonLoadingHeightWidth = (props) => (
6
+ <div>
7
+ <SkeletonLoading
8
+ height="100px"
9
+ width="50%"
10
+ {...props}
11
+ />
12
+ <SkeletonLoading
13
+ gap="md"
14
+ height="20px"
15
+ marginY="md"
16
+ stack="3"
17
+ width="50px"
18
+ {...props}
19
+ />
20
+ <Card htmlOptions={{ style: { height: '200px', width: '100%' }}}
21
+ marginBottom="md"
22
+ padding="none"
23
+ >
24
+ <SkeletonLoading
25
+ borderRadius="md"
26
+ gap="xl"
27
+ height="50%"
28
+ width="300px"
29
+ {...props}
30
+ />
31
+ </Card>
32
+ <Card htmlOptions={{ style: { height: '200px', width: '100%' }}}
33
+ padding="none"
34
+ >
35
+ <SkeletonLoading
36
+ borderRadius="md"
37
+ gap="xl"
38
+ height="30%"
39
+ stack="2"
40
+ width="70%"
41
+ {...props}
42
+ />
43
+ </Card>
44
+ <SkeletonLoading
45
+ height="150px"
46
+ marginY="md"
47
+ width="150px"
48
+ {...props}
49
+ />
50
+ <SkeletonLoading
51
+ borderRadius="rounded"
52
+ height="150px"
53
+ width="150px"
54
+ {...props}
55
+ />
56
+ </div>
57
+ )
58
+
59
+ export default SkeletonLoadingHeightWidth
@@ -0,0 +1,3 @@
1
+ The `height` and `width` props accept pixel and percentage values. If using a percentage for `height`, the parent container must have a set height.
2
+
3
+ Set the `height` and `width` props to the same value to make a square. A `rounded` borderRadius will make a square a circle. If using percentages to make a square, your parent container must also be a square.
@@ -0,0 +1,20 @@
1
+ import React from 'react'
2
+ import { SkeletonLoading } from "playbook-ui"
3
+
4
+
5
+ const SkeletonLoadingLayout = (props) => (
6
+ <div>
7
+ <SkeletonLoading
8
+ stack="5"
9
+ {...props}
10
+ />
11
+ <SkeletonLoading
12
+ gap="md"
13
+ paddingTop="xl"
14
+ stack="3"
15
+ {...props}
16
+ />
17
+ </div>
18
+ )
19
+
20
+ export default SkeletonLoadingLayout
@@ -0,0 +1,3 @@
1
+ Use the `stack` and `gap` props in conjunction to layer multiple Skeleton loading bars on top of each other.
2
+
3
+ `stack` accepts a number that correlates to the number of rows (1 is default), and `gap` accepts a portion of our [spacing props](https://playbook.powerapp.cloud/visual_guidelines/spacing) (`xxs` as default, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`) to set the pixel distance between each row. `gap` will not do anything if there is no corresponding `stack` prop set.
@@ -0,0 +1,13 @@
1
+ examples:
2
+
3
+ rails:
4
+ # - skeleton_loading_default: Default
5
+
6
+
7
+ react:
8
+ - skeleton_loading_default: Default
9
+ - skeleton_loading_color: Color
10
+ - skeleton_loading_layout: Layout
11
+ - skeleton_loading_border_radius: Border Radius
12
+ - skeleton_loading_height_width: Height & Width
13
+
@@ -0,0 +1,5 @@
1
+ export { default as SkeletonLoadingDefault } from './_skeleton_loading_default.jsx'
2
+ export { default as SkeletonLoadingColor } from './_skeleton_loading_color.jsx'
3
+ export { default as SkeletonLoadingLayout } from './_skeleton_loading_layout.jsx'
4
+ export { default as SkeletonLoadingBorderRadius } from './_skeleton_loading_border_radius.jsx'
5
+ export { default as SkeletonLoadingHeightWidth } from './_skeleton_loading_height_width.jsx'
@@ -0,0 +1,43 @@
1
+ <%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
2
+ <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
3
+
4
+ <% item.label do %>
5
+ <%= pb_rails("timeline/label") do %>
6
+ <%= pb_rails("title", props: { text: "Any Kit Here", size: 2 }) %>
7
+ <% end %>
8
+ <% end %>
9
+
10
+ <% item.step do %>
11
+ <%= pb_rails("timeline/step", props: { icon: 'check', icon_color: 'teal' }) %>
12
+ <% end %>
13
+
14
+ <% item.detail do %>
15
+ <%= pb_rails("title_detail", props: {
16
+ title: "Jackson Heights",
17
+ detail: "37-27 74th Street"
18
+ }) %>
19
+ <% end %>
20
+ <% end %>
21
+ <%= pb_rails("timeline/item", props: { line_style: "dotted"}) do |item| %>
22
+
23
+ <% item.step do %>
24
+ <%= pb_rails("timeline/step") do %>
25
+ <%= pb_rails("pill", props: { text: "Any Kit" , variant: "success" }) %>
26
+ <% end %>
27
+ <% end %>
28
+
29
+ <% item.detail do %>
30
+ <%= pb_rails("title_detail", props: {
31
+ title: "Greenpoint",
32
+ detail: "81 Gate St Brooklyn"
33
+ }) %>
34
+ <% end %>
35
+ <% end %>
36
+
37
+ <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do |item| %>
38
+ <%= pb_rails("title_detail", props: {
39
+ title: "Society Hill",
40
+ detail: "72 E St Astoria"
41
+ }) %>
42
+ <% end %>
43
+ <% end %>
@@ -0,0 +1,68 @@
1
+ import React from 'react'
2
+
3
+ import Timeline from '../_timeline'
4
+ import Title from '../../pb_title/_title'
5
+ import Pill from '../../pb_pill/_pill'
6
+
7
+ import TitleDetail from '../../pb_title_detail/_title_detail'
8
+
9
+ const TimelineWithChildren = (props) => (
10
+ <div>
11
+ <Timeline orientation="horizontal"
12
+ showDate
13
+ {...props}
14
+ >
15
+ <Timeline.Item lineStyle="solid"
16
+ {...props}
17
+ >
18
+ <Timeline.Label>
19
+ <Title size={2}
20
+ text='Any Kit Here'
21
+ />
22
+ </Timeline.Label>
23
+ <Timeline.Step icon="user"
24
+ iconColor="royal"
25
+ />
26
+ <Timeline.Detail>
27
+ <TitleDetail detail="37-27 74th Street"
28
+ title="Jackson Heights"
29
+ {...props}
30
+ />
31
+ </Timeline.Detail>
32
+ </Timeline.Item>
33
+
34
+ <Timeline.Item lineStyle="dotted"
35
+ {...props}
36
+ >
37
+ <Timeline.Step>
38
+ <Pill text="Any Kit"
39
+ variant="success"
40
+ />
41
+ </Timeline.Step>
42
+ <Timeline.Detail>
43
+ <TitleDetail detail="81 Gate St Brooklyn"
44
+ title="Greenpoint"
45
+ {...props}
46
+ />
47
+ </Timeline.Detail>
48
+ </Timeline.Item>
49
+
50
+ <Timeline.Item lineStyle="solid"
51
+ {...props}
52
+ >
53
+ <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
54
+ <Timeline.Step icon="map-marker-alt"
55
+ iconColor="purple"
56
+ />
57
+ <Timeline.Detail>
58
+ <TitleDetail detail="72 E St Astoria"
59
+ title="Society Hill"
60
+ {...props}
61
+ />
62
+ </Timeline.Detail>
63
+ </Timeline.Item>
64
+ </Timeline>
65
+ </div>
66
+ )
67
+
68
+ export default TimelineWithChildren
@@ -0,0 +1,2 @@
1
+ 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.
2
+
@@ -4,10 +4,11 @@ examples:
4
4
  - timeline_default: Default
5
5
  - timeline_vertical: Vertical
6
6
  - timeline_with_date: With Date
7
+ - timeline_with_children: With Children
7
8
 
8
9
 
9
10
  react:
10
11
  - timeline_default: Default
11
12
  - timeline_vertical: Vertical
12
13
  - timeline_with_date: With Date
13
-
14
+ - timeline_with_children: With Children
@@ -1,3 +1,4 @@
1
1
  export { default as TimelineDefault } from './_timeline_default.jsx'
2
2
  export { default as TimelineVertical } from './_timeline_vertical.jsx'
3
3
  export { default as TimelineWithDate } from './_timeline_with_date.jsx'
4
+ export { default as TimelineWithChildren } from './_timeline_with_children.jsx'