@openedx/paragon 23.3.0 → 23.4.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/bin/paragon-scripts.js +1 -1
- package/dist/DataTable/TablePagination.js +4 -0
- package/dist/DataTable/TablePagination.js.map +1 -1
- package/dist/DataTable/TablePaginationMinimal.js +4 -1
- package/dist/DataTable/TablePaginationMinimal.js.map +1 -1
- package/dist/DataTable/messages.js +11 -0
- package/dist/Hyperlink/index.d.ts +10 -5
- package/dist/Hyperlink/index.js +56 -25
- package/dist/Hyperlink/index.js.map +1 -1
- package/dist/core.css +657 -657
- package/dist/core.css.map +1 -1
- package/dist/core.min.css +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/light.css +2051 -2051
- package/dist/light.css.map +1 -1
- package/dist/light.min.css +1 -1
- package/package.json +2 -2
- package/src/Button/Button.test.tsx +6 -1
- package/src/DataTable/TablePagination.jsx +5 -0
- package/src/DataTable/TablePaginationMinimal.jsx +5 -1
- package/src/DataTable/messages.js +11 -0
- package/src/DataTable/tests/TableFooter.test.jsx +5 -1
- package/src/DataTable/tests/TablePagination.test.jsx +6 -3
- package/src/Hyperlink/Hyperlink.test.tsx +50 -20
- package/src/Hyperlink/README.md +14 -1
- package/src/Hyperlink/index.tsx +70 -30
- package/src/MailtoLink/MailtoLink.test.jsx +12 -3
- package/src/Menu/Menu.test.jsx +12 -9
- package/src/Menu/SelectMenu.test.jsx +35 -16
- package/src/Menu/__snapshots__/Menu.test.jsx.snap +0 -1
- package/src/index.d.ts +1 -1
- package/src/index.js +1 -1
- package/styles/css/core/variables.css +656 -656
- package/styles/css/themes/light/variables.css +2051 -2051
- package/styles/scss/core/_variables.scss +1 -1
- package/tokens/src/core/global/other.json +5 -0
- package/tokens/src/core/global/typography.json +0 -5
package/bin/paragon-scripts.js
CHANGED
|
@@ -218,7 +218,7 @@ const COMMANDS = {
|
|
|
218
218
|
sendTrackInfo('openedx.paragon.cli-command.used', { command, status: 'success' });
|
|
219
219
|
} catch (error) {
|
|
220
220
|
// eslint-disable-next-line no-console
|
|
221
|
-
console.error(chalk.red.bold('An error occurred:', error
|
|
221
|
+
console.error(chalk.red.bold('An error occurred:', error));
|
|
222
222
|
sendTrackInfo('openedx.paragon.cli-command.used', { command, status: 'error', errorMsg: error.message });
|
|
223
223
|
process.exit(1);
|
|
224
224
|
}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import React, { useContext } from 'react';
|
|
2
|
+
import { useIntl } from 'react-intl';
|
|
2
3
|
import DataTableContext from './DataTableContext';
|
|
3
4
|
import Pagination from '../Pagination';
|
|
5
|
+
import messages from './messages';
|
|
4
6
|
function TablePagination() {
|
|
7
|
+
const intl = useIntl();
|
|
5
8
|
const {
|
|
6
9
|
pageCount,
|
|
7
10
|
state,
|
|
@@ -16,6 +19,7 @@ function TablePagination() {
|
|
|
16
19
|
currentPage: pageIndex + 1,
|
|
17
20
|
onPageSelect: pageNum => gotoPage(pageNum - 1),
|
|
18
21
|
pageCount: pageCount,
|
|
22
|
+
paginationLabel: intl.formatMessage(messages.paginationLabel),
|
|
19
23
|
icons: {
|
|
20
24
|
leftIcon: null,
|
|
21
25
|
rightIcon: null
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TablePagination.js","names":["React","useContext","DataTableContext","Pagination","TablePagination","pageCount","state","gotoPage","pageIndex","createElement","variant","currentPage","onPageSelect","pageNum","icons","leftIcon","rightIcon"],"sources":["../../src/DataTable/TablePagination.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport DataTableContext from './DataTableContext';\nimport Pagination from '../Pagination';\n\nfunction TablePagination() {\n const {\n pageCount, state, gotoPage,\n } = useContext(DataTableContext);\n\n if (!pageCount || pageCount < 2) {\n return null;\n }\n\n const pageIndex = state?.pageIndex;\n\n return (\n <Pagination\n variant=\"reduced\"\n currentPage={pageIndex + 1}\n onPageSelect={(pageNum) => gotoPage(pageNum - 1)}\n pageCount={pageCount}\n icons={{\n leftIcon: null,\n rightIcon: null,\n }}\n />\n );\n}\n\nexport default TablePagination;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,UAAU,MAAM,eAAe;
|
|
1
|
+
{"version":3,"file":"TablePagination.js","names":["React","useContext","useIntl","DataTableContext","Pagination","messages","TablePagination","intl","pageCount","state","gotoPage","pageIndex","createElement","variant","currentPage","onPageSelect","pageNum","paginationLabel","formatMessage","icons","leftIcon","rightIcon"],"sources":["../../src/DataTable/TablePagination.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useIntl } from 'react-intl';\nimport DataTableContext from './DataTableContext';\nimport Pagination from '../Pagination';\nimport messages from './messages';\n\nfunction TablePagination() {\n const intl = useIntl();\n\n const {\n pageCount, state, gotoPage,\n } = useContext(DataTableContext);\n\n if (!pageCount || pageCount < 2) {\n return null;\n }\n\n const pageIndex = state?.pageIndex;\n\n return (\n <Pagination\n variant=\"reduced\"\n currentPage={pageIndex + 1}\n onPageSelect={(pageNum) => gotoPage(pageNum - 1)}\n pageCount={pageCount}\n paginationLabel={intl.formatMessage(messages.paginationLabel)}\n icons={{\n leftIcon: null,\n rightIcon: null,\n }}\n />\n );\n}\n\nexport default TablePagination;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,OAAO,QAAQ,YAAY;AACpC,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,UAAU,MAAM,eAAe;AACtC,OAAOC,QAAQ,MAAM,YAAY;AAEjC,SAASC,eAAeA,CAAA,EAAG;EACzB,MAAMC,IAAI,GAAGL,OAAO,CAAC,CAAC;EAEtB,MAAM;IACJM,SAAS;IAAEC,KAAK;IAAEC;EACpB,CAAC,GAAGT,UAAU,CAACE,gBAAgB,CAAC;EAEhC,IAAI,CAACK,SAAS,IAAIA,SAAS,GAAG,CAAC,EAAE;IAC/B,OAAO,IAAI;EACb;EAEA,MAAMG,SAAS,GAAGF,KAAK,EAAEE,SAAS;EAElC,oBACEX,KAAA,CAAAY,aAAA,CAACR,UAAU;IACTS,OAAO,EAAC,SAAS;IACjBC,WAAW,EAAEH,SAAS,GAAG,CAAE;IAC3BI,YAAY,EAAGC,OAAO,IAAKN,QAAQ,CAACM,OAAO,GAAG,CAAC,CAAE;IACjDR,SAAS,EAAEA,SAAU;IACrBS,eAAe,EAAEV,IAAI,CAACW,aAAa,CAACb,QAAQ,CAACY,eAAe,CAAE;IAC9DE,KAAK,EAAE;MACLC,QAAQ,EAAE,IAAI;MACdC,SAAS,EAAE;IACb;EAAE,CACH,CAAC;AAEN;AAEA,eAAef,eAAe","ignoreList":[]}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import React, { useContext } from 'react';
|
|
2
|
+
import { useIntl } from 'react-intl';
|
|
2
3
|
import DataTableContext from './DataTableContext';
|
|
3
4
|
import Pagination from '../Pagination';
|
|
4
5
|
import { ArrowBackIos, ArrowForwardIos } from '../../icons';
|
|
6
|
+
import messages from './messages';
|
|
5
7
|
function TablePaginationMinimal() {
|
|
8
|
+
const intl = useIntl();
|
|
6
9
|
const {
|
|
7
10
|
nextPage,
|
|
8
11
|
pageCount,
|
|
@@ -19,7 +22,7 @@ function TablePaginationMinimal() {
|
|
|
19
22
|
variant: "minimal",
|
|
20
23
|
currentPage: pageIndex + 1,
|
|
21
24
|
pageCount: pageCount,
|
|
22
|
-
paginationLabel:
|
|
25
|
+
paginationLabel: intl.formatMessage(messages.paginationLabel),
|
|
23
26
|
onPageSelect: pageNum => gotoPage(pageNum - 1),
|
|
24
27
|
icons: {
|
|
25
28
|
leftIcon: ArrowBackIos,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TablePaginationMinimal.js","names":["React","useContext","DataTableContext","Pagination","ArrowBackIos","ArrowForwardIos","TablePaginationMinimal","nextPage","pageCount","gotoPage","state","pageIndex","createElement","variant","currentPage","paginationLabel","onPageSelect","pageNum","icons","leftIcon","rightIcon"],"sources":["../../src/DataTable/TablePaginationMinimal.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport DataTableContext from './DataTableContext';\nimport Pagination from '../Pagination';\nimport { ArrowBackIos, ArrowForwardIos } from '../../icons';\n\nfunction TablePaginationMinimal() {\n const {\n nextPage, pageCount, gotoPage, state,\n } = useContext(DataTableContext);\n\n // Use nextPage as a proxy for whether or not the table is paginated\n if (!nextPage) {\n return null;\n }\n\n const pageIndex = state?.pageIndex;\n\n return (\n <Pagination\n variant=\"minimal\"\n currentPage={pageIndex + 1}\n pageCount={pageCount}\n paginationLabel
|
|
1
|
+
{"version":3,"file":"TablePaginationMinimal.js","names":["React","useContext","useIntl","DataTableContext","Pagination","ArrowBackIos","ArrowForwardIos","messages","TablePaginationMinimal","intl","nextPage","pageCount","gotoPage","state","pageIndex","createElement","variant","currentPage","paginationLabel","formatMessage","onPageSelect","pageNum","icons","leftIcon","rightIcon"],"sources":["../../src/DataTable/TablePaginationMinimal.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useIntl } from 'react-intl';\nimport DataTableContext from './DataTableContext';\nimport Pagination from '../Pagination';\nimport { ArrowBackIos, ArrowForwardIos } from '../../icons';\nimport messages from './messages';\n\nfunction TablePaginationMinimal() {\n const intl = useIntl();\n\n const {\n nextPage, pageCount, gotoPage, state,\n } = useContext(DataTableContext);\n\n // Use nextPage as a proxy for whether or not the table is paginated\n if (!nextPage) {\n return null;\n }\n\n const pageIndex = state?.pageIndex;\n\n return (\n <Pagination\n variant=\"minimal\"\n currentPage={pageIndex + 1}\n pageCount={pageCount}\n paginationLabel={intl.formatMessage(messages.paginationLabel)}\n onPageSelect={(pageNum) => gotoPage(pageNum - 1)}\n icons={{\n leftIcon: ArrowBackIos,\n rightIcon: ArrowForwardIos,\n }}\n />\n );\n}\n\nexport default TablePaginationMinimal;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,OAAO,QAAQ,YAAY;AACpC,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,UAAU,MAAM,eAAe;AACtC,SAASC,YAAY,EAAEC,eAAe,QAAQ,aAAa;AAC3D,OAAOC,QAAQ,MAAM,YAAY;AAEjC,SAASC,sBAAsBA,CAAA,EAAG;EAChC,MAAMC,IAAI,GAAGP,OAAO,CAAC,CAAC;EAEtB,MAAM;IACJQ,QAAQ;IAAEC,SAAS;IAAEC,QAAQ;IAAEC;EACjC,CAAC,GAAGZ,UAAU,CAACE,gBAAgB,CAAC;;EAEhC;EACA,IAAI,CAACO,QAAQ,EAAE;IACb,OAAO,IAAI;EACb;EAEA,MAAMI,SAAS,GAAGD,KAAK,EAAEC,SAAS;EAElC,oBACEd,KAAA,CAAAe,aAAA,CAACX,UAAU;IACTY,OAAO,EAAC,SAAS;IACjBC,WAAW,EAAEH,SAAS,GAAG,CAAE;IAC3BH,SAAS,EAAEA,SAAU;IACrBO,eAAe,EAAET,IAAI,CAACU,aAAa,CAACZ,QAAQ,CAACW,eAAe,CAAE;IAC9DE,YAAY,EAAGC,OAAO,IAAKT,QAAQ,CAACS,OAAO,GAAG,CAAC,CAAE;IACjDC,KAAK,EAAE;MACLC,QAAQ,EAAElB,YAAY;MACtBmB,SAAS,EAAElB;IACb;EAAE,CACH,CAAC;AAEN;AAEA,eAAeE,sBAAsB","ignoreList":[]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { defineMessages } from 'react-intl';
|
|
2
|
+
|
|
3
|
+
const messages = defineMessages({
|
|
4
|
+
paginationLabel: {
|
|
5
|
+
id: 'pgn.DataTable.paginationLabel',
|
|
6
|
+
defaultMessage: 'table pagination',
|
|
7
|
+
description: 'Accessibile name for the navigation element of a pagination component',
|
|
8
|
+
},
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
export default messages;
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
3
|
-
export
|
|
4
|
-
interface Props extends Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {
|
|
2
|
+
import { type BsPrefixRefForwardingComponent as ComponentWithAsProp, type BsPrefixProps } from 'react-bootstrap/esm/helpers';
|
|
3
|
+
export interface HyperlinkProps extends BsPrefixProps, Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {
|
|
5
4
|
/** specifies the URL */
|
|
6
|
-
destination
|
|
5
|
+
destination?: string;
|
|
7
6
|
/** Content of the hyperlink */
|
|
8
7
|
children: React.ReactNode;
|
|
9
8
|
/** Custom class names for the hyperlink */
|
|
@@ -18,7 +17,13 @@ interface Props extends Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'
|
|
|
18
17
|
isInline?: boolean;
|
|
19
18
|
/** specify if we need to show launch Icon. By default, it will be visible. */
|
|
20
19
|
showLaunchIcon?: boolean;
|
|
20
|
+
/** specifies where the link should open. The default behavior is `_self`, which means that the URL will be
|
|
21
|
+
* loaded into the same browsing context as the current one.
|
|
22
|
+
* If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent
|
|
23
|
+
* any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).
|
|
24
|
+
*/
|
|
21
25
|
target?: '_blank' | '_self';
|
|
22
26
|
}
|
|
23
|
-
|
|
27
|
+
export type HyperlinkType = ComponentWithAsProp<'a', HyperlinkProps>;
|
|
28
|
+
declare const Hyperlink: React.ForwardRefExoticComponent<Omit<HyperlinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
|
|
24
29
|
export default Hyperlink;
|
package/dist/Hyperlink/index.js
CHANGED
|
@@ -1,24 +1,37 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
|
+
import { defineMessages, useIntl } from 'react-intl';
|
|
4
5
|
import { Launch } from '../../icons';
|
|
5
6
|
import Icon from '../Icon';
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const
|
|
7
|
+
// @ts-ignore
|
|
8
|
+
import { customPropTypeRequirement } from '../utils/propTypes/utils';
|
|
9
|
+
const messages = defineMessages({
|
|
10
|
+
externalLinkAltText: {
|
|
11
|
+
id: 'Hyperlink.externalLinkAltText',
|
|
12
|
+
defaultMessage: 'in a new tab'
|
|
13
|
+
},
|
|
14
|
+
externalLinkTitle: {
|
|
15
|
+
id: 'Hyperlink.externalLinkTitle',
|
|
16
|
+
defaultMessage: 'Opens in a new tab'
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const Hyperlink = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
9
20
|
let {
|
|
21
|
+
as: Component = 'a',
|
|
10
22
|
className,
|
|
11
23
|
destination,
|
|
12
24
|
children,
|
|
13
|
-
target,
|
|
25
|
+
target = '_self',
|
|
14
26
|
onClick,
|
|
15
27
|
externalLinkAlternativeText,
|
|
16
28
|
externalLinkTitle,
|
|
17
|
-
variant,
|
|
18
|
-
isInline,
|
|
19
|
-
showLaunchIcon,
|
|
29
|
+
variant = 'default',
|
|
30
|
+
isInline = false,
|
|
31
|
+
showLaunchIcon = true,
|
|
20
32
|
...attrs
|
|
21
33
|
} = _ref;
|
|
34
|
+
const intl = useIntl();
|
|
22
35
|
let externalLinkIcon;
|
|
23
36
|
if (target === '_blank') {
|
|
24
37
|
const generateRel = () => {
|
|
@@ -42,10 +55,10 @@ const Hyperlink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
42
55
|
if (showLaunchIcon) {
|
|
43
56
|
externalLinkIcon = /*#__PURE__*/React.createElement("span", {
|
|
44
57
|
className: "pgn__hyperlink__external-icon",
|
|
45
|
-
title: externalLinkTitle
|
|
58
|
+
title: externalLinkTitle || intl.formatMessage(messages.externalLinkTitle)
|
|
46
59
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
47
60
|
src: Launch,
|
|
48
|
-
screenReaderText: externalLinkAlternativeText,
|
|
61
|
+
screenReaderText: externalLinkAlternativeText || intl.formatMessage(messages.externalLinkAltText),
|
|
49
62
|
style: {
|
|
50
63
|
height: '1em',
|
|
51
64
|
width: '1em'
|
|
@@ -54,31 +67,36 @@ const Hyperlink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
54
67
|
}));
|
|
55
68
|
}
|
|
56
69
|
}
|
|
57
|
-
|
|
70
|
+
const additionalProps = {
|
|
71
|
+
...attrs
|
|
72
|
+
};
|
|
73
|
+
if (destination) {
|
|
74
|
+
additionalProps.href = destination;
|
|
75
|
+
}
|
|
76
|
+
return /*#__PURE__*/React.createElement(Component, {
|
|
58
77
|
ref: ref,
|
|
59
78
|
className: classNames('pgn__hyperlink', `${variant}-link`, {
|
|
60
79
|
'standalone-link': !isInline,
|
|
61
80
|
'inline-link': isInline
|
|
62
81
|
}, className),
|
|
63
|
-
href: destination,
|
|
64
82
|
target: target,
|
|
65
83
|
onClick: onClick,
|
|
66
|
-
...
|
|
84
|
+
...additionalProps
|
|
67
85
|
}, children, externalLinkIcon);
|
|
68
86
|
});
|
|
69
|
-
Hyperlink.defaultProps = {
|
|
70
|
-
className: undefined,
|
|
71
|
-
target: '_self',
|
|
72
|
-
onClick: () => {},
|
|
73
|
-
externalLinkAlternativeText: HYPER_LINK_EXTERNAL_LINK_ALT_TEXT,
|
|
74
|
-
externalLinkTitle: HYPER_LINK_EXTERNAL_LINK_TITLE,
|
|
75
|
-
variant: 'default',
|
|
76
|
-
isInline: false,
|
|
77
|
-
showLaunchIcon: true
|
|
78
|
-
};
|
|
79
87
|
Hyperlink.propTypes = {
|
|
80
|
-
/** specifies the
|
|
81
|
-
|
|
88
|
+
/** specifies the component element type to render for the hyperlink */
|
|
89
|
+
// @ts-ignore
|
|
90
|
+
as: PropTypes.elementType,
|
|
91
|
+
/** specifies the URL; required iff `as` prop is a standard anchor tag */
|
|
92
|
+
destination: customPropTypeRequirement(PropTypes.string, _ref2 => {
|
|
93
|
+
let {
|
|
94
|
+
as
|
|
95
|
+
} = _ref2;
|
|
96
|
+
return as && as === 'a';
|
|
97
|
+
},
|
|
98
|
+
// "[`destination` is required when]..."
|
|
99
|
+
'the `as` prop is a standard anchor element (i.e., "a")'),
|
|
82
100
|
/** Content of the hyperlink */
|
|
83
101
|
// @ts-ignore
|
|
84
102
|
children: PropTypes.node.isRequired,
|
|
@@ -103,5 +121,18 @@ Hyperlink.propTypes = {
|
|
|
103
121
|
/** specify if we need to show launch Icon. By default, it will be visible. */
|
|
104
122
|
showLaunchIcon: PropTypes.bool
|
|
105
123
|
};
|
|
124
|
+
Hyperlink.defaultProps = {
|
|
125
|
+
as: 'a',
|
|
126
|
+
className: undefined,
|
|
127
|
+
destination: undefined,
|
|
128
|
+
externalLinkAlternativeText: undefined,
|
|
129
|
+
externalLinkTitle: undefined,
|
|
130
|
+
isInline: false,
|
|
131
|
+
onClick: undefined,
|
|
132
|
+
showLaunchIcon: true,
|
|
133
|
+
target: '_self',
|
|
134
|
+
variant: 'default'
|
|
135
|
+
};
|
|
136
|
+
Hyperlink.displayName = 'Hyperlink';
|
|
106
137
|
export default Hyperlink;
|
|
107
138
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Launch","Icon","HYPER_LINK_EXTERNAL_LINK_ALT_TEXT","HYPER_LINK_EXTERNAL_LINK_TITLE","Hyperlink","forwardRef","_ref","ref","className","destination","children","target","onClick","externalLinkAlternativeText","externalLinkTitle","variant","isInline","showLaunchIcon","attrs","externalLinkIcon","generateRel","rel","includes","createElement","title","src","screenReaderText","style","height","width","href","defaultProps","undefined","propTypes","string","isRequired","node","oneOf","func","bool"],"sources":["../../src/Hyperlink/index.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { Launch } from '../../icons';\nimport Icon from '../Icon';\n\nexport const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';\nexport const HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';\n\ninterface Props extends Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {\n /** specifies the URL */\n destination: string;\n /** Content of the hyperlink */\n children: React.ReactNode;\n /** Custom class names for the hyperlink */\n className?: string;\n /** Alt text for the icon indicating that this link opens in a new tab, if target=\"_blank\". e.g. _(\"in a new tab\") */\n externalLinkAlternativeText?: string;\n /** Tooltip text for the \"opens in new tab\" icon, if target=\"_blank\". e.g. _(\"Opens in a new tab\"). */\n externalLinkTitle?: string;\n /** type of hyperlink */\n variant?: 'default' | 'muted' | 'brand';\n /** Display the link with an underline. By default, it is only underlined on hover. */\n isInline?: boolean;\n /** specify if we need to show launch Icon. By default, it will be visible. */\n showLaunchIcon?: boolean;\n target?: '_blank' | '_self';\n}\n\nconst Hyperlink = React.forwardRef<HTMLAnchorElement, Props>(({\n className,\n destination,\n children,\n target,\n onClick,\n externalLinkAlternativeText,\n externalLinkTitle,\n variant,\n isInline,\n showLaunchIcon,\n ...attrs\n}, ref) => {\n let externalLinkIcon;\n\n if (target === '_blank') {\n const generateRel = () => {\n let { rel } = attrs;\n if (!rel) {\n return 'noopener noreferrer';\n }\n if (!rel.includes('noopener')) {\n rel += ' noopener';\n }\n if (!rel.includes('noreferrer')) {\n rel += ' noreferrer';\n }\n return rel;\n };\n\n // Add this rel attribute to prevent Reverse Tabnabbing\n attrs.rel = generateRel();\n if (showLaunchIcon) {\n externalLinkIcon = (\n <span\n className=\"pgn__hyperlink__external-icon\"\n title={externalLinkTitle}\n >\n <Icon\n src={Launch}\n screenReaderText={externalLinkAlternativeText}\n style={{ height: '1em', width: '1em' }}\n data-testid=\"hyperlink-icon\"\n />\n </span>\n );\n }\n }\n\n return (\n <a\n ref={ref}\n className={classNames(\n 'pgn__hyperlink',\n `${variant}-link`,\n {\n 'standalone-link': !isInline,\n 'inline-link': isInline,\n },\n className,\n )}\n href={destination}\n target={target}\n onClick={onClick}\n {...attrs}\n >\n {children}\n {externalLinkIcon}\n </a>\n );\n});\n\nHyperlink.defaultProps = {\n className: undefined,\n target: '_self',\n onClick: () => {},\n externalLinkAlternativeText: HYPER_LINK_EXTERNAL_LINK_ALT_TEXT,\n externalLinkTitle: HYPER_LINK_EXTERNAL_LINK_TITLE,\n variant: 'default',\n isInline: false,\n showLaunchIcon: true,\n};\n\nHyperlink.propTypes = {\n /** specifies the URL */\n destination: PropTypes.string.isRequired,\n /** Content of the hyperlink */\n // @ts-ignore\n children: PropTypes.node.isRequired,\n /** Custom class names for the hyperlink */\n className: PropTypes.string,\n /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be\n * loaded into the same browsing context as the current one.\n * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent\n * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).\n */\n target: PropTypes.oneOf(['_blank', '_self']),\n /** specifies the callback function when the link is clicked */\n onClick: PropTypes.func,\n /** Alt text for the icon indicating that this link opens in a new tab, if target=\"_blank\". e.g. _(\"in a new tab\") */\n externalLinkAlternativeText: PropTypes.string,\n /** Tooltip text for the \"opens in new tab\" icon, if target=\"_blank\". e.g. _(\"Opens in a new tab\"). */\n externalLinkTitle: PropTypes.string,\n /** type of hyperlink */\n variant: PropTypes.oneOf(['default', 'muted', 'brand']),\n /** Display the link with an underline. By default, it is only underlined on hover. */\n isInline: PropTypes.bool,\n /** specify if we need to show launch Icon. By default, it will be visible. */\n showLaunchIcon: PropTypes.bool,\n};\n\nexport default Hyperlink;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","forwardRef","PropTypes","classNames","defineMessages","useIntl","Launch","Icon","customPropTypeRequirement","messages","externalLinkAltText","id","defaultMessage","externalLinkTitle","Hyperlink","_ref","ref","as","Component","className","destination","children","target","onClick","externalLinkAlternativeText","variant","isInline","showLaunchIcon","attrs","intl","externalLinkIcon","generateRel","rel","includes","createElement","title","formatMessage","src","screenReaderText","style","height","width","additionalProps","href","propTypes","elementType","string","_ref2","node","isRequired","oneOf","func","bool","defaultProps","undefined","displayName"],"sources":["../../src/Hyperlink/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport {\n type BsPrefixRefForwardingComponent as ComponentWithAsProp,\n type BsPrefixProps,\n} from 'react-bootstrap/esm/helpers';\nimport { defineMessages, useIntl } from 'react-intl';\nimport { Launch } from '../../icons';\nimport Icon from '../Icon';\n// @ts-ignore\nimport { customPropTypeRequirement } from '../utils/propTypes/utils';\n\nexport interface HyperlinkProps extends BsPrefixProps, Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {\n /** specifies the URL */\n destination?: string;\n /** Content of the hyperlink */\n children: React.ReactNode;\n /** Custom class names for the hyperlink */\n className?: string;\n /** Alt text for the icon indicating that this link opens in a new tab, if target=\"_blank\". e.g. _(\"in a new tab\") */\n externalLinkAlternativeText?: string;\n /** Tooltip text for the \"opens in new tab\" icon, if target=\"_blank\". e.g. _(\"Opens in a new tab\"). */\n externalLinkTitle?: string;\n /** type of hyperlink */\n variant?: 'default' | 'muted' | 'brand';\n /** Display the link with an underline. By default, it is only underlined on hover. */\n isInline?: boolean;\n /** specify if we need to show launch Icon. By default, it will be visible. */\n showLaunchIcon?: boolean;\n /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be\n * loaded into the same browsing context as the current one.\n * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent\n * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).\n */\n target?: '_blank' | '_self';\n}\n\nexport type HyperlinkType = ComponentWithAsProp<'a', HyperlinkProps>;\n\nconst messages = defineMessages({\n externalLinkAltText: {\n id: 'Hyperlink.externalLinkAltText',\n defaultMessage: 'in a new tab',\n },\n externalLinkTitle: {\n id: 'Hyperlink.externalLinkTitle',\n defaultMessage: 'Opens in a new tab',\n },\n});\n\nconst Hyperlink = forwardRef<HTMLAnchorElement, HyperlinkProps>(({\n as: Component = 'a',\n className,\n destination,\n children,\n target = '_self',\n onClick,\n externalLinkAlternativeText,\n externalLinkTitle,\n variant = 'default',\n isInline = false,\n showLaunchIcon = true,\n ...attrs\n}, ref) => {\n const intl = useIntl();\n let externalLinkIcon;\n\n if (target === '_blank') {\n const generateRel = () => {\n let { rel } = attrs;\n if (!rel) {\n return 'noopener noreferrer';\n }\n if (!rel.includes('noopener')) {\n rel += ' noopener';\n }\n if (!rel.includes('noreferrer')) {\n rel += ' noreferrer';\n }\n return rel;\n };\n\n // Add this rel attribute to prevent Reverse Tabnabbing\n attrs.rel = generateRel();\n if (showLaunchIcon) {\n externalLinkIcon = (\n <span\n className=\"pgn__hyperlink__external-icon\"\n title={externalLinkTitle || intl.formatMessage(messages.externalLinkTitle)}\n >\n <Icon\n src={Launch}\n screenReaderText={externalLinkAlternativeText || intl.formatMessage(messages.externalLinkAltText)}\n style={{ height: '1em', width: '1em' }}\n data-testid=\"hyperlink-icon\"\n />\n </span>\n );\n }\n }\n\n const additionalProps: Record<string, any> = { ...attrs };\n if (destination) {\n additionalProps.href = destination;\n }\n\n return (\n <Component\n ref={ref}\n className={classNames(\n 'pgn__hyperlink',\n `${variant}-link`,\n {\n 'standalone-link': !isInline,\n 'inline-link': isInline,\n },\n className,\n )}\n target={target}\n onClick={onClick}\n {...additionalProps}\n >\n {children}\n {externalLinkIcon}\n </Component>\n );\n});\n\nHyperlink.propTypes = {\n /** specifies the component element type to render for the hyperlink */\n // @ts-ignore\n as: PropTypes.elementType,\n /** specifies the URL; required iff `as` prop is a standard anchor tag */\n destination: customPropTypeRequirement(\n PropTypes.string,\n ({ as }: { as: React.ElementType }) => as && as === 'a',\n // \"[`destination` is required when]...\"\n 'the `as` prop is a standard anchor element (i.e., \"a\")',\n ),\n /** Content of the hyperlink */\n // @ts-ignore\n children: PropTypes.node.isRequired,\n /** Custom class names for the hyperlink */\n className: PropTypes.string,\n /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be\n * loaded into the same browsing context as the current one.\n * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent\n * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).\n */\n target: PropTypes.oneOf(['_blank', '_self']),\n /** specifies the callback function when the link is clicked */\n onClick: PropTypes.func,\n /** Alt text for the icon indicating that this link opens in a new tab, if target=\"_blank\". e.g. _(\"in a new tab\") */\n externalLinkAlternativeText: PropTypes.string,\n /** Tooltip text for the \"opens in new tab\" icon, if target=\"_blank\". e.g. _(\"Opens in a new tab\"). */\n externalLinkTitle: PropTypes.string,\n /** type of hyperlink */\n variant: PropTypes.oneOf(['default', 'muted', 'brand']),\n /** Display the link with an underline. By default, it is only underlined on hover. */\n isInline: PropTypes.bool,\n /** specify if we need to show launch Icon. By default, it will be visible. */\n showLaunchIcon: PropTypes.bool,\n};\n\nHyperlink.defaultProps = {\n as: 'a',\n className: undefined,\n destination: undefined,\n externalLinkAlternativeText: undefined,\n externalLinkTitle: undefined,\n isInline: false,\n onClick: undefined,\n showLaunchIcon: true,\n target: '_self',\n variant: 'default',\n};\n\nHyperlink.displayName = 'Hyperlink';\n\nexport default Hyperlink;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAKnC,SAASC,cAAc,EAAEC,OAAO,QAAQ,YAAY;AACpD,SAASC,MAAM,QAAQ,aAAa;AACpC,OAAOC,IAAI,MAAM,SAAS;AAC1B;AACA,SAASC,yBAAyB,QAAQ,0BAA0B;AA6BpE,MAAMC,QAAQ,GAAGL,cAAc,CAAC;EAC9BM,mBAAmB,EAAE;IACnBC,EAAE,EAAE,+BAA+B;IACnCC,cAAc,EAAE;EAClB,CAAC;EACDC,iBAAiB,EAAE;IACjBF,EAAE,EAAE,6BAA6B;IACjCC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AAEF,MAAME,SAAS,gBAAGb,UAAU,CAAoC,CAAAc,IAAA,EAa7DC,GAAG,KAAK;EAAA,IAbsD;IAC/DC,EAAE,EAAEC,SAAS,GAAG,GAAG;IACnBC,SAAS;IACTC,WAAW;IACXC,QAAQ;IACRC,MAAM,GAAG,OAAO;IAChBC,OAAO;IACPC,2BAA2B;IAC3BX,iBAAiB;IACjBY,OAAO,GAAG,SAAS;IACnBC,QAAQ,GAAG,KAAK;IAChBC,cAAc,GAAG,IAAI;IACrB,GAAGC;EACL,CAAC,GAAAb,IAAA;EACC,MAAMc,IAAI,GAAGxB,OAAO,CAAC,CAAC;EACtB,IAAIyB,gBAAgB;EAEpB,IAAIR,MAAM,KAAK,QAAQ,EAAE;IACvB,MAAMS,WAAW,GAAGA,CAAA,KAAM;MACxB,IAAI;QAAEC;MAAI,CAAC,GAAGJ,KAAK;MACnB,IAAI,CAACI,GAAG,EAAE;QACR,OAAO,qBAAqB;MAC9B;MACA,IAAI,CAACA,GAAG,CAACC,QAAQ,CAAC,UAAU,CAAC,EAAE;QAC7BD,GAAG,IAAI,WAAW;MACpB;MACA,IAAI,CAACA,GAAG,CAACC,QAAQ,CAAC,YAAY,CAAC,EAAE;QAC/BD,GAAG,IAAI,aAAa;MACtB;MACA,OAAOA,GAAG;IACZ,CAAC;;IAED;IACAJ,KAAK,CAACI,GAAG,GAAGD,WAAW,CAAC,CAAC;IACzB,IAAIJ,cAAc,EAAE;MAClBG,gBAAgB,gBACd9B,KAAA,CAAAkC,aAAA;QACEf,SAAS,EAAC,+BAA+B;QACzCgB,KAAK,EAAEtB,iBAAiB,IAAIgB,IAAI,CAACO,aAAa,CAAC3B,QAAQ,CAACI,iBAAiB;MAAE,gBAE3Eb,KAAA,CAAAkC,aAAA,CAAC3B,IAAI;QACH8B,GAAG,EAAE/B,MAAO;QACZgC,gBAAgB,EAAEd,2BAA2B,IAAIK,IAAI,CAACO,aAAa,CAAC3B,QAAQ,CAACC,mBAAmB,CAAE;QAClG6B,KAAK,EAAE;UAAEC,MAAM,EAAE,KAAK;UAAEC,KAAK,EAAE;QAAM,CAAE;QACvC,eAAY;MAAgB,CAC7B,CACG,CACP;IACH;EACF;EAEA,MAAMC,eAAoC,GAAG;IAAE,GAAGd;EAAM,CAAC;EACzD,IAAIR,WAAW,EAAE;IACfsB,eAAe,CAACC,IAAI,GAAGvB,WAAW;EACpC;EAEA,oBACEpB,KAAA,CAAAkC,aAAA,CAAChB,SAAS;IACRF,GAAG,EAAEA,GAAI;IACTG,SAAS,EAAEhB,UAAU,CACnB,gBAAgB,EAChB,GAAGsB,OAAO,OAAO,EACjB;MACE,iBAAiB,EAAE,CAACC,QAAQ;MAC5B,aAAa,EAAEA;IACjB,CAAC,EACDP,SACF,CAAE;IACFG,MAAM,EAAEA,MAAO;IACfC,OAAO,EAAEA,OAAQ;IAAA,GACbmB;EAAe,GAElBrB,QAAQ,EACRS,gBACQ,CAAC;AAEhB,CAAC,CAAC;AAEFhB,SAAS,CAAC8B,SAAS,GAAG;EACpB;EACA;EACA3B,EAAE,EAAEf,SAAS,CAAC2C,WAAW;EACzB;EACAzB,WAAW,EAAEZ,yBAAyB,CACpCN,SAAS,CAAC4C,MAAM,EAChBC,KAAA;IAAA,IAAC;MAAE9B;IAA8B,CAAC,GAAA8B,KAAA;IAAA,OAAK9B,EAAE,IAAIA,EAAE,KAAK,GAAG;EAAA;EACvD;EACA,wDACF,CAAC;EACD;EACA;EACAI,QAAQ,EAAEnB,SAAS,CAAC8C,IAAI,CAACC,UAAU;EACnC;EACA9B,SAAS,EAAEjB,SAAS,CAAC4C,MAAM;EAC3B;AACF;AACA;AACA;AACA;EACExB,MAAM,EAAEpB,SAAS,CAACgD,KAAK,CAAC,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;EAC5C;EACA3B,OAAO,EAAErB,SAAS,CAACiD,IAAI;EACvB;EACA3B,2BAA2B,EAAEtB,SAAS,CAAC4C,MAAM;EAC7C;EACAjC,iBAAiB,EAAEX,SAAS,CAAC4C,MAAM;EACnC;EACArB,OAAO,EAAEvB,SAAS,CAACgD,KAAK,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;EACvD;EACAxB,QAAQ,EAAExB,SAAS,CAACkD,IAAI;EACxB;EACAzB,cAAc,EAAEzB,SAAS,CAACkD;AAC5B,CAAC;AAEDtC,SAAS,CAACuC,YAAY,GAAG;EACvBpC,EAAE,EAAE,GAAG;EACPE,SAAS,EAAEmC,SAAS;EACpBlC,WAAW,EAAEkC,SAAS;EACtB9B,2BAA2B,EAAE8B,SAAS;EACtCzC,iBAAiB,EAAEyC,SAAS;EAC5B5B,QAAQ,EAAE,KAAK;EACfH,OAAO,EAAE+B,SAAS;EAClB3B,cAAc,EAAE,IAAI;EACpBL,MAAM,EAAE,OAAO;EACfG,OAAO,EAAE;AACX,CAAC;AAEDX,SAAS,CAACyC,WAAW,GAAG,WAAW;AAEnC,eAAezC,SAAS","ignoreList":[]}
|