playbook_ui 11.9.0.pre.alpha.fileupload1 → 11.10.0.pre.alpha.pagination1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (87) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/data/menu.yml +1 -0
  4. data/app/pb_kits/playbook/pb_background/_background.tsx +1 -1
  5. data/app/pb_kits/playbook/pb_background/background.rb +5 -0
  6. data/app/pb_kits/playbook/pb_background/docs/_background_status.jsx +1 -1
  7. data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.html.erb +11 -0
  8. data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.jsx +44 -0
  9. data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.md +1 -0
  10. data/app/pb_kits/playbook/pb_background/docs/example.yml +2 -0
  11. data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
  12. data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +10 -0
  13. data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +2 -2
  14. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +5 -0
  15. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +8 -3
  16. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +41 -9
  17. data/app/pb_kits/playbook/pb_collapsible/collapsible.test.js +1 -1
  18. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +4 -2
  19. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.rb +20 -0
  20. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.html.erb +60 -0
  21. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +98 -0
  22. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.md +4 -0
  23. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb +1 -1
  24. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.html.erb +40 -0
  25. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +68 -0
  26. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.md +4 -0
  27. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +6 -4
  28. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +2 -0
  29. data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +5 -28
  30. data/app/pb_kits/playbook/pb_file_upload/docs/example.yml +0 -1
  31. data/app/pb_kits/playbook/pb_file_upload/docs/index.js +0 -1
  32. data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js +3 -3
  33. data/app/pb_kits/playbook/pb_filter/_filter.scss +0 -2
  34. data/app/pb_kits/playbook/pb_filter/docs/_description.md +5 -1
  35. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +6 -6
  36. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +58 -45
  37. data/app/pb_kits/playbook/pb_filter/docs/{_filter_min_width.html.erb → _filter_max_width.html.erb} +3 -3
  38. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx +69 -0
  39. data/app/pb_kits/playbook/pb_filter/docs/{_filter_default.md → _filter_max_width.md} +1 -1
  40. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +4 -4
  41. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +60 -47
  42. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb +2 -2
  43. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx +31 -25
  44. data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +2 -2
  45. data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx +31 -24
  46. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +2 -2
  47. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +30 -24
  48. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md +1 -1
  49. data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +2 -2
  50. data/app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx +30 -25
  51. data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -3
  52. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -2
  53. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +5 -0
  54. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +1 -0
  55. data/app/pb_kits/playbook/pb_legend/_legend.jsx +12 -2
  56. data/app/pb_kits/playbook/pb_legend/_legend.scss +7 -1
  57. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.html.erb +3 -0
  58. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx +24 -0
  59. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.md +1 -0
  60. data/app/pb_kits/playbook/pb_legend/docs/example.yml +2 -0
  61. data/app/pb_kits/playbook/pb_legend/docs/index.js +1 -0
  62. data/app/pb_kits/playbook/pb_legend/legend.html.erb +1 -1
  63. data/app/pb_kits/playbook/pb_legend/legend.rb +9 -1
  64. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
  65. data/app/pb_kits/playbook/pb_pagination/_pagination.scss +59 -0
  66. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb +1 -0
  67. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.md +1 -0
  68. data/app/pb_kits/playbook/pb_pagination/docs/example.yml +6 -0
  69. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +7 -0
  70. data/app/pb_kits/playbook/pb_pagination/pagination.rb +11 -0
  71. data/app/pb_kits/playbook/pb_radio/_radio.scss +1 -0
  72. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +6 -0
  73. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +0 -2
  74. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb +1 -1
  75. data/app/pb_kits/playbook/pb_table/_table.jsx +5 -3
  76. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +4 -4
  77. data/app/pb_kits/playbook/pb_timeline/_timeline.scss +1 -2
  78. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb +23 -0
  79. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx +47 -0
  80. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md +1 -0
  81. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +37 -2
  82. data/app/pb_kits/playbook/tokens/_colors.scss +11 -1
  83. data/lib/playbook/version.rb +2 -2
  84. metadata +24 -7
  85. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx +0 -51
  86. data/app/pb_kits/playbook/pb_filter/docs/_filter_close_popover.jsx +0 -62
  87. data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.jsx +0 -57
