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.
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 %>