playbook_ui 12.14.0 → 12.16.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_avatar/_avatar.tsx +1 -1
- data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +1 -1
- data/app/pb_kits/playbook/pb_avatar/avatar.rb +4 -0
- data/app/pb_kits/playbook/pb_avatar/avatar.test.js +14 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb +0 -1
- data/app/pb_kits/playbook/pb_background/_background.tsx +1 -1
- data/app/pb_kits/playbook/pb_background/background.rb +1 -1
- data/app/pb_kits/playbook/pb_badge/_badge.scss +1 -0
- data/app/pb_kits/playbook/pb_badge/_badge.tsx +1 -1
- data/app/pb_kits/playbook/pb_badge/badge.rb +5 -1
- data/app/pb_kits/playbook/pb_badge/badge.test.js +16 -1
- data/app/pb_kits/playbook/pb_body/_body_mixins.scss +3 -3
- data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +2 -2
- data/app/pb_kits/playbook/pb_card/_card.scss +13 -0
- data/app/pb_kits/playbook/pb_card/_card.tsx +3 -2
- data/app/pb_kits/playbook/pb_card/card_header.rb +9 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +11 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx +169 -139
- data/app/pb_kits/playbook/pb_enhanced_element/index.ts +1 -1
- data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +5 -5
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +0 -5
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +0 -4
- data/app/pb_kits/playbook/pb_star_rating/{_star_rating.jsx → _star_rating.tsx} +18 -22
- data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js +71 -0
- data/app/pb_kits/playbook/pb_table/{_table.jsx → _table.tsx} +9 -11
- data/app/pb_kits/playbook/pb_table/{_table_row.jsx → _table_row.tsx} +7 -8
- data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb +41 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx +62 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_table/{index.js → index.ts} +4 -4
- data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +129 -0
- data/app/pb_kits/playbook/pb_textarea/{index.js → index.tsx} +2 -0
- data/app/pb_kits/playbook/pb_textarea/textarea.test.js +213 -0
- data/app/pb_kits/playbook/tokens/_colors.scss +16 -1
- data/app/pb_kits/playbook/utilities/_cursor.scss +141 -1
- data/app/pb_kits/playbook/utilities/globalProps.ts +5 -2
- data/lib/playbook/cursor.rb +2 -2
- data/lib/playbook/version.rb +2 -2
- metadata +12 -9
- data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +0 -41
- data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +0 -135
@@ -0,0 +1,213 @@
|
|
1
|
+
import React from "react"
|
2
|
+
import { render, screen } from "../utilities/test-utils"
|
3
|
+
|
4
|
+
import Textarea from "./_textarea"
|
5
|
+
|
6
|
+
const testId = "textarea-kit"
|
7
|
+
|
8
|
+
describe("TextArea Kit Props", () => {
|
9
|
+
test("Expects to have correct classname", () => {
|
10
|
+
render(
|
11
|
+
<Textarea
|
12
|
+
data={{ testid: testId }}
|
13
|
+
label="Label"
|
14
|
+
/>
|
15
|
+
)
|
16
|
+
|
17
|
+
const kit = screen.getByTestId(testId)
|
18
|
+
expect(kit).toHaveClass("pb_textarea_kit")
|
19
|
+
})
|
20
|
+
|
21
|
+
test("should render aria-label", () => {
|
22
|
+
render(
|
23
|
+
<Textarea
|
24
|
+
aria={{ label: testId }}
|
25
|
+
data={{ testid: testId }}
|
26
|
+
/>
|
27
|
+
)
|
28
|
+
|
29
|
+
const kit = screen.getByTestId(testId)
|
30
|
+
expect(kit).toHaveAttribute("aria-label", testId)
|
31
|
+
})
|
32
|
+
|
33
|
+
test("should render custom classname", () => {
|
34
|
+
render(
|
35
|
+
<Textarea
|
36
|
+
className={"text_class"}
|
37
|
+
data={{ testid: testId }}
|
38
|
+
/>
|
39
|
+
)
|
40
|
+
|
41
|
+
const kit = screen.getByTestId(testId)
|
42
|
+
|
43
|
+
expect(kit).toHaveClass("text_class")
|
44
|
+
})
|
45
|
+
|
46
|
+
test("should render value", () => {
|
47
|
+
render(
|
48
|
+
<Textarea
|
49
|
+
data={{ testid: testId }}
|
50
|
+
value={"Default Value"}
|
51
|
+
/>
|
52
|
+
)
|
53
|
+
|
54
|
+
const kit = screen.getByTestId(testId)
|
55
|
+
const textarea = kit.querySelector("textarea")
|
56
|
+
|
57
|
+
expect(textarea.innerHTML).toBe("Default Value")
|
58
|
+
})
|
59
|
+
|
60
|
+
test("should render disabled", () => {
|
61
|
+
render(
|
62
|
+
<Textarea
|
63
|
+
data={{ testid: testId }}
|
64
|
+
disabled={false}
|
65
|
+
/>
|
66
|
+
)
|
67
|
+
|
68
|
+
const kit = screen.getByTestId(testId)
|
69
|
+
const textarea = kit.querySelector("textarea")
|
70
|
+
|
71
|
+
expect(textarea.disabled).toBe(false)
|
72
|
+
})
|
73
|
+
|
74
|
+
test("should render rows", () => {
|
75
|
+
render(
|
76
|
+
<Textarea
|
77
|
+
data={{ testid: testId }}
|
78
|
+
rows={7}
|
79
|
+
/>
|
80
|
+
)
|
81
|
+
|
82
|
+
const kit = screen.getByTestId(testId)
|
83
|
+
const textarea = kit.querySelector("textarea")
|
84
|
+
|
85
|
+
expect(textarea.rows).toBe(7)
|
86
|
+
})
|
87
|
+
|
88
|
+
test("should render character count", () => {
|
89
|
+
render(
|
90
|
+
<Textarea
|
91
|
+
characterCount={50}
|
92
|
+
data={{ testid: testId }}
|
93
|
+
/>
|
94
|
+
)
|
95
|
+
|
96
|
+
const kit = screen.getByTestId(testId)
|
97
|
+
const counter = kit.querySelector(".pb_caption_kit_xs")
|
98
|
+
|
99
|
+
expect(counter.innerHTML).toBe("50")
|
100
|
+
})
|
101
|
+
|
102
|
+
test("should have inline class", () => {
|
103
|
+
render(
|
104
|
+
<Textarea
|
105
|
+
data={{ testid: testId }}
|
106
|
+
inline
|
107
|
+
/>
|
108
|
+
)
|
109
|
+
|
110
|
+
const kit = screen.getByTestId(testId)
|
111
|
+
|
112
|
+
expect(kit).toHaveClass("inline")
|
113
|
+
})
|
114
|
+
|
115
|
+
test("should have resize class", () => {
|
116
|
+
render(
|
117
|
+
<Textarea
|
118
|
+
data={{ testid: testId }}
|
119
|
+
resize={"none"}
|
120
|
+
/>
|
121
|
+
)
|
122
|
+
|
123
|
+
const kit = screen.getByTestId(testId)
|
124
|
+
|
125
|
+
expect(kit).toHaveClass("resize_none")
|
126
|
+
})
|
127
|
+
|
128
|
+
test("should render error", () => {
|
129
|
+
render(
|
130
|
+
<Textarea
|
131
|
+
data={{ testid: testId }}
|
132
|
+
error={"error message"}
|
133
|
+
/>
|
134
|
+
)
|
135
|
+
|
136
|
+
const kit = screen.getByTestId(testId)
|
137
|
+
const error = kit.querySelector(".pb_body_kit_negative")
|
138
|
+
|
139
|
+
expect(kit).toHaveClass("error")
|
140
|
+
expect(error.innerHTML).toBe("error message")
|
141
|
+
})
|
142
|
+
|
143
|
+
test("should render label", () => {
|
144
|
+
render(
|
145
|
+
<Textarea
|
146
|
+
data={{ testid: testId }}
|
147
|
+
label={"Test Label"}
|
148
|
+
/>
|
149
|
+
)
|
150
|
+
|
151
|
+
const kit = screen.getByTestId(testId)
|
152
|
+
const error = kit.querySelector(".pb_caption_kit_md")
|
153
|
+
|
154
|
+
expect(error.innerHTML).toBe("Test Label")
|
155
|
+
})
|
156
|
+
|
157
|
+
test("should render max character display", () => {
|
158
|
+
render(
|
159
|
+
<Textarea
|
160
|
+
characterCount={"11"}
|
161
|
+
data={{ testid: testId }}
|
162
|
+
maxCharacters={"10"}
|
163
|
+
/>
|
164
|
+
)
|
165
|
+
|
166
|
+
const kit = screen.getByTestId(testId)
|
167
|
+
const error = kit.querySelector(".pb_caption_kit_xs")
|
168
|
+
|
169
|
+
expect(error.innerHTML).toBe("11 / 10")
|
170
|
+
})
|
171
|
+
|
172
|
+
test("should render max character display", () => {
|
173
|
+
render(
|
174
|
+
<Textarea
|
175
|
+
data={{ testid: testId }}
|
176
|
+
name={"TestName"}
|
177
|
+
/>
|
178
|
+
)
|
179
|
+
|
180
|
+
const kit = screen.getByTestId(testId)
|
181
|
+
const textarea = kit.querySelector("textarea")
|
182
|
+
|
183
|
+
expect(textarea.name).toBe("TestName")
|
184
|
+
})
|
185
|
+
|
186
|
+
test("should render placeholder", () => {
|
187
|
+
render(
|
188
|
+
<Textarea
|
189
|
+
data={{ testid: testId }}
|
190
|
+
placeholder={"Test Placeholder"}
|
191
|
+
/>
|
192
|
+
)
|
193
|
+
|
194
|
+
const kit = screen.getByTestId(testId)
|
195
|
+
const textarea = kit.querySelector("textarea")
|
196
|
+
|
197
|
+
expect(textarea.placeholder).toBe("Test Placeholder")
|
198
|
+
})
|
199
|
+
|
200
|
+
test("should be required", () => {
|
201
|
+
render(
|
202
|
+
<Textarea
|
203
|
+
data={{ testid: testId }}
|
204
|
+
required
|
205
|
+
/>
|
206
|
+
)
|
207
|
+
|
208
|
+
const kit = screen.getByTestId(testId)
|
209
|
+
const textarea = kit.querySelector("textarea")
|
210
|
+
|
211
|
+
expect(textarea.required).toBeTruthy()
|
212
|
+
})
|
213
|
+
})
|
@@ -63,7 +63,7 @@ $bg_dark_card: #231E3D !default;
|
|
63
63
|
$background_colors: (
|
64
64
|
bg_light: $bg_light,
|
65
65
|
bg_dark: $bg_dark,
|
66
|
-
bg_dark_card: $bg_dark_card
|
66
|
+
bg_dark_card: $bg_dark_card
|
67
67
|
);
|
68
68
|
|
69
69
|
/* Card colors ------------------*/
|
@@ -125,9 +125,11 @@ $shadow_colors: (
|
|
125
125
|
$text_lt_default: $charcoal !default;
|
126
126
|
$text_lt_light: #687887 !default;
|
127
127
|
$text_lt_lighter: $slate !default;
|
128
|
+
$text_lt_success_sm: #157F48 !default;
|
128
129
|
$text_dk_default: $white !default;
|
129
130
|
$text_dk_light: rgba($white, $opacity_6) !default;
|
130
131
|
$text_dk_lighter: rgba($white, $opacity_4) !default;
|
132
|
+
$text_dk_success_sm: #00CA74 !default;
|
131
133
|
$text_colors: (
|
132
134
|
text_lt_default: $text_lt_default,
|
133
135
|
text_lt_light: $text_lt_light,
|
@@ -181,6 +183,7 @@ $primary_secondary: lighten($primary, 10%) !default;
|
|
181
183
|
$status_colors: (
|
182
184
|
success: $success,
|
183
185
|
success_secondary: $success_secondary,
|
186
|
+
success_sm: $text_lt_success_sm,
|
184
187
|
success_subtle: $success_subtle,
|
185
188
|
warning: $warning,
|
186
189
|
warning_secondary: $warning_secondary,
|
@@ -202,6 +205,18 @@ $status_colors: (
|
|
202
205
|
|
203
206
|
$status_color_text: (
|
204
207
|
success: $success,
|
208
|
+
success_sm: $text_lt_success_sm,
|
209
|
+
warning: darken($warning, 10%),
|
210
|
+
error: $error,
|
211
|
+
info: $info,
|
212
|
+
neutral: darken($neutral, 15%),
|
213
|
+
primary: $primary
|
214
|
+
);
|
215
|
+
|
216
|
+
// as we add more dark text colors we can update this variable
|
217
|
+
$status_color_text_dark: (
|
218
|
+
success: $success,
|
219
|
+
success_sm: $text_dk_success_sm,
|
205
220
|
warning: darken($warning, 10%),
|
206
221
|
error: $error,
|
207
222
|
info: $info,
|
@@ -1,3 +1,143 @@
|
|
1
|
+
.cursor_default {
|
2
|
+
cursor: default;
|
3
|
+
}
|
4
|
+
|
5
|
+
.cursor_context_menu {
|
6
|
+
cursor: context-menu;
|
7
|
+
}
|
8
|
+
|
9
|
+
.cursor_help {
|
10
|
+
cursor: help;
|
11
|
+
}
|
12
|
+
|
1
13
|
.cursor_pointer {
|
2
14
|
cursor: pointer;
|
3
|
-
}
|
15
|
+
}
|
16
|
+
|
17
|
+
.cursor_progress {
|
18
|
+
cursor: progress;
|
19
|
+
}
|
20
|
+
|
21
|
+
.cursor_wait {
|
22
|
+
cursor: wait;
|
23
|
+
}
|
24
|
+
|
25
|
+
.cursor_cell {
|
26
|
+
cursor: cell;
|
27
|
+
}
|
28
|
+
|
29
|
+
.cursor_crosshair {
|
30
|
+
cursor: crosshair;
|
31
|
+
}
|
32
|
+
|
33
|
+
.cursor_text {
|
34
|
+
cursor: text;
|
35
|
+
}
|
36
|
+
|
37
|
+
.cursor_vertical_text {
|
38
|
+
cursor: vertical-text;
|
39
|
+
}
|
40
|
+
|
41
|
+
.cursor_alias {
|
42
|
+
cursor: alias;
|
43
|
+
}
|
44
|
+
|
45
|
+
.cursor_copy {
|
46
|
+
cursor: copy;
|
47
|
+
}
|
48
|
+
|
49
|
+
.cursor_move {
|
50
|
+
cursor: move;
|
51
|
+
}
|
52
|
+
|
53
|
+
.cursor_no_drop {
|
54
|
+
cursor: no-drop;
|
55
|
+
}
|
56
|
+
|
57
|
+
.cursor_not_allowed {
|
58
|
+
cursor: not-allowed;
|
59
|
+
}
|
60
|
+
|
61
|
+
.cursor_all_scroll {
|
62
|
+
cursor: all-scroll;
|
63
|
+
}
|
64
|
+
|
65
|
+
.cursor_col_resize {
|
66
|
+
cursor: col-resize;
|
67
|
+
}
|
68
|
+
|
69
|
+
.cursor_row_resize {
|
70
|
+
cursor: row-resize;
|
71
|
+
}
|
72
|
+
|
73
|
+
.cursor_n_resize {
|
74
|
+
cursor: n-resize;
|
75
|
+
}
|
76
|
+
|
77
|
+
.cursor_e_resize {
|
78
|
+
cursor: e-resize;
|
79
|
+
}
|
80
|
+
|
81
|
+
.cursor_s_resize {
|
82
|
+
cursor: s-resize;
|
83
|
+
}
|
84
|
+
|
85
|
+
.cursor_w_resize {
|
86
|
+
cursor: w-resize;
|
87
|
+
}
|
88
|
+
|
89
|
+
.cursor_ne_resize {
|
90
|
+
cursor: ne-resize;
|
91
|
+
}
|
92
|
+
|
93
|
+
.cursor_nw_resize {
|
94
|
+
cursor: nw-resize;
|
95
|
+
}
|
96
|
+
|
97
|
+
.cursor_se_resize {
|
98
|
+
cursor: se-resize;
|
99
|
+
}
|
100
|
+
|
101
|
+
.cursor_sw_resize {
|
102
|
+
cursor: sw-resize;
|
103
|
+
}
|
104
|
+
|
105
|
+
.cursor_ew_resize {
|
106
|
+
cursor: ew-resize;
|
107
|
+
}
|
108
|
+
|
109
|
+
.cursor_ns_resize {
|
110
|
+
cursor: ns-resize;
|
111
|
+
}
|
112
|
+
|
113
|
+
.cursor_nsew_resize {
|
114
|
+
cursor: nsew-resize;
|
115
|
+
}
|
116
|
+
|
117
|
+
.cursor_nwes_resize {
|
118
|
+
cursor: nwes-resize;
|
119
|
+
}
|
120
|
+
|
121
|
+
.cursor_zoom_in {
|
122
|
+
cursor: zoom-in;
|
123
|
+
}
|
124
|
+
|
125
|
+
.cursor_zoom_out {
|
126
|
+
cursor: zoom-out;
|
127
|
+
}
|
128
|
+
|
129
|
+
.cursor_grab {
|
130
|
+
cursor: grab;
|
131
|
+
}
|
132
|
+
|
133
|
+
.cursor_grabbing {
|
134
|
+
cursor: grabbing;
|
135
|
+
}
|
136
|
+
|
137
|
+
.cursor_none {
|
138
|
+
cursor: none;
|
139
|
+
}
|
140
|
+
|
141
|
+
.cursor_auto {
|
142
|
+
cursor: auto;
|
143
|
+
}
|
@@ -29,7 +29,10 @@ type BorderRadius = {
|
|
29
29
|
}
|
30
30
|
|
31
31
|
type Cursor = {
|
32
|
-
cursor?: "pointer"
|
32
|
+
cursor?: "auto" | "default" | "none" | "contextMenu" | "help" | "pointer" | "progress" | "wait" | "cell" |
|
33
|
+
"crosshair" | "text" | "verticalText" | "alias" | "copy" | "move" | "noDrop" | "notAllowed" | "grab" |
|
34
|
+
"grabbing" | "eResize" | "nResize" | "neResize" | "nwResize" | "sResize" | "seResize" | "swResize" | "wResize" |
|
35
|
+
"ewResize" | "nsResize" | "neswResize" | "nwseResize" | "colResize" | "rowResize" | "allScroll" | "zoomIn" | "zoomOut",
|
33
36
|
}
|
34
37
|
|
35
38
|
type Dark = {
|
@@ -209,7 +212,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
|
|
209
212
|
},
|
210
213
|
cursorProps: ({ cursor }: Cursor) => {
|
211
214
|
let css = ''
|
212
|
-
css += cursor ? `cursor_${cursor}
|
215
|
+
css += cursor ? `cursor_${camelToSnakeCase(cursor)}` : ''
|
213
216
|
return css
|
214
217
|
},
|
215
218
|
alignContentProps: ({ alignContent }: AlignContent) => {
|
data/lib/playbook/cursor.rb
CHANGED
@@ -12,7 +12,7 @@ module Playbook
|
|
12
12
|
|
13
13
|
selected_props.map do |k|
|
14
14
|
cursor_value = send(k)
|
15
|
-
"cursor_#{cursor_value}" if cursor_values.include? cursor_value
|
15
|
+
"cursor_#{cursor_value.underscore}" if cursor_values.include? cursor_value
|
16
16
|
end.compact.join(" ")
|
17
17
|
end
|
18
18
|
|
@@ -23,7 +23,7 @@ module Playbook
|
|
23
23
|
end
|
24
24
|
|
25
25
|
def cursor_values
|
26
|
-
%w[pointer]
|
26
|
+
%w[auto default none contextMenu help pointer progress wait cell crosshair text verticalText alias copy move noDrop notAllowed grab grabbing eResize nResize neResize nwResize sResize seResize swResize wResize ewResize nsResize neswResize nwseResize colResize rowResize allScroll zoomIn zoomOut]
|
27
27
|
end
|
28
28
|
end
|
29
29
|
end
|
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: 12.
|
4
|
+
version: 12.16.0
|
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: 2023-04-
|
12
|
+
date: 2023-04-19 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -979,7 +979,6 @@ files:
|
|
979
979
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js
|
980
980
|
- app/pb_kits/playbook/pb_flex/_flex.scss
|
981
981
|
- app/pb_kits/playbook/pb_flex/_flex.tsx
|
982
|
-
- app/pb_kits/playbook/pb_flex/_flex_item.jsx
|
983
982
|
- app/pb_kits/playbook/pb_flex/_flex_item.scss
|
984
983
|
- app/pb_kits/playbook/pb_flex/_flex_item.tsx
|
985
984
|
- app/pb_kits/playbook/pb_flex/docs/_description.md
|
@@ -1873,8 +1872,8 @@ files:
|
|
1873
1872
|
- app/pb_kits/playbook/pb_source/source.html.erb
|
1874
1873
|
- app/pb_kits/playbook/pb_source/source.rb
|
1875
1874
|
- app/pb_kits/playbook/pb_source/source.test.js
|
1876
|
-
- app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
|
1877
1875
|
- app/pb_kits/playbook/pb_star_rating/_star_rating.scss
|
1876
|
+
- app/pb_kits/playbook/pb_star_rating/_star_rating.tsx
|
1878
1877
|
- app/pb_kits/playbook/pb_star_rating/docs/_description.md
|
1879
1878
|
- app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.html.erb
|
1880
1879
|
- app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx
|
@@ -1884,6 +1883,7 @@ files:
|
|
1884
1883
|
- app/pb_kits/playbook/pb_star_rating/docs/index.js
|
1885
1884
|
- app/pb_kits/playbook/pb_star_rating/star_rating.html.erb
|
1886
1885
|
- app/pb_kits/playbook/pb_star_rating/star_rating.rb
|
1886
|
+
- app/pb_kits/playbook/pb_star_rating/star_rating.test.js
|
1887
1887
|
- app/pb_kits/playbook/pb_stat_change/_stat_change.scss
|
1888
1888
|
- app/pb_kits/playbook/pb_stat_change/_stat_change.tsx
|
1889
1889
|
- app/pb_kits/playbook/pb_stat_change/docs/_description.md
|
@@ -1915,9 +1915,9 @@ files:
|
|
1915
1915
|
- app/pb_kits/playbook/pb_stat_value/stat_value.html.erb
|
1916
1916
|
- app/pb_kits/playbook/pb_stat_value/stat_value.rb
|
1917
1917
|
- app/pb_kits/playbook/pb_stat_value/stat_value.test.js
|
1918
|
-
- app/pb_kits/playbook/pb_table/_table.jsx
|
1919
1918
|
- app/pb_kits/playbook/pb_table/_table.scss
|
1920
|
-
- app/pb_kits/playbook/pb_table/
|
1919
|
+
- app/pb_kits/playbook/pb_table/_table.tsx
|
1920
|
+
- app/pb_kits/playbook/pb_table/_table_row.tsx
|
1921
1921
|
- app/pb_kits/playbook/pb_table/docs/_description.md
|
1922
1922
|
- app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb
|
1923
1923
|
- app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx
|
@@ -1972,9 +1972,11 @@ files:
|
|
1972
1972
|
- app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.html.erb
|
1973
1973
|
- app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx
|
1974
1974
|
- app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.md
|
1975
|
+
- app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb
|
1976
|
+
- app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx
|
1975
1977
|
- app/pb_kits/playbook/pb_table/docs/example.yml
|
1976
1978
|
- app/pb_kits/playbook/pb_table/docs/index.js
|
1977
|
-
- app/pb_kits/playbook/pb_table/index.
|
1979
|
+
- app/pb_kits/playbook/pb_table/index.ts
|
1978
1980
|
- app/pb_kits/playbook/pb_table/styles/_alignment.scss
|
1979
1981
|
- app/pb_kits/playbook/pb_table/styles/_all.scss
|
1980
1982
|
- app/pb_kits/playbook/pb_table/styles/_content.scss
|
@@ -2023,8 +2025,8 @@ files:
|
|
2023
2025
|
- app/pb_kits/playbook/pb_text_input/text_input.html.erb
|
2024
2026
|
- app/pb_kits/playbook/pb_text_input/text_input.rb
|
2025
2027
|
- app/pb_kits/playbook/pb_text_input/text_input.test.js
|
2026
|
-
- app/pb_kits/playbook/pb_textarea/_textarea.jsx
|
2027
2028
|
- app/pb_kits/playbook/pb_textarea/_textarea.scss
|
2029
|
+
- app/pb_kits/playbook/pb_textarea/_textarea.tsx
|
2028
2030
|
- app/pb_kits/playbook/pb_textarea/_textarea_mixin.scss
|
2029
2031
|
- app/pb_kits/playbook/pb_textarea/docs/_description.md
|
2030
2032
|
- app/pb_kits/playbook/pb_textarea/docs/_footer.md
|
@@ -2043,9 +2045,10 @@ files:
|
|
2043
2045
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx
|
2044
2046
|
- app/pb_kits/playbook/pb_textarea/docs/example.yml
|
2045
2047
|
- app/pb_kits/playbook/pb_textarea/docs/index.js
|
2046
|
-
- app/pb_kits/playbook/pb_textarea/index.
|
2048
|
+
- app/pb_kits/playbook/pb_textarea/index.tsx
|
2047
2049
|
- app/pb_kits/playbook/pb_textarea/textarea.html.erb
|
2048
2050
|
- app/pb_kits/playbook/pb_textarea/textarea.rb
|
2051
|
+
- app/pb_kits/playbook/pb_textarea/textarea.test.js
|
2049
2052
|
- app/pb_kits/playbook/pb_time/_time.scss
|
2050
2053
|
- app/pb_kits/playbook/pb_time/_time.tsx
|
2051
2054
|
- app/pb_kits/playbook/pb_time/docs/_description.md
|
@@ -1,41 +0,0 @@
|
|
1
|
-
/* @flow */
|
2
|
-
import React from 'react'
|
3
|
-
import classnames from 'classnames'
|
4
|
-
import { buildCss } from '../utilities/props'
|
5
|
-
import { globalProps } from '../utilities/globalProps'
|
6
|
-
type FlexItemPropTypes = {
|
7
|
-
children: array<React.ReactNode> | React.ReactNode,
|
8
|
-
fixedSize: string,
|
9
|
-
grow: boolean,
|
10
|
-
shrink: boolean,
|
11
|
-
flex: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none',
|
12
|
-
className: string,
|
13
|
-
overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
|
14
|
-
order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
|
15
|
-
alignSelf?: "start" | "end" | "center" | "stretch",
|
16
|
-
displayFlex: boolean
|
17
|
-
}
|
18
|
-
|
19
|
-
const FlexItem = (props: FlexItemPropTypes) => {
|
20
|
-
const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none', order = 'none', alignSelf = null, displayFlex } = props
|
21
|
-
const growClass = grow === true ? 'grow' : ''
|
22
|
-
const displayFlexClass = displayFlex === true ? `display_flex_${displayFlex}` : ''
|
23
|
-
const flexClass = flex !== 'none' ? `flex_${flex}` : ''
|
24
|
-
const overflowClass = overflow ? `overflow_${overflow}` : ''
|
25
|
-
const shrinkClass = shrink === true ? 'shrink' : ''
|
26
|
-
const alignSelfClass = alignSelf ? `align_self_${alignSelf}` : ''
|
27
|
-
const fixedStyle =
|
28
|
-
fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
|
29
|
-
const orderClass = order !== 'none' ? `order_${order}` : null
|
30
|
-
|
31
|
-
return (
|
32
|
-
<div
|
33
|
-
className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), overflowClass, orderClass, alignSelfClass, globalProps(props), className)}
|
34
|
-
style={fixedStyle}
|
35
|
-
>
|
36
|
-
{children}
|
37
|
-
</div>
|
38
|
-
)
|
39
|
-
}
|
40
|
-
|
41
|
-
export default FlexItem
|