playbook_ui 5.3.0.pre.alpha1 → 5.5.1.pre.alpha1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +2 -2
- data/app/pb_kits/playbook/data/menu.yml +4 -3
- data/app/pb_kits/playbook/index.js +2 -1
- data/app/pb_kits/playbook/packs/examples.js +2 -2
- data/app/pb_kits/playbook/packs/samples.js +2 -0
- data/app/pb_kits/playbook/pb_body/_body.html.erb +1 -0
- data/app/pb_kits/playbook/pb_body/_body.jsx +33 -24
- data/app/pb_kits/playbook/pb_body/docs/_body_dark.html.erb +1 -1
- data/app/pb_kits/playbook/pb_body/docs/_body_dark.jsx +0 -2
- data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb +1 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx +3 -7
- data/app/pb_kits/playbook/pb_button/_button.jsx +2 -0
- data/app/pb_kits/playbook/pb_caption/_caption.scss +2 -2
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb +2 -1
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +18 -5
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.jsx +17 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.html.erb +1 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx +17 -1
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js +0 -26
- data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.html.erb +3 -2
- data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx +15 -12
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +36 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +98 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +59 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +38 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +91 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx +12 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +24 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +30 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb +43 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx +48 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +13 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +19 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +25 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx +13 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb +14 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx +22 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +13 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +23 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +8 -0
- data/app/pb_kits/playbook/pb_date_picker/index.js +11 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +1 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +3 -1
- data/app/pb_kits/playbook/pb_form/form_builder.rb +1 -0
- data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +15 -0
- data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_image/_image.jsx +1 -1
- data/app/pb_kits/playbook/pb_layout/_layout.scss +16 -0
- data/app/pb_kits/playbook/pb_legend/_legend.html.erb +1 -0
- data/app/pb_kits/playbook/pb_legend/_legend.jsx +25 -4
- data/app/pb_kits/playbook/pb_nav/_item.jsx +20 -10
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +3 -0
- data/app/pb_kits/playbook/pb_popover/_popover.html.erb +1 -1
- data/app/pb_kits/playbook/pb_popover/_popover.jsx +3 -1
- data/app/pb_kits/playbook/pb_popover/_popover.scss +4 -0
- data/app/pb_kits/playbook/pb_popover/popover.rb +4 -0
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.html.erb +2 -2
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx +24 -10
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +3 -1
- data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb +6 -0
- data/app/pb_kits/playbook/pb_title/_title.jsx +7 -4
- data/app/pb_kits/playbook/pb_title/_title.scss +7 -0
- data/app/pb_kits/playbook/pb_title/_title_mixin.scss +2 -0
- data/app/pb_kits/playbook/pb_title/title.rb +4 -1
- data/app/pb_kits/playbook/plugins/pb_chart.js +0 -71
- data/app/pb_kits/playbook/vendor.js +4 -0
- data/app/views/layouts/playbook/samples.html.erb +1 -0
- data/app/views/playbook/samples/collection_detail/index.html.erb +169 -0
- data/app/views/playbook/samples/collection_detail/index.jsx +372 -0
- data/lib/generators/kit/kit_generator.rb +6 -3
- data/lib/generators/kit/templates/kit_html.erb.tt +3 -2
- data/lib/generators/kit/templates/kit_jsx.erb.tt +38 -10
- data/lib/playbook/version.rb +1 -1
- metadata +30 -23
- data/app/pb_kits/playbook/pb_gauge/_gauge.html.erb +0 -12
- data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +0 -105
- data/app/pb_kits/playbook/pb_gauge/_gauge.scss +0 -11
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.html.erb +0 -11
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx +0 -17
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.html.erb +0 -14
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx +0 -20
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.html.erb +0 -15
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx +0 -23
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx +0 -25
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.html.erb +0 -21
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx +0 -26
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb +0 -33
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +0 -42
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.html.erb +0 -14
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx +0 -20
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.html.erb +0 -29
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx +0 -29
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +0 -22
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +0 -8
- data/app/pb_kits/playbook/pb_gauge/gauge.rb +0 -55
@@ -1,25 +0,0 @@
|
|
1
|
-
import React, { useState } from 'react'
|
2
|
-
import { Button, Gauge } from '../../'
|
3
|
-
|
4
|
-
const GaugeLiveData = () => {
|
5
|
-
const [value, setValue] = useState(50)
|
6
|
-
|
7
|
-
const updateState = () => {
|
8
|
-
setValue(Math.floor(Math.random() * 100))
|
9
|
-
}
|
10
|
-
|
11
|
-
return (
|
12
|
-
<div>
|
13
|
-
<Button
|
14
|
-
onClick={updateState}
|
15
|
-
text="Update State"
|
16
|
-
/>
|
17
|
-
<Gauge
|
18
|
-
chartData={[{ name: 'Name', value: value }]}
|
19
|
-
id="gauge-live-data"
|
20
|
-
/>
|
21
|
-
</div>
|
22
|
-
)
|
23
|
-
}
|
24
|
-
|
25
|
-
export default GaugeLiveData
|
@@ -1,21 +0,0 @@
|
|
1
|
-
<%= pb_rails("title", props: {
|
2
|
-
text: "Min defaults to 0, Max to 100.",
|
3
|
-
tag: "h3",
|
4
|
-
size: 3
|
5
|
-
}) %>
|
6
|
-
|
7
|
-
<% data = [
|
8
|
-
{
|
9
|
-
name: 'Rating',
|
10
|
-
value: 4.5,
|
11
|
-
}
|
12
|
-
]%>
|
13
|
-
|
14
|
-
<%= pb_rails("gauge", props: {
|
15
|
-
id: "gauge-min-max",
|
16
|
-
chart_data: data,
|
17
|
-
min: 0,
|
18
|
-
max: 5,
|
19
|
-
show_labels: true,
|
20
|
-
title: "Product Rating"
|
21
|
-
}) %>
|
@@ -1,26 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Gauge, Title } from '../../'
|
3
|
-
|
4
|
-
const data = [{
|
5
|
-
name: 'Rating', value: 4.5,
|
6
|
-
}]
|
7
|
-
|
8
|
-
const GaugeMinMax = () => (
|
9
|
-
<div>
|
10
|
-
<Title
|
11
|
-
size={3}
|
12
|
-
tag="h3"
|
13
|
-
text="Min defaults to 0, Max to 100."
|
14
|
-
/>
|
15
|
-
<Gauge
|
16
|
-
chartData={data}
|
17
|
-
id="gauge-min-max"
|
18
|
-
max={5}
|
19
|
-
min={0}
|
20
|
-
showLabels
|
21
|
-
title="Product Rating"
|
22
|
-
/>
|
23
|
-
</div>
|
24
|
-
)
|
25
|
-
|
26
|
-
export default GaugeMinMax
|
@@ -1,33 +0,0 @@
|
|
1
|
-
<%= pb_rails("title", props: {
|
2
|
-
text: "Gauge resizes dynamically to fit whatever element it's placed within.",
|
3
|
-
tag: "h3",
|
4
|
-
size: 3
|
5
|
-
}) %>
|
6
|
-
|
7
|
-
|
8
|
-
<%= pb_rails("flex", props: {wrap: true}) do %>
|
9
|
-
<%= pb_rails("flex/flex_item", props: {fixed_size: "400px"}) do %>
|
10
|
-
<%= pb_rails("gauge", props: {
|
11
|
-
id: "gauge-sizing4",
|
12
|
-
chart_data: [{ name: "Name", value: 100 }],
|
13
|
-
}) %>
|
14
|
-
<% end %>
|
15
|
-
<%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>
|
16
|
-
<%= pb_rails("gauge", props: {
|
17
|
-
id: "gauge-sizing3",
|
18
|
-
chart_data: [{ name: "Name", value: 75 }],
|
19
|
-
}) %>
|
20
|
-
<% end %>
|
21
|
-
<%= pb_rails("flex/flex_item", props: {fixed_size: "200px"}) do %>
|
22
|
-
<%= pb_rails("gauge", props: {
|
23
|
-
id: "gauge-sizing2",
|
24
|
-
chart_data: [{ name: "Name", value: 50 }],
|
25
|
-
}) %>
|
26
|
-
<% end %>
|
27
|
-
<%= pb_rails("flex/flex_item", props: {fixed_size: "125px"}) do %>
|
28
|
-
<%= pb_rails("gauge", props: {
|
29
|
-
id: "gauge-sizing1",
|
30
|
-
chart_data: [{ name: "Name", value: 25 }],
|
31
|
-
}) %>
|
32
|
-
<% end %>
|
33
|
-
<% end %>
|
@@ -1,42 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Flex, FlexItem, Gauge, Title } from '../../'
|
3
|
-
|
4
|
-
const GaugeSizing = () => (
|
5
|
-
<div>
|
6
|
-
<Title
|
7
|
-
size={3}
|
8
|
-
tag="h3"
|
9
|
-
text="Gauge resizes dynamically to fit whatever element it's placed within."
|
10
|
-
/>
|
11
|
-
<Flex
|
12
|
-
wrap
|
13
|
-
>
|
14
|
-
<FlexItem fixedSize="400px">
|
15
|
-
<Gauge
|
16
|
-
chartData={[ { name: 'Point1', value: 100 } ]}
|
17
|
-
id="gauge-sizing4"
|
18
|
-
/>
|
19
|
-
</FlexItem>
|
20
|
-
<FlexItem fixedSize="300px">
|
21
|
-
<Gauge
|
22
|
-
chartData={[ { name: 'Point1', value: 75 } ]}
|
23
|
-
id="gauge-sizing3"
|
24
|
-
/>
|
25
|
-
</FlexItem>
|
26
|
-
<FlexItem fixedSize="200px">
|
27
|
-
<Gauge
|
28
|
-
chartData={[ { name: 'Point1', value: 50 } ]}
|
29
|
-
id="gauge-sizing2"
|
30
|
-
/>
|
31
|
-
</FlexItem>
|
32
|
-
<FlexItem fixedSize="125px">
|
33
|
-
<Gauge
|
34
|
-
chartData={[ { name: 'Point1', value: 25 } ]}
|
35
|
-
id="gauge-sizing1"
|
36
|
-
/>
|
37
|
-
</FlexItem>
|
38
|
-
</Flex>
|
39
|
-
</div>
|
40
|
-
)
|
41
|
-
|
42
|
-
export default GaugeSizing
|
@@ -1,20 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Gauge } from '../../'
|
3
|
-
|
4
|
-
const data = [
|
5
|
-
{ name: 'Score', value: 780 },
|
6
|
-
]
|
7
|
-
|
8
|
-
const GaugeTitle = () => (
|
9
|
-
<div>
|
10
|
-
<Gauge
|
11
|
-
chartData={data}
|
12
|
-
id="gauge-title"
|
13
|
-
max={850}
|
14
|
-
min={300}
|
15
|
-
title="Credit Score"
|
16
|
-
/>
|
17
|
-
</div>
|
18
|
-
)
|
19
|
-
|
20
|
-
export default GaugeTitle
|
@@ -1,29 +0,0 @@
|
|
1
|
-
<% data1 = [
|
2
|
-
{
|
3
|
-
name: 'Data Used',
|
4
|
-
value: 32,
|
5
|
-
}
|
6
|
-
]%>
|
7
|
-
|
8
|
-
<%= pb_rails("gauge", props: {
|
9
|
-
id: "gauge-units1",
|
10
|
-
chart_data: data1,
|
11
|
-
title: "Data Usage",
|
12
|
-
suffix: "GB"
|
13
|
-
}) %>
|
14
|
-
|
15
|
-
<% data2 = [
|
16
|
-
{
|
17
|
-
name: 'Sales to Date',
|
18
|
-
value: 65,
|
19
|
-
}
|
20
|
-
]%>
|
21
|
-
|
22
|
-
<%= pb_rails("gauge", props: {
|
23
|
-
id: "gauge-units2",
|
24
|
-
chart_data: data2,
|
25
|
-
title: "Sales Goal",
|
26
|
-
prefix: "$",
|
27
|
-
suffix: "k",
|
28
|
-
|
29
|
-
}) %>
|
@@ -1,29 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Gauge } from '../../'
|
3
|
-
|
4
|
-
const data1 = [
|
5
|
-
{ name: 'Data Used', value: 32 },
|
6
|
-
]
|
7
|
-
const data2 = [
|
8
|
-
{ name: 'Sales to Date', value: 65 },
|
9
|
-
]
|
10
|
-
|
11
|
-
const GaugeUnits = () => (
|
12
|
-
<div>
|
13
|
-
<Gauge
|
14
|
-
chartData={data1}
|
15
|
-
id="gauge-units1"
|
16
|
-
suffix="GB"
|
17
|
-
title="Data Usage"
|
18
|
-
/>
|
19
|
-
<Gauge
|
20
|
-
chartData={data2}
|
21
|
-
id="gauge-units2"
|
22
|
-
prefix="$"
|
23
|
-
suffix="k"
|
24
|
-
title="Sales Goal"
|
25
|
-
/>
|
26
|
-
</div>
|
27
|
-
)
|
28
|
-
|
29
|
-
export default GaugeUnits
|
@@ -1,22 +0,0 @@
|
|
1
|
-
examples:
|
2
|
-
|
3
|
-
rails:
|
4
|
-
- gauge_default: Default
|
5
|
-
- gauge_title: Title
|
6
|
-
- gauge_units: Units
|
7
|
-
- gauge_full_circle: Full Circle
|
8
|
-
- gauge_min_max: Min Max Labels
|
9
|
-
- gauge_sizing: Sizing
|
10
|
-
- gauge_height: Height
|
11
|
-
|
12
|
-
|
13
|
-
react:
|
14
|
-
- gauge_default: Default
|
15
|
-
- gauge_title: Title
|
16
|
-
- gauge_units: Units
|
17
|
-
- gauge_full_circle: Full Circle
|
18
|
-
- gauge_min_max: Min Max Labels
|
19
|
-
- gauge_sizing: Sizing
|
20
|
-
- gauge_height: Height
|
21
|
-
- gauge_live_data: Live Data
|
22
|
-
|
@@ -1,8 +0,0 @@
|
|
1
|
-
export { default as GaugeDefault } from './_gauge_default.jsx'
|
2
|
-
export { default as GaugeFullCircle } from './_gauge_full_circle.jsx'
|
3
|
-
export { default as GaugeHeight } from './_gauge_height.jsx'
|
4
|
-
export { default as GaugeMinMax } from './_gauge_min_max.jsx'
|
5
|
-
export { default as GaugeSizing } from './_gauge_sizing.jsx'
|
6
|
-
export { default as GaugeTitle } from './_gauge_title.jsx'
|
7
|
-
export { default as GaugeUnits } from './_gauge_units.jsx'
|
8
|
-
export { default as GaugeLiveData } from './_gauge_live_data.jsx'
|
@@ -1,55 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Playbook
|
4
|
-
module PbGauge
|
5
|
-
class Gauge
|
6
|
-
include Playbook::Props
|
7
|
-
|
8
|
-
partial "pb_gauge/gauge"
|
9
|
-
|
10
|
-
prop :chart_data, type: Playbook::Props::Array,
|
11
|
-
default: [{ name: "Name", value: 0 }]
|
12
|
-
prop :style, type: Playbook::Props::Enum,
|
13
|
-
values: %w[solidgauge],
|
14
|
-
default: "solidgauge"
|
15
|
-
prop :title, type: Playbook::Props::String, default: ""
|
16
|
-
prop :prefix, type: Playbook::Props::String, default: ""
|
17
|
-
prop :suffix, type: Playbook::Props::String, default: ""
|
18
|
-
prop :height, type: Playbook::Props::String, default: nil
|
19
|
-
prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">●</span>
|
20
|
-
{point.name}: ' + '<b>{point.y}
|
21
|
-
</b>'
|
22
|
-
prop :full_circle, type: Playbook::Props::Boolean, default: false
|
23
|
-
prop :show_labels, type: Playbook::Props::Boolean, default: false
|
24
|
-
prop :min, type: Playbook::Props::Numeric, default: 0
|
25
|
-
prop :max, type: Playbook::Props::Numeric, default: 100
|
26
|
-
|
27
|
-
def chart_data_formatted
|
28
|
-
chart_data.map { |hash| hash[:y] = hash.delete :value }
|
29
|
-
chart_data
|
30
|
-
end
|
31
|
-
|
32
|
-
def chart_options
|
33
|
-
{
|
34
|
-
id: id,
|
35
|
-
chartData: chart_data_formatted,
|
36
|
-
circumference: full_circle ? [0, 360] : [-100, 100],
|
37
|
-
height: height,
|
38
|
-
min: min,
|
39
|
-
max: max,
|
40
|
-
title: title,
|
41
|
-
suffix: suffix,
|
42
|
-
prefix: prefix,
|
43
|
-
showLabels: show_labels,
|
44
|
-
style: style,
|
45
|
-
tooltipHtml: tooltip_html,
|
46
|
-
type: "gauge",
|
47
|
-
}.to_json.html_safe
|
48
|
-
end
|
49
|
-
|
50
|
-
def classname
|
51
|
-
generate_classname("pb_gauge_kit")
|
52
|
-
end
|
53
|
-
end
|
54
|
-
end
|
55
|
-
end
|