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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +13 -2
- data/app/pb_kits/playbook/pb_card/docs/_card_light.jsx +3 -17
- data/app/pb_kits/playbook/pb_card/docs/_card_light.md +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb +26 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md +7 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb +38 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md +0 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb +19 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +24 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +25 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md +3 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md +1 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.jsx +51 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.md +1 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.jsx +26 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.md +1 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb +1 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx +11 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx +59 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.md +3 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx +20 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md +3 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml +13 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/index.js +5 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +43 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +68 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md +2 -0
- data/app/pb_kits/playbook/pb_timeline/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_timeline/docs/index.js +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +24 -3
- 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:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: dbcbc16be8b0ff80eabc4f113b0cb0f40649ab6b32923f004551f23b3a281c12
|
4
|
+
data.tar.gz: d1f30d6186c9ca075bf9fb9b109476439422dc8b05bafd7fd5e737895cb7917e
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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
|
2
|
-
import Card from
|
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 %>
|
File without changes
|
@@ -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: "
|
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 '
|
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="
|
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,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
|
@@ -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'
|