@purpurds/link 5.11.0 → 5.11.2
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/dist/link.cjs.js +2 -2
- package/dist/link.es.js +30 -30
- package/dist/styles.css +1 -1
- package/package.json +13 -13
- package/src/link.module.scss +3 -1
- package/src/link.stories.tsx +19 -2
- package/readme.mdx +0 -60
package/dist/link.cjs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react/jsx-runtime");function v(r){return r&&r.__esModule&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r}var c={exports:{}};/*!
|
|
2
2
|
Copyright (c) 2018 Jed Watson.
|
|
3
3
|
Licensed under the MIT License (MIT), see
|
|
4
4
|
http://jedwatson.github.io/classnames
|
|
5
|
-
*/(function(r){(function(){var u={}.hasOwnProperty;function i(){for(var t="",n=0;n<arguments.length;n++){var e=arguments[n];e&&(t=a(t,
|
|
5
|
+
*/(function(r){(function(){var u={}.hasOwnProperty;function i(){for(var t="",n=0;n<arguments.length;n++){var e=arguments[n];e&&(t=a(t,p.call(this,e)))}return t}function p(t){if(typeof t=="string"||typeof t=="number")return this&&this[t]||t;if(typeof t!="object")return"";if(Array.isArray(t))return i.apply(this,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var n="";for(var e in t)u.call(t,e)&&t[e]&&(n=a(n,this&&this[e]||e));return n}function a(t,n){return n?t?t+" "+n:t+n:t}r.exports?(i.default=i,r.exports=i):window.classNames=i})()})(c);var g=c.exports;const b=v(g),N={"purpur-link":"_purpur-link_1066f_1","purpur-link--text":"_purpur-link--text_1066f_18","purpur-link--standalone":"_purpur-link--standalone_1066f_18","purpur-link--navigation":"_purpur-link--navigation_1066f_18","purpur-link--disable-visited":"_purpur-link--disable-visited_1066f_29","purpur-link--text-negative":"_purpur-link--text-negative_1066f_32","purpur-link--standalone-negative":"_purpur-link--standalone-negative_1066f_32","purpur-link--navigation-negative":"_purpur-link--navigation-negative_1066f_32","purpur-link--ensure-target-area":"_purpur-link--ensure-target-area_1066f_71","purpur-link--silent":"_purpur-link--silent_1066f_77"},x=b.bind(N),s="purpur-link",d={TEXT:"text",STANDALONE:"standalone",NAVIGATION:"navigation"},y=Object.values(d),A=({["data-testid"]:r,children:u,className:i,disableVisited:p,ensureTargetArea:a,href:t,negative:n=!1,rel:e,silent:l,target:k,variant:o,...f})=>_.jsx("span",{className:x([i,s,`${s}--${n?`${o}-negative`:o}`,{[`${s}--silent`]:l,[`${s}--negative`]:n,[`${s}--disable-visited`]:p??l,[`${s}--ensure-target-area`]:a}]),"data-testid":r,...f,children:t?_.jsx("a",{href:t,target:k,rel:e,...f,children:u}):u});exports.LINK_VARIANT=d;exports.Link=A;exports.linkVariants=y;
|
|
6
6
|
//# sourceMappingURL=link.cjs.js.map
|
package/dist/link.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
function
|
|
1
|
+
import { jsx as _ } from "react/jsx-runtime";
|
|
2
|
+
function v(r) {
|
|
3
3
|
return r && r.__esModule && Object.prototype.hasOwnProperty.call(r, "default") ? r.default : r;
|
|
4
4
|
}
|
|
5
5
|
var c = { exports: {} };
|
|
@@ -14,11 +14,11 @@ var c = { exports: {} };
|
|
|
14
14
|
function i() {
|
|
15
15
|
for (var t = "", n = 0; n < arguments.length; n++) {
|
|
16
16
|
var e = arguments[n];
|
|
17
|
-
e && (t = a(t,
|
|
17
|
+
e && (t = a(t, p.call(this, e)));
|
|
18
18
|
}
|
|
19
19
|
return t;
|
|
20
20
|
}
|
|
21
|
-
function
|
|
21
|
+
function p(t) {
|
|
22
22
|
if (typeof t == "string" || typeof t == "number")
|
|
23
23
|
return this && this[t] || t;
|
|
24
24
|
if (typeof t != "object")
|
|
@@ -38,57 +38,57 @@ var c = { exports: {} };
|
|
|
38
38
|
r.exports ? (i.default = i, r.exports = i) : window.classNames = i;
|
|
39
39
|
})();
|
|
40
40
|
})(c);
|
|
41
|
-
var
|
|
42
|
-
const
|
|
43
|
-
"purpur-link": "_purpur-
|
|
44
|
-
"purpur-link--text": "_purpur-link--
|
|
45
|
-
"purpur-link--standalone": "_purpur-link--
|
|
46
|
-
"purpur-link--navigation": "_purpur-link--
|
|
47
|
-
"purpur-link--disable-visited": "_purpur-link--disable-
|
|
48
|
-
"purpur-link--text-negative": "_purpur-link--text-
|
|
49
|
-
"purpur-link--standalone-negative": "_purpur-link--standalone-
|
|
50
|
-
"purpur-link--navigation-negative": "_purpur-link--navigation-
|
|
51
|
-
"purpur-link--ensure-target-area": "_purpur-link--ensure-target-
|
|
52
|
-
"purpur-link--silent": "_purpur-link--
|
|
53
|
-
},
|
|
41
|
+
var k = c.exports;
|
|
42
|
+
const g = /* @__PURE__ */ v(k), b = {
|
|
43
|
+
"purpur-link": "_purpur-link_1066f_1",
|
|
44
|
+
"purpur-link--text": "_purpur-link--text_1066f_18",
|
|
45
|
+
"purpur-link--standalone": "_purpur-link--standalone_1066f_18",
|
|
46
|
+
"purpur-link--navigation": "_purpur-link--navigation_1066f_18",
|
|
47
|
+
"purpur-link--disable-visited": "_purpur-link--disable-visited_1066f_29",
|
|
48
|
+
"purpur-link--text-negative": "_purpur-link--text-negative_1066f_32",
|
|
49
|
+
"purpur-link--standalone-negative": "_purpur-link--standalone-negative_1066f_32",
|
|
50
|
+
"purpur-link--navigation-negative": "_purpur-link--navigation-negative_1066f_32",
|
|
51
|
+
"purpur-link--ensure-target-area": "_purpur-link--ensure-target-area_1066f_71",
|
|
52
|
+
"purpur-link--silent": "_purpur-link--silent_1066f_77"
|
|
53
|
+
}, x = g.bind(b), s = "purpur-link", N = {
|
|
54
54
|
TEXT: "text",
|
|
55
55
|
STANDALONE: "standalone",
|
|
56
56
|
NAVIGATION: "navigation"
|
|
57
|
-
},
|
|
57
|
+
}, m = Object.values(N), y = ({
|
|
58
58
|
["data-testid"]: r,
|
|
59
59
|
children: u,
|
|
60
60
|
className: i,
|
|
61
|
-
disableVisited:
|
|
61
|
+
disableVisited: p,
|
|
62
62
|
ensureTargetArea: a,
|
|
63
63
|
href: t,
|
|
64
64
|
negative: n = !1,
|
|
65
65
|
rel: e,
|
|
66
|
-
silent:
|
|
66
|
+
silent: o,
|
|
67
67
|
target: d,
|
|
68
68
|
variant: l,
|
|
69
|
-
...
|
|
70
|
-
}) => /* @__PURE__ */
|
|
69
|
+
...f
|
|
70
|
+
}) => /* @__PURE__ */ _(
|
|
71
71
|
"span",
|
|
72
72
|
{
|
|
73
|
-
className:
|
|
73
|
+
className: x([
|
|
74
74
|
i,
|
|
75
75
|
s,
|
|
76
76
|
`${s}--${n ? `${l}-negative` : l}`,
|
|
77
77
|
{
|
|
78
|
-
[`${s}--silent`]:
|
|
78
|
+
[`${s}--silent`]: o,
|
|
79
79
|
[`${s}--negative`]: n,
|
|
80
|
-
[`${s}--disable-visited`]:
|
|
80
|
+
[`${s}--disable-visited`]: p ?? o,
|
|
81
81
|
[`${s}--ensure-target-area`]: a
|
|
82
82
|
}
|
|
83
83
|
]),
|
|
84
84
|
"data-testid": r,
|
|
85
|
-
...
|
|
86
|
-
children: t ? /* @__PURE__ */
|
|
85
|
+
...f,
|
|
86
|
+
children: t ? /* @__PURE__ */ _("a", { href: t, target: d, rel: e, ...f, children: u }) : u
|
|
87
87
|
}
|
|
88
88
|
);
|
|
89
89
|
export {
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
90
|
+
N as LINK_VARIANT,
|
|
91
|
+
y as Link,
|
|
92
|
+
m as linkVariants
|
|
93
93
|
};
|
|
94
94
|
//# sourceMappingURL=link.es.js.map
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-
|
|
1
|
+
._purpur-link_1066f_1{font-family:var(--purpur-typography-family-default)}._purpur-link_1066f_1 a{align-items:center;cursor:pointer;display:inline-flex;gap:var(--purpur-spacing-50);text-decoration:underline}._purpur-link_1066f_1 a:focus,._purpur-link_1066f_1 a:active{outline:solid var(--purpur-border-width-sm) var(--purpur-color-border-interactive-focus);outline-offset:var(--purpur-spacing-25)}._purpur-link_1066f_1 a:focus:not(:focus-visible){outline:0}._purpur-link--text_1066f_18 a,._purpur-link--standalone_1066f_18 a,._purpur-link--navigation_1066f_18 a{color:var(--purpur-color-text-interactive-primary)}._purpur-link--text_1066f_18 a:hover,._purpur-link--standalone_1066f_18 a:hover,._purpur-link--navigation_1066f_18 a:hover{color:var(--purpur-color-text-interactive-primary-hover);background-color:var(--purpur-color-background-interactive-transparent-hover)}._purpur-link--text_1066f_18 a:active,._purpur-link--standalone_1066f_18 a:active,._purpur-link--navigation_1066f_18 a:active{color:var(--purpur-color-text-interactive-primary-active);background-color:var(--purpur-color-background-interactive-transparent-active)}._purpur-link--text_1066f_18 a:visited:not(._purpur-link--disable-visited_1066f_29>a),._purpur-link--standalone_1066f_18 a:visited:not(._purpur-link--disable-visited_1066f_29>a),._purpur-link--navigation_1066f_18 a:visited:not(._purpur-link--disable-visited_1066f_29>a){color:var(--purpur-color-text-interactive-primary-active)}._purpur-link--text-negative_1066f_32 a,._purpur-link--standalone-negative_1066f_32 a,._purpur-link--navigation-negative_1066f_32 a{color:var(--purpur-color-text-interactive-primary-negative)}._purpur-link--text-negative_1066f_32 a:hover,._purpur-link--standalone-negative_1066f_32 a:hover,._purpur-link--navigation-negative_1066f_32 a:hover{background-color:var(--purpur-color-background-interactive-transparent-negative-hover);color:var(--purpur-color-text-interactive-primary-negative-hover)}._purpur-link--text-negative_1066f_32 a:active,._purpur-link--standalone-negative_1066f_32 a:active,._purpur-link--navigation-negative_1066f_32 a:active{background-color:var(--purpur-color-background-interactive-transparent-negative-active);color:var(--purpur-color-text-interactive-primary-negative-active)}._purpur-link--text-negative_1066f_32 a:visited:not(._purpur-link--disable-visited_1066f_29>a),._purpur-link--standalone-negative_1066f_32 a:visited:not(._purpur-link--disable-visited_1066f_29>a),._purpur-link--navigation-negative_1066f_32 a:visited:not(._purpur-link--disable-visited_1066f_29>a){color:var(--purpur-color-text-interactive-primary-negative-active)}._purpur-link--standalone_1066f_18,._purpur-link--standalone-negative_1066f_32{display:inline-block}._purpur-link--standalone_1066f_18 a,._purpur-link--standalone-negative_1066f_32 a{font-family:var(--purpur-typography-family-default);font-weight:var(--purpur-typography-weight-normal);font-size:var(--purpur-typography-scale-100);line-height:var(--purpur-typography-line-height-loose);padding:var(--purpur-spacing-100) 0}._purpur-link--navigation_1066f_18 a,._purpur-link--navigation-negative_1066f_32 a{font-family:var(--purpur-typography-family-default);font-weight:var(--purpur-typography-weight-normal);font-size:var(--purpur-typography-scale-100);line-height:var(--purpur-typography-line-height-loose);align-items:center;background-color:var(--purpur-color-functional-transparent);display:flex;font-weight:var(--purpur-typography-weight-medium);text-decoration:none}._purpur-link--navigation_1066f_18 a:active,._purpur-link--navigation_1066f_18 a:hover,._purpur-link--navigation-negative_1066f_32 a:active,._purpur-link--navigation-negative_1066f_32 a:hover{background-color:var(--purpur-color-functional-transparent);text-decoration:underline}._purpur-link--ensure-target-area_1066f_71,._purpur-link--ensure-target-area_1066f_71 a{align-items:center;display:flex;min-height:var(--purpur-spacing-600);min-width:var(--purpur-spacing-600)}._purpur-link--silent_1066f_77 a{background-color:inherit;color:inherit;height:100%;text-decoration:none}._purpur-link--silent_1066f_77 a:hover,._purpur-link--silent_1066f_77 a:focus,._purpur-link--silent_1066f_77 a:active{background-color:inherit;color:inherit}._purpur-link--silent_1066f_77 a:focus{outline:0}._purpur-link--silent_1066f_77:is(._purpur-link--disable-visited_1066f_29) a:visited{color:inherit}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/link",
|
|
3
|
-
"version": "5.11.
|
|
3
|
+
"version": "5.11.2",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/link.cjs.js",
|
|
6
6
|
"types": "./dist/link.d.ts",
|
|
@@ -15,33 +15,33 @@
|
|
|
15
15
|
"source": "src/link.tsx",
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"classnames": "~2.5.0",
|
|
18
|
-
"@purpurds/paragraph": "5.11.
|
|
19
|
-
"@purpurds/tokens": "5.11.
|
|
18
|
+
"@purpurds/paragraph": "5.11.2",
|
|
19
|
+
"@purpurds/tokens": "5.11.2"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
22
|
"@rushstack/eslint-patch": "~1.10.0",
|
|
23
|
-
"@storybook/
|
|
24
|
-
"
|
|
23
|
+
"@storybook/react": "^8.2.6",
|
|
24
|
+
"storybook": "^8.2.6",
|
|
25
25
|
"@telia/base-rig": "~8.2.0",
|
|
26
26
|
"@telia/react-rig": "~3.2.0",
|
|
27
27
|
"@testing-library/dom": "~9.3.3",
|
|
28
28
|
"@testing-library/jest-dom": "~6.4.0",
|
|
29
29
|
"@testing-library/react": "~14.3.0",
|
|
30
30
|
"@types/node": "20.12.12",
|
|
31
|
-
"@types/react-dom": "
|
|
32
|
-
"@types/react": "
|
|
31
|
+
"@types/react-dom": "^18.3.0",
|
|
32
|
+
"@types/react": "^18.3.3",
|
|
33
33
|
"eslint-plugin-testing-library": "~6.2.0",
|
|
34
|
-
"eslint": "
|
|
34
|
+
"eslint": "^8.57.0",
|
|
35
35
|
"jsdom": "~22.1.0",
|
|
36
36
|
"lint-staged": "~10.5.3",
|
|
37
37
|
"prettier": "~2.8.8",
|
|
38
|
-
"react-dom": "
|
|
39
|
-
"react": "
|
|
40
|
-
"typescript": "
|
|
41
|
-
"vite": "
|
|
38
|
+
"react-dom": "^18.3.1",
|
|
39
|
+
"react": "^18.3.1",
|
|
40
|
+
"typescript": "^5.5.4",
|
|
41
|
+
"vite": "5.3.4",
|
|
42
42
|
"vitest": "~1.5.0",
|
|
43
43
|
"@purpurds/component-rig": "1.0.0",
|
|
44
|
-
"@purpurds/icon": "5.11.
|
|
44
|
+
"@purpurds/icon": "5.11.2"
|
|
45
45
|
},
|
|
46
46
|
"scripts": {
|
|
47
47
|
"build:dev": "vite",
|
package/src/link.module.scss
CHANGED
package/src/link.stories.tsx
CHANGED
|
@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from "@storybook/react";
|
|
|
5
5
|
|
|
6
6
|
import { Link, linkVariants } from "./link";
|
|
7
7
|
|
|
8
|
-
const meta
|
|
8
|
+
const meta = {
|
|
9
9
|
title: "Components/Link",
|
|
10
10
|
component: Link,
|
|
11
11
|
parameters: {
|
|
@@ -21,6 +21,7 @@ const meta: Meta<typeof Link> = {
|
|
|
21
21
|
variant: {
|
|
22
22
|
options: linkVariants,
|
|
23
23
|
control: { type: "select" },
|
|
24
|
+
table: { type: { summary: linkVariants.map((x) => `"${x}"`).join(" | ") } },
|
|
24
25
|
},
|
|
25
26
|
target: { control: { type: "text" } },
|
|
26
27
|
},
|
|
@@ -50,7 +51,8 @@ const meta: Meta<typeof Link> = {
|
|
|
50
51
|
);
|
|
51
52
|
},
|
|
52
53
|
],
|
|
53
|
-
}
|
|
54
|
+
} satisfies Meta<typeof Link>;
|
|
55
|
+
|
|
54
56
|
export default meta;
|
|
55
57
|
|
|
56
58
|
type Story = StoryObj<typeof Link>;
|
|
@@ -78,3 +80,18 @@ export const WithRightIcon: Story = {
|
|
|
78
80
|
</Link>
|
|
79
81
|
),
|
|
80
82
|
};
|
|
83
|
+
|
|
84
|
+
export const WithATagAsChild: Story = {
|
|
85
|
+
name: "With a tag as children",
|
|
86
|
+
parameters: {
|
|
87
|
+
docs: { description: { story: "With a custom anchor (e.g. NextJS) as children" } },
|
|
88
|
+
},
|
|
89
|
+
render: ({ children, ...args }) => (
|
|
90
|
+
<Link {...args}>
|
|
91
|
+
<a href="https://purpur.io">
|
|
92
|
+
<Icon svg={endUser} size="sm" />
|
|
93
|
+
{children}
|
|
94
|
+
</a>
|
|
95
|
+
</Link>
|
|
96
|
+
),
|
|
97
|
+
};
|
package/readme.mdx
DELETED
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
|
|
2
|
-
|
|
3
|
-
import * as LinkStories from "./src/link.stories";
|
|
4
|
-
import packageInfo from "./package.json";
|
|
5
|
-
|
|
6
|
-
<Meta name="Docs" title="Components/Link" of={LinkStories} />
|
|
7
|
-
|
|
8
|
-
# Link
|
|
9
|
-
|
|
10
|
-
<Subtitle>Version {packageInfo.version}</Subtitle>
|
|
11
|
-
|
|
12
|
-
### Showcase
|
|
13
|
-
|
|
14
|
-
<Primary />
|
|
15
|
-
|
|
16
|
-
### Properties
|
|
17
|
-
|
|
18
|
-
<ArgTypes />
|
|
19
|
-
|
|
20
|
-
### Installation
|
|
21
|
-
|
|
22
|
-
#### Via NPM
|
|
23
|
-
|
|
24
|
-
Add the dependency to your consumer app like `"@purpurds/purpur": "^x.y.z"`
|
|
25
|
-
|
|
26
|
-
In MyApp.tsx
|
|
27
|
-
|
|
28
|
-
```tsx
|
|
29
|
-
import "@purpurds/purpur/styles";
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
In MyComponent.tsx
|
|
33
|
-
|
|
34
|
-
##### With a custom anchor (e.g. NextJS) as children
|
|
35
|
-
|
|
36
|
-
```tsx
|
|
37
|
-
import { Link } from "@purpurds/purpur";
|
|
38
|
-
|
|
39
|
-
export const MyComponent = () => {
|
|
40
|
-
return (
|
|
41
|
-
<Link>
|
|
42
|
-
<CustomAnchor>Some content</CustomAnchor>
|
|
43
|
-
</Link>
|
|
44
|
-
);
|
|
45
|
-
};
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
##### Without an anchor as children
|
|
49
|
-
|
|
50
|
-
```tsx
|
|
51
|
-
import { Link } from "@purpurds/purpur";
|
|
52
|
-
|
|
53
|
-
export const MyComponent = () => {
|
|
54
|
-
return (
|
|
55
|
-
<Link href="http://telia.se" target="_blank">
|
|
56
|
-
Some content
|
|
57
|
-
</Link>
|
|
58
|
-
);
|
|
59
|
-
};
|
|
60
|
-
```
|