@transferwise/components 0.0.0-experimental-d953b10 → 0.0.0-experimental-2cca0dd

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.
Files changed (2) hide show
  1. package/package.json +3 -3
  2. package/src/common/circle/Circle.story.tsx +54 -112
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-d953b10",
3
+ "version": "0.0.0-experimental-2cca0dd",
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-d953b10",
95
+ "@transferwise/neptune-css": "0.0.0-experimental-2cca0dd",
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-d953b10",
100
+ "@transferwise/neptune-css": "0.0.0-experimental-2cca0dd",
101
101
  "@wise/art": "^2.7.0",
102
102
  "@wise/components-theming": "^1.0.0",
103
103
  "react": ">=18",
package/src/common/circle/Circle.story.tsx CHANGED
@@ -2,106 +2,50 @@ import { Meta, StoryObj } from '@storybook/react';
2
2
  import { storyConfig } from '../../test-utils';
3
3
  import Circle from './Circle';
4
4
  import { Profile } from '@transferwise/icons';
5
+ import { action } from '@storybook/addon-actions';
6
+ import { CircleProps } from '.';
7
+ import Body from '../../body';
5
8
 
6
9
  export default {
7
10
  title: 'Internal/Circle',
8
- tags: ['autodocs'],
11
+ component: Circle,
9
12
  } satisfies Meta<typeof Circle>;
10
13
 
11
14
  type Story = StoryObj<typeof Circle>;
12
15
 
13
- export const Basic: Story = storyConfig(
16
+ export const Basic: Story = {
17
+ tags: ['autodocs'],
18
+ args: {
19
+ children: 'NP',
20
+ size: 40,
21
+ as: 'div',
22
+ className: 'bg-neutral',
23
+ },
24
+ render: (args) => {
25
+ return <Circle {...args} />;
26
+ },
27
+ };
28
+
29
+ export const Sizes: Story = storyConfig(
14
30
  {
15
31
  render: () => {
16
32
  const content = <Profile size={16} />;
17
- const style = { border: '1px solid var(--color-border-neutral)' };
33
+ const sizes: CircleProps['size'][] = [32, 40, 48, 56, 72];
18
34
  return (
19
- <table border={0} cellPadding="0" cellSpacing="0">
20
- <tr>
21
- <td>
22
- <Circle size={32} style={style}>
23
- {content}
24
- </Circle>
25
- </td>
26
- <td>
27
- <Circle size={40} style={style}>
28
- {content}
29
- </Circle>
30
- </td>
31
- <td>
32
- <Circle size={48} style={style}>
33
- {content}
34
- </Circle>
35
- </td>
36
- <td>
37
- <Circle size={56} style={style}>
38
- {content}
39
- </Circle>
40
- </td>
41
- <td>
42
- <Circle size={72} style={style}>
43
- {content}
44
- </Circle>
45
- </td>
46
- </tr>
47
- <tr>
48
- <td>
49
- <Circle
50
- as="button"
51
- style={style}
52
- className="bg-neutral"
53
- size={32}
54
- onClick={() => alert('button instance')}
55
- >
56
- {content}
57
- </Circle>
58
- </td>
59
- <td>
60
- <Circle
61
- as="button"
62
- style={style}
63
- className="bg-neutral"
64
- size={40}
65
- onClick={() => alert('button instance')}
66
- >
67
- {content}
68
- </Circle>
69
- </td>
70
- <td>
71
- <Circle
72
- as="button"
73
- style={style}
74
- className="bg-neutral"
75
- size={48}
76
- onClick={() => alert('button instance')}
77
- >
78
- {content}
79
- </Circle>
80
- </td>
81
- <td>
82
- <Circle
83
- as="button"
84
- style={style}
85
- className="bg-neutral"
86
- size={56}
87
- onClick={() => alert('button instance')}
88
- >
89
- {content}
90
- </Circle>
91
- </td>
92
- <td>
93
- <Circle
94
- as="button"
95
- style={style}
96
- className="bg-neutral"
97
- size={72}
98
- onClick={() => alert('button instance')}
99
- >
100
- {content}
101
- </Circle>
102
- </td>
103
- </tr>
104
- </table>
35
+ <div
36
+ style={{
37
+ gap: '1em',
38
+ display: 'grid',
39
+ justifyContent: 'space-between',
40
+ gridTemplate: 'auto auto / repeat(5, min-content)',
41
+ }}
42
+ >
43
+ {sizes.map((size) => (
44
+ <Circle key={size} size={size} className="bg-neutral">
45
+ {content}
46
+ </Circle>
47
+ ))}
48
+ </div>
105
49
  );
106
50
  },
107
51
  },
@@ -113,30 +57,28 @@ export const FixedSize: Story = storyConfig(
113
57
  render: () => {
114
58
  const size = 72;
115
59
  const content = <Profile size={16} />;
116
- const style = { border: '1px solid var(--color-border-neutral)' };
117
60
  return (
118
- <table border={0} cellPadding="0" cellSpacing="0">
119
- <tr>
120
- <td>
121
- Dynamic Size (<code>--size-{size})</code>
122
- </td>
123
- <td>
124
- Fixed Size (<code>{size}px)</code>
125
- </td>
126
- </tr>
127
- <tr>
128
- <td>
129
- <Circle size={72} fixedSize={false} style={style}>
130
- {content}
131
- </Circle>
132
- </td>
133
- <td>
134
- <Circle size={72} fixedSize style={style}>
135
- {content}
136
- </Circle>
137
- </td>
138
- </tr>
139
- </table>
61
+ <div
62
+ style={{
63
+ gap: '1em',
64
+ display: 'grid',
65
+ justifyContent: 'space-between',
66
+ gridTemplate: 'auto auto / repeat(2, 180px)',
67
+ }}
68
+ >
69
+ <Body className="d-block">
70
+ Dynamic Size (<code>--size-{size}</code>)
71
+ </Body>
72
+ <Body className="d-block">
73
+ Fixed Size (<code>{size}px</code>)
74
+ </Body>
75
+ <Circle size={72} fixedSize={false} className="bg-neutral">
76
+ {content}
77
+ </Circle>
78
+ <Circle size={72} fixedSize className="bg-neutral">
79
+ {content}
80
+ </Circle>
81
+ </div>
140
82
  );
141
83
  },
142
84
  },