@transferwise/components 0.0.0-experimental-1d87337 → 0.0.0-experimental-db4a390

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-1d87337",
+  "version": "0.0.0-experimental-db4a390",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -84,13 +84,13 @@
     "storybook-addon-tag-badges": "^2.0.2",
     "storybook-addon-test-codegen": "^2.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "0.0.0-experimental-1d87337",
+    "@transferwise/neptune-css": "0.0.0-experimental-db4a390",
     "@wise/components-theming": "1.9.1",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",
-    "@transferwise/neptune-css": "0.0.0-experimental-1d87337",
+    "@transferwise/neptune-css": "0.0.0-experimental-db4a390",
     "@wise/art": "^2.24.4",
     "@wise/components-theming": "^1.6.2",
     "react": ">=18",

package/src/button/Button.story.tsx

@@ -915,40 +915,46 @@ export const AccessibilityAddons: Story = {
  * colours if wrapped inside the [SentimentSurface](/?path=/docs/content-sentimentsurface--docs) component
  */
 export const SentimentAwareness: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map((sentiment) => (
-        <SentimentSurface
-          key={sentiment}
-          sentiment={sentiment}
-          className="p-a-1"
-          style={{
-            color: 'var(--color-sentiment-content-primary)',
-            backgroundColor: 'var(--color-sentiment-background-surface)',
-          }}
-        >
-          <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-            <Button v2>Primary</Button>
-            <Button v2 priority="secondary">
-              Secondary
-            </Button>
-            <Button v2 priority="secondary-neutral">
-              Secondary Neutral
-            </Button>
-            <Button v2 sentiment="negative">
-              Negative
-            </Button>
-            <Button v2 disabled>
-              Disabled
-            </Button>
-          </div>
-        </SentimentSurface>
-      ))}
-    </div>
-  ),
+  render: (args) => {
+    return (
+      <>
+        {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map(
+          (sentiment) => (
+            <SentimentSurface
+              key={sentiment}
+              sentiment={sentiment}
+              className="p-a-1 d-flex align-items-center"
+              style={{ gap: 'var(--size-8)' }}
+            >
+              <Button v2>Primary</Button>
+              <Button v2 priority="secondary">
+                Secondary
+              </Button>
+              <Button v2 priority="secondary-neutral">
+                Secondary Neutral
+              </Button>
+              <Button v2 disabled>
+                Disabled
+              </Button>
+            </SentimentSurface>
+          ),
+        )}
+      </>
+    );
+  },
   parameters: {
     docs: {
       source: { type: 'dynamic' },
+      canvas: {
+        sourceState: 'hidden',
+      },
     },
   },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        <Story />
+      </div>
+    ),
+  ],
 };