@transferwise/components 46.126.0 → 46.128.0

package/src/iconButton/IconButton.story.tsx

@@ -1,5 +1,18 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { ArrowLeft, Cross, Defrost, Edit, Menu, Plus } from '@transferwise/icons';
+import {
+  ArrowLeft,
+  Cross,
+  Defrost,
+  Edit,
+  Menu,
+  Plus,
+  Settings,
+  Star,
+  Travel,
+  Briefcase,
+  Bank,
+  Freeze,
+} from '@transferwise/icons';
 import IconButton, { Props } from './IconButton';
 import { action } from 'storybook/actions';
 import Body from '../body';
@@ -114,48 +127,167 @@ export const Basic: Story = {
  */
 export const SentimentAwareness: Story = {
   render: () => {
+    const priorities = ['primary', 'secondary', 'tertiary', 'minimal', 'disabled'] as const;
+    const sentiments = ['success', 'warning', 'negative', 'neutral', 'proposition'] as const;
+
     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)' }}
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {/* Header row with priority labels */}
+        <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '4px', gap: '8px' }}>
+          <div style={{ width: '82px', paddingLeft: '8px' }} />
+          {priorities.map((priority) => (
+            <div
+              key={priority}
+              style={{
+                width: '32px',
+                textAlign: 'center',
+                fontSize: '11px',
+                fontWeight: 'bold',
+                writingMode: 'vertical-rl',
+                transform: 'rotate(180deg)',
+                height: '60px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
             >
-              <IconButton
-                size={32}
-                aria-label="Primary action"
-                priority="primary"
-                type="default"
-                onClick={action('button click')}
-              >
-                <Plus />
-              </IconButton>
-              <IconButton
-                size={32}
-                aria-label="Secondary action"
-                priority="secondary"
-                type="default"
-                onClick={action('button click')}
-              >
-                <Defrost />
-              </IconButton>
-              <IconButton
-                size={32}
-                aria-label="Disabled action"
-                priority="primary"
-                type="default"
-                disabled
-                onClick={action('button click')}
-              >
-                <Menu />
-              </IconButton>
-            </SentimentSurface>
-          ),
-        )}
-      </>
+              {priority}
+            </div>
+          ))}
+        </div>
+
+        {/* Rows for each sentiment with base and elevated emphasis */}
+        {sentiments.flatMap((sentiment) => [
+          <SentimentSurface
+            key={`${sentiment}-base`}
+            sentiment={sentiment}
+            emphasis="base"
+            style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
+          >
+            <div
+              style={{
+                width: '82px',
+                fontSize: '11px',
+                fontWeight: 'bold',
+                textAlign: 'left',
+                paddingLeft: '8px',
+              }}
+            >
+              {sentiment} (base)
+            </div>
+            <IconButton
+              size={32}
+              aria-label="Primary action"
+              priority="primary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Plus />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Secondary action"
+              priority="secondary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Settings />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Tertiary action"
+              priority="tertiary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Star />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Minimal action"
+              priority="minimal"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Travel />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Disabled action"
+              priority="primary"
+              type="default"
+              disabled
+              onClick={action('button click')}
+            >
+              <Menu />
+            </IconButton>
+          </SentimentSurface>,
+          <SentimentSurface
+            key={`${sentiment}-elevated`}
+            sentiment={sentiment}
+            emphasis="elevated"
+            style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
+          >
+            <div
+              style={{
+                width: '82px',
+                fontSize: '11px',
+                fontWeight: 'bold',
+                textAlign: 'left',
+                paddingLeft: '8px',
+              }}
+            >
+              {sentiment} (elevated)
+            </div>
+            <IconButton
+              size={32}
+              aria-label="Primary action"
+              priority="primary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Briefcase />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Secondary action"
+              priority="secondary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Bank />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Tertiary action"
+              priority="tertiary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Freeze />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Minimal action"
+              priority="minimal"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Edit />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Disabled action"
+              priority="primary"
+              type="default"
+              disabled
+              onClick={action('button click')}
+            >
+              <Cross />
+            </IconButton>
+          </SentimentSurface>,
+        ])}
+      </div>
     );
   },
   parameters: {
@@ -166,11 +298,4 @@ export const SentimentAwareness: Story = {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-        <Story />
-      </div>
-    ),
-  ],
 };

