playbook_ui 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4380 → 14.6.2.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4247

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/_playbook.scss +1 -2
  3. data/app/pb_kits/playbook/pb_currency/_currency.tsx +6 -16
  4. data/app/pb_kits/playbook/pb_currency/currency.rb +11 -38
  5. data/app/pb_kits/playbook/pb_currency/currency.test.js +0 -35
  6. data/app/pb_kits/playbook/pb_currency/docs/example.yml +1 -3
  7. data/app/pb_kits/playbook/pb_currency/docs/index.js +0 -1
  8. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +7 -8
  9. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +2 -6
  10. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +26 -30
  11. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +1 -24
  12. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +2 -25
  13. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +1 -0
  14. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +8 -46
  15. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +1 -1
  16. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +1 -1
  17. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +2 -2
  18. data/app/pb_kits/playbook/pb_timeline/_item.tsx +23 -59
  19. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +0 -8
  20. data/app/pb_kits/playbook/pb_timeline/docs/example.yml +1 -2
  21. data/app/pb_kits/playbook/pb_timeline/docs/index.js +0 -1
  22. data/app/pb_kits/playbook/pb_timeline/item.html.erb +21 -17
  23. data/app/pb_kits/playbook/pb_timeline/item.rb +0 -4
  24. data/app/pb_kits/playbook/pb_timeline/timeline.test.js +0 -84
  25. data/app/pb_kits/playbook/tokens/_typography.scss +0 -35
  26. data/dist/chunks/{_typeahead-BJrdFWHc.js → _typeahead-BV_n6U5W.js} +2 -2
  27. data/dist/chunks/_weekday_stacked-Cyqgh5-q.js +45 -0
  28. data/dist/chunks/vendor.js +1 -1
  29. data/dist/menu.yml +0 -3
  30. data/dist/playbook-doc.js +1 -1
  31. data/dist/playbook-rails-react-bindings.js +1 -1
  32. data/dist/playbook-rails.js +1 -1
  33. data/dist/playbook.css +1 -1
  34. data/lib/playbook/version.rb +1 -1
  35. metadata +5 -39
  36. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb +0 -7
  37. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx +0 -18
  38. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md +0 -3
  39. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md +0 -3
  40. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md +0 -1
  41. data/app/pb_kits/playbook/pb_link/_link.scss +0 -66
  42. data/app/pb_kits/playbook/pb_link/_link.tsx +0 -107
  43. data/app/pb_kits/playbook/pb_link/docs/_link_color.html.erb +0 -30
  44. data/app/pb_kits/playbook/pb_link/docs/_link_color.jsx +0 -40
  45. data/app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb +0 -5
  46. data/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx +0 -15
  47. data/app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb +0 -15
  48. data/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx +0 -25
  49. data/app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb +0 -35
  50. data/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx +0 -45
  51. data/app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb +0 -5
  52. data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx +0 -15
  53. data/app/pb_kits/playbook/pb_link/docs/example.yml +0 -16
  54. data/app/pb_kits/playbook/pb_link/docs/index.js +0 -5
  55. data/app/pb_kits/playbook/pb_link/link.html.erb +0 -21
  56. data/app/pb_kits/playbook/pb_link/link.rb +0 -44
  57. data/app/pb_kits/playbook/pb_link/link.test.jsx +0 -92
  58. data/app/pb_kits/playbook/pb_timeline/detail.html.erb +0 -3
  59. data/app/pb_kits/playbook/pb_timeline/detail.rb +0 -11
  60. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +0 -43
  61. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +0 -68
  62. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md +0 -2
  63. data/app/pb_kits/playbook/pb_timeline/label.html.erb +0 -12
  64. data/app/pb_kits/playbook/pb_timeline/label.rb +0 -13
  65. data/app/pb_kits/playbook/pb_timeline/step.html.erb +0 -14
  66. data/app/pb_kits/playbook/pb_timeline/step.rb +0 -16
  67. data/app/pb_kits/playbook/pb_timeline/subcomponents/Detail.tsx +0 -29
  68. data/app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx +0 -38
  69. data/app/pb_kits/playbook/pb_timeline/subcomponents/Step.tsx +0 -42
  70. data/app/pb_kits/playbook/pb_timeline/subcomponents/index.tsx +0 -3
  71. data/dist/chunks/_weekday_stacked-DJWwxF-6.js +0 -45
