playbook_ui_docs 15.4.0.pre.alpha.testing6712538 → 15.4.0.pre.alpha.testingseparation12395
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_copy_button/docs/_copy_button_default.html.erb +2 -2
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb +2 -2
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx +0 -2
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_copy_button/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_date_time/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_date_time/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_description.md +5 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb +1 -4
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +3 -14
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb +7 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_progress_step/docs/index.js +0 -2
- metadata +2 -21
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.html.erb +0 -9
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.jsx +0 -24
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_rails.md +0 -1
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_react.md +0 -1
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.html.erb +0 -4
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.jsx +0 -14
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_rails.md +0 -1
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_react.md +0 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.html.erb +0 -4
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.jsx +0 -22
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.md +0 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.html.erb +0 -14
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.jsx +0 -29
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.md +0 -3
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.jsx +0 -31
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.md +0 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.md +0 -3
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.md +0 -3
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.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: faabd46538db925df0f8ac0178e483ade98be0d3fe6ef4208c632dde4fea0c08
|
|
4
|
+
data.tar.gz: e6880645acbb4fb30f04b961623f881372bcfc22ec9b535b0b04ea0be8e7722c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: dfd630d37a2d0755baa65c872d15ff4f08f265efd80f9071e3813c25c79367b05fdffb7c73b715cce84c43a5a44a02eeec72f314a56d0f23d5d33501a1b121fe
|
|
7
|
+
data.tar.gz: c0c7a039149a097569c5f94d9d0d6ac02da544422ec2263b987a1a44f3f61a557f6e2948ec64e3fcfc86da1130c2fa988da0dc63e7aa35a32ba7b29b3c647fe5
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
<%= pb_rails("copy_button", props: { id: "default-copy-button", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
|
|
2
|
-
<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "
|
|
1
|
+
<%= pb_rails("copy_button", props: { id: "default-copy-button", text: "Copy Text", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
|
|
2
|
+
<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
|
|
@@ -7,6 +7,7 @@ const CopyButtonDefault = (props) => (
|
|
|
7
7
|
<div>
|
|
8
8
|
<CopyButton
|
|
9
9
|
{...props}
|
|
10
|
+
text="Copy Text"
|
|
10
11
|
tooltipPlacement="right"
|
|
11
12
|
tooltipText="Text copied!"
|
|
12
13
|
value="Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease."
|
|
@@ -14,7 +15,7 @@ const CopyButtonDefault = (props) => (
|
|
|
14
15
|
|
|
15
16
|
<Textarea
|
|
16
17
|
{...props}
|
|
17
|
-
placeholder="
|
|
18
|
+
placeholder="Copy and paste here"
|
|
18
19
|
/>
|
|
19
20
|
</div>
|
|
20
21
|
)
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<%= pb_rails("body", props: { id: "body", text: "Copy this body text!"}) %>
|
|
2
|
-
<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button"
|
|
2
|
+
<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button" }) %>
|
|
3
3
|
<%= pb_rails("text_input", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
|
|
4
|
-
<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button"
|
|
4
|
+
<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button" }) %>
|
|
5
5
|
<%= pb_rails("text_input", props: { margin_top: "xs", id: "copy-input" , value: "Copy and paste here" }) %>
|
|
@@ -21,7 +21,6 @@ const CopyButtonFrom = (props) => {
|
|
|
21
21
|
text="Copy Body text"
|
|
22
22
|
tooltipPlacement="right"
|
|
23
23
|
tooltipText="Body text copied!"
|
|
24
|
-
variant="button"
|
|
25
24
|
/>
|
|
26
25
|
|
|
27
26
|
<TextInput
|
|
@@ -37,7 +36,6 @@ const CopyButtonFrom = (props) => {
|
|
|
37
36
|
text="Copy Text Input"
|
|
38
37
|
tooltipPlacement="right"
|
|
39
38
|
tooltipText="Text input copied!"
|
|
40
|
-
variant="button"
|
|
41
39
|
/>
|
|
42
40
|
|
|
43
41
|
<Textarea
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
examples:
|
|
2
2
|
rails:
|
|
3
3
|
- copy_button_default: Default
|
|
4
|
-
- copy_button_button_variant: Button Variant
|
|
5
4
|
- copy_button_from: Copy From
|
|
6
5
|
- copy_button_hook_rails: Copy Hook
|
|
7
6
|
|
|
8
7
|
react:
|
|
9
8
|
- copy_button_default: Default
|
|
10
|
-
- copy_button_button_variant: Button Variant
|
|
11
9
|
- copy_button_from: Copy From
|
|
12
10
|
- copy_button_hook: Copy Hook
|
|
@@ -1,4 +1,3 @@
|
|
|
1
1
|
export { default as CopyButtonDefault } from './_copy_button_default.jsx'
|
|
2
2
|
export { default as CopyButtonFrom } from './_copy_button_from.jsx'
|
|
3
3
|
export { default as CopyButtonHook } from './_copy_button_hook.jsx'
|
|
4
|
-
export { default as CopyButtonButtonVariant } from './_copy_button_button_variant.jsx'
|
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
examples:
|
|
2
|
-
|
|
2
|
+
|
|
3
3
|
rails:
|
|
4
4
|
- date_time_default: Default
|
|
5
5
|
- date_time_align: Alignment
|
|
6
6
|
- date_time_size: Size
|
|
7
|
-
- date_time_show_current_year: Show Current Year
|
|
8
7
|
|
|
9
8
|
react:
|
|
10
9
|
- date_time_default: Default
|
|
11
10
|
- date_time_align: Alignment
|
|
12
11
|
- date_time_size: Size
|
|
13
|
-
- date_time_show_current_year: Show Current Year
|
|
14
12
|
|
|
15
13
|
swift:
|
|
16
14
|
- date_time_default_swift: Default
|
|
@@ -1,4 +1,3 @@
|
|
|
1
1
|
export { default as DateTimeDefault } from './_date_time_default.jsx'
|
|
2
2
|
export { default as DateTimeAlign } from './_date_time_align.jsx'
|
|
3
3
|
export { default as DateTimeSize } from './_date_time_size.jsx'
|
|
4
|
-
export { default as DateTimeShowCurrentYear } from './_date_time_show_current_year.jsx'
|
|
@@ -2,11 +2,9 @@ examples:
|
|
|
2
2
|
|
|
3
3
|
rails:
|
|
4
4
|
- date_time_stacked_default: Default
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
|
|
7
6
|
react:
|
|
8
7
|
- date_time_stacked_default: Default
|
|
9
|
-
- date_time_stacked_show_current_year: Show Current Year
|
|
10
8
|
|
|
11
9
|
swift:
|
|
12
10
|
- date_time_stacked_default_swift: Default
|
|
@@ -1 +1,5 @@
|
|
|
1
|
-
Progress
|
|
1
|
+
Progress step kit is used to show the progress of a process. There are three types of steps in this kit: completed, active, and inactive. Completed steps are indicated by a solid, blue circle (with or without an icon). The current, or active, step is indicated by an outlined blue circle. The inactive, or future, step is indicated by a solid gray circle.
|
|
2
|
+
|
|
3
|
+
**Tracker**
|
|
4
|
+
You must set the icon prop to true for this kit.
|
|
5
|
+
This variant takes children just like the default progress step. It is best to use the caption kit for children in this variant.
|
|
@@ -39,10 +39,7 @@
|
|
|
39
39
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
|
|
40
40
|
step 2
|
|
41
41
|
<% end %>
|
|
42
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "
|
|
42
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
|
|
43
43
|
step 3
|
|
44
|
-
<% end %>
|
|
45
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
|
|
46
|
-
step 4
|
|
47
44
|
<% end %>
|
|
48
45
|
<% end %>
|
|
@@ -6,6 +6,7 @@ import ProgressStepItem from '../_progress_step_item.tsx'
|
|
|
6
6
|
const ProgressStepDefault = (props) => (
|
|
7
7
|
<div>
|
|
8
8
|
<ProgressStep
|
|
9
|
+
icon
|
|
9
10
|
{...props}
|
|
10
11
|
>
|
|
11
12
|
<ProgressStepItem status="complete" />
|
|
@@ -18,24 +19,12 @@ const ProgressStepDefault = (props) => (
|
|
|
18
19
|
|
|
19
20
|
<ProgressStep {...props}>
|
|
20
21
|
<ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
|
|
21
|
-
<ProgressStepItem status="
|
|
22
|
-
<ProgressStepItem status="
|
|
23
|
-
<ProgressStepItem status="inactive">{'Step 4'}</ProgressStepItem>
|
|
24
|
-
<ProgressStepItem status="inactive">{'Step 5'}</ProgressStepItem>
|
|
22
|
+
<ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
|
|
23
|
+
<ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
|
|
25
24
|
</ProgressStep>
|
|
26
25
|
|
|
27
26
|
<br />
|
|
28
27
|
<br />
|
|
29
|
-
|
|
30
|
-
<ProgressStep
|
|
31
|
-
icon
|
|
32
|
-
{...props}
|
|
33
|
-
>
|
|
34
|
-
<ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
|
|
35
|
-
<ProgressStepItem status="complete">{'Step 2'}</ProgressStepItem>
|
|
36
|
-
<ProgressStepItem status="active">{'Step 3'}</ProgressStepItem>
|
|
37
|
-
<ProgressStepItem status="inactive">{'Step 4'}</ProgressStepItem>
|
|
38
|
-
</ProgressStep>
|
|
39
28
|
</div>
|
|
40
29
|
)
|
|
41
30
|
|
|
@@ -25,7 +25,13 @@
|
|
|
25
25
|
Child
|
|
26
26
|
<% end %>
|
|
27
27
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
|
|
28
|
-
|
|
28
|
+
<%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
|
|
29
|
+
Card content
|
|
30
|
+
<% end %>
|
|
31
|
+
<br>
|
|
32
|
+
<%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
|
|
33
|
+
Card content
|
|
34
|
+
<% end %>
|
|
29
35
|
<% end %>
|
|
30
36
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
|
|
31
37
|
Child
|
|
@@ -3,7 +3,6 @@ examples:
|
|
|
3
3
|
- progress_step_default: Default
|
|
4
4
|
- progress_step_vertical: Vertical
|
|
5
5
|
- progress_step_tracker: Tracker
|
|
6
|
-
- progress_step_color: Color
|
|
7
6
|
- progress_step_custom_icon: Custom Icon
|
|
8
7
|
- progress_step_tooltip: Tooltip
|
|
9
8
|
|
|
@@ -11,6 +10,4 @@ examples:
|
|
|
11
10
|
- progress_step_default: Default
|
|
12
11
|
- progress_step_vertical: Vertical
|
|
13
12
|
- progress_step_tracker: Tracker
|
|
14
|
-
- progress_step_color: Color
|
|
15
|
-
- progress_step_custom_icon: Custom Icon
|
|
16
13
|
- progress_step_tracker_click_events: Using State
|
|
@@ -2,5 +2,3 @@ export { default as ProgressStepDefault } from './_progress_step_default.jsx'
|
|
|
2
2
|
export { default as ProgressStepVertical } from './_progress_step_vertical.jsx'
|
|
3
3
|
export { default as ProgressStepTracker } from './_progress_step_tracker.jsx'
|
|
4
4
|
export { default as ProgressStepTrackerClickEvents } from './_progress_step_tracker_click_events.jsx'
|
|
5
|
-
export { default as ProgressStepColor } from './_progress_step_color.jsx'
|
|
6
|
-
export { default as ProgressStepCustomIcon } from './_progress_step_custom_icon.jsx'
|
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.4.0.pre.alpha.
|
|
4
|
+
version: 15.4.0.pre.alpha.testingseparation12395
|
|
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-11-
|
|
12
|
+
date: 2025-11-14 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -533,10 +533,6 @@ files:
|
|
|
533
533
|
- app/pb_kits/playbook/pb_contact/docs/_description.md
|
|
534
534
|
- app/pb_kits/playbook/pb_contact/docs/example.yml
|
|
535
535
|
- app/pb_kits/playbook/pb_contact/docs/index.js
|
|
536
|
-
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.html.erb
|
|
537
|
-
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.jsx
|
|
538
|
-
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_rails.md
|
|
539
|
-
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_react.md
|
|
540
536
|
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb
|
|
541
537
|
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx
|
|
542
538
|
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb
|
|
@@ -747,10 +743,6 @@ files:
|
|
|
747
743
|
- app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx
|
|
748
744
|
- app/pb_kits/playbook/pb_date_time/docs/_date_time_default_swift.md
|
|
749
745
|
- app/pb_kits/playbook/pb_date_time/docs/_date_time_props_swift.md
|
|
750
|
-
- app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.html.erb
|
|
751
|
-
- app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.jsx
|
|
752
|
-
- app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_rails.md
|
|
753
|
-
- app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_react.md
|
|
754
746
|
- app/pb_kits/playbook/pb_date_time/docs/_date_time_size.html.erb
|
|
755
747
|
- app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx
|
|
756
748
|
- app/pb_kits/playbook/pb_date_time/docs/_date_time_size_swift.md
|
|
@@ -761,9 +753,6 @@ files:
|
|
|
761
753
|
- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx
|
|
762
754
|
- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default_swift.md
|
|
763
755
|
- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_props_swift.md
|
|
764
|
-
- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.html.erb
|
|
765
|
-
- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.jsx
|
|
766
|
-
- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.md
|
|
767
756
|
- app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml
|
|
768
757
|
- app/pb_kits/playbook/pb_date_time_stacked/docs/index.js
|
|
769
758
|
- app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.html.erb
|
|
@@ -1914,23 +1903,15 @@ files:
|
|
|
1914
1903
|
- app/pb_kits/playbook/pb_progress_simple/docs/example.yml
|
|
1915
1904
|
- app/pb_kits/playbook/pb_progress_simple/docs/index.js
|
|
1916
1905
|
- app/pb_kits/playbook/pb_progress_step/docs/_description.md
|
|
1917
|
-
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.html.erb
|
|
1918
|
-
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.jsx
|
|
1919
|
-
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.md
|
|
1920
1906
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.html.erb
|
|
1921
|
-
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.jsx
|
|
1922
|
-
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.md
|
|
1923
1907
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb
|
|
1924
1908
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx
|
|
1925
|
-
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.md
|
|
1926
1909
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb
|
|
1927
1910
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.html.erb
|
|
1928
1911
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx
|
|
1929
|
-
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.md
|
|
1930
1912
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker_click_events.jsx
|
|
1931
1913
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb
|
|
1932
1914
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx
|
|
1933
|
-
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.md
|
|
1934
1915
|
- app/pb_kits/playbook/pb_progress_step/docs/example.yml
|
|
1935
1916
|
- app/pb_kits/playbook/pb_progress_step/docs/index.js
|
|
1936
1917
|
- app/pb_kits/playbook/pb_radio/docs/_description.md
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
<%= pb_rails("copy_button", props: {
|
|
2
|
-
text: "Copy Text",
|
|
3
|
-
tooltip_position: "right",
|
|
4
|
-
tooltip_text: "Text copied!",
|
|
5
|
-
value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook's 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease.",
|
|
6
|
-
variant: "button",
|
|
7
|
-
}) %>
|
|
8
|
-
|
|
9
|
-
<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
|
|
3
|
-
import CopyButton from '../_copy_button'
|
|
4
|
-
import Textarea from '../../pb_textarea/_textarea'
|
|
5
|
-
|
|
6
|
-
const CopyButtonVariant = (props) => (
|
|
7
|
-
<div>
|
|
8
|
-
<CopyButton
|
|
9
|
-
{...props}
|
|
10
|
-
text="Copy Text"
|
|
11
|
-
tooltipPlacement="right"
|
|
12
|
-
tooltipText="Text copied!"
|
|
13
|
-
value="Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease."
|
|
14
|
-
variant="button"
|
|
15
|
-
/>
|
|
16
|
-
|
|
17
|
-
<Textarea
|
|
18
|
-
{...props}
|
|
19
|
-
placeholder="Copy and paste here"
|
|
20
|
-
/>
|
|
21
|
-
</div>
|
|
22
|
-
)
|
|
23
|
-
|
|
24
|
-
export default CopyButtonVariant
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Pass in `variant: "button"` to replace the Circle Icon Button with the Button kit. Set the button's text with the `text` prop.
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Pass in `variant="button"` to replace the Circle Icon Button with the Button kit. Set the button's text with the `text` prop.
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import DateTime from '../_date_time'
|
|
3
|
-
|
|
4
|
-
const DateTimeShowCurrentYear = (props) => (
|
|
5
|
-
<div>
|
|
6
|
-
<DateTime
|
|
7
|
-
datetime={new Date()}
|
|
8
|
-
showCurrentYear
|
|
9
|
-
{...props}
|
|
10
|
-
/>
|
|
11
|
-
</div>
|
|
12
|
-
)
|
|
13
|
-
|
|
14
|
-
export default DateTimeShowCurrentYear
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Pass in `show_current_year` to show this date's current year.
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Pass in `showCurrentYear` to show this date's current year.
|
data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.jsx
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
|
|
3
|
-
import DateTimeStacked from '../_date_time_stacked'
|
|
4
|
-
|
|
5
|
-
const DateTimeStackedShowCurrentYear = (props) => (
|
|
6
|
-
<div>
|
|
7
|
-
<DateTimeStacked
|
|
8
|
-
datetime={new Date()}
|
|
9
|
-
showCurrentYear
|
|
10
|
-
{...props}
|
|
11
|
-
/>
|
|
12
|
-
<br />
|
|
13
|
-
<DateTimeStacked
|
|
14
|
-
datetime={new Date()}
|
|
15
|
-
showCurrentYear
|
|
16
|
-
timeZone="America/Denver"
|
|
17
|
-
{...props}
|
|
18
|
-
/>
|
|
19
|
-
</div>
|
|
20
|
-
);
|
|
21
|
-
|
|
22
|
-
export default DateTimeStackedShowCurrentYear;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
By default, the Date Time Stacked 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 as shown here.
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
<br><br>
|
|
2
|
-
<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true, color: "info"}) do %>
|
|
3
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
|
|
4
|
-
<%= pb_rails("caption", props:{text: "Ordered"})%>
|
|
5
|
-
<% end %>
|
|
6
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
|
|
7
|
-
<%= pb_rails("caption", props:{text: "Shipped"})%>
|
|
8
|
-
<% end %>
|
|
9
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
|
|
10
|
-
<%= pb_rails("caption", props:{text: "Delivered"})%>
|
|
11
|
-
<% end %>
|
|
12
|
-
<% end %>
|
|
13
|
-
|
|
14
|
-
<br>
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
|
|
3
|
-
import ProgressStep from '../_progress_step.tsx'
|
|
4
|
-
import ProgressStepItem from '../_progress_step_item.tsx'
|
|
5
|
-
import Caption from '../../pb_caption/_caption'
|
|
6
|
-
|
|
7
|
-
const ProgressStepColor = (props) => (
|
|
8
|
-
<div>
|
|
9
|
-
<br />
|
|
10
|
-
<ProgressStep
|
|
11
|
-
color="info"
|
|
12
|
-
icon
|
|
13
|
-
variant="tracker"
|
|
14
|
-
{...props}
|
|
15
|
-
>
|
|
16
|
-
<ProgressStepItem status="complete">
|
|
17
|
-
<Caption>{'Ordered'}</Caption>
|
|
18
|
-
</ProgressStepItem>
|
|
19
|
-
<ProgressStepItem status="active">
|
|
20
|
-
<Caption>{'Shipped'}</Caption>
|
|
21
|
-
</ProgressStepItem>
|
|
22
|
-
<ProgressStepItem status="inactive">
|
|
23
|
-
<Caption>{'Delivered'}</Caption>
|
|
24
|
-
</ProgressStepItem>
|
|
25
|
-
</ProgressStep>
|
|
26
|
-
</div>
|
|
27
|
-
)
|
|
28
|
-
|
|
29
|
-
export default ProgressStepColor
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
|
|
3
|
-
import ProgressStep from '../_progress_step.tsx'
|
|
4
|
-
import ProgressStepItem from '../_progress_step_item.tsx'
|
|
5
|
-
import Caption from '../../pb_caption/_caption'
|
|
6
|
-
|
|
7
|
-
const ProgressStepCustomIcon = (props) => (
|
|
8
|
-
<div>
|
|
9
|
-
<br />
|
|
10
|
-
<ProgressStep
|
|
11
|
-
icon
|
|
12
|
-
variant="tracker"
|
|
13
|
-
{...props}
|
|
14
|
-
>
|
|
15
|
-
<ProgressStepItem status="complete">
|
|
16
|
-
<Caption>{'Ordered'}</Caption>
|
|
17
|
-
</ProgressStepItem>
|
|
18
|
-
<ProgressStepItem
|
|
19
|
-
icon="exclamation-triangle"
|
|
20
|
-
status="active"
|
|
21
|
-
>
|
|
22
|
-
<Caption>{'Shipped'}</Caption>
|
|
23
|
-
</ProgressStepItem>
|
|
24
|
-
<ProgressStepItem status="inactive">
|
|
25
|
-
<Caption>{'Delivered'}</Caption>
|
|
26
|
-
</ProgressStepItem>
|
|
27
|
-
</ProgressStep>
|
|
28
|
-
</div>
|
|
29
|
-
)
|
|
30
|
-
|
|
31
|
-
export default ProgressStepCustomIcon
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Custom icons can also be set for individual steps. Simply use the `icon` prop for the relevant `ProgressStepItem`/`progress_step_item` as shown here.
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
The `variant` prop can be set to `tracker` to achieve this UI. Tracker is only available with the horizontal orientation and it is also recommended that you set the `icon` prop to true for this variant.
|
|
2
|
-
|
|
3
|
-
This variant takes children just like the default progress step, however, it is best to use the caption kit for children in this variant.
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
`orientation` can also be set to `vertical` as shown here. By default, this is set to `horizontal`.
|