playbook_ui 10.13.1 → 10.15.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/pb_background/_background.jsx +4 -3
- data/app/pb_kits/playbook/pb_background/_background.scss +4 -4
- data/app/pb_kits/playbook/pb_background/background.rb +1 -1
- data/app/pb_kits/playbook/pb_background/docs/_background_category.html.erb +23 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_category.jsx +119 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_category.md +1 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_status.html.erb +13 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_status.jsx +44 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_status.md +1 -0
- data/app/pb_kits/playbook/pb_background/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_background/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_background/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss +4 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.html.erb +20 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +30 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.md +2 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_card/_card.jsx +5 -3
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +16 -1
- data/app/pb_kits/playbook/pb_card/card.rb +11 -3
- data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +57 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +100 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_background.md +1 -0
- data/app/pb_kits/playbook/pb_card/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_card/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog.scss +1 -0
- data/app/pb_kits/playbook/pb_flex/_flex.jsx +1 -1
- data/app/pb_kits/playbook/pb_flex/_flex.scss +4 -2
- data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +4 -2
- data/app/pb_kits/playbook/pb_flex/_flex_item.scss +9 -0
- data/app/pb_kits/playbook/pb_flex/docs/_description.md +0 -6
- data/app/pb_kits/playbook/pb_flex/docs/_flex_align.md +1 -5
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item.html.erb +13 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item.md +5 -4
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +27 -1
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.md +12 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_justify.md +1 -5
- data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.md +1 -5
- data/app/pb_kits/playbook/pb_flex/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +13 -1
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx +3 -0
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +7 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb +1 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx +17 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.md +1 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb +1 -4
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +10 -17
- data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +6 -2
- data/app/pb_kits/playbook/pb_gauge/_gauge.scss +5 -1
- data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +1 -1
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.scss +3 -0
- data/app/pb_kits/playbook/pb_pill/_pill.jsx +3 -1
- data/app/pb_kits/playbook/pb_pill/_pill.scss +8 -0
- data/app/pb_kits/playbook/pb_pill/docs/_pill_default.html.erb +1 -45
- data/app/pb_kits/playbook/pb_pill/docs/_pill_default.jsx +3 -48
- data/app/pb_kits/playbook/pb_pill/docs/_pill_example.html.erb +1 -0
- data/app/pb_kits/playbook/pb_pill/docs/_pill_example.jsx +17 -0
- data/app/pb_kits/playbook/pb_pill/docs/_pill_example.md +1 -0
- data/app/pb_kits/playbook/pb_pill/docs/_pill_variants.html.erb +6 -0
- data/app/pb_kits/playbook/pb_pill/docs/_pill_variants.jsx +45 -0
- data/app/pb_kits/playbook/pb_pill/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_pill/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_pill/pill.rb +5 -2
- data/app/pb_kits/playbook/pb_popover/_popover.scss +2 -0
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +1 -0
- data/app/pb_kits/playbook/tokens/_border_radius.scss +0 -1
- data/app/pb_kits/playbook/utilities/_max_width.scss +10 -0
- data/lib/playbook/spacing.rb +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +39 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: faae90de5528b9f023fd6824aa39c518ce892c36c60a212e5e4f7638d56f84ce
|
4
|
+
data.tar.gz: bbd980bc0d205b346fa150aced925e080c8ac8d3239e5edbccb4d3c9c3d6f556
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 7df412eddb0717bb3166971a857cbc47df4d14f487eb34939e0e1a8e230dd95b101e19481b4eed793c5a5c01be6a65fdb1b57c7df288b65606a44c94c0f0ee92
|
7
|
+
data.tar.gz: 5b2dd670d04f69b59c7d6150b94dbfe547d7ef9ac39e7973489463de9759c8a81aa23af5a0e0867a85fd20ae2eedb3b60cbdf2a5370b8a470d5d35fed2c6bc91
|
@@ -7,7 +7,7 @@ import { globalProps } from '../utilities/globalProps.js'
|
|
7
7
|
|
8
8
|
type BackgroundProps = {
|
9
9
|
aria?: object,
|
10
|
-
backgroundColor?: 'gradient' | 'dark' | 'light' | 'white',
|
10
|
+
backgroundColor?: 'gradient' | 'dark' | 'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'category_1' | 'category_2' | 'category_3' | 'category_4' | 'category_5' | 'category_6' | 'category_7' | 'category_8' | 'category_9' | 'category_10' | 'category_11' | 'category_12' | 'category_13' | 'category_14' | 'category_15' | 'category_16' | 'category_17' | 'category_18' | 'category_19' | 'category_20' | 'category_21',
|
11
11
|
children?: array<React.ReactNode> | React.ReactNode,
|
12
12
|
className?: string,
|
13
13
|
data?: object,
|
@@ -31,6 +31,7 @@ const Background = (props: BackgroundProps) => {
|
|
31
31
|
|
32
32
|
const ariaProps = buildAriaProps(aria)
|
33
33
|
const dataProps = buildDataProps(data)
|
34
|
+
|
34
35
|
const classes = classnames(buildCss('pb_background_kit'), globalProps(props), `pb_background_color_${backgroundColor}`, className)
|
35
36
|
const Tag = `${tag}`
|
36
37
|
const backgroundStyle = {
|
@@ -42,19 +43,19 @@ const Background = (props: BackgroundProps) => {
|
|
42
43
|
<>
|
43
44
|
<If condition={imageUrl}>
|
44
45
|
<Tag
|
45
|
-
className={classes + 'lazyload blur_up'}
|
46
46
|
style={backgroundStyle}
|
47
47
|
{...ariaProps}
|
48
48
|
{...dataProps}
|
49
|
+
className={classes}
|
49
50
|
id={id}
|
50
51
|
>
|
51
52
|
{ children }
|
52
53
|
</Tag>
|
53
54
|
<Else />
|
54
55
|
<Tag
|
55
|
-
className={classes}
|
56
56
|
{...ariaProps}
|
57
57
|
{...dataProps}
|
58
|
+
className={classes}
|
58
59
|
id={id}
|
59
60
|
>
|
60
61
|
{ children }
|
@@ -1,12 +1,15 @@
|
|
1
1
|
@import "../tokens/colors";
|
2
2
|
|
3
|
-
$
|
3
|
+
$additional_colors: (
|
4
4
|
"gradient": linear-gradient(135deg, $gradient_start 0%, $gradient_end 100%),
|
5
5
|
"dark": $bg_dark,
|
6
6
|
"light": $bg_light,
|
7
7
|
"white": $white,
|
8
8
|
);
|
9
9
|
|
10
|
+
$merge_kits1: map-merge($status_colors, $category_colors);
|
11
|
+
$merge_kits2: map-merge($merge_kits1, $product_colors);
|
12
|
+
$background_colors: map-merge($additional_colors, $merge_kits2);
|
10
13
|
|
11
14
|
[class^=pb_background_kit] {
|
12
15
|
max-width: 100%;
|
@@ -29,7 +32,4 @@ $background_colors: (
|
|
29
32
|
-webkit-filter: blur(0);
|
30
33
|
filter: blur(0);
|
31
34
|
}
|
32
|
-
|
33
|
-
|
34
|
-
|
35
35
|
}
|
@@ -4,7 +4,7 @@ module Playbook
|
|
4
4
|
module PbBackground
|
5
5
|
class Background < Playbook::KitBase
|
6
6
|
prop :background_color, type: Playbook::Props::Enum,
|
7
|
-
values: %w[gradient dark light white],
|
7
|
+
values: %w[gradient dark light white success warning error info neutral primary category_1 category_2 category_3 category_4 category_5 category_6 category_7 category_8 category_9 category_10 category_11 category_12 category_13 category_14 category_15 category_16 category_17 category_18 category_19 category_20 category_21],
|
8
8
|
default: "light"
|
9
9
|
prop :image_url
|
10
10
|
|
@@ -0,0 +1,23 @@
|
|
1
|
+
<%= pb_rails("flex", props: {gap: "md", justify: "center", wrap: true}) do %>
|
2
|
+
<%= pb_rails("background", props: { background_color: "category_1", padding: "xl" }) do %> <% end %>
|
3
|
+
<%= pb_rails("background", props: { background_color: "category_2", padding: "xl" }) do %> <% end %>
|
4
|
+
<%= pb_rails("background", props: { background_color: "category_3", padding: "xl" }) do %> <% end %>
|
5
|
+
<%= pb_rails("background", props: { background_color: "category_4", padding: "xl" }) do %> <% end %>
|
6
|
+
<%= pb_rails("background", props: { background_color: "category_5", padding: "xl" }) do %> <% end %>
|
7
|
+
<%= pb_rails("background", props: { background_color: "category_6", padding: "xl" }) do %> <% end %>
|
8
|
+
<%= pb_rails("background", props: { background_color: "category_7", padding: "xl" }) do %> <% end %>
|
9
|
+
<%= pb_rails("background", props: { background_color: "category_8", padding: "xl" }) do %> <% end %>
|
10
|
+
<%= pb_rails("background", props: { background_color: "category_9", padding: "xl" }) do %> <% end %>
|
11
|
+
<%= pb_rails("background", props: { background_color: "category_10", padding: "xl" }) do %> <% end %>
|
12
|
+
<%= pb_rails("background", props: { background_color: "category_11", padding: "xl" }) do %> <% end %>
|
13
|
+
<%= pb_rails("background", props: { background_color: "category_12", padding: "xl" }) do %> <% end %>
|
14
|
+
<%= pb_rails("background", props: { background_color: "category_13", padding: "xl" }) do %> <% end %>
|
15
|
+
<%= pb_rails("background", props: { background_color: "category_14", padding: "xl" }) do %> <% end %>
|
16
|
+
<%= pb_rails("background", props: { background_color: "category_15", padding: "xl" }) do %> <% end %>
|
17
|
+
<%= pb_rails("background", props: { background_color: "category_16", padding: "xl" }) do %> <% end %>
|
18
|
+
<%= pb_rails("background", props: { background_color: "category_17", padding: "xl" }) do %> <% end %>
|
19
|
+
<%= pb_rails("background", props: { background_color: "category_18", padding: "xl" }) do %> <% end %>
|
20
|
+
<%= pb_rails("background", props: { background_color: "category_19", padding: "xl" }) do %> <% end %>
|
21
|
+
<%= pb_rails("background", props: { background_color: "category_20", padding: "xl" }) do %> <% end %>
|
22
|
+
<%= pb_rails("background", props: { background_color: "category_21", padding: "xl" }) do %> <% end %>
|
23
|
+
<%end%>
|
@@ -0,0 +1,119 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Background } from '../..'
|
3
|
+
import { Flex } from '../..'
|
4
|
+
|
5
|
+
const BackgroundCategory = (props) => (
|
6
|
+
<Flex
|
7
|
+
gap="md"
|
8
|
+
justify="center"
|
9
|
+
wrap
|
10
|
+
>
|
11
|
+
<Background
|
12
|
+
backgroundColor="category_1"
|
13
|
+
padding="xl"
|
14
|
+
{...props}
|
15
|
+
/>
|
16
|
+
<Background
|
17
|
+
backgroundColor="category_2"
|
18
|
+
padding="xl"
|
19
|
+
{...props}
|
20
|
+
/>
|
21
|
+
<Background
|
22
|
+
backgroundColor="category_3"
|
23
|
+
padding="xl"
|
24
|
+
{...props}
|
25
|
+
/>
|
26
|
+
<Background
|
27
|
+
backgroundColor="category_4"
|
28
|
+
padding="xl"
|
29
|
+
{...props}
|
30
|
+
/>
|
31
|
+
<Background
|
32
|
+
backgroundColor="category_5"
|
33
|
+
padding="xl"
|
34
|
+
{...props}
|
35
|
+
/>
|
36
|
+
<Background
|
37
|
+
backgroundColor="category_6"
|
38
|
+
padding="xl"
|
39
|
+
{...props}
|
40
|
+
/>
|
41
|
+
<Background
|
42
|
+
backgroundColor="category_7"
|
43
|
+
padding="xl"
|
44
|
+
{...props}
|
45
|
+
/>
|
46
|
+
<Background
|
47
|
+
backgroundColor="category_8"
|
48
|
+
padding="xl"
|
49
|
+
{...props}
|
50
|
+
/>
|
51
|
+
<Background
|
52
|
+
backgroundColor="category_9"
|
53
|
+
padding="xl"
|
54
|
+
{...props}
|
55
|
+
/>
|
56
|
+
<Background
|
57
|
+
backgroundColor="category_10"
|
58
|
+
padding="xl"
|
59
|
+
{...props}
|
60
|
+
/>
|
61
|
+
<Background
|
62
|
+
backgroundColor="category_11"
|
63
|
+
padding="xl"
|
64
|
+
{...props}
|
65
|
+
/>
|
66
|
+
<Background
|
67
|
+
backgroundColor="category_12"
|
68
|
+
padding="xl"
|
69
|
+
{...props}
|
70
|
+
/>
|
71
|
+
<Background
|
72
|
+
backgroundColor="category_13"
|
73
|
+
padding="xl"
|
74
|
+
{...props}
|
75
|
+
/>
|
76
|
+
<Background
|
77
|
+
backgroundColor="category_14"
|
78
|
+
padding="xl"
|
79
|
+
{...props}
|
80
|
+
/>
|
81
|
+
<Background
|
82
|
+
backgroundColor="category_15"
|
83
|
+
padding="xl"
|
84
|
+
{...props}
|
85
|
+
/>
|
86
|
+
<Background
|
87
|
+
backgroundColor="category_16"
|
88
|
+
padding="xl"
|
89
|
+
{...props}
|
90
|
+
/>
|
91
|
+
<Background
|
92
|
+
backgroundColor="category_17"
|
93
|
+
padding="xl"
|
94
|
+
{...props}
|
95
|
+
/>
|
96
|
+
<Background
|
97
|
+
backgroundColor="category_18"
|
98
|
+
padding="xl"
|
99
|
+
{...props}
|
100
|
+
/>
|
101
|
+
<Background
|
102
|
+
backgroundColor="category_19"
|
103
|
+
padding="xl"
|
104
|
+
{...props}
|
105
|
+
/>
|
106
|
+
<Background
|
107
|
+
backgroundColor="category_20"
|
108
|
+
padding="xl"
|
109
|
+
{...props}
|
110
|
+
/>
|
111
|
+
<Background
|
112
|
+
backgroundColor="category_21"
|
113
|
+
padding="xl"
|
114
|
+
{...props}
|
115
|
+
/>
|
116
|
+
</Flex>
|
117
|
+
)
|
118
|
+
|
119
|
+
export default BackgroundCategory
|
@@ -0,0 +1 @@
|
|
1
|
+
Category colors can be passed into the background kit. Values `category_1` to `category_21` are accepted. List of all category and status colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a>.
|
@@ -0,0 +1,13 @@
|
|
1
|
+
<div class="pb--doc-demo-row">
|
2
|
+
<%= pb_rails("background", props: { background_color: "success", padding: "xl" }) do %> <% end %>
|
3
|
+
<br>
|
4
|
+
<%= pb_rails("background", props: { background_color: "warning", padding: "xl" }) do %> <% end %>
|
5
|
+
<br>
|
6
|
+
<%= pb_rails("background", props: { background_color: "error", padding: "xl" }) do %> <% end %>
|
7
|
+
<br>
|
8
|
+
<%= pb_rails("background", props: { background_color: "info", padding: "xl" }) do %> <% end %>
|
9
|
+
<br>
|
10
|
+
<%= pb_rails("background", props: { background_color: "neutral", padding: "xl" }) do %> <% end %>
|
11
|
+
<br>
|
12
|
+
<%= pb_rails("background", props: { background_color: "primary", padding: "xl" }) do %> <% end %>
|
13
|
+
</div>
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Background } from '../..'
|
3
|
+
|
4
|
+
const BackgroundStatus = (props) => (
|
5
|
+
<div className="pb--doc-demo-row">
|
6
|
+
<Background
|
7
|
+
backgroundColor="success"
|
8
|
+
padding="xl"
|
9
|
+
{...props}
|
10
|
+
/>
|
11
|
+
<br />
|
12
|
+
<Background
|
13
|
+
backgroundColor="warning"
|
14
|
+
padding="xl"
|
15
|
+
{...props}
|
16
|
+
/>
|
17
|
+
<br />
|
18
|
+
<Background
|
19
|
+
backgroundColor="error"
|
20
|
+
padding="xl"
|
21
|
+
{...props}
|
22
|
+
/>
|
23
|
+
<br />
|
24
|
+
<Background
|
25
|
+
backgroundColor="info"
|
26
|
+
padding="xl"
|
27
|
+
{...props}
|
28
|
+
/>
|
29
|
+
<br />
|
30
|
+
<Background
|
31
|
+
backgroundColor="neutral"
|
32
|
+
padding="xl"
|
33
|
+
{...props}
|
34
|
+
/>
|
35
|
+
<br />
|
36
|
+
<Background
|
37
|
+
backgroundColor="primary"
|
38
|
+
padding="xl"
|
39
|
+
{...props}
|
40
|
+
/>
|
41
|
+
</div>
|
42
|
+
)
|
43
|
+
|
44
|
+
export default BackgroundStatus
|
@@ -0,0 +1 @@
|
|
1
|
+
Status colors can be passed into the background kit. `success`, `warning`, `error`, `info`, `neutral`, and `primary`
|
@@ -1 +1 @@
|
|
1
|
-
The background kit is used for adding a background to a page or to any container. Instead of adding a custom class to give something a background, you can now wrap the elements in the background kit and use the `background_color` prop to assign its color. The colors that you can choose from for the `background_color` prop are: gradient, dark, light, and
|
1
|
+
The background kit is used for adding a background to a page or to any container. Instead of adding a custom class to give something a background, you can now wrap the elements in the background kit and use the `background_color` prop to assign its color. The colors that you can choose from for the `background_color` prop are: gradient, dark, light, white, status colors, product colors, and category colors.
|
@@ -5,9 +5,13 @@ examples:
|
|
5
5
|
- background_white: White
|
6
6
|
- background_gradient: Gradient
|
7
7
|
- background_image: Image
|
8
|
+
- background_status: Status
|
9
|
+
- background_category: Category
|
8
10
|
|
9
11
|
react:
|
10
12
|
- background_light: Light
|
11
13
|
- background_white: White
|
12
14
|
- background_gradient: Gradient
|
13
15
|
- background_image: Image
|
16
|
+
- background_status: Status
|
17
|
+
- background_category: Category
|
@@ -2,4 +2,5 @@ export { default as BackgroundLight } from './_background_light.jsx'
|
|
2
2
|
export { default as BackgroundWhite } from './_background_white.jsx'
|
3
3
|
export { default as BackgroundGradient } from './_background_gradient.jsx'
|
4
4
|
export { default as BackgroundImage } from './_background_image.jsx'
|
5
|
-
|
5
|
+
export { default as BackgroundStatus } from './_background_status.jsx'
|
6
|
+
export { default as BackgroundCategory } from './_background_category.jsx'
|
@@ -0,0 +1,20 @@
|
|
1
|
+
<% data = [{
|
2
|
+
name: 'Number of Installations',
|
3
|
+
data: [1475,200,3000,654,656]
|
4
|
+
}, {
|
5
|
+
type: 'spline',
|
6
|
+
name: 'Trend Line',
|
7
|
+
data: [1975, 600, 2500, 924, 500],
|
8
|
+
color: '#F9BB00',
|
9
|
+
}] %>
|
10
|
+
|
11
|
+
<%= pb_rails("bar_graph", props: {
|
12
|
+
axis_title: 'Number of Employees',
|
13
|
+
chart_data: data,
|
14
|
+
id: "bar-spline",
|
15
|
+
y_axis_min: 0,
|
16
|
+
x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
|
17
|
+
subtitle: 'Source: thesolarfoundation.com',
|
18
|
+
title: 'Bar Graph with Spline',
|
19
|
+
legend: true,
|
20
|
+
}) %>
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import BarGraph from '../_bar_graph'
|
4
|
+
|
5
|
+
const chartData = [{
|
6
|
+
name: 'Number of Installations',
|
7
|
+
data: [1475, 200, 3000, 654, 656],
|
8
|
+
}, {
|
9
|
+
type: 'spline',
|
10
|
+
name: 'Trend Line',
|
11
|
+
data: [1975, 600, 2500, 924, 500],
|
12
|
+
color: '#F9BB00',
|
13
|
+
}]
|
14
|
+
|
15
|
+
const BarGraphSpline = (props) => (
|
16
|
+
<div>
|
17
|
+
<BarGraph
|
18
|
+
axisTitle="Number of Employees"
|
19
|
+
chartData={chartData}
|
20
|
+
id="bar-spline"
|
21
|
+
legend
|
22
|
+
title="Bar Graph with Spline"
|
23
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
|
24
|
+
yAxisMin={0}
|
25
|
+
{...props}
|
26
|
+
/>
|
27
|
+
</div>
|
28
|
+
)
|
29
|
+
|
30
|
+
export default BarGraphSpline
|
@@ -5,6 +5,7 @@ examples:
|
|
5
5
|
- bar_graph_legend: Legend
|
6
6
|
- bar_graph_legend_non_clickable: Legend Non Clickable
|
7
7
|
- bar_graph_height: Height
|
8
|
+
- bar_graph_spline: Spline
|
8
9
|
|
9
10
|
|
10
11
|
react:
|
@@ -12,4 +13,4 @@ examples:
|
|
12
13
|
- bar_graph_legend: Legend
|
13
14
|
- bar_graph_legend_non_clickable: Legend Non Clickable
|
14
15
|
- bar_graph_height: Height
|
15
|
-
|
16
|
+
- bar_graph_spline: Spline
|
@@ -2,3 +2,4 @@ export { default as BarGraphDefault } from './_bar_graph_default.jsx'
|
|
2
2
|
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
|
+
export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
|
@@ -8,6 +8,7 @@ import { globalProps } from '../utilities/globalProps.js'
|
|
8
8
|
|
9
9
|
type CardPropTypes = {
|
10
10
|
aria?: object,
|
11
|
+
background?: "white" | "dark" | "light" | "windows" | "siding" | "doors" | "solar" | "roofing" | "gutters" | "insulation" | "none",
|
11
12
|
borderNone?: boolean,
|
12
13
|
borderRadius?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "rounded",
|
13
14
|
children: array<React.ReactNode> | React.ReactNode,
|
@@ -66,6 +67,7 @@ const Body = (props: CardBodyProps) => {
|
|
66
67
|
const Card = (props: CardPropTypes) => {
|
67
68
|
const {
|
68
69
|
aria = {},
|
70
|
+
background = 'none',
|
69
71
|
borderNone = false,
|
70
72
|
borderRadius = 'md',
|
71
73
|
children,
|
@@ -78,9 +80,9 @@ const Card = (props: CardPropTypes) => {
|
|
78
80
|
padding = 'md',
|
79
81
|
} = props
|
80
82
|
const borderCSS = borderNone == true ? 'border_none' : ''
|
81
|
-
const
|
82
|
-
|
83
|
-
|
83
|
+
const selectedCSS = selected == true ? 'selected' : 'deselected'
|
84
|
+
const backgroundCSS = background == 'none' ? '' : `background_${background}`
|
85
|
+
const cardCss = buildCss('pb_card_kit', selectedCSS, `shadow_${shadow}`, borderCSS, `border_radius_${borderRadius}`, backgroundCSS, {
|
84
86
|
[`highlight_${highlight.position}`]: highlight.position,
|
85
87
|
[`highlight_${highlight.color}`]: highlight.color,
|
86
88
|
})
|
@@ -19,6 +19,13 @@ $pb_card_padding:(
|
|
19
19
|
lg: $space_lg,
|
20
20
|
xl: $space_xl,
|
21
21
|
);
|
22
|
+
$additional_colors: (
|
23
|
+
"dark": $bg_dark,
|
24
|
+
"light": $bg_light,
|
25
|
+
"white": $white,
|
26
|
+
"none": none,
|
27
|
+
);
|
28
|
+
$background_colors: map-merge($product_colors, $additional_colors);
|
22
29
|
|
23
30
|
@mixin pb_card_selected($border_color: $primary) {
|
24
31
|
border-color: $border_color;
|
@@ -35,7 +42,6 @@ $pb_card_padding:(
|
|
35
42
|
flex-direction: column;
|
36
43
|
min-width: 0;
|
37
44
|
word-wrap: break-word;
|
38
|
-
background-color: $background;
|
39
45
|
background-clip: border-box;
|
40
46
|
border-width: $pb_card_border_width;
|
41
47
|
border-style: solid;
|
@@ -44,6 +50,13 @@ $pb_card_padding:(
|
|
44
50
|
transition-property: all;
|
45
51
|
transition-duration: $transition_short;
|
46
52
|
transition-timing-function: $easeIn;
|
53
|
+
background-color: $white;
|
54
|
+
|
55
|
+
@each $name, $color in $background_colors {
|
56
|
+
&[class*=background_#{$name}] {
|
57
|
+
background-color: $color;
|
58
|
+
}
|
59
|
+
};
|
47
60
|
|
48
61
|
@each $name, $shadow in $box_shadows {
|
49
62
|
&[class*=_#{$name}] {
|
@@ -61,6 +74,8 @@ $pb_card_padding:(
|
|
61
74
|
@mixin pb_card_dark {
|
62
75
|
color: $white;
|
63
76
|
@include pb_card($card_dark, $border_dark);
|
77
|
+
background-color: $card_dark;
|
78
|
+
border-color: $border_dark;
|
64
79
|
}
|
65
80
|
|
66
81
|
@mixin pb_card_highlight($width, $height, $background){
|
@@ -17,15 +17,19 @@ module Playbook
|
|
17
17
|
prop :border_radius, type: Playbook::Props::Enum,
|
18
18
|
values: %w[xs sm md lg xl none rounded],
|
19
19
|
default: "md"
|
20
|
+
prop :background, type: Playbook::Props::Enum,
|
21
|
+
values: %w[white light dark windows siding doors solar roofing gutters insulation none],
|
22
|
+
default: "none"
|
20
23
|
|
21
24
|
def classname
|
22
25
|
generate_classname("pb_card_kit",
|
23
26
|
selected_class,
|
24
27
|
shadow_class,
|
25
|
-
highlight_position_class,
|
26
|
-
highlight_color_class,
|
27
28
|
border_class,
|
28
|
-
border_radius_class
|
29
|
+
border_radius_class,
|
30
|
+
background_class,
|
31
|
+
highlight_position_class,
|
32
|
+
highlight_color_class)
|
29
33
|
end
|
30
34
|
|
31
35
|
def body_padding
|
@@ -54,6 +58,10 @@ module Playbook
|
|
54
58
|
highlight[:color].present? ? "highlight_#{highlight[:color]}" : nil
|
55
59
|
end
|
56
60
|
|
61
|
+
def background_class
|
62
|
+
background == "none" ? nil : "background_#{background}"
|
63
|
+
end
|
64
|
+
|
57
65
|
def border_class
|
58
66
|
border_none == true ? "border_none" : nil
|
59
67
|
end
|
@@ -0,0 +1,57 @@
|
|
1
|
+
<%= pb_rails("title", props: { text: "Card Colors", tag: "h4", size: 4 }) %>
|
2
|
+
|
3
|
+
<br>
|
4
|
+
|
5
|
+
<%= pb_rails("card", props: { background: "dark", dark: true }) do %>
|
6
|
+
<%= pb_rails("body", props: {
|
7
|
+
text: "Dark",
|
8
|
+
color: "lighter"
|
9
|
+
}) %>
|
10
|
+
<% end %>
|
11
|
+
|
12
|
+
<br>
|
13
|
+
|
14
|
+
<%= pb_rails("card") do %>
|
15
|
+
<%= pb_rails("body", props: {
|
16
|
+
text: "White"
|
17
|
+
}) %>
|
18
|
+
<% end %>
|
19
|
+
|
20
|
+
<br>
|
21
|
+
|
22
|
+
<%= pb_rails("card", props: { background: "light"}) do %>
|
23
|
+
<%= pb_rails("body", props: {
|
24
|
+
text: "Light"
|
25
|
+
}) %>
|
26
|
+
<% end %>
|
27
|
+
|
28
|
+
<br>
|
29
|
+
|
30
|
+
<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4 }) %>
|
31
|
+
|
32
|
+
<br>
|
33
|
+
|
34
|
+
<%= pb_rails("card", props: { background: "windows", dark: true }) do %>
|
35
|
+
<%= pb_rails("body", props: {
|
36
|
+
text: "Windows",
|
37
|
+
color: "lighter"
|
38
|
+
}) %>
|
39
|
+
<% end %>
|
40
|
+
|
41
|
+
<br>
|
42
|
+
|
43
|
+
<%= pb_rails("card", props: { background: "siding" }) do %>
|
44
|
+
<%= pb_rails("body", props: {
|
45
|
+
text: "Siding"
|
46
|
+
}) %>
|
47
|
+
<% end %>
|
48
|
+
|
49
|
+
<br>
|
50
|
+
|
51
|
+
<%= pb_rails("card", props: { background: "doors" }) do %>
|
52
|
+
<%= pb_rails("body", props: {
|
53
|
+
text: "Doors"
|
54
|
+
}) %>
|
55
|
+
<% end %>
|
56
|
+
|
57
|
+
<br>
|