@@ -1,3 +1,4 @@
1
1
  export { default as LegendDefault } from './_legend_default.jsx'
2
2
  export { default as LegendPrefix } from './_legend_prefix.jsx'
3
3
  export { default as LegendColors } from './_legend_colors'
4
+ export { default as LegendCustomColors} from './_legend_custom_colors'
@@ -4,7 +4,7 @@
4
4
  data: object.data,
5
5
  class: object.classname) do %>
6
6
  <%= pb_rails("body", props: {color: object.body_color}) do %>
7
- <span class="pb_legend_indicator_circle"></span>
7
+ <span style="<%= object.custom_color %>" class=<%= object.custom_color_class %>></span>
8
8
  <%= pb_rails("title", props: { dark: object.dark, text: object.prefix_text, tag: "span", size: 4 }) %>
9
9
  <%= object.text %>
10
10
  <% end %>
@@ -12,8 +12,16 @@ module Playbook
12
12
  dark ? "lighter" : "light"
13
13
  end
14
14
 
15
+ def custom_color
16
+ color.start_with?("#") ? "background: #{color}" : ""
17
+ end
18
+
19
+ def custom_color_class
20
+ color.start_with?("#") ? "pb_legend_indicator_circle_custom" : "pb_legend_indicator_circle"
21
+ end
22
+
15
23
  def classname
16
- generate_classname("pb_legend_kit", color)
24
+ generate_classname("pb_legend_kit", color.start_with?("#") ? nil : color)
17
25
  end
18
26
  end
19
27
  end
@@ -19,7 +19,7 @@ $selector: ".pb_nav_list";
19
19
  }
20
20
 
21
21
  [class*=pb_nav_list_title] {
22
- padding: 0 $space_md $space_sm;
22
+ padding: 0 $space_md $space_sm $space_sm;
23
23
  }
24
24
 
25
25
  // Normal Variant
@@ -0,0 +1,59 @@
1
+ @import "tokens/colors";
2
+ @import "tokens/typography";
3
+ @import "tokens/border_radius";
4
+ @import "tokens/shadows";
5
+
6
+ .pb_pagination {
7
+ .pagination > li > a,
8
+ .pagination > li > span {
9
+ border: 0 !important;
10
+ margin-top: 1px;
11
+ margin-bottom: 1px;
12
+ }
13
+ .pagination > li:first-child > a,
14
+ .pagination > li:first-child > span {
15
+ border-right: 1px solid $border_light !important;
16
+ z-index: 2;
17
+ }
18
+ .pagination > li:last-child > a,
19
+ .pagination > li:last-child > span {
20
+ border-left: 1px solid $border_light !important;
21
+ z-index: 2;
22
+ }
23
+
24
+ .pagination {
25
+ border: 1px solid $border_light;
26
+ background-color: $white;
27
+
28
+ a {
29
+ color: $text_lt_default !important;
30
+ font-size: $text_small;
31
+ font-weight: $bold;
32
+ border: none;
33
+ margin-left: 1px;
34
+ margin-right: 1px;
35
+
36
+ &:hover {
37
+ background-color: $active_light;
38
+ color: $primary !important;
39
+ border-radius: $border_rad_light;
40
+ }
41
+
42
+ &:focus {
43
+ outline: 1px solid $primary !important;
44
+ border-radius: $border_rad_light;
45
+ outline-offset: -1px;
46
+ }
47
+ }
48
+ .active > span {
49
+ background-color: $primary;
50
+ border-radius: $border_rad_light;
51
+ margin-left: 1px;
52
+ margin-right: 1px;
53
+
54
+ &:hover {
55
+ box-shadow: $shadow_deeper;
56
+ }
57
+ }
58
+ }
59
+ }
@@ -0,0 +1 @@
1
+ <%= pb_rails("pagination") %>
@@ -0,0 +1 @@
1
+ To apply our pagination CSS styles in rails, wrap the `will_paginate` component in our pagination component.
@@ -0,0 +1,6 @@
1
+ examples:
2
+
3
+ rails:
4
+ - pagination_default: Default
5
+
6
+
@@ -0,0 +1,7 @@
1
+ <%= content_tag(:div,
2
+ aria: object.aria,
3
+ class: object.classname,
4
+ data: object.data,
5
+ id: object.id) do %>
6
+ <%= content.presence %>
7
+ <% end %>
@@ -0,0 +1,11 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbPagination
5
+ class Pagination < ::Playbook::KitBase
6
+ def classname
7
+ generate_classname("pb_pagination")
8
+ end
9
+ end
10
+ end
11
+ end
@@ -31,6 +31,7 @@
31
31
 
