@transferwise/components 0.0.0-experimental-c6e51c3 → 0.0.0-experimental-8b73c43
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/package.json +4 -2
- package/src/tokens/tokens.story.tsx +0 -142
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-8b73c43",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -132,10 +132,12 @@
|
|
|
132
132
|
"dev:less:watch": "gulp watchLess --dest=src",
|
|
133
133
|
"dev:translations": "pnpm build:crowdin-source-file",
|
|
134
134
|
"storybook:dev": "storybook dev -p 4477",
|
|
135
|
-
"storybook:build": "storybook build --stats-json",
|
|
135
|
+
"storybook:build": "pnpm tokens:generate && storybook build --stats-json",
|
|
136
|
+
"tokens:generate": "node .storybook/scripts/generate-token-story-data.mjs",
|
|
136
137
|
"build:css": "gulp compileLess --dest=src",
|
|
137
138
|
"build": "npm-run-all build:*",
|
|
138
139
|
"build:clean": "rm -rf lib build",
|
|
140
|
+
"build:tokens": "pnpm tokens:generate",
|
|
139
141
|
"build:crowdin-source-file": "formatjs extract 'src/**/*.messages.+(js|ts|tsx)' --out-file src/i18n/en.json --format simple && prettier --write src/i18n/*.json",
|
|
140
142
|
"build:js": "rollup --config --sourcemap",
|
|
141
143
|
"build:copy-files": "cpx 'src/**/!(db)/*.{json,svg}' build",
|
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
import React, { ReactNode } from 'react';
|
|
2
|
-
import type { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
3
|
-
import clsx from 'clsx';
|
|
4
|
-
import AvatarView from '../avatarView';
|
|
5
|
-
import Tooltip from '../tooltip';
|
|
6
|
-
import IconButton from '../iconButton';
|
|
7
|
-
import Body from '../body';
|
|
8
|
-
|
|
9
|
-
const meta: Meta = {
|
|
10
|
-
title: 'Foundations/Tokens',
|
|
11
|
-
tags: ['!autodocs', '!manifest'],
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
export default meta;
|
|
15
|
-
|
|
16
|
-
type Story = StoryObj;
|
|
17
|
-
|
|
18
|
-
export const Colors: Story = {
|
|
19
|
-
render: () => {
|
|
20
|
-
return (
|
|
21
|
-
<Body>
|
|
22
|
-
{colorTokens.map((token) => (
|
|
23
|
-
<ColorToken key={token} token={token} className="m-b-2" />
|
|
24
|
-
))}
|
|
25
|
-
</Body>
|
|
26
|
-
);
|
|
27
|
-
},
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
const colorTokens = [
|
|
31
|
-
'--color-content-primary',
|
|
32
|
-
'--color-bright-yellow',
|
|
33
|
-
'--color-bright-orange',
|
|
34
|
-
'--color-dark-purple',
|
|
35
|
-
'--color-dark-gold',
|
|
36
|
-
'--color-bright-blue',
|
|
37
|
-
'--color-dark-charcoal',
|
|
38
|
-
'--color-white',
|
|
39
|
-
'--color-black',
|
|
40
|
-
'--color-bright-green',
|
|
41
|
-
'--color-forest-green',
|
|
42
|
-
'--color-bright-pink',
|
|
43
|
-
'--color-dark-maroon',
|
|
44
|
-
'--color-content-primary',
|
|
45
|
-
'--color-content-secondary',
|
|
46
|
-
'--color-content-tertiary',
|
|
47
|
-
'--color-content-link',
|
|
48
|
-
'--color-content-link-hover',
|
|
49
|
-
'--color-content-link-active',
|
|
50
|
-
'--color-interactive-control',
|
|
51
|
-
'--color-interactive-control-hover',
|
|
52
|
-
'--color-interactive-control-active',
|
|
53
|
-
'--color-interactive-primary',
|
|
54
|
-
'--color-interactive-primary-hover',
|
|
55
|
-
'--color-interactive-primary-active',
|
|
56
|
-
'--color-interactive-secondary',
|
|
57
|
-
'--color-interactive-secondary-hover',
|
|
58
|
-
'--color-interactive-secondary-active',
|
|
59
|
-
'--color-interactive-accent',
|
|
60
|
-
'--color-interactive-accent-hover',
|
|
61
|
-
'--color-interactive-accent-active',
|
|
62
|
-
'--color-interactive-contrast',
|
|
63
|
-
'--color-interactive-contrast-hover',
|
|
64
|
-
'--color-interactive-contrast-active',
|
|
65
|
-
'--color-interactive-neutral',
|
|
66
|
-
'--color-interactive-neutral-hover',
|
|
67
|
-
'--color-interactive-neutral-active',
|
|
68
|
-
'--color-border-neutral',
|
|
69
|
-
'--color-border-overlay',
|
|
70
|
-
'--color-background-screen',
|
|
71
|
-
'--color-background-screen-hover',
|
|
72
|
-
'--color-background-screen-active',
|
|
73
|
-
'--color-background-elevated',
|
|
74
|
-
'--color-background-neutral',
|
|
75
|
-
'--color-background-neutral-hover',
|
|
76
|
-
'--color-background-neutral-active',
|
|
77
|
-
'--color-background-overlay',
|
|
78
|
-
'--color-background-surface',
|
|
79
|
-
'--color-sentiment-negative',
|
|
80
|
-
'--color-sentiment-negative-hover',
|
|
81
|
-
'--color-sentiment-negative-active',
|
|
82
|
-
'--color-sentiment-negative-primary',
|
|
83
|
-
'--color-sentiment-negative-primary-hover',
|
|
84
|
-
'--color-sentiment-negative-primary-active',
|
|
85
|
-
'--color-sentiment-negative-secondary',
|
|
86
|
-
'--color-sentiment-negative-secondary-hover',
|
|
87
|
-
'--color-sentiment-negative-secondary-active',
|
|
88
|
-
'--color-sentiment-positive',
|
|
89
|
-
'--color-sentiment-positive-hover',
|
|
90
|
-
'--color-sentiment-positive-active',
|
|
91
|
-
'--color-sentiment-positive-primary',
|
|
92
|
-
'--color-sentiment-positive-primary-hover',
|
|
93
|
-
'--color-sentiment-positive-primary-active',
|
|
94
|
-
'--color-sentiment-positive-secondary',
|
|
95
|
-
'--color-sentiment-positive-secondary-hover',
|
|
96
|
-
'--color-sentiment-positive-secondary-active',
|
|
97
|
-
'--color-sentiment-warning',
|
|
98
|
-
'--color-sentiment-warning-hover',
|
|
99
|
-
'--color-sentiment-warning-active',
|
|
100
|
-
'--color-sentiment-warning-primary',
|
|
101
|
-
'--color-sentiment-warning-primary-hover',
|
|
102
|
-
'--color-sentiment-warning-primary-active',
|
|
103
|
-
'--color-sentiment-warning-secondary',
|
|
104
|
-
'--color-sentiment-warning-secondary-hover',
|
|
105
|
-
'--color-sentiment-warning-secondary-active',
|
|
106
|
-
'--color-sentiment-warning-content',
|
|
107
|
-
'--color-sentiment-warning-content-hover',
|
|
108
|
-
'--color-sentiment-warning-content-active',
|
|
109
|
-
'--color-contrast',
|
|
110
|
-
'--color-light',
|
|
111
|
-
'--color-dark',
|
|
112
|
-
'--color-contrast-overlay',
|
|
113
|
-
'--color-contrast-theme',
|
|
114
|
-
];
|
|
115
|
-
|
|
116
|
-
function ColorToken(props: { token: string; className?: string }) {
|
|
117
|
-
const color = `var(${props.token})`;
|
|
118
|
-
const [tooltipLabel, setTooltipLabel] = React.useState<ReactNode>('Copy Token Name');
|
|
119
|
-
return (
|
|
120
|
-
<div className={clsx('d-flex', 'align-items-center', props.className)}>
|
|
121
|
-
<IconButton
|
|
122
|
-
aria-label="Copy color"
|
|
123
|
-
size={72}
|
|
124
|
-
className="m-r-2"
|
|
125
|
-
onClick={async () => {
|
|
126
|
-
await navigator.clipboard.writeText(color);
|
|
127
|
-
setTooltipLabel('Copied!');
|
|
128
|
-
}}
|
|
129
|
-
>
|
|
130
|
-
<Tooltip label={<Body type="body-large-bold">{tooltipLabel}</Body>} position="top">
|
|
131
|
-
<AvatarView
|
|
132
|
-
size={72}
|
|
133
|
-
style={{ backgroundColor: color, border: 'solid 1px var(--color-border-neutral)' }}
|
|
134
|
-
>
|
|
135
|
-
{null}
|
|
136
|
-
</AvatarView>
|
|
137
|
-
</Tooltip>
|
|
138
|
-
</IconButton>
|
|
139
|
-
<code className="m-l-2">{props.token}</code>
|
|
140
|
-
</div>
|
|
141
|
-
);
|
|
142
|
-
}
|