playbook_ui 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown756 → 12.24.0.pre.alpha.alphatestforselfhostfak720

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date/_date.tsx +42 -96
  3. data/app/pb_kits/playbook/pb_date/date.html.erb +2 -22
  4. data/app/pb_kits/playbook/pb_date/date.rb +0 -2
  5. data/app/pb_kits/playbook/pb_date/docs/example.yml +4 -4
  6. data/app/pb_kits/playbook/pb_date/docs/index.js +0 -1
  7. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +0 -26
  8. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +95 -99
  9. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +2 -3
  10. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +1 -1
  11. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +1 -44
  12. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +2 -34
  13. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -2
  14. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -2
  15. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss +2 -3
  16. data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +311 -0
  17. data/app/pb_kits/playbook/pb_docs/kit_api.rb +149 -0
  18. data/app/pb_kits/playbook/pb_docs/kit_example.rb +2 -0
  19. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -1
  20. data/app/pb_kits/playbook/pb_icon/icon.rb +1 -1
  21. data/app/pb_kits/playbook/pb_nav/_item.tsx +1 -1
  22. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +1 -1
  23. data/app/pb_kits/playbook/pb_time/_time.tsx +35 -71
  24. data/app/pb_kits/playbook/pb_time/docs/example.yml +0 -2
  25. data/app/pb_kits/playbook/pb_time/docs/index.js +0 -1
  26. data/app/pb_kits/playbook/pb_time/time.html.erb +7 -26
  27. data/app/pb_kits/playbook/pb_time/time.rb +0 -2
  28. data/app/pb_kits/playbook/pb_title/_title.scss +1 -2
  29. data/app/pb_kits/playbook/pb_title/_title.tsx +2 -3
  30. data/app/pb_kits/playbook/pb_title/title.rb +3 -10
  31. data/app/pb_kits/playbook/pb_title/title.test.js +3 -3
  32. data/lib/playbook/markdown/helper.rb +132 -0
  33. data/lib/playbook/markdown.rb +3 -0
  34. data/lib/playbook/version.rb +1 -1
  35. data/lib/playbook.rb +2 -1
  36. metadata +36 -17
  37. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.html.erb +0 -30
  38. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +0 -47
  39. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.md +0 -1
  40. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.html.erb +0 -8
  41. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.jsx +0 -18
  42. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +0 -164
  43. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss +0 -75
  44. data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.html.erb +0 -37
  45. data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.jsx +0 -58
  46. data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.md +0 -1
  47. data/dist/playbook-rails.js +0 -323
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 545f767b2aa613f9d6490c5bf7bc6d06bb8736a2f06aa1e3a055ad0cb61bd060
4
- data.tar.gz: 37ac24266bff35f8d6abf8cbff56e5e0edcc386a1de31f6d28e1633f5a932cf7
3
+ metadata.gz: b3b13169f586e341df32591e1f4eb45be130542c63cd46fe75eb5531c4bbf24f
4
+ data.tar.gz: 83c4990a0869cc25b21de2b66fc9a9e75c795c0c0059dc74b36c2ce4120610e7
5
5
  SHA512:
6
- metadata.gz: 5dbf9d8ef59601a795eda0dc0665a438413454d06fc035b28d01bc78ff2b562b16d96c26615f37f3db5c21bfede6064e93a78cae6ab93ccbc89c2aa4f3b297a0
7
- data.tar.gz: c9008cfc3ad1571970c45003a7ca4a4aa71387cd9e3dfdc7bdd03d09d0a4f3d36583f83c2f598597138df99990177dd16b56153a8fc01ffa60af34c3fd5c692e
6
+ metadata.gz: 60b9622512359115f3de5947c595579c1b017f2796602cbc2bf4fd70fc8f3289290edb4689db5fbdb41d9d00c9949824f75842f6815b4fefaaa3ad8e29b64e9b
7
+ data.tar.gz: 44815fdcd43a9648420d85d9bebee3a167f7b22841ced941637c4f989d7b6c0d18f06f1398ca8083e5f0e81093ee8d01342782b6d19e618a85818ab7fa2be71b
data/app/pb_kits/playbook/pb_date/_date.tsx CHANGED
@@ -19,7 +19,6 @@ type PbDateProps = {
19
19
  showDayOfWeek?: boolean;
20
20
  showIcon?: boolean;
21
21
  size?: "sm" | "md" | "lg";
22
- unstyled?: boolean;
23
22
  value: string | Date;
24
23
  };
25
24
 
