@transferwise/components 0.0.0-experimental-1d18c88 → 0.0.0-experimental-5b8e94e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-1d18c88",
+  "version": "0.0.0-experimental-5b8e94e",
   "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-1d18c88",
+    "@transferwise/neptune-css": "0.0.0-experimental-5b8e94e",
     "@wise/components-theming": "1.6.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-1d18c88",
+    "@transferwise/neptune-css": "0.0.0-experimental-5b8e94e",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/button/Button.story.tsx

@@ -11,6 +11,28 @@ const withContainer = (Story: any) => (
   </div>
 );
 
+/**
+ * Used for showing multiple components within a Canvas.
+ * @decorator
+ */
+const withComponentGrid =
+  (maxWidth = 'auto') =>
+  (Story: any) => (
+    <div
+      style={{
+        width: '100%',
+        placeItems: 'center',
+        justifyContent: 'center',
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '2rem',
+        maxWidth,
+      }}
+    >
+      <Story />
+    </div>
+  );
+
 /**
  * Not all stories need access to all controls as it causes unnecessary UI noise.
  */
@@ -47,24 +69,6 @@ const augmentIconProps = ({ start = 'Freeze', end = 'ArrowRight' } = {}) => ({
   },
 });
 
-/**
- * Used for showing multiple components within a Canvas.
- * @decorator
- */
-const withComponentGrid = (columns: number) => (Story: any) => (
-  <div
-    style={{
-      display: 'grid',
-      gap: '2rem',
-      gridTemplateColumns: `repeat(${columns}, auto)`,
-      justifyItems: 'center',
-      alignItems: 'center',
-    }}
-  >
-    <Story />
-  </div>
-);
-
 /**
  * Convenience controls for previewing rich markup,
  * not otherwise possible via Storybook
@@ -308,7 +312,7 @@ export const Sentiment: StoryObj<PreviewStoryArgs> = {
     previewIconEnd: false,
     previewAvatars: false,
   },
-  decorators: [withComponentGrid(2)],
+  decorators: [withComponentGrid('30rem')],
   parameters: augmentIconProps(),
 };
 
@@ -347,7 +351,7 @@ export const Priority: StoryObj<PreviewStoryArgs> = {
     previewIconEnd: false,
     previewAvatars: false,
   },
-  decorators: [withComponentGrid(4)],
+  decorators: [withComponentGrid()],
 };
 
 /**
@@ -381,7 +385,7 @@ export const Size: StoryObj<PreviewStoryArgs> = {
     previewIconEnd: false,
     previewAvatars: false,
   },
-  decorators: [withComponentGrid(3)],
+  decorators: [withComponentGrid()],
 };
 
 /**
@@ -417,7 +421,7 @@ export const Disabled: StoryObj<PreviewStoryArgs> = {
 
     return (
       <Button {...props} {...previewProps}>
-        Button as anchor
+        Disabled button
       </Button>
     );
   },
@@ -464,7 +468,7 @@ export const DisplayBlock: StoryObj<PreviewStoryArgs> = {
 
     return (
       <Button {...props} {...previewProps}>
-        Button as anchor
+        Full-width button
       </Button>
     );
   },
@@ -529,7 +533,7 @@ export const WithIcons: StoryObj<PreviewStoryArgs> = {
     size: 'md',
   },
   parameters: augmentIconProps(),
-  decorators: [withComponentGrid(3)],
+  decorators: [withComponentGrid()],
 };
 
 /**
@@ -599,7 +603,7 @@ export const WithAvatars: StoryObj<PreviewStoryArgs> = {
       },
     },
   },
-  decorators: [withComponentGrid(4)],
+  decorators: [withComponentGrid()],
 };
 
 /**