@transferwise/components 0.0.0-experimental-b80ad21 → 0.0.0-experimental-f17f6cb

package/src/avatarView/AvatarView.story.tsx

@@ -10,6 +10,7 @@ import {
   Leaf,
   Plane,
   PlusCircle,
+  GiftBox,
   QrCode,
   Rewards,
   Target,
@@ -17,16 +18,23 @@ import {
   Transport,
   Wallet,
   Water,
+  Bank,
 } from '@transferwise/icons';
-import AvatarView, { AvatarViewProps } from '.';
 import { Flag } from '@wise/art';
+import AvatarView, { AvatarViewProps } from '.';
 import { getBrandColorFromSeed, getInitials, ProfileType } from '../common';
 import Display from '../display';
 import Body from '../body';
+import SentimentSurface from '../sentimentSurface';
 
 export default {
   title: 'Content/AvatarView',
   component: AvatarView,
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
 } satisfies Meta<typeof AvatarView>;
 
 type Story = StoryObj<typeof AvatarView>;
@@ -35,6 +43,20 @@ const profileName1 = 'Wolter White';
 const profileName2 = 'Tyler Durden';
 const sizes: AvatarViewProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
 
+const withComponentGrid = (Story: () => JSX.Element) => (
+  <div
+    style={{
+      width: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1rem',
+      maxWidth: '800px',
+    }}
+  >
+    <Story />
+  </div>
+);
+
 export const Selected: Story = {
   render: () => {
     return (
@@ -439,6 +461,95 @@ export const ProfileBrokenImageFallback: Story = {
   },
 };
 
+/**
+ * `AvatarView` is sentiment-aware and will automatically adjust its colours if wrapped inside the
+ * [SentimentSurface](?path=/docs/content-sentimentsurface--docs) component.
+ */
+export const SentimentAwareness: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+      source: { type: 'code' },
+    },
+  },
+  render: () => {
+    return (
+      <>
+        {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map((sentiment) =>
+          (['base', 'elevated'] as const).map((emphasis) => (
+            <SentimentSurface
+              key={`${sentiment}-${emphasis}`}
+              sentiment={sentiment}
+              emphasis={emphasis}
+              className="p-a-1 d-flex"
+              style={{ gap: 'var(--size-16)' }}
+            >
+              <AvatarView size={32}>
+                <Bank />
+              </AvatarView>
+              <AvatarView size={32} profileName="John Doe" />
+              <AvatarView size={32}>
+                <Flag code="JPY" intrinsicSize={32} />
+              </AvatarView>
+              <AvatarView size={32} interactive>
+                <Bank />
+              </AvatarView>
+              <AvatarView size={32} selected>
+                <Bank />
+              </AvatarView>
+              <AvatarView size={32} selected interactive>
+                <Bank />
+              </AvatarView>
+
+              {sentiment === 'proposition' ? (
+                <AvatarView
+                  size={32}
+                  badge={{
+                    asset: (
+                      <div
+                        className="d-flex align-items-center justify-content-center"
+                        style={{
+                          backgroundColor: 'var(--color-sentiment-interactive-primary)',
+                          color: 'var(--color-sentiment-interactive-control)',
+                          width: '100%',
+                          height: '100%',
+                        }}
+                      >
+                        <GiftBox />
+                      </div>
+                    ),
+                  }}
+                >
+                  <Bank />
+                </AvatarView>
+              ) : (
+                <AvatarView size={32} badge={{ status: sentiment }}>
+                  <Bank />
+                </AvatarView>
+              )}
+              <AvatarView size={32} badge={{ type: 'reference' }}>
+                <Bank />
+              </AvatarView>
+              <AvatarView size={32} badge={{ type: 'action' }}>
+                <Bank />
+              </AvatarView>
+              <AvatarView size={32} badge={{ type: 'notification' }}>
+                <Bank />
+              </AvatarView>
+              <AvatarView size={32} badge={{ type: 'online' }}>
+                <Bank />
+              </AvatarView>
+            </SentimentSurface>
+          )),
+        )}
+      </>
+    );
+  },
+  decorators: [withComponentGrid],
+};
+
 export const EdgeInstaces: Story = {
   render: () => {
     const css = `.custom-variant {

package/src/avatarView/AvatarView.tsx

@@ -106,7 +106,7 @@ const MAP_SELECTED_BORDER_WIDTH = {
 };
 
 /** Certain sizes of AvatarView has a custom offset for badge */
-const MAP_BADGE_POSITION = {
+const MAP_BADGE_POSITION: Partial<Record<NonNullable<Props['size']>, number>> = {
   24: -6,
   32: -4,
 };
@@ -155,10 +155,11 @@ function Badges({
           <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />
         )
       }
-      style={{
-        // @ts-expect-error CSS custom props allowed
-        '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,
-      }}
+      style={
+        {
+          '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,
+        } as React.CSSProperties
+      }
     >
       {children}
     </Badge>

package/src/button/Button.css

@@ -113,7 +113,7 @@
   --Button-color-active: var(--Button-secondary-neutral-color);
 }
 .wds-Button--secondary-neutral .wds-Button-icon--end {
-  color: var(--color-interactive-primary);
+  color: var(--Button-secondary-color);
 }
 .wds-Button--tertiary {
   --Button-background: var(--Button-tertiary-background);

package/src/button/Button.less

@@ -74,7 +74,7 @@
     --Button-color-active: var(--Button-secondary-neutral-color);
 
     .wds-Button-icon--end {
-      color: var(--color-interactive-primary);
+      color: var(--Button-secondary-color);
     }
   }
 

package/src/button/Button.story.tsx

@@ -696,116 +696,6 @@ export const WithAvatars: StoryObj<PreviewStoryArgs> = {
   decorators: [withComponentGrid()],
 };
 
-const buttonPriorities = ['primary', 'secondary', 'secondary-neutral', 'tertiary'] 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}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
-                block
-              >
-                {`${priority} default ${size}`}
-              </Button>
-              <Button
-                className="m-t-1 m-b-1"
-                v2
-                priority={priority as ButtonPriority}
-                size={size}
-                addonStart={{
-                  type: 'avatar',
-                  value: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
-                }}
-                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
-                block
-                disabled
-              >
-                {`${priority} default ${size} Disabled`}
-              </Button>
-              <Button
-                v2
-                priority={priority as ButtonPriority}
-                size={size}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
-                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}
-                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                block
-              >
-                {`${priority} negative ${size}`}
-              </Button>
-              <Button
-                className="m-t-1 m-b-1"
-                v2
-                sentiment="negative"
-                priority={priority as ButtonPriority}
-                size={size}
-                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                block
-                disabled
-              >
-                {`${priority} negative ${size} Disabled`}
-              </Button>
-              <Button
-                v2
-                sentiment="negative"
-                priority={priority as ButtonPriority}
-                size={size}
-                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                block
-                loading
-              >
-                {`${priority} negative ${size} Loading`}
-              </Button>
-            </div>
-          )),
-        )}
-      </div>
-    ),
-  },
-  { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
-);
-
 /**
  * **NB:** The button doesn't know how long its label is, how many words it consists of and
  * how zoomed in it is. That is likely to lead to scenarios in which the text will overflow
@@ -926,14 +816,39 @@ export const SentimentAwareness: Story = {
               className="p-a-1 d-flex align-items-center"
               style={{ gap: 'var(--size-8)' }}
             >
-              <Button v2>Primary</Button>
-              <Button v2 priority="secondary">
+              <Button
+                v2
+                size="md"
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+              >
+                Primary
+              </Button>
+              <Button
+                v2
+                size="md"
+                priority="secondary"
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+              >
                 Secondary
               </Button>
-              <Button v2 priority="secondary-neutral">
+              <Button
+                v2
+                size="md"
+                priority="secondary-neutral"
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+              >
                 Secondary Neutral
               </Button>
-              <Button v2 disabled>
+              <Button
+                v2
+                size="md"
+                disabled
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+              >
                 Disabled
               </Button>
             </SentimentSurface>

package/src/button/Button.tests.story.tsx

@@ -2,6 +2,10 @@ import { Meta } from '@storybook/react-webpack5';
 import Button from './Button.resolver';
 import { expect, userEvent, within } from 'storybook/test';
 import { storyConfig } from '../test-utils';
+import { ButtonPriority } from './Button.types';
+import { ArrowRight, ChevronRight, Freeze } from '@transferwise/icons';
+import SentimentSurface from '../sentimentSurface';
+import { Flag } from '@wise/art';
 
 const meta: Meta<typeof Button> = {
   component: Button,
@@ -25,3 +29,188 @@ FocusTertiary.play = async ({ canvasElement }) => {
   const buttonElement: HTMLButtonElement = canvas.getByRole('button');
   await expect(buttonElement).toHaveFocus();
 };
+
+const buttonPriorities = ['primary', 'secondary', 'secondary-neutral', 'tertiary'] 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}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+                block
+              >
+                {`${priority} default ${size}`}
+              </Button>
+              <Button
+                className="m-t-1 m-b-1"
+                v2
+                priority={priority as ButtonPriority}
+                size={size}
+                addonStart={{
+                  type: 'avatar',
+                  value: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
+                }}
+                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+                block
+                disabled
+              >
+                {`${priority} default ${size} Disabled`}
+              </Button>
+              <Button
+                v2
+                priority={priority as ButtonPriority}
+                size={size}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+                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}
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+                block
+              >
+                {`${priority} negative ${size}`}
+              </Button>
+              <Button
+                className="m-t-1 m-b-1"
+                v2
+                sentiment="negative"
+                priority={priority as ButtonPriority}
+                size={size}
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+                block
+                disabled
+              >
+                {`${priority} negative ${size} Disabled`}
+              </Button>
+              <Button
+                v2
+                sentiment="negative"
+                priority={priority as ButtonPriority}
+                size={size}
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+                block
+                loading
+              >
+                {`${priority} negative ${size} Loading`}
+              </Button>
+            </div>
+          )),
+        )}
+      </div>
+    ),
+  },
+  { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
+);
+
+export const SentimentAwareness = storyConfig(
+  {
+    render: () => {
+      const PERMUTATIONS = {
+        emphasis: ['base', 'elevated'] as const,
+        sentiment: ['success', 'warning', 'negative', 'neutral', 'proposition'] as const,
+        disabled: [false, true] as const,
+        others: [
+          {
+            addonStart: { type: 'avatar' as const, value: [{ asset: <Freeze /> }] },
+            addonEnd: { type: 'icon' as const, value: <ChevronRight /> },
+          },
+          {
+            addonStart: { type: 'avatar' as const, value: [{ profileName: 'John Doe' }] },
+          },
+          {
+            addonStart: {
+              type: 'avatar' as const,
+              value: [
+                {
+                  asset: <Flag code="gb" />,
+                },
+                { asset: <Freeze /> },
+              ],
+            },
+          },
+          {
+            loading: true,
+          },
+        ],
+        priority: ['primary', 'secondary', 'secondary-neutral'] as const,
+      };
+
+      return (
+        <>
+          {PERMUTATIONS.emphasis.map((emphasis) =>
+            PERMUTATIONS.sentiment.map((sentiment) => (
+              <SentimentSurface
+                key={`${emphasis}-${sentiment}`}
+                sentiment={sentiment}
+                emphasis={emphasis}
+                style={{
+                  padding: 'var(--size-8)',
+                  display: 'grid',
+                  gridTemplateColumns: 'repeat(3, min-content)',
+                  gap: 'var(--size-8)',
+                }}
+              >
+                {PERMUTATIONS.disabled.map((disabled) =>
+                  PERMUTATIONS.others.map((media, mediaVariant) =>
+                    PERMUTATIONS.priority.map((priority) => (
+                      <div key={`${emphasis}-${sentiment}-${disabled}-${priority}-${mediaVariant}`}>
+                        <Button v2 size="md" disabled={disabled} priority={priority} {...media}>
+                          {priority}
+                        </Button>
+                      </div>
+                    )),
+                  ),
+                )}
+              </SentimentSurface>
+            )),
+          )}
+        </>
+      );
+    },
+    decorators: [
+      (Story: React.ComponentType) => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+          <Story />
+        </div>
+      ),
+    ],
+  },
+  {},
+);

package/src/index.ts

@@ -35,7 +35,6 @@ export type { HeaderProps } from './header';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
-export type { InlinePromptProps } from './prompt';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputProps } from './inputs/Input';
 export type { InputGroupProps } from './inputs/InputGroup';
@@ -90,7 +89,6 @@ export type { SnackbarContextType } from './snackbar/SnackbarContext';
 export type { StatusIconProps } from './statusIcon';
 export type { StickyProps } from './sticky';
 export type { SummaryProps } from './summary';
-export type { SentimentSurfaceProps } from './sentimentSurface';
 export type { SwitchProps } from './switch';
 export type { SwitchOptionProps } from './switchOption';
 export type { TabItem, TabsProps } from './tabs';
@@ -171,7 +169,6 @@ export { default as Header } from './header';
 export { default as Image } from './image';
 export { default as Info } from './info';
 export { default as InlineAlert } from './inlineAlert';
-export { InlinePrompt } from './prompt';
 export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
 export { Input } from './inputs/Input';
 export { InputGroup } from './inputs/InputGroup';
@@ -212,7 +209,6 @@ export { default as ResponsivePanel } from './common/responsivePanel';
 export { default as Section } from './section';
 export { default as SegmentedControl } from './segmentedControl';
 export { default as Select } from './select';
-export { default as SentimentSurface } from './sentimentSurface';
 export { default as SlidingPanel } from './slidingPanel';
 export { default as SnackbarPortal } from './snackbar/Snackbar';
 export { SnackbarConsumer, SnackbarContext } from './snackbar/SnackbarContext';

package/src/main.css

@@ -962,18 +962,20 @@
 }
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
-  color: var(--color-content-primary);
+  color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
 .np-avatar-view-interactive {
   cursor: pointer;
 }
 .np-avatar-view-interactive .np-circle {
   background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: var(--color-interactive-primary);
+  background-color: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-neutral));
+  color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
 }
 .np-avatar-view-non-interactive .np-circle {
   background-color: transparent;
+  background-color: var(--color-sentiment-background-surface, transparent);
+  --circle-border-color: var(--color-sentiment-content-primary, var(--color-border-neutral));
 }
 .np-avatar-view-non-interactive .np-avatar-view-content .wds-flag {
   box-shadow: none;
@@ -1308,7 +1310,7 @@
   --Button-color-active: var(--Button-secondary-neutral-color);
 }
 .wds-Button--secondary-neutral .wds-Button-icon--end {
-  color: var(--color-interactive-primary);
+  color: var(--Button-secondary-color);
 }
 .wds-Button--tertiary {
   --Button-background: var(--Button-tertiary-background);

package/src/{tokens/tokens.story.tsx → neptune-css/NeptuneCSS.story.tsx}

@@ -7,8 +7,8 @@ import IconButton from '../iconButton';
 import Body from '../body';
 
 const meta: Meta = {
-  title: 'Foundations/tokens',
-  tags: ['!autodocs'],
+  title: 'NeptuneCSS',
+  component: () => <div>NeptuneCSS Example</div>,
 };
 
 export default meta;

package/src/prompt/InlinePrompt/InlinePrompt.story.tsx

@@ -22,9 +22,8 @@ const withComponentGrid =
   );
 
 export default {
-  title: 'Feedback/InlinePrompt',
+  title: 'Internal/InlinePrompt',
   component: InlinePrompt,
-  tags: ['new'],
   args: {
     loading: false,
     muted: false,

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -36,9 +36,7 @@ export type InlinePromptProps = {
 
 /**
  * Inline prompts appear alongside a specific component on the screen. They help the user stay
- * informed, fix something, or get more out of what they're doing. <br />
- *
- * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.
+ * informed, fix something, or get more out of what they're doing.
  */
 export const InlinePrompt = ({
   sentiment = Sentiment.POSITIVE,

package/src/provider/theme/ThemeProvider.story.tsx

@@ -22,7 +22,7 @@ function ThemeProvider(props: ThemeProviderProps) {
 
 export default {
   component: ThemeProvider,
-  title: 'Foundations/ThemeProvider',
+  title: 'Other/ThemeProvider',
 } satisfies Meta<typeof ThemeProvider>;
 
 type Story = StoryObj<typeof ThemeProvider>;