@purpurds/link 4.6.0 → 5.0.0
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.cjs.js.map +1 -1
- package/dist/link.d.ts +3 -5
- package/dist/link.d.ts.map +1 -1
- package/dist/link.es.js +26 -28
- package/dist/link.es.js.map +1 -1
- package/package.json +5 -5
- package/src/link.stories.tsx +15 -17
- package/src/link.tsx +4 -5
package/dist/link.cjs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react/jsx-runtime");function
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react/jsx-runtime");function k(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}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(e){(function(){var
|
|
5
|
+
*/(function(e){(function(){var u={}.hasOwnProperty;function i(){for(var t="",n=0;n<arguments.length;n++){var r=arguments[n];r&&(t=p(t,a.call(this,r)))}return t}function a(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 r in t)u.call(t,r)&&t[r]&&(n=p(n,this&&this[r]||r));return n}function p(t,n){return n?t?t+" "+n:t+n:t}e.exports?(i.default=i,e.exports=i):window.classNames=i})()})(c);var v=c.exports;const g=k(v),b={"purpur-link":"_purpur-link_5epw4_1","purpur-link--text":"_purpur-link--text_5epw4_15","purpur-link--standalone":"_purpur-link--standalone_5epw4_15","purpur-link--navigation":"_purpur-link--navigation_5epw4_15","purpur-link--disable-visited":"_purpur-link--disable-visited_5epw4_25","purpur-link--text-negative":"_purpur-link--text-negative_5epw4_28","purpur-link--standalone-negative":"_purpur-link--standalone-negative_5epw4_28","purpur-link--navigation-negative":"_purpur-link--navigation-negative_5epw4_28","purpur-link--ensure-target-area":"_purpur-link--ensure-target-area_5epw4_67","purpur-link--silent":"_purpur-link--silent_5epw4_73"},w=g.bind(b),s="purpur-link",d={TEXT:"text",STANDALONE:"standalone",NAVIGATION:"navigation"},N=Object.values(d),x=({["data-testid"]:e,children:u,className:i,disableVisited:a,ensureTargetArea:p,href:t,negative:n=!1,silent:r,target:f,variant:l,...o})=>_.jsx("span",{className:w([i,s,`${s}--${n?`${l}-negative`:l}`,{[`${s}--silent`]:r,[`${s}--negative`]:n,[`${s}--disable-visited`]:a??r,[`${s}--ensure-target-area`]:p}]),"data-testid":e,...o,children:t?_.jsx("a",{href:t,target:f,...o,children:u}):u});exports.LINK_VARIANT=d;exports.Link=x;exports.linkVariants=N;
|
|
6
6
|
//# sourceMappingURL=link.cjs.js.map
|
package/dist/link.cjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/link.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { ReactNode } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./link.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-link\";\n\nexport const LINK_VARIANT = {\n TEXT: \"text\",\n
|
|
1
|
+
{"version":3,"file":"link.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/link.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { ReactNode } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./link.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-link\";\n\nexport const LINK_VARIANT = {\n TEXT: \"text\",\n STANDALONE: \"standalone\",\n NAVIGATION: \"navigation\",\n} as const;\n\nexport const linkVariants = Object.values(LINK_VARIANT);\nexport type LinkVariant = (typeof LINK_VARIANT)[keyof typeof LINK_VARIANT];\n\nexport type LinkProps = {\n children: ReactNode;\n className?: string;\n [\"data-testid\"]?: string;\n /** Disables visited styling */\n disableVisited?: boolean;\n /**\n * This sets a minimum size on the targetable area of the link. Please note\n * it also changes display value to flex, meaning its container will behave\n * like a block element. You can wrap this component in a flex container\n * for additional layout control.\n */\n ensureTargetArea?: boolean;\n /**\n * This will wrap children in a <a/> tag and set the href accordingly\n */\n href?: string;\n negative?: boolean;\n /**\n * A silent link is intended to wrap an element\n * to make it a link but not add any styling\n * except for the pointer cursor and focus style.\n */\n silent?: boolean;\n /**\n * if target and href is specified, target will be added to the <a/> tag\n */\n target?: React.HTMLAttributeAnchorTarget;\n /**\n * Determines if link is displayed on its own line\n * (standalone) or within the current text content\n * (text).\n */\n variant: LinkVariant;\n};\n\nexport const Link = ({\n [\"data-testid\"]: dataTestid,\n children,\n className,\n disableVisited,\n ensureTargetArea,\n href,\n negative = false,\n silent,\n target,\n variant,\n ...props\n}: LinkProps) => (\n <span\n className={cx([\n className,\n rootClassName,\n `${rootClassName}--${negative ? `${variant}-negative` : variant}`,\n {\n [`${rootClassName}--silent`]: silent,\n [`${rootClassName}--negative`]: negative,\n [`${rootClassName}--disable-visited`]: disableVisited ?? silent,\n [`${rootClassName}--ensure-target-area`]: ensureTargetArea,\n },\n ])}\n data-testid={dataTestid}\n {...props}\n >\n {href ? (\n <a href={href} target={target} {...props}>\n {children}\n </a>\n ) : (\n children\n )}\n </span>\n);\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","LINK_VARIANT","linkVariants","Link","dataTestid","children","className","disableVisited","ensureTargetArea","href","negative","silent","target","variant","props","jsx"],"mappings":";;;;gBAOC,UAAY,CAGZ,IAAIA,EAAS,CAAE,EAAC,eAEhB,SAASC,GAAc,CAGtB,QAFIC,EAAU,GAELC,EAAI,EAAGA,EAAI,UAAU,OAAQA,IAAK,CAC1C,IAAIC,EAAM,UAAUD,CAAC,EACjBC,IACHF,EAAUG,EAAYH,EAASI,EAAW,KAAK,KAAMF,CAAG,CAAC,EAE1D,CAED,OAAOF,CACP,CAED,SAASI,EAAYF,EAAK,CACzB,GAAI,OAAOA,GAAQ,UAAY,OAAOA,GAAQ,SAC7C,OAAO,MAAQ,KAAKA,CAAG,GAAKA,EAG7B,GAAI,OAAOA,GAAQ,SAClB,MAAO,GAGR,GAAI,MAAM,QAAQA,CAAG,EACpB,OAAOH,EAAW,MAAM,KAAMG,CAAG,EAGlC,GAAIA,EAAI,WAAa,OAAO,UAAU,UAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe,EAClG,OAAOA,EAAI,WAGZ,IAAIF,EAAU,GAEd,QAASK,KAAOH,EACXJ,EAAO,KAAKI,EAAKG,CAAG,GAAKH,EAAIG,CAAG,IACnCL,EAAUG,EAAYH,EAAS,MAAQ,KAAKK,CAAG,GAAKA,CAAG,GAIzD,OAAOL,CACP,CAED,SAASG,EAAaG,EAAOC,EAAU,CACtC,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQR,CAEoCE,EAAO,SAC3CT,EAAW,QAAUA,EACrBS,EAAA,QAAiBT,GAOjB,OAAO,WAAaA,CAEtB,8qBCvEMU,EAAKC,EAAE,KAAKC,CAAM,EAClBC,EAAgB,cAETC,EAAe,CAC1B,KAAM,OACN,WAAY,aACZ,WAAY,YACd,EAEaC,EAAe,OAAO,OAAOD,CAAY,EAuCzCE,EAAO,CAAC,CACnB,CAAC,eAAgBC,EACjB,SAAAC,EACA,UAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,KAAAC,EACA,SAAAC,EAAW,GACX,OAAAC,EACA,OAAAC,EACA,QAAAC,EACA,GAAGC,CACL,IACEC,EAAA,IAAC,OAAA,CACC,UAAWlB,EAAG,CACZS,EACAN,EACA,GAAGA,CAAa,KAAKU,EAAW,GAAGG,CAAO,YAAcA,CAAO,GAC/D,CACE,CAAC,GAAGb,CAAa,UAAU,EAAGW,EAC9B,CAAC,GAAGX,CAAa,YAAY,EAAGU,EAChC,CAAC,GAAGV,CAAa,mBAAmB,EAAGO,GAAkBI,EACzD,CAAC,GAAGX,CAAa,sBAAsB,EAAGQ,CAC5C,CAAA,CACD,EACD,cAAaJ,EACZ,GAAGU,EAEH,SAAAL,QACE,IAAE,CAAA,KAAAA,EAAY,OAAAG,EAAiB,GAAGE,EAChC,SAAAT,CACH,CAAA,EAEAA,CAAA,CAEJ","x_google_ignoreList":[0]}
|
package/dist/link.d.ts
CHANGED
|
@@ -2,13 +2,10 @@ import { default as React, ReactNode } from 'react';
|
|
|
2
2
|
|
|
3
3
|
export declare const LINK_VARIANT: {
|
|
4
4
|
readonly TEXT: "text";
|
|
5
|
-
readonly TEXT_NEGATIVE: "text-negative";
|
|
6
5
|
readonly STANDALONE: "standalone";
|
|
7
|
-
readonly STANDALONE_NEGATIVE: "standalone-negative";
|
|
8
6
|
readonly NAVIGATION: "navigation";
|
|
9
|
-
readonly NAVIGATION_NEGATIVE: "navigation-negative";
|
|
10
7
|
};
|
|
11
|
-
export declare const linkVariants: ("text" | "
|
|
8
|
+
export declare const linkVariants: ("text" | "standalone" | "navigation")[];
|
|
12
9
|
export type LinkVariant = (typeof LINK_VARIANT)[keyof typeof LINK_VARIANT];
|
|
13
10
|
export type LinkProps = {
|
|
14
11
|
children: ReactNode;
|
|
@@ -27,6 +24,7 @@ export type LinkProps = {
|
|
|
27
24
|
* This will wrap children in a <a/> tag and set the href accordingly
|
|
28
25
|
*/
|
|
29
26
|
href?: string;
|
|
27
|
+
negative?: boolean;
|
|
30
28
|
/**
|
|
31
29
|
* A silent link is intended to wrap an element
|
|
32
30
|
* to make it a link but not add any styling
|
|
@@ -44,5 +42,5 @@ export type LinkProps = {
|
|
|
44
42
|
*/
|
|
45
43
|
variant: LinkVariant;
|
|
46
44
|
};
|
|
47
|
-
export declare const Link: ({ ["data-testid"]: dataTestid, children, className, disableVisited, ensureTargetArea, href, silent, target, variant, ...props }: LinkProps) => React.JSX.Element;
|
|
45
|
+
export declare const Link: ({ ["data-testid"]: dataTestid, children, className, disableVisited, ensureTargetArea, href, negative, silent, target, variant, ...props }: LinkProps) => React.JSX.Element;
|
|
48
46
|
//# sourceMappingURL=link.d.ts.map
|
package/dist/link.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../src/link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQzC,eAAO,MAAM,YAAY
|
|
1
|
+
{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../src/link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQzC,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,eAAO,MAAM,YAAY,0CAA8B,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAE3E,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,+BAA+B;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC;;;;OAIG;IACH,OAAO,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,IAAI,8IAYd,SAAS,sBAwBX,CAAC"}
|
package/dist/link.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _ } from "react/jsx-runtime";
|
|
2
|
-
function
|
|
2
|
+
function f(e) {
|
|
3
3
|
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
|
|
4
4
|
}
|
|
5
5
|
var c = { exports: {} };
|
|
@@ -10,15 +10,15 @@ var c = { exports: {} };
|
|
|
10
10
|
*/
|
|
11
11
|
(function(e) {
|
|
12
12
|
(function() {
|
|
13
|
-
var
|
|
13
|
+
var s = {}.hasOwnProperty;
|
|
14
14
|
function i() {
|
|
15
15
|
for (var t = "", n = 0; n < arguments.length; n++) {
|
|
16
16
|
var r = arguments[n];
|
|
17
|
-
r && (t =
|
|
17
|
+
r && (t = u(t, a.call(this, r)));
|
|
18
18
|
}
|
|
19
19
|
return t;
|
|
20
20
|
}
|
|
21
|
-
function
|
|
21
|
+
function a(t) {
|
|
22
22
|
if (typeof t == "string" || typeof t == "number")
|
|
23
23
|
return this && this[t] || t;
|
|
24
24
|
if (typeof t != "object")
|
|
@@ -29,17 +29,17 @@ var c = { exports: {} };
|
|
|
29
29
|
return t.toString();
|
|
30
30
|
var n = "";
|
|
31
31
|
for (var r in t)
|
|
32
|
-
|
|
32
|
+
s.call(t, r) && t[r] && (n = u(n, this && this[r] || r));
|
|
33
33
|
return n;
|
|
34
34
|
}
|
|
35
|
-
function
|
|
35
|
+
function u(t, n) {
|
|
36
36
|
return n ? t ? t + " " + n : t + n : t;
|
|
37
37
|
}
|
|
38
38
|
e.exports ? (i.default = i, e.exports = i) : window.classNames = i;
|
|
39
39
|
})();
|
|
40
40
|
})(c);
|
|
41
41
|
var v = c.exports;
|
|
42
|
-
const
|
|
42
|
+
const k = /* @__PURE__ */ f(v), w = {
|
|
43
43
|
"purpur-link": "_purpur-link_5epw4_1",
|
|
44
44
|
"purpur-link--text": "_purpur-link--text_5epw4_15",
|
|
45
45
|
"purpur-link--standalone": "_purpur-link--standalone_5epw4_15",
|
|
@@ -50,22 +50,20 @@ const f = /* @__PURE__ */ d(v), k = {
|
|
|
50
50
|
"purpur-link--navigation-negative": "_purpur-link--navigation-negative_5epw4_28",
|
|
51
51
|
"purpur-link--ensure-target-area": "_purpur-link--ensure-target-area_5epw4_67",
|
|
52
52
|
"purpur-link--silent": "_purpur-link--silent_5epw4_73"
|
|
53
|
-
}, g =
|
|
53
|
+
}, g = k.bind(w), p = "purpur-link", b = {
|
|
54
54
|
TEXT: "text",
|
|
55
|
-
TEXT_NEGATIVE: "text-negative",
|
|
56
55
|
STANDALONE: "standalone",
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
NAVIGATION_NEGATIVE: "navigation-negative"
|
|
60
|
-
}, w = Object.values(N), E = ({
|
|
56
|
+
NAVIGATION: "navigation"
|
|
57
|
+
}, N = Object.values(b), h = ({
|
|
61
58
|
["data-testid"]: e,
|
|
62
|
-
children:
|
|
59
|
+
children: s,
|
|
63
60
|
className: i,
|
|
64
|
-
disableVisited:
|
|
65
|
-
ensureTargetArea:
|
|
61
|
+
disableVisited: a,
|
|
62
|
+
ensureTargetArea: u,
|
|
66
63
|
href: t,
|
|
67
|
-
|
|
68
|
-
|
|
64
|
+
negative: n = !1,
|
|
65
|
+
silent: r,
|
|
66
|
+
target: d,
|
|
69
67
|
variant: o,
|
|
70
68
|
...l
|
|
71
69
|
}) => /* @__PURE__ */ _(
|
|
@@ -73,23 +71,23 @@ const f = /* @__PURE__ */ d(v), k = {
|
|
|
73
71
|
{
|
|
74
72
|
className: g([
|
|
75
73
|
i,
|
|
76
|
-
|
|
77
|
-
`${
|
|
74
|
+
p,
|
|
75
|
+
`${p}--${n ? `${o}-negative` : o}`,
|
|
78
76
|
{
|
|
79
|
-
[`${
|
|
80
|
-
[`${
|
|
81
|
-
[`${
|
|
82
|
-
[`${
|
|
77
|
+
[`${p}--silent`]: r,
|
|
78
|
+
[`${p}--negative`]: n,
|
|
79
|
+
[`${p}--disable-visited`]: a ?? r,
|
|
80
|
+
[`${p}--ensure-target-area`]: u
|
|
83
81
|
}
|
|
84
82
|
]),
|
|
85
83
|
"data-testid": e,
|
|
86
84
|
...l,
|
|
87
|
-
children: t ? /* @__PURE__ */ _("a", { href: t, target:
|
|
85
|
+
children: t ? /* @__PURE__ */ _("a", { href: t, target: d, ...l, children: s }) : s
|
|
88
86
|
}
|
|
89
87
|
);
|
|
90
88
|
export {
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
89
|
+
b as LINK_VARIANT,
|
|
90
|
+
h as Link,
|
|
91
|
+
N as linkVariants
|
|
94
92
|
};
|
|
95
93
|
//# sourceMappingURL=link.es.js.map
|
package/dist/link.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/link.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { ReactNode } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./link.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-link\";\n\nexport const LINK_VARIANT = {\n TEXT: \"text\",\n
|
|
1
|
+
{"version":3,"file":"link.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/link.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { ReactNode } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./link.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-link\";\n\nexport const LINK_VARIANT = {\n TEXT: \"text\",\n STANDALONE: \"standalone\",\n NAVIGATION: \"navigation\",\n} as const;\n\nexport const linkVariants = Object.values(LINK_VARIANT);\nexport type LinkVariant = (typeof LINK_VARIANT)[keyof typeof LINK_VARIANT];\n\nexport type LinkProps = {\n children: ReactNode;\n className?: string;\n [\"data-testid\"]?: string;\n /** Disables visited styling */\n disableVisited?: boolean;\n /**\n * This sets a minimum size on the targetable area of the link. Please note\n * it also changes display value to flex, meaning its container will behave\n * like a block element. You can wrap this component in a flex container\n * for additional layout control.\n */\n ensureTargetArea?: boolean;\n /**\n * This will wrap children in a <a/> tag and set the href accordingly\n */\n href?: string;\n negative?: boolean;\n /**\n * A silent link is intended to wrap an element\n * to make it a link but not add any styling\n * except for the pointer cursor and focus style.\n */\n silent?: boolean;\n /**\n * if target and href is specified, target will be added to the <a/> tag\n */\n target?: React.HTMLAttributeAnchorTarget;\n /**\n * Determines if link is displayed on its own line\n * (standalone) or within the current text content\n * (text).\n */\n variant: LinkVariant;\n};\n\nexport const Link = ({\n [\"data-testid\"]: dataTestid,\n children,\n className,\n disableVisited,\n ensureTargetArea,\n href,\n negative = false,\n silent,\n target,\n variant,\n ...props\n}: LinkProps) => (\n <span\n className={cx([\n className,\n rootClassName,\n `${rootClassName}--${negative ? `${variant}-negative` : variant}`,\n {\n [`${rootClassName}--silent`]: silent,\n [`${rootClassName}--negative`]: negative,\n [`${rootClassName}--disable-visited`]: disableVisited ?? silent,\n [`${rootClassName}--ensure-target-area`]: ensureTargetArea,\n },\n ])}\n data-testid={dataTestid}\n {...props}\n >\n {href ? (\n <a href={href} target={target} {...props}>\n {children}\n </a>\n ) : (\n children\n )}\n </span>\n);\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","LINK_VARIANT","linkVariants","Link","dataTestid","children","className","disableVisited","ensureTargetArea","href","negative","silent","target","variant","props","jsx"],"mappings":";;;;;;;;;;;AAOA,GAAC,WAAY;AAGZ,QAAIA,IAAS,CAAE,EAAC;AAEhB,aAASC,IAAc;AAGtB,eAFIC,IAAU,IAELC,IAAI,GAAGA,IAAI,UAAU,QAAQA,KAAK;AAC1C,YAAIC,IAAM,UAAUD,CAAC;AACrB,QAAIC,MACHF,IAAUG,EAAYH,GAASI,EAAW,KAAK,MAAMF,CAAG,CAAC;AAAA,MAE1D;AAED,aAAOF;AAAA,IACP;AAED,aAASI,EAAYF,GAAK;AACzB,UAAI,OAAOA,KAAQ,YAAY,OAAOA,KAAQ;AAC7C,eAAO,QAAQ,KAAKA,CAAG,KAAKA;AAG7B,UAAI,OAAOA,KAAQ;AAClB,eAAO;AAGR,UAAI,MAAM,QAAQA,CAAG;AACpB,eAAOH,EAAW,MAAM,MAAMG,CAAG;AAGlC,UAAIA,EAAI,aAAa,OAAO,UAAU,YAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe;AAClG,eAAOA,EAAI;AAGZ,UAAIF,IAAU;AAEd,eAASK,KAAOH;AACf,QAAIJ,EAAO,KAAKI,GAAKG,CAAG,KAAKH,EAAIG,CAAG,MACnCL,IAAUG,EAAYH,GAAS,QAAQ,KAAKK,CAAG,KAAKA,CAAG;AAIzD,aAAOL;AAAA,IACP;AAED,aAASG,EAAaG,GAAOC,GAAU;AACtC,aAAKA,IAIDD,IACIA,IAAQ,MAAMC,IAGfD,IAAQC,IAPPD;AAAA,IAQR;AAED,IAAqCE,EAAO,WAC3CT,EAAW,UAAUA,GACrBS,EAAA,UAAiBT,KAOjB,OAAO,aAAaA;AAAA,EAEtB;;;;;;;;;;;;;;GCvEMU,IAAKC,EAAE,KAAKC,CAAM,GAClBC,IAAgB,eAETC,IAAe;AAAA,EAC1B,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,YAAY;AACd,GAEaC,IAAe,OAAO,OAAOD,CAAY,GAuCzCE,IAAO,CAAC;AAAA,EACnB,CAAC,gBAAgBC;AAAA,EACjB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWlB,EAAG;AAAA,MACZS;AAAA,MACAN;AAAA,MACA,GAAGA,CAAa,KAAKU,IAAW,GAAGG,CAAO,cAAcA,CAAO;AAAA,MAC/D;AAAA,QACE,CAAC,GAAGb,CAAa,UAAU,GAAGW;AAAA,QAC9B,CAAC,GAAGX,CAAa,YAAY,GAAGU;AAAA,QAChC,CAAC,GAAGV,CAAa,mBAAmB,GAAGO,KAAkBI;AAAA,QACzD,CAAC,GAAGX,CAAa,sBAAsB,GAAGQ;AAAA,MAC5C;AAAA,IAAA,CACD;AAAA,IACD,eAAaJ;AAAA,IACZ,GAAGU;AAAA,IAEH,UAAAL,sBACE,KAAE,EAAA,MAAAA,GAAY,QAAAG,GAAiB,GAAGE,GAChC,UAAAT,EACH,CAAA,IAEAA;AAAA,EAAA;AAEJ;","x_google_ignoreList":[0]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/link",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.0",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/link.cjs.js",
|
|
6
6
|
"types": "./dist/link.d.ts",
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
"source": "src/link.tsx",
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"classnames": "~2.5.0",
|
|
18
|
-
"@purpurds/tokens": "
|
|
19
|
-
"@purpurds/paragraph": "
|
|
18
|
+
"@purpurds/tokens": "5.0.0",
|
|
19
|
+
"@purpurds/paragraph": "5.0.0"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
22
|
"@rushstack/eslint-patch": "~1.10.0",
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"typescript": "~5.4.2",
|
|
41
41
|
"vite": "~5.2.2",
|
|
42
42
|
"vitest": "~1.5.0",
|
|
43
|
-
"@purpurds/
|
|
44
|
-
"@purpurds/
|
|
43
|
+
"@purpurds/component-rig": "1.0.0",
|
|
44
|
+
"@purpurds/icon": "5.0.0"
|
|
45
45
|
},
|
|
46
46
|
"scripts": {
|
|
47
47
|
"build:dev": "vite",
|
package/src/link.stories.tsx
CHANGED
|
@@ -24,19 +24,19 @@ const meta: Meta<typeof Link> = {
|
|
|
24
24
|
},
|
|
25
25
|
target: { control: { type: "text" } },
|
|
26
26
|
},
|
|
27
|
+
args: { negative: false },
|
|
27
28
|
decorators: [
|
|
28
29
|
(Story, context) => {
|
|
29
30
|
const {
|
|
30
|
-
args: {
|
|
31
|
+
args: { negative },
|
|
31
32
|
} = context;
|
|
32
33
|
|
|
33
34
|
return (
|
|
34
35
|
<div
|
|
35
36
|
style={{
|
|
36
|
-
backgroundColor:
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
: undefined,
|
|
37
|
+
backgroundColor: negative
|
|
38
|
+
? "var(--purpur-color-background-tone-on-tone-primary)"
|
|
39
|
+
: undefined,
|
|
40
40
|
padding: "var(--purpur-spacing-200)",
|
|
41
41
|
}}
|
|
42
42
|
>
|
|
@@ -55,17 +55,16 @@ export const Showcase: Story = {
|
|
|
55
55
|
variant: linkVariants[0],
|
|
56
56
|
children: "Hello Link!",
|
|
57
57
|
},
|
|
58
|
-
render: ({ children, variant, ...args }) => (
|
|
58
|
+
render: ({ children, variant, negative, ...args }) => (
|
|
59
59
|
<div
|
|
60
60
|
style={{
|
|
61
|
-
backgroundColor:
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
: undefined,
|
|
61
|
+
backgroundColor: negative
|
|
62
|
+
? "var(--purpur-color-background-tone-on-tone-primary)"
|
|
63
|
+
: undefined,
|
|
65
64
|
padding: "var(--purpur-spacing-200)",
|
|
66
65
|
}}
|
|
67
66
|
>
|
|
68
|
-
<Link variant={variant} {...args}>
|
|
67
|
+
<Link variant={variant} negative={negative} {...args}>
|
|
69
68
|
<a href="https://www.telia.se" target="_blank" rel="noreferrer">
|
|
70
69
|
{children}
|
|
71
70
|
</a>
|
|
@@ -96,16 +95,15 @@ export const WithRightIcon: Story = {
|
|
|
96
95
|
variant: linkVariants[0],
|
|
97
96
|
children: "Hello Link!",
|
|
98
97
|
},
|
|
99
|
-
render: ({ children, variant, ...args }) => (
|
|
98
|
+
render: ({ children, variant, negative, ...args }) => (
|
|
100
99
|
<div
|
|
101
100
|
style={{
|
|
102
|
-
backgroundColor:
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
: undefined,
|
|
101
|
+
backgroundColor: negative
|
|
102
|
+
? "var(--purpur-color-background-tone-on-tone-primary)"
|
|
103
|
+
: undefined,
|
|
106
104
|
}}
|
|
107
105
|
>
|
|
108
|
-
<Link variant={variant} {...args}>
|
|
106
|
+
<Link variant={variant} negative={negative} {...args}>
|
|
109
107
|
<a href="https://www.telia.se" target="_blank" rel="noreferrer">
|
|
110
108
|
{children}
|
|
111
109
|
<Icon svg={endUser} size="xs" />
|
package/src/link.tsx
CHANGED
|
@@ -8,11 +8,8 @@ const rootClassName = "purpur-link";
|
|
|
8
8
|
|
|
9
9
|
export const LINK_VARIANT = {
|
|
10
10
|
TEXT: "text",
|
|
11
|
-
TEXT_NEGATIVE: "text-negative",
|
|
12
11
|
STANDALONE: "standalone",
|
|
13
|
-
STANDALONE_NEGATIVE: "standalone-negative",
|
|
14
12
|
NAVIGATION: "navigation",
|
|
15
|
-
NAVIGATION_NEGATIVE: "navigation-negative",
|
|
16
13
|
} as const;
|
|
17
14
|
|
|
18
15
|
export const linkVariants = Object.values(LINK_VARIANT);
|
|
@@ -35,6 +32,7 @@ export type LinkProps = {
|
|
|
35
32
|
* This will wrap children in a <a/> tag and set the href accordingly
|
|
36
33
|
*/
|
|
37
34
|
href?: string;
|
|
35
|
+
negative?: boolean;
|
|
38
36
|
/**
|
|
39
37
|
* A silent link is intended to wrap an element
|
|
40
38
|
* to make it a link but not add any styling
|
|
@@ -60,6 +58,7 @@ export const Link = ({
|
|
|
60
58
|
disableVisited,
|
|
61
59
|
ensureTargetArea,
|
|
62
60
|
href,
|
|
61
|
+
negative = false,
|
|
63
62
|
silent,
|
|
64
63
|
target,
|
|
65
64
|
variant,
|
|
@@ -69,10 +68,10 @@ export const Link = ({
|
|
|
69
68
|
className={cx([
|
|
70
69
|
className,
|
|
71
70
|
rootClassName,
|
|
72
|
-
`${rootClassName}--${variant}`,
|
|
71
|
+
`${rootClassName}--${negative ? `${variant}-negative` : variant}`,
|
|
73
72
|
{
|
|
74
73
|
[`${rootClassName}--silent`]: silent,
|
|
75
|
-
[`${rootClassName}--negative`]:
|
|
74
|
+
[`${rootClassName}--negative`]: negative,
|
|
76
75
|
[`${rootClassName}--disable-visited`]: disableVisited ?? silent,
|
|
77
76
|
[`${rootClassName}--ensure-target-area`]: ensureTargetArea,
|
|
78
77
|
},
|