@transferwise/components 0.0.0-experimental-3e2f565 → 0.0.0-experimental-80bf5cd

package/build/types/test-utils/story-config.d.ts

@@ -31,7 +31,7 @@ interface StoryConfig {
      *
      * @default undefined
      */
-    variants?: ('default' | 'light' | 'dark' | 'rtl' | 'mobile' | '400%')[];
+    variants?: ('default' | 'light' | 'dark' | 'bright-green' | 'forest-green' | 'rtl' | 'mobile' | '400%')[];
 }
 /**
  * Utility function for creating variants of a CSFv3 story.

package/build/types/test-utils/story-config.d.ts.map

@@ -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,CAAC,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAC;CACzE;AAmBD;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,IAAI,eACjB,QAAQ,CAAC,IAAI,CAAC,gBACb,WAAW,KACxB,QAAQ,CAAC,IAAI,CAoBf,CAAC"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-3e2f565",
+  "version": "0.0.0-experimental-80bf5cd",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,12 +92,12 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-3e2f565",
+    "@transferwise/neptune-css": "0.0.0-experimental-80bf5cd",
     "@wise/components-theming": "1.6.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-3e2f565",
+    "@transferwise/neptune-css": "0.0.0-experimental-80bf5cd",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/alert/Alert.story.tsx

@@ -9,7 +9,7 @@ import Alert, { AlertArrowPosition, type AlertProps as FullAlertProps } from './
 
 export default {
   component: Alert,
-  title: 'Feedback/Alert',
+  title: 'Feed-back/Alert',
   args: {
     type: Sentiment.POSITIVE,
     message:

package/src/alert/Alert.tests.story.tsx

@@ -5,7 +5,7 @@ import { Button, Field, SelectInput, Sentiment } from '..';
 import Alert, { type AlertProps } from './Alert';
 
 const meta = {
-  title: 'Feedback/Alert/tests',
+  title: 'Feed-back/Alert/Tests',
   component: Alert,
   argTypes: {},
   args: {

package/src/button/Button.story.tsx

@@ -1,9 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
-import { Freeze, ArrowRight } from '@transferwise/icons';
+import { Freeze, ArrowRight, ArrowLeft } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import Button from './Button.resolver';
-import type { ButtonProps } from './Button.types';
+import type { ButtonProps, ButtonPriority } from './Button.types';
+import { storyConfig } from '../test-utils';
 
 const withContainer = (Story: any) => (
   <div style={{ display: 'flex', justifyContent: 'center' }}>
@@ -636,3 +637,120 @@ export const WithAvatarAndIcon: Story = {
   argTypes: hideControls(['href', 'target', 'as', 'children', 'testId']),
   parameters: augmentIconProps(),
 };
+
+const buttonPriorities = ['primary', 'secondary', 'tertiary', 'minimal'] as const;
+const buttonSizes = ['sm', 'md', 'lg'] as const;
+
+export const AllVariants = storyConfig(
+  {
+    tags: ['!autodocs'],
+    parameters: {
+      padding: '0',
+    },
+    render: () => (
+      <div
+        className="button-variants"
+        style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', maxWidth: '1200px' }}
+      >
+        {buttonPriorities.map((priority) =>
+          buttonSizes.map((size) => (
+            <div
+              key={`${priority}-default-${size}`}
+              style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
+            >
+              <Button
+                v2
+                priority={priority as ButtonPriority}
+                size={size}
+                iconStart={ArrowLeft}
+                iconEnd={ArrowRight}
+                avatars={[{ asset: <Freeze /> }]}
+                block
+                href="https://wise.com"
+                target="_blank"
+              >
+                {`${priority} default ${size}`}
+              </Button>
+              <Button
+                className="m-t-1 m-b-1"
+                v2
+                priority={priority as ButtonPriority}
+                size={size}
+                iconStart={ArrowLeft}
+                iconEnd={ArrowRight}
+                avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
+                block
+                disabled
+              >
+                {`${priority} default ${size} Disabled`}
+              </Button>
+              <Button
+                v2
+                priority={priority as ButtonPriority}
+                size={size}
+                iconStart={ArrowLeft}
+                iconEnd={ArrowRight}
+                avatars={[{ asset: <Freeze /> }]}
+                block
+                loading
+              >
+                {`${priority} default ${size} Loading`}
+              </Button>
+            </div>
+          )),
+        )}
+        {['primary', 'secondary'].map((priority) =>
+          buttonSizes.map((size) => (
+            <div
+              key={`${priority}-negative-${size}`}
+              style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
+            >
+              <Button
+                v2
+                sentiment="negative"
+                priority={priority as ButtonPriority}
+                size={size}
+                iconStart={ArrowLeft}
+                iconEnd={ArrowRight}
+                avatars={[{ asset: <Freeze /> }]}
+                block
+                href="https://wise.com"
+                target="_blank"
+              >
+                {`${priority} negative ${size}`}
+              </Button>
+              <Button
+                className="m-t-1 m-b-1"
+                v2
+                sentiment="negative"
+                priority={priority as ButtonPriority}
+                size={size}
+                iconStart={ArrowLeft}
+                iconEnd={ArrowRight}
+                avatars={[{ asset: <Freeze /> }]}
+                block
+                disabled
+              >
+                {`${priority} negative ${size} Disabled`}
+              </Button>
+              <Button
+                v2
+                sentiment="negative"
+                priority={priority as ButtonPriority}
+                size={size}
+                iconStart={ArrowLeft}
+                iconEnd={ArrowRight}
+                avatars={[{ asset: <Freeze /> }]}
+                block
+                loading
+              >
+                {`${priority} negative ${size} Loading`}
+              </Button>
+            </div>
+          )),
+        )}
+      </div>
+    ),
+  },
+  { variants: ['default', 'dark', 'bright-green', 'forest-green'] },
+);

package/src/criticalBanner/CriticalCommsBanner.story.tsx

@@ -4,7 +4,7 @@ import CriticalCommsBanner from '.';
 
 export default {
   component: CriticalCommsBanner,
-  title: 'Feedback/CriticalCommsBanner',
+  title: 'Feed-back/CriticalCommsBanner',
   tags: ['autodocs'],
 } satisfies Meta<typeof CriticalCommsBanner>;
 

package/src/field/Field.story.tsx

@@ -12,7 +12,7 @@ import Info from '../info';
 
 export default {
   component: Field,
-  title: 'Field',
+  title: 'Forms/Field',
   tags: ['autodocs'],
   argTypes: {
     messageIconLabel: {

package/src/label/Label.story.tsx

@@ -3,7 +3,7 @@ import { Label } from './Label';
 
 export default {
   component: Label,
-  title: 'Label',
+  title: 'Dialogs/Label',
   tags: ['autodocs'],
 };
 

package/src/nudge/Nudge.story.tsx

@@ -5,7 +5,7 @@ import { Nudge } from '..';
 
 export default {
   component: Nudge,
-  title: 'Feedback/Nudge',
+  title: 'Feed-back/Nudge',
 };
 
 export const Default = () => {

package/src/test-utils/Parameters.d.ts

@@ -1,7 +1,15 @@
 declare module '@storybook/react' {
   interface Parameters {
     /** Prefer using `storyConfig` for configuring variants */
-    variants?: ('default' | 'light' | 'dark' | 'rtl' | (string & Record<string, unknown>))[];
+    variants?: (
+      | 'default'
+      | 'light'
+      | 'dark'
+      | 'bright-green'
+      | 'forest-green'
+      | 'rtl'
+      | (string & Record<string, unknown>)
+    )[];
     /** Used by Chromatic */
     chromatic?: ChromaticParameters;
     viewport?: {

package/src/test-utils/story-config.ts

@@ -30,7 +30,16 @@ interface StoryConfig {
    *
    * @default undefined
    */
-  variants?: ('default' | 'light' | 'dark' | 'rtl' | 'mobile' | '400%')[];
+  variants?: (
+    | 'default'
+    | 'light'
+    | 'dark'
+    | 'bright-green'
+    | 'forest-green'
+    | 'rtl'
+    | 'mobile'
+    | '400%'
+  )[];
 }
 
 const getViewportWidth = (viewport: (typeof viewports)[keyof typeof viewports]) => {