@transferwise/components 46.95.2 → 46.96.1
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/alert/Alert.js +18 -6
- package/build/alert/Alert.js.map +1 -1
- package/build/alert/Alert.mjs +18 -6
- package/build/alert/Alert.mjs.map +1 -1
- package/build/link/Link.js +32 -4
- package/build/link/Link.js.map +1 -1
- package/build/link/Link.mjs +32 -4
- package/build/link/Link.mjs.map +1 -1
- package/build/main.css +18 -17
- package/build/nudge/Nudge.js +8 -4
- package/build/nudge/Nudge.js.map +1 -1
- package/build/nudge/Nudge.mjs +8 -4
- package/build/nudge/Nudge.mjs.map +1 -1
- package/build/promoCard/PromoCardIndicator.js +6 -5
- package/build/promoCard/PromoCardIndicator.js.map +1 -1
- package/build/promoCard/PromoCardIndicator.mjs +6 -5
- package/build/promoCard/PromoCardIndicator.mjs.map +1 -1
- package/build/styles/inputs/Input.css +2 -0
- package/build/styles/inputs/TextArea.css +2 -0
- package/build/styles/link/Link.css +2 -1
- package/build/styles/main.css +18 -17
- package/build/styles/popover/Popover.css +2 -0
- package/build/styles/statusIcon/StatusIcon.css +12 -1
- package/build/styles/stepper/Stepper.css +0 -7
- package/build/styles/summary/Summary.css +0 -4
- package/build/summary/Summary.js +8 -4
- package/build/summary/Summary.js.map +1 -1
- package/build/summary/Summary.mjs +8 -4
- package/build/summary/Summary.mjs.map +1 -1
- package/build/types/alert/Alert.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/nudge/Nudge.d.ts +2 -2
- package/build/types/nudge/Nudge.d.ts.map +1 -1
- package/build/types/summary/Summary.d.ts +2 -2
- package/build/types/summary/Summary.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/alert/Alert.tsx +27 -10
- package/src/dateLookup/DateLookup.less +0 -1
- package/src/decision/Decision.spec.tsx +2 -2
- package/src/decision/Decision.story.tsx +10 -46
- package/src/flowNavigation/FlowNavigation.spec.js +3 -7
- package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +8 -4
- package/src/inputs/Input.css +2 -0
- package/src/inputs/TextArea.css +2 -0
- package/src/link/Link.css +2 -1
- package/src/link/Link.less +1 -1
- package/src/link/Link.spec.tsx +32 -1
- package/src/link/Link.story.tsx +12 -0
- package/src/link/Link.tsx +17 -6
- package/src/main.css +18 -17
- package/src/navigationOption/NavigationOption.story.tsx +30 -53
- package/src/nudge/Nudge.tsx +15 -3
- package/src/overlayHeader/OverlayHeader.spec.tsx +5 -8
- package/src/overlayHeader/__snapshots__/OverlayHeader.spec.tsx.snap +4 -2
- package/src/popover/Popover.css +2 -0
- package/src/promoCard/PromoCard.spec.tsx +3 -1
- package/src/promoCard/PromoCardIndicator.tsx +5 -5
- package/src/statusIcon/StatusIcon.css +12 -1
- package/src/statusIcon/StatusIcon.less +11 -1
- package/src/statusIcon/StatusIcon.story.tsx +37 -30
- package/src/stepper/Stepper.css +0 -7
- package/src/stepper/Stepper.less +0 -8
- package/src/summary/Summary.css +0 -4
- package/src/summary/Summary.less +0 -2
- package/src/summary/Summary.tsx +14 -3
- package/src/tile/Tile.story.tsx +2 -6
- package/src/title/Title.test.story.tsx +25 -0
- package/build/common/action/Action.js +0 -53
- package/build/common/action/Action.js.map +0 -1
- package/build/common/action/Action.mjs +0 -51
- package/build/common/action/Action.mjs.map +0 -1
- package/build/types/common/action/Action.d.ts +0 -18
- package/build/types/common/action/Action.d.ts.map +0 -1
- package/src/common/action/Action.tsx +0 -74
package/src/nudge/Nudge.tsx
CHANGED
|
@@ -6,7 +6,7 @@ import Body from '../body';
|
|
|
6
6
|
import { Typography } from '../common';
|
|
7
7
|
import { CloseButton } from '../common/closeButton';
|
|
8
8
|
import Link from '../link';
|
|
9
|
-
import {
|
|
9
|
+
import type { AlertAction } from '../alert';
|
|
10
10
|
|
|
11
11
|
// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too
|
|
12
12
|
export const STORAGE_NAME = 'dismissedNudges';
|
|
@@ -52,7 +52,7 @@ type BaseProps = {
|
|
|
52
52
|
/** Fired when the user clicks on close button */
|
|
53
53
|
onDismiss?: () => void;
|
|
54
54
|
/** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */
|
|
55
|
-
action?:
|
|
55
|
+
action?: AlertAction;
|
|
56
56
|
className?: string;
|
|
57
57
|
};
|
|
58
58
|
|
|
@@ -151,6 +151,7 @@ const Nudge = ({
|
|
|
151
151
|
<Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>
|
|
152
152
|
{title}
|
|
153
153
|
</Body>
|
|
154
|
+
{/* Merge these two Link instances into one */}
|
|
154
155
|
{link && (
|
|
155
156
|
<Link
|
|
156
157
|
href={href}
|
|
@@ -161,7 +162,18 @@ const Nudge = ({
|
|
|
161
162
|
{link}
|
|
162
163
|
</Link>
|
|
163
164
|
)}
|
|
164
|
-
{action &&
|
|
165
|
+
{action && (
|
|
166
|
+
<Link
|
|
167
|
+
href={action.href}
|
|
168
|
+
target={action.target}
|
|
169
|
+
className="m-t-1"
|
|
170
|
+
aria-label={action['aria-label']}
|
|
171
|
+
type={Typography.LINK_LARGE}
|
|
172
|
+
onClick={action.onClick}
|
|
173
|
+
>
|
|
174
|
+
{action.text}
|
|
175
|
+
</Link>
|
|
176
|
+
)}
|
|
165
177
|
</div>
|
|
166
178
|
{onDismiss || persistDismissal ? (
|
|
167
179
|
<CloseButton className="wds-nudge-control" size="sm" onClick={handleOnDismiss} />
|
|
@@ -1,16 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Size } from '../common';
|
|
3
|
-
import { render } from '../test-utils';
|
|
1
|
+
import { render, mockMatchMedia } from '../test-utils';
|
|
4
2
|
|
|
5
3
|
import OverlayHeader from '.';
|
|
4
|
+
import AvatarView from '../avatarView';
|
|
5
|
+
|
|
6
|
+
mockMatchMedia();
|
|
6
7
|
|
|
7
8
|
describe('OverlayHeader', () => {
|
|
8
9
|
const props = {
|
|
9
|
-
avatar:
|
|
10
|
-
<Avatar type={AvatarType.INITIALS} size={Size.MEDIUM}>
|
|
11
|
-
TM
|
|
12
|
-
</Avatar>
|
|
13
|
-
),
|
|
10
|
+
avatar: <AvatarView profileName="Tim Morris" />,
|
|
14
11
|
logo: <img alt="logo_desktop" src="img_desktop" width="138" height="24" />,
|
|
15
12
|
onClose: jest.fn(),
|
|
16
13
|
};
|
|
@@ -18,10 +18,12 @@ exports[`OverlayHeader renders as expected 1`] = `
|
|
|
18
18
|
class="d-flex align-items-center order-2"
|
|
19
19
|
>
|
|
20
20
|
<div
|
|
21
|
-
class="
|
|
21
|
+
class="np-circle d-flex align-items-center justify-content-center np-avatar-view np-avatar-view-non-interactive"
|
|
22
|
+
style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
|
|
22
23
|
>
|
|
23
24
|
<div
|
|
24
|
-
class="
|
|
25
|
+
class="np-circle np-circle-border d-flex align-items-center justify-content-center np-avatar-view-content"
|
|
26
|
+
style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
|
|
25
27
|
>
|
|
26
28
|
TM
|
|
27
29
|
</div>
|
package/src/popover/Popover.css
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
import { render, fireEvent, screen } from '../test-utils';
|
|
1
|
+
import { render, fireEvent, screen, mockMatchMedia } from '../test-utils';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
|
|
4
4
|
import PromoCard, { PromoCardProps, PromoCardCheckedProps, PromoCardLinkProps } from './PromoCard';
|
|
5
5
|
|
|
6
|
+
mockMatchMedia();
|
|
7
|
+
|
|
6
8
|
describe('PromoCard', () => {
|
|
7
9
|
const defaultProps = {
|
|
8
10
|
title: 'Test Title',
|
|
@@ -2,9 +2,9 @@ import { ArrowRight, Check, Download } from '@transferwise/icons';
|
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import { ReactElement, ReactNode } from 'react';
|
|
4
4
|
|
|
5
|
-
import Avatar, { AvatarType } from '../avatar';
|
|
6
5
|
import Body from '../body';
|
|
7
6
|
import { Typography } from '../common';
|
|
7
|
+
import AvatarView from '../avatarView';
|
|
8
8
|
|
|
9
9
|
export type PromoCardIndicatorProps = {
|
|
10
10
|
/** Optional class name(s) to add to the indicator container. */
|
|
@@ -69,14 +69,14 @@ const PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({
|
|
|
69
69
|
</Body>
|
|
70
70
|
)}
|
|
71
71
|
{icon && (
|
|
72
|
-
<
|
|
73
|
-
|
|
72
|
+
<AvatarView
|
|
73
|
+
interactive
|
|
74
74
|
size={isSmall ? 40 : 56}
|
|
75
|
-
backgroundColor
|
|
75
|
+
style={{ backgroundColor: 'var(--Card-indicator-icon-background-color)' }}
|
|
76
76
|
className="np-Card-indicatorIcon"
|
|
77
77
|
>
|
|
78
78
|
{IconComponent ? <IconComponent size={24} aria-hidden="true" /> : icon}
|
|
79
|
-
</
|
|
79
|
+
</AvatarView>
|
|
80
80
|
)}
|
|
81
81
|
{children}
|
|
82
82
|
</div>
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
.status-circle .light {
|
|
2
|
-
color: var(--color-contrast);
|
|
2
|
+
color: var(--color-contrast-overlay);
|
|
3
|
+
}
|
|
4
|
+
.np-theme-personal--bright-green .status-circle .light {
|
|
5
|
+
color: var(--color-white);
|
|
3
6
|
}
|
|
4
7
|
.status-circle .dark {
|
|
5
8
|
color: #37517e;
|
|
@@ -17,6 +20,10 @@
|
|
|
17
20
|
.status-circle.error {
|
|
18
21
|
background-color: var(--color-sentiment-negative);
|
|
19
22
|
}
|
|
23
|
+
.status-circle.negative .status-icon,
|
|
24
|
+
.status-circle.error .status-icon {
|
|
25
|
+
color: var(--color-sentiment-negative-secondary);
|
|
26
|
+
}
|
|
20
27
|
.status-circle.neutral {
|
|
21
28
|
background-color: #5d7079;
|
|
22
29
|
background-color: var(--color-content-secondary);
|
|
@@ -25,3 +32,7 @@
|
|
|
25
32
|
.status-circle.success {
|
|
26
33
|
background-color: var(--color-sentiment-positive);
|
|
27
34
|
}
|
|
35
|
+
.status-circle.positive .status-icon,
|
|
36
|
+
.status-circle.success .status-icon {
|
|
37
|
+
color: var(--color-sentiment-positive-secondary);
|
|
38
|
+
}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
.status-circle {
|
|
2
2
|
.light {
|
|
3
|
-
color: var(--color-contrast);
|
|
3
|
+
color: var(--color-contrast-overlay);
|
|
4
|
+
|
|
5
|
+
.np-theme-personal--bright-green & {
|
|
6
|
+
color: var(--color-white);
|
|
7
|
+
}
|
|
4
8
|
}
|
|
5
9
|
|
|
6
10
|
.dark {
|
|
@@ -22,6 +26,9 @@
|
|
|
22
26
|
.status-circle.negative,
|
|
23
27
|
.status-circle.error {
|
|
24
28
|
background-color: var(--color-sentiment-negative);
|
|
29
|
+
.status-icon {
|
|
30
|
+
color: var(--color-sentiment-negative-secondary);
|
|
31
|
+
}
|
|
25
32
|
}
|
|
26
33
|
|
|
27
34
|
.status-circle.neutral {
|
|
@@ -31,4 +38,7 @@
|
|
|
31
38
|
.status-circle.positive,
|
|
32
39
|
.status-circle.success {
|
|
33
40
|
background-color: var(--color-sentiment-positive);
|
|
41
|
+
.status-icon {
|
|
42
|
+
color: var(--color-sentiment-positive-secondary);
|
|
43
|
+
}
|
|
34
44
|
}
|
|
@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
|
|
|
3
3
|
import { Sentiment, Size } from '../common';
|
|
4
4
|
|
|
5
5
|
import StatusIcon from './StatusIcon';
|
|
6
|
+
import { storyConfig } from '../test-utils';
|
|
6
7
|
|
|
7
8
|
export default {
|
|
8
9
|
component: StatusIcon,
|
|
@@ -28,36 +29,42 @@ export const Presentational: Story = {
|
|
|
28
29
|
},
|
|
29
30
|
};
|
|
30
31
|
|
|
31
|
-
export const Variants
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
32
|
+
export const Variants = storyConfig(
|
|
33
|
+
{
|
|
34
|
+
parameters: {
|
|
35
|
+
padding: '0',
|
|
36
|
+
},
|
|
37
|
+
render: () => (
|
|
38
|
+
<span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
|
|
39
|
+
{[
|
|
40
|
+
Sentiment.POSITIVE,
|
|
41
|
+
Sentiment.NEGATIVE,
|
|
42
|
+
Sentiment.WARNING,
|
|
43
|
+
Sentiment.NEUTRAL,
|
|
44
|
+
Sentiment.PENDING,
|
|
45
|
+
].map((sentiment) => {
|
|
46
|
+
return (
|
|
47
|
+
<span
|
|
48
|
+
key={sentiment}
|
|
49
|
+
style={{
|
|
50
|
+
display: 'flex',
|
|
51
|
+
justifyContent: 'space-between',
|
|
52
|
+
flexDirection: 'column',
|
|
53
|
+
minHeight: '150px',
|
|
54
|
+
alignItems: 'center',
|
|
55
|
+
}}
|
|
56
|
+
>
|
|
57
|
+
{([16, 24, 32, 40, 48, 56, 72] as const).map((size) => {
|
|
58
|
+
return <StatusIcon key={size} size={size} sentiment={sentiment} />;
|
|
59
|
+
})}
|
|
60
|
+
</span>
|
|
61
|
+
);
|
|
62
|
+
})}
|
|
63
|
+
</span>
|
|
64
|
+
),
|
|
65
|
+
},
|
|
66
|
+
{ variants: ['default', 'dark', 'bright-green', 'forest-green'] },
|
|
67
|
+
);
|
|
61
68
|
|
|
62
69
|
export const LegacySizes: Story = {
|
|
63
70
|
render: () => (
|
package/src/stepper/Stepper.css
CHANGED
package/src/stepper/Stepper.less
CHANGED
package/src/summary/Summary.css
CHANGED
|
@@ -74,10 +74,6 @@
|
|
|
74
74
|
.np-summary__action {
|
|
75
75
|
margin-top: 4px;
|
|
76
76
|
margin-top: var(--size-4);
|
|
77
|
-
font-size: 0.875rem;
|
|
78
|
-
font-size: var(--font-size-14);
|
|
79
|
-
font-weight: 600;
|
|
80
|
-
font-weight: var(--font-weight-semi-bold);
|
|
81
77
|
}
|
|
82
78
|
.np-summary + .np-summary {
|
|
83
79
|
margin-top: 24px;
|
package/src/summary/Summary.less
CHANGED
package/src/summary/Summary.tsx
CHANGED
|
@@ -21,7 +21,8 @@ import Info, { InfoProps } from '../info';
|
|
|
21
21
|
import StatusIcon from '../statusIcon';
|
|
22
22
|
|
|
23
23
|
import messages from './Summary.messages';
|
|
24
|
-
import
|
|
24
|
+
import Link from '../link';
|
|
25
|
+
import type { AlertAction } from '../alert';
|
|
25
26
|
|
|
26
27
|
const BadgeIcons = {
|
|
27
28
|
[Status.DONE]: CheckCircleIcon,
|
|
@@ -43,7 +44,7 @@ export interface Props {
|
|
|
43
44
|
/**
|
|
44
45
|
* Action displayed at the bottom of the Summary
|
|
45
46
|
*/
|
|
46
|
-
action?:
|
|
47
|
+
action?: AlertAction;
|
|
47
48
|
/**
|
|
48
49
|
* Decides which html element should wrap the Summary
|
|
49
50
|
*/
|
|
@@ -168,7 +169,17 @@ const Summary = ({
|
|
|
168
169
|
{description}
|
|
169
170
|
</Body>
|
|
170
171
|
)}
|
|
171
|
-
{action &&
|
|
172
|
+
{action && (
|
|
173
|
+
<Link
|
|
174
|
+
href={action.href}
|
|
175
|
+
target={action.target}
|
|
176
|
+
className="np-summary__action"
|
|
177
|
+
aria-label={action['aria-label']}
|
|
178
|
+
onClick={action.onClick}
|
|
179
|
+
>
|
|
180
|
+
{action.text}
|
|
181
|
+
</Link>
|
|
182
|
+
)}
|
|
172
183
|
</div>
|
|
173
184
|
{info && (
|
|
174
185
|
<Info
|
package/src/tile/Tile.story.tsx
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { action } from '@storybook/addon-actions';
|
|
2
2
|
import { text, boolean } from '@storybook/addon-knobs';
|
|
3
3
|
|
|
4
|
-
import Avatar from '../avatar';
|
|
5
4
|
import { Size } from '../common';
|
|
6
5
|
|
|
7
6
|
import Tile from '.';
|
|
7
|
+
import AvatarView from '../avatarView';
|
|
8
8
|
|
|
9
9
|
export default {
|
|
10
10
|
component: Tile,
|
|
@@ -41,11 +41,7 @@ export const Basic = () => {
|
|
|
41
41
|
description={description}
|
|
42
42
|
disabled={disabled}
|
|
43
43
|
href="#href1"
|
|
44
|
-
media={
|
|
45
|
-
<Avatar size="md" type="initials">
|
|
46
|
-
HM
|
|
47
|
-
</Avatar>
|
|
48
|
-
}
|
|
44
|
+
media={<AvatarView profileName="Henry Morris" />}
|
|
49
45
|
size={medium ? Size.MEDIUM : Size.SMALL}
|
|
50
46
|
title={title}
|
|
51
47
|
onClick={action('onClick')}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Typography } from '../common/propsValues/typography';
|
|
2
|
+
import Modal from '../modal';
|
|
3
|
+
import { lorem1000 } from '../test-utils';
|
|
4
|
+
|
|
5
|
+
import Title from './Title';
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
component: Title,
|
|
9
|
+
title: 'Typography/Title/Tests',
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export const Hyphenation = () => {
|
|
13
|
+
return (
|
|
14
|
+
<Modal
|
|
15
|
+
open
|
|
16
|
+
body={
|
|
17
|
+
<Title type={Typography.TITLE_SCREEN} style={{ maxWidth: '600px' }}>
|
|
18
|
+
This Screen Title is mostly one very long word and it hyphenates{' '}
|
|
19
|
+
{lorem1000.replaceAll(' ', '')}
|
|
20
|
+
</Title>
|
|
21
|
+
}
|
|
22
|
+
onClose={() => {}}
|
|
23
|
+
/>
|
|
24
|
+
);
|
|
25
|
+
};
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var clsx = require('clsx');
|
|
4
|
-
var Link = require('../../link/Link.js');
|
|
5
|
-
var typography = require('../propsValues/typography.js');
|
|
6
|
-
var control = require('../propsValues/control.js');
|
|
7
|
-
var Button_resolver = require('../../button/Button.resolver.js');
|
|
8
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
9
|
-
|
|
10
|
-
function Action({
|
|
11
|
-
action,
|
|
12
|
-
className,
|
|
13
|
-
variant = 'button',
|
|
14
|
-
sentiment = 'default',
|
|
15
|
-
priority = control.Priority.SECONDARY
|
|
16
|
-
}) {
|
|
17
|
-
if ('href' in action) {
|
|
18
|
-
return /*#__PURE__*/jsxRuntime.jsx(Link.default, {
|
|
19
|
-
href: action.href,
|
|
20
|
-
className: className,
|
|
21
|
-
"aria-label": action['aria-label'],
|
|
22
|
-
target: action.target,
|
|
23
|
-
type: typography.Typography.LINK_LARGE,
|
|
24
|
-
onClick: action.onClick,
|
|
25
|
-
children: action.text
|
|
26
|
-
});
|
|
27
|
-
}
|
|
28
|
-
switch (variant) {
|
|
29
|
-
case 'action-button':
|
|
30
|
-
return /*#__PURE__*/jsxRuntime.jsx(Button_resolver.default, {
|
|
31
|
-
v2: true,
|
|
32
|
-
size: "sm",
|
|
33
|
-
sentiment: sentiment,
|
|
34
|
-
"aria-label": action['aria-label'],
|
|
35
|
-
priority: priority,
|
|
36
|
-
className: clsx.clsx(className),
|
|
37
|
-
onClick: action.onClick,
|
|
38
|
-
children: action.text
|
|
39
|
-
});
|
|
40
|
-
case 'button':
|
|
41
|
-
default:
|
|
42
|
-
return /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
43
|
-
type: "button",
|
|
44
|
-
"aria-label": action['aria-label'],
|
|
45
|
-
className: clsx.clsx('btn-unstyled np-text-link-large', className),
|
|
46
|
-
onClick: action.onClick,
|
|
47
|
-
children: action.text
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
exports.Action = Action;
|
|
53
|
-
//# sourceMappingURL=Action.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Action.js","sources":["../../../src/common/action/Action.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport Link from '../../link';\nimport { Typography } from '../propsValues/typography';\nimport { Priority } from '../propsValues/control';\nimport Button from '../../button';\nimport { ButtonPriority, ButtonSentiment } from '../../button/Button.types';\n\nexport type ActionOptions = {\n 'aria-label'?: string;\n href?: string;\n target?: string;\n text: React.ReactNode;\n onClick?: () => void;\n};\n\ntype Props = {\n action: ActionOptions;\n className?: string;\n variant?: 'button' | 'action-button';\n sentiment?: ButtonSentiment;\n priority?: ButtonPriority;\n};\n\nexport function Action({\n action,\n className,\n variant = 'button',\n sentiment = 'default',\n priority = Priority.SECONDARY,\n}: Props) {\n if ('href' in action) {\n return (\n <Link\n href={action.href}\n className={className}\n aria-label={action['aria-label']}\n target={action.target}\n type={Typography.LINK_LARGE}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n }\n\n switch (variant) {\n case 'action-button':\n return (\n <Button\n v2\n size=\"sm\"\n sentiment={sentiment}\n aria-label={action['aria-label']}\n priority={priority}\n className={clsx(className)}\n onClick={action.onClick}\n >\n {action.text}\n </Button>\n );\n case 'button':\n default:\n return (\n <button\n type=\"button\"\n aria-label={action['aria-label']}\n className={clsx('btn-unstyled np-text-link-large', className)}\n onClick={action.onClick}\n >\n {action.text}\n </button>\n );\n }\n}\n"],"names":["Action","action","className","variant","sentiment","priority","Priority","SECONDARY","_jsx","Link","href","target","type","Typography","LINK_LARGE","onClick","children","text","Button","v2","size","clsx"],"mappings":";;;;;;;;;AAuBM,SAAUA,MAAMA,CAAC;EACrBC,MAAM;EACNC,SAAS;AACTC,EAAAA,OAAO,GAAG,QAAQ;AAClBC,EAAAA,SAAS,GAAG,SAAS;EACrBC,QAAQ,GAAGC,gBAAQ,CAACC,SAAAA;AACd,CAAA,EAAA;EACN,IAAI,MAAM,IAAIN,MAAM,EAAE;IACpB,oBACEO,cAAA,CAACC,YAAI,EAAA;MACHC,IAAI,EAAET,MAAM,CAACS,IAAK;AAClBR,MAAAA,SAAS,EAAEA,SAAU;MACrB,YAAYD,EAAAA,MAAM,CAAC,YAAY,CAAE;MACjCU,MAAM,EAAEV,MAAM,CAACU,MAAO;MACtBC,IAAI,EAAEC,qBAAU,CAACC,UAAW;MAC5BC,OAAO,EAAEd,MAAM,CAACc,OAAQ;MAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;AAEA,EAAA,QAAQd,OAAO;AACb,IAAA,KAAK,eAAe;MAClB,oBACEK,cAAA,CAACU,uBAAM,EAAA;QACLC,EAAE,EAAA,IAAA;AACFC,QAAAA,IAAI,EAAC,IAAI;AACThB,QAAAA,SAAS,EAAEA,SAAU;QACrB,YAAYH,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCI,QAAAA,QAAQ,EAAEA,QAAS;AACnBH,QAAAA,SAAS,EAAEmB,SAAI,CAACnB,SAAS,CAAE;QAC3Ba,OAAO,EAAEd,MAAM,CAACc,OAAQ;QAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,OACN,CAAC,CAAA;AAEb,IAAA,KAAK,QAAQ,CAAA;AACb,IAAA;AACE,MAAA,oBACET,cAAA,CAAA,QAAA,EAAA;AACEI,QAAAA,IAAI,EAAC,QAAQ;QACb,YAAYX,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCC,QAAAA,SAAS,EAAEmB,SAAI,CAAC,iCAAiC,EAAEnB,SAAS,CAAE;QAC9Da,OAAO,EAAEd,MAAM,CAACc,OAAQ;QAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,OACN,CAAC,CAAA;AAEf,GAAA;AACF;;;;"}
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { clsx } from 'clsx';
|
|
2
|
-
import Link from '../../link/Link.mjs';
|
|
3
|
-
import { Typography } from '../propsValues/typography.mjs';
|
|
4
|
-
import { Priority } from '../propsValues/control.mjs';
|
|
5
|
-
import Button from '../../button/Button.resolver.mjs';
|
|
6
|
-
import { jsx } from 'react/jsx-runtime';
|
|
7
|
-
|
|
8
|
-
function Action({
|
|
9
|
-
action,
|
|
10
|
-
className,
|
|
11
|
-
variant = 'button',
|
|
12
|
-
sentiment = 'default',
|
|
13
|
-
priority = Priority.SECONDARY
|
|
14
|
-
}) {
|
|
15
|
-
if ('href' in action) {
|
|
16
|
-
return /*#__PURE__*/jsx(Link, {
|
|
17
|
-
href: action.href,
|
|
18
|
-
className: className,
|
|
19
|
-
"aria-label": action['aria-label'],
|
|
20
|
-
target: action.target,
|
|
21
|
-
type: Typography.LINK_LARGE,
|
|
22
|
-
onClick: action.onClick,
|
|
23
|
-
children: action.text
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
switch (variant) {
|
|
27
|
-
case 'action-button':
|
|
28
|
-
return /*#__PURE__*/jsx(Button, {
|
|
29
|
-
v2: true,
|
|
30
|
-
size: "sm",
|
|
31
|
-
sentiment: sentiment,
|
|
32
|
-
"aria-label": action['aria-label'],
|
|
33
|
-
priority: priority,
|
|
34
|
-
className: clsx(className),
|
|
35
|
-
onClick: action.onClick,
|
|
36
|
-
children: action.text
|
|
37
|
-
});
|
|
38
|
-
case 'button':
|
|
39
|
-
default:
|
|
40
|
-
return /*#__PURE__*/jsx("button", {
|
|
41
|
-
type: "button",
|
|
42
|
-
"aria-label": action['aria-label'],
|
|
43
|
-
className: clsx('btn-unstyled np-text-link-large', className),
|
|
44
|
-
onClick: action.onClick,
|
|
45
|
-
children: action.text
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
export { Action };
|
|
51
|
-
//# sourceMappingURL=Action.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Action.mjs","sources":["../../../src/common/action/Action.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport Link from '../../link';\nimport { Typography } from '../propsValues/typography';\nimport { Priority } from '../propsValues/control';\nimport Button from '../../button';\nimport { ButtonPriority, ButtonSentiment } from '../../button/Button.types';\n\nexport type ActionOptions = {\n 'aria-label'?: string;\n href?: string;\n target?: string;\n text: React.ReactNode;\n onClick?: () => void;\n};\n\ntype Props = {\n action: ActionOptions;\n className?: string;\n variant?: 'button' | 'action-button';\n sentiment?: ButtonSentiment;\n priority?: ButtonPriority;\n};\n\nexport function Action({\n action,\n className,\n variant = 'button',\n sentiment = 'default',\n priority = Priority.SECONDARY,\n}: Props) {\n if ('href' in action) {\n return (\n <Link\n href={action.href}\n className={className}\n aria-label={action['aria-label']}\n target={action.target}\n type={Typography.LINK_LARGE}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n }\n\n switch (variant) {\n case 'action-button':\n return (\n <Button\n v2\n size=\"sm\"\n sentiment={sentiment}\n aria-label={action['aria-label']}\n priority={priority}\n className={clsx(className)}\n onClick={action.onClick}\n >\n {action.text}\n </Button>\n );\n case 'button':\n default:\n return (\n <button\n type=\"button\"\n aria-label={action['aria-label']}\n className={clsx('btn-unstyled np-text-link-large', className)}\n onClick={action.onClick}\n >\n {action.text}\n </button>\n );\n }\n}\n"],"names":["Action","action","className","variant","sentiment","priority","Priority","SECONDARY","_jsx","Link","href","target","type","Typography","LINK_LARGE","onClick","children","text","Button","v2","size","clsx"],"mappings":";;;;;;;AAuBM,SAAUA,MAAMA,CAAC;EACrBC,MAAM;EACNC,SAAS;AACTC,EAAAA,OAAO,GAAG,QAAQ;AAClBC,EAAAA,SAAS,GAAG,SAAS;EACrBC,QAAQ,GAAGC,QAAQ,CAACC,SAAAA;AACd,CAAA,EAAA;EACN,IAAI,MAAM,IAAIN,MAAM,EAAE;IACpB,oBACEO,GAAA,CAACC,IAAI,EAAA;MACHC,IAAI,EAAET,MAAM,CAACS,IAAK;AAClBR,MAAAA,SAAS,EAAEA,SAAU;MACrB,YAAYD,EAAAA,MAAM,CAAC,YAAY,CAAE;MACjCU,MAAM,EAAEV,MAAM,CAACU,MAAO;MACtBC,IAAI,EAAEC,UAAU,CAACC,UAAW;MAC5BC,OAAO,EAAEd,MAAM,CAACc,OAAQ;MAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;AAEA,EAAA,QAAQd,OAAO;AACb,IAAA,KAAK,eAAe;MAClB,oBACEK,GAAA,CAACU,MAAM,EAAA;QACLC,EAAE,EAAA,IAAA;AACFC,QAAAA,IAAI,EAAC,IAAI;AACThB,QAAAA,SAAS,EAAEA,SAAU;QACrB,YAAYH,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCI,QAAAA,QAAQ,EAAEA,QAAS;AACnBH,QAAAA,SAAS,EAAEmB,IAAI,CAACnB,SAAS,CAAE;QAC3Ba,OAAO,EAAEd,MAAM,CAACc,OAAQ;QAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,OACN,CAAC,CAAA;AAEb,IAAA,KAAK,QAAQ,CAAA;AACb,IAAA;AACE,MAAA,oBACET,GAAA,CAAA,QAAA,EAAA;AACEI,QAAAA,IAAI,EAAC,QAAQ;QACb,YAAYX,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCC,QAAAA,SAAS,EAAEmB,IAAI,CAAC,iCAAiC,EAAEnB,SAAS,CAAE;QAC9Da,OAAO,EAAEd,MAAM,CAACc,OAAQ;QAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,OACN,CAAC,CAAA;AAEf,GAAA;AACF;;;;"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { ButtonPriority, ButtonSentiment } from '../../button/Button.types';
|
|
2
|
-
export type ActionOptions = {
|
|
3
|
-
'aria-label'?: string;
|
|
4
|
-
href?: string;
|
|
5
|
-
target?: string;
|
|
6
|
-
text: React.ReactNode;
|
|
7
|
-
onClick?: () => void;
|
|
8
|
-
};
|
|
9
|
-
type Props = {
|
|
10
|
-
action: ActionOptions;
|
|
11
|
-
className?: string;
|
|
12
|
-
variant?: 'button' | 'action-button';
|
|
13
|
-
sentiment?: ButtonSentiment;
|
|
14
|
-
priority?: ButtonPriority;
|
|
15
|
-
};
|
|
16
|
-
export declare function Action({ action, className, variant, sentiment, priority, }: Props): import("react").JSX.Element;
|
|
17
|
-
export {};
|
|
18
|
-
//# sourceMappingURL=Action.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../../src/common/action/Action.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5E,MAAM,MAAM,aAAa,GAAG;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,QAAQ,GAAG,eAAe,CAAC;IACrC,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,SAAS,EACT,OAAkB,EAClB,SAAqB,EACrB,QAA6B,GAC9B,EAAE,KAAK,+BA4CP"}
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import { clsx } from 'clsx';
|
|
2
|
-
import Link from '../../link';
|
|
3
|
-
import { Typography } from '../propsValues/typography';
|
|
4
|
-
import { Priority } from '../propsValues/control';
|
|
5
|
-
import Button from '../../button';
|
|
6
|
-
import { ButtonPriority, ButtonSentiment } from '../../button/Button.types';
|
|
7
|
-
|
|
8
|
-
export type ActionOptions = {
|
|
9
|
-
'aria-label'?: string;
|
|
10
|
-
href?: string;
|
|
11
|
-
target?: string;
|
|
12
|
-
text: React.ReactNode;
|
|
13
|
-
onClick?: () => void;
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
type Props = {
|
|
17
|
-
action: ActionOptions;
|
|
18
|
-
className?: string;
|
|
19
|
-
variant?: 'button' | 'action-button';
|
|
20
|
-
sentiment?: ButtonSentiment;
|
|
21
|
-
priority?: ButtonPriority;
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
export function Action({
|
|
25
|
-
action,
|
|
26
|
-
className,
|
|
27
|
-
variant = 'button',
|
|
28
|
-
sentiment = 'default',
|
|
29
|
-
priority = Priority.SECONDARY,
|
|
30
|
-
}: Props) {
|
|
31
|
-
if ('href' in action) {
|
|
32
|
-
return (
|
|
33
|
-
<Link
|
|
34
|
-
href={action.href}
|
|
35
|
-
className={className}
|
|
36
|
-
aria-label={action['aria-label']}
|
|
37
|
-
target={action.target}
|
|
38
|
-
type={Typography.LINK_LARGE}
|
|
39
|
-
onClick={action.onClick}
|
|
40
|
-
>
|
|
41
|
-
{action.text}
|
|
42
|
-
</Link>
|
|
43
|
-
);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
switch (variant) {
|
|
47
|
-
case 'action-button':
|
|
48
|
-
return (
|
|
49
|
-
<Button
|
|
50
|
-
v2
|
|
51
|
-
size="sm"
|
|
52
|
-
sentiment={sentiment}
|
|
53
|
-
aria-label={action['aria-label']}
|
|
54
|
-
priority={priority}
|
|
55
|
-
className={clsx(className)}
|
|
56
|
-
onClick={action.onClick}
|
|
57
|
-
>
|
|
58
|
-
{action.text}
|
|
59
|
-
</Button>
|
|
60
|
-
);
|
|
61
|
-
case 'button':
|
|
62
|
-
default:
|
|
63
|
-
return (
|
|
64
|
-
<button
|
|
65
|
-
type="button"
|
|
66
|
-
aria-label={action['aria-label']}
|
|
67
|
-
className={clsx('btn-unstyled np-text-link-large', className)}
|
|
68
|
-
onClick={action.onClick}
|
|
69
|
-
>
|
|
70
|
-
{action.text}
|
|
71
|
-
</button>
|
|
72
|
-
);
|
|
73
|
-
}
|
|
74
|
-
}
|