playbook_ui 10.16.0 → 10.19.0.pre.popover.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 +4 -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_body/_body.jsx +1 -1
- data/app/pb_kits/playbook/pb_body/_body_mixins.scss +2 -1
- data/app/pb_kits/playbook/pb_body/body.rb +1 -1
- data/app/pb_kits/playbook/pb_body/body.test.js +29 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb +5 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx +5 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_light.md +6 -0
- data/app/pb_kits/playbook/pb_button/_button.jsx +3 -3
- data/app/pb_kits/playbook/pb_button/_button.scss +17 -0
- data/app/pb_kits/playbook/pb_button/button.rb +6 -3
- data/app/pb_kits/playbook/pb_button/button.test.js +13 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_size.html.erb +3 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx +26 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_size.md +1 -0
- data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_caption/_caption.jsx +21 -8
- data/app/pb_kits/playbook/pb_caption/_caption.scss +14 -8
- data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +27 -0
- data/app/pb_kits/playbook/pb_caption/caption.rb +6 -4
- data/app/pb_kits/playbook/pb_caption/caption.test.js +29 -0
- data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.html.erb +3 -0
- data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx +25 -0
- data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.md +6 -0
- data/app/pb_kits/playbook/pb_caption/docs/example.yml +7 -4
- data/app/pb_kits/playbook/pb_caption/docs/index.js +1 -1
- 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_card/docs/_card_background.html.erb +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_content.html.erb +3 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_content.jsx +9 -2
- data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +4 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.md +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +3 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +13 -4
- 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_gauge/_gauge.jsx +3 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb +12 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx +19 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.md +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_gauge/gauge.rb +2 -0
- data/app/pb_kits/playbook/pb_icon/icon.rb +4 -0
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +2 -2
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.jsx +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md +1 -0
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +1 -1
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +2 -0
- data/app/pb_kits/playbook/pb_image/_image.jsx +4 -1
- data/app/pb_kits/playbook/pb_image/_image.scss +24 -8
- data/app/pb_kits/playbook/pb_image/docs/_transition_image.html.erb +54 -0
- data/app/pb_kits/playbook/pb_image/docs/_transition_image.jsx +77 -0
- data/app/pb_kits/playbook/pb_image/docs/_transition_image.md +1 -0
- data/app/pb_kits/playbook/pb_image/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_image/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_image/image.html.erb +1 -1
- data/app/pb_kits/playbook/pb_image/image.rb +8 -1
- data/app/pb_kits/playbook/pb_image/image.test.js +9 -4
- 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_nav/_bold_mixin.scss +22 -0
- data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +17 -1
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +9 -2
- data/app/pb_kits/playbook/pb_nav/docs/_bold_horizontal_nav.html.erb +6 -0
- data/app/pb_kits/playbook/pb_nav/docs/_bold_horizontal_nav.jsx +39 -0
- data/app/pb_kits/playbook/pb_nav/docs/_bold_vertical_nav.html.erb +6 -0
- data/app/pb_kits/playbook/pb_nav/docs/_bold_vertical_nav.jsx +39 -0
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.html.erb +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/_subtle_nav.html.erb +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_nav/nav.rb +1 -1
- data/app/pb_kits/playbook/pb_popover/_popover.jsx +2 -4
- data/app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb +7 -7
- data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx +3 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx +1 -0
- data/app/pb_kits/playbook/pb_popover/index.js +4 -9
- data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -1
- 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.scss +63 -14
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +21 -2
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +12 -3
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -0
- data/app/pb_kits/playbook/pb_title/_title.jsx +6 -4
- data/app/pb_kits/playbook/pb_title/_title.scss +5 -5
- data/app/pb_kits/playbook/pb_title/_title_mixin.scss +17 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb +4 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_colors.jsx +37 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_colors.md +6 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light.html.erb +4 -1
- data/app/pb_kits/playbook/pb_title/docs/_title_light.md +3 -0
- data/app/pb_kits/playbook/pb_title/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_title/docs/index.js +1 -1
- data/app/pb_kits/playbook/pb_title/title.html.erb +4 -2
- data/app/pb_kits/playbook/pb_title/title.rb +5 -4
- data/app/pb_kits/playbook/pb_title/title.test.js +29 -0
- data/app/pb_kits/playbook/plugins/pb_chart.js +16 -24
- data/app/pb_kits/playbook/tokens/_colors.scss +3 -1
- data/app/pb_kits/playbook/utilities/_cursor.scss +3 -0
- data/app/pb_kits/playbook/utilities/_display.scss +23 -0
- data/app/pb_kits/playbook/utilities/_line_height.scss +11 -0
- data/app/pb_kits/playbook/utilities/_shadow.scss +11 -0
- data/app/pb_kits/playbook/utilities/globalProps.js +25 -1
- data/lib/playbook/classnames.rb +4 -0
- data/lib/playbook/cursor.rb +29 -0
- data/lib/playbook/display.rb +29 -0
- data/lib/playbook/engine.rb +0 -1
- data/lib/playbook/kit_base.rb +8 -0
- data/lib/playbook/line_height.rb +29 -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 +3 -0
- metadata +62 -23
- data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.html.erb +0 -1
- data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.jsx +0 -17
- data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.md +0 -3
- data/app/pb_kits/playbook/pb_title/docs/_title_variants.html.erb +0 -1
- data/app/pb_kits/playbook/pb_title/docs/_title_variants.jsx +0 -19
- data/app/pb_kits/playbook/pb_title/docs/_title_variants.md +0 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: '090e97cafaabff3f06f58cca0ce4a1416d09f6baea9f828e51c93059f279f292'
|
4
|
+
data.tar.gz: 580359a862a8567240f9759e2ab80b708688d528ddc054789e6f658352cc21e1
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 85c349d66339b000e6d7cb9077621b9e8d40852538d6e9eb7111947fabd0df9e11b3d2448a67609727c9fb915393ddf903140f43375be0947d5d749ffb6fb85a
|
7
|
+
data.tar.gz: b3774dfcbf0315c3b2fde5e145e7e0e33c3ceb23e5371aa01120ccca6f7294e7883e1f19c89dc73cdc3af2664d7b3484f0d9de5835119e862424902ee153bbc9
|
@@ -93,6 +93,10 @@
|
|
93
93
|
@import 'pb_walkthrough/walkthrough';
|
94
94
|
@import 'pb_weekday_stacked/weekday_stacked';
|
95
95
|
@import './utilities/spacing';
|
96
|
+
@import './utilities/cursor';
|
96
97
|
@import './utilities/max_width';
|
97
98
|
@import './utilities/positioning';
|
98
99
|
@import './utilities/number_spacing';
|
100
|
+
@import './utilities/shadow';
|
101
|
+
@import './utilities/line_height';
|
102
|
+
@import './utilities/display';
|
@@ -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'
|
@@ -12,7 +12,7 @@ type BodyProps = {
|
|
12
12
|
aria?: object,
|
13
13
|
className?: string,
|
14
14
|
children?: array<React.ReactChild>,
|
15
|
-
color?: 'default' | 'light' | 'lighter',
|
15
|
+
color?: 'default' | 'light' | 'lighter' | 'link',
|
16
16
|
dark?: boolean,
|
17
17
|
data?: object,
|
18
18
|
highlightedText?: array<string>,
|
@@ -6,6 +6,7 @@ $pb_body_colors: (
|
|
6
6
|
default: $text_lt_default,
|
7
7
|
light: $text_lt_light,
|
8
8
|
lighter: $text_lt_lighter,
|
9
|
+
link: $primary,
|
9
10
|
);
|
10
11
|
|
11
12
|
$pb_dark_body_colors: (
|
@@ -63,4 +64,4 @@ $pb_body_status: (
|
|
63
64
|
|
64
65
|
@mixin pb_body_positive {
|
65
66
|
@include pb_body($success);
|
66
|
-
}
|
67
|
+
}
|
@@ -4,7 +4,7 @@ module Playbook
|
|
4
4
|
module PbBody
|
5
5
|
class Body < Playbook::KitBase
|
6
6
|
prop :color, type: Playbook::Props::Enum,
|
7
|
-
values: %w[default light lighter],
|
7
|
+
values: %w[default light lighter link],
|
8
8
|
default: "default"
|
9
9
|
prop :status, type: Playbook::Props::Enum,
|
10
10
|
values: %w[neutral negative positive],
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
3
|
+
|
4
|
+
import Body from './_body'
|
5
|
+
|
6
|
+
test('returns namespaced class name', () => {
|
7
|
+
render(
|
8
|
+
<Body
|
9
|
+
data={{ testid: 'primary-test' }}
|
10
|
+
text="Test colors"
|
11
|
+
/>
|
12
|
+
)
|
13
|
+
|
14
|
+
const kit = screen.getByTestId('primary-test')
|
15
|
+
expect(kit).toHaveClass('pb_body_kit')
|
16
|
+
})
|
17
|
+
|
18
|
+
test('with colors', () => {
|
19
|
+
render(
|
20
|
+
<Body
|
21
|
+
color="success"
|
22
|
+
data={{ testid: 'primary-test' }}
|
23
|
+
text="Test colors"
|
24
|
+
/>
|
25
|
+
)
|
26
|
+
|
27
|
+
const kit = screen.getByTestId('primary-test')
|
28
|
+
expect(kit).toHaveClass('pb_body_kit_success')
|
29
|
+
})
|
@@ -0,0 +1,6 @@
|
|
1
|
+
##### Prop
|
2
|
+
This kit uses `default` color by default, and can be replaced with colors below:
|
3
|
+
|
4
|
+
* `light` `lighter` `success` `error` `link`
|
5
|
+
|
6
|
+
- These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it
|
@@ -22,7 +22,7 @@ type ButtonPropTypes = {
|
|
22
22
|
loading?: boolean,
|
23
23
|
newWindow?: boolean,
|
24
24
|
onClick?: EventHandler,
|
25
|
-
size
|
25
|
+
size?: 'sm' | 'md' | 'lg',
|
26
26
|
text?: string,
|
27
27
|
type: 'inline' | null,
|
28
28
|
htmlType: string | 'button',
|
@@ -36,16 +36,16 @@ const buttonClassName = (props: ButtonPropTypes) => {
|
|
36
36
|
disabled = false,
|
37
37
|
fullWidth = false,
|
38
38
|
loading = false,
|
39
|
-
size = null,
|
40
39
|
type = 'inline',
|
41
40
|
variant = 'primary',
|
41
|
+
size = null,
|
42
42
|
} = props
|
43
43
|
|
44
44
|
let className = 'pb_button_kit'
|
45
45
|
|
46
|
+
className += `${size !== null ? `_${size}` : ''}`
|
46
47
|
className += `${variant !== null ? `_${variant}` : ''}`
|
47
48
|
className += `${type !== null ? `_${type}` : ''}`
|
48
|
-
className += `${size !== null ? `_${size}` : ''}`
|
49
49
|
className += `${fullWidth ? '_block' : ''}`
|
50
50
|
className += disabled ? '_disabled' : '_enabled'
|
51
51
|
className += loading ? '_loading' : ''
|
@@ -1,7 +1,24 @@
|
|
1
1
|
@import "./button_mixins";
|
2
2
|
|
3
|
+
$pb_button_sizes: (
|
4
|
+
"sm": 0.75rem,
|
5
|
+
"md": 0.875rem,
|
6
|
+
"lg": 1.125rem,
|
7
|
+
);
|
8
|
+
|
3
9
|
[class^=pb_button_kit]{
|
4
10
|
@include pb_button;
|
11
|
+
// Size =================
|
12
|
+
@each $name, $size in $pb_button_sizes {
|
13
|
+
&[class*=_#{$name}] {
|
14
|
+
font-size: $size;
|
15
|
+
padding: calc(#{$size} / 2) calc(#{$size} * 2.42) !important;
|
16
|
+
}
|
17
|
+
}
|
18
|
+
&[class*=_sm] {
|
19
|
+
min-height: 0;
|
20
|
+
}
|
21
|
+
|
5
22
|
// Variants =================
|
6
23
|
&[class*=_primary] {
|
7
24
|
@include pb_button_primary;
|
@@ -18,6 +18,9 @@ module Playbook
|
|
18
18
|
prop :text
|
19
19
|
prop :type
|
20
20
|
prop :value
|
21
|
+
prop :size, type: Playbook::Props::Enum,
|
22
|
+
values: ["sm", "md", "lg", nil],
|
23
|
+
default: nil
|
21
24
|
|
22
25
|
def options
|
23
26
|
{
|
@@ -44,12 +47,12 @@ module Playbook
|
|
44
47
|
link ? "a" : "button"
|
45
48
|
end
|
46
49
|
|
47
|
-
private
|
48
|
-
|
49
50
|
def classname
|
50
|
-
generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
|
51
|
+
generate_classname("pb_button_kit", size, variant, full_width_class, disabled_class, loading_class)
|
51
52
|
end
|
52
53
|
|
54
|
+
private
|
55
|
+
|
53
56
|
def disabled_class
|
54
57
|
disabled ? "disabled" : "enabled"
|
55
58
|
end
|
@@ -89,3 +89,16 @@ test('click event', async () => {
|
|
89
89
|
|
90
90
|
expect(screen.getByText('clicked button!')).toBeInTheDocument()
|
91
91
|
})
|
92
|
+
|
93
|
+
test('size prop', () => {
|
94
|
+
render(
|
95
|
+
<Button
|
96
|
+
data={{ testid: 'size-test' }}
|
97
|
+
size="sm"
|
98
|
+
/>
|
99
|
+
)
|
100
|
+
|
101
|
+
const kit = screen.getByTestId('size-test')
|
102
|
+
|
103
|
+
expect(kit).toHaveClass('pb_button_kit_sm_primary_inline_enabled')
|
104
|
+
})
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Button } from '../../'
|
3
|
+
|
4
|
+
const ButtonSize = (props) => (
|
5
|
+
<div>
|
6
|
+
<Button
|
7
|
+
size="sm"
|
8
|
+
text="Button sm size"
|
9
|
+
{...props}
|
10
|
+
/>
|
11
|
+
{' '}
|
12
|
+
<Button
|
13
|
+
size="md"
|
14
|
+
text="Button md size"
|
15
|
+
{...props}
|
16
|
+
/>
|
17
|
+
{' '}
|
18
|
+
<Button
|
19
|
+
size="lg"
|
20
|
+
text="Button lg size"
|
21
|
+
{...props}
|
22
|
+
/>
|
23
|
+
</div>
|
24
|
+
)
|
25
|
+
|
26
|
+
export default ButtonSize
|
@@ -0,0 +1 @@
|
|
1
|
+
By default button has the `md` size style, even if you don't explicitly pass a size prop.
|
@@ -7,6 +7,7 @@ examples:
|
|
7
7
|
- button_block_content: Button Block Content
|
8
8
|
- button_accessibility: Button Accessibility Options
|
9
9
|
- button_options: Button Additional Options
|
10
|
+
- button_size: Button Size
|
10
11
|
react:
|
11
12
|
- button_default: Button Variants
|
12
13
|
- button_full_width: Button Full Width
|
@@ -15,3 +16,4 @@ examples:
|
|
15
16
|
- button_block_content: Button Block Content
|
16
17
|
- button_accessibility: Button Accessibility Options
|
17
18
|
- button_options: Button Additional Options (onClick)
|
19
|
+
- button_size: Button Size
|
@@ -5,3 +5,4 @@ export { default as ButtonLoading } from './_button_loading.jsx'
|
|
5
5
|
export { default as ButtonBlockContent } from './_button_block_content.jsx'
|
6
6
|
export { default as ButtonAccessibility } from './_button_accessibility.jsx'
|
7
7
|
export { default as ButtonOptions } from './_button_options.jsx'
|
8
|
+
export { default as ButtonSize } from './_button_size.jsx'
|
@@ -3,41 +3,54 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
5
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
6
|
-
import { globalProps } from '../utilities/globalProps.js'
|
6
|
+
import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
|
7
7
|
|
8
8
|
type CaptionProps = {
|
9
9
|
aria?: object,
|
10
|
-
className?: string,
|
11
10
|
children: array<React.ReactNode> | React.ReactNode,
|
11
|
+
className?: string,
|
12
|
+
color?: "default" | "light" | "lighter" | "success" | "error" | "link",
|
12
13
|
data?: object,
|
13
14
|
id?: string,
|
14
15
|
size?: "xs" | "sm" | "md" | "lg" | "xl",
|
15
16
|
tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",
|
16
17
|
text?: string,
|
17
18
|
variant?: null | "link",
|
18
|
-
}
|
19
|
+
};
|
19
20
|
|
20
21
|
const Caption = (props: CaptionProps) => {
|
22
|
+
if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
|
21
23
|
const {
|
22
24
|
aria = {},
|
23
|
-
className,
|
24
25
|
children,
|
26
|
+
className,
|
27
|
+
color,
|
25
28
|
data = {},
|
26
29
|
id,
|
27
30
|
size = 'md',
|
28
31
|
tag = 'div',
|
29
32
|
text,
|
30
|
-
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,
|
51
|
+
buildCss('pb_caption_kit', size, color),
|
39
52
|
globalProps(props),
|
40
|
-
className
|
53
|
+
className,
|
41
54
|
)
|
42
55
|
|
43
56
|
return (
|
@@ -1,19 +1,25 @@
|
|
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
|
-
}
|
15
13
|
}
|
16
|
-
|
17
|
-
|
14
|
+
|
15
|
+
@include pb_caption_kit_colors;
|
16
|
+
|
17
|
+
&.dark {
|
18
|
+
@include caption_dark;
|
19
|
+
@each $name, $color in $pb_dark_caption_colors {
|
20
|
+
&[class*="_#{$name}"] {
|
21
|
+
color: $color;
|
22
|
+
}
|
23
|
+
}
|
18
24
|
}
|
19
25
|
}
|
@@ -1,6 +1,22 @@
|
|
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,
|
8
|
+
lighter: $text_lt_lighter,
|
9
|
+
success: $success,
|
10
|
+
error: $error,
|
11
|
+
);
|
12
|
+
|
13
|
+
$pb_dark_caption_colors: (
|
14
|
+
default: $text_dk_default,
|
15
|
+
light: $text_dk_light,
|
16
|
+
link: $primary,
|
17
|
+
);
|
18
|
+
|
19
|
+
|
4
20
|
@mixin caption($font_size: $font_smaller, $font_weight: $bold) {
|
5
21
|
font-weight: $font_weight;
|
6
22
|
color: $text_lt_light;
|
@@ -9,6 +25,10 @@
|
|
9
25
|
letter-spacing: $lspace_looser;
|
10
26
|
}
|
11
27
|
|
28
|
+
@mixin caption_color($color: $text_lt_light) {
|
29
|
+
color: $color;
|
30
|
+
}
|
31
|
+
|
12
32
|
@mixin caption_lg {
|
13
33
|
@include caption($font_large, $regular);
|
14
34
|
}
|
@@ -22,3 +42,10 @@
|
|
22
42
|
@mixin caption_dark {
|
23
43
|
color: $text_dk_light;
|
24
44
|
}
|
45
|
+
@mixin pb_caption_kit_colors {
|
46
|
+
@each $name, $color in $pb_caption_colors {
|
47
|
+
&[class*="#{$name}"] {
|
48
|
+
color: $color
|
49
|
+
}
|
50
|
+
}
|
51
|
+
}
|
@@ -10,12 +10,14 @@ module Playbook
|
|
10
10
|
values: %w[h1 h2 h3 h4 h5 h6 p span div caption],
|
11
11
|
default: "div"
|
12
12
|
prop :text
|
13
|
-
prop :variant,
|
14
|
-
|
15
|
-
|
13
|
+
prop :variant, deprecated: true
|
14
|
+
|
15
|
+
prop :color, type: Playbook::Props::Enum,
|
16
|
+
values: [nil, "default", "light", "lighter", "success", "error", "link"],
|
17
|
+
default: nil
|
16
18
|
|
17
19
|
def classname
|
18
|
-
generate_classname("pb_caption_kit", size,
|
20
|
+
generate_classname("pb_caption_kit", size, color)
|
19
21
|
end
|
20
22
|
end
|
21
23
|
end
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
3
|
+
|
4
|
+
import Caption from './_caption'
|
5
|
+
|
6
|
+
test('returns namespaced class name', () => {
|
7
|
+
render(
|
8
|
+
<Caption
|
9
|
+
data={{ testid: 'primary-test' }}
|
10
|
+
text="Test colors"
|
11
|
+
/>
|
12
|
+
)
|
13
|
+
|
14
|
+
const kit = screen.getByTestId('primary-test')
|
15
|
+
expect(kit).toHaveClass('pb_caption_kit_md')
|
16
|
+
})
|
17
|
+
|
18
|
+
test('with colors', () => {
|
19
|
+
render(
|
20
|
+
<Caption
|
21
|
+
color="success"
|
22
|
+
data={{ testid: 'primary-test' }}
|
23
|
+
text="Test colors"
|
24
|
+
/>
|
25
|
+
)
|
26
|
+
|
27
|
+
const kit = screen.getByTestId('primary-test')
|
28
|
+
expect(kit).toHaveClass('pb_caption_kit_md_success')
|
29
|
+
})
|
@@ -0,0 +1,25 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Caption } from '../../'
|
3
|
+
|
4
|
+
const CaptionColors = (props) => {
|
5
|
+
return (
|
6
|
+
<div>
|
7
|
+
<Caption
|
8
|
+
text="Test colors"
|
9
|
+
{...props}
|
10
|
+
/>
|
11
|
+
<Caption
|
12
|
+
color="success"
|
13
|
+
text="Test colors"
|
14
|
+
{...props}
|
15
|
+
/>
|
16
|
+
<Caption
|
17
|
+
color="link"
|
18
|
+
text="Test colors"
|
19
|
+
{...props}
|
20
|
+
/>
|
21
|
+
</div>
|
22
|
+
)
|
23
|
+
}
|
24
|
+
|
25
|
+
export default CaptionColors
|
@@ -0,0 +1,6 @@
|
|
1
|
+
##### Prop
|
2
|
+
Caption kit will use `light` color by default. Other available colors are:
|
3
|
+
|
4
|
+
* `default` `lighter` `success` `error` `link`
|
5
|
+
|
6
|
+
- These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it
|