playbook_ui 10.13.0.pre.node.update → 10.14.1.pre.alpha1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_background/_background.jsx +3 -2
- data/app/pb_kits/playbook/pb_background/_background.scss +0 -3
- 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 +3 -0
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +12 -1
- data/app/pb_kits/playbook/pb_card/card.rb +8 -0
- 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 +102 -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_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/_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/example.yml +1 -0
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +13 -1
- 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/tokens/_border_radius.scss +0 -1
- data/dist/reset.css +1 -60
- data/lib/playbook/version.rb +2 -2
- metadata +32 -11
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 25b483f3598610ddede034a602aa8fb81f26b9a735269ea5083b2e72046d3e81
|
4
|
+
data.tar.gz: 339a43fdf863f1d0b81b76c73cfbc2b50397ae6bd6d30760eed802dbbef3406b
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: dd56c725c94b609bba96db4bfed894c7e08add2ca312c4c9e02064290ab1d7026550b5e0e8df23c23af9ca27671c65355ecf6a3e3b920774d937777694c69219
|
7
|
+
data.tar.gz: 2a9164db30d466d53b18ec7b47e307791b8847ed075a53a3fb6e0561703930954c1064918d848a89a04eea20c51a69d2ca30183bd010df1b6ba3ee7dfc339f43
|
@@ -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 }
|
@@ -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",
|
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 = 'white',
|
69
71
|
borderNone = false,
|
70
72
|
borderRadius = 'md',
|
71
73
|
children,
|
@@ -81,6 +83,7 @@ const Card = (props: CardPropTypes) => {
|
|
81
83
|
const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, `${borderCSS}`, `border_radius_${borderRadius}`, {
|
82
84
|
selected,
|
83
85
|
deselected: !selected,
|
86
|
+
[`background_${background}`]: background,
|
84
87
|
[`highlight_${highlight.position}`]: highlight.position,
|
85
88
|
[`highlight_${highlight.color}`]: highlight.color,
|
86
89
|
})
|
@@ -19,6 +19,12 @@ $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
|
+
);
|
27
|
+
$background_colors: map-merge($product_colors, $additional_colors);
|
22
28
|
|
23
29
|
@mixin pb_card_selected($border_color: $primary) {
|
24
30
|
border-color: $border_color;
|
@@ -35,7 +41,6 @@ $pb_card_padding:(
|
|
35
41
|
flex-direction: column;
|
36
42
|
min-width: 0;
|
37
43
|
word-wrap: break-word;
|
38
|
-
background-color: $background;
|
39
44
|
background-clip: border-box;
|
40
45
|
border-width: $pb_card_border_width;
|
41
46
|
border-style: solid;
|
@@ -45,6 +50,12 @@ $pb_card_padding:(
|
|
45
50
|
transition-duration: $transition_short;
|
46
51
|
transition-timing-function: $easeIn;
|
47
52
|
|
53
|
+
@each $name, $color in $background_colors {
|
54
|
+
&[class*=background_#{$name}] {
|
55
|
+
background: $color;
|
56
|
+
}
|
57
|
+
};
|
58
|
+
|
48
59
|
@each $name, $shadow in $box_shadows {
|
49
60
|
&[class*=_#{$name}] {
|
50
61
|
box-shadow: $shadow;
|
@@ -17,6 +17,9 @@ 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],
|
22
|
+
default: "white"
|
20
23
|
|
21
24
|
def classname
|
22
25
|
generate_classname("pb_card_kit",
|
@@ -24,6 +27,7 @@ module Playbook
|
|
24
27
|
shadow_class,
|
25
28
|
highlight_position_class,
|
26
29
|
highlight_color_class,
|
30
|
+
background_class,
|
27
31
|
border_class,
|
28
32
|
border_radius_class)
|
29
33
|
end
|
@@ -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.present? ? "background_#{background}" : "background_white"
|
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>
|
@@ -0,0 +1,102 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import Title from '../../pb_title/_title'
|
3
|
+
import { Body } from '../../'
|
4
|
+
import Card from '../_card.jsx'
|
5
|
+
|
6
|
+
const CardBackground = (props) => {
|
7
|
+
return (
|
8
|
+
<div>
|
9
|
+
<Title
|
10
|
+
{...props}
|
11
|
+
size={4}
|
12
|
+
tag="h4"
|
13
|
+
text="Card Colors"
|
14
|
+
/>
|
15
|
+
|
16
|
+
<br />
|
17
|
+
|
18
|
+
<Card
|
19
|
+
background="dark"
|
20
|
+
dark
|
21
|
+
{...props}
|
22
|
+
>
|
23
|
+
<Body
|
24
|
+
color="lighter"
|
25
|
+
text="Dark"
|
26
|
+
{...props}
|
27
|
+
/>
|
28
|
+
</Card>
|
29
|
+
|
30
|
+
<br />
|
31
|
+
|
32
|
+
<Card>
|
33
|
+
<Body
|
34
|
+
text="White"
|
35
|
+
{...props}
|
36
|
+
/>
|
37
|
+
</Card>
|
38
|
+
|
39
|
+
<br />
|
40
|
+
|
41
|
+
<Card
|
42
|
+
background="light"
|
43
|
+
{...props}
|
44
|
+
>
|
45
|
+
<Body
|
46
|
+
text="Light"
|
47
|
+
{...props}
|
48
|
+
/>
|
49
|
+
</Card>
|
50
|
+
|
51
|
+
<br />
|
52
|
+
|
53
|
+
<Title
|
54
|
+
{...props}
|
55
|
+
size={4}
|
56
|
+
tag="h4"
|
57
|
+
text="Product Colors"
|
58
|
+
/>
|
59
|
+
|
60
|
+
<br />
|
61
|
+
|
62
|
+
<Card
|
63
|
+
background="windows"
|
64
|
+
{...props}
|
65
|
+
>
|
66
|
+
<Body
|
67
|
+
color="lighter"
|
68
|
+
text="Windows"
|
69
|
+
{...props}
|
70
|
+
/>
|
71
|
+
</Card>
|
72
|
+
|
73
|
+
<br />
|
74
|
+
|
75
|
+
<Card
|
76
|
+
background="siding"
|
77
|
+
{...props}
|
78
|
+
>
|
79
|
+
<Body
|
80
|
+
text="Siding"
|
81
|
+
{...props}
|
82
|
+
/>
|
83
|
+
</Card>
|
84
|
+
|
85
|
+
<br />
|
86
|
+
|
87
|
+
<Card
|
88
|
+
background="doors"
|
89
|
+
{...props}
|
90
|
+
>
|
91
|
+
<Body
|
92
|
+
text="Doors"
|
93
|
+
{...props}
|
94
|
+
/>
|
95
|
+
</Card>
|
96
|
+
|
97
|
+
<br />
|
98
|
+
</div>
|
99
|
+
)
|
100
|
+
}
|
101
|
+
|
102
|
+
export default CardBackground
|
@@ -0,0 +1 @@
|
|
1
|
+
Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors.
|
@@ -1,6 +1,7 @@
|
|
1
1
|
examples:
|
2
2
|
rails:
|
3
3
|
- card_light: Default
|
4
|
+
- card_background: Card Backgrounds
|
4
5
|
- card_highlight: Highlight Cards
|
5
6
|
- card_header: Header Cards
|
6
7
|
- card_selected: Selected
|
@@ -13,6 +14,7 @@ examples:
|
|
13
14
|
- card_border_radius: Border Radius
|
14
15
|
react:
|
15
16
|
- card_light: Default
|
17
|
+
- card_background: Card Backgrounds
|
16
18
|
- card_highlight: Highlight Cards
|
17
19
|
- card_header: Header Cards
|
18
20
|
- card_selected: Selected
|
@@ -1,4 +1,5 @@
|
|
1
1
|
export { default as CardLight } from './_card_light.jsx'
|
2
|
+
export { default as CardBackground } from './_card_background.jsx'
|
2
3
|
export { default as CardHighlight } from './_card_highlight.jsx'
|
3
4
|
export { default as CardHeader } from './_card_header.jsx'
|
4
5
|
export { default as CardSelected } from './_card_selected.jsx'
|
@@ -10,8 +10,8 @@ $gapSpaces:(
|
|
10
10
|
);
|
11
11
|
|
12
12
|
$gapTypes: (
|
13
|
-
gap: gap,
|
14
|
-
columnGap: column-gap,
|
13
|
+
gap: gap,
|
14
|
+
columnGap: column-gap,
|
15
15
|
rowGap: row-gap
|
16
16
|
);
|
17
17
|
|
@@ -69,6 +69,7 @@ $gapTypes: (
|
|
69
69
|
justify-content: center;
|
70
70
|
}
|
71
71
|
|
72
|
+
|
72
73
|
// Alignment: Align Items
|
73
74
|
&[class*=align_items_left],
|
74
75
|
&[class*=align_items_top],
|
@@ -76,6 +77,7 @@ $gapTypes: (
|
|
76
77
|
align-items: flex-start;
|
77
78
|
}
|
78
79
|
|
80
|
+
|
79
81
|
&[class*=align_items_right],
|
80
82
|
&[class*=align_items_bottom],
|
81
83
|
&[class*=align_items_end] {
|
@@ -11,20 +11,22 @@ type FlexItemPropTypes = {
|
|
11
11
|
flex: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none',
|
12
12
|
className: string,
|
13
13
|
overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
|
14
|
+
order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
|
14
15
|
}
|
15
16
|
|
16
17
|
const FlexItem = (props: FlexItemPropTypes) => {
|
17
|
-
const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none' } = props
|
18
|
+
const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none', order = 'none' } = props
|
18
19
|
const growClass = grow === true ? 'grow' : ''
|
19
20
|
const flexClass = flex !== 'none' ? `flex_${flex}` : ''
|
20
21
|
const overflowClass = overflow ? `overflow_${overflow}` : ''
|
21
22
|
const shrinkClass = shrink === true ? 'shrink' : ''
|
22
23
|
const fixedStyle =
|
23
24
|
fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
|
25
|
+
const orderClass = order !== 'none' ? `order_${order}` : null
|
24
26
|
|
25
27
|
return (
|
26
28
|
<div
|
27
|
-
className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass), overflowClass, globalProps(props), className)}
|
29
|
+
className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass), overflowClass, orderClass, globalProps(props), className)}
|
28
30
|
style={fixedStyle}
|
29
31
|
>
|
30
32
|
{children}
|
@@ -12,6 +12,15 @@
|
|
12
12
|
flex-shrink: 1;
|
13
13
|
}
|
14
14
|
|
15
|
+
//Order Items
|
16
|
+
@for $i from 0 through 12 {
|
17
|
+
&[class*=order_#{$i}]{
|
18
|
+
order: $i;
|
19
|
+
}
|
20
|
+
}
|
21
|
+
&[class*=order_first]{
|
22
|
+
order: -1;
|
23
|
+
}
|
15
24
|
|
16
25
|
$overflow_values: auto, hidden, inherit, initial, scroll, visible;
|
17
26
|
|
@@ -47,3 +47,16 @@
|
|
47
47
|
<%= pb_rails("flex/flex_item", props: {flex: "2"}) do %>4<% end %>
|
48
48
|
<% end %>
|
49
49
|
</div>
|
50
|
+
|
51
|
+
<br/><br/>
|
52
|
+
|
53
|
+
<%= pb_rails("title", props: {size: 4, text: "Order"}) %>
|
54
|
+
<br/>
|
55
|
+
<div class="flex-doc-example">
|
56
|
+
<%= pb_rails("flex", props: { gap: "sm"}) do %>
|
57
|
+
<%= pb_rails("flex/flex_item", props: {order: "4"}) do %>1<% end %>
|
58
|
+
<%= pb_rails("flex/flex_item", props: {order: "2"}) do %>2<% end %>
|
59
|
+
<%= pb_rails("flex/flex_item", props: {order: "1"}) do %>3<% end %>
|
60
|
+
<%= pb_rails("flex/flex_item", props: {order: "3"}) do %>4<% end %>
|
61
|
+
<% end %>
|
62
|
+
</div>
|
@@ -1,11 +1,12 @@
|
|
1
1
|
##### Props
|
2
2
|
|
3
3
|
* `flex` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
4
|
-
* `fixed_size` | **Type**: String | **Values**: Any CSS px or % value
|
5
|
-
* `grow` | **Type**: Boolean
|
6
|
-
* `shrink` | **Type**: Boolean
|
4
|
+
* `fixed_size` | **Type**: String | **Values**: Any CSS px or % value
|
5
|
+
* `grow` | **Type**: Boolean
|
6
|
+
* `shrink` | **Type**: Boolean
|
7
|
+
* `order` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | first
|
7
8
|
|
8
9
|
- Flex is a short hand to set the flex item to take up (x) amount of available space
|
9
|
-
- Setting Flex to 1 is equal to setting the grow & shrink prop to true
|
10
|
+
- Setting Flex to 1 is equal to setting the grow & shrink prop to true
|
10
11
|
- Setting Flex to 0 is equal to setting the grow & shrink prop to false
|
11
12
|
- If grow & shrink are true, grow will take precedence an the flex item will take up as much space as possible, then if other elements are added shrink would allow other items to squish inside the flex container
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import { Flex, FlexItem, Title } from '
|
2
|
+
import { Flex, FlexItem, Title } from '../..'
|
3
3
|
|
4
4
|
const FlexItemExample = (props) => {
|
5
5
|
return (
|
@@ -106,6 +106,32 @@ const FlexItemExample = (props) => {
|
|
106
106
|
</FlexItem>
|
107
107
|
</Flex>
|
108
108
|
</div>
|
109
|
+
|
110
|
+
<br />
|
111
|
+
<Title
|
112
|
+
size={4}
|
113
|
+
text="Order"
|
114
|
+
/>
|
115
|
+
<br />
|
116
|
+
<div className="flex-doc-example">
|
117
|
+
<Flex
|
118
|
+
gap="xs"
|
119
|
+
{...props}
|
120
|
+
>
|
121
|
+
<FlexItem order={4}>
|
122
|
+
{'1'}
|
123
|
+
</FlexItem>
|
124
|
+
<FlexItem order={2}>
|
125
|
+
{'2'}
|
126
|
+
</FlexItem>
|
127
|
+
<FlexItem order={1}>
|
128
|
+
{'3'}
|
129
|
+
</FlexItem>
|
130
|
+
<FlexItem order={3}>
|
131
|
+
{'4'}
|
132
|
+
</FlexItem>
|
133
|
+
</Flex>
|
134
|
+
</div>
|
109
135
|
</>
|
110
136
|
)
|
111
137
|
}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
##### Props
|
2
|
+
|
3
|
+
* `flex` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
4
|
+
* `fixed_size` | **Type**: String | **Values**: Any CSS px or % value
|
5
|
+
* `grow` | **Type**: Boolean
|
6
|
+
* `shrink` | **Type**: Boolean
|
7
|
+
* `order` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | first
|
8
|
+
|
9
|
+
- Flex is a short hand to set the flex item to take up (x) amount of available space
|
10
|
+
- Setting Flex to 1 is equal to setting the grow & shrink prop to true
|
11
|
+
- Setting Flex to 0 is equal to setting the grow & shrink prop to false
|
12
|
+
- If grow & shrink are true, grow will take precedence an the flex item will take up as much space as possible, then if other elements are added shrink would allow other items to squish inside the flex container
|
@@ -15,8 +15,12 @@ module Playbook
|
|
15
15
|
values: %w[auto hidden inherit initial scroll visible] + [nil],
|
16
16
|
default: nil
|
17
17
|
|
18
|
+
prop :order, type: Playbook::Props::Enum,
|
19
|
+
values: %w[1 2 3 4 5 6 7 8 9 10 11 12 first none],
|
20
|
+
default: "none"
|
21
|
+
|
18
22
|
def classname
|
19
|
-
generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class) + overflow_class
|
23
|
+
generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class) + overflow_class + order_class
|
20
24
|
end
|
21
25
|
|
22
26
|
def style_value
|
@@ -48,6 +52,14 @@ module Playbook
|
|
48
52
|
"flex_#{flex}"
|
49
53
|
end
|
50
54
|
end
|
55
|
+
|
56
|
+
def order_class
|
57
|
+
if order == "none"
|
58
|
+
""
|
59
|
+
else
|
60
|
+
"order_#{order}"
|
61
|
+
end
|
62
|
+
end
|
51
63
|
end
|
52
64
|
end
|
53
65
|
end
|
data/dist/reset.css
CHANGED
@@ -1,61 +1,2 @@
|
|
1
|
-
|
2
|
-
/* Headings */
|
3
|
-
/* Standard Font Weights */
|
4
|
-
/* Non_Standard Font Weights */
|
5
|
-
/*=====================================
|
6
|
-
Base colors should not be documented.
|
7
|
-
Only document color use.
|
8
|
-
|
9
|
-
Colors -----------------------------*/
|
10
|
-
/* Specialty Gradient -----------------*/
|
11
|
-
/* Interface colors -------------------*/
|
12
|
-
/* Main colors ------------------------*/
|
13
|
-
/*=====================================
|
14
|
-
|
15
|
-
Background colors ------------------*/
|
16
|
-
/* Card colors ------------------*/
|
17
|
-
/* Active colors ----------------------*/
|
18
|
-
/* Hover colors -----------------------*/
|
19
|
-
/* Focus colors -----------------------*/
|
20
|
-
/* Border colors ----------------------*/
|
21
|
-
/* Shadow colors ----------------------*/
|
22
|
-
/* Text colors ------------------------*/
|
23
|
-
/* Data colors ------------------------*/
|
24
|
-
/* Status colors ----------------------*/
|
25
|
-
/* Link colors ------------------------*/
|
26
|
-
/* Product colors ---------------------*/
|
27
|
-
/* Category colors ---------------------*/
|
28
|
-
* {
|
29
|
-
box-sizing: border-box;
|
30
|
-
margin: 0;
|
31
|
-
padding: 0; }
|
32
|
-
*:before, *:after {
|
33
|
-
box-sizing: border-box; }
|
34
|
-
|
35
|
-
html {
|
36
|
-
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
37
|
-
height: 100vh;
|
38
|
-
overflow-x: hidden; }
|
39
|
-
|
40
|
-
body {
|
41
|
-
font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
|
42
|
-
font-size: 16px;
|
43
|
-
line-height: 1.5;
|
44
|
-
background-color: #F3F7FB;
|
45
|
-
height: 100%;
|
46
|
-
letter-spacing: 0;
|
47
|
-
font-weight: 400;
|
48
|
-
font-style: normal;
|
49
|
-
text-rendering: optimizeLegibility;
|
50
|
-
-moz-font-feature-settings: "liga" on;
|
51
|
-
color: #242B42;
|
52
|
-
margin: 0 !important;
|
53
|
-
padding: 0 !important;
|
54
|
-
box-sizing: border-box;
|
55
|
-
min-height: 100vh;
|
56
|
-
padding: 50px; }
|
57
|
-
|
58
|
-
a {
|
59
|
-
text-decoration: none;
|
60
|
-
color: #0056CF; }
|
1
|
+
*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
|
61
2
|
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 10.
|
4
|
+
version: 10.14.1.pre.alpha1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2021-11-
|
12
|
+
date: 2021-11-22 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -95,6 +95,20 @@ dependencies:
|
|
95
95
|
- - "~>"
|
96
96
|
- !ruby/object:Gem::Version
|
97
97
|
version: '3.15'
|
98
|
+
- !ruby/object:Gem::Dependency
|
99
|
+
name: rubocop-performance
|
100
|
+
requirement: !ruby/object:Gem::Requirement
|
101
|
+
requirements:
|
102
|
+
- - "~>"
|
103
|
+
- !ruby/object:Gem::Version
|
104
|
+
version: 1.9.2
|
105
|
+
type: :runtime
|
106
|
+
prerelease: false
|
107
|
+
version_requirements: !ruby/object:Gem::Requirement
|
108
|
+
requirements:
|
109
|
+
- - "~>"
|
110
|
+
- !ruby/object:Gem::Version
|
111
|
+
version: 1.9.2
|
98
112
|
- !ruby/object:Gem::Dependency
|
99
113
|
name: view_component
|
100
114
|
requirement: !ruby/object:Gem::Requirement
|
@@ -183,36 +197,36 @@ dependencies:
|
|
183
197
|
name: rspec-rails
|
184
198
|
requirement: !ruby/object:Gem::Requirement
|
185
199
|
requirements:
|
186
|
-
- - ">="
|
187
|
-
- !ruby/object:Gem::Version
|
188
|
-
version: 3.8.0
|
189
200
|
- - "~>"
|
190
201
|
- !ruby/object:Gem::Version
|
191
202
|
version: '3.8'
|
203
|
+
- - ">="
|
204
|
+
- !ruby/object:Gem::Version
|
205
|
+
version: 3.8.0
|
192
206
|
type: :development
|
193
207
|
prerelease: false
|
194
208
|
version_requirements: !ruby/object:Gem::Requirement
|
195
209
|
requirements:
|
196
|
-
- - ">="
|
197
|
-
- !ruby/object:Gem::Version
|
198
|
-
version: 3.8.0
|
199
210
|
- - "~>"
|
200
211
|
- !ruby/object:Gem::Version
|
201
212
|
version: '3.8'
|
213
|
+
- - ">="
|
214
|
+
- !ruby/object:Gem::Version
|
215
|
+
version: 3.8.0
|
202
216
|
- !ruby/object:Gem::Dependency
|
203
217
|
name: rubocop
|
204
218
|
requirement: !ruby/object:Gem::Requirement
|
205
219
|
requirements:
|
206
220
|
- - '='
|
207
221
|
- !ruby/object:Gem::Version
|
208
|
-
version: 0.
|
222
|
+
version: 0.93.1
|
209
223
|
type: :development
|
210
224
|
prerelease: false
|
211
225
|
version_requirements: !ruby/object:Gem::Requirement
|
212
226
|
requirements:
|
213
227
|
- - '='
|
214
228
|
- !ruby/object:Gem::Version
|
215
|
-
version: 0.
|
229
|
+
version: 0.93.1
|
216
230
|
- !ruby/object:Gem::Dependency
|
217
231
|
name: spring
|
218
232
|
requirement: !ruby/object:Gem::Requirement
|
@@ -345,6 +359,9 @@ files:
|
|
345
359
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx
|
346
360
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.html.erb
|
347
361
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx
|
362
|
+
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.html.erb
|
363
|
+
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx
|
364
|
+
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.md
|
348
365
|
- app/pb_kits/playbook/pb_bar_graph/docs/_description.md
|
349
366
|
- app/pb_kits/playbook/pb_bar_graph/docs/example.yml
|
350
367
|
- app/pb_kits/playbook/pb_bar_graph/docs/index.js
|
@@ -439,6 +456,9 @@ files:
|
|
439
456
|
- app/pb_kits/playbook/pb_card/card_body.rb
|
440
457
|
- app/pb_kits/playbook/pb_card/card_header.html.erb
|
441
458
|
- app/pb_kits/playbook/pb_card/card_header.rb
|
459
|
+
- app/pb_kits/playbook/pb_card/docs/_card_background.html.erb
|
460
|
+
- app/pb_kits/playbook/pb_card/docs/_card_background.jsx
|
461
|
+
- app/pb_kits/playbook/pb_card/docs/_card_background.md
|
442
462
|
- app/pb_kits/playbook/pb_card/docs/_card_border_none.html.erb
|
443
463
|
- app/pb_kits/playbook/pb_card/docs/_card_border_none.jsx
|
444
464
|
- app/pb_kits/playbook/pb_card/docs/_card_border_none.md
|
@@ -836,6 +856,7 @@ files:
|
|
836
856
|
- app/pb_kits/playbook/pb_flex/docs/_flex_item.html.erb
|
837
857
|
- app/pb_kits/playbook/pb_flex/docs/_flex_item.md
|
838
858
|
- app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx
|
859
|
+
- app/pb_kits/playbook/pb_flex/docs/_flex_item_example.md
|
839
860
|
- app/pb_kits/playbook/pb_flex/docs/_flex_justify.html.erb
|
840
861
|
- app/pb_kits/playbook/pb_flex/docs/_flex_justify.jsx
|
841
862
|
- app/pb_kits/playbook/pb_flex/docs/_flex_justify.md
|
@@ -2055,7 +2076,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
2055
2076
|
- !ruby/object:Gem::Version
|
2056
2077
|
version: 1.3.1
|
2057
2078
|
requirements: []
|
2058
|
-
rubygems_version: 3.
|
2079
|
+
rubygems_version: 3.2.31
|
2059
2080
|
signing_key:
|
2060
2081
|
specification_version: 4
|
2061
2082
|
summary: Playbook Design System
|