playbook_ui 11.3.0.pre.alpha1 → 11.4.0.pre.alpha.rubytheme1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (70) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_button/_button.tsx +6 -6
  3. data/app/pb_kits/playbook/pb_circle_icon_button/{_circle_icon_button.jsx → _circle_icon_button.tsx} +6 -10
  4. data/app/pb_kits/playbook/pb_contact/contact.test.js +45 -1
  5. data/app/pb_kits/playbook/pb_currency/{_currency.jsx → _currency.tsx} +17 -12
  6. data/app/pb_kits/playbook/pb_date/_date.tsx +101 -0
  7. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +10 -9
  8. data/app/pb_kits/playbook/pb_date_time/{_date_time.jsx → _date_time.tsx} +2 -5
  9. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +110 -0
  10. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx +1 -1
  11. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx +1 -1
  12. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx +1 -1
  13. data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +32 -14
  14. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +5 -0
  15. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.jsx +2 -2
  16. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.jsx +22 -4
  17. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.jsx +3 -3
  18. data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +79 -17
  19. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +55 -93
  20. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +79 -42
  21. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +80 -0
  22. data/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx +10 -1
  23. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.html.erb +5 -0
  24. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx +26 -0
  25. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.md +1 -0
  26. data/app/pb_kits/playbook/pb_hashtag/docs/example.yml +2 -0
  27. data/app/pb_kits/playbook/pb_hashtag/docs/index.js +1 -0
  28. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +1 -1
  29. data/app/pb_kits/playbook/pb_hashtag/hashtag.rb +6 -0
  30. data/app/pb_kits/playbook/pb_hashtag/hashtag.test.js +54 -0
  31. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +3 -0
  32. data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb +2 -1
  33. data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb +2 -0
  34. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb +12 -0
  35. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx +23 -0
  36. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md +1 -0
  37. data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +3 -0
  38. data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +1 -0
  39. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +4 -0
  40. data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb +2 -1
  41. data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb +4 -1
  42. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -0
  43. data/app/pb_kits/playbook/pb_icon_circle/{_icon_circle.jsx → _icon_circle.tsx} +2 -4
  44. data/app/pb_kits/playbook/pb_kit/{dateTime.js → dateTime.ts} +5 -6
  45. data/app/pb_kits/playbook/pb_label_pill/{_label_pill.jsx → _label_pill.tsx} +2 -4
  46. data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +1 -1
  47. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +1 -1
  48. data/app/pb_kits/playbook/pb_pill/_pill.tsx +1 -1
  49. data/app/pb_kits/playbook/pb_section_separator/{_section_separator.jsx → _section_separator.tsx} +7 -8
  50. data/app/pb_kits/playbook/pb_time/_time.tsx +92 -0
  51. data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx +1 -1
  52. data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx +1 -1
  53. data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx +1 -1
  54. data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx +1 -1
  55. data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx +1 -1
  56. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx +1 -1
  57. data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
  58. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb +37 -0
  59. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md +1 -0
  60. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  61. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -2
  62. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +10 -2
  63. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx +1 -1
  64. data/app/pb_kits/playbook/tokens/_colors.scss +74 -74
  65. data/dist/reset.css +1 -60
  66. data/lib/playbook/version.rb +2 -2
  67. metadata +23 -13
  68. data/app/pb_kits/playbook/pb_date/_date.jsx +0 -138
  69. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +0 -93
  70. data/app/pb_kits/playbook/pb_time/_time.jsx +0 -90
data/app/pb_kits/playbook/pb_typeahead/typeahead.rb CHANGED
@@ -19,6 +19,10 @@ module Playbook
19
19
  default: []
20
20
  prop :input_options, type: Playbook::Props::Hash,
21
21
  default: {}
22
+
23
+ prop :is_multi, type: Playbook::Props::Boolean,
24
+ default: true
25
+
22
26
  prop :pills, type: Playbook::Props::Boolean,
23
27
  default: false
24
28
 
