playbook_ui 12.14.0 → 12.16.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +1 -1
  3. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +1 -1
  4. data/app/pb_kits/playbook/pb_avatar/avatar.rb +4 -0
  5. data/app/pb_kits/playbook/pb_avatar/avatar.test.js +14 -0
  6. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb +0 -1
  7. data/app/pb_kits/playbook/pb_background/_background.tsx +1 -1
  8. data/app/pb_kits/playbook/pb_background/background.rb +1 -1
  9. data/app/pb_kits/playbook/pb_badge/_badge.scss +1 -0
  10. data/app/pb_kits/playbook/pb_badge/_badge.tsx +1 -1
  11. data/app/pb_kits/playbook/pb_badge/badge.rb +5 -1
  12. data/app/pb_kits/playbook/pb_badge/badge.test.js +16 -1
  13. data/app/pb_kits/playbook/pb_body/_body_mixins.scss +3 -3
  14. data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +2 -2
  15. data/app/pb_kits/playbook/pb_card/_card.scss +13 -0
  16. data/app/pb_kits/playbook/pb_card/_card.tsx +3 -2
  17. data/app/pb_kits/playbook/pb_card/card_header.rb +9 -1
  18. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +11 -0
  19. data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx +169 -139
  20. data/app/pb_kits/playbook/pb_enhanced_element/index.ts +1 -1
  21. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +5 -5
  22. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +1 -1
  23. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +0 -5
  24. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +0 -4
  25. data/app/pb_kits/playbook/pb_star_rating/{_star_rating.jsx → _star_rating.tsx} +18 -22
  26. data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js +71 -0
  27. data/app/pb_kits/playbook/pb_table/{_table.jsx → _table.tsx} +9 -11
  28. data/app/pb_kits/playbook/pb_table/{_table_row.jsx → _table_row.tsx} +7 -8
  29. data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb +41 -0
  30. data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx +62 -0
  31. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  32. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  33. data/app/pb_kits/playbook/pb_table/{index.js → index.ts} +4 -4
  34. data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +129 -0
  35. data/app/pb_kits/playbook/pb_textarea/{index.js → index.tsx} +2 -0
  36. data/app/pb_kits/playbook/pb_textarea/textarea.test.js +213 -0
  37. data/app/pb_kits/playbook/tokens/_colors.scss +16 -1
  38. data/app/pb_kits/playbook/utilities/_cursor.scss +141 -1
  39. data/app/pb_kits/playbook/utilities/globalProps.ts +5 -2
  40. data/lib/playbook/cursor.rb +2 -2
  41. data/lib/playbook/version.rb +2 -2
  42. metadata +12 -9
  43. data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +0 -41
  44. data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +0 -135
data/app/pb_kits/playbook/pb_textarea/_textarea.jsx DELETED
@@ -1,135 +0,0 @@
1
- /* @flow */
2
- /* eslint-disable react-hooks/rules-of-hooks */
3
-
4
- import React, { forwardRef, useEffect, useRef } from 'react'
5
- import classnames from 'classnames'
6
-
7
- import PbTextarea from './'
8
- import type { InputCallback } from '../types.js'
9
-
10
- import { globalProps } from '../utilities/globalProps'
11
-
12
- import Body from '../pb_body/_body'
13
- import Caption from '../pb_caption/_caption'
14
- import Flex from '../pb_flex/_flex'
15
- import FlexItem from '../pb_flex/_flex_item'
16
-
17
- type TextareaProps = {
18
- characterCount?: string,
19
- className?: string,
20
- children?: array<React.ReactChild>,
21
- disabled?: boolean,
22
- error?: string,
23
- id?: string,
24
- inline?: boolean,
25
- object?: string,
26
- method?: string,
27
- label?: string,
28
- maxCharacters?: string,
29
- placeholder?: string,
30
- value?: string,
31
- name?: string,
32
- required?: boolean,
33
- rows?: number,
34
- resize: 'none' | 'both' | 'horizontal' | 'vertical' | 'auto',
35
- onChange?: InputCallback<HTMLTextAreaElement>,
36
- }
37
-
38
- const Textarea = ({
39
- characterCount,
40
- className,
41
- children,
42
- disabled,
43
- inline = false,
44
- resize = 'none',
45
- error,
46
- label,
47
- maxCharacters,
48
- name,
49
- onChange = () => {},
50
- placeholder,
51
- required,
52
- rows = 4,
53
- value,
54
- ...props
55
- }: TextareaProps, ref: React.ElementRef<"textarea">) => {
56
- ref = ref || useRef(false)
57
- useEffect(() => {
58
- if (ref.current && resize === 'auto') {
59
- PbTextarea.addMatch(ref.current)
60
- }
61
- })
62
-
63
- const errorClass = error ? 'error' : null
64
- const inlineClass = inline ? 'inline' : ''
65
- const resizeClass = `resize_${resize}`
66
- const classes = classnames('pb_textarea_kit', errorClass, inlineClass, resizeClass, globalProps(props), className)
67
-
68
- const characterCounter = () => {
69
- return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : checkIfZero(characterCount)
70
- }
71
-
72
- const checkIfZero = (characterCount) => {
73
- return characterCount == 0 ? characterCount.toString() : characterCount
74
- }
75
-
76
- return (
77
- <div className={classes}>
78
- <Caption
79
- text={label}
80
- />
81
- <If condition={children}>
82
- {children}
83
- <Else />
84
- <textarea
85
- className="pb_textarea_kit"
86
- disabled={disabled}
87
- name={name}
88
- onChange={onChange}
89
- placeholder={placeholder}
90
- ref={ref}
91
- required={required}
92
- rows={rows}
93
- value={value}
94
- {...props}
95
- />
96
- <If condition={error}>
97
- <If condition={characterCount}>
98
- <Flex
99
- spacing="between"
100
- vertical="center"
101
- >
102
- <FlexItem>
103
- <Body
104
- margin="none"
105
- status="negative"
106
- text={error}
107
- />
108
- </FlexItem>
109
- <FlexItem>
110
- <Caption
111
- margin="none"
112
- size="xs"
113
- text={characterCounter()}
114
- />
115
- </FlexItem>
116
- </Flex>
117
- <Else />
118
- <Body
119
- status="negative"
120
- text={error}
121
- />
122
- </If>
123
- <Else />
124
- <Caption
125
- margin="none"
126
- size="xs"
127
- text={characterCounter()}
128
- />
129
- </If>
130
- </If>
131
- </div>
132
- )
133
- }
134
-
135
- export default forwardRef(Textarea)