32
32
  input {
33
33
  position: relative;
34
+ width: 0;
34
35
  left: $offscreen;
35
36
  &:checked, &:focus {
36
37
  & ~ .pb_radio_button {
@@ -95,6 +95,12 @@
95
95
  a {
96
96
  cursor: pointer;
97
97
  }
98
+ ol,
99
+ ul {
100
+ li {
101
+ margin-left: $space_sm;
102
+ }
103
+ }
98
104
  }
99
105
  trix-toolbar {
100
106
  .trix-button--icon {
@@ -121,7 +121,6 @@ $pb_selectable_card_border: 2px;
121
121
  }
122
122
  .separator{
123
123
  background: $error_dark;
124
- width: 2px;
125
124
  }
126
125
  }
127
126
  }
@@ -144,7 +143,6 @@ $pb_selectable_card_border: 2px;
144
143
  }
145
144
  .separator {
146
145
  background: $error;
147
- width: 2px;
148
146
  }
149
147
  }
150
148
  }
@@ -17,7 +17,7 @@ module Playbook
17
17
  default: {}
18
18
 
19
19
  def classname
20
- generate_classname("pb_selectable_list_item_kit")
20
+ generate_classname("pb_item_kit")
21
21
  end
22
22
  end
23
23
  end
@@ -1,6 +1,6 @@
1
1
  /* @flow */
2
2
 
3
- import React, { type Node } from 'react'
3
+ import React, { useEffect, type Node } from 'react'
4
4
  import classnames from 'classnames'
5
5
  import { buildAriaProps, buildDataProps } from '../utilities/props'
6
6
  import { globalProps } from '../utilities/globalProps'