package/src/iconButton/IconButton.test.story.tsx

@@ -0,0 +1,194 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Menu, Plus, Settings, Star, Travel } from '@transferwise/icons';
+import { action } from 'storybook/actions';
+import IconButton from './IconButton';
+import SentimentSurface from '../sentimentSurface';
+import { allModes } from '../../.storybook/modes';
+
+export default {
+  title: 'Actions/IconButton/Tests',
+  component: IconButton,
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof IconButton>;
+
+type Story = StoryObj<typeof IconButton>;
+
+/**
+ * IconButton displayed across all themes and sentiments for visual regression testing.
+ */
+export const AllThemesAndSentiments: Story = {
+  render: () => {
+    const priorities = ['primary', 'secondary', 'tertiary', 'minimal', 'disabled'] as const;
+    const sentiments = ['negative', 'warning', 'neutral', 'success', 'proposition'] as const;
+    const icons = [Plus, Settings, Star, Travel];
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {/* Header row with priority labels */}
+        <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '4px', gap: '8px' }}>
+          <div style={{ width: '82px', paddingLeft: '8px' }} />
+          {priorities.map((priority) => (
+            <div
+              key={priority}
+              style={{
+                width: '32px',
+                textAlign: 'center',
+                fontSize: '11px',
+                fontWeight: 'bold',
+                writingMode: 'vertical-rl',
+                transform: 'rotate(180deg)',
+                height: '60px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              {priority}
+            </div>
+          ))}
+        </div>
+
+        {/* Rows for each sentiment with base and elevated emphasis */}
+        {sentiments.flatMap((sentiment) => [
+          <SentimentSurface
+            key={`${sentiment}-base`}
+            sentiment={sentiment}
+            emphasis="base"
+            style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
+          >
+            <div
+              style={{
+                width: '82px',
+                fontSize: '11px',
+                fontWeight: 'bold',
+                textAlign: 'left',
+                paddingLeft: '8px',
+              }}
+            >
+              {sentiment} (base)
+            </div>
+            <IconButton
+              size={32}
+              aria-label="Primary action"
+              priority="primary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Plus />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Secondary action"
+              priority="secondary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Settings />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Tertiary action"
+              priority="tertiary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Star />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Minimal action"
+              priority="minimal"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Travel />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Disabled action"
+              priority="primary"
+              type="default"
+              disabled
+              onClick={action('button click')}
+            >
+              <Menu />
+            </IconButton>
+          </SentimentSurface>,
+          <SentimentSurface
+            key={`${sentiment}-elevated`}
+            sentiment={sentiment}
+            emphasis="elevated"
+            style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
+          >
+            <div
+              style={{
+                width: '82px',
+                fontSize: '11px',
+                fontWeight: 'bold',
+                textAlign: 'left',
+                paddingLeft: '8px',
+              }}
+            >
+              {sentiment} (elevated)
+            </div>
+            <IconButton
+              size={32}
+              aria-label="Primary action"
+              priority="primary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Plus />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Secondary action"
+              priority="secondary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Settings />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Tertiary action"
+              priority="tertiary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Star />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Minimal action"
+              priority="minimal"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Travel />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Disabled action"
+              priority="primary"
+              type="default"
+              disabled
+              onClick={action('button click')}
+            >
+              <Menu />
+            </IconButton>
+          </SentimentSurface>,
+        ])}
+      </div>
+    );
+  },
+  parameters: {
+    padding: '16px',
+    variants: ['default', 'dark', 'bright-green', 'forest-green'],
+    chromatic: {
+      dark: allModes.dark,
+      brightGreen: allModes.brightGreen,
+      forestGreen: allModes.forestGreen,
+    },
+  },
+};

