playbook_ui 14.6.2.pre.alpha.PBNTR667railstypeaheadformintegration4424 → 14.6.2.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4247
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +1 -8
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +28 -21
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +1 -37
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +2 -13
- 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/docs/_form_form_with.html.erb +2 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +12 -63
- 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/pb_typeahead/typeahead.html.erb +1 -7
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +0 -2
- data/app/pb_kits/playbook/tokens/_typography.scss +0 -35
- data/app/pb_kits/playbook/utilities/_hover.scss +43 -46
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +0 -1
- data/app/pb_kits/playbook/utilities/globalProps.ts +1 -6
- data/dist/chunks/_typeahead-BV_n6U5W.js +22 -0
- 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/forms/builder/typeahead_field.rb +0 -1
- data/lib/playbook/hover.rb +1 -4
- 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/_typeahead-5m7Pr_Rh.js +0 -22
- data/dist/chunks/_weekday_stacked-B4YQ6Z-d.js +0 -45
@@ -5,7 +5,6 @@ module Playbook
|
|
5
5
|
class Builder
|
6
6
|
def typeahead(name, _options = {}, _html_options = {}, props: {})
|
7
7
|
props[:name] = name
|
8
|
-
props[:label] = props[:label] == true ? name.to_s.underscore.humanize : props[:label]
|
9
8
|
@template.pb_rails("typeahead", props: props)
|
10
9
|
end
|
11
10
|
end
|
data/lib/playbook/hover.rb
CHANGED
@@ -4,7 +4,6 @@ module Playbook
|
|
4
4
|
module Hover
|
5
5
|
def self.included(base)
|
6
6
|
base.prop :hover
|
7
|
-
base.prop :group_hover, type: Playbook::Props::Boolean, default: false
|
8
7
|
end
|
9
8
|
|
10
9
|
def hover_options
|
@@ -39,8 +38,7 @@ module Playbook
|
|
39
38
|
|
40
39
|
def hover_props
|
41
40
|
selected_props = hover_options.keys.select { |sk| try(sk) }
|
42
|
-
|
43
|
-
return nil if selected_props.nil? && group_hover.nil?
|
41
|
+
return nil unless selected_props.present?
|
44
42
|
|
45
43
|
responsive = selected_props.present? && try(selected_props.first).is_a?(::Hash)
|
46
44
|
css = ""
|
@@ -60,7 +58,6 @@ module Playbook
|
|
60
58
|
end
|
61
59
|
end
|
62
60
|
|
63
|
-
css += "group_hover " if group_hover
|
64
61
|
css.strip unless css.blank?
|
65
62
|
end
|
66
63
|
end
|
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 %>
|