playbook_ui 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4380 → 14.6.2.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4247

Sign up to get free protection for your applications and to get access to all the features.
Files changed (71) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -2
  3. data/app/pb_kits/playbook/pb_currency/_currency.tsx +6 -16
  4. data/app/pb_kits/playbook/pb_currency/currency.rb +11 -38
  5. data/app/pb_kits/playbook/pb_currency/currency.test.js +0 -35
  6. data/app/pb_kits/playbook/pb_currency/docs/example.yml +1 -3
  7. data/app/pb_kits/playbook/pb_currency/docs/index.js +0 -1
  8. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +7 -8
  9. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +2 -6
  10. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +26 -30
  11. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +1 -24
  12. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +2 -25
  13. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +1 -0
  14. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +8 -46
  15. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +1 -1
  16. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +1 -1
  17. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +2 -2
  18. data/app/pb_kits/playbook/pb_timeline/_item.tsx +23 -59
  19. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +0 -8
  20. data/app/pb_kits/playbook/pb_timeline/docs/example.yml +1 -2
  21. data/app/pb_kits/playbook/pb_timeline/docs/index.js +0 -1
  22. data/app/pb_kits/playbook/pb_timeline/item.html.erb +21 -17
  23. data/app/pb_kits/playbook/pb_timeline/item.rb +0 -4
  24. data/app/pb_kits/playbook/pb_timeline/timeline.test.js +0 -84
  25. data/app/pb_kits/playbook/tokens/_typography.scss +0 -35
  26. data/dist/chunks/{_typeahead-BJrdFWHc.js → _typeahead-BV_n6U5W.js} +2 -2
  27. data/dist/chunks/_weekday_stacked-Cyqgh5-q.js +45 -0
  28. data/dist/chunks/vendor.js +1 -1
  29. data/dist/menu.yml +0 -3
  30. data/dist/playbook-doc.js +1 -1
  31. data/dist/playbook-rails-react-bindings.js +1 -1
  32. data/dist/playbook-rails.js +1 -1
  33. data/dist/playbook.css +1 -1
  34. data/lib/playbook/version.rb +1 -1
  35. metadata +5 -39
  36. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb +0 -7
  37. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx +0 -18
  38. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md +0 -3
  39. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md +0 -3
  40. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md +0 -1
  41. data/app/pb_kits/playbook/pb_link/_link.scss +0 -66
  42. data/app/pb_kits/playbook/pb_link/_link.tsx +0 -107
  43. data/app/pb_kits/playbook/pb_link/docs/_link_color.html.erb +0 -30
  44. data/app/pb_kits/playbook/pb_link/docs/_link_color.jsx +0 -40
  45. data/app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb +0 -5
  46. data/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx +0 -15
  47. data/app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb +0 -15
  48. data/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx +0 -25
  49. data/app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb +0 -35
  50. data/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx +0 -45
  51. data/app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb +0 -5
  52. data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx +0 -15
  53. data/app/pb_kits/playbook/pb_link/docs/example.yml +0 -16
  54. data/app/pb_kits/playbook/pb_link/docs/index.js +0 -5
  55. data/app/pb_kits/playbook/pb_link/link.html.erb +0 -21
  56. data/app/pb_kits/playbook/pb_link/link.rb +0 -44
  57. data/app/pb_kits/playbook/pb_link/link.test.jsx +0 -92
  58. data/app/pb_kits/playbook/pb_timeline/detail.html.erb +0 -3
  59. data/app/pb_kits/playbook/pb_timeline/detail.rb +0 -11
  60. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +0 -43
  61. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +0 -68
  62. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md +0 -2
  63. data/app/pb_kits/playbook/pb_timeline/label.html.erb +0 -12
  64. data/app/pb_kits/playbook/pb_timeline/label.rb +0 -13
  65. data/app/pb_kits/playbook/pb_timeline/step.html.erb +0 -14
  66. data/app/pb_kits/playbook/pb_timeline/step.rb +0 -16
  67. data/app/pb_kits/playbook/pb_timeline/subcomponents/Detail.tsx +0 -29
  68. data/app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx +0 -38
  69. data/app/pb_kits/playbook/pb_timeline/subcomponents/Step.tsx +0 -42
  70. data/app/pb_kits/playbook/pb_timeline/subcomponents/index.tsx +0 -3
  71. data/dist/chunks/_weekday_stacked-DJWwxF-6.js +0 -45
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "14.6.2"
5
- VERSION = "14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4380"
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.PBNTR633dropdownavailablepropstable4380
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-05 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-BJrdFWHc.js
3137
- - dist/chunks/_weekday_stacked-DJWwxF-6.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 %>
@@ -1,44 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Playbook
4
- module PbLink
5
- class Link < ::Playbook::KitBase
6
- prop :color, type: Playbook::Props::Enum,
7
- values: %w[default body muted destructive],
8
- default: "default"
9
- prop :disabled, type: Playbook::Props::Boolean,
10
- default: false
11
- prop :href
12
- prop :icon
13
- prop :icon_right
14
- prop :tag, type: Playbook::Props::Enum,
15
- values: %w[a h1 h2 h3 h4 h5 h6 p span div],
16
- default: "a"
17
- prop :text
18
- prop :underline, type: Playbook::Props::Boolean,
19
- default: false
20
-
21
- def classname
22
- generate_classname("pb_link_kit", color_class, underline_class, disabled_class)
23
- end
24
-
25
- def content
26
- text
27
- end
28
-
29
- private
30
-
31
- def color_class
32
- color == "default" ? nil : color
33
- end
34
-
35
- def disabled_class
36
- disabled ? "disabled" : nil
37
- end
38
-
39
- def underline_class
40
- underline ? "underline" : nil
41
- end
42
- end
43
- end
44
- end