playbook_ui 14.6.2.pre.alpha.PLAY1550lazysizesupgrade4257 → 14.6.2.pre.alpha.PLAY1550lazysizesupgrade4295

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1e6f25dbb802acbe4ebc8b0c64be30a70c0c016e1e92bc48a3bea1c9af79811b
4
- data.tar.gz: 323b5622e07a7e57a53e4b1f838e1992f37e3fd3deed63ae783abbc6a75fa87c
3
+ metadata.gz: d188ead65884951c6c66789ff457b7bb6079794c0f7463b9b5f4f3fc96067555
4
+ data.tar.gz: b1bab8a6b3a43ae229c7ff97db8a3a052e408480ce91d5613501048a7ce9d6c6
5
5
  SHA512:
6
- metadata.gz: c5b1a0e10528a0be92d59fa355c3f6095c49c68a3a93b29675d7b861ca9fff6d869c5a21d5ff7469d5843f2e70ff8c95b10b67306d8b375b7eb0cc176e43946b
7
- data.tar.gz: 2e077da285aae77b5cc7e6a4856bc44f939cf674d91fb07309aed16b7ad98bb833641272338a4dda380cb8ff9a9d465b91e90aac12a14265520234471a691c5a
6
+ metadata.gz: 5493d332b18d8ddfbd8efd127e8c50e09aea65784669374db75150947341f820187eaaa6a703b344f85750bb11815d1fda3d9a411a5cb3b2e712e515eae54887
7
+ data.tar.gz: c119a5634a5e0d73cea247a1b8411e535467e0267cea9d3eafad2e521b535a01d1e1cad720d480faaa557d6b4409a0fbf3c519dd37ce32dca731f2150352b058
@@ -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';
@@ -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>
@@ -0,0 +1,25 @@
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
@@ -0,0 +1,35 @@
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>
@@ -0,0 +1,45 @@
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
@@ -0,0 +1,5 @@
1
+ <%= pb_rails("link", props: {
2
+ text: "link example",
3
+ href: "#underline",
4
+ underline: true,
5
+ }) %>
@@ -0,0 +1,15 @@
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
@@ -0,0 +1,16 @@
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
@@ -0,0 +1,5 @@
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'
@@ -0,0 +1,21 @@
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 %>
@@ -0,0 +1,44 @@
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
@@ -0,0 +1,92 @@
1
+ import React from 'react'
2
+ import { ensureAccessible, renderKit, render, screen } from '../utilities/test-utils'
3
+
4
+ import { Link } from 'playbook-ui'
5
+
6
+ const link = 'https://www.google.com'
7
+
8
+ const props = {
9
+ data: { testid: 'default' },
10
+ href: link,
11
+ }
12
+
13
+ test('returns namespaced class name', () => {
14
+ const kit = renderKit(Link , props)
15
+ expect(kit).toBeInTheDocument()
16
+ expect(kit).toHaveClass('pb_link_kit')
17
+ expect(kit).toHaveAttribute('href', link)
18
+ })
19
+
20
+ it("should be accessible", async () => {
21
+ ensureAccessible(Link, props)
22
+ })
23
+
24
+ test('with colors', () => {
25
+ ['default', 'body', 'muted', 'destructive'].forEach((color) => {
26
+ const testId = `colors-test-${color}`
27
+ render(
28
+ <Link
29
+ color={color}
30
+ data={{ testid: testId }}
31
+ text="Test colors"
32
+ />
33
+ )
34
+
35
+ const kit = screen.getByTestId(testId)
36
+ expect(kit).toHaveClass(`pb_link_kit_${color}`)
37
+ })
38
+ })
39
+
40
+ test('disable prop', () => {
41
+ render(
42
+ <Link
43
+ data={{ testid: 'disable-test' }}
44
+ disabled
45
+ />
46
+ )
47
+
48
+ const kit = screen.getByTestId('disable-test')
49
+
50
+ expect(kit).toHaveClass('pb_link_kit_disabled')
51
+ })
52
+
53
+ test('underline prop', () => {
54
+ render(
55
+ <Link
56
+ data={{ testid: 'underline-test' }}
57
+ underline
58
+ />
59
+ )
60
+
61
+ const kit = screen.getByTestId('underline-test')
62
+
63
+ expect(kit).toHaveClass('pb_link_kit_underline')
64
+ })
65
+
66
+ test('adds icon', () => {
67
+ render(
68
+ <Link
69
+ data={{ testid: 'icon-test' }}
70
+ icon="arrow-up-right-from-square"
71
+ />
72
+ )
73
+
74
+ const kit = screen.getByTestId('icon-test')
75
+
76
+ const icon = kit.querySelector('.pb_icon_kit')
77
+ expect(icon).toBeInTheDocument();
78
+ })
79
+
80
+ test('adds icon right', () => {
81
+ render(
82
+ <Link
83
+ data={{ testid: 'icon-right-test' }}
84
+ iconRight="chevron-right"
85
+ />
86
+ )
87
+
88
+ const kit = screen.getByTestId('icon-right-test')
89
+
90
+ const icon = kit.querySelector('.pb_icon_kit')
91
+ expect(icon).toBeInTheDocument();
92
+ })
@@ -1,3 +1,5 @@
1
+ @import "../tokens/colors";
2
+
1
3
  $font_family_base: "Power Centra", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
2
4
 
3
5
  /* CLEAN UP AND REMOVE */
@@ -51,3 +53,36 @@ $boldest: 700 !default;
51
53
  $bolder: 700 !default;
52
54
  $light: 300 !default;
53
55
  $lighter: 300 !default;
56
+
57
+ /* Link Colors */
58
+ $pb_link_colors: (
59
+ default: $primary_action,
60
+ body: $text_lt_default,
61
+ muted: $text_lt_light,
62
+ destructive: $error,
63
+ );
64
+
65
+ $pb_link_hover_colors: (
66
+ default: $text_lt_default,
67
+ body: $primary_action,
68
+ muted: $text_lt_default,
69
+ destructive: $text_lt_default,
70
+ );
71
+
72
+ $pb_dark_link_colors: (
73
+ default: $active_dark,
74
+ body: $text_dk_default,
75
+ muted: $text_dk_light,
76
+ destructive: $error_dark,
77
+ );
78
+
79
+ $pb_dark_link_hover_colors: (
80
+ default: $text_dk_default,
81
+ body: $active_dark,
82
+ muted: $text_dk_default,
83
+ destructive: $text_dk_default,
84
+ );
85
+
86
+ @mixin pb_link($color: $primary_action) {
87
+ color: $color;
88
+ }