playbook_ui_docs 14.12.0.pre.alpha.PLAY1888initializeOncereactdatepickerslowdown5956 → 14.12.0.pre.alpha.PLAY18565866
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/example.yml +3 -3
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +71 -36
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx +6 -6
- data/app/pb_kits/playbook/pb_drawer/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb +11 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx +22 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md +1 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md +1 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_link/docs/example.yml +3 -5
- data/app/pb_kits/playbook/pb_link/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb +6 -6
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +1 -1
- data/dist/playbook-doc.js +1 -1
- metadata +6 -6
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb +0 -2
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb +0 -5
- data/app/pb_kits/playbook/pb_link/docs/_link_target.html.erb +0 -15
- data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx +0 -29
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1c89a2f859ec71c2b1faa06105b4dc44f3a858bb2159135043c20505a9587053
|
|
4
|
+
data.tar.gz: c103f3118042d9007ca2d215e6220281099a14775910d6daf8cd841edb2e987a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a8bb3d13c3ed180b477dc9109ebdb20e354e73aa2e3e3170d52ad5f52425815d8f5a153fab74294edd48a1bd276f14d6cdcf4e2a2c2177147e5d14a285f9e494
|
|
7
|
+
data.tar.gz: 436ce9c8e4d73a8e14d6b5f289bea8c10c4f573807795e395c45d668d1beabd1d5c3f69896929bb89fb5e45bc203330af002a794c76c8b76c57e36bbd40e5172
|
|
@@ -1,42 +1,77 @@
|
|
|
1
|
-
import React, { useState } from "react"
|
|
2
|
-
import { Button, Drawer,
|
|
1
|
+
import React, { useState, useEffect } from "react"
|
|
2
|
+
import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
|
|
3
3
|
|
|
4
|
-
const
|
|
5
|
-
const [
|
|
6
|
-
const
|
|
4
|
+
const DrawerMenu = () => {
|
|
5
|
+
const [isSmallScreen, setIsSmallScreen] = useState(false)
|
|
6
|
+
const navItems = ["Overview", "Albums", "Similar Artists"]
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
const mediaQuery = window.matchMedia("(max-width: 992px)")
|
|
10
|
+
const updateScreen = (e) => setIsSmallScreen(e.matches)
|
|
11
|
+
updateScreen(mediaQuery)
|
|
12
|
+
mediaQuery.addEventListener('change', updateScreen)
|
|
13
|
+
return () => mediaQuery.removeEventListener('change', updateScreen)
|
|
14
|
+
}, [])
|
|
13
15
|
|
|
14
16
|
return (
|
|
15
|
-
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
17
|
+
<div>
|
|
18
|
+
<Button id='sidebar'
|
|
19
|
+
padding='xs'
|
|
20
|
+
>
|
|
21
|
+
<Icon icon='bars'
|
|
22
|
+
size='2x'
|
|
23
|
+
/>
|
|
24
|
+
</Button>
|
|
25
|
+
<Drawer
|
|
26
|
+
behavior={"push"}
|
|
27
|
+
breakpoint='md'
|
|
28
|
+
overlay={isSmallScreen ? true : false}
|
|
29
|
+
placement='left'
|
|
30
|
+
size='md'
|
|
31
|
+
triggerId='sidebar'
|
|
32
|
+
>
|
|
33
|
+
<Nav
|
|
34
|
+
link='#'
|
|
35
|
+
orientation='vertical'
|
|
36
|
+
padding={isSmallScreen ? "none" : "sm"}
|
|
37
|
+
variant='bold'
|
|
34
38
|
>
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
39
|
+
{navItems.map((text, index) => {
|
|
40
|
+
return (
|
|
41
|
+
<NavItem
|
|
42
|
+
collapsible
|
|
43
|
+
collapsibleTrail
|
|
44
|
+
fontWeight='bolder'
|
|
45
|
+
iconLeft='city'
|
|
46
|
+
iconRight={["plus", "minus"]}
|
|
47
|
+
key={index}
|
|
48
|
+
link='#'
|
|
49
|
+
text={text}
|
|
50
|
+
>
|
|
51
|
+
<NavItem fontSize='small'
|
|
52
|
+
link='#'
|
|
53
|
+
marginY='none'
|
|
54
|
+
text='City'
|
|
55
|
+
/>
|
|
56
|
+
<NavItem
|
|
57
|
+
fontSize='small'
|
|
58
|
+
link='#'
|
|
59
|
+
marginY='none'
|
|
60
|
+
text='People'
|
|
61
|
+
/>
|
|
62
|
+
<NavItem
|
|
63
|
+
fontSize='small'
|
|
64
|
+
link='#'
|
|
65
|
+
marginY='none'
|
|
66
|
+
text='Business'
|
|
67
|
+
/>
|
|
68
|
+
</NavItem>
|
|
69
|
+
)
|
|
70
|
+
})}
|
|
71
|
+
</Nav>
|
|
72
|
+
</Drawer>
|
|
73
|
+
</div>
|
|
74
|
+
)
|
|
75
|
+
}
|
|
41
76
|
|
|
42
|
-
export default
|
|
77
|
+
export default DrawerMenu
|
|
@@ -8,8 +8,8 @@ const DrawerMenu = () => {
|
|
|
8
8
|
const mediaQuery = window.matchMedia("(max-width: 600px)")
|
|
9
9
|
setIsSmallScreen(mediaQuery.matches)
|
|
10
10
|
const handler = (e) => setIsSmallScreen(e.matches)
|
|
11
|
-
mediaQuery.addEventListener(
|
|
12
|
-
return () => mediaQuery.removeEventListener(
|
|
11
|
+
mediaQuery.addEventListener("change", handler)
|
|
12
|
+
return () => mediaQuery.removeEventListener("change", handler)
|
|
13
13
|
}, [])
|
|
14
14
|
|
|
15
15
|
return (
|
|
@@ -22,17 +22,17 @@ const DrawerMenu = () => {
|
|
|
22
22
|
/>
|
|
23
23
|
</Button>
|
|
24
24
|
<Drawer
|
|
25
|
-
breakpoint=
|
|
25
|
+
breakpoint='md'
|
|
26
26
|
placement='bottom'
|
|
27
27
|
size='full'
|
|
28
28
|
triggerId='menuButton'
|
|
29
29
|
withinElement
|
|
30
30
|
>
|
|
31
|
-
<Nav
|
|
31
|
+
<Nav
|
|
32
32
|
highlight={false}
|
|
33
33
|
link='#'
|
|
34
|
-
orientation={isSmallScreen ?
|
|
35
|
-
padding={isSmallScreen ?
|
|
34
|
+
orientation={isSmallScreen ? "vertical" : "horizontal"}
|
|
35
|
+
padding={isSmallScreen ? "none" : "sm"}
|
|
36
36
|
>
|
|
37
37
|
<NavItem link='#'
|
|
38
38
|
text='About'
|
data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<%= pb_rails("home_address_street", props: {
|
|
2
|
+
address: "70 pRoSpEcT ave",
|
|
3
|
+
address_cont: "Apt M18",
|
|
4
|
+
city: "West Chester",
|
|
5
|
+
home_id: 8250263,
|
|
6
|
+
home_url: "https://powerhrg.com/",
|
|
7
|
+
preserve_case: true,
|
|
8
|
+
state: "pa",
|
|
9
|
+
zipcode: "19382",
|
|
10
|
+
territory: "PHL",
|
|
11
|
+
}) %>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import HomeAddressStreet from '../_home_address_street'
|
|
4
|
+
|
|
5
|
+
const HomeAddressStreetFormatting = (props) => {
|
|
6
|
+
return (
|
|
7
|
+
<HomeAddressStreet
|
|
8
|
+
address="70 pRoSpEcT ave"
|
|
9
|
+
addressCont="Apt M18"
|
|
10
|
+
city="West Chester"
|
|
11
|
+
homeId="8250263"
|
|
12
|
+
homeUrl="https://powerhrg.com/"
|
|
13
|
+
preserveCase
|
|
14
|
+
state="pa"
|
|
15
|
+
territory="PHL"
|
|
16
|
+
zipcode="19382"
|
|
17
|
+
{...props}
|
|
18
|
+
/>
|
|
19
|
+
)
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export default HomeAddressStreetFormatting
|
data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserve_case: true`, the street address will be rendered exactly as entered, without automatic title capitalization.
|
data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserveCase`, the street address will be rendered exactly as entered, without automatic title capitalization.
|
|
@@ -5,12 +5,14 @@ examples:
|
|
|
5
5
|
- home_address_street_emphasis: Emphasis
|
|
6
6
|
- home_address_street_modified: Modified
|
|
7
7
|
- home_address_street_link: Link
|
|
8
|
+
- home_address_street_formatting: Formatting
|
|
8
9
|
|
|
9
10
|
react:
|
|
10
11
|
- home_address_street_default: Default
|
|
11
12
|
- home_address_street_emphasis: Emphasis
|
|
12
13
|
- home_address_street_modified: Modified
|
|
13
14
|
- home_address_street_link: Link
|
|
15
|
+
- home_address_street_formatting: Formatting
|
|
14
16
|
|
|
15
17
|
swift:
|
|
16
18
|
- home_address_street_default_swift: Default
|
|
@@ -2,3 +2,4 @@ export { default as HomeAddressStreetDefault } from './_home_address_street_defa
|
|
|
2
2
|
export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
|
|
3
3
|
export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
|
|
4
4
|
export { default as HomeAddressStreetLink } from './_home_address_street_link.jsx'
|
|
5
|
+
export { default as HomeAddressStreetFormatting } from './_home_address_street_formatting.jsx'
|
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
examples:
|
|
2
|
-
|
|
2
|
+
|
|
3
3
|
rails:
|
|
4
4
|
- link_color: Color
|
|
5
5
|
- link_underline: Underline
|
|
6
6
|
- link_icon: Icon
|
|
7
7
|
- link_disabled: Disabled
|
|
8
8
|
- link_tag: Tag
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
|
|
10
|
+
|
|
12
11
|
react:
|
|
13
12
|
- link_color: Color
|
|
14
13
|
- link_underline: Underline
|
|
15
14
|
- link_icon: Icon
|
|
16
15
|
- link_disabled: Disabled
|
|
17
16
|
- link_tag: Tag
|
|
18
|
-
- link_target: Target
|
|
@@ -2,5 +2,4 @@ export { default as LinkColor } from './_link_color.jsx'
|
|
|
2
2
|
export { default as LinkUnderline } from './_link_underline.jsx'
|
|
3
3
|
export { default as LinkIcon } from './_link_icon.jsx'
|
|
4
4
|
export { default as LinkDisabled } from './_link_disabled.jsx'
|
|
5
|
-
export { default as LinkTag } from './_link_tag.jsx'
|
|
6
|
-
export { default as LinkTarget } from './_link_target.jsx'
|
|
5
|
+
export { default as LinkTag } from './_link_tag.jsx'
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-1", tooltip: "Tooltip for step 1", tooltip_position: "right", step_direction: "horizontal" }) do %>
|
|
3
3
|
step 1
|
|
4
4
|
<% end %>
|
|
5
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2",
|
|
5
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", step_direction: "horizontal" }) do %>
|
|
6
6
|
step 2
|
|
7
7
|
<% end %>
|
|
8
8
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-3", tooltip: "Tooltip for step 3", tooltip_position: "left", step_direction: "horizontal" }) do %>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-4", tooltip: "Tooltip for step 4", tooltip_position: "bottom" }) do %>
|
|
12
12
|
step 4
|
|
13
13
|
<% end %>
|
|
14
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5"
|
|
14
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5" }) do %>
|
|
15
15
|
step 5
|
|
16
16
|
<% end %>
|
|
17
17
|
<% end %>
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
<br /><br />
|
|
20
20
|
|
|
21
21
|
<%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
|
|
22
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical"
|
|
22
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical" }) do %>
|
|
23
23
|
<% end %>
|
|
24
24
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-7", tooltip: "Tooltip step 2", tooltip_position: "left"}) do %>
|
|
25
25
|
<% end %>
|
|
@@ -31,10 +31,10 @@
|
|
|
31
31
|
|
|
32
32
|
<br /><br>
|
|
33
33
|
<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
|
|
34
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right"
|
|
34
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right" }) do %>
|
|
35
35
|
<%= pb_rails("caption", props:{text: "Ordered"})%>
|
|
36
36
|
<% end %>
|
|
37
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped"
|
|
37
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped" }) do %>
|
|
38
38
|
<%= pb_rails("caption", props:{text: "Shipped"})%>
|
|
39
39
|
<% end %>
|
|
40
40
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-12", tooltip:"This step has not been reached", tooltip_position: "left" }) do %>
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", icon: "exclamation-triangle", classname: "tooltip-trigger-14", tooltip: "More details needed before shipment", tooltip_position: "bottom" }) do %>
|
|
51
51
|
<%= pb_rails("caption", props:{text: "Shipped"})%>
|
|
52
52
|
<% end %>
|
|
53
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive"
|
|
53
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive"}) do %>
|
|
54
54
|
<%= pb_rails("caption", props:{text: "Out for Delivery"})%>
|
|
55
55
|
<% end %>
|
|
56
56
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-16", tooltip: "Estimated delivery: Jun 27", tooltip_position: "left"}) do %>
|