playbook_ui 14.14.0.pre.alpha.play1755pbcontenttag6327 → 14.14.0.pre.alpha.play1755pbcontenttag6460
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_currency/_currency.tsx +46 -31
- data/app/pb_kits/playbook/pb_currency/currency.html.erb +15 -8
- data/app/pb_kits/playbook/pb_currency/currency.rb +17 -2
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb +22 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx +34 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_rails.md +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_react.md +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_currency/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_drawer/_drawer.scss +32 -8
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb +8 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb +33 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb +0 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +20 -1
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb +24 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb +21 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.md +1 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb +49 -0
- data/app/pb_kits/playbook/pb_drawer/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_drawer/drawer.html.erb +20 -12
- data/app/pb_kits/playbook/pb_drawer/drawer.rb +49 -1
- data/app/pb_kits/playbook/pb_drawer/index.js +257 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_overlay/_overlay.scss +13 -0
- data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +7 -1
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.html.erb +11 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx +37 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb +11 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_overlay/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_overlay/index.js +61 -0
- data/app/pb_kits/playbook/pb_overlay/overlay.html.erb +5 -3
- data/app/pb_kits/playbook/pb_overlay/overlay.rb +16 -1
- data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +12 -0
- data/app/pb_kits/playbook/pb_select/index.js +38 -0
- data/app/pb_kits/playbook/pb_select/select.html.erb +1 -1
- data/app/pb_kits/playbook/pb_select/select.rb +8 -0
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +0 -3
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb +39 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md +3 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb +26 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_tooltip/floating_ui.js +282 -0
- data/app/pb_kits/playbook/pb_tooltip/index.js +1 -1
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +10 -2
- data/dist/chunks/{_typeahead-PqkcDf1H.js → _typeahead-BGTMEmj7.js} +2 -2
- data/dist/chunks/_weekday_stacked-BBzZIYVP.js +45 -0
- data/dist/chunks/{lib-D3us1bGD.js → lib-Fr78pbpF.js} +1 -1
- data/dist/chunks/{pb_form_validation-BpihMSOQ.js → pb_form_validation-CN51bfsD.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +2 -2
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +30 -6
- data/dist/chunks/_weekday_stacked-C3in3hCo.js +0 -45
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 931d67f7d61788f0bbb01bf8dda120907d838926d3723af2bd25deb73bf3a98e
|
|
4
|
+
data.tar.gz: 439fb7109bcabe2b11c288f95d99849cf5cee09681f1401598de454db1ac2b30
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 32590440cb2924f49543a9f3486f2e9fecce2c24434c658a288ba37d4ad1953dcd3cebe2d6f6db37724fe94ad4e6c67d7077ace41e700392a2a75d0d0fdaa405
|
|
7
|
+
data.tar.gz: a0403021afa28a4dada1723bacc30ccc10278405265971b0b0f841341f88f063a9082531bb47a614b073265563be64709e937e14657ef058e9bf7024523b9905
|
|
@@ -21,6 +21,7 @@ type CurrencyProps = {
|
|
|
21
21
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
|
22
22
|
id?: string,
|
|
23
23
|
label?: string,
|
|
24
|
+
nullDisplay?: string,
|
|
24
25
|
size?: 'sm' | 'md' | 'lg',
|
|
25
26
|
symbol?: string,
|
|
26
27
|
variant?: 'default' | 'light' | 'bold',
|
|
@@ -49,6 +50,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
|
|
|
49
50
|
unit,
|
|
50
51
|
className,
|
|
51
52
|
label = '',
|
|
53
|
+
nullDisplay = '',
|
|
52
54
|
size = 'sm',
|
|
53
55
|
symbol = '$',
|
|
54
56
|
variant = 'default',
|
|
@@ -118,44 +120,57 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
|
|
|
118
120
|
id={id}
|
|
119
121
|
>
|
|
120
122
|
<Caption dark={dark}>{label}</Caption>
|
|
121
|
-
|
|
122
123
|
<div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
|
|
123
124
|
{unstyled ? (
|
|
124
|
-
|
|
125
|
-
<div>{
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
{
|
|
129
|
-
{
|
|
130
|
-
|
|
131
|
-
|
|
125
|
+
nullDisplay && !amount ? (
|
|
126
|
+
<div>{nullDisplay}</div>
|
|
127
|
+
) : (
|
|
128
|
+
<>
|
|
129
|
+
<div>{handleNegative}{symbol}</div>
|
|
130
|
+
<div>{getAmount}</div>
|
|
131
|
+
<div>
|
|
132
|
+
{getAbbreviation}
|
|
133
|
+
{unit ? unit : getDecimalValue}
|
|
134
|
+
</div>
|
|
135
|
+
</>
|
|
136
|
+
)
|
|
132
137
|
) : (
|
|
133
|
-
|
|
134
|
-
<Body
|
|
135
|
-
className="dollar_sign"
|
|
136
|
-
color="light"
|
|
137
|
-
dark={dark}
|
|
138
|
-
>
|
|
139
|
-
{handleNegative}{symbol}
|
|
140
|
-
</Body>
|
|
141
|
-
|
|
138
|
+
nullDisplay && !amount ? (
|
|
142
139
|
<Title
|
|
143
140
|
className="pb_currency_value"
|
|
144
141
|
dark={dark}
|
|
145
142
|
size={sizes[size]}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
143
|
+
>
|
|
144
|
+
{nullDisplay}
|
|
145
|
+
</Title>
|
|
146
|
+
) : (
|
|
147
|
+
<>
|
|
148
|
+
<Body
|
|
149
|
+
className="dollar_sign"
|
|
150
|
+
color="light"
|
|
151
|
+
dark={dark}
|
|
152
|
+
>
|
|
153
|
+
{handleNegative}{symbol}
|
|
154
|
+
</Body>
|
|
155
|
+
|
|
156
|
+
<Title
|
|
157
|
+
className="pb_currency_value"
|
|
158
|
+
dark={dark}
|
|
159
|
+
size={sizes[size]}
|
|
160
|
+
>
|
|
161
|
+
{getAmount}
|
|
162
|
+
</Title>
|
|
163
|
+
|
|
164
|
+
<Body
|
|
165
|
+
className="unit"
|
|
166
|
+
color="light"
|
|
167
|
+
dark={dark}
|
|
168
|
+
>
|
|
169
|
+
{getAbbreviation}
|
|
170
|
+
{unit ? unit : getDecimalValue}
|
|
171
|
+
</Body>
|
|
172
|
+
</>
|
|
173
|
+
)
|
|
159
174
|
)}
|
|
160
175
|
</div>
|
|
161
176
|
</div>
|
|
@@ -1,17 +1,24 @@
|
|
|
1
1
|
<%= pb_content_tag do %>
|
|
2
2
|
<%= pb_rails("caption", props: object.caption_props) %>
|
|
3
|
-
|
|
4
3
|
<div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
|
|
5
4
|
<% if object.unstyled %>
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
<% if object.null_display && object.amount.blank? %>
|
|
6
|
+
<div><%= object.null_display %></div>
|
|
7
|
+
<% else %>
|
|
8
|
+
<div><%= object.negative_sign %><%= object.symbol %></div>
|
|
9
|
+
<div><%= object.title_props[:text] %></div>
|
|
10
|
+
<div><%= object.body_props[:text] %></div>
|
|
11
|
+
<% end %>
|
|
9
12
|
<% else %>
|
|
10
|
-
|
|
11
|
-
<%=
|
|
13
|
+
<% if object.null_display && object.amount.blank? %>
|
|
14
|
+
<%= pb_rails("title", props: object.title_props) %>
|
|
15
|
+
<% else %>
|
|
16
|
+
<%= pb_rails("body", props: object.currency_wrapper_props) do %>
|
|
17
|
+
<%= object.negative_sign %><%= object.symbol %>
|
|
18
|
+
<% end %>
|
|
19
|
+
<%= pb_rails("title", props: object.title_props) %>
|
|
20
|
+
<%= pb_rails("body", props: object.body_props) %>
|
|
12
21
|
<% end %>
|
|
13
|
-
<%= pb_rails("title", props: object.title_props) %>
|
|
14
|
-
<%= pb_rails("body", props: object.body_props) %>
|
|
15
22
|
<% end %>
|
|
16
23
|
</div>
|
|
17
24
|
<% end %>
|
|
@@ -46,6 +46,9 @@ module Playbook
|
|
|
46
46
|
prop :comma_separator, type: Playbook::Props::Boolean,
|
|
47
47
|
default: false
|
|
48
48
|
|
|
49
|
+
prop :null_display, type: Playbook::Props::String,
|
|
50
|
+
required: false
|
|
51
|
+
|
|
49
52
|
def classname
|
|
50
53
|
generate_classname("pb_currency_kit", align, size, dark_class)
|
|
51
54
|
end
|
|
@@ -65,10 +68,20 @@ module Playbook
|
|
|
65
68
|
}
|
|
66
69
|
end
|
|
67
70
|
|
|
71
|
+
def title_text
|
|
72
|
+
if null_display
|
|
73
|
+
null_display
|
|
74
|
+
elsif swap_negative
|
|
75
|
+
absolute_amount(abbr_or_format_amount)
|
|
76
|
+
else
|
|
77
|
+
abbr_or_format_amount
|
|
78
|
+
end
|
|
79
|
+
end
|
|
80
|
+
|
|
68
81
|
def title_props
|
|
69
82
|
{
|
|
70
83
|
size: size_value,
|
|
71
|
-
text:
|
|
84
|
+
text: title_text,
|
|
72
85
|
classname: "pb_currency_value",
|
|
73
86
|
dark: dark,
|
|
74
87
|
}
|
|
@@ -145,8 +158,10 @@ module Playbook
|
|
|
145
158
|
1
|
|
146
159
|
when "md"
|
|
147
160
|
3
|
|
148
|
-
|
|
161
|
+
when "sm"
|
|
149
162
|
4
|
|
163
|
+
else
|
|
164
|
+
3
|
|
150
165
|
end
|
|
151
166
|
end
|
|
152
167
|
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<%= pb_rails("currency", props: {
|
|
2
|
+
amount: "",
|
|
3
|
+
label: "Nil",
|
|
4
|
+
margin_bottom: "md",
|
|
5
|
+
null_display: "--",
|
|
6
|
+
size: "sm"
|
|
7
|
+
}) %>
|
|
8
|
+
|
|
9
|
+
<%= pb_rails("currency", props: {
|
|
10
|
+
amount: "",
|
|
11
|
+
label: "Nil",
|
|
12
|
+
margin_bottom: "md",
|
|
13
|
+
null_display: "$0.00",
|
|
14
|
+
size: "sm"
|
|
15
|
+
}) %>
|
|
16
|
+
|
|
17
|
+
<%= pb_rails("currency", props: {
|
|
18
|
+
amount: "",
|
|
19
|
+
label: "Nil",
|
|
20
|
+
null_display: " ",
|
|
21
|
+
size: "sm"
|
|
22
|
+
}) %>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Currency } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const CurrencyNullDisplay = (props) => {
|
|
5
|
+
return (
|
|
6
|
+
<>
|
|
7
|
+
<Currency
|
|
8
|
+
amount=""
|
|
9
|
+
label="Null"
|
|
10
|
+
marginBottom="md"
|
|
11
|
+
nullDisplay="--"
|
|
12
|
+
{...props}
|
|
13
|
+
/>
|
|
14
|
+
|
|
15
|
+
<Currency
|
|
16
|
+
amount=""
|
|
17
|
+
label="Null"
|
|
18
|
+
marginBottom="md"
|
|
19
|
+
nullDisplay="$0.00"
|
|
20
|
+
{...props}
|
|
21
|
+
/>
|
|
22
|
+
|
|
23
|
+
<Currency
|
|
24
|
+
amount=""
|
|
25
|
+
label="Null"
|
|
26
|
+
marginBottom="md"
|
|
27
|
+
nullDisplay=" "
|
|
28
|
+
{...props}
|
|
29
|
+
/>
|
|
30
|
+
</>
|
|
31
|
+
)
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export default CurrencyNullDisplay
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
To customize how the `amount` field appears when it is empty, use the `null_display` prop and set it to the desired value you want to display.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
To customize how the `amount` field appears when it is empty, use the `nullDisplay` prop and set it to the desired value you want to display.
|
|
@@ -10,6 +10,7 @@ examples:
|
|
|
10
10
|
- currency_unstyled: Unstyled
|
|
11
11
|
- currency_comma_separator: Comma Separator
|
|
12
12
|
- currency_negative: Negative
|
|
13
|
+
- currency_null_display: Null Display
|
|
13
14
|
|
|
14
15
|
react:
|
|
15
16
|
- currency_variants: Variants
|
|
@@ -21,6 +22,7 @@ examples:
|
|
|
21
22
|
- currency_unstyled: Unstyled
|
|
22
23
|
- currency_comma_separator: Comma Separator
|
|
23
24
|
- currency_negative: Negative
|
|
25
|
+
- currency_null_display: Null Display
|
|
24
26
|
|
|
25
27
|
swift:
|
|
26
28
|
- currency_size_swift: Size
|
|
@@ -6,4 +6,5 @@ export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
|
|
|
6
6
|
export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
|
|
7
7
|
export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
|
|
8
8
|
export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
|
|
9
|
-
export { default as CurrencyNegative } from './_currency_negative.jsx'
|
|
9
|
+
export { default as CurrencyNegative } from './_currency_negative.jsx'
|
|
10
|
+
export { default as CurrencyNullDisplay } from './_currency_null_display.jsx'
|
|
@@ -134,14 +134,6 @@ body.PBDrawer__Body--close {
|
|
|
134
134
|
transition: margin-left $animation-duration ease-out, margin-right $animation-duration ease-out;
|
|
135
135
|
}
|
|
136
136
|
|
|
137
|
-
.pb_drawer_lg_left.pb_drawer {
|
|
138
|
-
transform: translateX(-100%);
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
.pb_drawer_lg_right.pb_drawer {
|
|
142
|
-
transform: translateX(100%);
|
|
143
|
-
}
|
|
144
|
-
|
|
145
137
|
.pb_drawer.pb_drawer_after_open {
|
|
146
138
|
pointer-events: auto;
|
|
147
139
|
transform: translate3d(0, 0, 0);
|
|
@@ -157,6 +149,34 @@ body.PBDrawer__Body--close {
|
|
|
157
149
|
animation-duration: $animation-duration;
|
|
158
150
|
outline: none;
|
|
159
151
|
|
|
152
|
+
&.pb_drawer_within_element_rails {
|
|
153
|
+
position: relative;
|
|
154
|
+
width: 100%;
|
|
155
|
+
display: block;
|
|
156
|
+
background-color: $white;
|
|
157
|
+
overflow: hidden;
|
|
158
|
+
|
|
159
|
+
// Use max-height for a smooth accordion-like animation
|
|
160
|
+
max-height: 0;
|
|
161
|
+
transition: max-height $animation-duration ease-in-out;
|
|
162
|
+
z-index: 1;
|
|
163
|
+
|
|
164
|
+
&.open {
|
|
165
|
+
max-height: 1000px;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
&::before {
|
|
169
|
+
content: '';
|
|
170
|
+
position: absolute;
|
|
171
|
+
top: 0;
|
|
172
|
+
left: 0;
|
|
173
|
+
right: 0;
|
|
174
|
+
bottom: 0;
|
|
175
|
+
background-color: inherit;
|
|
176
|
+
z-index: -1;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
160
180
|
&.pb_drawer_within_element {
|
|
161
181
|
position: relative;
|
|
162
182
|
width: 100%;
|
|
@@ -329,6 +349,10 @@ body.PBDrawer__Body--close {
|
|
|
329
349
|
opacity: 1;
|
|
330
350
|
pointer-events: none;
|
|
331
351
|
|
|
352
|
+
& .pb_drawer {
|
|
353
|
+
pointer-events: auto;
|
|
354
|
+
}
|
|
355
|
+
|
|
332
356
|
&_before_close {
|
|
333
357
|
height: 0;
|
|
334
358
|
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<%= pb_rails("flex") do %>
|
|
2
|
+
<%= pb_rails("button", props: { text: "Drawer with border right", margin_right: "sm", data: {"open-drawer": "drawer-12"} }) %>
|
|
3
|
+
|
|
4
|
+
<%= pb_rails("drawer", props: {
|
|
5
|
+
id:"drawer-12",
|
|
6
|
+
overlay: false,
|
|
7
|
+
border: "right"
|
|
8
|
+
}) do %>
|
|
9
|
+
Test me (Border Right)
|
|
10
|
+
<% end %>
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("button", props: { text: "Drawer with border left", margin_right: "sm", data: {"open-drawer": "drawer-13"} }) %>
|
|
14
|
+
|
|
15
|
+
<%= pb_rails("drawer", props: {
|
|
16
|
+
id:"drawer-13",
|
|
17
|
+
overlay: false,
|
|
18
|
+
border: "left"
|
|
19
|
+
}) do %>
|
|
20
|
+
Test me (Border Left)
|
|
21
|
+
<% end %>
|
|
22
|
+
|
|
23
|
+
<%= pb_rails("button", props: { text: "Drawer with border full", data: {"open-drawer": "drawer-14"} }) %>
|
|
24
|
+
|
|
25
|
+
<%= pb_rails("drawer", props: {
|
|
26
|
+
id:"drawer-14",
|
|
27
|
+
overlay: false,
|
|
28
|
+
border: "full"
|
|
29
|
+
}) do %>
|
|
30
|
+
Test me (Border Full)
|
|
31
|
+
<% end %>
|
|
32
|
+
<% end %>
|
|
33
|
+
|
|
File without changes
|
|
@@ -1 +1,20 @@
|
|
|
1
|
-
<%= pb_rails("
|
|
1
|
+
<%= pb_rails("flex") do %>
|
|
2
|
+
<%= pb_rails("button", props: { text: "Left Drawer", margin_right: "sm", data: {"open-drawer": "drawer-1"} }) %>
|
|
3
|
+
|
|
4
|
+
<%= pb_rails("drawer", props: {
|
|
5
|
+
id:"drawer-1",
|
|
6
|
+
}) do %>
|
|
7
|
+
Test me (Left Drawer)
|
|
8
|
+
<% end %>
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
<%= pb_rails("button", props: { text: "Right Drawer", data: {"open-drawer": "drawer-2"} }) %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("drawer", props: {
|
|
14
|
+
id:"drawer-2",
|
|
15
|
+
placement: "right"
|
|
16
|
+
}) do %>
|
|
17
|
+
Test me (Right Drawer)
|
|
18
|
+
<% end %>
|
|
19
|
+
<% end %>
|
|
20
|
+
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<%= pb_rails("button", props: { padding: "xs", margin_right: "sm", data: {"open-drawer": "drawer-4"} }) do %>
|
|
2
|
+
<%= pb_rails("icon", props: { icon: "bars", size: "2x" }) %>
|
|
3
|
+
<% end %>
|
|
4
|
+
|
|
5
|
+
<%= pb_rails("drawer", props: {
|
|
6
|
+
id:"drawer-4",
|
|
7
|
+
within_element: true,
|
|
8
|
+
placement: "bottom",
|
|
9
|
+
breakpoint: "md",
|
|
10
|
+
size: "full"
|
|
11
|
+
}) do %>
|
|
12
|
+
<%= pb_rails("nav", props: { display: {xl: "none", lg: "none", md: "none", sm: "block" } }) do %>
|
|
13
|
+
<%= pb_rails("nav/item", props: { text: "Photos", link: "#" }) %>
|
|
14
|
+
<%= pb_rails("nav/item", props: { text: "Music", link: "#" }) %>
|
|
15
|
+
<%= pb_rails("nav/item", props: { text: "Video", link: "#", active: true }) %>
|
|
16
|
+
<%= pb_rails("nav/item", props: { text: "Files", link: "#" }) %>
|
|
17
|
+
<% end %>
|
|
18
|
+
<%= pb_rails("nav", props: { display: {md: "block", sm: "none", xs: "none" }, orientation: "horizontal" }) do %>
|
|
19
|
+
<%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
|
|
20
|
+
<%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
|
|
21
|
+
<%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
|
|
22
|
+
<%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
|
|
23
|
+
<% end %>
|
|
24
|
+
<% end %>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<%= pb_rails("flex") do %>
|
|
2
|
+
<%= pb_rails("button", props: { text: "No Overlay Drawer", margin_right: "sm", data: {"open-drawer": "drawer-10"} }) %>
|
|
3
|
+
|
|
4
|
+
<%= pb_rails("drawer", props: {
|
|
5
|
+
id:"drawer-10",
|
|
6
|
+
overlay: false
|
|
7
|
+
}) do %>
|
|
8
|
+
Test me (No Overlay)
|
|
9
|
+
<% end %>
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
<%= pb_rails("button", props: { text: "Overlay Drawer", data: {"open-drawer": "drawer-11"} }) %>
|
|
13
|
+
|
|
14
|
+
<%= pb_rails("drawer", props: {
|
|
15
|
+
id:"drawer-11",
|
|
16
|
+
placement: "right"
|
|
17
|
+
}) do %>
|
|
18
|
+
Test me (Has Overlay)
|
|
19
|
+
<% end %>
|
|
20
|
+
<% end %>
|
|
21
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Click the button to close the drawer when there is no overlay.
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<%= pb_rails("flex") do %>
|
|
2
|
+
<%= pb_rails("button", props: { text: "XS Drawer", margin_right: "sm", data: {"open-drawer": "drawer-5"} }) %>
|
|
3
|
+
|
|
4
|
+
<%= pb_rails("drawer", props: {
|
|
5
|
+
id:"drawer-5",
|
|
6
|
+
size: "xs"
|
|
7
|
+
}) do %>
|
|
8
|
+
XS
|
|
9
|
+
<% end %>
|
|
10
|
+
|
|
11
|
+
<%= pb_rails("button", props: { text: "SM Drawer", margin_right: "sm", data: {"open-drawer": "drawer-6"} }) %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("drawer", props: {
|
|
14
|
+
id:"drawer-6",
|
|
15
|
+
size: "sm",
|
|
16
|
+
placement: "right"
|
|
17
|
+
}) do %>
|
|
18
|
+
This is a small drawer
|
|
19
|
+
<% end %>
|
|
20
|
+
|
|
21
|
+
<%= pb_rails("button", props: { text: "MD Drawer", margin_right: "sm", data: {"open-drawer": "drawer-7"} }) %>
|
|
22
|
+
|
|
23
|
+
<%= pb_rails("drawer", props: {
|
|
24
|
+
id:"drawer-7",
|
|
25
|
+
size: "md"
|
|
26
|
+
}) do %>
|
|
27
|
+
This is a medium drawer
|
|
28
|
+
<% end %>
|
|
29
|
+
|
|
30
|
+
<%= pb_rails("button", props: { text: "LG Drawer", margin_right: "sm", data: {"open-drawer": "drawer-8"} }) %>
|
|
31
|
+
|
|
32
|
+
<%= pb_rails("drawer", props: {
|
|
33
|
+
id:"drawer-8",
|
|
34
|
+
size: "lg",
|
|
35
|
+
placement: "right"
|
|
36
|
+
}) do %>
|
|
37
|
+
This is a large drawer
|
|
38
|
+
<% end %>
|
|
39
|
+
|
|
40
|
+
<%= pb_rails("button", props: { text: "XL Drawer", margin_right: "sm", data: {"open-drawer": "drawer-9"} }) %>
|
|
41
|
+
|
|
42
|
+
<%= pb_rails("drawer", props: {
|
|
43
|
+
id:"drawer-9",
|
|
44
|
+
size: "xl"
|
|
45
|
+
}) do %>
|
|
46
|
+
This is an extra large drawer
|
|
47
|
+
<% end %>
|
|
48
|
+
<% end %>
|
|
49
|
+
|
|
@@ -1,12 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
<%=
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
<% if within_element %>
|
|
2
|
+
<%= pb_content_tag(:div, data: {breakpoint: object.breakpoint} ) do %>
|
|
3
|
+
<%= content %>
|
|
4
|
+
<% end %>
|
|
5
|
+
<% else %>
|
|
6
|
+
<div class="pb_drawer_wrapper"
|
|
7
|
+
id="drawer-wrapper-<%= object.id %>"
|
|
8
|
+
style="display:none;"
|
|
9
|
+
data-behavior="<%= object.behavior %>"
|
|
10
|
+
data-size="<%= object.size %>"
|
|
11
|
+
data-placement="<%= object.placement %>"
|
|
12
|
+
data-breakpoint="<%= object.breakpoint %>"
|
|
13
|
+
>
|
|
14
|
+
<div class="<%= overlay_classes %>" style="display:none;" id="drawer-overlay-<%= object.id %>">
|
|
15
|
+
<%= pb_content_tag do %>
|
|
16
|
+
<%= content %>
|
|
17
|
+
<% end %>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
<% end %>
|
|
@@ -2,7 +2,55 @@
|
|
|
2
2
|
|
|
3
3
|
module Playbook
|
|
4
4
|
module PbDrawer
|
|
5
|
-
class Drawer <
|
|
5
|
+
class Drawer < Playbook::KitBase
|
|
6
|
+
prop :size, type: Playbook::Props::Enum,
|
|
7
|
+
values: %w[xs sm md lg xl full],
|
|
8
|
+
default: "md"
|
|
9
|
+
prop :placement, type: Playbook::Props::Enum,
|
|
10
|
+
values: %w[left right bottom],
|
|
11
|
+
default: "left"
|
|
12
|
+
prop :behavior, type: Playbook::Props::Enum,
|
|
13
|
+
values: %w[floating push],
|
|
14
|
+
default: "floating"
|
|
15
|
+
prop :overlay, type: Playbook::Props::Boolean,
|
|
16
|
+
default: true
|
|
17
|
+
prop :within_element, type: Playbook::Props::Boolean,
|
|
18
|
+
default: false
|
|
19
|
+
prop :border, type: Playbook::Props::Enum,
|
|
20
|
+
values: %w[full none right left],
|
|
21
|
+
default: "none"
|
|
22
|
+
prop :breakpoint, type: Playbook::Props::Enum,
|
|
23
|
+
values: %w[none xs sm md lg xl],
|
|
24
|
+
default: "none"
|
|
25
|
+
|
|
26
|
+
def classname
|
|
27
|
+
generate_classname("pb_drawer pb_drawer_#{size}_#{placement} #{within_class} #{border_classes}")
|
|
28
|
+
end
|
|
29
|
+
|
|
30
|
+
def border_classes
|
|
31
|
+
case border
|
|
32
|
+
when "full"
|
|
33
|
+
"drawer_border-full"
|
|
34
|
+
when "right"
|
|
35
|
+
"drawer_border-right"
|
|
36
|
+
when "left"
|
|
37
|
+
"drawer_border-left"
|
|
38
|
+
else
|
|
39
|
+
""
|
|
40
|
+
end
|
|
41
|
+
end
|
|
42
|
+
|
|
43
|
+
def overlay_close
|
|
44
|
+
!should_close_on_overlay_click ? "overlay_close" : ""
|
|
45
|
+
end
|
|
46
|
+
|
|
47
|
+
def within_class
|
|
48
|
+
within_element ? "pb_drawer_within_element_rails" : ""
|
|
49
|
+
end
|
|
50
|
+
|
|
51
|
+
def overlay_classes
|
|
52
|
+
"pb_drawer_#{overlay ? '' : 'no_'}overlay drawer_content_#{placement} pb_drawer_overlay_after_open #{overlay ? '' : 'no-background'}"
|
|
53
|
+
end
|
|
6
54
|
end
|
|
7
55
|
end
|
|
8
56
|
end
|