playbook_ui 14.6.1 → 14.6.2.pre.alpha.PBNTR576tooltiptruncatedformpills4296

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -1
  3. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +4 -4
  4. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -3
  5. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +2 -2
  6. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +1 -1
  7. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +6 -2
  8. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +32 -26
  9. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +22 -1
  10. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +25 -2
  11. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +1 -1
  12. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +39 -7
  13. data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +2 -0
  14. data/app/pb_kits/playbook/pb_link/_link.scss +66 -0
  15. data/app/pb_kits/playbook/pb_link/_link.tsx +107 -0
  16. data/app/pb_kits/playbook/pb_link/docs/_link_color.html.erb +30 -0
  17. data/app/pb_kits/playbook/pb_link/docs/_link_color.jsx +40 -0
  18. data/app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb +5 -0
  19. data/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx +15 -0
  20. data/app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb +15 -0
  21. data/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx +25 -0
  22. data/app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb +35 -0
  23. data/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx +45 -0
  24. data/app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb +5 -0
  25. data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx +15 -0
  26. data/app/pb_kits/playbook/pb_link/docs/example.yml +16 -0
  27. data/app/pb_kits/playbook/pb_link/docs/index.js +5 -0
  28. data/app/pb_kits/playbook/pb_link/link.html.erb +21 -0
  29. data/app/pb_kits/playbook/pb_link/link.rb +44 -0
  30. data/app/pb_kits/playbook/pb_link/link.test.jsx +92 -0
  31. data/app/pb_kits/playbook/tokens/_typography.scss +35 -0
  32. data/dist/chunks/{_typeahead-BV_n6U5W.js → _typeahead-CGyRnRCQ.js} +2 -2
  33. data/dist/chunks/{_weekday_stacked-BR99DW9T.js → _weekday_stacked-BTMWkeKM.js} +3 -3
  34. data/dist/chunks/vendor.js +1 -1
  35. data/dist/menu.yml +3 -0
  36. data/dist/playbook-doc.js +1 -1
  37. data/dist/playbook-rails-react-bindings.js +1 -1
  38. data/dist/playbook-rails.js +1 -1
  39. data/dist/playbook.css +1 -1
  40. data/lib/playbook/version.rb +2 -2
  41. metadata +24 -7
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 7f6ea7da8d2792558be3547ba7f887dadbef40b7cc6e852865eccaf4c84a3026
4
- data.tar.gz: 24c904059667b83f19598861f87fb05348151ea3e2fcb57a0d092107480f5b76
3
+ metadata.gz: 89ab9a27621b94e30352163a1c90f30e4cfa79ff773f1933c308c40f3345c164
4
+ data.tar.gz: 2333af54c76ad12538d3c3b59c41561d1821abc7591e8afa7eca81df1748a4f9
5
5
  SHA512:
6
- metadata.gz: 82b8062e404c3ca8136f06c214176e53454f60576e3e3ec367f78b176726f925bf60ef71c18e94850f6a932c1dd78872f735a3c4ec7b18dc6f71485c0bdc2171
7
- data.tar.gz: 725519a7cd656ab4c3a81f1b2fb9114d99c660e4bcde7ea420a3b303922d0f82a8631d77fc9175bcdb44466dae2c3d07663ffa010f76939e2f3103bfb5591c84
6
+ metadata.gz: 63432e88ba76ed2231c9168dabee21ebb9573b95953667f28a9b151c8859cc9452d28467e100b7c51a73fdc0d2d20ebb13dde853d61b6aa581239b73ea0071da
7
+ data.tar.gz: a3268da60a7c6c0fca9769fa79fa0e5527c556a99f72d8787f4e39f1846057f70f0db22cb7dcefa7977b42eabadd7e68b47a092e3009aca88c9ebb6359a006ea
@@ -30,6 +30,7 @@
30
30
  @import 'pb_dialog/dialog';
31
31
  @import 'pb_distribution_bar/distribution_bar';
32
32
  @import 'pb_draggable/draggable';
33
+ @import 'pb_drawer/drawer';
33
34
  @import 'pb_dropdown/dropdown';
34
35
  @import 'pb_file_upload/file_upload';
35
36
  @import 'pb_filter/filter';
@@ -54,6 +55,7 @@
54
55
  @import 'pb_legend/legend';
55
56
  @import 'pb_lightbox/lightbox';
56
57
  @import 'pb_line_graph/line_graph';
58
+ @import 'pb_link/link';
57
59
  @import 'pb_list/list';
58
60
  @import 'pb_loading_inline/loading_inline';
