@transferwise/components 0.0.0-experimental-3e2f565 → 0.0.0-experimental-a4ce7c5
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.
|
@@ -31,7 +31,7 @@ interface StoryConfig {
|
|
|
31
31
|
*
|
|
32
32
|
* @default undefined
|
|
33
33
|
*/
|
|
34
|
-
variants?: ('default' | 'light' | 'dark' | 'rtl' | 'mobile' | '400%')[];
|
|
34
|
+
variants?: ('default' | 'light' | 'dark' | 'bright-green' | 'forest-green' | 'rtl' | 'mobile' | '400%')[];
|
|
35
35
|
}
|
|
36
36
|
/**
|
|
37
37
|
* Utility function for creating variants of a CSFv3 story.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"story-config.d.ts","sourceRoot":"","sources":["../../../src/test-utils/story-config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;CAarB,CAAC;AAEF,UAAU,WAAW;IACnB;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"story-config.d.ts","sourceRoot":"","sources":["../../../src/test-utils/story-config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;CAarB,CAAC;AAEF,UAAU,WAAW;IACnB;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,CACP,SAAS,GACT,OAAO,GACP,MAAM,GACN,cAAc,GACd,cAAc,GACd,KAAK,GACL,QAAQ,GACR,MAAM,CACT,EAAE,CAAC;CACL;AAmBD;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,IAAI,eACjB,QAAQ,CAAC,IAAI,CAAC,gBACb,WAAW,KACxB,QAAQ,CAAC,IAAI,CAoBf,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-a4ce7c5",
|
|
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-a4ce7c5",
|
|
96
96
|
"@wise/components-theming": "1.6.1"
|
|
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-a4ce7c5",
|
|
101
101
|
"@wise/art": "^2.16",
|
|
102
102
|
"@wise/components-theming": "^1.0.0",
|
|
103
103
|
"react": ">=18",
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react';
|
|
2
2
|
import { fn } from '@storybook/test';
|
|
3
|
-
import { Freeze, ArrowRight } from '@transferwise/icons';
|
|
3
|
+
import { Freeze, ArrowRight, ArrowLeft } from '@transferwise/icons';
|
|
4
4
|
import { Flag } from '@wise/art';
|
|
5
5
|
import Button from './Button.resolver';
|
|
6
|
-
import type { ButtonProps } from './Button.types';
|
|
6
|
+
import type { ButtonProps, ButtonPriority } from './Button.types';
|
|
7
|
+
import { storyConfig } from '../test-utils';
|
|
7
8
|
|
|
8
9
|
const withContainer = (Story: any) => (
|
|
9
10
|
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
|
@@ -636,3 +637,114 @@ export const WithAvatarAndIcon: Story = {
|
|
|
636
637
|
argTypes: hideControls(['href', 'target', 'as', 'children', 'testId']),
|
|
637
638
|
parameters: augmentIconProps(),
|
|
638
639
|
};
|
|
640
|
+
|
|
641
|
+
const buttonPriorities = ['primary', 'secondary', 'tertiary', 'minimal'] as const;
|
|
642
|
+
const buttonSizes = ['sm', 'md', 'lg'] as const;
|
|
643
|
+
|
|
644
|
+
export const AllVariants = storyConfig(
|
|
645
|
+
{
|
|
646
|
+
tags: ['!autodocs'],
|
|
647
|
+
render: () => (
|
|
648
|
+
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }}>
|
|
649
|
+
{buttonPriorities.map((priority) =>
|
|
650
|
+
buttonSizes.map((size) => (
|
|
651
|
+
<div
|
|
652
|
+
key={`${priority}-default-${size}`}
|
|
653
|
+
style={{ marginBottom: '16px', justifyContent: 'space-between' }}
|
|
654
|
+
>
|
|
655
|
+
<Button
|
|
656
|
+
v2
|
|
657
|
+
priority={priority as ButtonPriority}
|
|
658
|
+
size={size}
|
|
659
|
+
iconStart={ArrowLeft}
|
|
660
|
+
iconEnd={ArrowRight}
|
|
661
|
+
avatars={[{ asset: <Freeze /> }]}
|
|
662
|
+
block
|
|
663
|
+
href="https://wise.com"
|
|
664
|
+
target="_blank"
|
|
665
|
+
>
|
|
666
|
+
{`${priority} default ${size}`}
|
|
667
|
+
</Button>
|
|
668
|
+
<Button
|
|
669
|
+
className="m-t-1 m-b-1"
|
|
670
|
+
v2
|
|
671
|
+
priority={priority as ButtonPriority}
|
|
672
|
+
size={size}
|
|
673
|
+
iconStart={ArrowLeft}
|
|
674
|
+
iconEnd={ArrowRight}
|
|
675
|
+
avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
|
|
676
|
+
block
|
|
677
|
+
disabled
|
|
678
|
+
>
|
|
679
|
+
{`${priority} default ${size} Disabled`}
|
|
680
|
+
</Button>
|
|
681
|
+
<Button
|
|
682
|
+
v2
|
|
683
|
+
priority={priority as ButtonPriority}
|
|
684
|
+
size={size}
|
|
685
|
+
iconStart={ArrowLeft}
|
|
686
|
+
iconEnd={ArrowRight}
|
|
687
|
+
avatars={[{ asset: <Freeze /> }]}
|
|
688
|
+
block
|
|
689
|
+
loading
|
|
690
|
+
>
|
|
691
|
+
{`${priority} default ${size} Loading`}
|
|
692
|
+
</Button>
|
|
693
|
+
</div>
|
|
694
|
+
)),
|
|
695
|
+
)}
|
|
696
|
+
{['primary', 'secondary'].map((priority) =>
|
|
697
|
+
buttonSizes.map((size) => (
|
|
698
|
+
<div
|
|
699
|
+
key={`${priority}-negative-${size}`}
|
|
700
|
+
style={{ marginBottom: '16px', justifyContent: 'space-between' }}
|
|
701
|
+
>
|
|
702
|
+
<Button
|
|
703
|
+
v2
|
|
704
|
+
sentiment="negative"
|
|
705
|
+
priority={priority as ButtonPriority}
|
|
706
|
+
size={size}
|
|
707
|
+
iconStart={ArrowLeft}
|
|
708
|
+
iconEnd={ArrowRight}
|
|
709
|
+
avatars={[{ asset: <Freeze /> }]}
|
|
710
|
+
block
|
|
711
|
+
href="https://wise.com"
|
|
712
|
+
target="_blank"
|
|
713
|
+
>
|
|
714
|
+
{`${priority} negative ${size}`}
|
|
715
|
+
</Button>
|
|
716
|
+
<Button
|
|
717
|
+
className="m-t-1 m-b-1"
|
|
718
|
+
v2
|
|
719
|
+
sentiment="negative"
|
|
720
|
+
priority={priority as ButtonPriority}
|
|
721
|
+
size={size}
|
|
722
|
+
iconStart={ArrowLeft}
|
|
723
|
+
iconEnd={ArrowRight}
|
|
724
|
+
avatars={[{ asset: <Freeze /> }]}
|
|
725
|
+
block
|
|
726
|
+
disabled
|
|
727
|
+
>
|
|
728
|
+
{`${priority} negative ${size} Disabled`}
|
|
729
|
+
</Button>
|
|
730
|
+
<Button
|
|
731
|
+
v2
|
|
732
|
+
sentiment="negative"
|
|
733
|
+
priority={priority as ButtonPriority}
|
|
734
|
+
size={size}
|
|
735
|
+
iconStart={ArrowLeft}
|
|
736
|
+
iconEnd={ArrowRight}
|
|
737
|
+
avatars={[{ asset: <Freeze /> }]}
|
|
738
|
+
block
|
|
739
|
+
loading
|
|
740
|
+
>
|
|
741
|
+
{`${priority} negative ${size} Loading`}
|
|
742
|
+
</Button>
|
|
743
|
+
</div>
|
|
744
|
+
)),
|
|
745
|
+
)}
|
|
746
|
+
</div>
|
|
747
|
+
),
|
|
748
|
+
},
|
|
749
|
+
{ variants: ['default', 'dark', 'bright-green', 'forest-green'] },
|
|
750
|
+
);
|
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
declare module '@storybook/react' {
|
|
2
2
|
interface Parameters {
|
|
3
3
|
/** Prefer using `storyConfig` for configuring variants */
|
|
4
|
-
variants?: (
|
|
4
|
+
variants?: (
|
|
5
|
+
| 'default'
|
|
6
|
+
| 'light'
|
|
7
|
+
| 'dark'
|
|
8
|
+
| 'bright-green'
|
|
9
|
+
| 'forest-green'
|
|
10
|
+
| 'rtl'
|
|
11
|
+
| (string & Record<string, unknown>)
|
|
12
|
+
)[];
|
|
5
13
|
/** Used by Chromatic */
|
|
6
14
|
chromatic?: ChromaticParameters;
|
|
7
15
|
viewport?: {
|
|
@@ -30,7 +30,16 @@ interface StoryConfig {
|
|
|
30
30
|
*
|
|
31
31
|
* @default undefined
|
|
32
32
|
*/
|
|
33
|
-
variants?: (
|
|
33
|
+
variants?: (
|
|
34
|
+
| 'default'
|
|
35
|
+
| 'light'
|
|
36
|
+
| 'dark'
|
|
37
|
+
| 'bright-green'
|
|
38
|
+
| 'forest-green'
|
|
39
|
+
| 'rtl'
|
|
40
|
+
| 'mobile'
|
|
41
|
+
| '400%'
|
|
42
|
+
)[];
|
|
34
43
|
}
|
|
35
44
|
|
|
36
45
|
const getViewportWidth = (viewport: (typeof viewports)[keyof typeof viewports]) => {
|