playbook_ui 7.8.4 → 7.11.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/controllers/playbook/application_controller.rb +5 -3
- data/app/helpers/playbook/application_helper.rb +13 -19
- data/app/helpers/playbook/pb_doc_helper.rb +41 -20
- data/app/helpers/playbook/pb_kit_helper.rb +1 -25
- data/app/helpers/playbook/pb_sample_helper.rb +24 -23
- data/app/pb_kits/playbook/_playbook.scss +1 -1
- data/app/pb_kits/playbook/config/_kit_example.html.erb +18 -4
- data/app/pb_kits/playbook/config/_kit_ui.html.erb +21 -21
- data/app/pb_kits/playbook/pb_currency/_currency.html.erb +1 -1
- data/app/pb_kits/playbook/pb_currency/_currency.jsx +16 -1
- data/app/pb_kits/playbook/pb_currency/_currency.scss +23 -1
- data/app/pb_kits/playbook/pb_currency/currency.rb +22 -0
- data/app/pb_kits/playbook/pb_currency/docs/{_currency_small.html.erb → _currency_alignment.html.erb} +3 -3
- data/app/pb_kits/playbook/pb_currency/docs/{_currency_small.jsx → _currency_alignment.jsx} +5 -5
- data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.html.erb +7 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.jsx +17 -0
- data/app/pb_kits/playbook/pb_currency/docs/{_currency_large.html.erb → _currency_size.html.erb} +8 -7
- data/app/pb_kits/playbook/pb_currency/docs/{_currency_large.jsx → _currency_size.jsx} +9 -8
- data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb +24 -0
- data/app/pb_kits/playbook/pb_currency/docs/{_currency_medium.jsx → _currency_variants.jsx} +13 -10
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +8 -6
- data/app/pb_kits/playbook/pb_currency/docs/index.js +4 -3
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb +23 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +4 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +2 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb +8 -8
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_flatpickr_methods.html.erb +27 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_flatpickr_methods.jsx +44 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +4 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb +2 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_description.md +4 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +20 -3
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +51 -31
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +3 -4
- data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx +2 -2
- data/app/pb_kits/playbook/pb_filter/Filter/index.jsx +17 -16
- data/app/pb_kits/playbook/pb_filter/_filter.html.erb +1 -1
- data/app/pb_kits/playbook/pb_filter/_filter.scss +0 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb +41 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.jsx +57 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +0 -41
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb +35 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx +47 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_filter/filter.rb +1 -0
- data/app/pb_kits/playbook/pb_filter/templates/_core.html.erb +9 -9
- data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +22 -0
- data/app/pb_kits/playbook/pb_nav/_item.jsx +3 -0
- data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +47 -0
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +2 -46
- data/app/pb_kits/playbook/pb_nav/docs/_new_tab.html.erb +6 -0
- data/app/pb_kits/playbook/pb_nav/docs/_new_tab.jsx +34 -0
- data/app/pb_kits/playbook/pb_nav/docs/_subtle_horizontal_nav.html.erb +6 -0
- data/app/pb_kits/playbook/pb_nav/docs/_subtle_horizontal_nav.jsx +33 -0
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +4 -1
- data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_nav/item.rb +5 -2
- data/app/pb_kits/playbook/pb_radio/_radio.jsx +4 -3
- data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +3 -0
- data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_radio/radio.test.js +71 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +25 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx +45 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_select/_select.jsx +4 -3
- data/app/pb_kits/playbook/pb_select/select.test.js +51 -0
- data/app/pb_kits/playbook/pb_stat_change/_stat_change.html.erb +1 -1
- data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx +8 -4
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.html.erb +17 -0
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.jsx +28 -0
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.html.erb +20 -0
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.jsx +31 -0
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.md +1 -0
- data/app/pb_kits/playbook/pb_stat_change/docs/example.yml +6 -4
- data/app/pb_kits/playbook/pb_stat_change/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_stat_change/stat_change.rb +12 -7
- data/app/pb_kits/playbook/pb_table/_table.scss +1 -57
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_alignment.scss +32 -0
- data/app/pb_kits/playbook/pb_table/styles/_all.scss +4 -3
- data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss +24 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +8 -4
- data/app/pb_kits/playbook/pb_text_input/docs/_description.md +2 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.jsx +7 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +78 -56
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +19 -11
- data/app/pb_kits/playbook/pb_text_input/text_input.test.js +77 -0
- data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +5 -5
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +10 -7
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +4 -4
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.html.erb +17 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.md +3 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +1 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb +10 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_tooltip/index.js +87 -37
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +3 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +5 -1
- data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +2 -3
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb +19 -3
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +4 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md +10 -2
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +5 -0
- data/app/pb_kits/playbook/react_rails_kits.js +1 -0
- data/lib/playbook.rb +6 -17
- data/lib/playbook/engine.rb +0 -3
- data/{app/pb_kits → lib}/playbook/props.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/array.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/base.rb +19 -3
- data/{app/pb_kits → lib}/playbook/props/boolean.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/date.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/enum.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/hash.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/hash_array.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/number.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/number_array.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/numeric.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/percentage.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/proc.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/string.rb +0 -0
- data/lib/playbook/version.rb +1 -1
- metadata +58 -28
- data/app/helpers/playbook/layout_helper.rb +0 -9
- data/app/pb_kits/playbook/pb_currency/docs/_currency_medium.html.erb +0 -21
- data/app/pb_kits/playbook/pb_table/styles/_mixins.scss +0 -0
@@ -11,47 +11,6 @@ const FilterNoBackground = (props) => {
|
|
11
11
|
]
|
12
12
|
return (
|
13
13
|
<>
|
14
|
-
<Filter
|
15
|
-
{...props}
|
16
|
-
background={false}
|
17
|
-
filters={{
|
18
|
-
'Full Name': 'John Wick',
|
19
|
-
'City': 'Las Vegas',
|
20
|
-
}}
|
21
|
-
results={3}
|
22
|
-
sortOptions={{
|
23
|
-
popularity: 'Popularity',
|
24
|
-
// eslint-disable-next-line
|
25
|
-
manager_title: 'Manager\'s Title',
|
26
|
-
// eslint-disable-next-line
|
27
|
-
manager_name: 'Manager\'s Name',
|
28
|
-
}}
|
29
|
-
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
30
|
-
>
|
31
|
-
<TextInput
|
32
|
-
label="Full Name"
|
33
|
-
placeholder="Enter name"
|
34
|
-
/>
|
35
|
-
|
36
|
-
<Select
|
37
|
-
blankSelection="Select One..."
|
38
|
-
label="Territory"
|
39
|
-
name="location"
|
40
|
-
options={options}
|
41
|
-
/>
|
42
|
-
<Flex
|
43
|
-
spacing="between"
|
44
|
-
>
|
45
|
-
<Button
|
46
|
-
text="Apply"
|
47
|
-
/>
|
48
|
-
<Button
|
49
|
-
text="Clear"
|
50
|
-
variant="secondary"
|
51
|
-
/>
|
52
|
-
</Flex>
|
53
|
-
</Filter>
|
54
|
-
|
55
14
|
<Filter
|
56
15
|
{...props}
|
57
16
|
background={false}
|
@@ -0,0 +1 @@
|
|
1
|
+
To remove the background from a filter, add the prop `background` with a value of `false`.
|
@@ -0,0 +1,35 @@
|
|
1
|
+
<%=
|
2
|
+
pb_rails("filter", props: {
|
3
|
+
id: "nosort",
|
4
|
+
filters: [
|
5
|
+
{ name: "name", value: "John Wick" }
|
6
|
+
],
|
7
|
+
results: 546,
|
8
|
+
template: "filter_only",
|
9
|
+
}) do
|
10
|
+
%>
|
11
|
+
<%
|
12
|
+
example_collection = [
|
13
|
+
OpenStruct.new(name: "Alabama", value: 1),
|
14
|
+
OpenStruct.new(name: "Alaska", value: 2),
|
15
|
+
OpenStruct.new(name: "Arizona", value: 3),
|
16
|
+
OpenStruct.new(name: "Arkansas", value: 4),
|
17
|
+
OpenStruct.new(name: "California", value: 5),
|
18
|
+
OpenStruct.new(name: "Colorado", value: 6),
|
19
|
+
OpenStruct.new(name: "Connecticut", value: 7),
|
20
|
+
OpenStruct.new(name: "Delaware", value: 8),
|
21
|
+
OpenStruct.new(name: "Florida", value: 9),
|
22
|
+
OpenStruct.new(name: "Georgia", value: 10),
|
23
|
+
]
|
24
|
+
%>
|
25
|
+
|
26
|
+
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
27
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
28
|
+
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
29
|
+
|
30
|
+
<%= form.actions do |action| %>
|
31
|
+
<%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
|
32
|
+
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
33
|
+
<% end %>
|
34
|
+
<% end %>
|
35
|
+
<% end %>
|
@@ -0,0 +1,47 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Button, Filter, Flex, Select, TextInput } from '../../'
|
3
|
+
|
4
|
+
const FilterNoSort = (props) => {
|
5
|
+
const options = [
|
6
|
+
{ value: 'USA' },
|
7
|
+
{ value: 'Canada' },
|
8
|
+
{ value: 'Brazil' },
|
9
|
+
{ value: 'Philippines' },
|
10
|
+
{ value: 'A Galaxy Far Far Away Like Really Far Away' },
|
11
|
+
]
|
12
|
+
return (
|
13
|
+
<Filter
|
14
|
+
{...props}
|
15
|
+
filters={{
|
16
|
+
'Full Name': 'John Wick',
|
17
|
+
}}
|
18
|
+
results={546}
|
19
|
+
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
20
|
+
>
|
21
|
+
<TextInput
|
22
|
+
label="Full Name"
|
23
|
+
placeholder="Enter name"
|
24
|
+
/>
|
25
|
+
|
26
|
+
<Select
|
27
|
+
blankSelection="Select One..."
|
28
|
+
label="Territory"
|
29
|
+
name="location"
|
30
|
+
options={options}
|
31
|
+
/>
|
32
|
+
<Flex
|
33
|
+
spacing="between"
|
34
|
+
>
|
35
|
+
<Button
|
36
|
+
text="Apply"
|
37
|
+
/>
|
38
|
+
<Button
|
39
|
+
text="Clear"
|
40
|
+
variant="secondary"
|
41
|
+
/>
|
42
|
+
</Flex>
|
43
|
+
</Filter>
|
44
|
+
)
|
45
|
+
}
|
46
|
+
|
47
|
+
export default FilterNoSort
|
@@ -0,0 +1 @@
|
|
1
|
+
To display results, use templates `single` or `default`.
|
@@ -4,12 +4,16 @@ examples:
|
|
4
4
|
- filter_default: Default
|
5
5
|
- filter_no_background: No Background
|
6
6
|
- filter_single: Single
|
7
|
+
- filter_no_sort: No Sort
|
7
8
|
- filter_only: Filter Only
|
8
9
|
- sort_only: Sort Only
|
10
|
+
- filter_min_width: Min Width for Popover Inside of Filter
|
9
11
|
|
10
12
|
react:
|
11
13
|
- filter_default: Default
|
12
14
|
- filter_no_background: No Background
|
13
15
|
- filter_single: Single
|
16
|
+
- filter_no_sort: No Sort
|
14
17
|
- filter_only: Filter Only
|
15
18
|
- sort_only: Sort Only
|
19
|
+
- filter_min_width: Min Width for Popover Inside of Filter
|
@@ -1,5 +1,7 @@
|
|
1
1
|
export { default as FilterDefault } from './_filter_default.jsx'
|
2
2
|
export { default as FilterSingle } from './_filter_single.jsx'
|
3
|
+
export { default as FilterNoSort } from './_filter_no_sort.jsx'
|
3
4
|
export { default as FilterNoBackground } from './_filter_no_background.jsx'
|
4
5
|
export { default as FilterOnly } from './_filter_only.jsx'
|
5
6
|
export { default as SortOnly } from './_sort_only.jsx'
|
7
|
+
export { default as FilterMinWidth } from './_filter_min_width.jsx'
|
@@ -1,5 +1,5 @@
|
|
1
1
|
|
2
|
-
<%= pb_rails("flex", props: {orientation: "row", vertical: "center"}) do %>
|
2
|
+
<%= pb_rails("flex", props: {orientation: "row", padding_right: "lg", vertical: "center"}) do %>
|
3
3
|
|
4
4
|
<% if (object.template != "sort_only") %>
|
5
5
|
<%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "filter", id:"filter#{object.id}"}) %>
|
@@ -11,23 +11,26 @@
|
|
11
11
|
<%= pb_rails("caption", props: { text: filter[:name]}) %>
|
12
12
|
<%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
|
13
13
|
</div>
|
14
|
-
<% end %>
|
14
|
+
<% end %>
|
15
15
|
<div class="right_gradient"></div>
|
16
16
|
</div>
|
17
17
|
</div>
|
18
|
+
<% if (object.template != "default") %>
|
19
|
+
<%= pb_rails("caption", props: {text: object.result_text, size:"xs", classname:"filter-results"})%>
|
20
|
+
<% end %>
|
18
21
|
<% end %>
|
19
22
|
|
20
23
|
|
21
|
-
|
22
24
|
<% if (object.template == "single" ) || (object.template == "sort_only") %>
|
23
|
-
|
24
|
-
|
25
|
+
<% unless object.sort_menu == [{}] %>
|
26
|
+
<%= pb_rails("button", props: {variant: "link",id: "sort-button#{object.id}",padding_right: "none"}) do %>
|
25
27
|
<% object.sort_menu.each do |item| %>
|
26
28
|
<% if item[:active] == true %>
|
27
29
|
<%= item[:item] %>
|
28
30
|
<%= pb_rails("icon", props: { icon: object.sort_icon(item[:direction]), fixed_width: true }) %>
|
29
31
|
<% end %>
|
30
32
|
<% end %>
|
33
|
+
<% end %>
|
31
34
|
<% end %>
|
32
35
|
<% end %>
|
33
36
|
|
@@ -40,7 +43,7 @@
|
|
40
43
|
<%= pb_rails("title_count", props: {title: "Results:",count: object.results, align:"center"}) %>
|
41
44
|
<%= pb_rails("flex", props: {orientation: "row", vertical: "center"}) do %>
|
42
45
|
<%= pb_rails("caption", props: { text: "sort by:"}) %>
|
43
|
-
<%= pb_rails("button", props: {variant: "link"
|
46
|
+
<%= pb_rails("button", props: {variant: "link", padding_right: "none", id: "sort-button#{object.id}"}) do %>
|
44
47
|
<% object.sort_menu.each do |item| %>
|
45
48
|
<% if item[:active] == true %>
|
46
49
|
<%= item[:item] %>
|
@@ -51,6 +54,3 @@
|
|
51
54
|
<% end %>
|
52
55
|
<% end %>
|
53
56
|
<% end %>
|
54
|
-
|
55
|
-
|
56
|
-
|
@@ -7,7 +7,7 @@
|
|
7
7
|
<% end %>
|
8
8
|
|
9
9
|
<% if object.template != "sort_only"%>
|
10
|
-
<%= pb_rails("popover", props: {close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
|
10
|
+
<%= pb_rails("popover", props: {min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
|
11
11
|
<%= capture(&object.children) %>
|
12
12
|
<% end %>
|
13
13
|
<%end%>
|
@@ -2,6 +2,7 @@
|
|
2
2
|
@import "../tokens/colors";
|
3
3
|
@import "../tokens/animation-curves";
|
4
4
|
@import "../tokens/typography";
|
5
|
+
@import "./subtle_mixin";
|
5
6
|
|
6
7
|
$selector: ".pb_nav_list";
|
7
8
|
|
@@ -71,6 +72,27 @@ $selector: ".pb_nav_list";
|
|
71
72
|
}
|
72
73
|
}
|
73
74
|
}
|
75
|
+
|
76
|
+
// Subtle Variant
|
77
|
+
&[class*=_subtle] {
|
78
|
+
@include subtle;
|
79
|
+
// Horizontal Overrides
|
80
|
+
[class*=pb_nav_list_kit_item] {
|
81
|
+
margin: 0;
|
82
|
+
}
|
83
|
+
[class*=_active] {
|
84
|
+
background-color: $active_light;
|
85
|
+
&[class*=dark] {
|
86
|
+
background-color: rgba($white, $opacity_1);
|
87
|
+
}
|
88
|
+
[class*=_item_link] {
|
89
|
+
[class*=_item_text]{
|
90
|
+
color: $primary;
|
91
|
+
}
|
92
|
+
}
|
93
|
+
}
|
94
|
+
}
|
95
|
+
|
74
96
|
&[class*=dark]{
|
75
97
|
[class*=pb_nav_list_kit_item]{
|
76
98
|
[class*=_link]{
|
@@ -18,6 +18,7 @@ type NavItemProps = {
|
|
18
18
|
imageUrl: String,
|
19
19
|
link: string,
|
20
20
|
onClick?: EventHandler,
|
21
|
+
target?: '_blank' | '_self' | '_parent' | '_top',
|
21
22
|
text: string,
|
22
23
|
}
|
23
24
|
|
@@ -34,6 +35,7 @@ const NavItem = (props: NavItemProps) => {
|
|
34
35
|
imageUrl,
|
35
36
|
link,
|
36
37
|
onClick = () => {},
|
38
|
+
target = '_self',
|
37
39
|
text = '',
|
38
40
|
} = props
|
39
41
|
const Tag = link ? 'a' : 'div'
|
@@ -54,6 +56,7 @@ const NavItem = (props: NavItemProps) => {
|
|
54
56
|
className="pb_nav_list_item_link"
|
55
57
|
href={link}
|
56
58
|
onClick={onClick}
|
59
|
+
target={target}
|
57
60
|
>
|
58
61
|
<If condition={imageUrl}>
|
59
62
|
<div
|
@@ -0,0 +1,47 @@
|
|
1
|
+
@mixin subtle {
|
2
|
+
[class*=pb_nav_list_kit_item] {
|
3
|
+
list-style: none;
|
4
|
+
border-radius: $border_rad_heavier;
|
5
|
+
border-bottom: 0;
|
6
|
+
margin: $space_xs ($space_sm - 2px);
|
7
|
+
[class*=_link] {
|
8
|
+
text-decoration: none;
|
9
|
+
display: flex;
|
10
|
+
align-items: center;
|
11
|
+
border: none;
|
12
|
+
padding: $space_xs ($space_sm - 2px);
|
13
|
+
transition-property: color, background-color;
|
14
|
+
transition-duration: 0.15s;
|
15
|
+
transition-timing-function: $bezier;
|
16
|
+
border-radius: $border_rad_heavier;
|
17
|
+
@include pb_body($text_lt_default);
|
18
|
+
[class*=_icon_left] {
|
19
|
+
margin-right: ($space_xs + 2px);
|
20
|
+
color: $text_lt_lighter;
|
21
|
+
}
|
22
|
+
[class*=_icon_right] {
|
23
|
+
margin-left: ($space_xs + 2px);
|
24
|
+
color: $text_lt_default;
|
25
|
+
}
|
26
|
+
[class*=_text] {
|
27
|
+
flex: 1;
|
28
|
+
font-weight: $regular;
|
29
|
+
}
|
30
|
+
@media (hover:hover) {
|
31
|
+
&:hover {
|
32
|
+
background-color: rgba($primary, 0.03);
|
33
|
+
[class*=_icon] {
|
34
|
+
color: $primary;
|
35
|
+
}
|
36
|
+
[class*=_text] {
|
37
|
+
color: $primary;
|
38
|
+
}
|
39
|
+
}
|
40
|
+
}
|
41
|
+
}
|
42
|
+
&[class*=_active] [class*=_link] {
|
43
|
+
@include pb_title_4;
|
44
|
+
color: $primary;
|
45
|
+
}
|
46
|
+
}
|
47
|
+
}
|
@@ -5,6 +5,7 @@
|
|
5
5
|
@import "../tokens/typography";
|
6
6
|
@import "../pb_body/body_mixins";
|
7
7
|
@import "../pb_title/title_mixin";
|
8
|
+
@import "./subtle_mixin";
|
8
9
|
|
9
10
|
$selector: ".pb_nav_list";
|
10
11
|
|
@@ -85,54 +86,9 @@ $selector: ".pb_nav_list";
|
|
85
86
|
|
86
87
|
}
|
87
88
|
|
88
|
-
|
89
89
|
// Subtle Variant
|
90
90
|
&[class*=_subtle] {
|
91
|
-
|
92
|
-
list-style: none;
|
93
|
-
border-radius: $border_rad_heavier;
|
94
|
-
border-bottom: 0;
|
95
|
-
margin: $space_xs ($space_sm - 2px);
|
96
|
-
[class*=_link] {
|
97
|
-
text-decoration: none;
|
98
|
-
display: flex;
|
99
|
-
align-items: center;
|
100
|
-
border: none;
|
101
|
-
padding: $space_xs ($space_sm - 2px);
|
102
|
-
transition-property: color, background-color;
|
103
|
-
transition-duration: 0.15s;
|
104
|
-
transition-timing-function: $bezier;
|
105
|
-
border-radius: $border_rad_heavier;
|
106
|
-
@include pb_body($text_lt_default);
|
107
|
-
[class*=_icon_left] {
|
108
|
-
margin-right: ($space_xs + 2px);
|
109
|
-
color: $text_lt_lighter;
|
110
|
-
}
|
111
|
-
[class*=_icon_right] {
|
112
|
-
margin-left: ($space_xs + 2px);
|
113
|
-
color: $text_lt_default;
|
114
|
-
}
|
115
|
-
[class*=_text] {
|
116
|
-
flex: 1;
|
117
|
-
font-weight: $regular;
|
118
|
-
}
|
119
|
-
@media (hover:hover) {
|
120
|
-
&:hover {
|
121
|
-
background-color: rgba($primary, 0.03);
|
122
|
-
[class*=_icon] {
|
123
|
-
color: $primary;
|
124
|
-
}
|
125
|
-
[class*=_text] {
|
126
|
-
color: $primary;
|
127
|
-
}
|
128
|
-
}
|
129
|
-
}
|
130
|
-
}
|
131
|
-
&[class*=_active] [class*=_link] {
|
132
|
-
@include pb_title_4;
|
133
|
-
color: $primary;
|
134
|
-
}
|
135
|
-
}
|
91
|
+
@include subtle;
|
136
92
|
}
|
137
93
|
|
138
94
|
// Show Highlight
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<%= pb_rails("nav", props: {title: "Popular Websites", link: "#"}) do %>
|
2
|
+
<%= pb_rails("nav/item", props: { text: "Google", link: "https://www.google.com/", target: "_blank" }) %>
|
3
|
+
<%= pb_rails("nav/item", props: { text: "YouTube", link: "https://www.youtube.com/", target: "_blank" }) %>
|
4
|
+
<%= pb_rails("nav/item", props: { text: "Facebook", link: "https://www.facebook.com/", target: "_blank" }) %>
|
5
|
+
<%= pb_rails("nav/item", props: { text: "Amazon", link: "https://www.amazon.com/", target: "_blank" }) %>
|
6
|
+
<% end %>
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Nav } from '../../'
|
3
|
+
import NavItem from '../_item.jsx'
|
4
|
+
|
5
|
+
const NewTab = () => (
|
6
|
+
<Nav
|
7
|
+
link="#"
|
8
|
+
orientation="vertical"
|
9
|
+
title="Popular Websites"
|
10
|
+
>
|
11
|
+
<NavItem
|
12
|
+
link="https://www.google.com/"
|
13
|
+
target="_blank"
|
14
|
+
text="Google"
|
15
|
+
/>
|
16
|
+
<NavItem
|
17
|
+
link="https://www.youtube.com/"
|
18
|
+
target="_blank"
|
19
|
+
text="YouTube"
|
20
|
+
/>
|
21
|
+
<NavItem
|
22
|
+
link="https://www.facebook.com/"
|
23
|
+
target="_blank"
|
24
|
+
text="Facebook"
|
25
|
+
/>
|
26
|
+
<NavItem
|
27
|
+
link="https://www.amazon.com/"
|
28
|
+
target="_blank"
|
29
|
+
text="Amazon"
|
30
|
+
/>
|
31
|
+
</Nav>
|
32
|
+
)
|
33
|
+
|
34
|
+
export default NewTab
|