playbook_ui 11.3.0.pre.alpha2 → 11.4.0.pre.alpha.rubytheme2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (71) 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/app/pb_kits/playbook/tokens/_typography.scss +8 -8
  66. data/dist/reset.css +2 -0
  67. data/lib/playbook/version.rb +2 -2
  68. metadata +24 -13
  69. data/app/pb_kits/playbook/pb_date/_date.jsx +0 -138
  70. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +0 -93
  71. data/app/pb_kits/playbook/pb_time/_time.jsx +0 -90
data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx DELETED
@@ -1,93 +0,0 @@
1
- /* @flow */
2
-
3
- import React, { useEffect, useState } from 'react'
4
- import classnames from 'classnames'
5
-
6
- import { globalProps } from '../utilities/globalProps'
7
-
8
- import Icon from '../pb_icon/_icon'
9
- import Title from '../pb_title/_title'
10
-
11
- const iconMap = {
12
- success: 'check',
13
- error: 'exclamation-triangle',
14
- neutral: 'info-circle',
15
- tip: 'info-circle',
16
- }
17
-
18
- type FixedConfirmationToastProps = {
19
- className?: string,
20
- closeable?: boolean,
21
- data?: string,
22
- horizontal?: 'right' | 'left' | 'center',
23
- id?: string,
24
- multiLine?: boolean,
25
- onClose?: () => void,
26
- open?: boolean,
27
- status?: 'success' | 'error' | 'neutral' | 'tip',
28
- text: string,
29
- vertical?: 'top' | 'bottom',
30
- }
31
-
32
- const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
33
- const [showToast, toggleToast] = useState(true)
34
- const {
35
- className,
36
- closeable = false,
37
- horizontal,
38
- multiLine = false,
39
- onClose = () => {},
40
- open = true,
41
- status = 'neutral',
42
- text,
43
- vertical,
44
- } = props
45
- const css = classnames(
46
- `pb_fixed_confirmation_toast_kit_${status}`,
47
- { '_multi_line': multiLine },
48
- { [`positioned_toast ${vertical} ${horizontal}`]: vertical && horizontal },
49
- globalProps(props),
50
- className
51
- )
52
- const icon = iconMap[status]
53
-
54
- useEffect(() => {
55
- toggleToast(open)
56
- }, [open])
57
-
58
- const handleClick = () => {
59
- toggleToast(!closeable)
60
- onClose()
61
- }
62
-
63
- return (
64
- <If condition={showToast}>
65
- <div
66
- className={css}
67
- onClick={handleClick}
68
- >
69
- <If condition={icon}>
70
- <Icon
71
- className="pb_icon"
72
- fixedWidth
73
- icon={icon}
74
- />
75
- </If>
76
- <Title
77
- className="pb_fixed_confirmation_toast_text"
78
- size={4}
79
- text={text}
80
- />
81
- <If condition={closeable}>
82
- <Icon
83
- className="pb_icon"
84
- fixedWidth={false}
85
- icon="times"
86
- />
87
- </If>
88
- </div>
89
- </If>
90
- )
91
- }
92
-
93
- export default FixedConfirmationToast
data/app/pb_kits/playbook/pb_time/_time.jsx DELETED
@@ -1,90 +0,0 @@
1
- /* @flow */
2
-
3
- import React from 'react'
4
- import classnames from 'classnames'
5
-
6
- import DateTime from '../pb_kit/dateTime.js'
7
- import { buildCss } 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
-
14
- type TimeProps = {
15
- align?: 'left' | 'center' | 'right',
16
- className?: string | array<string>,
17
- data?: string,
18
- date: string,
19
- dark?: boolean,
20
- id?: string,
21
- showIcon?: boolean,
22
- size?: 'md' | 'sm',
23
- showTimezone?: boolean,
24
- timeZone?: string,
25
- }
26
-
27
- const Time = (props: TimeProps) => {
28
- const { align, className, date, showIcon, size, timeZone, showTimezone = true } = props
29
- const classes = classnames(
30
- buildCss('pb_time_kit', align, size),
31
- globalProps(props),
32
- className
33
- )
34
-
35
- const dateTimestamp = new DateTime({ value: date, zone: timeZone })
36
-
37
- return (
38
- <div className={classes}>
39
- <If condition={showIcon}>
40
- <Body
41
- color="light"
42
- tag="span"
43
- >
44
- <Icon
45
- fixedWidth
46
- icon="clock"
47
- size={size === 'md' ? '' : 'sm'}
48
- />
49
- </Body>
50
- {' '}
51
- </If>
52
-
53
- <time dateTime={date}>
54
- <span>
55
- <If condition={size === 'md'}>
56
- <Body
57
- className="pb_time"
58
- tag="span"
59
- text={dateTimestamp.toTimeWithMeridian()}
60
- />
61
- {' '}
62
- <If condition={showTimezone}>
63
- <Body
64
- color="light"
65
- tag="span"
66
- text={dateTimestamp.toTimezone()}
67
- />
68
- </If>
69
- <Else />
70
- <Caption
71
- color="light"
72
- tag="span"
73
- text={dateTimestamp.toTimeWithMeridian()}
74
- />
75
- {' '}
76
- <If condition={showTimezone}>
77
- <Caption
78
- color="light"
79
- tag="span"
80
- text={dateTimestamp.toTimezone()}
81
- />
82
- </If>
83
- </If>
84
- </span>
85
- </time>
86
- </div>
87
- )
88
- }
89
-
90
- export default Time