@@ -45,13 +49,17 @@ module Playbook
45
49
  )
46
50
  end
47
51
 
48
- def typeahead_with_pills_options
52
+ def is_react?
53
+ pills || !is_multi
54
+ end
55
+
56
+ def typeahead_react_options
49
57
  base_options = {
50
58
  dark: dark,
51
59
  defaultValue: default_options,
52
60
  id: id,
53
61
  inline: inline,
54
- isMulti: true,
62
+ isMulti: is_multi,
55
63
  label: label,
56
64
  multiKit: multi_kit,
57
65
  name: name,
data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx CHANGED
@@ -8,7 +8,7 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
8
8
  import Caption from '../pb_caption/_caption'
9
9
  import Title from '../pb_title/_title'
10
10
 
11
- import DateTime from '../pb_kit/dateTime.js'
11
+ import DateTime from '../pb_kit/dateTime'
12
12
 
13
13
  type WeekdayStackedProps = {
14
14
  align?: "left" | "center" | "right",
data/app/pb_kits/playbook/tokens/_colors.scss CHANGED
@@ -5,15 +5,15 @@ Base colors should not be documented.
5
5
  Only document color use.
6
6
 
7
7
  Colors -----------------------------*/
8
- $royal: #0056CF;
9
- $purple: #9E64E9;
10
- $teal: #00C4D7;
11
- $red: #FF2229;
12
- $red_dark: #ff4a50;
13
- $yellow: #F9BB00;
14
- $green: #00CA74;
15
- $orange: #FD804C;
16
- $default: #93a8b8;
8
+ $royal: #0056CF !default;
9
+ $purple: #9E64E9 !default;
10
+ $teal: #00C4D7 !default;
11
+ $red: #FF2229 !default;
12
+ $red_dark: #ff4a50 !default;
13
+ $yellow: #F9BB00 !default;
14
+ $green: #00CA74 !default;
15
+ $orange: #FD804C !default;
16
+ $default: #93a8b8 !default;
17
17
  $colors: (
18
18
  royal: $royal,
19
19
  purple: $purple,
@@ -26,15 +26,15 @@ $colors: (
26
26
  );
27
27
 
28
28
  /* Specialty Gradient -----------------*/
29
- $gradient_start: #1C75F2;
30
- $gradient_end: $royal;
29
+ $gradient_start: #1C75F2 !default;
30
+ $gradient_end: $royal !default;
31
31
 
32
32
  /* Interface colors -------------------*/
33
- $white: #FFFFFF;
34
- $silver: #F3F7FB;
35
- $slate: #C1CDD6;
36
- $charcoal: #242B42;
37
- $black: #000000;
33
+ $white: #FFFFFF !default;
34
+ $silver: #F3F7FB !default;
35
+ $slate: #C1CDD6 !default;
36
+ $charcoal: #242B42 !default;
37
+ $black: #000000 !default;
38
38
 
39
39
  $interface_colors: (
40
40
  white: $white,
@@ -46,9 +46,9 @@ $interface_colors: (
46
46
  );
47
47
 
48
48
  /* Main colors ------------------------*/
49
- $primary: $royal;
50
- $secondary: $yellow;
51
- $tertiary: $purple;
49
+ $primary: $royal !default;
50
+ $secondary: $yellow !default;
51
+ $tertiary: $purple !default;
52
52
  $main_colors: (
53
53
  primary: $primary,
54
54
  secondary: $secondary,
@@ -57,29 +57,29 @@ $main_colors: (
57
57
  /*=====================================
58
58
 
59
59
  Background colors ------------------*/
60
- $bg_light: $silver;
61
- $bg_dark: #0a0527;
60
+ $bg_light: $silver !default;
61
+ $bg_dark: #0a0527 !default;
62
62
  $background_colors: (
63
63
  bg_light: $bg_light,
64
64
  bg_dark: $bg_dark
65
65
  );
66
66
 
67
67
  /* Card colors ------------------*/
68
- $card_light: $white;
68
+ $card_light: $white !default;
69
69
  $card_dark: rgba($white, $opacity_1);
70
70
  $card_colors: (
71
71
  card_light: $card_light,
72
72
  card_dark: $card_dark
73
73
  );
74
74
 
75
- $primary-action: $primary;
75
+ $primary-action: $primary !default;
76
76
  $action_colors: (
77
77
  primary_action: $primary-action
78
78
  );
79
79
 
80
80
  /* Active colors ----------------------*/
81
81
  $active_light: lighten(#E5F2FF, 3.5%);
82
- $active_dark: #0082ff;
82
+ $active_dark: #0082ff !default;
83
83
  $active_colors: (
84
84
  active_light: $active_light,
85
85
  active_dark: $active_dark
@@ -102,7 +102,7 @@ $focus_input_colors: (
102
102
  );
103
103
 
104
104
  /* Border colors ----------------------*/
105
- $border_light: #E4E8F0;
105
+ $border_light: #E4E8F0 !default;
106
106
  $border_dark: rgba($white, $opacity_1);
107
107
  $border_colors: (
108
108
  border_light: $border_light,
@@ -116,10 +116,10 @@ $shadow_colors: (
116
116
  );
117
117
 
118
118
  /* Text colors ------------------------*/
119
- $text_lt_default: $charcoal;
120
- $text_lt_light: #687887;
121
- $text_lt_lighter: $slate;
122
- $text_dk_default: $white;
119
+ $text_lt_default: $charcoal !default;
120
+ $text_lt_light: #687887 !default;
121
+ $text_lt_lighter: $slate !default;
122
+ $text_dk_default: $white !default;
123
123
  $text_dk_light: rgba($white, $opacity_6);
124
124
  $text_dk_lighter: rgba($white, $opacity_4);
125
125
  $text_colors: (
@@ -132,14 +132,14 @@ $text_colors: (
132
132
  );
133
133
 
134
134
  /* Data colors ------------------------*/
135
- $data_1: $royal;
136
- $data_2: $yellow;
137
- $data_3: $purple;
138
- $data_4: $green;
139
- $data_5: $orange;
140
- $data_6: #144075;
141
- $data_7: $teal;
142
- $data_8: $red;
135
+ $data_1: $royal !default;
136
+ $data_2: $yellow !default;
137
+ $data_3: $purple !default;
138
+ $data_4: $green !default;
139
+ $data_5: $orange !default;
140
+ $data_6: #144075 !default;
141
+ $data_7: $teal !default;
142
+ $data_8: $red !default;
143
143
  $data_colors: (
144
144
  data_1: $data_1,
145
145
  data_2: $data_2,
@@ -152,19 +152,19 @@ $data_colors: (
152
152
  );
153
153
 
154
154
  /* Status colors ----------------------*/
155
- $success: $green;
155
+ $success: $green !default;
156
156
  $success_secondary: lighten($success, 10%);
157
- $warning: $yellow;
157
+ $warning: $yellow !default;
158
158
  $warning_secondary: lighten($warning, 10%);
159
- $error: $red;
160
- $error_dark: $red_dark;
159
+ $error: $red !default;
160
+ $error_dark: $red_dark !default;
161
161
  $error_dark_body: lighten($error_dark, 2%);
162
162
  $error_secondary: lighten($error, 10%);
163
- $info: $teal;
163
+ $info: $teal !default;
164
164
  $info_secondary : lighten($info, 10%);
165
- $neutral: $slate;
165
+ $neutral: $slate !default;
166
166
  $neutral_secondary: lighten($neutral, 10%);
167
- $primary: $primary;
167
+ $primary: $primary !default;
168
168
  $primary_secondary: lighten($primary, 10%);
169
169
 
170
170
  $status_colors: (
@@ -194,16 +194,16 @@ $status_color_text: (
194
194
  );
195
195
 
196
196
  /* Link colors ------------------------*/
197
- $primary_action: $primary;
197
+ $primary_action: $primary !default;
198
198
 
199
199
  /* Product colors ---------------------*/
200
- $windows: $royal;
201
- $siding: $yellow;
202
- $doors: $teal;
203
- $solar: $green;
204
- $roofing: $slate;
205
- $gutters: $purple;
206
- $insulation: $red;
200
+ $windows: $royal !default;
201
+ $siding: $yellow !default;
202
+ $doors: $teal !default;
203
+ $solar: $green !default;
204
+ $roofing: $slate !default;
205
+ $gutters: $purple !default;
206
+ $insulation: $red !default;
207
207
  $product_colors: (
208
208
  windows: $windows,
209
209
  siding: $siding,
@@ -215,27 +215,27 @@ $product_colors: (
215
215
  );
216
216
 
217
217
  /* Category colors ---------------------*/
218
- $category_1: $royal;
219
- $category_2: #0CD2E5;
220
- $category_3: $yellow;
221
- $category_4: #14D595;
222
- $category_5: #A057FF;
223
- $category_6: #FF7034;
224
- $category_7: #97DA22;
225
- $category_8: #EA599F;
226
- $category_9: #0091FF;
227
- $category_10: #5027E4;
228
- $category_11: $red;
229
- $category_12: #109922;
230
- $category_13: #058F9D;
231
- $category_14: #A33E6F;
232
- $category_15: #B2171C;
233
- $category_16: #0A5C49;
234
- $category_17: #325B91;
235
- $category_18: #BE4714;
236
- $category_19: #000080;
237
- $category_20: #5C0E0A;
238
- $category_21: #040830;
218
+ $category_1: $royal !default;
219
+ $category_2: #0CD2E5 !default;
220
+ $category_3: $yellow !default;
221
+ $category_4: #14D595 !default;
222
+ $category_5: #A057FF !default;
223
+ $category_6: #FF7034 !default;
224
+ $category_7: #97DA22 !default;
225
+ $category_8: #EA599F !default;
226
+ $category_9: #0091FF !default;
227
+ $category_10: #5027E4 !default;
228
+ $category_11: $red !default;
229
+ $category_12: #109922 !default;
230
+ $category_13: #058F9D !default;
231
+ $category_14: #A33E6F !default;
232
+ $category_15: #B2171C !default;
233
+ $category_16: #0A5C49 !default;
234
+ $category_17: #325B91 !default;
235
+ $category_18: #BE4714 !default;
236
+ $category_19: #000080 !default;
237
+ $category_20: #5C0E0A !default;
238
+ $category_21: #040830 !default;
239
239
  $category_colors: (
240
240
  category_1: $category_1,
241
241
  category_2: $category_2,
@@ -260,7 +260,7 @@ $category_colors: (
260
260
  category_21: $category_21
261
261
  );
262
262
 
263
- $transparent: transparent;
263
+ $transparent: transparent !default;
264
264
 
265
265
  @function tint($color, $percentage) {
266
266
  @return mix($white, $color, $percentage);
data/dist/reset.css CHANGED
@@ -1,61 +1,2 @@
1
- /* CLEAN UP AND REMOVE */
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
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "11.2.7"
5
- VERSION = "11.3.0.pre.alpha1"
4
+ PREVIOUS_VERSION = "11.4.0"
5
+ VERSION = "11.4.0.pre.alpha.rubytheme1"
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.3.0.pre.alpha1
4
+ version: 11.4.0.pre.alpha.rubytheme1
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-08-23 00:00:00.000000000 Z
12
+ date: 2022-09-09 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -553,8 +553,8 @@ files:
553
553
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx
554
554
  - app/pb_kits/playbook/pb_circle_chart/docs/example.yml
555
555
  - app/pb_kits/playbook/pb_circle_chart/docs/index.js
556
- - app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx
557
556
  - app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
557
+ - app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx
558
558
  - app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb
559
559
  - app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb
560
560
  - app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js
@@ -597,8 +597,8 @@ files:
597
597
  - app/pb_kits/playbook/pb_contact/docs/_description.md
598
598
  - app/pb_kits/playbook/pb_contact/docs/example.yml
599
599
  - app/pb_kits/playbook/pb_contact/docs/index.js
600
- - app/pb_kits/playbook/pb_currency/_currency.jsx
601
600
  - app/pb_kits/playbook/pb_currency/_currency.scss
601
+ - app/pb_kits/playbook/pb_currency/_currency.tsx
602
602
  - app/pb_kits/playbook/pb_currency/currency.html.erb
603
603
  - app/pb_kits/playbook/pb_currency/currency.rb
604
604
  - app/pb_kits/playbook/pb_currency/currency.test.js
@@ -633,8 +633,8 @@ files:
633
633
  - app/pb_kits/playbook/pb_dashboard_value/docs/_description.md
634
634
  - app/pb_kits/playbook/pb_dashboard_value/docs/example.yml
635
635
  - app/pb_kits/playbook/pb_dashboard_value/docs/index.js
636
- - app/pb_kits/playbook/pb_date/_date.jsx
637
636
  - app/pb_kits/playbook/pb_date/_date.scss
637
+ - app/pb_kits/playbook/pb_date/_date.tsx
638
638
  - app/pb_kits/playbook/pb_date/date.html.erb
639
639
  - app/pb_kits/playbook/pb_date/date.rb
640
640
  - app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb
@@ -750,8 +750,9 @@ files:
750
750
  - app/pb_kits/playbook/pb_date_stacked/docs/_footer.md
751
751
  - app/pb_kits/playbook/pb_date_stacked/docs/example.yml
752
752
  - app/pb_kits/playbook/pb_date_stacked/docs/index.js
753
- - app/pb_kits/playbook/pb_date_time/_date_time.jsx
754
753
  - app/pb_kits/playbook/pb_date_time/_date_time.scss
754
+ - app/pb_kits/playbook/pb_date_time/_date_time.tsx
755
+ - app/pb_kits/playbook/pb_date_time/dateTime.test.js
755
756
  - app/pb_kits/playbook/pb_date_time/date_time.html.erb
756
757
  - app/pb_kits/playbook/pb_date_time/date_time.rb
757
758
  - app/pb_kits/playbook/pb_date_time/docs/_date_time_align.html.erb
@@ -871,8 +872,8 @@ files:
871
872
  - app/pb_kits/playbook/pb_filter/docs/index.js
872
873
  - app/pb_kits/playbook/pb_filter/filter.html.erb
873
874
  - app/pb_kits/playbook/pb_filter/filter.rb
874
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx
875
875
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss
876
+ - app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx
876
877
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md
877
878
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb
878
879
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx
@@ -1012,10 +1013,14 @@ files:
1012
1013
  - app/pb_kits/playbook/pb_hashtag/docs/_footer.md
1013
1014
  - app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.html.erb
1014
1015
  - app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx
1016
+ - app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.html.erb
1017
+ - app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx
1018
+ - app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.md
1015
1019
  - app/pb_kits/playbook/pb_hashtag/docs/example.yml
1016
1020
  - app/pb_kits/playbook/pb_hashtag/docs/index.js
1017
1021
  - app/pb_kits/playbook/pb_hashtag/hashtag.html.erb
1018
1022
  - app/pb_kits/playbook/pb_hashtag/hashtag.rb
1023
+ - app/pb_kits/playbook/pb_hashtag/hashtag.test.js
1019
1024
  - app/pb_kits/playbook/pb_highlight/_highlight.scss
1020
1025
  - app/pb_kits/playbook/pb_highlight/_highlight.tsx
1021
1026
  - app/pb_kits/playbook/pb_highlight/docs/_description.md
@@ -1038,6 +1043,9 @@ files:
1038
1043
  - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.html.erb
1039
1044
  - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx
1040
1045
  - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.md
1046
+ - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb
1047
+ - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx
1048
+ - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md
1041
1049
  - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_modified.html.erb
1042
1050
  - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_modified.jsx
1043
1051
  - app/pb_kits/playbook/pb_home_address_street/docs/example.yml
@@ -1073,8 +1081,8 @@ files:
1073
1081
  - app/pb_kits/playbook/pb_icon/docs/index.js
1074
1082
  - app/pb_kits/playbook/pb_icon/icon.html.erb
1075
1083
  - app/pb_kits/playbook/pb_icon/icon.rb
1076
- - app/pb_kits/playbook/pb_icon_circle/_icon_circle.jsx
1077
1084
  - app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
1085
+ - app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx
1078
1086
  - app/pb_kits/playbook/pb_icon_circle/docs/_description.md
1079
1087
  - app/pb_kits/playbook/pb_icon_circle/docs/_footer.md
1080
1088
  - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb
@@ -1130,10 +1138,10 @@ files:
1130
1138
  - app/pb_kits/playbook/pb_image/image.html.erb
1131
1139
  - app/pb_kits/playbook/pb_image/image.rb
1132
1140
  - app/pb_kits/playbook/pb_image/image.test.js
1133
- - app/pb_kits/playbook/pb_kit/dateTime.js
1141
+ - app/pb_kits/playbook/pb_kit/dateTime.ts
1134
1142
  - app/pb_kits/playbook/pb_kit/pb_date_time.rb
1135
- - app/pb_kits/playbook/pb_label_pill/_label_pill.jsx
1136
1143
  - app/pb_kits/playbook/pb_label_pill/_label_pill.scss
1144
+ - app/pb_kits/playbook/pb_label_pill/_label_pill.tsx
1137
1145
  - app/pb_kits/playbook/pb_label_pill/docs/_description.md
1138
1146
  - app/pb_kits/playbook/pb_label_pill/docs/_footer.md
1139
1147
  - app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.html.erb
@@ -1567,8 +1575,8 @@ files:
1567
1575
  - app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb
1568
1576
  - app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js
1569
1577
  - app/pb_kits/playbook/pb_rich_text_editor/useFocus.js
1570
- - app/pb_kits/playbook/pb_section_separator/_section_separator.jsx
1571
1578
  - app/pb_kits/playbook/pb_section_separator/_section_separator.scss
1579
+ - app/pb_kits/playbook/pb_section_separator/_section_separator.tsx
1572
1580
  - app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss
1573
1581
  - app/pb_kits/playbook/pb_section_separator/docs/_description.md
1574
1582
  - app/pb_kits/playbook/pb_section_separator/docs/_footer.md
@@ -1860,8 +1868,8 @@ files:
1860
1868
  - app/pb_kits/playbook/pb_textarea/index.js
1861
1869
  - app/pb_kits/playbook/pb_textarea/textarea.html.erb
1862
1870
  - app/pb_kits/playbook/pb_textarea/textarea.rb
1863
- - app/pb_kits/playbook/pb_time/_time.jsx
1864
1871
  - app/pb_kits/playbook/pb_time/_time.scss
1872
+ - app/pb_kits/playbook/pb_time/_time.tsx
1865
1873
  - app/pb_kits/playbook/pb_time/docs/_description.md
1866
1874
  - app/pb_kits/playbook/pb_time/docs/_footer.md
1867
1875
  - app/pb_kits/playbook/pb_time/docs/_time_align.html.erb
@@ -2064,6 +2072,8 @@ files:
2064
2072
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb
2065
2073
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx
2066
2074
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md
2075
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb
2076
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md
2067
2077
  - app/pb_kits/playbook/pb_typeahead/docs/example.yml
2068
2078
  - app/pb_kits/playbook/pb_typeahead/docs/index.js
2069
2079
  - app/pb_kits/playbook/pb_typeahead/index.js
@@ -2268,7 +2278,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
2268
2278
  - !ruby/object:Gem::Version
2269
2279
  version: 1.3.1
2270
2280
  requirements: []
2271
- rubygems_version: 3.3.7
2281
+ rubygems_version: 3.3.21
2272
2282
  signing_key:
2273
2283
  specification_version: 4
2274
2284
  summary: Playbook Design System
data/app/pb_kits/playbook/pb_date/_date.jsx DELETED
@@ -1,138 +0,0 @@
1
- /* @flow */
2
-
3
- import React from 'react'
4
- import classnames from 'classnames'
5
-
6
- import DateTime from '../pb_kit/dateTime'
7
- import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
8
- import { globalProps } from '../utilities/globalProps'
9
-
10
- import Body from '../pb_body/_body'
11
- import Caption from '../pb_caption/_caption'
12
- import Icon from '../pb_icon/_icon'
13
- import Title from '../pb_title/_title'
14
-
15
- type PbDateProps = {
16
- alignment?: "left" | "center" | "right",
17
- aria: Object,
18
- className?: string,
19
- data?: Object,
20
- id?: string,
21
- showDayOfWeek?: boolean,
22
- showIcon?: boolean,
23
- size?: string,
24
- value: string | date,
25
- }
26
-
27
- const PbDate = (props: PbDateProps) => {
28
- const {
29
- aria = {},
30
- alignment = 'left',
31
- className,
32
- data = {},
33
- id,
34
- showDayOfWeek = false,
35
- showIcon = false,
36
- size = 'md',
37
- value,
38
- } = props
39
-
40
- const dateTimestamp = new DateTime({ value: value })
41
- const weekday = dateTimestamp.toWeekday()
42
- const month = dateTimestamp.toMonth()
43
- const day = dateTimestamp.toDay()
44
- const year = dateTimestamp.toYear()
45
- const currentYear = new Date().getFullYear().toString()
46
-
47
- const ariaProps = buildAriaProps(aria)
48
- const dataProps = buildDataProps(data)
49
-
50
- const classes = classnames(
51
- buildCss('pb_date_kit', alignment),
52
- globalProps(props),
53
- className
54
- )
55
-
56
- return (
57
- <div
58
- {...ariaProps}
59
- {...dataProps}
60
- className={classes}
61
- id={id}
62
- >
63
- <If condition={size == 'md' || size == 'lg'}>
64
-
65
- <Title
66
- size={4}
67
- tag="h4"
68
- >
69
- <If condition={showIcon}>
70
- <Body
71
- className="pb_icon_kit_container"
72
- color="light"
73
- tag="span"
74
- >
75
- <Icon
76
- fixedWidth
77
- icon="calendar-alt"
78
- />
79
- </Body>
80
- </If>
81
- <If condition={showDayOfWeek}>
82
- {weekday}
83
- <Body
84
- color="light"
85
- tag="span"
86
- text=" • "
87
- />
88
- </If>
89
- <span>
90
- {month}
91
- {' '}
92
- {day}
93
- </span>
94
- <If condition={currentYear != year}>
95
- <span>
96
- {`, ${year}`}
97
- </span>
98
- </If>
99
- </Title>
100
- <Else />
101
- <>
102
- <If condition={showIcon}>
103
- <Caption
104
- className="pb_icon_kit_container"
105
- tag="span"
106
- >
107
- <Icon
108
- fixedWidth
109
- icon="calendar-alt"
110
- size="sm"
111
- />
112
- </Caption>
113
- </If>
114
- <If condition={showDayOfWeek}>
115
- <Caption tag="div">
116
- {weekday}
117
- </Caption>
118
- <Caption
119
- color="light"
120
- tag="div"
121
- text=" • "
122
- />
123
- </If>
124
- <Caption tag="span">
125
- {month}
126
- {' '}
127
- {day}
128
- <If condition={currentYear != year}>
129
- {`, ${year}`}
130
- </If>
131
- </Caption>
132
- </>
133
- </If>
134
- </div>
135
- )
136
- }
137
-
138
- export default PbDate