playbook_ui 11.3.0.pre.alpha1 → 11.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) 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_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +80 -0
  9. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -0
  10. data/app/pb_kits/playbook/pb_icon_circle/{_icon_circle.jsx → _icon_circle.tsx} +2 -4
  11. data/app/pb_kits/playbook/pb_kit/{dateTime.js → dateTime.ts} +5 -6
  12. data/app/pb_kits/playbook/pb_label_pill/{_label_pill.jsx → _label_pill.tsx} +2 -4
  13. data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +1 -1
  14. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +1 -1
  15. data/app/pb_kits/playbook/pb_pill/_pill.tsx +1 -1
  16. data/app/pb_kits/playbook/pb_section_separator/{_section_separator.jsx → _section_separator.tsx} +7 -8
  17. data/app/pb_kits/playbook/pb_time/_time.tsx +92 -0
  18. data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx +1 -1
  19. data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx +1 -1
  20. data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx +1 -1
  21. data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx +1 -1
  22. data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx +1 -1
  23. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx +1 -1
  24. data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
  25. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb +37 -0
  26. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md +1 -0
  27. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  28. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -2
  29. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +10 -2
  30. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx +1 -1
  31. data/dist/reset.css +1 -60
  32. data/lib/playbook/version.rb +2 -2
  33. metadata +15 -13
  34. data/app/pb_kits/playbook/pb_date/_date.jsx +0 -138
  35. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +0 -93
  36. data/app/pb_kits/playbook/pb_time/_time.jsx +0 -90
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