playbook_ui 10.15.1.pre.alpha.rubocop.deps → 10.18.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 +3 -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_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 +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_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.jsx +3 -0
- data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +6 -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_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/pb_title/docs/_title_light.html.erb +4 -1
- data/app/pb_kits/playbook/pb_title/title.html.erb +4 -2
- data/app/pb_kits/playbook/plugins/pb_chart.js +17 -25
- 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/_shadow.scss +11 -0
- data/app/pb_kits/playbook/utilities/globalProps.js +19 -1
- data/dist/reset.css +1 -60
- data/lib/playbook/classnames.rb +3 -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 +6 -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 +47 -17
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b6fbbfa10d2162c02d5c0e145411bc6c425b6c9d637e058797da617ac6249270
|
4
|
+
data.tar.gz: 2649996be5ab0d966b38f542b8db7a23b6d095a1043f8d93e1cf68fed3dfda29
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c512fa4a05695fbecddb4cc4e1c2df8b79b8021b18bc2676ed3ca9c4844a9fa6b0ca81182b73ce0db194ee8ea083cc4e65db8db98ef3a42d554b2017a98e4d0b
|
7
|
+
data.tar.gz: 18405cbcd539c6c0f6b17be09fe5362711a2c63bc93450d0534758c1fd48f34c8f04cef485ce333292f9d62fa9d4e475fc8534bbd095a314443886326b70a98c
|
@@ -93,6 +93,9 @@
|
|
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/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'
|
@@ -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'
|
@@ -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
|
@@ -5,9 +5,16 @@ import Card from '../_card'
|
|
5
5
|
const CardContent = (props) => {
|
6
6
|
return (
|
7
7
|
<div>
|
8
|
-
<Card
|
8
|
+
<Card
|
9
|
+
cursor="pointer"
|
10
|
+
{...props}
|
11
|
+
>
|
12
|
+
{'Card content'}
|
13
|
+
</Card>
|
9
14
|
<br />
|
10
|
-
<Card
|
15
|
+
<Card
|
16
|
+
{...props}
|
17
|
+
>
|
11
18
|
{`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.
|
12
19
|
|
13
20
|
Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.`}
|