playbook_ui 4.3.1 → 4.4.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/helpers/playbook/pb_doc_helper.rb +23 -0
- data/app/pb_kits/playbook/_playbook.scss +1 -0
- data/app/pb_kits/playbook/config/_kit_ui.html.erb +40 -0
- data/app/pb_kits/playbook/data/menu.yml +2 -1
- data/app/pb_kits/playbook/index.js +2 -0
- data/app/pb_kits/playbook/packs/examples.js +5 -0
- data/app/pb_kits/playbook/packs/kits/pb_date_range_stacked.js +1 -0
- data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss +4 -1
- data/app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss +3 -3
- data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.html.erb +24 -0
- data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx +68 -0
- data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.scss +7 -0
- data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.rb +19 -0
- data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.html.erb +1 -0
- data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.jsx +14 -0
- data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.html.erb +1 -0
- data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx +13 -0
- data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml +11 -0
- data/app/pb_kits/playbook/pb_date_range_stacked/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_popover/_popover.html.erb +0 -17
- data/app/pb_kits/playbook/pb_popover/docs/_popover_with_button.jsx +1 -0
- data/app/pb_kits/playbook/pb_popover/index.js +50 -0
- data/app/pb_kits/playbook/pb_popover/popover.rb +10 -4
- data/app/pb_kits/playbook/pb_section_separator/docs/_description.md +3 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_footer.md +2 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.md +1 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context.html.erb +51 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_typeahead/index.js +35 -8
- data/app/pb_kits/playbook/vendor.js +0 -4
- data/app/views/playbook/pages/kit_show.html.slim +9 -0
- data/lib/playbook/version.rb +1 -1
- metadata +20 -4
- data/app/pb_kits/playbook/config/_kit_ui.html.slim +0 -34
- data/app/pb_kits/playbook/pb_popover/_popover.js +0 -46
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: e9e67b7c641a97dec35678810ee27d5b1d81d107387628f195e22c0cd1c8b85a
|
4
|
+
data.tar.gz: bf29ef64507bbf6c46cf63589ef0756a9c136041f62dbe981f8d7265365d415f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c0e229990f55c9d8f9d2d63f2a35033585cdcba14e6cdb547a55319565fe6b9f492ac0bbd8cd48c8b7e2400247ee77f6cc2036737c6950e4f539094bb5b802ae
|
7
|
+
data.tar.gz: 7909e078c4de087285d5c36165b467812814952c1cc1aa5b336da1926f79cd2b898f71bdeb27cbe9e31894db4fadc5531bf999f0f835ece642611560df03214d
|
@@ -15,6 +15,29 @@ module Playbook
|
|
15
15
|
end
|
16
16
|
end
|
17
17
|
|
18
|
+
def read_file(filename)
|
19
|
+
if File.file?(filename)
|
20
|
+
File.read(filename)
|
21
|
+
else
|
22
|
+
""
|
23
|
+
end
|
24
|
+
end
|
25
|
+
|
26
|
+
def get_kit_description(kit)
|
27
|
+
filename = "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit}/docs/_description.md"
|
28
|
+
read_file(filename)
|
29
|
+
end
|
30
|
+
|
31
|
+
def get_per_sample_descriptions(kit, key)
|
32
|
+
filename = "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}/docs/_#{key}.md"
|
33
|
+
read_file(filename)
|
34
|
+
end
|
35
|
+
|
36
|
+
def get_kit_footer(kit)
|
37
|
+
filename = "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}/docs/_footer.md"
|
38
|
+
read_file(filename)
|
39
|
+
end
|
40
|
+
|
18
41
|
def pb_kit(kit: "", type: "rails", show_code: true)
|
19
42
|
@type = type
|
20
43
|
@kit_examples = get_kit_examples(kit, type)
|
@@ -13,6 +13,7 @@
|
|
13
13
|
@import 'pb_dashboard_value/dashboard_value';
|
14
14
|
@import 'pb_date/date';
|
15
15
|
@import 'pb_date_range_inline/date_range_inline';
|
16
|
+
@import 'pb_date_range_stacked/date_range_stacked';
|
16
17
|
@import 'pb_date_stacked/date_stacked';
|
17
18
|
@import 'pb_date_year_stacked/date_year_stacked';
|
18
19
|
@import 'pb_distribution_bar/distribution_bar';
|
@@ -0,0 +1,40 @@
|
|
1
|
+
|
2
|
+
<% type ||= "rails" %>
|
3
|
+
|
4
|
+
<% if type == "react" %>
|
5
|
+
<% contents = File.read("#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit_examples[:kit]}/docs/_#{key}.jsx") %>
|
6
|
+
<% else %>
|
7
|
+
<% contents = File.read("#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit_examples[:kit]}/docs/_#{key}.html.erb") %>
|
8
|
+
<% end %>
|
9
|
+
|
10
|
+
<div class="pb--kit-example">
|
11
|
+
<%= pb_rails("caption", props: { text: item }) %>
|
12
|
+
<br>
|
13
|
+
<% if type == "rails" %>
|
14
|
+
<%= render partial: "pb_#{@kit_examples[:kit]}/docs/#{key}" %>
|
15
|
+
<% elsif type == "react" %>
|
16
|
+
<%= pb_react(key.camelize) %>
|
17
|
+
<% end %>
|
18
|
+
<br>
|
19
|
+
</div>
|
20
|
+
|
21
|
+
<% if @show_code%>
|
22
|
+
<div class="markdown pb--kit-example-markdown">
|
23
|
+
<%= markdown(get_per_sample_descriptions(@kit_examples[:kit], key)) %>
|
24
|
+
</div>
|
25
|
+
<div class="pb--codeControls">
|
26
|
+
<ul>
|
27
|
+
<li>
|
28
|
+
<a href="#" data-toggle="code_example">Code Example</a>
|
29
|
+
</li>
|
30
|
+
</ul>
|
31
|
+
</div>
|
32
|
+
<div class="pb--codeCopy" data-action="toggle" data-togglable="code_example">
|
33
|
+
<a href="#" data-toggle="false" class="pb--close-toggle">Close</a>
|
34
|
+
<% if type == "rails" %>
|
35
|
+
<pre class="highlight"><%= raw rouge(contents, "erb") %></pre>
|
36
|
+
<% elsif type == "react" %>
|
37
|
+
<pre class="highlight"><%= raw rouge(contents, "react")%></pre>
|
38
|
+
<% end %>
|
39
|
+
</div>
|
40
|
+
<% end %>
|
@@ -44,7 +44,7 @@ kits:
|
|
44
44
|
- section_separator
|
45
45
|
- source
|
46
46
|
- star_rating
|
47
|
-
-
|
47
|
+
- stat_change
|
48
48
|
- table
|
49
49
|
- typography:
|
50
50
|
- body
|
@@ -56,6 +56,7 @@ kits:
|
|
56
56
|
- dashboard_value
|
57
57
|
- date
|
58
58
|
- date_range_inline
|
59
|
+
- date_range_stacked
|
59
60
|
- date_stacked
|
60
61
|
- date_year_stacked
|
61
62
|
- home_address_street
|
@@ -13,6 +13,7 @@ export Currency from './pb_currency/_currency.jsx'
|
|
13
13
|
export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
|
14
14
|
export Date from './pb_date/_date.jsx'
|
15
15
|
export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
|
16
|
+
export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
|
16
17
|
export DateStacked from './pb_date_stacked/_date_stacked.jsx'
|
17
18
|
export DateYearStacked from './pb_date_year_stacked/_date_year_stacked.jsx'
|
18
19
|
export DistributionBar from './pb_distribution_bar/_distribution_bar.jsx'
|
@@ -73,3 +74,4 @@ export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
|
|
73
74
|
// Other JS/Plugins
|
74
75
|
export pbChart from './plugins/pb_chart.js'
|
75
76
|
export PbTypeahead from './pb_typeahead'
|
77
|
+
export PbPopover from './pb_popover'
|
@@ -27,6 +27,7 @@ import * as Currency from 'pb_currency/docs'
|
|
27
27
|
import * as DashboardValue from 'pb_dashboard_value/docs'
|
28
28
|
import * as Date from 'pb_date/docs'
|
29
29
|
import * as DateRangeInline from 'pb_date_range_inline/docs'
|
30
|
+
import * as DateRangeStacked from 'pb_date_range_stacked/docs'
|
30
31
|
import * as DateStacked from 'pb_date_stacked/docs'
|
31
32
|
import * as DateYearStacked from 'pb_date_year_stacked/docs'
|
32
33
|
import * as DistributionBar from 'pb_distribution_bar/docs'
|
@@ -80,6 +81,9 @@ import * as UserBadge from 'pb_user_badge/docs'
|
|
80
81
|
import PbTypeahead from 'pb_typeahead'
|
81
82
|
PbTypeahead.start()
|
82
83
|
|
84
|
+
import PbPopover from 'pb_popover'
|
85
|
+
PbPopover.start()
|
86
|
+
|
83
87
|
WebpackerReact.setup({
|
84
88
|
...Avatar,
|
85
89
|
...Badge,
|
@@ -95,6 +99,7 @@ WebpackerReact.setup({
|
|
95
99
|
...DashboardValue,
|
96
100
|
...Date,
|
97
101
|
...DateRangeInline,
|
102
|
+
...DateRangeStacked,
|
98
103
|
...DateStacked,
|
99
104
|
...DateYearStacked,
|
100
105
|
...DistributionBar,
|
@@ -0,0 +1 @@
|
|
1
|
+
import '../../pb_date_range_stacked/_date_range_stacked.jsx'
|
@@ -36,12 +36,12 @@
|
|
36
36
|
code {
|
37
37
|
background: #122b3b;
|
38
38
|
color: #faf6e4;
|
39
|
-
padding: 0.
|
40
|
-
margin: 1rem
|
39
|
+
padding: 0.1rem 0.3rem;
|
40
|
+
margin: 1rem 5px;
|
41
41
|
box-shadow: 0 2px 10px $shadow;
|
42
42
|
border-radius: 0.25rem;
|
43
43
|
overflow: hidden;
|
44
|
-
font-size:
|
44
|
+
font-size: 14px;
|
45
45
|
}
|
46
46
|
|
47
47
|
body {
|
@@ -0,0 +1,24 @@
|
|
1
|
+
<%= content_tag(:div,
|
2
|
+
id: object.id,
|
3
|
+
data: object.data,
|
4
|
+
class: object.classname) do %>
|
5
|
+
|
6
|
+
<%= pb_rails("flex", props: {vertical: "center"}) do %>
|
7
|
+
<%= pb_rails("flex/flex_item") do %>
|
8
|
+
<%= pb_rails("date_year_stacked", props: { align: 'right',
|
9
|
+
date: object.start_date,
|
10
|
+
dark: object.dark }) %>
|
11
|
+
<% end %>
|
12
|
+
<%= pb_rails("flex/flex_item") do %>
|
13
|
+
<div>
|
14
|
+
<%= pb_rails("body", props: { tag: "span", color: "light" }) do %>
|
15
|
+
<%= pb_rails("icon", props: { icon: "long-arrow-right", fixed_width: true, classname: "pb_date_range_stacked_arrow" }) %>
|
16
|
+
<% end %>
|
17
|
+
</div>
|
18
|
+
<% end %>
|
19
|
+
<%= pb_rails("flex/flex_item") do %>
|
20
|
+
<%= pb_rails("date_year_stacked", props: { date: object.end_date,
|
21
|
+
dark: object.dark }) %>
|
22
|
+
<% end %>
|
23
|
+
<% end %>
|
24
|
+
<% end %>
|
@@ -0,0 +1,68 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import React from 'react'
|
4
|
+
import classnames from 'classnames'
|
5
|
+
|
6
|
+
import { buildCss } from '../utilities/props'
|
7
|
+
|
8
|
+
import {
|
9
|
+
Body,
|
10
|
+
DateYearStacked,
|
11
|
+
Flex,
|
12
|
+
FlexItem,
|
13
|
+
Icon,
|
14
|
+
} from '../'
|
15
|
+
|
16
|
+
type DateRangeStackedProps = {
|
17
|
+
className?: String | Array<String>,
|
18
|
+
data?: String,
|
19
|
+
dark?: Boolean,
|
20
|
+
endDate: String,
|
21
|
+
id?: String,
|
22
|
+
startDate: String
|
23
|
+
}
|
24
|
+
|
25
|
+
const DateRangeStacked = ({
|
26
|
+
className,
|
27
|
+
dark = false,
|
28
|
+
endDate,
|
29
|
+
startDate,
|
30
|
+
}: DateRangeStackedProps) => {
|
31
|
+
const css = classnames(className, buildCss('pb_date_range_stacked'))
|
32
|
+
|
33
|
+
return (
|
34
|
+
<div className={css}>
|
35
|
+
<Flex vertical="center">
|
36
|
+
<FlexItem>
|
37
|
+
<DateYearStacked
|
38
|
+
align="right"
|
39
|
+
dark={dark}
|
40
|
+
date={startDate}
|
41
|
+
/>
|
42
|
+
</FlexItem>
|
43
|
+
<FlexItem>
|
44
|
+
<div>
|
45
|
+
<Body
|
46
|
+
color="light"
|
47
|
+
tag="span"
|
48
|
+
>
|
49
|
+
<Icon
|
50
|
+
className="pb_date_range_stacked_arrow"
|
51
|
+
fixedWidth
|
52
|
+
icon="long-arrow-right"
|
53
|
+
/>
|
54
|
+
</Body>
|
55
|
+
</div>
|
56
|
+
</FlexItem>
|
57
|
+
<FlexItem>
|
58
|
+
<DateYearStacked
|
59
|
+
dark={dark}
|
60
|
+
date={endDate}
|
61
|
+
/>
|
62
|
+
</FlexItem>
|
63
|
+
</Flex>
|
64
|
+
</div>
|
65
|
+
)
|
66
|
+
}
|
67
|
+
|
68
|
+
export default DateRangeStacked
|
@@ -0,0 +1,19 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module PbDateRangeStacked
|
5
|
+
class DateRangeStacked
|
6
|
+
include Playbook::Props
|
7
|
+
|
8
|
+
partial "pb_date_range_stacked/date_range_stacked"
|
9
|
+
|
10
|
+
prop :dark, type: Playbook::Props::Boolean, default: false
|
11
|
+
prop :end_date, type: Playbook::Props::Date, required: true
|
12
|
+
prop :start_date, type: Playbook::Props::Date, required: true
|
13
|
+
|
14
|
+
def classname
|
15
|
+
generate_classname("pb_date_range_stacked")
|
16
|
+
end
|
17
|
+
end
|
18
|
+
end
|
19
|
+
end
|
@@ -0,0 +1 @@
|
|
1
|
+
<%= pb_rails("date_range_stacked", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20), dark: true }) %>
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { DateRangeStacked } from '../../'
|
3
|
+
|
4
|
+
const DateRangeStackedDark = () => (
|
5
|
+
<div>
|
6
|
+
<DateRangeStacked
|
7
|
+
dark
|
8
|
+
endDate={new Date('20 Mar 2020')}
|
9
|
+
startDate={new Date('18 Jun 2019')}
|
10
|
+
/>
|
11
|
+
</div>
|
12
|
+
)
|
13
|
+
|
14
|
+
export default DateRangeStackedDark
|
@@ -0,0 +1 @@
|
|
1
|
+
<%= pb_rails("date_range_stacked", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20) }) %>
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { DateRangeStacked } from '../../'
|
3
|
+
|
4
|
+
const DateRangeStackedDefault = () => (
|
5
|
+
<div>
|
6
|
+
<DateRangeStacked
|
7
|
+
endDate={new Date('20 Mar 2020')}
|
8
|
+
startDate={new Date('18 Jun 2019')}
|
9
|
+
/>
|
10
|
+
</div>
|
11
|
+
)
|
12
|
+
|
13
|
+
export default DateRangeStackedDefault
|
@@ -8,20 +8,3 @@
|
|
8
8
|
<% end %>
|
9
9
|
</div>
|
10
10
|
<% end %>
|
11
|
-
|
12
|
-
|
13
|
-
<%# Javascript for the Popover Instance %>
|
14
|
-
<% content_for :pb_js do %>
|
15
|
-
<%= javascript_tag do %>
|
16
|
-
window.addEventListener('DOMContentLoaded', function() {
|
17
|
-
new PbPopover(
|
18
|
-
"#<%= object.trigger_element_id %>",
|
19
|
-
"#<%= object.tooltip_id %>",
|
20
|
-
"<%= object.position %>",
|
21
|
-
<%= object.popover_offset %>,
|
22
|
-
)
|
23
|
-
})
|
24
|
-
<% end %>
|
25
|
-
<% end %>
|
26
|
-
|
27
|
-
|
@@ -0,0 +1,50 @@
|
|
1
|
+
import PbEnhancedElement from '../pb_enhanced_element'
|
2
|
+
import Popper from 'popper.js'
|
3
|
+
|
4
|
+
const POPOVER_OFFSET_Y = '0,8'
|
5
|
+
|
6
|
+
export default class PbPopover extends PbEnhancedElement {
|
7
|
+
static get selector() {
|
8
|
+
return '[data-pb-popover-kit]'
|
9
|
+
}
|
10
|
+
|
11
|
+
connect() {
|
12
|
+
this.popper = new Popper(this.triggerElement, this.tooltip, {
|
13
|
+
placement: this.position,
|
14
|
+
modifiers: {
|
15
|
+
offset: {
|
16
|
+
offset: this.offset,
|
17
|
+
},
|
18
|
+
},
|
19
|
+
})
|
20
|
+
|
21
|
+
this.triggerElement.addEventListener('click', () => {
|
22
|
+
this.tooltip.classList.toggle('show')
|
23
|
+
this.popper.scheduleUpdate()
|
24
|
+
})
|
25
|
+
}
|
26
|
+
|
27
|
+
get triggerElement() {
|
28
|
+
return this._triggerElement = (this._triggerElement || document.querySelector(`#${this.triggerElementId}`))
|
29
|
+
}
|
30
|
+
|
31
|
+
get tooltip() {
|
32
|
+
return this._tooltip = (this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
|
33
|
+
}
|
34
|
+
|
35
|
+
get position() {
|
36
|
+
return this.element.dataset.pbPopoverPosition
|
37
|
+
}
|
38
|
+
|
39
|
+
get triggerElementId() {
|
40
|
+
return this.element.dataset.pbPopoverTriggerElementId
|
41
|
+
}
|
42
|
+
|
43
|
+
get tooltipId() {
|
44
|
+
return this.element.dataset.pbPopoverTooltipId
|
45
|
+
}
|
46
|
+
|
47
|
+
get offset() {
|
48
|
+
return this.element.dataset.pbPopoverOffset === 'true' ? POPOVER_OFFSET_Y : '0,0'
|
49
|
+
}
|
50
|
+
}
|
@@ -11,13 +11,19 @@ module Playbook
|
|
11
11
|
prop :tooltip_id
|
12
12
|
prop :offset, type: Playbook::Props::Boolean, default: false
|
13
13
|
|
14
|
-
def popover_offset
|
15
|
-
offset ? "0, 8" : "0, 0"
|
16
|
-
end
|
17
|
-
|
18
14
|
def classname
|
19
15
|
generate_classname("pb_popover_kit")
|
20
16
|
end
|
17
|
+
|
18
|
+
def data
|
19
|
+
Hash(values[:data]).merge(
|
20
|
+
pb_popover_kit: true,
|
21
|
+
pb_popover_position: position,
|
22
|
+
pb_popover_trigger_element_id: trigger_element_id,
|
23
|
+
pb_popover_tooltip_id: tooltip_id,
|
24
|
+
pb_popover_offset: offset,
|
25
|
+
)
|
26
|
+
end
|
21
27
|
end
|
22
28
|
end
|
23
29
|
end
|
@@ -0,0 +1 @@
|
|
1
|
+
This should only be use on white backgrounds. This adds a white background that will be very noticeable on other background colors.
|
@@ -0,0 +1 @@
|
|
1
|
+
This should only be use on light backgrounds (with our variable `$bg_light`).
|
@@ -0,0 +1,51 @@
|
|
1
|
+
<%= pb_rails("select", props: {
|
2
|
+
label: "Colors",
|
3
|
+
name: "foo",
|
4
|
+
data: { context_select: true },
|
5
|
+
options: [
|
6
|
+
{ value: "red", value_text: "Red" },
|
7
|
+
{ value: "orange", value_text: "Orange" },
|
8
|
+
{ value: "yellow", value_text: "Yellow" },
|
9
|
+
{ value: "green", value_text: "Green" },
|
10
|
+
{ value: "blue", value_text: "Blue" },
|
11
|
+
{ value: "purple", value_text: "Purple" },
|
12
|
+
]
|
13
|
+
}) %>
|
14
|
+
<%= pb_rails("typeahead", props: { label: "Crayola Crayons", name: :foo, data: { typeahead_example2: true, search_context_value_selector: "[data-context-select] select" } }) %>
|
15
|
+
|
16
|
+
<br><br><br>
|
17
|
+
|
18
|
+
|
19
|
+
<%= javascript_tag defer: "defer" do %>
|
20
|
+
document.addEventListener("pb-typeahead-kit-search", function(event) {
|
21
|
+
if (!event.target.dataset.typeaheadExample2) return;
|
22
|
+
|
23
|
+
const fuzzyMatch = function(string, term) {
|
24
|
+
const ratio = 0.5;
|
25
|
+
string = string.toLowerCase();
|
26
|
+
const compare = term.toLowerCase();
|
27
|
+
let matches = 0;
|
28
|
+
|
29
|
+
if (string.indexOf(compare) > -1) return true;
|
30
|
+
|
31
|
+
for (let index = 0; index < compare.length; index++) {
|
32
|
+
if (string.indexOf(compare[index]) > -1) {
|
33
|
+
matches += 1
|
34
|
+
} else {
|
35
|
+
matches -=1;
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
39
|
+
return (matches / string.length >= ratio || term == "")
|
40
|
+
};
|
41
|
+
|
42
|
+
const colors = { red: ["Red", "Scarlet", "Chestnut", "Mahogany"],
|
43
|
+
orange: ["Orange", "Apricot", "Peach", "Melon", "Burnt Sienna", "Macaroni and Cheese"],
|
44
|
+
yellow: ["Yellow", "Gold", "Goldenrod", "Canary", "Laser Lemon"],
|
45
|
+
green: ["Green", "Olive Green", "Granny Smith Apple", "Spring Green", "Sea Green"],
|
46
|
+
blue: ["Blue", "Cerulean", "Bluetiful", "Sky Blue", "Cadet Blue", "Cornflower"],
|
47
|
+
purple: ["Violet", "Indigo", "Wisteria", "Purple Mountain Majesty", "Lavender"] };
|
48
|
+
|
49
|
+
event.detail.setResults(colors[event.detail.searchingContext].filter((color) => fuzzyMatch(color, event.detail.searchingFor)).map((color) => document.createTextNode(color)));
|
50
|
+
})
|
51
|
+
<% end %>
|
@@ -25,24 +25,27 @@ export default class PbTypeahead extends PbEnhancedElement {
|
|
25
25
|
|
26
26
|
search() {
|
27
27
|
if (this.searchTerm.length < this.searchTermMinimumLength) return this.clearResults()
|
28
|
-
|
28
|
+
|
29
|
+
this.showResults()
|
29
30
|
|
30
31
|
const searchTerm = this.searchTerm
|
32
|
+
const searchContext = this.searchContext
|
31
33
|
const search = {
|
32
34
|
searchingFor: searchTerm,
|
35
|
+
searchingContext: searchContext,
|
33
36
|
setResults: (results) => {
|
34
|
-
this.resultsCacheUpdate(searchTerm, results)
|
37
|
+
this.resultsCacheUpdate(searchTerm, searchContext, results)
|
35
38
|
},
|
36
39
|
}
|
37
|
-
|
38
40
|
this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-search', { bubbles: true, detail: search }))
|
39
41
|
}
|
40
42
|
|
41
|
-
resultsCacheUpdate(searchTerm, results) {
|
42
|
-
|
43
|
+
resultsCacheUpdate(searchTerm, searchContext, results) {
|
44
|
+
const searchTermAndContext = this.cacheKeyFor(searchTerm, searchContext)
|
45
|
+
if (this.resultsOptionCache.has(searchTermAndContext)) this.resultsOptionCache.delete(searchTermAndContext)
|
43
46
|
if (this.resultsOptionCache.size > 32) this.resultsOptionCache.delete(this.resultsOptionCache.keys[0])
|
44
47
|
|
45
|
-
this.resultsOptionCache.set(
|
48
|
+
this.resultsOptionCache.set(searchTermAndContext, results)
|
46
49
|
this.showResults()
|
47
50
|
}
|
48
51
|
|
@@ -58,10 +61,10 @@ export default class PbTypeahead extends PbEnhancedElement {
|
|
58
61
|
}
|
59
62
|
|
60
63
|
showResults() {
|
61
|
-
if (!this.resultsOptionCache.has(this.
|
64
|
+
if (!this.resultsOptionCache.has(this.searchTermAndContext)) return
|
62
65
|
|
63
66
|
this.clearResults()
|
64
|
-
for (const result of this.resultsOptionCache.get(this.
|
67
|
+
for (const result of this.resultsOptionCache.get(this.searchTermAndContext)) {
|
65
68
|
this.resultsElement.appendChild(this.newResultOption(result.cloneNode(true)))
|
66
69
|
}
|
67
70
|
for (const result of this.resultsElement.querySelectorAll('[data-result-option-item]')) {
|
@@ -126,6 +129,30 @@ export default class PbTypeahead extends PbEnhancedElement {
|
|
126
129
|
return this.searchInput.value
|
127
130
|
}
|
128
131
|
|
132
|
+
get searchContext() {
|
133
|
+
if (this._searchContext) return this._searchContext
|
134
|
+
|
135
|
+
const selector = this.element.dataset.searchContextValueSelector
|
136
|
+
if (selector) return (
|
137
|
+
this.element.parentNode.querySelector(selector) ||
|
138
|
+
this.element.closest(selector)
|
139
|
+
).value
|
140
|
+
|
141
|
+
return null
|
142
|
+
}
|
143
|
+
|
144
|
+
set searchContext(value) {
|
145
|
+
this._searchContext = value
|
146
|
+
}
|
147
|
+
|
148
|
+
get searchTermAndContext() {
|
149
|
+
return this.cacheKeyFor(this.searchTerm, this.searchContext)
|
150
|
+
}
|
151
|
+
|
152
|
+
cacheKeyFor(searchTerm, searchContext) {
|
153
|
+
return [searchTerm, JSON.stringify(searchContext)].join()
|
154
|
+
}
|
155
|
+
|
129
156
|
searchInputClear() {
|
130
157
|
this.searchInput.value = ''
|
131
158
|
}
|
@@ -1,6 +1,9 @@
|
|
1
1
|
div class="pb--kit-show #{@kit}-kit"
|
2
2
|
= pb_rails("title", props: { text: pb_kit_title(@kit), tag: "h1", size: 1 })
|
3
|
+
div class="markdown"
|
4
|
+
= markdown(get_kit_description(@kit))
|
3
5
|
|
6
|
+
div
|
4
7
|
.pb--kit-type-nav
|
5
8
|
- if has_kit_type?(@kit, "rails")
|
6
9
|
a href="#{kit_show_rails_path(@kit)}" class="#{'active' if action_name == 'kit_show_rails'}" Rails
|
@@ -9,6 +12,12 @@ div class="pb--kit-show #{@kit}-kit"
|
|
9
12
|
|
10
13
|
- if(action_name == "kit_show_rails")
|
11
14
|
= pb_kit(kit: @kit)
|
15
|
+
.markdown
|
16
|
+
br
|
17
|
+
= markdown(get_kit_footer(@kit))
|
12
18
|
= pb_kit_api(@kit)
|
13
19
|
- else
|
14
20
|
= pb_kit(kit: @kit, type: "react")
|
21
|
+
.markdown
|
22
|
+
br
|
23
|
+
= markdown(get_kit_footer(@kit))
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 4.
|
4
|
+
version: 4.4.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2020-02-
|
12
|
+
date: 2020-02-21 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -413,7 +413,7 @@ files:
|
|
413
413
|
- app/pb_kits/playbook/_playbook.scss
|
414
414
|
- app/pb_kits/playbook/config/_kit_example.html.erb
|
415
415
|
- app/pb_kits/playbook/config/_kit_samples_list.html.erb
|
416
|
-
- app/pb_kits/playbook/config/_kit_ui.html.
|
416
|
+
- app/pb_kits/playbook/config/_kit_ui.html.erb
|
417
417
|
- app/pb_kits/playbook/config/_pb_kit_api.html.erb
|
418
418
|
- app/pb_kits/playbook/data/menu.yml
|
419
419
|
- app/pb_kits/playbook/index.js
|
@@ -435,6 +435,7 @@ files:
|
|
435
435
|
- app/pb_kits/playbook/packs/kits/pb_dashboard_value.js
|
436
436
|
- app/pb_kits/playbook/packs/kits/pb_date.js
|
437
437
|
- app/pb_kits/playbook/packs/kits/pb_date_range_inline.js
|
438
|
+
- app/pb_kits/playbook/packs/kits/pb_date_range_stacked.js
|
438
439
|
- app/pb_kits/playbook/packs/kits/pb_date_stacked.js
|
439
440
|
- app/pb_kits/playbook/packs/kits/pb_date_year_stacked.js
|
440
441
|
- app/pb_kits/playbook/packs/kits/pb_distribution_bar.js
|
@@ -678,6 +679,16 @@ files:
|
|
678
679
|
- app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx
|
679
680
|
- app/pb_kits/playbook/pb_date_range_inline/docs/example.yml
|
680
681
|
- app/pb_kits/playbook/pb_date_range_inline/docs/index.js
|
682
|
+
- app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.html.erb
|
683
|
+
- app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
|
684
|
+
- app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.scss
|
685
|
+
- app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.rb
|
686
|
+
- app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.html.erb
|
687
|
+
- app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.jsx
|
688
|
+
- app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.html.erb
|
689
|
+
- app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx
|
690
|
+
- app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml
|
691
|
+
- app/pb_kits/playbook/pb_date_range_stacked/docs/index.js
|
681
692
|
- app/pb_kits/playbook/pb_date_stacked/_date_stacked.html.erb
|
682
693
|
- app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx
|
683
694
|
- app/pb_kits/playbook/pb_date_stacked/_date_stacked.scss
|
@@ -1039,7 +1050,6 @@ files:
|
|
1039
1050
|
- app/pb_kits/playbook/pb_pill/docs/index.js
|
1040
1051
|
- app/pb_kits/playbook/pb_pill/pill.rb
|
1041
1052
|
- app/pb_kits/playbook/pb_popover/_popover.html.erb
|
1042
|
-
- app/pb_kits/playbook/pb_popover/_popover.js
|
1043
1053
|
- app/pb_kits/playbook/pb_popover/_popover.jsx
|
1044
1054
|
- app/pb_kits/playbook/pb_popover/_popover.scss
|
1045
1055
|
- app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb
|
@@ -1052,6 +1062,7 @@ files:
|
|
1052
1062
|
- app/pb_kits/playbook/pb_popover/docs/_popover_with_circle.html.erb
|
1053
1063
|
- app/pb_kits/playbook/pb_popover/docs/example.yml
|
1054
1064
|
- app/pb_kits/playbook/pb_popover/docs/index.js
|
1065
|
+
- app/pb_kits/playbook/pb_popover/index.js
|
1055
1066
|
- app/pb_kits/playbook/pb_popover/popover.rb
|
1056
1067
|
- app/pb_kits/playbook/pb_progress_pills/_progress_pills.html.erb
|
1057
1068
|
- app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx
|
@@ -1096,12 +1107,16 @@ files:
|
|
1096
1107
|
- app/pb_kits/playbook/pb_section_separator/_section_separator.html.erb
|
1097
1108
|
- app/pb_kits/playbook/pb_section_separator/_section_separator.jsx
|
1098
1109
|
- app/pb_kits/playbook/pb_section_separator/_section_separator.scss
|
1110
|
+
- app/pb_kits/playbook/pb_section_separator/docs/_description.md
|
1111
|
+
- app/pb_kits/playbook/pb_section_separator/docs/_footer.md
|
1099
1112
|
- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.html.erb
|
1100
1113
|
- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx
|
1101
1114
|
- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.html.erb
|
1102
1115
|
- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx
|
1116
|
+
- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.md
|
1103
1117
|
- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.html.erb
|
1104
1118
|
- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.jsx
|
1119
|
+
- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.md
|
1105
1120
|
- app/pb_kits/playbook/pb_section_separator/docs/example.yml
|
1106
1121
|
- app/pb_kits/playbook/pb_section_separator/docs/index.js
|
1107
1122
|
- app/pb_kits/playbook/pb_section_separator/section_separator.rb
|
@@ -1317,6 +1332,7 @@ files:
|
|
1317
1332
|
- app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb
|
1318
1333
|
- app/pb_kits/playbook/pb_typeahead/_typeahead.scss
|
1319
1334
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb
|
1335
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context.html.erb
|
1320
1336
|
- app/pb_kits/playbook/pb_typeahead/docs/example.yml
|
1321
1337
|
- app/pb_kits/playbook/pb_typeahead/index.js
|
1322
1338
|
- app/pb_kits/playbook/pb_typeahead/typeahead.rb
|
@@ -1,34 +0,0 @@
|
|
1
|
-
- type ||= "rails"
|
2
|
-
|
3
|
-
- if type == "react"
|
4
|
-
- contents = File.read("#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit_examples[:kit]}/docs/_#{key}.jsx")
|
5
|
-
- else
|
6
|
-
- contents = File.read("#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit_examples[:kit]}/docs/_#{key}.html.erb")
|
7
|
-
|
8
|
-
.pb--kit-example
|
9
|
-
= pb_rails("caption", props: { text: item })
|
10
|
-
br
|
11
|
-
- if type == "rails"
|
12
|
-
= render partial: "pb_#{@kit_examples[:kit]}/docs/#{key}"
|
13
|
-
- elsif type == "react"
|
14
|
-
= pb_react(key.camelize)
|
15
|
-
br
|
16
|
-
|
17
|
-
- if @samples
|
18
|
-
= render partial: "kit_samples_list"
|
19
|
-
|
20
|
-
- if defined?(rouge)
|
21
|
-
- if @show_code
|
22
|
-
.pb--codeControls
|
23
|
-
ul
|
24
|
-
li
|
25
|
-
a href="#" data-toggle="code_example" Code Example
|
26
|
-
|
27
|
-
.pb--codeCopy data-action="toggle" data-togglable="code_example"
|
28
|
-
a.pb--close-toggle href="#" data-toggle="false" Close
|
29
|
-
pre.highlight
|
30
|
-
- if type == "rails"
|
31
|
-
= raw rouge(contents, "erb")
|
32
|
-
- elsif type == "react"
|
33
|
-
= raw rouge(contents, "react")
|
34
|
-
|
@@ -1,46 +0,0 @@
|
|
1
|
-
import Popper from 'popper.js'
|
2
|
-
|
3
|
-
class PbPopover {
|
4
|
-
constructor(
|
5
|
-
triggerElement = '#triggerElement',
|
6
|
-
tooltip = '#tooltip',
|
7
|
-
placement = 'left',
|
8
|
-
offset,
|
9
|
-
) {
|
10
|
-
this.triggerElement = triggerElement
|
11
|
-
this.tooltip = tooltip
|
12
|
-
this.placement = placement
|
13
|
-
this.offset = offset
|
14
|
-
this.setupPopper()
|
15
|
-
}
|
16
|
-
|
17
|
-
//getters
|
18
|
-
get referenceElement() {
|
19
|
-
return document.querySelector(this.triggerElement)
|
20
|
-
}
|
21
|
-
get popoverTooltip() {
|
22
|
-
return document.querySelector(this.tooltip)
|
23
|
-
}
|
24
|
-
|
25
|
-
attachEvents() {
|
26
|
-
this.referenceElement.addEventListener('click', () => {
|
27
|
-
this.popoverTooltip.classList.toggle('show')
|
28
|
-
this.popper.scheduleUpdate()
|
29
|
-
})
|
30
|
-
}
|
31
|
-
|
32
|
-
setupPopper() {
|
33
|
-
this.popper = new Popper(this.referenceElement, this.popoverTooltip, {
|
34
|
-
placement: this.placement,
|
35
|
-
modifiers: {
|
36
|
-
offset: {
|
37
|
-
offset: this.offset,
|
38
|
-
},
|
39
|
-
},
|
40
|
-
})
|
41
|
-
|
42
|
-
this.attachEvents()
|
43
|
-
}
|
44
|
-
}
|
45
|
-
|
46
|
-
export default PbPopover
|