@@ -45,8 +45,10 @@ const Table = (props: TableProps) => {
45
45
  const dataProps = buildDataProps(data)
46
46
  const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
47
47
 
48
- const instance = new PbTable()
49
- instance.connect()
48
+ useEffect(() => {
49
+ const instance = new PbTable()
50
+ instance.connect()
51
+ }, [])
50
52
 
51
53
  return (
52
54
  <table
@@ -65,12 +65,12 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
65
65
  const borderCss = `border_${borderToChange}_${borderToggle}`
66
66
 
67
67
  const shouldShowAddOn = icon !== null
68
- const addOnCss = shouldShowAddOn ? 'text_input_wrapper_add_on' : null
69
- const addOnDarkModeCardCss = (shouldShowAddOn && dark) ? 'add-on-card-dark' : null
68
+ const addOnCss = shouldShowAddOn ? 'text_input_wrapper_add_on' : ""
69
+ const addOnDarkModeCardCss = (shouldShowAddOn && dark) ? 'add-on-card-dark' : ""
70
70
  const css = classnames([
71
71
  'pb_text_input_kit',
72
- inline ? 'inline' : null,
73
- error ? 'error' : null,
72
+ inline ? 'inline' : "",
73
+ error ? 'error' : "",
74
74
  globalProps(props),
75
75
  className,
76
76
  ])
@@ -110,9 +110,8 @@ $height_from_top: $icon_height/2 - $connector_width/2;
110
110
  &[class*=_solid] {
111
111
  flex-basis: 100%;
112
112
  [class=pb_timeline_item_left_block] {
113
- @include flex_wrapper(column);
113
+ display: flex;
114
114
  height: 55px;
115
- justify-content: flex-end;
116
115
  [class=pb_date_stacked_kit_center_sm] {
117
116
  [class=pb_date_stacked_day_month] {
118
117
  [class=pb_caption_kit_md] {
@@ -42,3 +42,26 @@
42
42
  <% end %>
43
43
  <% end %>
44
44
 
45
+ <br /><br /><br />
46
+
47
+ <%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
48
+ <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.new(2018, 03, 20) }) do %>
49
+ <%= pb_rails("title_detail", props: {
50
+ title: "Jackson Heights",
51
+ detail: "37-27 74th Street"
52
+ }) %>
53
+ <% end %>
54
+ <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
55
+ <%= pb_rails("title_detail", props: {
56
+ title: "Greenpoint",
57
+ detail: "81 Gate St Brooklyn"
58
+ }) %>
59
+ <% end %>
60
+ <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.new(2018, 05, 20) }) do %>
61
+ <%= pb_rails("title_detail", props: {
62
+ title: "Society Hill",
63
+ detail: "72 E St Astoria"
64
+ }) %>
65
+ <% end %>
66
+ <% end %>
67
+
@@ -94,6 +94,53 @@ const TimelineWithDate = (props) => (
94
94
  />
95
95
  </Timeline.Item>
96
96
  </Timeline>
97
+
98
+ <br/>
99
+ <br/>
100
+ <br/>
101
+
102
+ <Timeline
103
+ orientation="vertical"
104
+ showDate
105
+ {...props}
106
+ >
107
+ <Timeline.Item
108
+ date={new Date('20 Mar 2018')}
109
+ icon="user"
110
+ iconColor="royal"
111
+ {...props}
112
+ >
113
+ <TitleDetail
114
+ detail="37-27 74th Street"
115
+ title="Jackson Heights"
116
+ {...props}
117
+ />
118
+ </Timeline.Item>
119
+ <Timeline.Item
120
+ icon="check"
121
+ iconColor="teal"
122
+ lineStyle="dotted"
123
+ {...props}
124
+ >
125
+ <TitleDetail
126
+ detail="81 Gate St Brooklyn"
127
+ title="Greenpoint"
128
+ {...props}
129
+ />
130
+ </Timeline.Item>
131
+ <Timeline.Item
132
+ date={new Date('20 May 2018')}
133
+ icon="map-marker-alt"
134
+ iconColor="purple"
135
+ {...props}
136
+ >
137
+ <TitleDetail
138
+ detail="72 E St Astoria"
139
+ title="Society Hill"
140
+ {...props}
141
+ />
142
+ </Timeline.Item>
143
+ </Timeline>
97
144
  </div>
98
145
  )
99
146
 
@@ -0,0 +1 @@
1
+ Use the optional `showDate` prop to render the timeline kit with a visible date. If the date is from the current year, the year will not be displayed, however if date is NOT from the current year, the kit will display the year as well.
@@ -157,8 +157,42 @@
157
157
  .placeholder+.input-wrapper .typeahead-plus-icon {
158
158
  display: none;
159
159
  }
160
- .typeahead-kit-select__control--is-focused .typeahead-plus-icon {
161
- display: none;
160
+ .text_input {
161
+ .typeahead-kit-select {
162
+ &__single-value{
163
+ color: $text_lt_default;
164
+ }
165
+ }
166
+ &.typeahead-kit-select {
167
+ &__single-value{
168
+ color: $text_lt_default;
169
+ }
170
+ &__control {
171
+ &--is-focused {
172
+ @include pb_textarea_focus;
173
+ @include transition_default;
174
+ border-color: $primary;
175
+ background-color: rgba($focus_input_light,$opacity_5);
176
+ box-shadow: none;
177
+ .typeahead-plus-icon {
178
+ display: none;
179
+ }
180
+ }
181
+ }
182
+ }
183
+ }
184
+
185
+
186
+
187
+ .typeahead-kit-select__menu {
188
+ .typeahead-kit-select__option {
189
+ &.typeahead-kit-select__option--is-focused {
190
+ background-color: $hover_light;
191
+ }
192
+ &.typeahead-kit-select__option--is-selected {
193
+ background-color: $primary;
194
+ }
195
+ }
162
196
  }
163
197
  .typeahead-plus-icon {
164
198
  color: $text_lt_lighter;
@@ -178,3 +212,4 @@
178
212
  }
179
213
  }
180
214
  }
215
+
@@ -154,30 +154,40 @@ $data_colors: (
154
154
  /* Status colors ----------------------*/
155
155
  $success: $green !default;
156
156
  $success_secondary: lighten($success, 10%);
157
+ $success_subtle: rgba($success, $opacity_1);
157
158
  $warning: $yellow !default;
158
159
  $warning_secondary: lighten($warning, 10%);
160
+ $warning_subtle: rgba($warning, $opacity_1);
159
161
  $error: $red !default;
160
162
  $error_dark: $red_dark !default;
161
163
  $error_dark_body: lighten($error_dark, 2%);
162
164
  $error_secondary: lighten($error, 10%);
165
+ $error_subtle: rgba($error, $opacity_1);
163
166
  $info: $teal !default;
164
167
  $info_secondary : lighten($info, 10%);
168
+ $info_subtle: rgba($info, $opacity_1);
165
169
  $neutral: $slate !default;
166
170
  $neutral_secondary: lighten($neutral, 10%);
171
+ $neutral_subtle: rgba($neutral, $opacity_1);
167
172
  $primary: $primary !default;
168
- $primary_secondary: lighten($primary, 10%);
173
+ $primary_secondary: lighten($primary, 10%);
169
174
 
170
175
  $status_colors: (
171
176
  success: $success,
172
177
  success_secondary: $success_secondary,
178
+ success_subtle: $success_subtle,
173
179
  warning: $warning,
174
180
  warning_secondary: $warning_secondary,
181
+ warning_subtle: $warning_subtle,
175
182
  error: $error,
176
183
  error_secondary: $error_secondary,
184
+ error_subtle: $error_subtle,
177
185
  info: $info,
178
186
  info_secondary: $info_secondary,
187
+ info_subtle: $info_subtle,
179
188
  neutral: $neutral,
180
189
  neutral_secondary: $neutral_secondary,
190
+ neutral_subtle: $neutral_subtle,
181
191
  primary: $primary,
182
192
  primary_secondary: $primary_secondary
183
193
  );
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "11.8.0"
5
- VERSION = "11.9.0.pre.alpha.fileupload1"
4
+ PREVIOUS_VERSION = "11.9.0"
5
+ VERSION = "11.10.0.pre.alpha.pagination1"
6
6
  end
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: 11.9.0.pre.alpha.fileupload1
4
+ version: 11.10.0.pre.alpha.pagination1
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: 2022-10-17 00:00:00.000000000 Z
12
+ date: 2022-10-26 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -339,6 +339,9 @@ files:
339
339
  - app/pb_kits/playbook/pb_background/docs/_background_status.html.erb
340
340
  - app/pb_kits/playbook/pb_background/docs/_background_status.jsx
341
341
  - app/pb_kits/playbook/pb_background/docs/_background_status.md
342
+ - app/pb_kits/playbook/pb_background/docs/_background_status_subtle.html.erb
343
+ - app/pb_kits/playbook/pb_background/docs/_background_status_subtle.jsx
344
+ - app/pb_kits/playbook/pb_background/docs/_background_status_subtle.md
342
345
  - app/pb_kits/playbook/pb_background/docs/_background_white.html.erb
343
346
  - app/pb_kits/playbook/pb_background/docs/_background_white.jsx
344
347
  - app/pb_kits/playbook/pb_background/docs/_description.md
@@ -584,8 +587,14 @@ files:
584
587
  - app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb
585
588
  - app/pb_kits/playbook/pb_collapsible/collapsible_main.rb
586
589
  - app/pb_kits/playbook/pb_collapsible/context.ts
590
+ - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.html.erb
591
+ - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx
592
+ - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.md
587
593
  - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb
588
594
  - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx
595
+ - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.html.erb
596
+ - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx
597
+ - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.md
589
598
  - app/pb_kits/playbook/pb_collapsible/docs/example.yml
590
599
  - app/pb_kits/playbook/pb_collapsible/docs/index.js
591
600
  - app/pb_kits/playbook/pb_collapsible/index.js
@@ -854,7 +863,6 @@ files:
854
863
  - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx
855
864
  - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.md
856
865
  - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx
857
- - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx
858
866
  - app/pb_kits/playbook/pb_file_upload/docs/example.yml
859
867
  - app/pb_kits/playbook/pb_file_upload/docs/index.js
860
868
  - app/pb_kits/playbook/pb_file_upload/fileupload.test.js
@@ -869,12 +877,11 @@ files:
869
877
  - app/pb_kits/playbook/pb_filter/_filter.jsx
870
878
  - app/pb_kits/playbook/pb_filter/_filter.scss
871
879
  - app/pb_kits/playbook/pb_filter/docs/_description.md
872
- - app/pb_kits/playbook/pb_filter/docs/_filter_close_popover.jsx
873
880
  - app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb
874
881
  - app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
875
- - app/pb_kits/playbook/pb_filter/docs/_filter_default.md
876
- - app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb
877
- - app/pb_kits/playbook/pb_filter/docs/_filter_min_width.jsx
882
+ - app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb
883
+ - app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx
884
+ - app/pb_kits/playbook/pb_filter/docs/_filter_max_width.md
878
885
  - app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb
879
886
  - app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx
880
887
  - app/pb_kits/playbook/pb_filter/docs/_filter_no_background.md
@@ -1244,6 +1251,9 @@ files:
1244
1251
  - app/pb_kits/playbook/pb_legend/docs/_legend_colors.html.erb
1245
1252
  - app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx
1246
1253
  - app/pb_kits/playbook/pb_legend/docs/_legend_colors.md
1254
+ - app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.html.erb
1255
+ - app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx
1256
+ - app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.md
1247
1257
  - app/pb_kits/playbook/pb_legend/docs/_legend_default.html.erb
1248
1258
  - app/pb_kits/playbook/pb_legend/docs/_legend_default.jsx
1249
1259
  - app/pb_kits/playbook/pb_legend/docs/_legend_prefix.html.erb
@@ -1423,6 +1433,12 @@ files:
1423
1433
  - app/pb_kits/playbook/pb_online_status/docs/index.js
1424
1434
  - app/pb_kits/playbook/pb_online_status/online_status.html.erb
1425
1435
  - app/pb_kits/playbook/pb_online_status/online_status.rb
1436
+ - app/pb_kits/playbook/pb_pagination/_pagination.scss
1437
+ - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb
1438
+ - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.md
1439
+ - app/pb_kits/playbook/pb_pagination/docs/example.yml
1440
+ - app/pb_kits/playbook/pb_pagination/pagination.html.erb
1441
+ - app/pb_kits/playbook/pb_pagination/pagination.rb
1426
1442
  - app/pb_kits/playbook/pb_passphrase/_passphrase.jsx
1427
1443
  - app/pb_kits/playbook/pb_passphrase/_passphrase.scss
1428
1444
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb
@@ -1950,6 +1966,7 @@ files:
1950
1966
  - app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx
1951
1967
  - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb
1952
1968
  - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx
1969
+ - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md
1953
1970
  - app/pb_kits/playbook/pb_timeline/docs/example.yml
1954
1971
  - app/pb_kits/playbook/pb_timeline/docs/index.js
1955
1972
  - app/pb_kits/playbook/pb_timeline/item.html.erb
@@ -1,51 +0,0 @@
1
- /* @flow */
2
- /* eslint-disable react/no-multi-comp */
3
-
4
- import React, { useState } from 'react'
5
- import {
6
- Body,
7
- FileUpload,
8
- List,
9
- ListItem,
10
- } from '../..'
11
-
12
- const AcceptedFilesList = ({ files }: FileList) => (
13
- <List>
14
- {files.map((file) => (
15
- <ListItem key={file.name}>{file.name}</ListItem>
16
- ))}
17
- </List>
18
- )
19
-
20
- const FileUploadMaxSize = (props) => {
21
- const [filesToUpload, setFilesToUpload] = useState([])
22
- const [error, setError] = useState()
23
-
24
- const handleOnFilesAccepted = (files) => {
25
- setFilesToUpload([...filesToUpload, ...files])
26
- }
27
-
28
- return (
29
- <div>
30
- <AcceptedFilesList
31
- files={filesToUpload}
32
- {...props}
33
- />
34
- <FileUpload
35
- acceptedFilesDescription="Choose a file or drag it here. 1 MB size limit."
36
- maxSize={1000000}
37
- onFilesAccepted={handleOnFilesAccepted}
38
- onFilesRejected={(errorMessage) => setError(errorMessage)}
39
- {...props}
40
- />
41
- { error && (
42
- <Body
43
- color="error"
44
- marginY="md"
45
- >{error}</Body>
46
- )}
47
- </div>
48
- )
49
- }
50
-
51
- export default FileUploadMaxSize
@@ -1,62 +0,0 @@
1
- import React from 'react'
2
- import { Button, Filter, Flex, Select, TextInput } from '../../'
3
-
4
- const FilterClosePopover = (props) => {
5
- const options = [
6
- { value: 'USA' },
7
- { value: 'Canada' },
8
- { value: 'Brazil' },
9
- { value: 'Philippines' },
10
- { value: 'A galaxy far far away, like really far away...' },
11
- ]
12
-
13
- return (
14
- <Filter
15
- {...props}
16
- filters={{
17
- 'Full Name': 'John Wick',
18
- 'City': 'San Francisco',
19
- }}
20
- minWidth="375px"
21
- results={1}
22
- sortOptions={{
23
- popularity: 'Popularity',
24
- // eslint-disable-next-line
25
- manager_title: 'Manager\'s Title',
26
- // eslint-disable-next-line
27
- manager_name: 'Manager\'s Name',
28
- }}
29
- sortValue={[{ name: 'popularity', dir: 'desc' }]}
30
- >
31
- {({ closePopover }) => (
32
- <form>
33
- <TextInput
34
- label="Full Name"
35
- placeholder="Enter name"
36
- />
37
-
38
- <Select
39
- blankSelection="Select One..."
40
- label="Territory"
41
- name="location"
42
- options={options}
43
- />
44
- <Flex
45
- spacing="between"
46
- >
47
- <Button
48
- onClick={closePopover}
49
- text="Apply"
50
- />
51
- <Button
52
- text="Clear"
53
- variant="secondary"
54
- />
55
- </Flex>
56
- </form>
57
- )}
58
- </Filter>
59
- )
60
- }
61
-
62
- export default FilterClosePopover