playbook_ui 6.4.0 → 7.0.0.pre.alpha5
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/controllers/playbook/application_controller.rb +0 -2
- data/app/helpers/playbook/pb_kit_helper.rb +1 -0
- data/app/pb_kits/playbook/_playbook.scss +1 -0
- data/app/pb_kits/playbook/index.js +4 -0
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.html.erb +1 -12
- data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +1 -1
- data/app/pb_kits/playbook/pb_body/_body.jsx +1 -1
- data/app/pb_kits/playbook/pb_body/_body.scss +1 -17
- data/app/pb_kits/playbook/pb_body/body.rb +1 -1
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +17 -31
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss +8 -16
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +0 -1
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +6 -12
- data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +18 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_default_react.jsx +2 -2
- data/app/pb_kits/playbook/pb_date/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_date/docs/index.js +1 -1
- data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.html.erb +1 -8
- data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx +1 -1
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +2 -5
- data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.html.erb +1 -3
- data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx +5 -7
- data/app/pb_kits/playbook/pb_legend/_legend.html.erb +1 -11
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.html.erb +1 -13
- data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +1 -1
- data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +4 -6
- data/app/pb_kits/playbook/pb_nav/_nav.jsx +2 -7
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +14 -18
- data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx +7 -6
- data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx +1 -0
- data/app/pb_kits/playbook/pb_radio/_radio.scss +4 -9
- data/app/pb_kits/playbook/pb_select/_select.scss +4 -8
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +3 -6
- data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.jsx +5 -9
- data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.jsx +5 -9
- data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss +37 -35
- data/app/pb_kits/playbook/pb_table/styles/_hover.scss +12 -15
- data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +4 -6
- data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +4 -6
- data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx +4 -4
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +2 -4
- data/app/pb_kits/playbook/react_rails_kits.js +5 -0
- data/app/pb_kits/playbook/tokens/_colors.scss +22 -23
- data/app/pb_kits/playbook/tokens/_typography.scss +5 -5
- data/app/pb_kits/playbook/tokens/index.scss +11 -0
- data/app/pb_kits/playbook/vendor.js +5 -0
- data/lib/playbook/engine.rb +1 -0
- data/lib/playbook/version.rb +1 -1
- data/lib/tasks/pb_release.rake +3 -0
- metadata +6 -63
- data/app/controllers/playbook/guides_controller.rb +0 -11
- data/app/controllers/playbook/pages_controller.rb +0 -79
- data/app/controllers/playbook/samples_controller.rb +0 -40
- data/app/pb_kits/playbook/packs/application.js +0 -55
- data/app/pb_kits/playbook/packs/examples.js +0 -175
- data/app/pb_kits/playbook/packs/main.scss +0 -12
- data/app/pb_kits/playbook/packs/samples.js +0 -21
- data/app/pb_kits/playbook/packs/site_styles/_samples.scss +0 -72
- data/app/pb_kits/playbook/packs/site_styles/_scaffold.scss +0 -43
- data/app/pb_kits/playbook/packs/site_styles/_site-style.scss +0 -135
- data/app/pb_kits/playbook/packs/site_styles/docs/_all.scss +0 -10
- data/app/pb_kits/playbook/packs/site_styles/docs/_bg_light_doc_example.scss +0 -7
- data/app/pb_kits/playbook/packs/site_styles/docs/_code_snippet.scss +0 -531
- data/app/pb_kits/playbook/packs/site_styles/docs/_color_utilities.scss +0 -92
- data/app/pb_kits/playbook/packs/site_styles/docs/_flex_examples.scss +0 -15
- data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss +0 -189
- data/app/pb_kits/playbook/packs/site_styles/docs/_kits_examples.scss +0 -18
- data/app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss +0 -82
- data/app/pb_kits/playbook/packs/site_styles/docs/_spacing_tokens.scss +0 -72
- data/app/views/layouts/playbook/_mobile_hamburger.html.erb +0 -2
- data/app/views/layouts/playbook/_nav.html.erb +0 -13
- data/app/views/layouts/playbook/_sidebar.html.erb +0 -52
- data/app/views/layouts/playbook/application.html.slim +0 -22
- data/app/views/layouts/playbook/fullscreen.html.slim +0 -10
- data/app/views/layouts/playbook/grid.html.slim +0 -10
- data/app/views/layouts/playbook/samples.html.erb +0 -19
- data/app/views/playbook/guides/create_kit.html.slim +0 -16
- data/app/views/playbook/guides/create_kit/_file_naming.html.md +0 -2
- data/app/views/playbook/guides/create_kit/_generator.html.md +0 -6
- data/app/views/playbook/guides/create_kit/_kit_examples.html.md +0 -2
- data/app/views/playbook/guides/create_kit/_kit_rails.html.md +0 -2
- data/app/views/playbook/guides/create_kit/_kit_react.html.md +0 -2
- data/app/views/playbook/guides/create_kit/_layout.html.md +0 -2
- data/app/views/playbook/guides/create_kit/_view_objects.html.md +0 -2
- data/app/views/playbook/guides/create_kit/_writing_sass.md +0 -10
- data/app/views/playbook/guides/use_nitro.html.slim +0 -6
- data/app/views/playbook/guides/use_nitro/_local.html.md +0 -2
- data/app/views/playbook/guides/use_nitro/_nitro_components.html.md +0 -2
- data/app/views/playbook/guides/use_nitro/_versions.html.md +0 -2
- data/app/views/playbook/pages/fullscreen.html.slim +0 -10
- data/app/views/playbook/pages/grid.html.slim +0 -2
- data/app/views/playbook/pages/home.html.slim +0 -4
- data/app/views/playbook/pages/kit_category_show.html.erb +0 -14
- data/app/views/playbook/pages/kit_show.html.erb +0 -33
- data/app/views/playbook/pages/kits.html.erb +0 -12
- data/app/views/playbook/pages/principals/_getting_started.html.md +0 -30
- data/app/views/playbook/pages/principles.html.slim +0 -3
- data/app/views/playbook/pages/tokens.html.slim +0 -15
- data/app/views/playbook/pages/tokens/_pb_doc_spacing.html.slim +0 -61
- data/app/views/playbook/pages/utilities.html.slim +0 -116
- data/app/views/playbook/pages/utilities/_pb_doc_color.html.slim +0 -15
- data/app/views/playbook/samples/collection_detail/index.html.erb +0 -169
- data/app/views/playbook/samples/collection_detail/index.jsx +0 -372
- data/app/views/playbook/samples/dashboards/index.html.erb +0 -81
- data/app/views/playbook/samples/dashboards/index.jsx +0 -130
- data/app/views/playbook/samples/filter_table/index.html.erb +0 -348
- data/app/views/playbook/samples/filter_table/index.jsx +0 -433
- data/app/views/playbook/samples/registration/index.html.erb +0 -316
- data/app/views/playbook/samples/registration/index.jsx +0 -476
- data/app/views/playbook/samples/sample_show.html.erb +0 -36
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: db3423cbf2f95fde18f38882e86bc3342bfe232ed8adac2f030e5be811137e29
|
4
|
+
data.tar.gz: ddc14660d5bd2c8a3192ef72419424a81d9d352aeec400d84089d23c78d157b5
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: ce6421c6e87c2b544a60e066892101949410e9d15f9b82b674d1abfc782036ad4d37ed483fc14b012bdc7ff1e887d956daa16b39af23fa5e27aeb3d0b6d822d6
|
7
|
+
data.tar.gz: a5c6308837a164bbbb09ad5bbac767593511531ae79e7706dc0a5774d632ab9e117cbf1b29c5ed73c4fb4974694111c86bdf3dab1f72dc42ec3284822a12f722
|
@@ -1,3 +1,7 @@
|
|
1
|
+
import './_playbook.scss'
|
2
|
+
import 'lazysizes/plugins/attrchange/ls.attrchange'
|
3
|
+
import 'lazysizes'
|
4
|
+
|
1
5
|
// React Component JSX Imports from the React Kits
|
2
6
|
export Avatar from './pb_avatar/_avatar.jsx'
|
3
7
|
export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button.jsx'
|
@@ -1,12 +1 @@
|
|
1
|
-
<%=
|
2
|
-
aria: object.aria,
|
3
|
-
id: object.id,
|
4
|
-
data: object.data,
|
5
|
-
class: object.classname) %>
|
6
|
-
<% content_for :pb_js do %>
|
7
|
-
<%= javascript_tag do %>
|
8
|
-
window.addEventListener('DOMContentLoaded', function() {
|
9
|
-
new pbChart('.selector', <%= object.chart_options %>)
|
10
|
-
})
|
11
|
-
<% end %>
|
12
|
-
<% end %>
|
1
|
+
<%= react_component('BarGraph', object.chart_options) %>
|
@@ -1,7 +1,6 @@
|
|
1
1
|
@import "./body_mixins";
|
2
2
|
|
3
3
|
[class^=pb_body_kit]{
|
4
|
-
@include pb_body($text_lt_default);
|
5
4
|
@each $color_name, $color_value in $pb_body_colors {
|
6
5
|
&[class*=_#{$color_name}] {
|
7
6
|
@include pb_body($color_value);
|
@@ -20,23 +19,8 @@
|
|
20
19
|
}
|
21
20
|
|
22
21
|
@each $status_name, $status_value in $pb_body_status {
|
23
|
-
&[class
|
22
|
+
&[class*=_default_#{$status_name}][class*=dark] {
|
24
23
|
@include pb_body($status_value);
|
25
24
|
}
|
26
25
|
}
|
27
|
-
|
28
|
-
&[class*=dark] {
|
29
|
-
@include pb_body_dark();
|
30
|
-
@each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
|
31
|
-
&[class*=_#{$dark_color_name}][class*=dark]{
|
32
|
-
@include pb_body($dark_color_value);
|
33
|
-
}
|
34
|
-
}
|
35
|
-
@each $status_name, $status_value in $pb_body_status {
|
36
|
-
&[class*=_#{$status_name}] {
|
37
|
-
@include pb_body($status_value);
|
38
|
-
}
|
39
|
-
}
|
40
|
-
}
|
41
|
-
|
42
26
|
}
|
@@ -10,8 +10,7 @@ $pb_button_size: 40px;
|
|
10
10
|
$pb_button_v_padding: 7px;
|
11
11
|
$pb_button_h_padding: 34px;
|
12
12
|
$pb_button_hover_darken: 4%;
|
13
|
-
$pb_button_border_width:
|
14
|
-
|
13
|
+
$pb_button_border_width: 1px;
|
15
14
|
|
16
15
|
@mixin pb_button($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
|
17
16
|
text-rendering: optimizeLegibility;
|
@@ -48,17 +47,16 @@ $pb_button_border_width: 0px;
|
|
48
47
|
visibility: visible;
|
49
48
|
}
|
50
49
|
|
51
|
-
&:hover
|
50
|
+
&:hover {
|
52
51
|
outline: none;
|
53
|
-
|
54
52
|
}
|
55
53
|
|
56
|
-
&:active
|
54
|
+
&:active,
|
55
|
+
&:focus {
|
57
56
|
outline: none;
|
58
57
|
border-width: $pb_button_border_width;
|
59
58
|
border-color: darken($bg, $pb_button_hover_darken);
|
60
59
|
}
|
61
|
-
|
62
60
|
};
|
63
61
|
|
64
62
|
@mixin pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken)){
|
@@ -69,10 +67,8 @@ $pb_button_border_width: 0px;
|
|
69
67
|
@mixin pb_button_primary {
|
70
68
|
@include pb_button;
|
71
69
|
|
72
|
-
|
73
|
-
|
74
|
-
@include pb_button_hover;
|
75
|
-
}
|
70
|
+
&:hover {
|
71
|
+
@include pb_button_hover;
|
76
72
|
}
|
77
73
|
}
|
78
74
|
|
@@ -80,21 +76,17 @@ $pb_button_border_width: 0px;
|
|
80
76
|
@mixin pb_button_secondary {
|
81
77
|
@include pb_button(rgba($primary_action, 0.05), $primary_action);
|
82
78
|
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
}
|
87
|
-
}
|
79
|
+
&:hover {
|
80
|
+
@include pb_button_hover(rgba($primary_action, $opacity_3));
|
81
|
+
}
|
88
82
|
}
|
89
83
|
|
90
84
|
// Link =========================
|
91
85
|
@mixin pb_button_link {
|
92
86
|
@include pb_button($transparent, $primary_action);
|
93
87
|
|
94
|
-
|
95
|
-
|
96
|
-
@include pb_button_hover($transparent);
|
97
|
-
}
|
88
|
+
&:hover {
|
89
|
+
@include pb_button_hover($transparent);
|
98
90
|
}
|
99
91
|
}
|
100
92
|
|
@@ -128,10 +120,8 @@ $pb_button_border_width: 0px;
|
|
128
120
|
@mixin pb_button_primary_dark{
|
129
121
|
@include pb_button($primary_action);
|
130
122
|
|
131
|
-
|
132
|
-
|
133
|
-
@include pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken));
|
134
|
-
}
|
123
|
+
&:hover {
|
124
|
+
@include pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken));
|
135
125
|
}
|
136
126
|
}
|
137
127
|
|
@@ -139,10 +129,8 @@ $pb_button_border_width: 0px;
|
|
139
129
|
@mixin pb_button_secondary_dark{
|
140
130
|
@include pb_button(rgba($white, 0.2), $white);
|
141
131
|
|
142
|
-
|
143
|
-
|
144
|
-
@include pb_button_hover(rgba($primary_action, $opacity_2));
|
145
|
-
}
|
132
|
+
&:hover {
|
133
|
+
@include pb_button_hover(rgba($primary_action, $opacity_2));
|
146
134
|
}
|
147
135
|
}
|
148
136
|
|
@@ -150,10 +138,8 @@ $pb_button_border_width: 0px;
|
|
150
138
|
@mixin pb_button_link_dark {
|
151
139
|
@include pb_button($transparent, $primary_action);
|
152
140
|
|
153
|
-
|
154
|
-
|
155
|
-
@include pb_button_hover($transparent);
|
156
|
-
}
|
141
|
+
&:hover {
|
142
|
+
@include pb_button_hover($transparent);
|
157
143
|
}
|
158
144
|
}
|
159
145
|
|
@@ -13,17 +13,13 @@
|
|
13
13
|
& > [class^=pb_button] {
|
14
14
|
margin-right: $space-xs;
|
15
15
|
|
16
|
-
|
17
|
-
|
18
|
-
background-color:darken($royal, 20%);
|
19
|
-
}
|
16
|
+
&:hover {
|
17
|
+
background-color:darken($royal, 20%);
|
20
18
|
}
|
21
19
|
|
22
20
|
&[class*=secondary] {
|
23
|
-
|
24
|
-
|
25
|
-
background-color:rgba($primary_action, $opacity_3)
|
26
|
-
}
|
21
|
+
&:hover {
|
22
|
+
background-color:rgba($primary_action, $opacity_3)
|
27
23
|
}
|
28
24
|
}
|
29
25
|
|
@@ -46,17 +42,13 @@
|
|
46
42
|
width: 100%;
|
47
43
|
margin-bottom: $space-xs;
|
48
44
|
|
49
|
-
|
50
|
-
|
51
|
-
background-color:darken($royal, 20%);
|
52
|
-
}
|
45
|
+
&:hover {
|
46
|
+
background-color:darken($royal, 20%);
|
53
47
|
}
|
54
48
|
|
55
49
|
&[class*=secondary] {
|
56
|
-
|
57
|
-
|
58
|
-
background-color:rgba($primary_action, $opacity_3)
|
59
|
-
}
|
50
|
+
&:hover {
|
51
|
+
background-color:rgba($primary_action, $opacity_3)
|
60
52
|
}
|
61
53
|
}
|
62
54
|
|
@@ -1,10 +1,8 @@
|
|
1
1
|
@import "../tokens/colors";
|
2
|
-
@import "../tokens/transition";
|
3
2
|
$transition: $transition_cubic;
|
4
3
|
|
5
4
|
[class^=pb_checkbox_kit] {
|
6
5
|
display: inline-flex;
|
7
|
-
cursor: pointer;
|
8
6
|
.pb_checkbox_label {
|
9
7
|
padding-left: $space_xs;
|
10
8
|
cursor: pointer;
|
@@ -17,8 +15,7 @@ $transition: $transition_cubic;
|
|
17
15
|
width: 22px;
|
18
16
|
border: solid $border_light 2px;
|
19
17
|
border-radius: $border_rad_light;
|
20
|
-
|
21
|
-
.check_icon {
|
18
|
+
.check_icon{
|
22
19
|
opacity: 0;
|
23
20
|
position: relative;
|
24
21
|
top: -2px;
|
@@ -29,10 +26,9 @@ $transition: $transition_cubic;
|
|
29
26
|
|
30
27
|
}
|
31
28
|
}
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
}
|
29
|
+
|
30
|
+
&:hover input ~ .pb_checkbox_checkmark {
|
31
|
+
border-color: $primary_action;
|
36
32
|
}
|
37
33
|
|
38
34
|
input {
|
@@ -62,10 +58,8 @@ $transition: $transition_cubic;
|
|
62
58
|
border-color: $primary_action;
|
63
59
|
}
|
64
60
|
|
65
|
-
|
66
|
-
|
67
|
-
border-color: $primary_action;
|
68
|
-
}
|
61
|
+
&:hover .pb_checkbox_checkmark {
|
62
|
+
border-color: $primary_action;
|
69
63
|
}
|
70
64
|
|
71
65
|
&.error {
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Date as FormattedDate } from '../../'
|
3
|
+
|
4
|
+
const DateDefault = () => {
|
5
|
+
return (
|
6
|
+
<div>
|
7
|
+
<FormattedDate
|
8
|
+
date="2012-12-25"
|
9
|
+
/>
|
10
|
+
|
11
|
+
<FormattedDate
|
12
|
+
date={new Date()}
|
13
|
+
/>
|
14
|
+
</div>
|
15
|
+
)
|
16
|
+
}
|
17
|
+
|
18
|
+
export default DateDefault
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Date as FormattedDate } from '../..'
|
3
3
|
|
4
|
-
const
|
4
|
+
const DateDefault = () => {
|
5
5
|
return (
|
6
6
|
<div>
|
7
7
|
<FormattedDate
|
@@ -17,4 +17,4 @@ const DateDefaultReact = () => {
|
|
17
17
|
)
|
18
18
|
}
|
19
19
|
|
20
|
-
export default
|
20
|
+
export default DateDefault
|
@@ -3,11 +3,12 @@ examples:
|
|
3
3
|
rails:
|
4
4
|
- date_default: Default
|
5
5
|
- date_timezone: Timezones
|
6
|
+
|
6
7
|
- date_variants: Variants
|
7
8
|
- date_alignment: Alignment
|
8
9
|
|
9
10
|
react:
|
10
|
-
-
|
11
|
+
- date_default: Default
|
11
12
|
- date_variants: Variants
|
12
13
|
- date_alignment: Alignment
|
13
14
|
|
@@ -1,8 +1 @@
|
|
1
|
-
<%=
|
2
|
-
id: object.id,
|
3
|
-
data: object.data,
|
4
|
-
class: object.classname) do %>
|
5
|
-
<% object.widths_to_percentages.each do |percentage| %>
|
6
|
-
<div class="pb_distribution_width" style="width:<%= percentage %>%"></div>
|
7
|
-
<% end %>
|
8
|
-
<% end %>
|
1
|
+
<%= react_component('DistributionBar', object.chart_options) %>
|
@@ -33,7 +33,7 @@ const FileUpload = (props: FileUploadProps) => {
|
|
33
33
|
|
34
34
|
return (
|
35
35
|
<div
|
36
|
-
className={classnames(buildCss('pb_file_upload_kit'), globalProps(props)
|
36
|
+
className={classnames(buildCss('pb_file_upload_kit', className), globalProps(props))}
|
37
37
|
{...getRootProps()}
|
38
38
|
>
|
39
39
|
<Card>
|
@@ -18,16 +18,13 @@ $form_pill_colors: (
|
|
18
18
|
padding: 0 $space-sm/3;
|
19
19
|
height: $pb_form_pill_height;
|
20
20
|
border-radius: $pb_form_pill_height/2;
|
21
|
-
cursor: pointer;
|
22
21
|
@each $color_name, $color_value in $form_pill_colors {
|
23
22
|
&[class*=_#{$color_name}] {
|
24
23
|
background-color: rgba($color_value, $opacity-1);
|
25
24
|
transition: background-color 0.2s ease;
|
26
25
|
box-shadow: none;
|
27
|
-
|
28
|
-
|
29
|
-
background-color: rgba($color_value, $opacity-2);
|
30
|
-
}
|
26
|
+
&:hover {
|
27
|
+
background-color: rgba($color_value, $opacity-2);
|
31
28
|
}
|
32
29
|
#{$selector}_text {
|
33
30
|
color: $color_value;
|
@@ -1,15 +1,13 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import {
|
2
|
+
import { Icon } from '../../'
|
3
3
|
|
4
4
|
const IconDefaultDark = () => {
|
5
5
|
return (
|
6
6
|
<div>
|
7
|
-
<
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
/>
|
12
|
-
</Body>
|
7
|
+
<Icon
|
8
|
+
fixedWidth
|
9
|
+
icon="user"
|
10
|
+
/>
|
13
11
|
</div>
|
14
12
|
)
|
15
13
|
}
|