playbook_ui 14.6.2.pre.alpha.PBNTR667railstypeaheadformintegration4424 → 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 (86) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -2
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +1 -8
  4. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +28 -21
  5. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +1 -37
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +2 -13
  7. data/app/pb_kits/playbook/pb_currency/_currency.tsx +6 -16
  8. data/app/pb_kits/playbook/pb_currency/currency.rb +11 -38
  9. data/app/pb_kits/playbook/pb_currency/currency.test.js +0 -35
  10. data/app/pb_kits/playbook/pb_currency/docs/example.yml +1 -3
  11. data/app/pb_kits/playbook/pb_currency/docs/index.js +0 -1
  12. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +7 -8
  13. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +2 -2
  14. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +1 -1
  15. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +12 -63
  16. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +2 -6
  17. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +26 -30
  18. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +1 -24
  19. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +2 -25
  20. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +1 -0
  21. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +8 -46
  22. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +1 -1
  23. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +1 -1
  24. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +2 -2
  25. data/app/pb_kits/playbook/pb_timeline/_item.tsx +23 -59
  26. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +0 -8
  27. data/app/pb_kits/playbook/pb_timeline/docs/example.yml +1 -2
  28. data/app/pb_kits/playbook/pb_timeline/docs/index.js +0 -1
  29. data/app/pb_kits/playbook/pb_timeline/item.html.erb +21 -17
  30. data/app/pb_kits/playbook/pb_timeline/item.rb +0 -4
  31. data/app/pb_kits/playbook/pb_timeline/timeline.test.js +0 -84
  32. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +1 -7
  33. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +0 -2
  34. data/app/pb_kits/playbook/tokens/_typography.scss +0 -35
  35. data/app/pb_kits/playbook/utilities/_hover.scss +43 -46
  36. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +0 -1
  37. data/app/pb_kits/playbook/utilities/globalProps.ts +1 -6
  38. data/dist/chunks/_typeahead-BV_n6U5W.js +22 -0
  39. data/dist/chunks/_weekday_stacked-Cyqgh5-q.js +45 -0
  40. data/dist/chunks/vendor.js +1 -1
  41. data/dist/menu.yml +0 -3
  42. data/dist/playbook-doc.js +1 -1
  43. data/dist/playbook-rails-react-bindings.js +1 -1
  44. data/dist/playbook-rails.js +1 -1
  45. data/dist/playbook.css +1 -1
  46. data/lib/playbook/forms/builder/typeahead_field.rb +0 -1
  47. data/lib/playbook/hover.rb +1 -4
  48. data/lib/playbook/version.rb +1 -1
  49. metadata +5 -39
  50. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb +0 -7
  51. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx +0 -18
  52. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md +0 -3
  53. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md +0 -3
  54. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md +0 -1
  55. data/app/pb_kits/playbook/pb_link/_link.scss +0 -66
  56. data/app/pb_kits/playbook/pb_link/_link.tsx +0 -107
  57. data/app/pb_kits/playbook/pb_link/docs/_link_color.html.erb +0 -30
  58. data/app/pb_kits/playbook/pb_link/docs/_link_color.jsx +0 -40
  59. data/app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb +0 -5
  60. data/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx +0 -15
  61. data/app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb +0 -15
  62. data/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx +0 -25
  63. data/app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb +0 -35
  64. data/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx +0 -45
  65. data/app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb +0 -5
  66. data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx +0 -15
  67. data/app/pb_kits/playbook/pb_link/docs/example.yml +0 -16
  68. data/app/pb_kits/playbook/pb_link/docs/index.js +0 -5
  69. data/app/pb_kits/playbook/pb_link/link.html.erb +0 -21
  70. data/app/pb_kits/playbook/pb_link/link.rb +0 -44
  71. data/app/pb_kits/playbook/pb_link/link.test.jsx +0 -92
  72. data/app/pb_kits/playbook/pb_timeline/detail.html.erb +0 -3
  73. data/app/pb_kits/playbook/pb_timeline/detail.rb +0 -11
  74. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +0 -43
  75. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +0 -68
  76. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md +0 -2
  77. data/app/pb_kits/playbook/pb_timeline/label.html.erb +0 -12
  78. data/app/pb_kits/playbook/pb_timeline/label.rb +0 -13
  79. data/app/pb_kits/playbook/pb_timeline/step.html.erb +0 -14
  80. data/app/pb_kits/playbook/pb_timeline/step.rb +0 -16
  81. data/app/pb_kits/playbook/pb_timeline/subcomponents/Detail.tsx +0 -29
  82. data/app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx +0 -38
  83. data/app/pb_kits/playbook/pb_timeline/subcomponents/Step.tsx +0 -42
  84. data/app/pb_kits/playbook/pb_timeline/subcomponents/index.tsx +0 -3
  85. data/dist/chunks/_typeahead-5m7Pr_Rh.js +0 -22
  86. 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
@@ -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
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "14.6.2"
5
- VERSION = "14.6.2.pre.alpha.PBNTR667railstypeaheadformintegration4424"
5
+ VERSION = "14.6.2.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4247"
6
6
  end
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.PBNTR667railstypeaheadformintegration4424
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-11-07 00:00:00.000000000 Z
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/_form_pill_truncated_text_rails.md
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-5m7Pr_Rh.js
3137
- - dist/chunks/_weekday_stacked-B4YQ6Z-d.js
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,7 +0,0 @@
1
- <%= pb_rails("currency", props: {
2
- amount: '1234567.89',
3
- comma_separator: true,
4
- size: 'lg',
5
- emphasized: false,
6
- decimals: 'matching',
7
- }) %>
@@ -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
- The optional `commaSeparator` can be used to auto-format the use of commas as a thousands separator.
2
-
3
- **NOTE:** If the value passed into the `amount` prop is already comma-dilineated, it will not add additional commas.
@@ -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,5 +0,0 @@
1
- <%= pb_rails("link", props: {
2
- text: "link example",
3
- href: "#disabled",
4
- disabled: true,
5
- }) %>
@@ -1,15 +0,0 @@
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
@@ -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,5 +0,0 @@
1
- <%= pb_rails("link", props: {
2
- text: "link example",
3
- href: "#underline",
4
- underline: true,
5
- }) %>
@@ -1,15 +0,0 @@
1
- import React from 'react'
2
- import { Link } from 'playbook-ui'
3
-
4
- const LinkUnderline = (props) => (
5
- <div>
6
- <Link
7
- href="#underline"
8
- text="link example"
9
- underline
10
- {...props}
11
- />
12
- </div>
13
- )
14
-
15
- export default LinkUnderline
@@ -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 %>