@purpurds/link 5.12.0 → 5.13.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 +6 -2
- package/dist/link.d.ts.map +1 -1
- package/dist/link.es.js +47 -31
- package/dist/link.es.js.map +1 -1
- package/package.json +5 -5
- package/src/link.test.tsx +45 -2
- package/src/link.tsx +16 -2
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 g(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,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
|
|
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 b=c.exports;const N=g(b),x={"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"},y=N.bind(x),s="purpur-link",d={TEXT:"text",STANDALONE:"standalone",NAVIGATION:"navigation"},A=Object.values(d),j=({["data-testid"]:r,children:u,className:i,disableVisited:p,ensureTargetArea:a,href:t,negative:n=!1,onClick:e,rel:v,silent:o,target:k,variant:l,...f})=>_.jsx("span",{className:y([i,s,`${s}--${n?`${l}-negative`:l}`,{[`${s}--silent`]:o,[`${s}--negative`]:n,[`${s}--disable-visited`]:p??o,[`${s}--ensure-target-area`]:a}]),"data-testid":r,onClick:t?void 0:e,...f,children:t?_.jsx("a",{href:t,target:k,rel:v,onClick:e,"data-testid":r?`${r} a`:void 0,...f,children:u}):u});exports.LINK_VARIANT=d;exports.Link=j;exports.linkVariants=A;
|
|
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 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 an `<a/>` tag and set the `href` accordingly.\n */\n href?: string;\n negative?: boolean;\n /**\n * If both `rel` and `href` are specified, the `rel` attribute will be added to the `<a/>` tag.\n * The `rel` attribute specifies the relationship between the current document and the linked document.\n * Common values include \"noopener\", \"noreferrer\", \"nofollow\", and \"external\".\n */\n rel?: React.ComponentProps<\"a\">[\"rel\"];\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 both `target` and `href` are specified, the `target` attribute 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 rel,\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
|
|
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, { MouseEventHandler, 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 an `<a/>` tag and set the `href` accordingly.\n */\n href?: string;\n negative?: boolean;\n /**\n * If `href` is specified, the `onClick` handler will be added to the `<a/>` tag, otherwise on the wrapping `<span/>` tag.\n */\n onClick?: MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;\n /**\n * If both `rel` and `href` are specified, the `rel` attribute will be added to the `<a/>` tag.\n * The `rel` attribute specifies the relationship between the current document and the linked document.\n * Common values include \"noopener\", \"noreferrer\", \"nofollow\", and \"external\".\n */\n rel?: React.ComponentProps<\"a\">[\"rel\"];\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 both `target` and `href` are specified, the `target` attribute 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 onClick,\n rel,\n silent,\n target,\n variant,\n ...props\n}: LinkProps) => (\n /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */\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 onClick={href ? undefined : onClick}\n {...props}\n >\n {href ? (\n <a\n href={href}\n target={target}\n rel={rel}\n onClick={onClick}\n data-testid={dataTestid ? `${dataTestid} a` : undefined}\n {...props}\n >\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","onClick","rel","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,EAiDzCE,EAAO,CAAC,CACnB,CAAC,eAAgBC,EACjB,SAAAC,EACA,UAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,KAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EACA,IAAAC,EACA,OAAAC,EACA,OAAAC,EACA,QAAAC,EACA,GAAGC,CACL,IAEEC,EAAA,IAAC,OAAA,CACC,UAAWpB,EAAG,CACZS,EACAN,EACA,GAAGA,CAAa,KAAKU,EAAW,GAAGK,CAAO,YAAcA,CAAO,GAC/D,CACE,CAAC,GAAGf,CAAa,UAAU,EAAGa,EAC9B,CAAC,GAAGb,CAAa,YAAY,EAAGU,EAChC,CAAC,GAAGV,CAAa,mBAAmB,EAAGO,GAAkBM,EACzD,CAAC,GAAGb,CAAa,sBAAsB,EAAGQ,CAC5C,CAAA,CACD,EACD,cAAaJ,EACb,QAASK,EAAO,OAAYE,EAC3B,GAAGK,EAEH,SACCP,EAAAQ,EAAA,IAAC,IAAA,CACC,KAAAR,EACA,OAAAK,EACA,IAAAF,EACA,QAAAD,EACA,cAAaP,EAAa,GAAGA,CAAU,KAAO,OAC7C,GAAGY,EAEH,SAAAX,CAAA,CAAA,EAGHA,CAAA,CAEJ","x_google_ignoreList":[0]}
|
package/dist/link.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { default as React, ReactNode } from 'react';
|
|
1
|
+
import { default as React, MouseEventHandler, ReactNode } from 'react';
|
|
2
2
|
|
|
3
3
|
export declare const LINK_VARIANT: {
|
|
4
4
|
readonly TEXT: "text";
|
|
@@ -25,6 +25,10 @@ export type LinkProps = {
|
|
|
25
25
|
*/
|
|
26
26
|
href?: string;
|
|
27
27
|
negative?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* If `href` is specified, the `onClick` handler will be added to the `<a/>` tag, otherwise on the wrapping `<span/>` tag.
|
|
30
|
+
*/
|
|
31
|
+
onClick?: MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
|
|
28
32
|
/**
|
|
29
33
|
* If both `rel` and `href` are specified, the `rel` attribute will be added to the `<a/>` tag.
|
|
30
34
|
* The `rel` attribute specifies the relationship between the current document and the linked document.
|
|
@@ -48,5 +52,5 @@ export type LinkProps = {
|
|
|
48
52
|
*/
|
|
49
53
|
variant: LinkVariant;
|
|
50
54
|
};
|
|
51
|
-
export declare const Link: ({ ["data-testid"]: dataTestid, children, className, disableVisited, ensureTargetArea, href, negative, rel, silent, target, variant, ...props }: LinkProps) => React.JSX.Element;
|
|
55
|
+
export declare const Link: ({ ["data-testid"]: dataTestid, children, className, disableVisited, ensureTargetArea, href, negative, onClick, rel, silent, target, variant, ...props }: LinkProps) => React.JSX.Element;
|
|
52
56
|
//# 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;
|
|
1
|
+
{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../src/link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ5D,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;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,eAAe,CAAC,CAAC;IACjE;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;IACvC;;;;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,4JAcd,SAAS,sBAiCX,CAAC"}
|
package/dist/link.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _ } from "react/jsx-runtime";
|
|
2
|
-
function
|
|
2
|
+
function k(r) {
|
|
3
3
|
return r && r.__esModule && Object.prototype.hasOwnProperty.call(r, "default") ? r.default : r;
|
|
4
4
|
}
|
|
5
5
|
var c = { exports: {} };
|
|
@@ -10,7 +10,7 @@ var c = { exports: {} };
|
|
|
10
10
|
*/
|
|
11
11
|
(function(r) {
|
|
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 e = arguments[n];
|
|
@@ -29,7 +29,7 @@ var c = { exports: {} };
|
|
|
29
29
|
return t.toString();
|
|
30
30
|
var n = "";
|
|
31
31
|
for (var e in t)
|
|
32
|
-
|
|
32
|
+
s.call(t, e) && t[e] && (n = a(n, this && this[e] || e));
|
|
33
33
|
return n;
|
|
34
34
|
}
|
|
35
35
|
function a(t, n) {
|
|
@@ -38,8 +38,8 @@ 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
|
|
41
|
+
var g = c.exports;
|
|
42
|
+
const b = /* @__PURE__ */ k(g), x = {
|
|
43
43
|
"purpur-link": "_purpur-link_1066f_1",
|
|
44
44
|
"purpur-link--text": "_purpur-link--text_1066f_18",
|
|
45
45
|
"purpur-link--standalone": "_purpur-link--standalone_1066f_18",
|
|
@@ -50,45 +50,61 @@ const g = /* @__PURE__ */ v(k), b = {
|
|
|
50
50
|
"purpur-link--navigation-negative": "_purpur-link--navigation-negative_1066f_32",
|
|
51
51
|
"purpur-link--ensure-target-area": "_purpur-link--ensure-target-area_1066f_71",
|
|
52
52
|
"purpur-link--silent": "_purpur-link--silent_1066f_77"
|
|
53
|
-
},
|
|
53
|
+
}, N = b.bind(x), u = "purpur-link", m = {
|
|
54
54
|
TEXT: "text",
|
|
55
55
|
STANDALONE: "standalone",
|
|
56
56
|
NAVIGATION: "navigation"
|
|
57
|
-
},
|
|
57
|
+
}, y = Object.values(m), A = ({
|
|
58
58
|
["data-testid"]: r,
|
|
59
|
-
children:
|
|
59
|
+
children: s,
|
|
60
60
|
className: i,
|
|
61
61
|
disableVisited: p,
|
|
62
62
|
ensureTargetArea: a,
|
|
63
63
|
href: t,
|
|
64
64
|
negative: n = !1,
|
|
65
|
-
|
|
65
|
+
onClick: e,
|
|
66
|
+
rel: d,
|
|
66
67
|
silent: o,
|
|
67
|
-
target:
|
|
68
|
+
target: v,
|
|
68
69
|
variant: l,
|
|
69
70
|
...f
|
|
70
|
-
}) =>
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
71
|
+
}) => (
|
|
72
|
+
/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
|
|
73
|
+
/* @__PURE__ */ _(
|
|
74
|
+
"span",
|
|
75
|
+
{
|
|
76
|
+
className: N([
|
|
77
|
+
i,
|
|
78
|
+
u,
|
|
79
|
+
`${u}--${n ? `${l}-negative` : l}`,
|
|
80
|
+
{
|
|
81
|
+
[`${u}--silent`]: o,
|
|
82
|
+
[`${u}--negative`]: n,
|
|
83
|
+
[`${u}--disable-visited`]: p ?? o,
|
|
84
|
+
[`${u}--ensure-target-area`]: a
|
|
85
|
+
}
|
|
86
|
+
]),
|
|
87
|
+
"data-testid": r,
|
|
88
|
+
onClick: t ? void 0 : e,
|
|
89
|
+
...f,
|
|
90
|
+
children: t ? /* @__PURE__ */ _(
|
|
91
|
+
"a",
|
|
92
|
+
{
|
|
93
|
+
href: t,
|
|
94
|
+
target: v,
|
|
95
|
+
rel: d,
|
|
96
|
+
onClick: e,
|
|
97
|
+
"data-testid": r ? `${r} a` : void 0,
|
|
98
|
+
...f,
|
|
99
|
+
children: s
|
|
100
|
+
}
|
|
101
|
+
) : s
|
|
102
|
+
}
|
|
103
|
+
)
|
|
88
104
|
);
|
|
89
105
|
export {
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
106
|
+
m as LINK_VARIANT,
|
|
107
|
+
A as Link,
|
|
108
|
+
y as linkVariants
|
|
93
109
|
};
|
|
94
110
|
//# 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 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 an `<a/>` tag and set the `href` accordingly.\n */\n href?: string;\n negative?: boolean;\n /**\n * If both `rel` and `href` are specified, the `rel` attribute will be added to the `<a/>` tag.\n * The `rel` attribute specifies the relationship between the current document and the linked document.\n * Common values include \"noopener\", \"noreferrer\", \"nofollow\", and \"external\".\n */\n rel?: React.ComponentProps<\"a\">[\"rel\"];\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 both `target` and `href` are specified, the `target` attribute 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 rel,\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
|
|
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, { MouseEventHandler, 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 an `<a/>` tag and set the `href` accordingly.\n */\n href?: string;\n negative?: boolean;\n /**\n * If `href` is specified, the `onClick` handler will be added to the `<a/>` tag, otherwise on the wrapping `<span/>` tag.\n */\n onClick?: MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;\n /**\n * If both `rel` and `href` are specified, the `rel` attribute will be added to the `<a/>` tag.\n * The `rel` attribute specifies the relationship between the current document and the linked document.\n * Common values include \"noopener\", \"noreferrer\", \"nofollow\", and \"external\".\n */\n rel?: React.ComponentProps<\"a\">[\"rel\"];\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 both `target` and `href` are specified, the `target` attribute 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 onClick,\n rel,\n silent,\n target,\n variant,\n ...props\n}: LinkProps) => (\n /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */\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 onClick={href ? undefined : onClick}\n {...props}\n >\n {href ? (\n <a\n href={href}\n target={target}\n rel={rel}\n onClick={onClick}\n data-testid={dataTestid ? `${dataTestid} a` : undefined}\n {...props}\n >\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","onClick","rel","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,GAiDzCE,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,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL;AAAA;AAAA,EAEE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWpB,EAAG;AAAA,QACZS;AAAA,QACAN;AAAA,QACA,GAAGA,CAAa,KAAKU,IAAW,GAAGK,CAAO,cAAcA,CAAO;AAAA,QAC/D;AAAA,UACE,CAAC,GAAGf,CAAa,UAAU,GAAGa;AAAA,UAC9B,CAAC,GAAGb,CAAa,YAAY,GAAGU;AAAA,UAChC,CAAC,GAAGV,CAAa,mBAAmB,GAAGO,KAAkBM;AAAA,UACzD,CAAC,GAAGb,CAAa,sBAAsB,GAAGQ;AAAA,QAC5C;AAAA,MAAA,CACD;AAAA,MACD,eAAaJ;AAAA,MACb,SAASK,IAAO,SAAYE;AAAA,MAC3B,GAAGK;AAAA,MAEH,UACCP,IAAA,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAAR;AAAA,UACA,QAAAK;AAAA,UACA,KAAAF;AAAA,UACA,SAAAD;AAAA,UACA,eAAaP,IAAa,GAAGA,CAAU,OAAO;AAAA,UAC7C,GAAGY;AAAA,UAEH,UAAAX;AAAA,QAAA;AAAA,MAAA,IAGHA;AAAA,IAAA;AAAA,EAEJ;AAAA;","x_google_ignoreList":[0]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/link",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.13.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/paragraph": "5.
|
|
19
|
-
"@purpurds/tokens": "5.
|
|
18
|
+
"@purpurds/paragraph": "5.13.0",
|
|
19
|
+
"@purpurds/tokens": "5.13.0"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
22
|
"@rushstack/eslint-patch": "~1.10.0",
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"typescript": "^5.5.4",
|
|
41
41
|
"vite": "5.3.4",
|
|
42
42
|
"vitest": "~1.5.0",
|
|
43
|
-
"@purpurds/
|
|
44
|
-
"@purpurds/
|
|
43
|
+
"@purpurds/component-rig": "1.0.0",
|
|
44
|
+
"@purpurds/icon": "5.13.0"
|
|
45
45
|
},
|
|
46
46
|
"scripts": {
|
|
47
47
|
"build:dev": "vite",
|
package/src/link.test.tsx
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/* eslint-disable jsx-a11y/anchor-is-valid */
|
|
2
2
|
import React from "react";
|
|
3
3
|
import * as matchers from "@testing-library/jest-dom/matchers";
|
|
4
|
-
import { cleanup, render, screen } from "@testing-library/react";
|
|
5
|
-
import { afterEach, describe, expect, it } from "vitest";
|
|
4
|
+
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
|
|
5
|
+
import { afterEach, describe, expect, it, vi } from "vitest";
|
|
6
6
|
|
|
7
7
|
import { Link } from "./link";
|
|
8
8
|
|
|
@@ -24,6 +24,26 @@ describe("Link", () => {
|
|
|
24
24
|
expect(screen.getByTestId("link")).toHaveClass("purpur-link--text");
|
|
25
25
|
});
|
|
26
26
|
|
|
27
|
+
it("should render an a tag", () => {
|
|
28
|
+
render(
|
|
29
|
+
<Link variant="text" href="#" data-testid="link">
|
|
30
|
+
Some text content
|
|
31
|
+
</Link>
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
expect(screen.getByTestId("link a")).toBeInTheDocument();
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
it("should not render an a tag", () => {
|
|
38
|
+
render(
|
|
39
|
+
<Link variant="text" data-testid="link">
|
|
40
|
+
Some text content
|
|
41
|
+
</Link>
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
expect(screen.queryByTestId("link a")).not.toBeInTheDocument();
|
|
45
|
+
});
|
|
46
|
+
|
|
27
47
|
it("should add a class for disabling visited styling", () => {
|
|
28
48
|
render(
|
|
29
49
|
<Link variant="text" data-testid="link" disableVisited>
|
|
@@ -43,4 +63,27 @@ describe("Link", () => {
|
|
|
43
63
|
|
|
44
64
|
expect(screen.getByTestId("link")).toHaveClass("purpur-link--silent");
|
|
45
65
|
});
|
|
66
|
+
|
|
67
|
+
it("should handle click on span tag", () => {
|
|
68
|
+
const handleClick = vi.fn();
|
|
69
|
+
render(
|
|
70
|
+
<Link variant="text" data-testid="link" onClick={handleClick}>
|
|
71
|
+
Some text content
|
|
72
|
+
</Link>
|
|
73
|
+
);
|
|
74
|
+
fireEvent.click(screen.getByTestId("link"));
|
|
75
|
+
expect(handleClick).toHaveBeenCalledTimes(1);
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
it("should handle click on a tag", () => {
|
|
79
|
+
const handleClick = vi.fn();
|
|
80
|
+
render(
|
|
81
|
+
<Link variant="text" href="#" data-testid="link" onClick={handleClick}>
|
|
82
|
+
Click me
|
|
83
|
+
</Link>
|
|
84
|
+
);
|
|
85
|
+
fireEvent.click(screen.getByTestId("link"));
|
|
86
|
+
fireEvent.click(screen.getByTestId("link a"));
|
|
87
|
+
expect(handleClick).toHaveBeenCalledTimes(1);
|
|
88
|
+
});
|
|
46
89
|
});
|
package/src/link.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { ReactNode } from "react";
|
|
1
|
+
import React, { MouseEventHandler, ReactNode } from "react";
|
|
2
2
|
import c from "classnames/bind";
|
|
3
3
|
|
|
4
4
|
import styles from "./link.module.scss";
|
|
@@ -33,6 +33,10 @@ export type LinkProps = {
|
|
|
33
33
|
*/
|
|
34
34
|
href?: string;
|
|
35
35
|
negative?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* If `href` is specified, the `onClick` handler will be added to the `<a/>` tag, otherwise on the wrapping `<span/>` tag.
|
|
38
|
+
*/
|
|
39
|
+
onClick?: MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
|
|
36
40
|
/**
|
|
37
41
|
* If both `rel` and `href` are specified, the `rel` attribute will be added to the `<a/>` tag.
|
|
38
42
|
* The `rel` attribute specifies the relationship between the current document and the linked document.
|
|
@@ -65,12 +69,14 @@ export const Link = ({
|
|
|
65
69
|
ensureTargetArea,
|
|
66
70
|
href,
|
|
67
71
|
negative = false,
|
|
72
|
+
onClick,
|
|
68
73
|
rel,
|
|
69
74
|
silent,
|
|
70
75
|
target,
|
|
71
76
|
variant,
|
|
72
77
|
...props
|
|
73
78
|
}: LinkProps) => (
|
|
79
|
+
/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
|
|
74
80
|
<span
|
|
75
81
|
className={cx([
|
|
76
82
|
className,
|
|
@@ -84,10 +90,18 @@ export const Link = ({
|
|
|
84
90
|
},
|
|
85
91
|
])}
|
|
86
92
|
data-testid={dataTestid}
|
|
93
|
+
onClick={href ? undefined : onClick}
|
|
87
94
|
{...props}
|
|
88
95
|
>
|
|
89
96
|
{href ? (
|
|
90
|
-
<a
|
|
97
|
+
<a
|
|
98
|
+
href={href}
|
|
99
|
+
target={target}
|
|
100
|
+
rel={rel}
|
|
101
|
+
onClick={onClick}
|
|
102
|
+
data-testid={dataTestid ? `${dataTestid} a` : undefined}
|
|
103
|
+
{...props}
|
|
104
|
+
>
|
|
91
105
|
{children}
|
|
92
106
|
</a>
|
|
93
107
|
) : (
|