playbook_ui 14.14.0.pre.alpha.play1868dependencyremovallodash6286 → 14.14.0.pre.alpha.play1872verticaltimelineresponsiveissue6409
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_card/_card.tsx +1 -2
- 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_filter/Filter/CurrentFilters.tsx +4 -4
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +2 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- 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 +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 +9 -0
- data/app/pb_kits/playbook/pb_select/index.js +38 -0
- data/app/pb_kits/playbook/pb_select/select.rb +8 -0
- data/app/pb_kits/playbook/pb_timeline/_timeline.scss +2 -2
- 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/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +4 -5
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -2
- data/app/pb_kits/playbook/utilities/object.ts +1 -82
- data/dist/chunks/_typeahead-BGTMEmj7.js +36 -0
- data/dist/chunks/_weekday_stacked-De2TduOp.js +45 -0
- data/dist/chunks/{lib-CrrD678a.js → lib-Fr78pbpF.js} +2 -2
- data/dist/chunks/{pb_form_validation-BbWhQeoO.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 +26 -6
- data/dist/chunks/_typeahead-CHxdYnAw.js +0 -36
- data/dist/chunks/_weekday_stacked-D2tZHCNS.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: 2f68144468567bb0942e0754a5686d9245acb40e84273c43fd8ee3df8579e126
|
|
4
|
+
data.tar.gz: bf0767e5db39ca73b281e3859a0507af791dc325eed1da02c250ae13d922b713
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 2144ebd23a67353cbe90a10bfbdc4d69971511306aa5cc28d504870ade661f64f980730bb9aaa615c636ba7d627d9e2a4d10974b048b88a03464889066331402
|
|
7
|
+
data.tar.gz: 40200e6f11faa20c4322c4d1d5057f8c8ab75eec8a8424062b8adad8848aea79b94b4a0df8f978b7f10a856ff8b8debf1902f732efebd15ea834ac8d6ef4bae5
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/* eslint-disable react/no-multi-comp */
|
|
2
2
|
|
|
3
3
|
import React from 'react'
|
|
4
|
-
import { get } from '
|
|
5
|
-
|
|
4
|
+
import { get } from 'lodash'
|
|
6
5
|
import classnames from 'classnames'
|
|
7
6
|
|
|
8
7
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
|
@@ -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
|