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,92 +0,0 @@
1
- import React from 'react'
2
- import { ensureAccessible, renderKit, render, screen } from '../utilities/test-utils'
3
-
4
- import { Link } from 'playbook-ui'
5
-
6
- const link = 'https://www.google.com'
7
-
8
- const props = {
9
- data: { testid: 'default' },
10
- href: link,
11
- }
12
-
13
- test('returns namespaced class name', () => {
14
- const kit = renderKit(Link , props)
15
- expect(kit).toBeInTheDocument()
16
- expect(kit).toHaveClass('pb_link_kit')
17
- expect(kit).toHaveAttribute('href', link)
18
- })
19
-
20
- it("should be accessible", async () => {
21
- ensureAccessible(Link, props)
22
- })
23
-
24
- test('with colors', () => {
25
- ['default', 'body', 'muted', 'destructive'].forEach((color) => {
26
- const testId = `colors-test-${color}`
27
- render(
28
- <Link
29
- color={color}
30
- data={{ testid: testId }}
31
- text="Test colors"
32
- />
33
- )
34
-
35
- const kit = screen.getByTestId(testId)
36
- expect(kit).toHaveClass(`pb_link_kit_${color}`)
37
- })
38
- })
39
-
40
- test('disable prop', () => {
41
- render(
42
- <Link
43
- data={{ testid: 'disable-test' }}
44
- disabled
45
- />
46
- )
47
-
48
- const kit = screen.getByTestId('disable-test')
49
-
50
- expect(kit).toHaveClass('pb_link_kit_disabled')
51
- })
52
-
53
- test('underline prop', () => {
54
- render(
55
- <Link
56
- data={{ testid: 'underline-test' }}
57
- underline
58
- />
59
- )
60
-
61
- const kit = screen.getByTestId('underline-test')
62
-
63
- expect(kit).toHaveClass('pb_link_kit_underline')
64
- })
65
-
66
- test('adds icon', () => {
67
- render(
68
- <Link
69
- data={{ testid: 'icon-test' }}
70
- icon="arrow-up-right-from-square"
71
- />
72
- )
73
-
74
- const kit = screen.getByTestId('icon-test')
75
-
76
- const icon = kit.querySelector('.pb_icon_kit')
77
- expect(icon).toBeInTheDocument();
78
- })
79
-
80
- test('adds icon right', () => {
81
- render(
82
- <Link
83
- data={{ testid: 'icon-right-test' }}
84
- iconRight="chevron-right"
85
- />
86
- )
87
-
88
- const kit = screen.getByTestId('icon-right-test')
89
-
90
- const icon = kit.querySelector('.pb_icon_kit')
91
- expect(icon).toBeInTheDocument();
92
- })
@@ -1,3 +0,0 @@
1
- <%= pb_content_tag do %>
2
- <%= content.presence %>
3
- <% end %>
@@ -1,11 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Playbook
4
- module PbTimeline
5
- class Detail < Playbook::KitBase
6
- def classname
7
- generate_classname("pb_timeline_item_right_block")
8
- end
9
- end
10
- end
11
- end
@@ -1,43 +0,0 @@
1
- <%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
2
- <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
3
-
4
- <% item.label do %>
5
- <%= pb_rails("timeline/label") do %>
6
- <%= pb_rails("title", props: { text: "Any Kit Here", size: 2 }) %>
7
- <% end %>
8
- <% end %>
9
-
10
- <% item.step do %>
11
- <%= pb_rails("timeline/step", props: { icon: 'check', icon_color: 'teal' }) %>
12
- <% end %>
13
-
14
- <% item.detail do %>
15
- <%= pb_rails("title_detail", props: {
16
- title: "Jackson Heights",
17
- detail: "37-27 74th Street"
18
- }) %>
19
- <% end %>
20
- <% end %>
21
- <%= pb_rails("timeline/item", props: { line_style: "dotted"}) do |item| %>
22
-
23
- <% item.step do %>
24
- <%= pb_rails("timeline/step") do %>
25
- <%= pb_rails("pill", props: { text: "Any Kit" , variant: "success" }) %>
26
- <% end %>
27
- <% end %>
28
-
29
- <% item.detail do %>
30
- <%= pb_rails("title_detail", props: {
31
- title: "Greenpoint",
32
- detail: "81 Gate St Brooklyn"
33
- }) %>
34
- <% end %>
35
- <% end %>
36
-
37
- <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do |item| %>
38
- <%= pb_rails("title_detail", props: {
39
- title: "Society Hill",
40
- detail: "72 E St Astoria"
41
- }) %>
42
- <% end %>
43
- <% end %>
@@ -1,68 +0,0 @@
1
- import React from 'react'
2
-
3
- import Timeline from '../_timeline'
4
- import Title from '../../pb_title/_title'
5
- import Pill from '../../pb_pill/_pill'
6
-
7
- import TitleDetail from '../../pb_title_detail/_title_detail'
8
-
9
- const TimelineWithChildren = (props) => (
10
- <div>
11
- <Timeline orientation="horizontal"
12
- showDate
13
- {...props}
14
- >
15
- <Timeline.Item lineStyle="solid"
16
- {...props}
17
- >
18
- <Timeline.Label>
19
- <Title size={2}
20
- text='Any Kit Here'
21
- />
22
- </Timeline.Label>
23
- <Timeline.Step icon="user"
24
- iconColor="royal"
25
- />
26
- <Timeline.Detail>
27
- <TitleDetail detail="37-27 74th Street"
28
- title="Jackson Heights"
29
- {...props}
30
- />
31
- </Timeline.Detail>
32
- </Timeline.Item>
33
-
34
- <Timeline.Item lineStyle="dotted"
35
- {...props}
36
- >
37
- <Timeline.Step>
38
- <Pill text="Any Kit"
39
- variant="success"
40
- />
41
- </Timeline.Step>
42
- <Timeline.Detail>
43
- <TitleDetail detail="81 Gate St Brooklyn"
44
- title="Greenpoint"
45
- {...props}
46
- />
47
- </Timeline.Detail>
48
- </Timeline.Item>
49
-
50
- <Timeline.Item lineStyle="solid"
51
- {...props}
52
- >
53
- <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
54
- <Timeline.Step icon="map-marker-alt"
55
- iconColor="purple"
56
- />
57
- <Timeline.Detail>
58
- <TitleDetail detail="72 E St Astoria"
59
- title="Society Hill"
60
- {...props}
61
- />
62
- </Timeline.Detail>
63
- </Timeline.Item>
64
- </Timeline>
65
- </div>
66
- )
67
-
68
- export default TimelineWithChildren
@@ -1,2 +0,0 @@
1
- Any kit can be used inside of our compound components of label, step, or detail. Expand the code snippet below to see how to use these children elements.
2
-
@@ -1,12 +0,0 @@
1
- <%= pb_content_tag do %>
2
- <% if object.date.present? %>
3
- <%= pb_rails("date_stacked", props: {
4
- date: object.date,
5
- size: "sm",
6
- align: "center"
7
- }) %>
8
- <% else %>
9
- <%= content.presence %>
10
- <% end %>
11
- <% end %>
12
-
@@ -1,13 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Playbook
4
- module PbTimeline
5
- class Label < Playbook::KitBase
6
- prop :date
7
-
8
- def classname
9
- generate_classname("pb_timeline_item_left_block")
10
- end
11
- end
12
- end
13
- end
@@ -1,14 +0,0 @@
1
- <%= pb_content_tag do %>
2
- <% if object.icon.present? %>
3
- <%= pb_rails("icon_circle", props: {
4
- icon: object.icon,
5
- variant: object.icon_color,
6
- size: "xs"
7
- }) %>
8
- <% else %>
9
- <%= content.presence %>
10
- <% end %>
11
- <div class="pb_timeline_item_connector"></div>
12
- <% end %>
13
-
14
-
@@ -1,16 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Playbook
4
- module PbTimeline
5
- class Step < Playbook::KitBase
6
- prop :icon, type: Playbook::Props::String
7
- prop :icon_color, type: Playbook::Props::Enum,
8
- values: %w[default royal blue purple teal red yellow green],
9
- default: "default"
10
-
11
- def classname
12
- generate_classname("pb_timeline_item_step")
13
- end
14
- end
15
- end
16
- end
@@ -1,29 +0,0 @@
1
- import React from 'react'
2
- import classnames from 'classnames'
3
- import { buildHtmlProps } from '../../utilities/props'
4
- import { globalProps, GlobalProps } from "../../utilities/globalProps"
5
-
6
- type TimelineDetailProps = {
7
- children?: React.ReactNode,
8
- className?: string,
9
- htmlOptions?: { [key: string]: any },
10
- } & GlobalProps
11
-
12
- const TimelineDetail: React.FC<TimelineDetailProps> = ({
13
- children,
14
- className,
15
- htmlOptions = {},
16
- ...props
17
- }) => {
18
- const htmlProps = buildHtmlProps(htmlOptions)
19
- return (
20
- <div
21
- {...htmlProps}
22
- className={classnames('pb_timeline_item_right_block', globalProps(props), className)}
23
- >
24
- {children}
25
- </div>
26
- )
27
- }
28
-
29
- export default TimelineDetail
@@ -1,38 +0,0 @@
1
- import React from 'react'
2
- import classnames from 'classnames'
3
- import { buildHtmlProps } from '../../utilities/props'
4
- import { globalProps, GlobalProps } from "../../utilities/globalProps"
5
- import DateStacked from '../../pb_date_stacked/_date_stacked'
6
-
7
- type TimelineLabelProps = {
8
- date?: Date,
9
- children?: React.ReactNode,
10
- className?: string,
11
- htmlOptions?: { [key: string]: any },
12
- } & GlobalProps
13
-
14
- const TimelineLabel: React.FC<TimelineLabelProps> = ({
15
- date,
16
- children,
17
- className,
18
- htmlOptions = {},
19
- ...props
20
- }) => {
21
- const htmlProps = buildHtmlProps(htmlOptions)
22
- return (
23
- <div
24
- {...htmlProps}
25
- className={classnames('pb_timeline_item_left_block', globalProps(props), className)}
26
- >
27
- {children}
28
- {date && (
29
- <DateStacked align="center"
30
- date={date}
31
- size="sm"
32
- />
33
- )}
34
- </div>
35
- )
36
- }
37
-
38
- export default TimelineLabel
@@ -1,42 +0,0 @@
1
- import React from 'react'
2
- import classnames from 'classnames'
3
- import { buildHtmlProps } from '../../utilities/props'
4
- import { globalProps, GlobalProps } from "../../utilities/globalProps"
5
- import IconCircle from '../../pb_icon_circle/_icon_circle'
6
-
7
- type TimelineStepProps = {
8
- icon?: string,
9
- iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
10
- children?: React.ReactNode,
11
- className?: string,
12
- htmlOptions?: { [key: string]: any },
13
- } & GlobalProps
14
-
15
- const TimelineStep: React.FC<TimelineStepProps> = ({
16
- icon = 'user',
17
- iconColor = 'default',
18
- children,
19
- className,
20
- htmlOptions = {},
21
- ...props
22
- }) => {
23
- const htmlProps = buildHtmlProps(htmlOptions)
24
- return (
25
- <div
26
- {...htmlProps}
27
- className={classnames('pb_timeline_item_step', globalProps(props), className)}
28
- >
29
- {children ? (
30
- children
31
- ) : (
32
- <IconCircle icon={icon}
33
- size="xs"
34
- variant={iconColor}
35
- />
36
- )}
37
- <div className="pb_timeline_item_connector" />
38
- </div>
39
- )
40
- }
41
-
42
- export default TimelineStep
@@ -1,3 +0,0 @@
1
- export { default as TimelineLabel } from './Label';
2
- export { default as TimelineDetail } from './Detail';
3
- export { default as TimelineStep } from './Step';