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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +1 -2
- data/app/pb_kits/playbook/pb_currency/_currency.tsx +6 -16
- data/app/pb_kits/playbook/pb_currency/currency.rb +11 -38
- data/app/pb_kits/playbook/pb_currency/currency.test.js +0 -35
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_currency/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +7 -8
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +2 -6
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +26 -30
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +1 -24
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +2 -25
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +1 -0
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +8 -46
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +2 -2
- data/app/pb_kits/playbook/pb_timeline/_item.tsx +23 -59
- data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +0 -8
- data/app/pb_kits/playbook/pb_timeline/docs/example.yml +1 -2
- data/app/pb_kits/playbook/pb_timeline/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_timeline/item.html.erb +21 -17
- data/app/pb_kits/playbook/pb_timeline/item.rb +0 -4
- data/app/pb_kits/playbook/pb_timeline/timeline.test.js +0 -84
- data/app/pb_kits/playbook/tokens/_typography.scss +0 -35
- data/dist/chunks/{_typeahead-BJrdFWHc.js → _typeahead-BV_n6U5W.js} +2 -2
- data/dist/chunks/_weekday_stacked-Cyqgh5-q.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +0 -3
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +5 -39
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb +0 -7
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx +0 -18
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md +0 -3
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md +0 -3
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md +0 -1
- data/app/pb_kits/playbook/pb_link/_link.scss +0 -66
- data/app/pb_kits/playbook/pb_link/_link.tsx +0 -107
- data/app/pb_kits/playbook/pb_link/docs/_link_color.html.erb +0 -30
- data/app/pb_kits/playbook/pb_link/docs/_link_color.jsx +0 -40
- data/app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb +0 -5
- data/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx +0 -15
- data/app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb +0 -15
- data/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx +0 -25
- data/app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb +0 -35
- data/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx +0 -45
- data/app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb +0 -5
- data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx +0 -15
- data/app/pb_kits/playbook/pb_link/docs/example.yml +0 -16
- data/app/pb_kits/playbook/pb_link/docs/index.js +0 -5
- data/app/pb_kits/playbook/pb_link/link.html.erb +0 -21
- data/app/pb_kits/playbook/pb_link/link.rb +0 -44
- data/app/pb_kits/playbook/pb_link/link.test.jsx +0 -92
- data/app/pb_kits/playbook/pb_timeline/detail.html.erb +0 -3
- data/app/pb_kits/playbook/pb_timeline/detail.rb +0 -11
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +0 -43
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +0 -68
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md +0 -2
- data/app/pb_kits/playbook/pb_timeline/label.html.erb +0 -12
- data/app/pb_kits/playbook/pb_timeline/label.rb +0 -13
- data/app/pb_kits/playbook/pb_timeline/step.html.erb +0 -14
- data/app/pb_kits/playbook/pb_timeline/step.rb +0 -16
- data/app/pb_kits/playbook/pb_timeline/subcomponents/Detail.tsx +0 -29
- data/app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx +0 -38
- data/app/pb_kits/playbook/pb_timeline/subcomponents/Step.tsx +0 -42
- data/app/pb_kits/playbook/pb_timeline/subcomponents/index.tsx +0 -3
- 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,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,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
|