59
61
  @import 'pb_map/map';
@@ -106,7 +108,6 @@
106
108
  @import 'pb_user_badge/user_badge';
107
109
  @import 'pb_walkthrough/walkthrough';
108
110
  @import 'pb_weekday_stacked/weekday_stacked';
109
- @import 'pb_drawer/drawer';
110
111
  @import 'utilities/mixins';
111
112
  @import 'utilities/spacing';
112
113
  @import 'utilities/cursor';
@@ -9,7 +9,7 @@
9
9
 
10
10
  @import "./scss_partials/dropdown_animation";
11
11
 
12
- .pb_dropdown {
12
+ [class*="pb_dropdown"] {
13
13
  .dropdown_wrapper {
14
14
  [class*="dropdown_trigger_wrapper"] {
15
15
  @include pb_body;
@@ -131,7 +131,7 @@
131
131
  }
132
132
  }
133
133
 
134
- &.separators_hidden {
134
+ &[class*="separators_hidden"] {
135
135
  .dropdown_wrapper {
136
136
  .pb_dropdown_container {
137
137
 
@@ -142,7 +142,7 @@
142
142
  }
143
143
  }
144
144
 
145
- &.subtle {
145
+ &[class*="subtle"] {
146
146
  .dropdown_wrapper {
147
147
  .pb_dropdown_container {
148
148
 
@@ -178,7 +178,7 @@
178
178
  }
179
179
  }
180
180
 
181
- &.separators_hidden {
181
+ &[class*="separators_hidden"] {
182
182
  .dropdown_wrapper {
183
183
  .pb_dropdown_container {
184
184
  [class*="pb_dropdown_option"]:first-child {
@@ -74,10 +74,8 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
74
74
  const htmlProps = buildHtmlProps(htmlOptions);
75
75
  const separatorsClass = separators ? '' : 'separators_hidden'
76
76
  const classes = classnames(
77
- buildCss("pb_dropdown"),
77
+ buildCss("pb_dropdown", variant, separatorsClass),
78
78
  globalProps(props),
79
- variant,
80
- separatorsClass,
81
79
  className
82
80
  );
83
81
 
@@ -24,7 +24,7 @@ module Playbook
24
24
  end
25
25
 
26
26
  def classname
27
- generate_classname("pb_dropdown", variant, separators_class, separator: " ")
27
+ generate_classname("pb_dropdown", variant, separators_class)
28
28
  end
29
29
 
30
30
  private
@@ -38,7 +38,7 @@ module Playbook
38
38
  end
39
39
 
40
40
  def separators_class
41
- separators ? "" : "separators_hidden"
41
+ separators ? nil : "separators_hidden"
42
42
  end
43
43
 
44
44
  def options_with_blank
@@ -50,7 +50,7 @@ test('generated default kit and classname', () => {
50
50
 
51
51
  const kit = screen.getByTestId(testId)
52
52
  expect(kit).toBeInTheDocument()
53
- expect(kit).toHaveClass('pb_dropdown')
53
+ expect(kit).toHaveClass('pb_dropdown_default')
54
54
  })
55
55
 
56
56
  test('generated default Trigger and Container when none passed in', () => {
@@ -142,7 +142,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
142
142
  height: 12px !important;
143
143
  width: 12px !important;
144
144
  padding-right: $space_xs;
145
- + .pb_form_pill_text, + .pb_form_pill_tag {
145
+ + .pb_form_pill_text, + .pb_form_pill_tag,
146
+ + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
147
+ + div .pb_form_pill_text, + div .pb_form_pill_tag {
146
148
  padding-left: 0;
147
149
  }
148
150
  }
@@ -169,7 +171,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
169
171
  }
170
172
  .pb_form_pill_icon {
171
173
  padding-right: $space_xxs;
172
- + .pb_form_pill_text, + .pb_form_pill_tag {
174
+ + .pb_form_pill_text, + .pb_form_pill_tag,
175
+ + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
176
+ + div .pb_form_pill_text, + div .pb_form_pill_tag {
173
177
  padding-left: 0;
174
178
  }
175
179
  }
@@ -3,6 +3,7 @@ import classnames from 'classnames'
3
3
  import Title from '../pb_title/_title'
4
4
  import Icon from '../pb_icon/_icon'
5
5
  import Avatar from '../pb_avatar/_avatar'
6
+ import Tooltip from '../pb_tooltip/_tooltip'
6
7
  import { globalProps, GlobalProps } from '../utilities/globalProps'
7
8
  import { buildDataProps, buildHtmlProps } from '../utilities/props'
8
9
 
@@ -21,6 +22,7 @@ type FormPillProps = {
21
22
  data?: {[key: string]: string},
22
23
  tabIndex?: number,
23
24
  icon?: string,
25
+ truncate?: number,
24
26
  closeProps?: {
25
27
  onClick?: React.MouseEventHandler<HTMLSpanElement>,
26
28
  onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
@@ -43,6 +45,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
43
45
  data = {},
44
46
  tabIndex,
45
47
  icon = "",
48
+ truncate,
46
49
  } = props
47
50
 
48
51
  const iconClass = icon ? "_icon" : ""
@@ -62,6 +65,30 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
62
65
  const dataProps = buildDataProps(data)
63
66
  const htmlProps = buildHtmlProps(htmlOptions)
64
67
 
68
+ const renderTitle = (content: string, className: string) => {
69
+ const titleComponent = (
70
+ <Title
71
+ className={className}
72
+ size={4}
73
+ text={content}
74
+ truncate={truncate}
75
+ />
76
+ )
77
+ if (truncate) {
78
+ return (
79
+ <Tooltip
80
+ interaction
81
+ placement="top"
82
+ position="fixed"
83
+ text={content}
84
+ >
85
+ {titleComponent}
86
+ </Tooltip>
87
+ )
88
+ }
89
+ return titleComponent
90
+ }
91
+
65
92
  return (
66
93
  <div className={css}
67
94
  id={id}
@@ -77,12 +104,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
77
104
  size="xxs"
78
105
  status={null}
79
106
  />
80
- <Title
81
- className="pb_form_pill_text"
82
- size={4}
83
- text={name}
84
- truncate={props.truncate}
85
- />
107
+ {renderTitle(name, "pb_form_pill_text")}
86
108
  </>
87
109
  )}
88
110
  {((name && icon && !text) || (name && icon && text)) && (
@@ -93,12 +115,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
93
115
  size="xxs"
94
116
  status={null}
95
117
  />
96
- <Title
97
- className="pb_form_pill_text"
98
- size={4}
99
- text={name}
100
- truncate={props.truncate}
101
- />
118
+ {renderTitle(name, "pb_form_pill_text")}
102
119
  <Icon
103
120
  className="pb_form_pill_icon"
104
121
  color={color}
@@ -113,22 +130,10 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
113
130
  color={color}
114
131
  icon={icon}
115
132
  />
116
- <Title
117
- className="pb_form_pill_tag"
118
- size={4}
119
- text={text}
120
- truncate={props.truncate}
121
- />
133
+ {renderTitle(text, "pb_form_pill_tag")}
122
134
  </>
123
135
  )}
124
- {(!name && !icon && text) && (
125
- <Title
126
- className="pb_form_pill_tag"
127
- size={4}
128
- text={text}
129
- truncate={props.truncate}
130
- />
131
- )}
136
+ {(!name && !icon && text) && renderTitle(text, "pb_form_pill_tag")}
132
137
  <div
133
138
  className="pb_form_pill_close"
134
139
  onClick={onClick}
@@ -143,4 +148,5 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
143
148
  </div>
144
149
  )
145
150
  }
151
+
146
152
  export default FormPill
@@ -13,7 +13,28 @@
13
13
  id: "typeahead-form-pill",
14
14
  is_multi: true,
15
15
  options: names,
16
- label: "Names",
16
+ label: "Truncation Within Typeahead",
17
17
  pills: true,
18
18
  truncate: 1,
19
19
  }) %>
20
+
21
+ <%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
22
+ <%= pb_rails("card", props: { max_width: "xs" }) do %>
23
+ <%= pb_rails("form_pill", props: {
24
+ name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
25
+ avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
26
+ tabindex: 0,
27
+ truncate: 1,
28
+ }) %>
29
+ <%= pb_rails("form_pill", props: {
30
+ icon: "badge-check",
31
+ text: "icon and a very long tag to show truncation",
32
+ tabindex: 0,
33
+ truncate: 1,
34
+ }) %>
35
+ <%= pb_rails("form_pill", props: {
36
+ text: "form pill with a very long tag to show truncation",
37
+ tabindex: 0,
38
+ truncate: 1,
39
+ }) %>
40
+ <% end %>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import Typeahead from '../../pb_typeahead/_typeahead'
2
+ import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
3
3
 
4
4
  const names = [
5
5
  { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
@@ -15,11 +15,34 @@ const FormPillTruncatedText = (props) => {
15
15
  <Typeahead
16
16
  htmlOptions={{ style: { maxWidth: "240px" }}}
17
17
  isMulti
18
- label="Names"
18
+ label="Truncation Within Typeahead"
19
19
  options={names}
20
20
  truncate={1}
21
21
  {...props}
22
22
  />
23
+ <Caption text="Form Pill Truncation"/>
24
+ <Card maxWidth="xs">
25
+ <FormPill
26
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
27
+ name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
28
+ onClick={() => alert('Click!')}
29
+ tabIndex={0}
30
+ truncate={1}
31
+ />
32
+ <FormPill
33
+ icon="badge-check"
34
+ onClick={() => {alert('Click!')}}
35
+ tabIndex={0}
36
+ text="icon and a very long tag to show truncation"
37
+ truncate={1}
38
+ />
39
+ <FormPill
40
+ onClick={() => {alert('Click!')}}
41
+ tabIndex={0}
42
+ text="form pill with a very long tag to show truncation"
43
+ truncate={1}
44
+ />
45
+ </Card>
23
46
  </>
24
47
  )
25
48
  }
@@ -1 +1 @@
1
- For 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.
1
+ For 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,19 +1,51 @@
1
1
  <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
2
2
  <% if object.name.present? %>
3
3
  <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
4
- <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
4
+ <% element_id = "pill_#{object.name.parameterize}" %>
5
+ <div>
6
+ <%= pb_rails("title", props: {
7
+ classname: "pb_form_pill_text #{object.truncate ? "truncate_#{object.truncate}" : ""}",
8
+ id: element_id,
9
+ size: 4,
10
+ text: object.name,
11
+ }) %>
12
+ <% if object.truncate %>
13
+ <%= pb_rails("tooltip", props: {
14
+ position: "top",
15
+ tooltip_id: "tooltip-#{element_id}",
16
+ trigger_element_selector: "##{element_id}"
17
+ }) do %>
18
+ <%= object.name %>
19
+ <% end %>
20
+ <% end %>
21
+ </div>
5
22
  <% if object.icon.present? %>
6
23
  <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
7
24
  <% end %>
8
25
  <% elsif object.text.present? %>
9
- <% if object.icon.present? %>
10
- <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
11
- <% end %>
12
- <% if object.text.present? %>
13
- <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
26
+ <% if object.icon.present? %>
27
+ <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
28
+ <% end %>
29
+ <% element_id = "pill_#{object.text.parameterize}" %>
30
+ <div>
31
+ <%= pb_rails("title", props: {
32
+ classname: "pb_form_pill_tag #{object.truncate ? "truncate_#{object.truncate}" : ""}",
33
+ id: element_id,
34
+ size: 4,
35
+ text: object.text
36
+ }) %>
37
+ <% if object.truncate %>
38
+ <%= pb_rails("tooltip", props: {
39
+ position: "top",
40
+ tooltip_id: "tooltip-#{element_id}",
41
+ trigger_element_selector: "##{element_id}"
42
+ }) do %>
43
+ <%= object.text %>
44
+ <% end %>
14
45
  <% end %>
46
+ </div>
15
47
  <% end %>
16
48
  <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
17
49
  <%= pb_rails("icon", props: { icon: 'times', fixed_width: true, size: object.close_icon_size }) %>
18
50
  <% end %>
19
- <% end %>
51
+ <% end %>
@@ -16,6 +16,8 @@ module Playbook
16
16
  default: "primary"
17
17
  prop :tabindex
18
18
  prop :icon
19
+ prop :truncate, type: Playbook::Props::Number,
20
+ default: nil
19
21
 
20
22
  def classname
21
23
  generate_classname("pb_form_pill_kit", color, icon_class, name, text, text_transform)
@@ -0,0 +1,66 @@
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
+ }
@@ -0,0 +1,107 @@
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
@@ -0,0 +1,30 @@
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>
@@ -0,0 +1,40 @@
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
@@ -0,0 +1,5 @@
1
+ <%= pb_rails("link", props: {
2
+ text: "link example",
3
+ href: "#disabled",
4
+ disabled: true,
5
+ }) %>
@@ -0,0 +1,15 @@
1
+ import React from 'react'
2
+ import { Link } from 'playbook-ui'
3
+
4
+ const LinkDisabled = (props) => (
5
+ <div>
6
+ <Link
7
+ disabled
8
+ href="#disabled"
9
+ text="link example"
10
+ {...props}
11
+ />
12
+ </div>
13
+ )
14
+
15
+ export default LinkDisabled
@@ -0,0 +1,15 @@
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>