@@ -33,7 +32,6 @@ const PbDate = (props: PbDateProps) => {
33
32
  showDayOfWeek = false,
34
33
  showIcon = false,
35
34
  size = "md",
36
- unstyled = false,
37
35
  value,
38
36
  } = props;
39
37
 
@@ -54,100 +52,48 @@ const PbDate = (props: PbDateProps) => {
54
52
  );
55
53
 
56
54
  return (
57
- <div {...ariaProps}
58
- {...dataProps}
59
- className={classes}
60
- id={id}
61
- >
62
- {unstyled
63
- ? <>
64
- {showIcon && (
65
- <div>
66
- <Icon fixedWidth
67
- icon="calendar-alt"
68
- />
69
- </div>
70
- )}
71
-
72
- {showDayOfWeek && (
73
- <>
74
- <div>
75
- {weekday}
76
- </div>
77
-
78
- <div>{"•"}</div>
79
- </>
80
- )}
81
-
82
- <span>
83
- <span>
84
- {month} {day}
85
- </span>
86
-
87
- {currentYear != year && <span>{`, ${year}`}</span>}
88
- </span>
89
- </>
90
- : size == "md" || size == "lg"
91
- ? (
92
- <Title size={4}
93
- tag="h4"
94
- >
95
- {showIcon && (
96
- <Body className="pb_icon_kit_container"
97
- color="light"
98
- tag="span"
99
- >
100
- <Icon fixedWidth
101
- icon="calendar-alt"
102
- />
103
- </Body>
104
- )}
105
-
106
- {showDayOfWeek && (
107
- <>
108
- {weekday}
109
- <Body color="light"
110
- tag="span"
111
- text=" • "
112
- />
113
- </>
114
- )}
115
-
116
- <span>
117
- {month} {day}
118
- </span>
119
- {currentYear != year && <span>{`, ${year}`}</span>}
120
- </Title>
121
- )
122
- : (
123
- <>
124
- {showIcon && (
125
- <Caption className="pb_icon_kit_container"
126
- tag="span"
127
- >
128
- <Icon fixedWidth
129
- icon="calendar-alt"
130
- size="sm"
131
- />
132
- </Caption>
133
- )}
134
-
135
- {showDayOfWeek && (
136
- <>
137
- <Caption tag="div">{weekday}</Caption>
138
- <Caption color="light"
139
- tag="div"
140
- text=" • "
141
- />
142
- </>
143
- )}
144
-
145
- <Caption tag="span">
146
- {month} {day}
147
- {currentYear != year && <>{`, ${year}`}</>}
148
- </Caption>
149
- </>
150
- )}
55
+ <div {...ariaProps} {...dataProps} className={classes} id={id}>
56
+ {size == "md" || size == "lg" ? (
57
+ <Title size={4} tag="h4">
58
+ {showIcon && (
59
+ <Body className="pb_icon_kit_container" color="light" tag="span">
60
+ <Icon fixedWidth icon="calendar-alt" />
61
+ </Body>
62
+ )}
63
+
64
+ {showDayOfWeek && (
65
+ <>
66
+ {weekday}
67
+ <Body color="light" tag="span" text=" • " />
68
+ </>
69
+ )}
70
+
71
+ <span>
72
+ {month} {day}
73
+ </span>
74
+ {currentYear != year && <span>{`, ${year}`}</span>}
75
+ </Title>
76
+ ) : (
77
+ <>
78
+ {showIcon && (
79
+ <Caption className="pb_icon_kit_container" tag="span">
80
+ <Icon fixedWidth icon="calendar-alt" size="sm" />
81
+ </Caption>
82
+ )}
83
+
84
+ {showDayOfWeek && (
85
+ <>
86
+ <Caption tag="div">{weekday}</Caption>
87
+ <Caption color="light" tag="div" text=" • " />
88
+ </>
89
+ )}
90
+
91
+ <Caption tag="span">
92
+ {month} {day}
93
+ {currentYear != year && <>{`, ${year}`}</>}
94
+ </Caption>
95
+ </>
96
+ )}
151
97
  </div>
152
98
  );
153
99
  };
data/app/pb_kits/playbook/pb_date/date.html.erb CHANGED
@@ -4,28 +4,7 @@
4
4
  class: object.classname,
5
5
  aria: object.aria) do %>
6
6
 
