@transferwise/components 0.0.0-experimental-ee20015 → 0.0.0-experimental-13bfc1a
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/common/circle/Circle.js.map +1 -1
- package/build/common/circle/Circle.mjs.map +1 -1
- package/build/types/common/circle/Circle.d.ts +0 -3
- package/build/types/common/circle/Circle.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/common/circle/Circle.story.tsx +154 -0
- package/src/common/circle/Circle.tsx +0 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Circle.js","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\
|
|
1
|
+
{"version":3,"file":"Circle.js","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;\n\nexport type Props = {\n as?: React.ElementType;\n size?: ShapeSize;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Circle = forwardRef(function Circle(\n { as: Element = 'div', children, size = 48, className, style, ...props }: Props,\n ref,\n) {\n return (\n <Element\n {...props}\n ref={ref}\n style={{ ...style, '--circle-size': `var(--size-${size})` }}\n className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}\n >\n {children}\n </Element>\n );\n});\n\nexport default Circle;\n"],"names":["Circle","forwardRef","as","Element","children","size","className","style","props","ref","_jsx","clsx"],"mappings":";;;;;;AAUA,MAAMA,MAAM,gBAAGC,gBAAU,CAAC,SAASD,MAAMA,CACvC;EAAEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EAAEC,QAAQ;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAEC,SAAS;EAAEC,KAAK;EAAE,GAAGC,KAAAA;AAAc,CAAA,EAC/EC,GAAG,EAAA;EAEH,oBACEC,cAAA,CAACP,OAAO,EAAA;AAAA,IAAA,GACFK,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGA,KAAK;MAAE,eAAe,EAAE,cAAcF,IAAI,CAAA,CAAA,CAAA;KAAM;IAC5DC,SAAS,EAAEK,SAAI,CAAC,WAAW,EAAE,kDAAkD,EAAEL,SAAS,CAAE;AAAAF,IAAAA,QAAA,EAE3FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Circle.mjs","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\
|
|
1
|
+
{"version":3,"file":"Circle.mjs","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;\n\nexport type Props = {\n as?: React.ElementType;\n size?: ShapeSize;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Circle = forwardRef(function Circle(\n { as: Element = 'div', children, size = 48, className, style, ...props }: Props,\n ref,\n) {\n return (\n <Element\n {...props}\n ref={ref}\n style={{ ...style, '--circle-size': `var(--size-${size})` }}\n className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}\n >\n {children}\n </Element>\n );\n});\n\nexport default Circle;\n"],"names":["Circle","forwardRef","as","Element","children","size","className","style","props","ref","_jsx","clsx"],"mappings":";;;;AAUA,MAAMA,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CACvC;EAAEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EAAEC,QAAQ;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAEC,SAAS;EAAEC,KAAK;EAAE,GAAGC,KAAAA;AAAc,CAAA,EAC/EC,GAAG,EAAA;EAEH,oBACEC,GAAA,CAACP,OAAO,EAAA;AAAA,IAAA,GACFK,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGA,KAAK;MAAE,eAAe,EAAE,cAAcF,IAAI,CAAA,CAAA,CAAA;KAAM;IAC5DC,SAAS,EAAEK,IAAI,CAAC,WAAW,EAAE,kDAAkD,EAAEL,SAAS,CAAE;AAAAF,IAAAA,QAAA,EAE3FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../../../../src/common/circle/Circle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAGnD
|
|
1
|
+
{"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../../../../src/common/circle/Circle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAGnD,MAAM,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE9D,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,QAAA,MAAM,MAAM;SAJL,KAAK,CAAC,WAAW;WACf,SAAS;4EAiBhB,CAAC;AAEH,eAAe,MAAM,CAAC"}
|
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-13bfc1a",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -92,12 +92,12 @@
|
|
|
92
92
|
"rollup-preserve-directives": "^1.1.1",
|
|
93
93
|
"storybook": "^8.2.2",
|
|
94
94
|
"@transferwise/less-config": "3.1.0",
|
|
95
|
-
"@transferwise/neptune-css": "0.0.0-experimental-
|
|
95
|
+
"@transferwise/neptune-css": "0.0.0-experimental-13bfc1a",
|
|
96
96
|
"@wise/components-theming": "1.6.0"
|
|
97
97
|
},
|
|
98
98
|
"peerDependencies": {
|
|
99
99
|
"@transferwise/icons": "^3.13.1",
|
|
100
|
-
"@transferwise/neptune-css": "0.0.0-experimental-
|
|
100
|
+
"@transferwise/neptune-css": "0.0.0-experimental-13bfc1a",
|
|
101
101
|
"@wise/art": "^2.7.0",
|
|
102
102
|
"@wise/components-theming": "^1.0.0",
|
|
103
103
|
"react": ">=18",
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { storyConfig } from '../../test-utils';
|
|
3
|
+
import Circle from './Circle';
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
title: 'Internal/Circle',
|
|
7
|
+
} satisfies Meta<typeof Circle>;
|
|
8
|
+
|
|
9
|
+
type Story = StoryObj<typeof Circle>;
|
|
10
|
+
|
|
11
|
+
export const Basic: Story = storyConfig(
|
|
12
|
+
{
|
|
13
|
+
render: () => {
|
|
14
|
+
const style = { border: '1px solid var(--color-border-neutral)' };
|
|
15
|
+
return (
|
|
16
|
+
<table border={0} cellPadding="0" cellSpacing="0">
|
|
17
|
+
<tr>
|
|
18
|
+
<td>
|
|
19
|
+
<Circle size={24} style={style}>
|
|
20
|
+
AB
|
|
21
|
+
</Circle>
|
|
22
|
+
</td>
|
|
23
|
+
<td>
|
|
24
|
+
<Circle size={32} style={style}>
|
|
25
|
+
AB
|
|
26
|
+
</Circle>
|
|
27
|
+
</td>
|
|
28
|
+
<td>
|
|
29
|
+
<Circle size={40} style={style}>
|
|
30
|
+
AB
|
|
31
|
+
</Circle>
|
|
32
|
+
</td>
|
|
33
|
+
<td>
|
|
34
|
+
<Circle size={48} style={style}>
|
|
35
|
+
AB
|
|
36
|
+
</Circle>
|
|
37
|
+
</td>
|
|
38
|
+
<td>
|
|
39
|
+
<Circle size={56} style={style}>
|
|
40
|
+
AB
|
|
41
|
+
</Circle>
|
|
42
|
+
</td>
|
|
43
|
+
<td>
|
|
44
|
+
<Circle size={72} style={style}>
|
|
45
|
+
AB
|
|
46
|
+
</Circle>
|
|
47
|
+
</td>
|
|
48
|
+
</tr>
|
|
49
|
+
<tr>
|
|
50
|
+
<td>
|
|
51
|
+
<Circle as="span" style={style} size={24}>
|
|
52
|
+
AB
|
|
53
|
+
</Circle>
|
|
54
|
+
</td>
|
|
55
|
+
<td>
|
|
56
|
+
<Circle as="span" style={style} size={32}>
|
|
57
|
+
AB
|
|
58
|
+
</Circle>
|
|
59
|
+
</td>
|
|
60
|
+
<td>
|
|
61
|
+
<Circle as="span" style={style} size={40}>
|
|
62
|
+
AB
|
|
63
|
+
</Circle>
|
|
64
|
+
</td>
|
|
65
|
+
<td>
|
|
66
|
+
<Circle as="span" style={style} size={48}>
|
|
67
|
+
AB
|
|
68
|
+
</Circle>
|
|
69
|
+
</td>
|
|
70
|
+
<td>
|
|
71
|
+
<Circle as="span" style={style} size={56}>
|
|
72
|
+
AB
|
|
73
|
+
</Circle>
|
|
74
|
+
</td>
|
|
75
|
+
<td>
|
|
76
|
+
<Circle as="span" style={style} size={72}>
|
|
77
|
+
AB
|
|
78
|
+
</Circle>
|
|
79
|
+
</td>
|
|
80
|
+
</tr>
|
|
81
|
+
<tr>
|
|
82
|
+
<td>
|
|
83
|
+
<Circle
|
|
84
|
+
as="button"
|
|
85
|
+
style={style}
|
|
86
|
+
className="btn-unstyled"
|
|
87
|
+
size={24}
|
|
88
|
+
onClick={() => alert('button instance')}
|
|
89
|
+
>
|
|
90
|
+
AB
|
|
91
|
+
</Circle>
|
|
92
|
+
</td>
|
|
93
|
+
<td>
|
|
94
|
+
<Circle
|
|
95
|
+
as="button"
|
|
96
|
+
style={style}
|
|
97
|
+
className="btn-unstyled"
|
|
98
|
+
size={32}
|
|
99
|
+
onClick={() => alert('button instance')}
|
|
100
|
+
>
|
|
101
|
+
AB
|
|
102
|
+
</Circle>
|
|
103
|
+
</td>
|
|
104
|
+
<td>
|
|
105
|
+
<Circle
|
|
106
|
+
as="button"
|
|
107
|
+
style={style}
|
|
108
|
+
className="btn-unstyled"
|
|
109
|
+
size={40}
|
|
110
|
+
onClick={() => alert('button instance')}
|
|
111
|
+
>
|
|
112
|
+
AB
|
|
113
|
+
</Circle>
|
|
114
|
+
</td>
|
|
115
|
+
<td>
|
|
116
|
+
<Circle
|
|
117
|
+
as="button"
|
|
118
|
+
style={style}
|
|
119
|
+
className="btn-unstyled"
|
|
120
|
+
size={48}
|
|
121
|
+
onClick={() => alert('button instance')}
|
|
122
|
+
>
|
|
123
|
+
AB
|
|
124
|
+
</Circle>
|
|
125
|
+
</td>
|
|
126
|
+
<td>
|
|
127
|
+
<Circle
|
|
128
|
+
as="button"
|
|
129
|
+
style={style}
|
|
130
|
+
className="btn-unstyled"
|
|
131
|
+
size={56}
|
|
132
|
+
onClick={() => alert('button instance')}
|
|
133
|
+
>
|
|
134
|
+
AB
|
|
135
|
+
</Circle>
|
|
136
|
+
</td>
|
|
137
|
+
<td>
|
|
138
|
+
<Circle
|
|
139
|
+
as="button"
|
|
140
|
+
style={style}
|
|
141
|
+
className="btn-unstyled"
|
|
142
|
+
size={72}
|
|
143
|
+
onClick={() => alert('button instance')}
|
|
144
|
+
>
|
|
145
|
+
AB
|
|
146
|
+
</Circle>
|
|
147
|
+
</td>
|
|
148
|
+
</tr>
|
|
149
|
+
</table>
|
|
150
|
+
);
|
|
151
|
+
},
|
|
152
|
+
},
|
|
153
|
+
{ variants: ['light', 'dark'] },
|
|
154
|
+
);
|