playbook_ui 10.15.0 → 10.17.0
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 +1 -0
- data/app/pb_kits/playbook/pb_background/background.test.js +22 -0
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +3 -0
- data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +3 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb +26 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +37 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md +2 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_caption/_caption.jsx +17 -4
- data/app/pb_kits/playbook/pb_caption/_caption.scss +25 -8
- data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +17 -0
- data/app/pb_kits/playbook/pb_caption/caption.rb +5 -1
- data/app/pb_kits/playbook/pb_caption/docs/_caption_example.html.erb +3 -0
- data/app/pb_kits/playbook/pb_caption/docs/_caption_example.jsx +27 -0
- data/app/pb_kits/playbook/pb_caption/docs/_caption_example.md +1 -0
- data/app/pb_kits/playbook/pb_caption/docs/example.yml +7 -4
- data/app/pb_kits/playbook/pb_caption/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_card/_card.jsx +1 -3
- data/app/pb_kits/playbook/pb_card/_card.scss +0 -6
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +1 -8
- data/app/pb_kits/playbook/pb_card/card.html.erb +2 -0
- data/app/pb_kits/playbook/pb_card/card.rb +0 -8
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx +3 -0
- data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +6 -0
- data/app/pb_kits/playbook/pb_docs/kit_example.rb +4 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +4 -0
- data/app/pb_kits/playbook/pb_flex/_flex.jsx +4 -0
- data/app/pb_kits/playbook/pb_flex/_flex.scss +17 -1
- data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +6 -2
- data/app/pb_kits/playbook/pb_flex/_flex_item.scss +22 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item.html.erb +12 -1
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item.md +2 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.html.erb +89 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.jsx +210 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.md +5 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +27 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.md +2 -0
- data/app/pb_kits/playbook/pb_flex/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_flex/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_flex/flex.rb +14 -1
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +16 -1
- data/app/pb_kits/playbook/pb_icon/icon.rb +4 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +2 -0
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +4 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.html.erb +26 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx +37 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.md +2 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +3 -0
- data/app/pb_kits/playbook/pb_list/list.rb +2 -0
- data/app/pb_kits/playbook/pb_select/select.rb +3 -0
- data/app/pb_kits/playbook/pb_source/source.rb +3 -0
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -0
- data/app/pb_kits/playbook/plugins/pb_chart.js +4 -3
- data/app/pb_kits/playbook/utilities/_shadow.scss +11 -0
- data/app/pb_kits/playbook/utilities/globalProps.js +7 -1
- data/lib/playbook/classnames.rb +1 -0
- data/lib/playbook/kit_base.rb +2 -0
- data/lib/playbook/markdown/helper.rb +2 -2
- data/lib/playbook/pb_doc_helper.rb +4 -0
- data/lib/playbook/props/base.rb +2 -2
- data/lib/playbook/shadow.rb +29 -0
- data/lib/playbook/version.rb +2 -2
- data/lib/playbook.rb +1 -0
- metadata +40 -25
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: d1e8104e2057e245727105de8a2dc411bb0a82b03e44412429b9335b6493c242
|
4
|
+
data.tar.gz: 0332c556cdb6636b2faac2466ade547b58c38faed3bf08ca682f807acefbd2f7
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: a0e1e774a8e2a0eebea5b07c03713ff74219e8eaa9d2fa6d1937d21192828db996c19ea381cb7a991d678e0dfaefe5ed121e72a20704a4fc386962afffaf5a45
|
7
|
+
data.tar.gz: f4ab414ba1ea7a825432df55853752307b5cba59c133f939f896ba28facf39293b2faa30bb596ea769d9aa442ecfbdda416d597a8a5a168251dacf345abea0ee
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import { ensureAccessible, renderKit } from '../utilities/test-utils'
|
2
|
+
|
3
|
+
import Background from './_background'
|
4
|
+
|
5
|
+
const props = {
|
6
|
+
data: { testid: 'background' },
|
7
|
+
backgroundColor: null,
|
8
|
+
}
|
9
|
+
|
10
|
+
it('Should be accessible', async () => {
|
11
|
+
ensureAccessible(Background, props)
|
12
|
+
})
|
13
|
+
|
14
|
+
test('backgroundColor = success', () => {
|
15
|
+
const kit = renderKit(Background, props, { backgroundColor: 'success' })
|
16
|
+
expect(kit).toHaveClass('pb_background_kit pb_background_color_success')
|
17
|
+
})
|
18
|
+
|
19
|
+
test('backgroundColor = category_1', () => {
|
20
|
+
const kit = renderKit(Background, props, { backgroundColor: 'category_1' })
|
21
|
+
expect(kit).toHaveClass('pb_background_kit pb_background_color_category_1')
|
22
|
+
})
|
@@ -24,6 +24,7 @@ type BarGraphProps = {
|
|
24
24
|
legend?: boolean,
|
25
25
|
toggleLegendClick?: boolean,
|
26
26
|
height?: string,
|
27
|
+
colors: array,
|
27
28
|
}
|
28
29
|
|
29
30
|
export default class BarGraph extends React.Component<BarGraphProps> {
|
@@ -50,11 +51,13 @@ export default class BarGraph extends React.Component<BarGraphProps> {
|
|
50
51
|
legend,
|
51
52
|
height,
|
52
53
|
toggleLegendClick,
|
54
|
+
colors = [],
|
53
55
|
} = this.props
|
54
56
|
|
55
57
|
new pbChart(`.${className}`, {
|
56
58
|
axisTitle: axisTitle,
|
57
59
|
chartData: chartData,
|
60
|
+
colors: colors,
|
58
61
|
id: id,
|
59
62
|
pointStart: pointStart,
|
60
63
|
subtitle: subTitle,
|
@@ -21,6 +21,8 @@ module Playbook
|
|
21
21
|
prop :toggle_legend_click, type: Playbook::Props::Boolean,
|
22
22
|
default: true
|
23
23
|
prop :height
|
24
|
+
prop :colors, type: Playbook::Props::Array,
|
25
|
+
default: []
|
24
26
|
|
25
27
|
def chart_type
|
26
28
|
orientation == "horizontal" ? "bar" : "column"
|
@@ -42,6 +44,7 @@ module Playbook
|
|
42
44
|
legend: legend,
|
43
45
|
toggleLegendClick: toggle_legend_click,
|
44
46
|
height: height,
|
47
|
+
colors: colors,
|
45
48
|
}
|
46
49
|
end
|
47
50
|
|
@@ -0,0 +1,26 @@
|
|
1
|
+
<% data = [{
|
2
|
+
name: 'Installation',
|
3
|
+
data: [1475,200,3000,654,656]
|
4
|
+
}, {
|
5
|
+
name: 'Manufacturing',
|
6
|
+
data: [4434,524,2320,440,500]
|
7
|
+
}, {
|
8
|
+
name: 'Sales & Distribution',
|
9
|
+
data: [3387,743,1344,434,440,]
|
10
|
+
}, {
|
11
|
+
name: 'Project Development',
|
12
|
+
data: [3227,878,999,780,1000]
|
13
|
+
}, {
|
14
|
+
name: 'Other',
|
15
|
+
data: [1111,677,3245,500,200]
|
16
|
+
}] %>
|
17
|
+
|
18
|
+
<%= pb_rails("bar_graph", props: {
|
19
|
+
axis_title: 'Number of Employees',
|
20
|
+
chart_data: data,
|
21
|
+
id: "bar-colors",
|
22
|
+
y_axis_min: 0,
|
23
|
+
x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
|
24
|
+
title: 'Bar Graph with Custom Data Colors',
|
25
|
+
colors: ['data-4', 'data-5', 'data-6', 'data-7', 'data-8']
|
26
|
+
}) %>
|
@@ -0,0 +1,37 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import BarGraph from '../_bar_graph'
|
4
|
+
|
5
|
+
const chartData = [{
|
6
|
+
name: 'Installation',
|
7
|
+
data: [1475, 200, 3000, 654, 656],
|
8
|
+
}, {
|
9
|
+
name: 'Manufacturing',
|
10
|
+
data: [4434, 524, 2320, 440, 500],
|
11
|
+
}, {
|
12
|
+
name: 'Sales & Distribution',
|
13
|
+
data: [3387, 743, 1344, 434, 440],
|
14
|
+
}, {
|
15
|
+
name: 'Project Development',
|
16
|
+
data: [3227, 878, 999, 780, 1000],
|
17
|
+
}, {
|
18
|
+
name: 'Other',
|
19
|
+
data: [1111, 677, 3245, 500, 200],
|
20
|
+
}]
|
21
|
+
|
22
|
+
const BarGraphColors = (props) => (
|
23
|
+
<div>
|
24
|
+
<BarGraph
|
25
|
+
axisTitle="Number of Employees"
|
26
|
+
chartData={chartData}
|
27
|
+
colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']}
|
28
|
+
id="bar-colors"
|
29
|
+
title="Bar Graph with Custom Data Colors"
|
30
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
|
31
|
+
yAxisMin={0}
|
32
|
+
{...props}
|
33
|
+
/>
|
34
|
+
</div>
|
35
|
+
)
|
36
|
+
|
37
|
+
export default BarGraphColors
|
@@ -6,6 +6,7 @@ examples:
|
|
6
6
|
- bar_graph_legend_non_clickable: Legend Non Clickable
|
7
7
|
- bar_graph_height: Height
|
8
8
|
- bar_graph_spline: Spline
|
9
|
+
- bar_graph_colors: Color Overrides
|
9
10
|
|
10
11
|
|
11
12
|
react:
|
@@ -14,3 +15,4 @@ examples:
|
|
14
15
|
- bar_graph_legend_non_clickable: Legend Non Clickable
|
15
16
|
- bar_graph_height: Height
|
16
17
|
- bar_graph_spline: Spline
|
18
|
+
- bar_graph_colors: Color Overrides
|
@@ -3,3 +3,4 @@ export { default as BarGraphLegend } from './_bar_graph_legend.jsx'
|
|
3
3
|
export { default as BarGraphLegendNonClickable } from './_bar_graph_legend_non_clickable.jsx'
|
4
4
|
export { default as BarGraphHeight } from './_bar_graph_height.jsx'
|
5
5
|
export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
|
6
|
+
export { default as BarGraphColors } from './_bar_graph_colors.jsx'
|
@@ -15,13 +15,15 @@ type CaptionProps = {
|
|
15
15
|
tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",
|
16
16
|
text?: string,
|
17
17
|
variant?: null | "link",
|
18
|
-
|
18
|
+
color?: "default" | "link" | "light",
|
19
|
+
};
|
19
20
|
|
20
21
|
const Caption = (props: CaptionProps) => {
|
21
22
|
const {
|
22
23
|
aria = {},
|
23
24
|
className,
|
24
25
|
children,
|
26
|
+
color,
|
25
27
|
data = {},
|
26
28
|
id,
|
27
29
|
size = 'md',
|
@@ -29,15 +31,26 @@ const Caption = (props: CaptionProps) => {
|
|
29
31
|
text,
|
30
32
|
variant = null,
|
31
33
|
} = props
|
32
|
-
const tagOptions = [
|
34
|
+
const tagOptions = [
|
35
|
+
'h1',
|
36
|
+
'h2',
|
37
|
+
'h3',
|
38
|
+
'h4',
|
39
|
+
'h5',
|
40
|
+
'h6',
|
41
|
+
'p',
|
42
|
+
'span',
|
43
|
+
'div',
|
44
|
+
'caption',
|
45
|
+
]
|
33
46
|
const Tag = tagOptions.includes(tag) ? tag : 'div'
|
34
47
|
|
35
48
|
const ariaProps = buildAriaProps(aria)
|
36
49
|
const dataProps = buildDataProps(data)
|
37
50
|
const css = classnames(
|
38
|
-
buildCss('pb_caption_kit', size, variant),
|
51
|
+
buildCss('pb_caption_kit', size, variant, color),
|
39
52
|
globalProps(props),
|
40
|
-
className
|
53
|
+
className,
|
41
54
|
)
|
42
55
|
|
43
56
|
return (
|
@@ -1,19 +1,36 @@
|
|
1
|
+
@import "../tokens/colors";
|
1
2
|
@import "caption_mixin";
|
2
3
|
|
3
|
-
[class^=pb_caption_kit] {
|
4
|
+
[class^="pb_caption_kit"] {
|
4
5
|
@include caption;
|
5
6
|
|
6
|
-
&[class^=pb_caption_kit_lg] {
|
7
|
+
&[class^="pb_caption_kit_lg"] {
|
7
8
|
@include caption_lg;
|
8
9
|
}
|
9
10
|
|
10
|
-
&[class^=pb_caption_kit_xs] {
|
11
|
+
&[class^="pb_caption_kit_xs"] {
|
11
12
|
@include caption_xs;
|
12
|
-
&[class*=_link]
|
13
|
-
color: $primary;
|
14
|
-
|
13
|
+
&[class*="_link"] {
|
14
|
+
color: $primary;}
|
15
|
+
}
|
16
|
+
|
17
|
+
&[class*="light"] {
|
18
|
+
color: $text_lt_light;
|
19
|
+
}
|
20
|
+
|
21
|
+
&[class*="default"] {
|
22
|
+
color: $text_lt_default;
|
15
23
|
}
|
16
|
-
|
17
|
-
|
24
|
+
|
25
|
+
&[class*="link"] {
|
26
|
+
color: $primary;
|
27
|
+
}
|
28
|
+
|
29
|
+
&[class*="dark"] {
|
30
|
+
@each $dark_color_name, $dark_color_value in $pb_dark_caption_colors {
|
31
|
+
&[class*="_#{$dark_color_name}"][class*="dark"] {
|
32
|
+
@include caption_color($dark_color_value);
|
33
|
+
}
|
34
|
+
}
|
18
35
|
}
|
19
36
|
}
|
@@ -1,6 +1,19 @@
|
|
1
1
|
@import "../tokens/colors";
|
2
2
|
@import "../tokens/typography";
|
3
3
|
|
4
|
+
$pb_caption_colors: (
|
5
|
+
default: $text_lt_default,
|
6
|
+
light: $text_lt_light,
|
7
|
+
link: $primary-action,
|
8
|
+
);
|
9
|
+
|
10
|
+
$pb_dark_caption_colors: (
|
11
|
+
default: #fff,
|
12
|
+
light: $text_dk_light,
|
13
|
+
link: $primary-action,
|
14
|
+
);
|
15
|
+
|
16
|
+
|
4
17
|
@mixin caption($font_size: $font_smaller, $font_weight: $bold) {
|
5
18
|
font-weight: $font_weight;
|
6
19
|
color: $text_lt_light;
|
@@ -9,6 +22,10 @@
|
|
9
22
|
letter-spacing: $lspace_looser;
|
10
23
|
}
|
11
24
|
|
25
|
+
@mixin caption_color($color: $text_lt_light) {
|
26
|
+
color: $color;
|
27
|
+
}
|
28
|
+
|
12
29
|
@mixin caption_lg {
|
13
30
|
@include caption($font_large, $regular);
|
14
31
|
}
|
@@ -14,8 +14,12 @@ module Playbook
|
|
14
14
|
values: [nil, "link"],
|
15
15
|
default: nil
|
16
16
|
|
17
|
+
prop :color, type: Playbook::Props::Enum,
|
18
|
+
values: [nil, "light", "default", "link"],
|
19
|
+
default: nil
|
20
|
+
|
17
21
|
def classname
|
18
|
-
generate_classname("pb_caption_kit", size, variant)
|
22
|
+
generate_classname("pb_caption_kit", size, variant, color)
|
19
23
|
end
|
20
24
|
end
|
21
25
|
end
|
@@ -0,0 +1,27 @@
|
|
1
|
+
|
2
|
+
import React from 'react'
|
3
|
+
import Caption from '../_caption'
|
4
|
+
|
5
|
+
const CaptionExample = (props) => {
|
6
|
+
return (
|
7
|
+
<div>
|
8
|
+
<Caption
|
9
|
+
color="default"
|
10
|
+
text="text default"
|
11
|
+
{...props}
|
12
|
+
/>
|
13
|
+
<Caption
|
14
|
+
color="light"
|
15
|
+
text="text light"
|
16
|
+
{...props}
|
17
|
+
/>
|
18
|
+
<Caption
|
19
|
+
color="link"
|
20
|
+
text="text link"
|
21
|
+
{...props}
|
22
|
+
/>
|
23
|
+
</div>
|
24
|
+
)
|
25
|
+
}
|
26
|
+
|
27
|
+
export default CaptionExample
|
@@ -0,0 +1 @@
|
|
1
|
+
The above examples accept different prop values for color. Those can be `default`,`link` and `light`. Passing the `light` color prop is optional as it will apply this color when no prop is being passed. The same applies to any of the variations on the Caption kit.
|
@@ -1,7 +1,10 @@
|
|
1
1
|
examples:
|
2
2
|
rails:
|
3
|
-
|
4
|
-
|
3
|
+
- caption_light: Default
|
4
|
+
- caption_block: Block
|
5
|
+
- caption_example: Color Variations
|
6
|
+
|
5
7
|
react:
|
6
|
-
|
7
|
-
|
8
|
+
- caption_light: Default
|
9
|
+
- caption_block: Block
|
10
|
+
- caption_example: Color Variations
|
@@ -20,7 +20,6 @@ type CardPropTypes = {
|
|
20
20
|
},
|
21
21
|
padding?: string,
|
22
22
|
selected?: boolean,
|
23
|
-
shadow?: "none" | "deep" | "deeper" | "deepest",
|
24
23
|
tag?: "div" | "section" | "footer" | "header" | "article" | "aside" | "main" | "nav",
|
25
24
|
}
|
26
25
|
|
@@ -75,14 +74,13 @@ const Card = (props: CardPropTypes) => {
|
|
75
74
|
data = {},
|
76
75
|
highlight = {},
|
77
76
|
selected = false,
|
78
|
-
shadow = 'none',
|
79
77
|
tag = 'div',
|
80
78
|
padding = 'md',
|
81
79
|
} = props
|
82
80
|
const borderCSS = borderNone == true ? 'border_none' : ''
|
83
81
|
const selectedCSS = selected == true ? 'selected' : 'deselected'
|
84
82
|
const backgroundCSS = background == 'none' ? '' : `background_${background}`
|
85
|
-
const cardCss = buildCss('pb_card_kit', selectedCSS,
|
83
|
+
const cardCss = buildCss('pb_card_kit', selectedCSS, borderCSS, `border_radius_${borderRadius}`, backgroundCSS, {
|
86
84
|
[`highlight_${highlight.position}`]: highlight.position,
|
87
85
|
[`highlight_${highlight.color}`]: highlight.color,
|
88
86
|
})
|
@@ -11,14 +11,7 @@ $pb_card_highlight_colors: map-merge(map-merge($status_colors, $product_colors),
|
|
11
11
|
$pb_card_highlight_size: 4px;
|
12
12
|
$pb_card_header_colors: map-merge($category_colors, $product_colors);
|
13
13
|
$pb_card_header_border_radius: $border_rad_heavy;
|
14
|
-
|
15
|
-
none: 0,
|
16
|
-
xs: $space_xs,
|
17
|
-
sm: $space_sm,
|
18
|
-
md: $space_md,
|
19
|
-
lg: $space_lg,
|
20
|
-
xl: $space_xl,
|
21
|
-
);
|
14
|
+
|
22
15
|
$additional_colors: (
|
23
16
|
"dark": $bg_dark,
|
24
17
|
"light": $bg_light,
|
@@ -4,9 +4,6 @@ module Playbook
|
|
4
4
|
module PbCard
|
5
5
|
class Card < Playbook::KitBase
|
6
6
|
prop :selected, type: Playbook::Props::Boolean, default: false
|
7
|
-
prop :shadow, type: Playbook::Props::Enum,
|
8
|
-
values: %w[none deep deeper deepest],
|
9
|
-
default: "none"
|
10
7
|
prop :highlight, type: Playbook::Props::Hash,
|
11
8
|
default: {}
|
12
9
|
prop :tag, type: Playbook::Props::Enum,
|
@@ -24,7 +21,6 @@ module Playbook
|
|
24
21
|
def classname
|
25
22
|
generate_classname("pb_card_kit",
|
26
23
|
selected_class,
|
27
|
-
shadow_class,
|
28
24
|
border_class,
|
29
25
|
border_radius_class,
|
30
26
|
background_class,
|
@@ -46,10 +42,6 @@ module Playbook
|
|
46
42
|
selected ? "selected" : "deselected"
|
47
43
|
end
|
48
44
|
|
49
|
-
def shadow_class
|
50
|
-
shadow != "none" ? "shadow_#{shadow}" : nil
|
51
|
-
end
|
52
|
-
|
53
45
|
def highlight_position_class
|
54
46
|
highlight[:position].present? ? "highlight_#{highlight[:position]}" : nil
|
55
47
|
end
|
@@ -18,6 +18,7 @@ type CircleChartProps = {
|
|
18
18
|
dataLabelHtml: string,
|
19
19
|
dataLabels: boolean,
|
20
20
|
headerFormat: string,
|
21
|
+
height?: string,
|
21
22
|
id?: string,
|
22
23
|
innerSize: "sm" | "md" | "lg" | "none",
|
23
24
|
legend: boolean,
|
@@ -43,6 +44,7 @@ const CircleChart = (props: CircleChartProps) => {
|
|
43
44
|
dataLabelHtml = '<div>{point.name}</div>',
|
44
45
|
dataLabels = false,
|
45
46
|
headerFormat = null,
|
47
|
+
height,
|
46
48
|
id,
|
47
49
|
innerSize = 'md',
|
48
50
|
legend = false,
|
@@ -85,6 +87,7 @@ const CircleChart = (props: CircleChartProps) => {
|
|
85
87
|
dataLabelHtml,
|
86
88
|
dataLabels,
|
87
89
|
headerFormat,
|
90
|
+
height: height,
|
88
91
|
tooltipHtml,
|
89
92
|
useHTML: useHtml,
|
90
93
|
minPointSize,
|
@@ -1,5 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
+
# rubocop:disable Style/HashLikeCase
|
4
|
+
|
3
5
|
module Playbook
|
4
6
|
module PbCircleChart
|
5
7
|
class CircleChart < Playbook::KitBase
|
@@ -25,6 +27,7 @@ module Playbook
|
|
25
27
|
prop :use_html, type: Playbook::Props::Boolean, default: false
|
26
28
|
prop :legend, type: Playbook::Props::Boolean, default: false
|
27
29
|
prop :title, default: ""
|
30
|
+
prop :height
|
28
31
|
prop :rounded, type: Playbook::Props::Boolean, default: false
|
29
32
|
prop :colors, type: Playbook::Props::Array,
|
30
33
|
default: []
|
@@ -67,6 +70,7 @@ module Playbook
|
|
67
70
|
borderWidth: rounded_border_width,
|
68
71
|
chartData: chart_data_formatted,
|
69
72
|
title: title,
|
73
|
+
height: height,
|
70
74
|
type: chart_type,
|
71
75
|
showInLegend: legend,
|
72
76
|
dataLabelHtml: data_label_html,
|
@@ -88,3 +92,5 @@ module Playbook
|
|
88
92
|
end
|
89
93
|
end
|
90
94
|
end
|
95
|
+
|
96
|
+
# rubocop:enable Style/HashLikeCase
|
@@ -1,5 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
+
# rubocop:disable Style/HashLikeCase
|
4
|
+
|
3
5
|
module Playbook
|
4
6
|
module PbFixedConfirmationToast
|
5
7
|
class FixedConfirmationToast < Playbook::KitBase
|
@@ -53,3 +55,5 @@ module Playbook
|
|
53
55
|
end
|
54
56
|
end
|
55
57
|
end
|
58
|
+
|
59
|
+
# rubocop:enable Style/HashLikeCase
|
@@ -21,6 +21,7 @@ type FlexProps = {
|
|
21
21
|
rowGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
|
22
22
|
columnGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
|
23
23
|
wrap?: boolean,
|
24
|
+
alignSelf?: "start" | "end" | "center" | "stretch" | "none"
|
24
25
|
}
|
25
26
|
|
26
27
|
const Flex = (props: FlexProps) => {
|
@@ -40,6 +41,7 @@ const Flex = (props: FlexProps) => {
|
|
40
41
|
reverse = false,
|
41
42
|
vertical = 'top',
|
42
43
|
wrap = false,
|
44
|
+
alignSelf = 'none',
|
43
45
|
} = props
|
44
46
|
const orientationClass =
|
45
47
|
orientation !== undefined ? `orientation_${orientation}` : ''
|
@@ -53,6 +55,7 @@ const Flex = (props: FlexProps) => {
|
|
53
55
|
const columnGapClass = columnGap !== 'none' ? `columnGap_${columnGap}` : ''
|
54
56
|
const wrapClass = wrap === true ? 'wrap' : ''
|
55
57
|
const reverseClass = reverse === true ? 'reverse' : ''
|
58
|
+
const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
|
56
59
|
const dataProps = buildDataProps(data)
|
57
60
|
|
58
61
|
return (
|
@@ -70,6 +73,7 @@ const Flex = (props: FlexProps) => {
|
|
70
73
|
gapClass,
|
71
74
|
rowGapClass,
|
72
75
|
columnGapClass,
|
76
|
+
alignSelfClass
|
73
77
|
),
|
74
78
|
globalProps(props),
|
75
79
|
className
|
@@ -77,7 +77,6 @@ $gapTypes: (
|
|
77
77
|
align-items: flex-start;
|
78
78
|
}
|
79
79
|
|
80
|
-
|
81
80
|
&[class*=align_items_right],
|
82
81
|
&[class*=align_items_bottom],
|
83
82
|
&[class*=align_items_end] {
|
@@ -96,6 +95,23 @@ $gapTypes: (
|
|
96
95
|
align-items: baseline;
|
97
96
|
}
|
98
97
|
|
98
|
+
// Alignment: Align Self - Rails & React
|
99
|
+
&[class*=align_self_start] {
|
100
|
+
align-self: flex-start;
|
101
|
+
}
|
102
|
+
|
103
|
+
&[class*=align_self_end] {
|
104
|
+
align-self: flex-end;
|
105
|
+
}
|
106
|
+
|
107
|
+
&[class*=align_self_center] {
|
108
|
+
align-self: center;
|
109
|
+
}
|
110
|
+
|
111
|
+
&[class*=align_self_stretch] {
|
112
|
+
align-self: stretch;
|
113
|
+
}
|
114
|
+
|
99
115
|
// Spacing
|
100
116
|
&[class*=spacing_around],
|
101
117
|
&[class*=justify_content_around] {
|
@@ -12,21 +12,25 @@ type FlexItemPropTypes = {
|
|
12
12
|
className: string,
|
13
13
|
overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
|
14
14
|
order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
|
15
|
+
alignSelf?: "start" | "end" | "center" | "stretch",
|
16
|
+
displayFlex: boolean
|
15
17
|
}
|
16
18
|
|
17
19
|
const FlexItem = (props: FlexItemPropTypes) => {
|
18
|
-
const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none', order = 'none' } = props
|
20
|
+
const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none', order = 'none', alignSelf = null, displayFlex } = props
|
19
21
|
const growClass = grow === true ? 'grow' : ''
|
22
|
+
const displayFlexClass = displayFlex === true ? `display_flex_${displayFlex}` : ''
|
20
23
|
const flexClass = flex !== 'none' ? `flex_${flex}` : ''
|
21
24
|
const overflowClass = overflow ? `overflow_${overflow}` : ''
|
22
25
|
const shrinkClass = shrink === true ? 'shrink' : ''
|
26
|
+
const alignSelfClass = alignSelf ? `align_self_${alignSelf}` : ''
|
23
27
|
const fixedStyle =
|
24
28
|
fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
|
25
29
|
const orderClass = order !== 'none' ? `order_${order}` : null
|
26
30
|
|
27
31
|
return (
|
28
32
|
<div
|
29
|
-
className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass), overflowClass, orderClass, globalProps(props), className)}
|
33
|
+
className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), overflowClass, orderClass, alignSelfClass, globalProps(props), className)}
|
30
34
|
style={fixedStyle}
|
31
35
|
>
|
32
36
|
{children}
|
@@ -12,6 +12,28 @@
|
|
12
12
|
flex-shrink: 1;
|
13
13
|
}
|
14
14
|
|
15
|
+
// Display Flex - Rails & React
|
16
|
+
&[class*=display_flex] {
|
17
|
+
display: flex;
|
18
|
+
}
|
19
|
+
|
20
|
+
// Alignment: Align Self - Rails & React
|
21
|
+
&[class*=align_self_start] {
|
22
|
+
align-self: flex-start;
|
23
|
+
}
|
24
|
+
|
25
|
+
&[class*=align_self_end] {
|
26
|
+
align-self: flex-end;
|
27
|
+
}
|
28
|
+
|
29
|
+
&[class*=align_self_center] {
|
30
|
+
align-self: center;
|
31
|
+
}
|
32
|
+
|
33
|
+
&[class*=align_self_stretch] {
|
34
|
+
align-self: stretch;
|
35
|
+
}
|
36
|
+
|
15
37
|
//Order Items
|
16
38
|
@for $i from 0 through 12 {
|
17
39
|
&[class*=order_#{$i}]{
|