playbook_ui_docs 14.12.0.pre.alpha.PLAY1888initializeOncereactdatepickerslowdown5956 → 14.12.0.pre.alpha.PLAY18565866
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_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 %>
|