7
- <% if object.unstyled %>
8
- <!-- icon -->
9
- <% if object.show_icon %>
10
- <div><%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %></div>
11
- <% end %>
12
-
13
- <!-- day_of_week -->
14
- <% if object.show_day_of_week %>
15
- <div><%= object.day_of_week %></div>
16
- <div>•</div>
17
- <% end %>
18
-
19
- <!-- month day, year -->
20
- <%# if not current year %>
21
- <% if object.year.to_s == DateTime.now.year.to_s %>
22
- <span><%= "#{object.month} #{object.day}" %></span>
23
- <%# if is current year %>
24
- <% else %>
25
- <span><%= "#{object.month} #{object.day}, #{object.year}" %></span>
26
- <% end %>
27
-
28
- <% elsif object.size == "md" || object.size == "lg" %>
7
+ <% if object.size == "md" %>
29
8
  <!-- icon -->
30
9
  <% if object.show_icon %>
31
10
  <%= pb_rails("body", props: {
@@ -57,6 +36,7 @@
57
36
  <% end %>
58
37
 
59
38
  <% else %>
39
+
60
40
  <!-- icon -->
61
41
  <% if object.show_icon %>
62
42
  <%= pb_rails("caption", props: {
data/app/pb_kits/playbook/pb_date/date.rb CHANGED
@@ -15,8 +15,6 @@ module Playbook
15
15
  values: %w[lg md sm xs],
16
16
  default: "md"
17
17
  prop :timezone, default: "America/New_York"
18
- prop :unstyled, type: Playbook::Props::Boolean,
19
- default: false
20
18
 
21
19
  def classname
22
20
  generate_classname("pb_date_kit", alignment)
data/app/pb_kits/playbook/pb_date/docs/example.yml CHANGED
@@ -1,14 +1,14 @@
1
1
  examples:
2
-
2
+
3
3
  rails:
4
4
  - date_default: Default
5
5
  - date_variants: Variants
6
6
  - date_alignment: Alignment
7
7
  - date_timezone: Timezones
8
- - date_unstyled: Unstyled
9
-
8
+
9
+
10
10
  react:
11
11
  - date_default: Default
12
12
  - date_variants: Variants
13
13
  - date_alignment: Alignment
14
- - date_unstyled: Unstyled
14
+
data/app/pb_kits/playbook/pb_date/docs/index.js CHANGED
@@ -1,4 +1,3 @@
1
1
  export { default as DateDefault } from './_date_default.jsx'
2
2
  export { default as DateVariants } from './_date_variants.jsx'
3
3
  export { default as DateAlignment } from './_date_alignment.jsx'
4
- export { default as DateUnstyled } from './_date_unstyled.jsx'
data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss CHANGED
@@ -6,7 +6,6 @@
6
6
  @import "./sass_partials/month_and_year_styles";
7
7
  @import "./sass_partials/time_selection_styles";
8
8
  @import "./sass_partials/input_styles";
9
- @import "./sass_partials/quick_pick_styles";
10
9
 
11
10
  [class^=pb_date_picker_kit] {
12
11
  .input_wrapper {
@@ -27,32 +26,7 @@
27
26
  @include transition_default;
28
27
  border-color: $primary;
29
28
  }
30
- .add-on-card {
31
- border-color: $primary;
32
- }
33
- }
34
-
35
- @media (hover: hover) {
36
- &:hover {
37
- .add-on-card {
38
- cursor: pointer;
39
- background-color: rgba($focus_input_light,$opacity_5);
40
- }
41
- }
42
- }
43
- .text_input_wrapper_add_on .add-on-icon {
44
- color: $text_lt_light
45
29
  }
46
-
47
- .text_input_wrapper_add_on .add-on-right .text_input{
48
- cursor: pointer;
49
- }
50
-
51
- }
52
-
53
-
54
- .pb_popover_reference_wrapper {
55
- display: unset !important
56
30
  }
57
31
 
58
32
  .flatpickr-calendar {
data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx CHANGED
@@ -30,7 +30,7 @@ type DatePickerProps = {
30
30
  inputAria?: { [key: string]: string },
31
31
  inputData?: { [key: string]: string },
32
32
  inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
33
- inputValue?: string,
33
+ inputValue?: any,
34
34
  label?: string,
35
35
  maxDate: string,
36
36
  minDate: string,
@@ -39,7 +39,7 @@ type DatePickerProps = {
39
39
  placeholder?: string,
40
40
  positionElement?: HTMLElement | null,
41
41
  scrollContainer?: string,
42
- selectionType?: "month" | "week"| "quickpick",
42
+ selectionType?: "month" | "week",
43
43
  showTimezone?: boolean,
44
44
  staticPosition: boolean,
45
45
  timeFormat?: string,
@@ -96,46 +96,46 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
96
96
  const inputAriaProps = buildAriaProps(inputAria)
97
97
  const inputDataProps = buildDataProps(inputData)
98
98
 
99
- useEffect(() => {
100
- datePickerHelper({
101
- allowInput,
102
- defaultDate,
103
- disableDate,
104
- disableRange,
105
- disableWeekdays,
106
- enableTime,
107
- format,
108
- hideIcon,
109
- inLine,
110
- maxDate,
111
- minDate,
112
- mode,
113
- onChange,
114
- onClose,
115
- pickerId,
116
- plugins,
117
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
118
- // @ts-ignore
119
- position,
120
- positionElement,
121
- selectionType,
122
- showTimezone,
123
- staticPosition,
124
- yearRange,
125
- required: false,
126
- }, scrollContainer)
127
- })
128
99
  const filteredProps = {...props}
129
100
  delete filteredProps?.position
130
101
 
131
102
  const classes = classnames(
132
103
  buildCss('pb_date_picker_kit'),
133
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
134
104
  //@ts-ignore
135
105
  globalProps(filteredProps),
136
106
  error ? 'error' : null,
137
107
  className
138
108
  )
109
+
110
+ useEffect(() => {
111
+ datePickerHelper({
112
+ allowInput,
113
+ defaultDate,
114
+ disableDate,
115
+ disableRange,
116
+ disableWeekdays,
117
+ enableTime,
118
+ format,
119
+ hideIcon,
120
+ inLine,
121
+ maxDate,
122
+ minDate,
123
+ mode,
124
+ onChange,
125
+ onClose,
126
+ pickerId,
127
+ plugins,
128
+ // @ts-ignore
129
+ position,
130
+ positionElement,
131
+ selectionType,
132
+ showTimezone,
133
+ staticPosition,
134
+ yearRange,
135
+ required: false,
136
+ }, scrollContainer)
137
+ })
138
+
139
139
  const iconWrapperClass = () => {
140
140
  let base = 'cal_icon_wrapper'
141
141
  if (dark) {
@@ -150,84 +150,80 @@ useEffect(() => {
150
150
  return base
151
151
  }
152
152
 
153
-
154
153
  return (
155
154
  <div
156
- {...ariaProps}
157
- {...dataProps}
158
- className={classes}
159
- id={id}
155
+ {...ariaProps}
156
+ {...dataProps}
157
+ className={classes}
158
+ id={id}
160
159
  >
161
160
  <div
162
- {...inputAriaProps}
163
- {...inputDataProps}
164
- className="input_wrapper"
165
- >
161
+ {...inputAriaProps}
162
+ {...inputDataProps}
163
+ className="input_wrapper">
166
164
 
167
165
  <Caption
168
- className="pb_date_picker_kit_label"
169
- text={hideLabel ? null : label}
166
+ className="pb_date_picker_kit_label"
167
+ text={hideLabel ? null : label}
170
168
  />
171
- <>
172
- <div className="date_picker_input_wrapper">
173
- <input
174
- autoComplete="off"
175
- className="date_picker_input"
176
- disabled={disableInput}
177
- id={pickerId}
178
- name={name}
179
- onChange={inputOnChange}
180
- placeholder={placeholder}
181
- value={inputValue}
182
- />
183
169
 
184
- {error &&
185
- <Body
186
- status="negative"
187
- text={error}
188
- variant={null}
189
- />
190
- }
191
- </div>
170
+ <div className="date_picker_input_wrapper">
171
+ <input
172
+ autoComplete="off"
173
+ className="date_picker_input"
174
+ disabled={disableInput}
175
+ id={pickerId}
176
+ name={name}
177
+ onChange={inputOnChange}
178
+ placeholder={placeholder}
179
+ value={inputValue}
180
+ />
181
+
182
+ {error && <Body
183
+ status="negative"
184
+ text={error}
185
+ variant={null}
186
+ />
187
+ }
188
+ </div>
192
189
 
193
- {!hideIcon &&
194
- <div
195
- className={iconWrapperClass()}
196
- id={`cal-icon-${pickerId}`}
197
- >
198
- <Icon
199
- className="cal_icon"
200
- icon="calendar-alt"
201
- />
202
- </div>
203
- }
204
-
205
- {hideIcon && inLine ?
206
- <div>
207
- <div
208
- className={iconWrapperClass()}
209
- id={`${pickerId}-icon-plus`}
210
- >
211
- <Icon
212
- className="date-picker-plus-icon"
213
- icon="plus"
214
- />
215
- </div>
216
- <div
217
- className={iconWrapperClass()}
218
- id={`${pickerId}-angle-down`}
219
- >
220
- <Icon
221
- className="angle_down_icon"
222
- icon="angle-down"
223
- />
224
- </div>
225
- </div>
226
- : null
227
- }
228
- </>
190
+ {!hideIcon &&
191
+ <div
192
+ className={iconWrapperClass()}
193
+ id={`cal-icon-${pickerId}`}
194
+ >
195
+ <Icon
196
+ className="cal_icon"
197
+ icon="calendar-alt"
198
+ />
199
+ </div>
200
+ }
201
+
202
+ {hideIcon && inLine ?
203
+ <div>
204
+ <div
205
+ className={iconWrapperClass()}
206
+ id={`${pickerId}-icon-plus`}
207
+ >
208
+ <Icon
209
+ className="date-picker-plus-icon"
210
+ icon="plus"
211
+ />
212
+ </div>
213
+ <div
214
+ className={iconWrapperClass()}
215
+ id={`${pickerId}-angle-down`}
216
+ >
217
+ <Icon
218
+ className="angle_down_icon"
219
+ icon="angle-down"
220
+ />
221
+ </div>
222
+ </div>
223
+ : null}
229
224
  </div>
230
225
  </div>
231
226
  )
232
227
  }
228
+
233
229
  export default DatePicker
data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb CHANGED
@@ -61,8 +61,7 @@
61
61
 
62
62
  <%= javascript_tag do %>
63
63
  window.addEventListener("DOMContentLoaded", () => {
64
- datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
64
+ datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
65
65
  })
66
-
67
66
  <% end %>
68
- <% end %>
67
+ <% end %>
data/app/pb_kits/playbook/pb_date_picker/date_picker.rb CHANGED
@@ -51,7 +51,7 @@ module Playbook
51
51
  prop :position_element, type: Playbook::Props::String
52
52
  prop :scroll_container, type: Playbook::Props::String
53
53
  prop :selection_type, type: Playbook::Props::Enum,
54
- values: %w[week month quickpick none],
54
+ values: %w[week month none],
55
55
  default: "none"
56
56
  prop :show_timezone, type: Playbook::Props::Boolean,
57
57
  default: false
data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js CHANGED
@@ -1,6 +1,5 @@
1
1
  /* eslint-disable no-console */
2
2
  import React from 'react'
3
- import moment from 'moment'
4
3
  import { fireEvent, render, screen, waitFor, within } from '../utilities/test-utils'
5
4
 
6
5
  import DatePicker from './_date_picker'
@@ -11,6 +10,7 @@ import { getTimezoneText } from './plugins/timeSelect'
11
10
  jest.setSystemTime(new Date('01/01/2020'));
12
11
  const DEFAULT_DATE = new Date()
13
12
 
13
+
14
14
  describe('DatePicker Kit', () => {
15
15
  beforeEach(() => {
16
16
  jest.spyOn(console, 'error').mockImplementation(() => { });
@@ -158,47 +158,4 @@ describe('DatePicker Kit', () => {
158
158
  expect(input).toHaveValue('01/01/2020 at 12:00 PM')
159
159
  })
160
160
  })
161
- test('shows DatePicker QuickPick dropdown and adds correct date to input', async () => {
162
- const testId = 'datepicker-quick-pick'
163
- render(
164
- <DatePicker
165
- allowInput
166
- data={{ testid: testId }}
167
- mode="range"
168
- pickerId="date-picker-quick-pick"
169
- placeholder="mm/dd/yyyy → mm/dd/yyyy"
170
- selectionType="quickpick"
171
- />
172
- )
173
-
174
- const kit = screen.getByTestId(testId)
175
- const input = within(kit).getByPlaceholderText('mm/dd/yyyy → mm/dd/yyyy')
176
-
177
- fireEvent(
178
- input,
179
- new MouseEvent('click', {
180
- bubbles: true,
181
- cancelable: true,
182
- }),
183
- )
184
- const today = within(kit).getByText('Today')
185
- const thisYear = within(kit).getByText('This year')
186
- await waitFor(() => {
187
- expect(today).toBeInTheDocument()
188
- expect(thisYear).toBeInTheDocument()
189
- })
190
-
191
- fireEvent(
192
- thisYear,
193
- new MouseEvent('click', {
194
- bubbles: true,
195
- cancelable: true,
196
- }),
197
- )
198
-
199
- await waitFor(() => {
200
- expect(input).toHaveValue(moment().startOf('year').format('MM/DD/YYYY') + " → " + moment().format('MM/DD/YYYY'))
201
- })
202
-
203
- })
204
161
  })