@justeattakeaway/pie-link 1.2.4 → 1.2.6
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.
- package/README.md +6 -1
- package/dist/index.js +6 -4
- package/package.json +3 -3
- package/src/index.ts +4 -2
- package/src/link.scss +1 -1
package/README.md
CHANGED
|
@@ -54,7 +54,12 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
|
|
|
54
54
|
| `icon` | Used to pass in an icon to the link component. The icon placement can be controlled via the `iconPlacement` prop and we recommend using `pie-icons-webc` for defining this icon. **Please note the icon size is hardcoded and cannot be overridden.** |
|
|
55
55
|
|
|
56
56
|
### CSS Variables
|
|
57
|
-
|
|
57
|
+
|
|
58
|
+
| Name | Description |
|
|
59
|
+
|--------------------------|---------------------------------------------|
|
|
60
|
+
| `--link-font-weight` | Controls the font weight of the link text. |
|
|
61
|
+
| `--link-text-color` | Controls the color of the link text. |
|
|
62
|
+
| `--link-text-decoration` | Controls the text decoration of the link. |
|
|
58
63
|
|
|
59
64
|
### Events
|
|
60
65
|
This component does not emit any custom events. In order to add event listening to this component, you can treat it like a native HTML element in your application.
|
package/dist/index.js
CHANGED
|
@@ -8,9 +8,9 @@ const h = class h extends b {
|
|
|
8
8
|
this.getAttribute("v") || this.setAttribute("v", h.v);
|
|
9
9
|
}
|
|
10
10
|
};
|
|
11
|
-
h.v = "1.2.
|
|
11
|
+
h.v = "1.2.6";
|
|
12
12
|
let u = h;
|
|
13
|
-
const z = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block;--link-font-weight: var(--dt-font-weight-regular);--link-text-color: var(--dt-color-content-link)}:host([isstandalone]){display:block}.c-link{--link-font-family: var(--dt-font-interactive-l-family);--link-font-size: calc(var(--dt-font-size-16) * 1px);--link-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--link-
|
|
13
|
+
const z = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block;--link-font-weight: var(--dt-font-weight-regular);--link-text-color: var(--dt-color-content-link);--link-text-decoration: var(--dt-font-style-underline)}:host([isstandalone]){display:block}.c-link{--link-font-family: var(--dt-font-interactive-l-family);--link-font-size: calc(var(--dt-font-size-16) * 1px);--link-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--link-icon-size: 16px;--link-icon-offset-top: var(--dt-spacing-a);display:inline-block;font-family:var(--link-font-family);font-size:var(--link-font-size);line-height:var(--link-line-height);font-weight:var(--link-font-weight);color:var(--link-text-color);text-decoration:var(--link-text-decoration);cursor:pointer}.c-link:hover,.c-link:active{--link-text-decoration: none}.c-link.c-link--high-visibility{--link-text-color: var(--dt-color-content-link-distinct)}.c-link.c-link--inverse{--link-text-color: var(--dt-color-content-link-inverse)}.c-link.c-link--small{--link-font-size: calc(var(--dt-font-size-14) * 1px);--link-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--link-icon-offset-top: 2px}.c-link.c-link--underline-reversed.c-link--standalone{--link-text-decoration: none}.c-link.c-link--underline-reversed.c-link--standalone:hover,.c-link.c-link--underline-reversed.c-link--standalone:active{--link-text-decoration: var(--dt-font-style-underline)}.c-link.c-link--bold{--link-font-weight: var(--dt-font-weight-bold)}.c-link.c-link--standalone{display:block;width:fit-content}.c-link.c-link--hasVisited:visited{color:var(--dt-color-content-link-visited)}.c-link.c-link--hasVisited:visited.c-link--inverse{color:var(--dt-color-content-link-visited-inverse)}.c-link:focus-visible{outline:none;border-radius:2px;box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer)}button.c-link{outline:none;border:none;-webkit-user-select:none;user-select:none;background:transparent;padding:0}.c-link-content{display:flex;gap:var(--dt-spacing-a)}::slotted(.c-pieIcon),::slotted(svg){display:inline-flex;margin-block-start:var(--link-icon-offset-top);height:var(--link-icon-size);width:var(--link-icon-size)}", S = ["default", "high-visibility", "inverse"], $ = ["small", "medium"], w = ["leading", "trailing"], P = ["a", "button"], B = ["submit", "button", "reset", "menu"], V = ["default", "reversed"], e = {
|
|
14
14
|
tag: "a",
|
|
15
15
|
variant: "default",
|
|
16
16
|
size: "medium",
|
|
@@ -57,7 +57,8 @@ let t = class extends u {
|
|
|
57
57
|
data-test-id="pie-link-button"
|
|
58
58
|
class="${g(l)}"
|
|
59
59
|
type=${this.type}
|
|
60
|
-
aria-label=${d((n = this.aria) == null ? void 0 : n.label)}
|
|
60
|
+
aria-label=${d((n = this.aria) == null ? void 0 : n.label)}
|
|
61
|
+
part="base">
|
|
61
62
|
${this.renderContent()}
|
|
62
63
|
</button>`;
|
|
63
64
|
}
|
|
@@ -75,7 +76,8 @@ let t = class extends u {
|
|
|
75
76
|
href=${d(this.href)}
|
|
76
77
|
target=${d(this.target)}
|
|
77
78
|
rel=${d(this.rel)}
|
|
78
|
-
aria-label=${d((n = this.aria) == null ? void 0 : n.label)}
|
|
79
|
+
aria-label=${d((n = this.aria) == null ? void 0 : n.label)}
|
|
80
|
+
part="base">
|
|
79
81
|
${this.renderContent()}
|
|
80
82
|
</a>`;
|
|
81
83
|
}
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-link",
|
|
3
3
|
"description": "PIE Design System Link built using Web Components",
|
|
4
|
-
"version": "1.2.
|
|
4
|
+
"version": "1.2.6",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
8
8
|
"directory": "packages/components/pie-link"
|
|
9
9
|
},
|
|
10
|
-
"homepage": "https://pie.design/components
|
|
10
|
+
"homepage": "https://webc.pie.design/?path=/docs/components-link--overview",
|
|
11
11
|
"type": "module",
|
|
12
12
|
"main": "dist/index.js",
|
|
13
13
|
"module": "dist/index.js",
|
|
@@ -41,12 +41,12 @@
|
|
|
41
41
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
42
42
|
"@justeattakeaway/pie-components-config": "0.20.1",
|
|
43
43
|
"@justeattakeaway/pie-css": "0.16.0",
|
|
44
|
-
"@justeattakeaway/pie-icons-webc": "1.11.1",
|
|
45
44
|
"@justeattakeaway/pie-monorepo-utils": "0.5.1",
|
|
46
45
|
"@justeattakeaway/pie-wrapper-react": "0.14.3",
|
|
47
46
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
48
47
|
},
|
|
49
48
|
"dependencies": {
|
|
49
|
+
"@justeattakeaway/pie-icons-webc": "1.12.0",
|
|
50
50
|
"@justeattakeaway/pie-webc-core": "1.0.0"
|
|
51
51
|
},
|
|
52
52
|
"volta": {
|
package/src/index.ts
CHANGED
|
@@ -102,7 +102,8 @@ export class PieLink extends PieElement implements LinkProps {
|
|
|
102
102
|
data-test-id="pie-link-button"
|
|
103
103
|
class="${classMap(classes)}"
|
|
104
104
|
type=${this.type}
|
|
105
|
-
aria-label=${ifDefined(this.aria?.label)}
|
|
105
|
+
aria-label=${ifDefined(this.aria?.label)}
|
|
106
|
+
part="base">
|
|
106
107
|
${this.renderContent()}
|
|
107
108
|
</button>`;
|
|
108
109
|
}
|
|
@@ -120,7 +121,8 @@ export class PieLink extends PieElement implements LinkProps {
|
|
|
120
121
|
href=${ifDefined(this.href)}
|
|
121
122
|
target=${ifDefined(this.target)}
|
|
122
123
|
rel=${ifDefined(this.rel)}
|
|
123
|
-
aria-label=${ifDefined(this.aria?.label)}
|
|
124
|
+
aria-label=${ifDefined(this.aria?.label)}
|
|
125
|
+
part="base">
|
|
124
126
|
${this.renderContent()}
|
|
125
127
|
</a>`;
|
|
126
128
|
}
|
package/src/link.scss
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
--link-font-weight: var(--dt-font-weight-regular);
|
|
7
7
|
--link-text-color: var(--dt-color-content-link);
|
|
8
|
+
--link-text-decoration: var(--dt-font-style-underline);
|
|
8
9
|
}
|
|
9
10
|
|
|
10
11
|
:host([isstandalone]) {
|
|
@@ -26,7 +27,6 @@
|
|
|
26
27
|
--link-font-family: var(--dt-font-interactive-l-family);
|
|
27
28
|
--link-font-size: #{p.font-size(--dt-font-size-16)};
|
|
28
29
|
--link-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
|
|
29
|
-
--link-text-decoration: var(--dt-font-style-underline);
|
|
30
30
|
--link-icon-size: 16px;
|
|
31
31
|
--link-icon-offset-top: var(--dt-spacing-a);
|
|
32
32
|
|