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
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 14.6.2.pre.alpha.
|
4
|
+
version: 14.6.2.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4247
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2024-
|
12
|
+
date: 2024-10-25 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -762,9 +762,6 @@ files:
|
|
762
762
|
- app/pb_kits/playbook/pb_currency/docs/_currency_alignment.html.erb
|
763
763
|
- app/pb_kits/playbook/pb_currency/docs/_currency_alignment.jsx
|
764
764
|
- app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md
|
765
|
-
- app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb
|
766
|
-
- app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx
|
767
|
-
- app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md
|
768
765
|
- app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.html.erb
|
769
766
|
- app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.jsx
|
770
767
|
- app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.html.erb
|
@@ -1385,8 +1382,7 @@ files:
|
|
1385
1382
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx
|
1386
1383
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb
|
1387
1384
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx
|
1388
|
-
- app/pb_kits/playbook/pb_form_pill/docs/
|
1389
|
-
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md
|
1385
|
+
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md
|
1390
1386
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb
|
1391
1387
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx
|
1392
1388
|
- app/pb_kits/playbook/pb_form_pill/docs/example.yml
|
@@ -1736,23 +1732,6 @@ files:
|
|
1736
1732
|
- app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js
|
1737
1733
|
- app/pb_kits/playbook/pb_line_graph/line_graph.html.erb
|
1738
1734
|
- app/pb_kits/playbook/pb_line_graph/line_graph.rb
|
1739
|
-
- app/pb_kits/playbook/pb_link/_link.scss
|
1740
|
-
- app/pb_kits/playbook/pb_link/_link.tsx
|
1741
|
-
- app/pb_kits/playbook/pb_link/docs/_link_color.html.erb
|
1742
|
-
- app/pb_kits/playbook/pb_link/docs/_link_color.jsx
|
1743
|
-
- app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb
|
1744
|
-
- app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx
|
1745
|
-
- app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb
|
1746
|
-
- app/pb_kits/playbook/pb_link/docs/_link_icon.jsx
|
1747
|
-
- app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb
|
1748
|
-
- app/pb_kits/playbook/pb_link/docs/_link_tag.jsx
|
1749
|
-
- app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb
|
1750
|
-
- app/pb_kits/playbook/pb_link/docs/_link_underline.jsx
|
1751
|
-
- app/pb_kits/playbook/pb_link/docs/example.yml
|
1752
|
-
- app/pb_kits/playbook/pb_link/docs/index.js
|
1753
|
-
- app/pb_kits/playbook/pb_link/link.html.erb
|
1754
|
-
- app/pb_kits/playbook/pb_link/link.rb
|
1755
|
-
- app/pb_kits/playbook/pb_link/link.test.jsx
|
1756
1735
|
- app/pb_kits/playbook/pb_list/_list.scss
|
1757
1736
|
- app/pb_kits/playbook/pb_list/_list.tsx
|
1758
1737
|
- app/pb_kits/playbook/pb_list/_list_item.tsx
|
@@ -2739,16 +2718,11 @@ files:
|
|
2739
2718
|
- app/pb_kits/playbook/pb_timeline/_item.tsx
|
2740
2719
|
- app/pb_kits/playbook/pb_timeline/_timeline.scss
|
2741
2720
|
- app/pb_kits/playbook/pb_timeline/_timeline.tsx
|
2742
|
-
- app/pb_kits/playbook/pb_timeline/detail.html.erb
|
2743
|
-
- app/pb_kits/playbook/pb_timeline/detail.rb
|
2744
2721
|
- app/pb_kits/playbook/pb_timeline/docs/_description.md
|
2745
2722
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_default.html.erb
|
2746
2723
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx
|
2747
2724
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.html.erb
|
2748
2725
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx
|
2749
|
-
- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb
|
2750
|
-
- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx
|
2751
|
-
- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md
|
2752
2726
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb
|
2753
2727
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx
|
2754
2728
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md
|
@@ -2756,14 +2730,6 @@ files:
|
|
2756
2730
|
- app/pb_kits/playbook/pb_timeline/docs/index.js
|
2757
2731
|
- app/pb_kits/playbook/pb_timeline/item.html.erb
|
2758
2732
|
- app/pb_kits/playbook/pb_timeline/item.rb
|
2759
|
-
- app/pb_kits/playbook/pb_timeline/label.html.erb
|
2760
|
-
- app/pb_kits/playbook/pb_timeline/label.rb
|
2761
|
-
- app/pb_kits/playbook/pb_timeline/step.html.erb
|
2762
|
-
- app/pb_kits/playbook/pb_timeline/step.rb
|
2763
|
-
- app/pb_kits/playbook/pb_timeline/subcomponents/Detail.tsx
|
2764
|
-
- app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx
|
2765
|
-
- app/pb_kits/playbook/pb_timeline/subcomponents/Step.tsx
|
2766
|
-
- app/pb_kits/playbook/pb_timeline/subcomponents/index.tsx
|
2767
2733
|
- app/pb_kits/playbook/pb_timeline/timeline.html.erb
|
2768
2734
|
- app/pb_kits/playbook/pb_timeline/timeline.rb
|
2769
2735
|
- app/pb_kits/playbook/pb_timeline/timeline.test.js
|
@@ -3133,8 +3099,8 @@ files:
|
|
3133
3099
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
3134
3100
|
- app/pb_kits/playbook/utilities/text.ts
|
3135
3101
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
3136
|
-
- dist/chunks/_typeahead-
|
3137
|
-
- dist/chunks/_weekday_stacked-
|
3102
|
+
- dist/chunks/_typeahead-BV_n6U5W.js
|
3103
|
+
- dist/chunks/_weekday_stacked-Cyqgh5-q.js
|
3138
3104
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3139
3105
|
- dist/chunks/lib-D-mTv-kp.js
|
3140
3106
|
- dist/chunks/pb_form_validation-BkWGwJsl.js
|
@@ -1,18 +0,0 @@
|
|
1
|
-
import React from "react"
|
2
|
-
|
3
|
-
import Currency from "../_currency"
|
4
|
-
|
5
|
-
const CurrencyCommaSeparator = (props) => {
|
6
|
-
return (
|
7
|
-
<Currency
|
8
|
-
amount='1234567.89'
|
9
|
-
commaSeparator
|
10
|
-
decimals="matching"
|
11
|
-
emphasized={false}
|
12
|
-
size="lg"
|
13
|
-
{...props}
|
14
|
-
/>
|
15
|
-
)
|
16
|
-
}
|
17
|
-
|
18
|
-
export default CurrencyCommaSeparator
|
@@ -1,3 +0,0 @@
|
|
1
|
-
For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
|
2
|
-
|
3
|
-
__NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.
|
@@ -1 +0,0 @@
|
|
1
|
-
For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
|
@@ -1,66 +0,0 @@
|
|
1
|
-
@import "../tokens/colors";
|
2
|
-
@import "../tokens/line_height";
|
3
|
-
@import "../tokens/typography";
|
4
|
-
@import "../tokens/border_radius";
|
5
|
-
|
6
|
-
[class^=pb_link_kit]{
|
7
|
-
@include pb_link($primary);
|
8
|
-
&:hover {
|
9
|
-
color: $text_lt_default;
|
10
|
-
}
|
11
|
-
&:focus {
|
12
|
-
outline: none;
|
13
|
-
}
|
14
|
-
&:focus-visible {
|
15
|
-
border-radius: $border_rad_light;
|
16
|
-
outline: 1px solid $primary;
|
17
|
-
outline-offset: 2px;
|
18
|
-
}
|
19
|
-
&:visited {
|
20
|
-
color: $data_3;
|
21
|
-
}
|
22
|
-
&.dark {
|
23
|
-
@include pb_link($active_dark);
|
24
|
-
&:hover {
|
25
|
-
color: $text_dk_default;
|
26
|
-
}
|
27
|
-
}
|
28
|
-
@each $color_name, $color_value in $pb_link_colors {
|
29
|
-
&[class*=_#{"" + $color_name}] {
|
30
|
-
@include pb_link($color_value);
|
31
|
-
|
32
|
-
&:hover {
|
33
|
-
color: map-get($pb_link_hover_colors, $color_name);
|
34
|
-
}
|
35
|
-
|
36
|
-
&:visited {
|
37
|
-
color: $data_3;
|
38
|
-
}
|
39
|
-
}
|
40
|
-
}
|
41
|
-
|
42
|
-
@each $dark_color_name, $dark_color_value in $pb_dark_link_colors{
|
43
|
-
&[class*=_#{$dark_color_name}][class*=dark]{
|
44
|
-
@include pb_link($dark_color_value);
|
45
|
-
|
46
|
-
&:hover {
|
47
|
-
color: map-get($pb_dark_link_hover_colors, $dark_color_name);
|
48
|
-
}
|
49
|
-
|
50
|
-
&:visited {
|
51
|
-
color: $data_3;
|
52
|
-
}
|
53
|
-
}
|
54
|
-
}
|
55
|
-
|
56
|
-
&[class*=_underline] {
|
57
|
-
text-decoration: underline;
|
58
|
-
}
|
59
|
-
|
60
|
-
&[class*=_disabled] {
|
61
|
-
pointer-events: none;
|
62
|
-
cursor: default;
|
63
|
-
color: $text_lt_lighter;
|
64
|
-
}
|
65
|
-
|
66
|
-
}
|
@@ -1,107 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import classnames from 'classnames'
|
3
|
-
|
4
|
-
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
5
|
-
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
6
|
-
|
7
|
-
import Icon from '../pb_icon/_icon'
|
8
|
-
|
9
|
-
type LinkProps = {
|
10
|
-
aria?: {[key: string]: string},
|
11
|
-
className?: string,
|
12
|
-
children?: React.ReactChild[] | React.ReactChild,
|
13
|
-
color?: 'default' | 'body' | 'muted' | 'destructive',
|
14
|
-
dark?: boolean,
|
15
|
-
data?: {[key: string]: string},
|
16
|
-
disabled?: boolean,
|
17
|
-
href?: string,
|
18
|
-
htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((arg?: Event) => void)},
|
19
|
-
icon?: string,
|
20
|
-
iconRight?: string,
|
21
|
-
id?: string,
|
22
|
-
tag?: 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
|
23
|
-
text?: string,
|
24
|
-
underline?: boolean,
|
25
|
-
} & GlobalProps
|
26
|
-
|
27
|
-
const Link = (props: LinkProps): React.ReactElement => {
|
28
|
-
const {
|
29
|
-
aria = {},
|
30
|
-
children,
|
31
|
-
className,
|
32
|
-
color = '',
|
33
|
-
data = {},
|
34
|
-
disabled = false,
|
35
|
-
href= '',
|
36
|
-
htmlOptions = {},
|
37
|
-
icon = '',
|
38
|
-
iconRight = '',
|
39
|
-
id = '',
|
40
|
-
tag = 'a',
|
41
|
-
text = '',
|
42
|
-
underline = false,
|
43
|
-
} = props
|
44
|
-
|
45
|
-
const ariaProps: {[key: string]: string} = buildAriaProps(aria)
|
46
|
-
const dataProps: {[key: string]: string} = buildDataProps(data)
|
47
|
-
const htmlProps = buildHtmlProps(htmlOptions);
|
48
|
-
const classes = classnames(
|
49
|
-
buildCss('pb_link_kit', color, underline ? 'underline' : '', disabled ? 'disabled' : ''),
|
50
|
-
globalProps(props),
|
51
|
-
className
|
52
|
-
)
|
53
|
-
const Tag = tag as keyof JSX.IntrinsicElements
|
54
|
-
|
55
|
-
const renderContent = () => (
|
56
|
-
<>
|
57
|
-
{icon && (
|
58
|
-
<Icon
|
59
|
-
fixedWidth
|
60
|
-
icon={icon}
|
61
|
-
marginRight="xxs"
|
62
|
-
size="xs"
|
63
|
-
/>
|
64
|
-
)}
|
65
|
-
{text || children}
|
66
|
-
{iconRight && (
|
67
|
-
<Icon
|
68
|
-
fixedWidth
|
69
|
-
icon={iconRight}
|
70
|
-
marginLeft="xxs"
|
71
|
-
size="xs"
|
72
|
-
/>
|
73
|
-
)}
|
74
|
-
</>
|
75
|
-
)
|
76
|
-
|
77
|
-
const commonProps = {
|
78
|
-
...ariaProps,
|
79
|
-
...dataProps,
|
80
|
-
...htmlProps,
|
81
|
-
className: classes,
|
82
|
-
id,
|
83
|
-
}
|
84
|
-
|
85
|
-
if (tag === 'a') {
|
86
|
-
return (
|
87
|
-
<a
|
88
|
-
{...commonProps}
|
89
|
-
href={href}
|
90
|
-
>
|
91
|
-
{renderContent()}
|
92
|
-
</a>
|
93
|
-
)
|
94
|
-
} else {
|
95
|
-
return (
|
96
|
-
<a
|
97
|
-
{...commonProps}
|
98
|
-
href={href}
|
99
|
-
>
|
100
|
-
<Tag>{renderContent()}</Tag>
|
101
|
-
</a>
|
102
|
-
)
|
103
|
-
}
|
104
|
-
|
105
|
-
}
|
106
|
-
|
107
|
-
export default Link
|
@@ -1,30 +0,0 @@
|
|
1
|
-
<div>
|
2
|
-
<%= pb_rails("link", props: {
|
3
|
-
text: "link example",
|
4
|
-
href: "https://www.google.com/search?q=playbook+design+system",
|
5
|
-
}) %>
|
6
|
-
</div>
|
7
|
-
|
8
|
-
<div>
|
9
|
-
<%= pb_rails("link", props: {
|
10
|
-
text: "link example",
|
11
|
-
href: "https://www.youtube.com/@PowerHRG",
|
12
|
-
color: "body",
|
13
|
-
}) %>
|
14
|
-
</div>
|
15
|
-
|
16
|
-
<div>
|
17
|
-
<%= pb_rails("link", props: {
|
18
|
-
text: "link example",
|
19
|
-
href: "https://github.com/powerhome/.github/blob/main/profile/README.md",
|
20
|
-
color: "muted",
|
21
|
-
}) %>
|
22
|
-
</div>
|
23
|
-
|
24
|
-
<div>
|
25
|
-
<%= pb_rails("link", props: {
|
26
|
-
text: "link example",
|
27
|
-
href: "https://rubygems.org/gems/playbook_ui/",
|
28
|
-
color: "destructive",
|
29
|
-
}) %>
|
30
|
-
</div>
|
@@ -1,40 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Link } from 'playbook-ui'
|
3
|
-
|
4
|
-
const LinkColor = (props) => (
|
5
|
-
<div>
|
6
|
-
<div>
|
7
|
-
<Link
|
8
|
-
href="https://www.google.com/search?q=playbook+design+system"
|
9
|
-
text="link example"
|
10
|
-
{...props}
|
11
|
-
/>
|
12
|
-
</div>
|
13
|
-
<div>
|
14
|
-
<Link
|
15
|
-
color="body"
|
16
|
-
href="https://www.youtube.com/@PowerHRG"
|
17
|
-
text="link example"
|
18
|
-
{...props}
|
19
|
-
/>
|
20
|
-
</div>
|
21
|
-
<div>
|
22
|
-
<Link
|
23
|
-
color="muted"
|
24
|
-
href="https://github.com/powerhome/.github/blob/main/profile/README.md"
|
25
|
-
text="link example"
|
26
|
-
{...props}
|
27
|
-
/>
|
28
|
-
</div>
|
29
|
-
<div>
|
30
|
-
<Link
|
31
|
-
color="destructive"
|
32
|
-
href="https://rubygems.org/gems/playbook_ui/"
|
33
|
-
text="link example"
|
34
|
-
{...props}
|
35
|
-
/>
|
36
|
-
</div>
|
37
|
-
</div>
|
38
|
-
)
|
39
|
-
|
40
|
-
export default LinkColor
|
@@ -1,15 +0,0 @@
|
|
1
|
-
<div>
|
2
|
-
<%= pb_rails("link", props: {
|
3
|
-
text: "link example",
|
4
|
-
href: "#icon",
|
5
|
-
icon: "arrow-up-right-from-square",
|
6
|
-
}) %>
|
7
|
-
</div>
|
8
|
-
|
9
|
-
<div>
|
10
|
-
<%= pb_rails("link", props: {
|
11
|
-
text: "link example",
|
12
|
-
href: "#icon2",
|
13
|
-
icon_right: "chevron-right",
|
14
|
-
}) %>
|
15
|
-
</div>
|
@@ -1,25 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Link } from 'playbook-ui'
|
3
|
-
|
4
|
-
const LinkIcon = (props) => (
|
5
|
-
<div>
|
6
|
-
<div>
|
7
|
-
<Link
|
8
|
-
href="#icon"
|
9
|
-
icon="arrow-up-right-from-square"
|
10
|
-
text="link example"
|
11
|
-
{...props}
|
12
|
-
/>
|
13
|
-
</div>
|
14
|
-
<div>
|
15
|
-
<Link
|
16
|
-
href="#icon2"
|
17
|
-
iconRight="chevron-right"
|
18
|
-
text="link example"
|
19
|
-
{...props}
|
20
|
-
/>
|
21
|
-
</div>
|
22
|
-
</div>
|
23
|
-
)
|
24
|
-
|
25
|
-
export default LinkIcon
|
@@ -1,35 +0,0 @@
|
|
1
|
-
<%= pb_rails("link", props: {
|
2
|
-
text: "h1 link example",
|
3
|
-
href: "#tag",
|
4
|
-
icon: "arrow-up-right-from-square",
|
5
|
-
tag: "h1",
|
6
|
-
}) %>
|
7
|
-
|
8
|
-
<%= pb_rails("link", props: {
|
9
|
-
text: "h3 link example",
|
10
|
-
href: "#tag2",
|
11
|
-
tag: "h3",
|
12
|
-
underline: true,
|
13
|
-
}) %>
|
14
|
-
|
15
|
-
<%= pb_rails("link", props: {
|
16
|
-
color: "destructive",
|
17
|
-
text: "h6 link example",
|
18
|
-
href: "#tag3",
|
19
|
-
tag: "h6",
|
20
|
-
}) %>
|
21
|
-
|
22
|
-
<%= pb_rails("link", props: {
|
23
|
-
text: "p link example",
|
24
|
-
href: "#tag4",
|
25
|
-
icon_right: "chevron-right",
|
26
|
-
tag: "p",
|
27
|
-
}) %>
|
28
|
-
|
29
|
-
<div>
|
30
|
-
This is a <%= pb_rails("link", props: {
|
31
|
-
text: "span link example",
|
32
|
-
href: "#tag5",
|
33
|
-
tag: "span",
|
34
|
-
}) %>
|
35
|
-
</div>
|
@@ -1,45 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Link } from 'playbook-ui'
|
3
|
-
|
4
|
-
const LinkTag = (props) => (
|
5
|
-
<div>
|
6
|
-
<Link
|
7
|
-
href="#tag"
|
8
|
-
icon="arrow-up-right-from-square"
|
9
|
-
tag="h1"
|
10
|
-
text="h1 link example"
|
11
|
-
{...props}
|
12
|
-
/>
|
13
|
-
<Link
|
14
|
-
href="#tag2"
|
15
|
-
tag="h3"
|
16
|
-
text="h3 link example"
|
17
|
-
underline
|
18
|
-
{...props}
|
19
|
-
/>
|
20
|
-
<Link
|
21
|
-
color="destructive"
|
22
|
-
href="#tag3"
|
23
|
-
tag="h6"
|
24
|
-
text="h6 link example"
|
25
|
-
{...props}
|
26
|
-
/>
|
27
|
-
<Link
|
28
|
-
href="#tag4"
|
29
|
-
iconRight="chevron-right"
|
30
|
-
tag="p"
|
31
|
-
text="p link example"
|
32
|
-
{...props}
|
33
|
-
/>
|
34
|
-
<div>
|
35
|
-
This is a <Link
|
36
|
-
href="#tag5"
|
37
|
-
tag="span"
|
38
|
-
text="span link example"
|
39
|
-
{...props}
|
40
|
-
/>
|
41
|
-
</div>
|
42
|
-
</div>
|
43
|
-
)
|
44
|
-
|
45
|
-
export default LinkTag
|
@@ -1,16 +0,0 @@
|
|
1
|
-
examples:
|
2
|
-
|
3
|
-
rails:
|
4
|
-
- link_color: Color
|
5
|
-
- link_underline: Underline
|
6
|
-
- link_icon: Icon
|
7
|
-
- link_disabled: Disabled
|
8
|
-
- link_tag: Tag
|
9
|
-
|
10
|
-
|
11
|
-
react:
|
12
|
-
- link_color: Color
|
13
|
-
- link_underline: Underline
|
14
|
-
- link_icon: Icon
|
15
|
-
- link_disabled: Disabled
|
16
|
-
- link_tag: Tag
|
@@ -1,5 +0,0 @@
|
|
1
|
-
export { default as LinkColor } from './_link_color.jsx'
|
2
|
-
export { default as LinkUnderline } from './_link_underline.jsx'
|
3
|
-
export { default as LinkIcon } from './_link_icon.jsx'
|
4
|
-
export { default as LinkDisabled } from './_link_disabled.jsx'
|
5
|
-
export { default as LinkTag } from './_link_tag.jsx'
|
@@ -1,21 +0,0 @@
|
|
1
|
-
<% link_content = proc do %>
|
2
|
-
<% if object.icon.present? %>
|
3
|
-
<%= pb_rails("icon", props: { icon: object.icon, fixed_width: true, size: "xs", margin_right: "xxs" }) %>
|
4
|
-
<% end %>
|
5
|
-
<%= object.content %>
|
6
|
-
<% if object.icon_right.present? %>
|
7
|
-
<%= pb_rails("icon", props: { icon: object.icon_right, fixed_width: true, size: "xs", margin_left: "xxs" }) %>
|
8
|
-
<% end %>
|
9
|
-
<% end %>
|
10
|
-
|
11
|
-
<% if object.tag == "a" %>
|
12
|
-
<%= pb_content_tag(object.tag, { href: object.href }) do %>
|
13
|
-
<%= link_content.call %>
|
14
|
-
<% end %>
|
15
|
-
<% else %>
|
16
|
-
<%= pb_content_tag(:a, { href: object.href }) do %>
|
17
|
-
<%= content_tag(object.tag) do %>
|
18
|
-
<%= link_content.call %>
|
19
|
-
<% end %>
|
20
|
-
<% end %>
|
21
|
-
<% end %>
|
@@ -1,44 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Playbook
|
4
|
-
module PbLink
|
5
|
-
class Link < ::Playbook::KitBase
|
6
|
-
prop :color, type: Playbook::Props::Enum,
|
7
|
-
values: %w[default body muted destructive],
|
8
|
-
default: "default"
|
9
|
-
prop :disabled, type: Playbook::Props::Boolean,
|
10
|
-
default: false
|
11
|
-
prop :href
|
12
|
-
prop :icon
|
13
|
-
prop :icon_right
|
14
|
-
prop :tag, type: Playbook::Props::Enum,
|
15
|
-
values: %w[a h1 h2 h3 h4 h5 h6 p span div],
|
16
|
-
default: "a"
|
17
|
-
prop :text
|
18
|
-
prop :underline, type: Playbook::Props::Boolean,
|
19
|
-
default: false
|
20
|
-
|
21
|
-
def classname
|
22
|
-
generate_classname("pb_link_kit", color_class, underline_class, disabled_class)
|
23
|
-
end
|
24
|
-
|
25
|
-
def content
|
26
|
-
text
|
27
|
-
end
|
28
|
-
|
29
|
-
private
|
30
|
-
|
31
|
-
def color_class
|
32
|
-
color == "default" ? nil : color
|
33
|
-
end
|
34
|
-
|
35
|
-
def disabled_class
|
36
|
-
disabled ? "disabled" : nil
|
37
|
-
end
|
38
|
-
|
39
|
-
def underline_class
|
40
|
-
underline ? "underline" : nil
|
41
|
-
end
|
42
|
-
end
|
43
|
-
end
|
44
|
-
end
|