@transferwise/components 0.0.0-experimental-bc13343 → 0.0.0-experimental-739bfcf
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/build/avatarLayout/AvatarLayout.js +9 -2
- package/build/avatarLayout/AvatarLayout.js.map +1 -1
- package/build/avatarLayout/AvatarLayout.mjs +9 -2
- package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
- package/build/button/Button.js +78 -79
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +79 -80
- package/build/button/Button.mjs.map +1 -1
- package/build/button/Button.resolver.js +78 -0
- package/build/button/Button.resolver.js.map +1 -0
- package/build/button/Button.resolver.mjs +76 -0
- package/build/button/Button.resolver.mjs.map +1 -0
- package/build/button/LegacyButton.js +114 -0
- package/build/button/LegacyButton.js.map +1 -0
- package/build/button/LegacyButton.mjs +112 -0
- package/build/button/LegacyButton.mjs.map +1 -0
- package/build/criticalBanner/CriticalCommsBanner.js +2 -2
- package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.mjs +1 -1
- package/build/header/Header.js +2 -2
- package/build/header/Header.js.map +1 -1
- package/build/header/Header.mjs +1 -1
- package/build/i18n/ja.json +0 -1
- package/build/i18n/ja.json.js +0 -1
- package/build/i18n/ja.json.js.map +1 -1
- package/build/i18n/ja.json.mjs +0 -1
- package/build/i18n/ja.json.mjs.map +1 -1
- package/build/i18n/pt.json +0 -1
- package/build/i18n/pt.json.js +0 -1
- package/build/i18n/pt.json.js.map +1 -1
- package/build/i18n/pt.json.mjs +0 -1
- package/build/i18n/pt.json.mjs.map +1 -1
- package/build/i18n/ru.json +0 -1
- package/build/i18n/ru.json.js +0 -1
- package/build/i18n/ru.json.js.map +1 -1
- package/build/i18n/ru.json.mjs +0 -1
- package/build/i18n/ru.json.mjs.map +1 -1
- package/build/i18n/zh-HK.json +0 -1
- package/build/i18n/zh-HK.json.js +0 -1
- package/build/i18n/zh-HK.json.js.map +1 -1
- package/build/i18n/zh-HK.json.mjs +0 -1
- package/build/i18n/zh-HK.json.mjs.map +1 -1
- package/build/index.js +2 -2
- package/build/index.mjs +1 -1
- package/build/link/Link.js +8 -3
- package/build/link/Link.js.map +1 -1
- package/build/link/Link.mjs +8 -3
- package/build/link/Link.mjs.map +1 -1
- package/build/main.css +250 -0
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js +1 -3
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map +1 -1
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs +1 -3
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs.map +1 -1
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.js +1 -4
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.js.map +1 -1
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs +1 -4
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs.map +1 -1
- package/build/select/Select.js +5 -3
- package/build/select/Select.js.map +1 -1
- package/build/select/Select.mjs +4 -2
- package/build/select/Select.mjs.map +1 -1
- package/build/styles/avatarLayout/AvatarLayout.css +11 -0
- package/build/styles/button/Button.css +231 -15
- package/build/styles/button/Button.vars.css +38 -0
- package/build/styles/button/LegacyButton.css +23 -0
- package/build/styles/main.css +250 -0
- package/build/types/avatarLayout/AvatarLayout.d.ts +1 -2
- package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
- package/build/types/avatarLayout/index.d.ts +1 -0
- package/build/types/avatarLayout/index.d.ts.map +1 -1
- package/build/types/button/Button.d.ts +1 -23
- package/build/types/button/Button.d.ts.map +1 -1
- package/build/types/button/Button.resolver.d.ts +31 -0
- package/build/types/button/Button.resolver.d.ts.map +1 -0
- package/build/types/button/Button.types.d.ts +65 -0
- package/build/types/button/Button.types.d.ts.map +1 -0
- package/build/types/button/LegacyButton.d.ts +30 -0
- package/build/types/button/LegacyButton.d.ts.map +1 -0
- package/build/types/button/index.d.ts +2 -2
- package/build/types/button/index.d.ts.map +1 -1
- package/build/types/link/Link.d.ts +2 -2
- package/build/types/link/Link.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts +5 -1
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +1 -1
- package/build/types/select/Select.d.ts.map +1 -1
- package/build/upload/steps/completeStep/completeStep.js +2 -2
- package/build/upload/steps/completeStep/completeStep.js.map +1 -1
- package/build/upload/steps/completeStep/completeStep.mjs +1 -1
- package/build/upload/steps/processingStep/processingStep.js +2 -2
- package/build/upload/steps/processingStep/processingStep.js.map +1 -1
- package/build/upload/steps/processingStep/processingStep.mjs +1 -1
- package/build/uploadInput/UploadInput.js +3 -3
- package/build/uploadInput/UploadInput.js.map +1 -1
- package/build/uploadInput/UploadInput.mjs +1 -1
- package/package.json +3 -3
- package/src/avatarLayout/AvatarLayout.css +11 -0
- package/src/avatarLayout/AvatarLayout.less +18 -1
- package/src/avatarLayout/AvatarLayout.tsx +11 -3
- package/src/avatarLayout/index.ts +1 -0
- package/src/button/Button.css +231 -15
- package/src/button/Button.less +232 -14
- package/src/button/Button.resolver.tsx +120 -0
- package/src/button/Button.spec.tsx +54 -231
- package/src/button/Button.story.tsx +612 -137
- package/src/button/Button.tsx +88 -132
- package/src/button/Button.types.ts +86 -0
- package/src/button/Button.vars.css +38 -0
- package/src/button/Button.vars.less +46 -0
- package/src/button/LegacyButton.css +23 -0
- package/src/button/LegacyButton.less +24 -0
- package/src/button/LegacyButton.spec.tsx +146 -0
- package/src/button/LegacyButton.story.tsx +224 -0
- package/src/button/LegacyButton.tsx +161 -0
- package/src/button/index.ts +2 -3
- package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +1 -1
- package/src/i18n/ja.json +0 -1
- package/src/i18n/pt.json +0 -1
- package/src/i18n/ru.json +0 -1
- package/src/i18n/zh-HK.json +0 -1
- package/src/inputs/SelectInput.story.tsx +1 -1
- package/src/link/Link.tsx +15 -6
- package/src/main.css +250 -0
- package/src/main.less +1 -0
- package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx +1 -7
- package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.ts +6 -1
- package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +1 -3
- package/src/primitives/PrimitiveButton/src/PrimitiveButton.tsx +1 -8
- package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +2 -5
- package/src/select/Select.tsx +1 -0
- package/src/button/__snapshots__/Button.spec.tsx.snap +0 -309
package/build/i18n/ja.json.js
CHANGED
|
@@ -56,7 +56,6 @@ var ja = {
|
|
|
56
56
|
"neptune.UploadButton.allFileTypes": "すべてのファイル種類",
|
|
57
57
|
"neptune.UploadButton.dropFiles": "ファイルをドロップしてアップロードする",
|
|
58
58
|
"neptune.UploadButton.instructions": "{fileTypes}、{size}MB以下",
|
|
59
|
-
"neptune.UploadButton.maximumFiles": "最大ファイル数:{maxFiles}個",
|
|
60
59
|
"neptune.UploadButton.uploadFile": "ファイルをアップロードする",
|
|
61
60
|
"neptune.UploadButton.uploadFiles": "ファイルをアップロードする",
|
|
62
61
|
"neptune.UploadInput.deleteModalBody": "このファイルを削除すると、当社のシステムからも削除されます。",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ja.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ja.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/i18n/ja.json.mjs
CHANGED
|
@@ -54,7 +54,6 @@ var ja = {
|
|
|
54
54
|
"neptune.UploadButton.allFileTypes": "すべてのファイル種類",
|
|
55
55
|
"neptune.UploadButton.dropFiles": "ファイルをドロップしてアップロードする",
|
|
56
56
|
"neptune.UploadButton.instructions": "{fileTypes}、{size}MB以下",
|
|
57
|
-
"neptune.UploadButton.maximumFiles": "最大ファイル数:{maxFiles}個",
|
|
58
57
|
"neptune.UploadButton.uploadFile": "ファイルをアップロードする",
|
|
59
58
|
"neptune.UploadButton.uploadFiles": "ファイルをアップロードする",
|
|
60
59
|
"neptune.UploadInput.deleteModalBody": "このファイルを削除すると、当社のシステムからも削除されます。",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ja.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ja.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/i18n/pt.json
CHANGED
|
@@ -54,7 +54,6 @@
|
|
|
54
54
|
"neptune.UploadButton.allFileTypes": "Todos os tipos de arquivos",
|
|
55
55
|
"neptune.UploadButton.dropFiles": "Arraste o arquivo para iniciar o envio",
|
|
56
56
|
"neptune.UploadButton.instructions": "{fileTypes}, com menos de {size}MB",
|
|
57
|
-
"neptune.UploadButton.maximumFiles": "Máximo de {maxFiles} arquivos.",
|
|
58
57
|
"neptune.UploadButton.uploadFile": "Enviar arquivo",
|
|
59
58
|
"neptune.UploadButton.uploadFiles": "Enviar arquivos",
|
|
60
59
|
"neptune.UploadInput.deleteModalBody": "Se você remover este arquivo, ele será permanentemente excluído do nosso sistema.",
|
package/build/i18n/pt.json.js
CHANGED
|
@@ -56,7 +56,6 @@ var pt = {
|
|
|
56
56
|
"neptune.UploadButton.allFileTypes": "Todos os tipos de arquivos",
|
|
57
57
|
"neptune.UploadButton.dropFiles": "Arraste o arquivo para iniciar o envio",
|
|
58
58
|
"neptune.UploadButton.instructions": "{fileTypes}, com menos de {size}MB",
|
|
59
|
-
"neptune.UploadButton.maximumFiles": "Máximo de {maxFiles} arquivos.",
|
|
60
59
|
"neptune.UploadButton.uploadFile": "Enviar arquivo",
|
|
61
60
|
"neptune.UploadButton.uploadFiles": "Enviar arquivos",
|
|
62
61
|
"neptune.UploadInput.deleteModalBody": "Se você remover este arquivo, ele será permanentemente excluído do nosso sistema.",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pt.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"pt.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/i18n/pt.json.mjs
CHANGED
|
@@ -54,7 +54,6 @@ var pt = {
|
|
|
54
54
|
"neptune.UploadButton.allFileTypes": "Todos os tipos de arquivos",
|
|
55
55
|
"neptune.UploadButton.dropFiles": "Arraste o arquivo para iniciar o envio",
|
|
56
56
|
"neptune.UploadButton.instructions": "{fileTypes}, com menos de {size}MB",
|
|
57
|
-
"neptune.UploadButton.maximumFiles": "Máximo de {maxFiles} arquivos.",
|
|
58
57
|
"neptune.UploadButton.uploadFile": "Enviar arquivo",
|
|
59
58
|
"neptune.UploadButton.uploadFiles": "Enviar arquivos",
|
|
60
59
|
"neptune.UploadInput.deleteModalBody": "Se você remover este arquivo, ele será permanentemente excluído do nosso sistema.",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pt.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"pt.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/i18n/ru.json
CHANGED
|
@@ -54,7 +54,6 @@
|
|
|
54
54
|
"neptune.UploadButton.allFileTypes": "Все типы файлов",
|
|
55
55
|
"neptune.UploadButton.dropFiles": "Перетащите файл, чтобы начать загрузку",
|
|
56
56
|
"neptune.UploadButton.instructions": "{fileTypes}, не превышающий {size} MB",
|
|
57
|
-
"neptune.UploadButton.maximumFiles": "Макс. количество файлов: {maxFiles}.",
|
|
58
57
|
"neptune.UploadButton.uploadFile": "Загрузить файл",
|
|
59
58
|
"neptune.UploadButton.uploadFiles": "Загрузить файлы",
|
|
60
59
|
"neptune.UploadInput.deleteModalBody": "Удаление этого файла приведет к его удалению из нашей системы.",
|
package/build/i18n/ru.json.js
CHANGED
|
@@ -56,7 +56,6 @@ var ru = {
|
|
|
56
56
|
"neptune.UploadButton.allFileTypes": "Все типы файлов",
|
|
57
57
|
"neptune.UploadButton.dropFiles": "Перетащите файл, чтобы начать загрузку",
|
|
58
58
|
"neptune.UploadButton.instructions": "{fileTypes}, не превышающий {size} MB",
|
|
59
|
-
"neptune.UploadButton.maximumFiles": "Макс. количество файлов: {maxFiles}.",
|
|
60
59
|
"neptune.UploadButton.uploadFile": "Загрузить файл",
|
|
61
60
|
"neptune.UploadButton.uploadFiles": "Загрузить файлы",
|
|
62
61
|
"neptune.UploadInput.deleteModalBody": "Удаление этого файла приведет к его удалению из нашей системы.",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ru.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ru.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/i18n/ru.json.mjs
CHANGED
|
@@ -54,7 +54,6 @@ var ru = {
|
|
|
54
54
|
"neptune.UploadButton.allFileTypes": "Все типы файлов",
|
|
55
55
|
"neptune.UploadButton.dropFiles": "Перетащите файл, чтобы начать загрузку",
|
|
56
56
|
"neptune.UploadButton.instructions": "{fileTypes}, не превышающий {size} MB",
|
|
57
|
-
"neptune.UploadButton.maximumFiles": "Макс. количество файлов: {maxFiles}.",
|
|
58
57
|
"neptune.UploadButton.uploadFile": "Загрузить файл",
|
|
59
58
|
"neptune.UploadButton.uploadFiles": "Загрузить файлы",
|
|
60
59
|
"neptune.UploadInput.deleteModalBody": "Удаление этого файла приведет к его удалению из нашей системы.",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ru.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ru.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/i18n/zh-HK.json
CHANGED
|
@@ -54,7 +54,6 @@
|
|
|
54
54
|
"neptune.UploadButton.allFileTypes": "所有檔案類型",
|
|
55
55
|
"neptune.UploadButton.dropFiles": "拖放檔案以開始上載",
|
|
56
56
|
"neptune.UploadButton.instructions": "{fileTypes},小於{size}MB",
|
|
57
|
-
"neptune.UploadButton.maximumFiles": "最多{maxFiles}個檔案。",
|
|
58
57
|
"neptune.UploadButton.uploadFile": "上載檔案",
|
|
59
58
|
"neptune.UploadButton.uploadFiles": "上載檔案",
|
|
60
59
|
"neptune.UploadInput.deleteModalBody": "移除此檔案會把它從我們的系統中刪除。",
|
package/build/i18n/zh-HK.json.js
CHANGED
|
@@ -56,7 +56,6 @@ var zhHK = {
|
|
|
56
56
|
"neptune.UploadButton.allFileTypes": "所有檔案類型",
|
|
57
57
|
"neptune.UploadButton.dropFiles": "拖放檔案以開始上載",
|
|
58
58
|
"neptune.UploadButton.instructions": "{fileTypes},小於{size}MB",
|
|
59
|
-
"neptune.UploadButton.maximumFiles": "最多{maxFiles}個檔案。",
|
|
60
59
|
"neptune.UploadButton.uploadFile": "上載檔案",
|
|
61
60
|
"neptune.UploadButton.uploadFiles": "上載檔案",
|
|
62
61
|
"neptune.UploadInput.deleteModalBody": "移除此檔案會把它從我們的系統中刪除。",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zh-HK.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"zh-HK.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -54,7 +54,6 @@ var zhHK = {
|
|
|
54
54
|
"neptune.UploadButton.allFileTypes": "所有檔案類型",
|
|
55
55
|
"neptune.UploadButton.dropFiles": "拖放檔案以開始上載",
|
|
56
56
|
"neptune.UploadButton.instructions": "{fileTypes},小於{size}MB",
|
|
57
|
-
"neptune.UploadButton.maximumFiles": "最多{maxFiles}個檔案。",
|
|
58
57
|
"neptune.UploadButton.uploadFile": "上載檔案",
|
|
59
58
|
"neptune.UploadButton.uploadFiles": "上載檔案",
|
|
60
59
|
"neptune.UploadInput.deleteModalBody": "移除此檔案會把它從我們的系統中刪除。",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zh-HK.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"zh-HK.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/index.js
CHANGED
|
@@ -21,7 +21,7 @@ require('react/jsx-runtime');
|
|
|
21
21
|
var Image = require('./image/Image.js');
|
|
22
22
|
require('@transferwise/icons');
|
|
23
23
|
var Body = require('./body/Body.js');
|
|
24
|
-
var
|
|
24
|
+
var Button_resolver = require('./button/Button.resolver.js');
|
|
25
25
|
var IconButton = require('./iconButton/IconButton.js');
|
|
26
26
|
var Carousel = require('./carousel/Carousel.js');
|
|
27
27
|
var Card = require('./card/Card.js');
|
|
@@ -164,7 +164,7 @@ Object.defineProperty(exports, "Breakpoint", {
|
|
|
164
164
|
});
|
|
165
165
|
exports.Image = Image.default;
|
|
166
166
|
exports.Body = Body;
|
|
167
|
-
exports.Button =
|
|
167
|
+
exports.Button = Button_resolver;
|
|
168
168
|
exports.IconButton = IconButton;
|
|
169
169
|
exports.Carousel = Carousel;
|
|
170
170
|
exports.Card = Card;
|
package/build/index.mjs
CHANGED
|
@@ -19,7 +19,7 @@ import 'react/jsx-runtime';
|
|
|
19
19
|
export { default as Image } from './image/Image.mjs';
|
|
20
20
|
import '@transferwise/icons';
|
|
21
21
|
export { default as Body } from './body/Body.mjs';
|
|
22
|
-
export { default as Button } from './button/Button.mjs';
|
|
22
|
+
export { default as Button } from './button/Button.resolver.mjs';
|
|
23
23
|
export { default as IconButton } from './iconButton/IconButton.mjs';
|
|
24
24
|
export { default as Carousel } from './carousel/Carousel.mjs';
|
|
25
25
|
export { default as Card } from './card/Card.mjs';
|
package/build/link/Link.js
CHANGED
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
var icons = require('@transferwise/icons');
|
|
4
4
|
var clsx = require('clsx');
|
|
5
5
|
var reactIntl = require('react-intl');
|
|
6
|
+
require('../primitives/PrimitiveButton/src/PrimitiveButton.js');
|
|
7
|
+
var PrimitiveAnchor = require('../primitives/PrimitiveAnchor/src/PrimitiveAnchor.js');
|
|
6
8
|
var Link_messages = require('./Link.messages.js');
|
|
7
9
|
var jsxRuntime = require('react/jsx-runtime');
|
|
8
10
|
|
|
@@ -16,14 +18,17 @@ const Link = ({
|
|
|
16
18
|
onClick,
|
|
17
19
|
...props
|
|
18
20
|
}) => {
|
|
19
|
-
const isBlank = target === '_blank';
|
|
20
21
|
const {
|
|
21
22
|
formatMessage
|
|
22
23
|
} = reactIntl.useIntl();
|
|
23
|
-
|
|
24
|
+
const isBlank = target === '_blank';
|
|
25
|
+
const classNames = clsx.clsx('np-link', 'd-inline-flex', {
|
|
26
|
+
[`np-text-${type}`]: type
|
|
27
|
+
}, className);
|
|
28
|
+
return /*#__PURE__*/jsxRuntime.jsxs(PrimitiveAnchor, {
|
|
24
29
|
href: href,
|
|
25
30
|
target: target,
|
|
26
|
-
className:
|
|
31
|
+
className: classNames,
|
|
27
32
|
"aria-label": ariaLabel,
|
|
28
33
|
rel: isBlank ? 'noreferrer' : undefined,
|
|
29
34
|
onClick: onClick,
|
package/build/link/Link.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport {
|
|
1
|
+
{"version":3,"file":"Link.js","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor } from '../primitives';\nimport type { PrimitiveAnchorProps } from '../primitives';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = PrimitiveAnchorProps & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n className,\n children,\n href,\n target,\n type,\n 'aria-label': ariaLabel,\n onClick,\n ...props\n}: Props) => {\n const { formatMessage } = useIntl();\n const isBlank = target === '_blank';\n\n const classNames = clsx(\n 'np-link',\n 'd-inline-flex',\n {\n [`np-text-${type}`]: type,\n },\n className,\n );\n\n return (\n <PrimitiveAnchor\n href={href}\n target={target}\n className={classNames}\n aria-label={ariaLabel}\n rel={isBlank ? 'noreferrer' : undefined}\n onClick={onClick}\n {...props}\n >\n {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n </PrimitiveAnchor>\n );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","formatMessage","useIntl","isBlank","classNames","clsx","_jsxs","PrimitiveAnchor","rel","undefined","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;;;AAiBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;EACV,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AACnC,EAAA,MAAMC,OAAO,GAAGP,MAAM,KAAK,QAAQ,CAAA;AAEnC,EAAA,MAAMQ,UAAU,GAAGC,SAAI,CACrB,SAAS,EACT,eAAe,EACf;IACE,CAAC,CAAA,QAAA,EAAWR,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACtB,EACDJ,SAAS,CACV,CAAA;EAED,oBACEa,eAAA,CAACC,eAAe,EAAA;AACdZ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEW,UAAW;AACtB,IAAA,YAAA,EAAYN,SAAU;AACtBU,IAAAA,GAAG,EAAEL,OAAO,GAAG,YAAY,GAAGM,SAAU;AACxCV,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACS,OAAO,iBAAIO,cAAA,CAACC,kBAAgB,EAAA;AAACC,MAAAA,KAAK,EAAEX,aAAa,CAACY,aAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GAC1E,CAAC,CAAA;AAEtB;;;;"}
|
package/build/link/Link.mjs
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { NavigateAway } from '@transferwise/icons';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import { useIntl } from 'react-intl';
|
|
4
|
+
import '../primitives/PrimitiveButton/src/PrimitiveButton.mjs';
|
|
5
|
+
import PrimitiveAnchor from '../primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs';
|
|
4
6
|
import messages from './Link.messages.mjs';
|
|
5
7
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
8
|
|
|
@@ -14,14 +16,17 @@ const Link = ({
|
|
|
14
16
|
onClick,
|
|
15
17
|
...props
|
|
16
18
|
}) => {
|
|
17
|
-
const isBlank = target === '_blank';
|
|
18
19
|
const {
|
|
19
20
|
formatMessage
|
|
20
21
|
} = useIntl();
|
|
21
|
-
|
|
22
|
+
const isBlank = target === '_blank';
|
|
23
|
+
const classNames = clsx('np-link', 'd-inline-flex', {
|
|
24
|
+
[`np-text-${type}`]: type
|
|
25
|
+
}, className);
|
|
26
|
+
return /*#__PURE__*/jsxs(PrimitiveAnchor, {
|
|
22
27
|
href: href,
|
|
23
28
|
target: target,
|
|
24
|
-
className:
|
|
29
|
+
className: classNames,
|
|
25
30
|
"aria-label": ariaLabel,
|
|
26
31
|
rel: isBlank ? 'noreferrer' : undefined,
|
|
27
32
|
onClick: onClick,
|
package/build/link/Link.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.mjs","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport {
|
|
1
|
+
{"version":3,"file":"Link.mjs","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor } from '../primitives';\nimport type { PrimitiveAnchorProps } from '../primitives';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = PrimitiveAnchorProps & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n className,\n children,\n href,\n target,\n type,\n 'aria-label': ariaLabel,\n onClick,\n ...props\n}: Props) => {\n const { formatMessage } = useIntl();\n const isBlank = target === '_blank';\n\n const classNames = clsx(\n 'np-link',\n 'd-inline-flex',\n {\n [`np-text-${type}`]: type,\n },\n className,\n );\n\n return (\n <PrimitiveAnchor\n href={href}\n target={target}\n className={classNames}\n aria-label={ariaLabel}\n rel={isBlank ? 'noreferrer' : undefined}\n onClick={onClick}\n {...props}\n >\n {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n </PrimitiveAnchor>\n );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","formatMessage","useIntl","isBlank","classNames","clsx","_jsxs","PrimitiveAnchor","rel","undefined","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;AAiBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;EACV,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;AACnC,EAAA,MAAMC,OAAO,GAAGP,MAAM,KAAK,QAAQ,CAAA;AAEnC,EAAA,MAAMQ,UAAU,GAAGC,IAAI,CACrB,SAAS,EACT,eAAe,EACf;IACE,CAAC,CAAA,QAAA,EAAWR,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACtB,EACDJ,SAAS,CACV,CAAA;EAED,oBACEa,IAAA,CAACC,eAAe,EAAA;AACdZ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEW,UAAW;AACtB,IAAA,YAAA,EAAYN,SAAU;AACtBU,IAAAA,GAAG,EAAEL,OAAO,GAAG,YAAY,GAAGM,SAAU;AACxCV,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACS,OAAO,iBAAIO,GAAA,CAACC,YAAgB,EAAA;AAACC,MAAAA,KAAK,EAAEX,aAAa,CAACY,QAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GAC1E,CAAC,CAAA;AAEtB;;;;"}
|
package/build/main.css
CHANGED
|
@@ -518,10 +518,18 @@ div.critical-comms .critical-comms-body {
|
|
|
518
518
|
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
519
519
|
mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
520
520
|
}
|
|
521
|
+
[dir="rtl"] .np-avatar-layout-diagonal-mask {
|
|
522
|
+
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
523
|
+
mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
524
|
+
}
|
|
521
525
|
.np-avatar-layout-diagonal-child {
|
|
522
526
|
margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
|
|
523
527
|
margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
|
|
524
528
|
}
|
|
529
|
+
[dir="rtl"] .np-avatar-layout-diagonal-child {
|
|
530
|
+
margin-left: 0;
|
|
531
|
+
margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
|
|
532
|
+
}
|
|
525
533
|
.np-avatar-layout-horizontal {
|
|
526
534
|
width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
|
|
527
535
|
height: var(--np-avatar-layout-size);
|
|
@@ -535,6 +543,9 @@ div.critical-comms .critical-comms-body {
|
|
|
535
543
|
.np-avatar-layout-horizontal-child {
|
|
536
544
|
margin-left: calc(var(--np-avatar-offset) * -1);
|
|
537
545
|
}
|
|
546
|
+
[dir="rtl"] .np-avatar-layout-horizontal-child {
|
|
547
|
+
margin-right: calc(var(--np-avatar-offset) * -1);
|
|
548
|
+
}
|
|
538
549
|
.np-icon-button {
|
|
539
550
|
border: none;
|
|
540
551
|
}
|
|
@@ -705,6 +716,245 @@ div.critical-comms .critical-comms-body {
|
|
|
705
716
|
.np-btn.disabled[class] {
|
|
706
717
|
pointer-events: auto;
|
|
707
718
|
}
|
|
719
|
+
.wds-Button {
|
|
720
|
+
--Button-background: var(--color-interactive-accent);
|
|
721
|
+
--Button-background-hover: var(--color-interactive-accent-hover);
|
|
722
|
+
--Button-background-active: var(--color-interactive-accent-active);
|
|
723
|
+
--Button-color: var(--color-interactive-control);
|
|
724
|
+
--Button-padding: var(--size-8) var(--size-12);
|
|
725
|
+
--Button-border-radius: var(--radius-full);
|
|
726
|
+
--Button-size-small-padding: 5px var(--size-12);
|
|
727
|
+
--Button-size-medium-padding: var(--size-8) var(--size-12);
|
|
728
|
+
--Button-size-large-padding: var(--size-12) var(--size-16);
|
|
729
|
+
--Button-transition-duration: 150ms;
|
|
730
|
+
--Button-transition-easing: ease-in-out;
|
|
731
|
+
--Button-secondary-background: var(--color-interactive-neutral);
|
|
732
|
+
--Button-secondary-background-hover: var(--color-interactive-neutral-hover);
|
|
733
|
+
--Button-secondary-background-active: var(--color-interactive-neutral-active);
|
|
734
|
+
--Button-secondary-color: var(--color-interactive-primary);
|
|
735
|
+
--Button-tertiary-background: var(--color-background-neutral);
|
|
736
|
+
--Button-tertiary-background-hover: var(--color-background-neutral-hover);
|
|
737
|
+
--Button-tertiary-background-active: var(--color-background-neutral-active);
|
|
738
|
+
--Button-tertiary-color: var(--color-content-primary);
|
|
739
|
+
--Button-minimal-background: transparent;
|
|
740
|
+
--Button-minimal-background-hover: var(--color-background-screen-hover);
|
|
741
|
+
--Button-minimal-background-active: var(--color-background-screen-active);
|
|
742
|
+
--Button-minimal-color: var(--color-interactive-primary);
|
|
743
|
+
--Button-primary-negative-background: var(--color-sentiment-negative-primary);
|
|
744
|
+
--Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
|
|
745
|
+
--Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
|
|
746
|
+
--Button-primary-negative-color: var(--color-contrast);
|
|
747
|
+
--Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
|
|
748
|
+
--Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
|
|
749
|
+
--Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
|
|
750
|
+
--Button-secondary-negative-color: var(--color-sentiment-negative-primary);
|
|
751
|
+
}
|
|
752
|
+
.np-theme-personal--bright-green .wds-Button {
|
|
753
|
+
--color-contrast: #FFFFFF;
|
|
754
|
+
--Button-secondary-color: var(--color-interactive-control);
|
|
755
|
+
--Button-secondary-negative-color: var(--color-contrast);
|
|
756
|
+
}
|
|
757
|
+
/* Button Styles */
|
|
758
|
+
.wds-Button {
|
|
759
|
+
display: inline-flex;
|
|
760
|
+
flex: none;
|
|
761
|
+
width: auto;
|
|
762
|
+
align-items: center;
|
|
763
|
+
justify-content: center;
|
|
764
|
+
vertical-align: middle;
|
|
765
|
+
text-align: center;
|
|
766
|
+
-webkit-text-decoration: none;
|
|
767
|
+
text-decoration: none;
|
|
768
|
+
white-space: nowrap;
|
|
769
|
+
word-wrap: break-word;
|
|
770
|
+
-webkit-appearance: none;
|
|
771
|
+
-moz-appearance: none;
|
|
772
|
+
appearance: none;
|
|
773
|
+
background-color: var(--Button-background);
|
|
774
|
+
border: none;
|
|
775
|
+
border-radius: var(--Button-border-radius);
|
|
776
|
+
color: var(--Button-color);
|
|
777
|
+
cursor: pointer;
|
|
778
|
+
padding: var(--Button-padding);
|
|
779
|
+
transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
|
|
780
|
+
}
|
|
781
|
+
.wds-Button:focus {
|
|
782
|
+
-webkit-text-decoration: none;
|
|
783
|
+
text-decoration: none;
|
|
784
|
+
}
|
|
785
|
+
.wds-Button:hover {
|
|
786
|
+
background-color: var(--Button-background-hover);
|
|
787
|
+
-webkit-text-decoration: none;
|
|
788
|
+
text-decoration: none;
|
|
789
|
+
}
|
|
790
|
+
.wds-Button:active {
|
|
791
|
+
background-color: var(--Button-background-active);
|
|
792
|
+
-webkit-text-decoration: none;
|
|
793
|
+
text-decoration: none;
|
|
794
|
+
}
|
|
795
|
+
.wds-Button.wds-Button--disabled,
|
|
796
|
+
.wds-Button:disabled {
|
|
797
|
+
mix-blend-mode: luminosity;
|
|
798
|
+
opacity: 0.45;
|
|
799
|
+
cursor: not-allowed;
|
|
800
|
+
}
|
|
801
|
+
.wds-Button.wds-Button--disabled:hover,
|
|
802
|
+
.wds-Button:disabled:hover,
|
|
803
|
+
.wds-Button.wds-Button--disabled:active,
|
|
804
|
+
.wds-Button:disabled:active {
|
|
805
|
+
background-color: var(--Button-background);
|
|
806
|
+
}
|
|
807
|
+
.wds-Button--secondary {
|
|
808
|
+
--Button-background: var(--Button-secondary-background);
|
|
809
|
+
--Button-background-hover: var(--Button-secondary-background-hover);
|
|
810
|
+
--Button-background-active: var(--Button-secondary-background-active);
|
|
811
|
+
--Button-color: var(--Button-secondary-color);
|
|
812
|
+
}
|
|
813
|
+
.wds-Button--tertiary {
|
|
814
|
+
--Button-background: var(--Button-tertiary-background);
|
|
815
|
+
--Button-background-hover: var(--Button-tertiary-background-hover);
|
|
816
|
+
--Button-background-active: var(--Button-tertiary-background-active);
|
|
817
|
+
--Button-color: var(--Button-tertiary-color);
|
|
818
|
+
}
|
|
819
|
+
.wds-Button--tertiary .wds-Button-icon--end {
|
|
820
|
+
color: var(--color-interactive-primary);
|
|
821
|
+
}
|
|
822
|
+
.wds-Button--minimal {
|
|
823
|
+
--Button-background: var(--Button-minimal-background);
|
|
824
|
+
--Button-background-hover: var(--Button-minimal-background-hover);
|
|
825
|
+
--Button-background-active: var(--Button-minimal-background-active);
|
|
826
|
+
--Button-color: var(--Button-minimal-color);
|
|
827
|
+
-webkit-text-decoration: underline;
|
|
828
|
+
text-decoration: underline;
|
|
829
|
+
text-underline-offset: 3px;
|
|
830
|
+
text-decoration-thickness: 1px;
|
|
831
|
+
}
|
|
832
|
+
.wds-Button--minimal:hover,
|
|
833
|
+
.wds-Button--minimal:hover:active {
|
|
834
|
+
-webkit-text-decoration: underline;
|
|
835
|
+
text-decoration: underline;
|
|
836
|
+
}
|
|
837
|
+
.wds-Button--negative.wds-Button--primary {
|
|
838
|
+
--Button-background: var(--Button-primary-negative-background);
|
|
839
|
+
--Button-background-hover: var(--Button-primary-negative-background-hover);
|
|
840
|
+
--Button-background-active: var(--Button-primary-negative-background-active);
|
|
841
|
+
--Button-color: var(--Button-primary-negative-color);
|
|
842
|
+
}
|
|
843
|
+
.wds-Button--negative.wds-Button--secondary {
|
|
844
|
+
--Button-background: var(--Button-secondary-negative-background);
|
|
845
|
+
--Button-background-hover: var(--Button-secondary-negative-background-hover);
|
|
846
|
+
--Button-background-active: var(--Button-secondary-negative-background-active);
|
|
847
|
+
--Button-color: var(--Button-secondary-negative-color);
|
|
848
|
+
}
|
|
849
|
+
.wds-Button--small {
|
|
850
|
+
--Button-padding: var(--Button-size-small-padding);
|
|
851
|
+
}
|
|
852
|
+
.wds-Button--small .wds-Button-icon--start {
|
|
853
|
+
margin-right: 4px;
|
|
854
|
+
margin-right: var(--size-4);
|
|
855
|
+
}
|
|
856
|
+
[dir="rtl"] .wds-Button--small .wds-Button-icon--start {
|
|
857
|
+
margin-right: 0;
|
|
858
|
+
margin-left: 4px;
|
|
859
|
+
margin-left: var(--size-4);
|
|
860
|
+
}
|
|
861
|
+
.wds-Button--medium {
|
|
862
|
+
--Button-padding: var(--Button-size-medium-padding);
|
|
863
|
+
}
|
|
864
|
+
.wds-Button--large {
|
|
865
|
+
--Button-padding: var(--Button-size-large-padding);
|
|
866
|
+
}
|
|
867
|
+
.wds-Button--block {
|
|
868
|
+
width: 100%;
|
|
869
|
+
}
|
|
870
|
+
.wds-Button-avatars {
|
|
871
|
+
display: inline-flex;
|
|
872
|
+
margin-right: 5px;
|
|
873
|
+
margin-left: calc(4px * -1);
|
|
874
|
+
margin-left: calc(var(--size-4) * -1);
|
|
875
|
+
}
|
|
876
|
+
[dir="rtl"] .wds-Button-avatars {
|
|
877
|
+
margin-right: 0;
|
|
878
|
+
margin-left: 5px;
|
|
879
|
+
}
|
|
880
|
+
.wds-Button-avatars .np-avatar-view .np-avatar-view-content {
|
|
881
|
+
color: var(--Button-color);
|
|
882
|
+
}
|
|
883
|
+
.wds-Button-icon {
|
|
884
|
+
display: inline-block;
|
|
885
|
+
}
|
|
886
|
+
.wds-Button-icon--start {
|
|
887
|
+
margin-right: 8px;
|
|
888
|
+
margin-right: var(--size-8);
|
|
889
|
+
}
|
|
890
|
+
[dir="rtl"] .wds-Button-icon--start {
|
|
891
|
+
margin-right: 0;
|
|
892
|
+
margin-left: 8px;
|
|
893
|
+
margin-left: var(--size-8);
|
|
894
|
+
}
|
|
895
|
+
.wds-Button-icon--end {
|
|
896
|
+
margin-left: 4px;
|
|
897
|
+
margin-left: var(--size-4);
|
|
898
|
+
}
|
|
899
|
+
[dir="rtl"] .wds-Button-icon--end {
|
|
900
|
+
margin-left: 0;
|
|
901
|
+
margin-right: 4px;
|
|
902
|
+
margin-right: var(--size-4);
|
|
903
|
+
}
|
|
904
|
+
.wds-Button-content {
|
|
905
|
+
position: relative;
|
|
906
|
+
}
|
|
907
|
+
.wds-Button-content--loading .wds-Button-label,
|
|
908
|
+
.wds-Button-content--loading .wds-Button-media,
|
|
909
|
+
.wds-Button-content--loading .wds-Button-icon {
|
|
910
|
+
visibility: hidden;
|
|
911
|
+
opacity: 0;
|
|
912
|
+
}
|
|
913
|
+
.wds-Button-label {
|
|
914
|
+
display: flex;
|
|
915
|
+
justify-content: center;
|
|
916
|
+
align-items: center;
|
|
917
|
+
position: relative;
|
|
918
|
+
}
|
|
919
|
+
.wds-Button-loader {
|
|
920
|
+
position: absolute;
|
|
921
|
+
display: flex;
|
|
922
|
+
justify-content: center;
|
|
923
|
+
align-items: center;
|
|
924
|
+
width: 100%;
|
|
925
|
+
height: 100%;
|
|
926
|
+
}
|
|
927
|
+
.wds-Button-loader .process-circle {
|
|
928
|
+
stroke: var(--Button-color);
|
|
929
|
+
}
|
|
930
|
+
/* RTL Styles */
|
|
931
|
+
[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right {
|
|
932
|
+
transform: rotate(180deg);
|
|
933
|
+
}
|
|
934
|
+
[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
|
|
935
|
+
transform: rotate(180deg);
|
|
936
|
+
}
|
|
937
|
+
/* Avatar border transparency */
|
|
938
|
+
/* dark buttons get 20% transparency, light buttons get 12% */
|
|
939
|
+
.wds-Button-avatars .np-circle {
|
|
940
|
+
--circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
|
|
941
|
+
}
|
|
942
|
+
.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
|
|
943
|
+
.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
|
|
944
|
+
.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
|
|
945
|
+
.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
|
|
946
|
+
--circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
|
|
947
|
+
}
|
|
948
|
+
.np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
|
|
949
|
+
.np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
|
|
950
|
+
.np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
|
|
951
|
+
.np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
|
|
952
|
+
--circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
|
|
953
|
+
}
|
|
954
|
+
.np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
|
|
955
|
+
.np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
|
|
956
|
+
--circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
|
|
957
|
+
}
|
|
708
958
|
.np-card {
|
|
709
959
|
overflow: hidden;
|
|
710
960
|
transition-property: transform, box-shadow;
|
|
@@ -19,9 +19,7 @@ const PrimitiveAnchor = /*#__PURE__*/React.forwardRef(({
|
|
|
19
19
|
onKeyDown,
|
|
20
20
|
...props
|
|
21
21
|
}, ref) => {
|
|
22
|
-
const anchorClasses = clsx.clsx(
|
|
23
|
-
'wds-Anchor--disabled': disabled
|
|
24
|
-
}, className);
|
|
22
|
+
const anchorClasses = clsx.clsx(className);
|
|
25
23
|
const handleClick = React.useCallback(event => {
|
|
26
24
|
if (disabled) {
|
|
27
25
|
event.preventDefault();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitiveAnchor.js","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n (\n {\n children,\n className,\n href,\n id,\n disabled = false,\n testId,\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const anchorClasses = clsx(
|
|
1
|
+
{"version":3,"file":"PrimitiveAnchor.js","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n (\n {\n children,\n className,\n href,\n id,\n disabled = false,\n testId,\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const anchorClasses = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (disabled) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are set to handle the `disabled` state for the link:\n *\n * - `aria-disabled`: Exposes the link as disabled to assistive technologies.\n * - `href`: Removed when `disabled` is true to prevent navigation.\n * - `role`: Set to 'link' when `disabled` is true to ensure the element\n * is still exposed as a link.\n *\n * For more details, refer to Scott O'Hara's article on disabling links:\n * https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n const anchorProps = {\n 'aria-disabled': disabled,\n className: anchorClasses,\n 'data-testid': testId,\n href: disabled ? undefined : href,\n id,\n ref,\n role: disabled ? 'link' : undefined,\n rel: props.target === '_blank' ? 'noopener noreferrer' : undefined,\n onClick: handleClick,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <a {...anchorProps}>{children}</a>;\n },\n);\n\nPrimitiveAnchor.displayName = 'PrimitiveAnchor';\n\nexport default PrimitiveAnchor;\n"],"names":["PrimitiveAnchor","forwardRef","children","className","href","id","disabled","testId","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","anchorClasses","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","anchorProps","undefined","role","rel","target","_jsx","displayName"],"mappings":";;;;;;AAaA,MAAMA,eAAe,gBAAGC,gBAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,aAAa,GAAGC,SAAI,CAACd,SAAS,CAAC,CAAA;AAErC,EAAA,MAAMe,WAAW,GAAGC,iBAAW,CAC5BC,KAA0C,IAAI;AAC7C,IAAA,IAAId,QAAQ,EAAE;MACZc,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLb,OAAO,GAAGY,KAAK,CAAC,CAAA;AAClB,KAAA;AACF,GAAC,EACD,CAACd,QAAQ,EAAEE,OAAO,CAAC,CACpB,CAAA;AAED,EAAA,MAAMc,WAAW,GAAGH,iBAAW,CAC5BC,KAA0C,IAAI;IAC7CX,OAAO,GAAGW,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACX,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMc,UAAU,GAAGJ,iBAAW,CAC3BC,KAA0C,IAAI;IAC7CV,MAAM,GAAGU,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACV,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGL,iBAAW,CACjCC,KAA0C,IAAI;IAC7CT,YAAY,GAAGS,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACT,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGN,iBAAW,CACjCC,KAA0C,IAAI;IAC7CR,YAAY,GAAGQ,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACR,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,aAAa,GAAGP,iBAAW,CAC9BC,KAA6C,IAAI;IAChDP,SAAS,GAAGO,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACP,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMc,WAAW,GAAG;AAClB,IAAA,eAAe,EAAErB,QAAQ;AACzBH,IAAAA,SAAS,EAAEa,aAAa;AACxB,IAAA,aAAa,EAAET,MAAM;AACrBH,IAAAA,IAAI,EAAEE,QAAQ,GAAGsB,SAAS,GAAGxB,IAAI;IACjCC,EAAE;IACFU,GAAG;AACHc,IAAAA,IAAI,EAAEvB,QAAQ,GAAG,MAAM,GAAGsB,SAAS;IACnCE,GAAG,EAAEhB,KAAK,CAACiB,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAGH,SAAS;AAClEpB,IAAAA,OAAO,EAAEU,WAAW;AACpBT,IAAAA,OAAO,EAAEa,WAAW;AACpBZ,IAAAA,MAAM,EAAEa,UAAU;AAClBZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,SAAS,EAAEa,aAAa;IACxB,GAAGZ,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOkB,cAAA,CAAA,GAAA,EAAA;AAAA,IAAA,GAAOL,WAAW;AAAAzB,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAI,CAAC,CAAA;AAC3C,CAAC,EACF;AAEDF,eAAe,CAACiC,WAAW,GAAG,iBAAiB;;;;"}
|
|
@@ -17,9 +17,7 @@ const PrimitiveAnchor = /*#__PURE__*/forwardRef(({
|
|
|
17
17
|
onKeyDown,
|
|
18
18
|
...props
|
|
19
19
|
}, ref) => {
|
|
20
|
-
const anchorClasses = clsx(
|
|
21
|
-
'wds-Anchor--disabled': disabled
|
|
22
|
-
}, className);
|
|
20
|
+
const anchorClasses = clsx(className);
|
|
23
21
|
const handleClick = useCallback(event => {
|
|
24
22
|
if (disabled) {
|
|
25
23
|
event.preventDefault();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitiveAnchor.mjs","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n (\n {\n children,\n className,\n href,\n id,\n disabled = false,\n testId,\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const anchorClasses = clsx(
|
|
1
|
+
{"version":3,"file":"PrimitiveAnchor.mjs","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n (\n {\n children,\n className,\n href,\n id,\n disabled = false,\n testId,\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const anchorClasses = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (disabled) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are set to handle the `disabled` state for the link:\n *\n * - `aria-disabled`: Exposes the link as disabled to assistive technologies.\n * - `href`: Removed when `disabled` is true to prevent navigation.\n * - `role`: Set to 'link' when `disabled` is true to ensure the element\n * is still exposed as a link.\n *\n * For more details, refer to Scott O'Hara's article on disabling links:\n * https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n const anchorProps = {\n 'aria-disabled': disabled,\n className: anchorClasses,\n 'data-testid': testId,\n href: disabled ? undefined : href,\n id,\n ref,\n role: disabled ? 'link' : undefined,\n rel: props.target === '_blank' ? 'noopener noreferrer' : undefined,\n onClick: handleClick,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <a {...anchorProps}>{children}</a>;\n },\n);\n\nPrimitiveAnchor.displayName = 'PrimitiveAnchor';\n\nexport default PrimitiveAnchor;\n"],"names":["PrimitiveAnchor","forwardRef","children","className","href","id","disabled","testId","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","anchorClasses","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","anchorProps","undefined","role","rel","target","_jsx","displayName"],"mappings":";;;;AAaA,MAAMA,eAAe,gBAAGC,UAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,aAAa,GAAGC,IAAI,CAACd,SAAS,CAAC,CAAA;AAErC,EAAA,MAAMe,WAAW,GAAGC,WAAW,CAC5BC,KAA0C,IAAI;AAC7C,IAAA,IAAId,QAAQ,EAAE;MACZc,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLb,OAAO,GAAGY,KAAK,CAAC,CAAA;AAClB,KAAA;AACF,GAAC,EACD,CAACd,QAAQ,EAAEE,OAAO,CAAC,CACpB,CAAA;AAED,EAAA,MAAMc,WAAW,GAAGH,WAAW,CAC5BC,KAA0C,IAAI;IAC7CX,OAAO,GAAGW,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACX,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMc,UAAU,GAAGJ,WAAW,CAC3BC,KAA0C,IAAI;IAC7CV,MAAM,GAAGU,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACV,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGL,WAAW,CACjCC,KAA0C,IAAI;IAC7CT,YAAY,GAAGS,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACT,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGN,WAAW,CACjCC,KAA0C,IAAI;IAC7CR,YAAY,GAAGQ,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACR,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,aAAa,GAAGP,WAAW,CAC9BC,KAA6C,IAAI;IAChDP,SAAS,GAAGO,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACP,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMc,WAAW,GAAG;AAClB,IAAA,eAAe,EAAErB,QAAQ;AACzBH,IAAAA,SAAS,EAAEa,aAAa;AACxB,IAAA,aAAa,EAAET,MAAM;AACrBH,IAAAA,IAAI,EAAEE,QAAQ,GAAGsB,SAAS,GAAGxB,IAAI;IACjCC,EAAE;IACFU,GAAG;AACHc,IAAAA,IAAI,EAAEvB,QAAQ,GAAG,MAAM,GAAGsB,SAAS;IACnCE,GAAG,EAAEhB,KAAK,CAACiB,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAGH,SAAS;AAClEpB,IAAAA,OAAO,EAAEU,WAAW;AACpBT,IAAAA,OAAO,EAAEa,WAAW;AACpBZ,IAAAA,MAAM,EAAEa,UAAU;AAClBZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,SAAS,EAAEa,aAAa;IACxB,GAAGZ,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOkB,GAAA,CAAA,GAAA,EAAA;AAAA,IAAA,GAAOL,WAAW;AAAAzB,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAI,CAAC,CAAA;AAC3C,CAAC,EACF;AAEDF,eAAe,CAACiC,WAAW,GAAG,iBAAiB;;;;"}
|