package/src/index.ts

@@ -181,6 +181,7 @@ export {
   SelectInput,
   SelectInputOptionContent,
   SelectInputTriggerButton,
+  sortByRelevance,
 } from './inputs/SelectInput';
 export { TextArea } from './inputs/TextArea';
 export { default as InstructionsList } from './instructionsList';

package/src/inputs/SelectInput.story.tsx

@@ -624,6 +624,7 @@ interface CountryWithCurrency extends Country {
 const countriesWithCurrency: CountryWithCurrency[] = [
   { code: 'AD', name: 'Andorra', keywords: ['united states dollar'] },
   { code: 'DE', name: 'Germany', keywords: ['EUR'] },
+  { code: 'NR', name: 'New United Republic', keywords: ['NUR'] },
   { code: 'US', name: 'United States', keywords: ['USD'] },
   { code: 'ZM', name: 'Zambia', keywords: ['USD', 'united states dollar'] },
 ];
@@ -649,38 +650,50 @@ export const WithCustomSearchResultSorting: Story<CountryWithCurrency> = {
     value: countriesWithCurrency[0],
     filterable: true,
     filterPlaceholder: 'Type a currency / country',
-    sortFilteredOptions: (a, b, searchQuery) => {
-      const normalizedQuery = searchQuery.toLowerCase();
-      const nameA = a.value.name.toLowerCase();
-      const nameB = b.value.name.toLowerCase();
-
-      // Prioritize countries where name contains the search query
-      const aNameMatch = nameA.includes(normalizedQuery);
-      const bNameMatch = nameB.includes(normalizedQuery);
-
-      if (aNameMatch && !bNameMatch) return -1;
-      if (!aNameMatch && bNameMatch) return 1;
-
-      // Then sort alphabetically
-      return nameA.localeCompare(nameB);
-    },
+    sortFilteredOptions: SelectInput.sortByRelevance((value) => value.name),
     size: 'lg',
   } satisfies Story<CountryWithCurrency>['args'],
   decorators: [
     (Story) => (
       <div>
         <p className="m-b-3 np-text-body-default" style={{ maxWidth: '600px' }}>
-          This example demonstrates custom sorting with the <code>sortFilteredOptions</code> prop.
+          This example uses the built-in <code>SelectInput.sortByRelevance</code> helper to sort
+          filtered results by relevance. It prioritises: exact matches → starts with → contains →
+          alphabetical.
           <br />
           <br />
-          Try searching for &quot;united&quot; - Without the custom sorter, it would just be the
-          provided options order.
+          Try searching for &quot;united&quot; to see the sorting tiers in action:
           <br />
-          With a customer sorter function in this story, the countries with &quot;United&quot; in
-          their name appear first, followed by countries that only match via keywords.
+          1. <strong>United States</strong> — name starts with &quot;United&quot;
+          <br />
+          2. <strong>New United Republic</strong> — name contains &quot;United&quot;
+          <br />
+          3. <strong>Andorra, Zambia</strong> — match only via keywords
         </p>
         <Story />
       </div>
     ),
   ],
+  parameters: {
+    docs: {
+      source: {
+        code: `<SelectInput
+  filterable
+  filterPlaceholder="Type a currency / country"
+  sortFilteredOptions={SelectInput.sortByRelevance((value) => value.name)}
+  items={countries.map((country) => ({
+    type: 'option',
+    value: country,
+    filterMatchers: [country.name, country.code, ...country.keywords],
+  }))}
+  renderValue={(country) => (
+    <SelectInputOptionContent
+      title={country.name}
+      icon={<Flag code={country.code} />}
+    />
+  )}
+/>`,
+      },
+    },
+  },
 };