playbook_ui_docs 15.6.0.pre.alpha.play265012993 → 15.6.0.pre.alpha.play266013023
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.html.erb +24 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.jsx +60 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.md +3 -0
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_dialog/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.html.erb +60 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.jsx +118 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.md +1 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md +1 -1
- data/app/pb_kits/playbook/pb_timeline/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_timeline/docs/index.js +1 -0
- metadata +8 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 81c5bdf599a2aa0124c42d936e5ccd93325331a7a37f6404b41ebe8a8b94fac5
|
|
4
|
+
data.tar.gz: 9bba26c50106688348749d493e632289a29c57f984e60c8108936d4a0bf1e50e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 799d5958ac0ee12aa22dc67b335066b8d3324e47d43d70e6b04eb575d82de91105d39b6aff4cfcffa6058f3c28353432959eb8c2402bc8b1893d6c2de2e01ccb
|
|
7
|
+
data.tar.gz: 3486d7241cc465158b554a11eced62382a43b62d2a6b877e7d41f4c68600ea517b7bf0f6cc7939ecc6e0163378db690e650800a5f43130106c107a85d967b8b7
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<%= pb_rails("flex", props:{wrap:true}) do %>
|
|
2
|
+
<%= pb_rails("button", props: { text: "Open Simple Dialog", data: {"open-dialog": "dialog-simple"}, margin_right:"md" }) %>
|
|
3
|
+
<%= pb_rails("button", props: { text: "Open Complex Dialog", data: {"open-dialog": "dialog-complex2"} }) %>
|
|
4
|
+
<% end %>
|
|
5
|
+
|
|
6
|
+
<%= pb_rails("dialog", props: {
|
|
7
|
+
id:"dialog-simple",
|
|
8
|
+
size: "sm",
|
|
9
|
+
title: "Header Title is the Title Prop",
|
|
10
|
+
text: "Hello Body Text, Nice to meet ya.",
|
|
11
|
+
cancel_button: "Cancel Button",
|
|
12
|
+
closeable: false,
|
|
13
|
+
confirm_button: "Okay",
|
|
14
|
+
confirm_button_id: "confirm-button-simple"
|
|
15
|
+
}) %>
|
|
16
|
+
|
|
17
|
+
<%= pb_rails("dialog", props: {
|
|
18
|
+
id:"dialog-complex2",
|
|
19
|
+
size: "sm"
|
|
20
|
+
}) do %>
|
|
21
|
+
<%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex2", title:"Header Title inside Dialog Header", closeable: false } ) %>
|
|
22
|
+
<%= pb_rails("dialog/dialog_body", props:{text: "Hello Body Text, Nice to meet ya."}) %>
|
|
23
|
+
<%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Cancel Button", confirm_button: "Okay", confirm_button_id:"confirm-complex2", id: "dialog-complex2"}) %>
|
|
24
|
+
<% end %>
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import Button from '../../pb_button/_button'
|
|
3
|
+
import Dialog from '../../pb_dialog/_dialog'
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
const DialogCloseable = () => {
|
|
7
|
+
// Simple example
|
|
8
|
+
const [isOpenSimple, setIsOpenSimple] = useState(false)
|
|
9
|
+
const closeSimple = () => setIsOpenSimple(false)
|
|
10
|
+
const openSimple = () => setIsOpenSimple(true)
|
|
11
|
+
|
|
12
|
+
// Complex example
|
|
13
|
+
const [isOpenComplex, setIsOpenComplex] = useState(false)
|
|
14
|
+
const closeComplex = () => setIsOpenComplex(false)
|
|
15
|
+
const openComplex = () => setIsOpenComplex(true)
|
|
16
|
+
|
|
17
|
+
return (
|
|
18
|
+
<>
|
|
19
|
+
<Button
|
|
20
|
+
marginRight='md'
|
|
21
|
+
onClick={openSimple}
|
|
22
|
+
>
|
|
23
|
+
{'Open Simple Dialog'}
|
|
24
|
+
</Button>
|
|
25
|
+
<Button onClick={openComplex}>{'Open Complex Dialog'}</Button>
|
|
26
|
+
|
|
27
|
+
<Dialog
|
|
28
|
+
cancelButton="Cancel Button"
|
|
29
|
+
closeable={false}
|
|
30
|
+
confirmButton="Okay"
|
|
31
|
+
onCancel={closeSimple}
|
|
32
|
+
onClose={closeSimple}
|
|
33
|
+
onConfirm={closeSimple}
|
|
34
|
+
opened={isOpenSimple}
|
|
35
|
+
size="sm"
|
|
36
|
+
text="Hello Body Text, Nice to meet ya."
|
|
37
|
+
title="Header Title is the Title Prop"
|
|
38
|
+
/>
|
|
39
|
+
<Dialog
|
|
40
|
+
onClose={closeComplex}
|
|
41
|
+
opened={isOpenComplex}
|
|
42
|
+
size="sm"
|
|
43
|
+
>
|
|
44
|
+
<Dialog.Header closeable={false}>{'Header Title inside Dialog.Header'}</Dialog.Header>
|
|
45
|
+
<Dialog.Body>{'Hello Body Text, Nice to meet ya.'}</Dialog.Body>
|
|
46
|
+
<Dialog.Footer>
|
|
47
|
+
<Button onClick={closeComplex}>{'Okay'}</Button>
|
|
48
|
+
<Button
|
|
49
|
+
onClick={closeComplex}
|
|
50
|
+
variant="link"
|
|
51
|
+
>
|
|
52
|
+
{'Cancel Button'}
|
|
53
|
+
</Button>
|
|
54
|
+
</Dialog.Footer>
|
|
55
|
+
</Dialog>
|
|
56
|
+
</>
|
|
57
|
+
)
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
export default DialogCloseable
|
|
@@ -12,6 +12,7 @@ examples:
|
|
|
12
12
|
- dialog_full_height_placement: Full Height Placement
|
|
13
13
|
- dialog_loading: Loading
|
|
14
14
|
- dialog_turbo_frames: Within Turbo Frames
|
|
15
|
+
- dialog_closeable: Close Button in Header
|
|
15
16
|
|
|
16
17
|
|
|
17
18
|
react:
|
|
@@ -25,6 +26,7 @@ examples:
|
|
|
25
26
|
- dialog_full_height: Full Height
|
|
26
27
|
- dialog_full_height_placement: Full Height Placement
|
|
27
28
|
- dialog_loading: Loading
|
|
29
|
+
- dialog_closeable: Close Button in Header
|
|
28
30
|
|
|
29
31
|
swift:
|
|
30
32
|
- dialog_default_swift: Simple
|
|
@@ -8,4 +8,5 @@ export { default as DialogStatus } from './_dialog_status.jsx'
|
|
|
8
8
|
export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'
|
|
9
9
|
export { default as DialogFullHeight } from './_dialog_full_height.jsx'
|
|
10
10
|
export { default as DialogFullHeightPlacement } from './_dialog_full_height_placement.jsx'
|
|
11
|
-
export { default as DialogLoading } from './_dialog_loading.jsx'
|
|
11
|
+
export { default as DialogLoading } from './_dialog_loading.jsx'
|
|
12
|
+
export { default as DialogCloseable } from './_dialog_closeable.jsx'
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
|
|
2
|
+
<%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today, show_current_year: true }) do %>
|
|
3
|
+
<%= pb_rails("title_detail", props: {
|
|
4
|
+
title: "Jackson Heights",
|
|
5
|
+
detail: "37-27 74th Street"
|
|
6
|
+
}) %>
|
|
7
|
+
<% end %>
|
|
8
|
+
<%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
|
|
9
|
+
<%= pb_rails("title_detail", props: {
|
|
10
|
+
title: "Greenpoint",
|
|
11
|
+
detail: "81 Gate St Brooklyn"
|
|
12
|
+
}) %>
|
|
13
|
+
<% end %>
|
|
14
|
+
<%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
|
|
15
|
+
<% item.label do %>
|
|
16
|
+
<%= pb_rails("timeline/label", props: { date: Date.today, show_current_year: true }) %>
|
|
17
|
+
<% end %>
|
|
18
|
+
<% item.step do %>
|
|
19
|
+
<%= pb_rails("timeline/step", props: { icon: 'map-marker-alt', icon_color: 'purple' }) %>
|
|
20
|
+
<% end %>
|
|
21
|
+
<% item.detail do %>
|
|
22
|
+
<%= pb_rails("title_detail", props: {
|
|
23
|
+
title: "Society Hill",
|
|
24
|
+
detail: "72 E St Astoria"
|
|
25
|
+
}) %>
|
|
26
|
+
<% end %>
|
|
27
|
+
<% end %>
|
|
28
|
+
<% end %>
|
|
29
|
+
|
|
30
|
+
<br /><br /><br />
|
|
31
|
+
|
|
32
|
+
<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
|
|
33
|
+
<%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today, show_current_year: true }) do %>
|
|
34
|
+
<%= pb_rails("title_detail", props: {
|
|
35
|
+
title: "Jackson Heights",
|
|
36
|
+
detail: "37-27 74th Street"
|
|
37
|
+
}) %>
|
|
38
|
+
<% end %>
|
|
39
|
+
<%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
|
|
40
|
+
<%= pb_rails("title_detail", props: {
|
|
41
|
+
title: "Greenpoint",
|
|
42
|
+
detail: "81 Gate St Brooklyn"
|
|
43
|
+
}) %>
|
|
44
|
+
<% end %>
|
|
45
|
+
<%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
|
|
46
|
+
<% item.label do %>
|
|
47
|
+
<%= pb_rails("timeline/label", props: { date: Date.today, show_current_year: true }) %>
|
|
48
|
+
<% end %>
|
|
49
|
+
<% item.step do %>
|
|
50
|
+
<%= pb_rails("timeline/step", props: { icon: 'map-marker-alt', icon_color: 'purple' }) %>
|
|
51
|
+
<% end %>
|
|
52
|
+
<% item.detail do %>
|
|
53
|
+
<%= pb_rails("title_detail", props: {
|
|
54
|
+
title: "Society Hill",
|
|
55
|
+
detail: "72 E St Astoria"
|
|
56
|
+
}) %>
|
|
57
|
+
<% end %>
|
|
58
|
+
<% end %>
|
|
59
|
+
<% end %>
|
|
60
|
+
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Timeline from '../_timeline'
|
|
4
|
+
import TitleDetail from '../../pb_title_detail/_title_detail'
|
|
5
|
+
|
|
6
|
+
const TimelineShowCurrentYear = (props) => (
|
|
7
|
+
<div>
|
|
8
|
+
<Timeline
|
|
9
|
+
orientation="horizontal"
|
|
10
|
+
showDate
|
|
11
|
+
{...props}
|
|
12
|
+
>
|
|
13
|
+
<Timeline.Item
|
|
14
|
+
date={new Date()}
|
|
15
|
+
icon="user"
|
|
16
|
+
iconColor="royal"
|
|
17
|
+
showCurrentYear
|
|
18
|
+
{...props}
|
|
19
|
+
>
|
|
20
|
+
<TitleDetail
|
|
21
|
+
detail="37-27 74th Street"
|
|
22
|
+
title="Jackson Heights"
|
|
23
|
+
{...props}
|
|
24
|
+
/>
|
|
25
|
+
</Timeline.Item>
|
|
26
|
+
<Timeline.Item
|
|
27
|
+
icon="check"
|
|
28
|
+
iconColor="teal"
|
|
29
|
+
lineStyle="dotted"
|
|
30
|
+
{...props}
|
|
31
|
+
>
|
|
32
|
+
<TitleDetail
|
|
33
|
+
detail="81 Gate St Brooklyn"
|
|
34
|
+
title="Greenpoint"
|
|
35
|
+
{...props}
|
|
36
|
+
/>
|
|
37
|
+
</Timeline.Item>
|
|
38
|
+
<Timeline.Item
|
|
39
|
+
lineStyle="solid"
|
|
40
|
+
{...props}
|
|
41
|
+
>
|
|
42
|
+
<Timeline.Label
|
|
43
|
+
date={new Date()}
|
|
44
|
+
showCurrentYear
|
|
45
|
+
/>
|
|
46
|
+
<Timeline.Step
|
|
47
|
+
icon="map-marker-alt"
|
|
48
|
+
iconColor="purple"
|
|
49
|
+
/>
|
|
50
|
+
<Timeline.Detail>
|
|
51
|
+
<TitleDetail
|
|
52
|
+
detail="72 E St Astoria"
|
|
53
|
+
title="Society Hill"
|
|
54
|
+
{...props}
|
|
55
|
+
/>
|
|
56
|
+
</Timeline.Detail>
|
|
57
|
+
</Timeline.Item>
|
|
58
|
+
</Timeline>
|
|
59
|
+
|
|
60
|
+
<br />
|
|
61
|
+
<br />
|
|
62
|
+
<br />
|
|
63
|
+
|
|
64
|
+
<Timeline
|
|
65
|
+
orientation="vertical"
|
|
66
|
+
showDate
|
|
67
|
+
{...props}
|
|
68
|
+
>
|
|
69
|
+
<Timeline.Item
|
|
70
|
+
date={new Date()}
|
|
71
|
+
icon="user"
|
|
72
|
+
iconColor="royal"
|
|
73
|
+
showCurrentYear
|
|
74
|
+
{...props}
|
|
75
|
+
>
|
|
76
|
+
<TitleDetail
|
|
77
|
+
detail="37-27 74th Street"
|
|
78
|
+
title="Jackson Heights"
|
|
79
|
+
{...props}
|
|
80
|
+
/>
|
|
81
|
+
</Timeline.Item>
|
|
82
|
+
<Timeline.Item
|
|
83
|
+
icon="check"
|
|
84
|
+
iconColor="teal"
|
|
85
|
+
lineStyle="dotted"
|
|
86
|
+
{...props}
|
|
87
|
+
>
|
|
88
|
+
<TitleDetail
|
|
89
|
+
detail="81 Gate St Brooklyn"
|
|
90
|
+
title="Greenpoint"
|
|
91
|
+
{...props}
|
|
92
|
+
/>
|
|
93
|
+
</Timeline.Item>
|
|
94
|
+
<Timeline.Item
|
|
95
|
+
lineStyle="solid"
|
|
96
|
+
{...props}
|
|
97
|
+
>
|
|
98
|
+
<Timeline.Label
|
|
99
|
+
date={new Date()}
|
|
100
|
+
showCurrentYear
|
|
101
|
+
/>
|
|
102
|
+
<Timeline.Step
|
|
103
|
+
icon="map-marker-alt"
|
|
104
|
+
iconColor="purple"
|
|
105
|
+
/>
|
|
106
|
+
<Timeline.Detail>
|
|
107
|
+
<TitleDetail
|
|
108
|
+
detail="72 E St Astoria"
|
|
109
|
+
title="Society Hill"
|
|
110
|
+
{...props}
|
|
111
|
+
/>
|
|
112
|
+
</Timeline.Detail>
|
|
113
|
+
</Timeline.Item>
|
|
114
|
+
</Timeline>
|
|
115
|
+
</div>
|
|
116
|
+
)
|
|
117
|
+
|
|
118
|
+
export default TimelineShowCurrentYear
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
By default, the Timeline kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true. Pass it to `Timeline.Item`/`timeline/item` when using its `date` prop, or to `Timeline.Label`/`timeline/label` if following the "With Children" pattern.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Use the optional `showDate` prop to render the timeline kit with a visible date.
|
|
1
|
+
Use the optional `showDate` prop to render the timeline kit with a visible date. By default, if the date is from the current year, the year will not be displayed; however, if the date is NOT from the current year, the kit will display the year as well.
|
|
@@ -5,6 +5,7 @@ examples:
|
|
|
5
5
|
- timeline_vertical: Vertical
|
|
6
6
|
- timeline_with_date: With Date
|
|
7
7
|
- timeline_with_children: With Children
|
|
8
|
+
- timeline_show_current_year: Show Current Year
|
|
8
9
|
- timeline_with_gap: With Gap
|
|
9
10
|
|
|
10
11
|
|
|
@@ -13,4 +14,5 @@ examples:
|
|
|
13
14
|
- timeline_vertical: Vertical
|
|
14
15
|
- timeline_with_date: With Date
|
|
15
16
|
- timeline_with_children: With Children
|
|
17
|
+
- timeline_show_current_year: Show Current Year
|
|
16
18
|
- timeline_with_gap: With Gap
|
|
@@ -3,4 +3,5 @@ export { default as TimelineVertical } from './_timeline_vertical.jsx'
|
|
|
3
3
|
export { default as TimelineWithDate } from './_timeline_with_date.jsx'
|
|
4
4
|
export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
|
|
5
5
|
export { default as TimelineWithGap } from './_timeline_with_gap.jsx'
|
|
6
|
+
export { default as TimelineShowCurrentYear } from './_timeline_show_current_year.jsx'
|
|
6
7
|
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui_docs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 15.6.0.pre.alpha.
|
|
4
|
+
version: 15.6.0.pre.alpha.play266013023
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2025-12-
|
|
12
|
+
date: 2025-12-11 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -787,6 +787,9 @@ files:
|
|
|
787
787
|
- app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx
|
|
788
788
|
- app/pb_kits/playbook/pb_detail/docs/example.yml
|
|
789
789
|
- app/pb_kits/playbook/pb_detail/docs/index.js
|
|
790
|
+
- app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.html.erb
|
|
791
|
+
- app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.jsx
|
|
792
|
+
- app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.md
|
|
790
793
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb
|
|
791
794
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx
|
|
792
795
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md
|
|
@@ -2411,6 +2414,9 @@ files:
|
|
|
2411
2414
|
- app/pb_kits/playbook/pb_timeline/docs/_description.md
|
|
2412
2415
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_default.html.erb
|
|
2413
2416
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx
|
|
2417
|
+
- app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.html.erb
|
|
2418
|
+
- app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.jsx
|
|
2419
|
+
- app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.md
|
|
2414
2420
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.html.erb
|
|
2415
2421
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx
|
|
2416
2422
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb
|