@@ -1,15 +1,12 @@
1
1
  import React from 'react'
2
2
  import classnames from 'classnames'
3
+
3
4
  import { buildCss, buildHtmlProps } from '../utilities/props'
4
- import { globalProps, GlobalProps } from "../utilities/globalProps"
5
+ import { globalProps, GlobalProps } from "../utilities/globalProps";
5
6
 
6
7
  import DateStacked from '../pb_date_stacked/_date_stacked'
7
8
  import IconCircle from '../pb_icon_circle/_icon_circle'
8
9
 
9
- import TimelineLabel from './subcomponents/Label'
10
- import TimelineStep from './subcomponents/Step'
11
- import TimelineDetail from './subcomponents/Detail'
12
-
13
10
  type ItemProps = {
14
11
  className?: string,
15
12
  children?: React.ReactNode[] | React.ReactNode,
@@ -20,13 +17,6 @@ type ItemProps = {
20
17
  lineStyle?: 'solid' | 'dotted',
21
18
  } & GlobalProps
22
19
 
23
- function isElementOfType<P>(
24
- element: React.ReactNode,
25
- component: React.ComponentType<P>
26
- ): element is React.ReactElement<P> {
27
- return React.isValidElement<P>(element) && element.type === component
28
- }
29
-
30
20
  const TimelineItem = ({
31
21
  className,
32
22
  children,
@@ -41,57 +31,31 @@ const TimelineItem = ({
41
31
 
42
32
  const htmlProps = buildHtmlProps(htmlOptions)
43
33
 
44
- const childrenArray = React.Children.toArray(children)
45
-
46
- const labelChild = childrenArray.find(
47
- (child): child is React.ReactElement => isElementOfType(child, TimelineLabel)
48
- )
49
-
50
- const stepChild = childrenArray.find(
51
- (child): child is React.ReactElement => isElementOfType(child, TimelineStep)
52
- )
53
-
54
- const detailChild = childrenArray.find(
55
- (child): child is React.ReactElement => isElementOfType(child, TimelineDetail)
56
- )
57
-
58
- const otherChildren = childrenArray.filter(
59
- (child) =>
60
- !isElementOfType(child, TimelineLabel) &&
61
- !isElementOfType(child, TimelineStep) &&
62
- !isElementOfType(child, TimelineDetail)
63
- )
64
-
65
34
  return (
66
- <div
35
+ <div
67
36
  {...htmlProps}
68
37
  className={classnames(timelineItemCss, globalProps(props), className)}
69
38
  >
70
- {labelChild || (
71
- <div className="pb_timeline_item_left_block">
72
- {date && (
73
- <DateStacked
74
- align="center"
75
- date={date}
76
- size="sm"
77
- />
78
- )}
79
- </div>
80
- )}
81
- {stepChild || (
82
- <div className="pb_timeline_item_step">
83
- <IconCircle icon={icon}
84
- size="xs"
85
- variant={iconColor}
86
- />
87
- <div className="pb_timeline_item_connector" />
88
- </div>
89
- )}
90
- {detailChild || (
91
- <div className="pb_timeline_item_right_block">
92
- { otherChildren }
93
- </div>
94
- )}
39
+ <div className="pb_timeline_item_left_block">
40
+ {date &&
41
+ <DateStacked
42
+ align="center"
43
+ date={date}
44
+ size="sm"
45
+ />
46
+ }
47
+ </div>
48
+ <div className="pb_timeline_item_step">
49
+ <IconCircle
50
+ icon={icon}
51
+ size="xs"
52
+ variant={iconColor}
53
+ />
54
+ <div className="pb_timeline_item_connector" />
55
+ </div>
56
+ <div className="pb_timeline_item_right_block">
57
+ {children}
58
+ </div>
95
59
  </div>
96
60
  )
97
61
  }
@@ -5,11 +5,6 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
5
5
  import { GlobalProps, globalProps } from '../utilities/globalProps'
6
6
 
7
7
  import TimelineItem from './_item'
8
- import {
9
- TimelineStep,
10
- TimelineLabel,
11
- TimelineDetail,
12
- } from './subcomponents'
13
8
 
14
9
  type TimelineProps = {
15
10
  aria?: { [key: string]: string },
@@ -52,8 +47,5 @@ const Timeline = ({
52
47
  }
53
48
 
54
49
  Timeline.Item = TimelineItem
55
- Timeline.Step = TimelineStep
56
- Timeline.Label = TimelineLabel
57
- Timeline.Detail = TimelineDetail
58
50
 
59
51
  export default Timeline
@@ -4,11 +4,10 @@ examples:
4
4
  - timeline_default: Default
5
5
  - timeline_vertical: Vertical
6
6
  - timeline_with_date: With Date
7
- - timeline_with_children: With Children
8
7
 
9
8
 
10
9
  react:
11
10
  - timeline_default: Default
12
11
  - timeline_vertical: Vertical
13
12
  - timeline_with_date: With Date
14
- - timeline_with_children: With Children
13
+
@@ -1,4 +1,3 @@
1
1
  export { default as TimelineDefault } from './_timeline_default.jsx'
2
2
  export { default as TimelineVertical } from './_timeline_vertical.jsx'
3
3
  export { default as TimelineWithDate } from './_timeline_with_date.jsx'
4
- export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
@@ -1,21 +1,25 @@
1
1
  <%= pb_content_tag do %>
2
- <% if label %>
3
- <%= label %>
4
- <% else %>
5
- <%= pb_rails("timeline/label", props: { date: date }) %>
6
- <% end %>
7
2
 
8
- <% if step %>
9
- <%= step %>
10
- <% else %>
11
- <%= pb_rails("timeline/step", props: { icon: icon, icon_color: icon_color }) %>
12
- <% end %>
13
-
14
- <% if detail%>
15
- <%= detail%>
16
- <% else %>
17
- <%= pb_rails("timeline/detail") do %>
18
- <%= content %>
3
+ <div class="pb_timeline_item_left_block">
4
+ <% if object.date.present? %>
5
+ <%= pb_rails("date_stacked", props: {
6
+ date: object.date,
7
+ size: "sm",
8
+ align: "center"
9
+ }) %>
19
10
  <% end %>
20
- <% end %>
11
+ </div>
12
+
13
+ <div class="pb_timeline_item_step">
14
+ <%= pb_rails("icon_circle", props: {
15
+ icon: object.icon,
16
+ variant: object.icon_color,
17
+ size: "xs"
18
+ }) %>
19
+ <div class="pb_timeline_item_connector"></div>
20
+ </div>
21
+
22
+ <div class="pb_timeline_item_right_block">
23
+ <%= content.presence %>
24
+ </div>
21
25
  <% end %>
@@ -13,10 +13,6 @@ module Playbook
13
13
  values: %w[solid dotted],
14
14
  default: "solid"
15
15
 
16
- renders_one :label
17
- renders_one :step
18
- renders_one :detail
19
-
20
16
  def classname
21
17
  generate_classname("pb_timeline_item_kit", line_style)
22
18
  end
@@ -2,10 +2,6 @@ import React from 'react'
2
2
  import { render, screen } from '../utilities/test-utils'
3
3
 
4
4
  import Timeline from './_timeline'
5
- import TimelineItem from './_item'
6
- import TimelineLabel from './subcomponents/Label'
7
- import TimelineStep from './subcomponents/Step'
8
- import TimelineDetail from './subcomponents/Detail'
9
5
  import TitleDetail from '../pb_title_detail/_title_detail'
10
6
 
11
7
  const testId = 'timeline'
@@ -47,91 +43,18 @@ const TimelineDefault = (props) => (
47
43
  </>
48
44
  )
49
45
 
50
- const TimelineWithChildren = (props) => (
51
- <>
52
- <Timeline
53
- className={className}
54
- data={{ testid: testId }}
55
- orientation="horizontal"
56
- showDate
57
- {...props}
58
- >
59
- <TimelineItem lineStyle="solid"
60
- {...props}
61
- >
62
- <TimelineLabel date={new Date()} />
63
- <TimelineStep icon="user"
64
- iconColor="royal"
65
- />
66
- <TimelineDetail>
67
- <TitleDetail
68
- detail="37-27 74th Street"
69
- title="Jackson Heights"
70
- {...props}
71
- />
72
- </TimelineDetail>
73
- </TimelineItem>
74
-
75
- <TimelineItem lineStyle="dotted"
76
- {...props}
77
- >
78
- <TimelineStep icon="check"
79
- iconColor="teal"
80
- />
81
- <TimelineDetail>
82
- <TitleDetail
83
- detail="81 Gate St Brooklyn"
84
- title="Greenpoint"
85
- {...props}
86
- />
87
- </TimelineDetail>
88
- </TimelineItem>
89
-
90
- <TimelineItem lineStyle="solid"
91
- {...props}
92
- >
93
- <TimelineLabel
94
- date={new Date(new Date().setDate(new Date().getDate() + 1))}
95
- />
96
- <TimelineStep icon="map-marker-alt"
97
- iconColor="purple"
98
- />
99
- <TimelineDetail>
100
- <TitleDetail
101
- detail="72 E St Astoria"
102
- title="Society Hill"
103
- {...props}
104
- />
105
- </TimelineDetail>
106
- </TimelineItem>
107
- </Timeline>
108
- </>
109
- )
110
-
111
46
  test('should pass data prop', () => {
112
47
  render(<TimelineDefault />)
113
48
  const kit = screen.getByTestId(testId)
114
49
  expect(kit).toBeInTheDocument()
115
50
  })
116
51
 
117
- test('should pass data prop using children', () => {
118
- render(<TimelineWithChildren />)
119
- const kit = screen.getByTestId(testId)
120
- expect(kit).toBeInTheDocument()
121
- })
122
-
123
52
  test('should pass className prop', () => {
124
53
  render(<TimelineDefault />)
125
54
  const kit = screen.getByTestId(testId)
126
55
  expect(kit).toHaveClass(className)
127
56
  })
128
57
 
129
- test('should pass className prop with children', () => {
130
- render(<TimelineWithChildren />)
131
- const kit = screen.getByTestId(testId)
132
- expect(kit).toHaveClass(className)
133
- })
134
-
135
58
  test('should pass aria prop', () => {
136
59
  render(<TimelineDefault />)
137
60
  const kit = screen.getByTestId(testId)
@@ -163,10 +86,3 @@ test('should pass showDate prop', () => {
163
86
  const kit = screen.getByTestId(testId)
164
87
  expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
165
88
  })
166
-
167
- test('should pass showDate prop with Children', () => {
168
- const props = { showDate: true }
169
- render(<TimelineWithChildren {...props} />)
170
- const kit = screen.getByTestId(testId)
171
- expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
172
- })
@@ -1,5 +1,3 @@
1
- @import "../tokens/colors";
2
-
3
1
  $font_family_base: "Power Centra", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
4
2
 
5
3
  /* CLEAN UP AND REMOVE */
@@ -53,36 +51,3 @@ $boldest: 700 !default;
53
51
  $bolder: 700 !default;
54
52
  $light: 300 !default;
55
53
  $lighter: 300 !default;
56
-
57
- /* Link Colors */
58
- $pb_link_colors: (
59
- default: $primary_action,
60
- body: $text_lt_default,
61
- muted: $text_lt_light,
62
- destructive: $error,
63
- );
64
-
65
- $pb_link_hover_colors: (
66
- default: $text_lt_default,
67
- body: $primary_action,
68
- muted: $text_lt_default,
69
- destructive: $text_lt_default,
70
- );
71
-
72
- $pb_dark_link_colors: (
73
- default: $active_dark,
74
- body: $text_dk_default,
75
- muted: $text_dk_light,
76
- destructive: $error_dark,
77
- );
78
-
79
- $pb_dark_link_hover_colors: (
80
- default: $text_dk_default,
81
- body: $active_dark,
82
- muted: $text_dk_default,
83
- destructive: $text_dk_default,
84
- );
85
-
86
- @mixin pb_link($color: $primary_action) {
87
- color: $color;
88
- }