@transferwise/components 0.0.0-experimental-7124ba8 → 0.0.0-experimental-5d9dbc3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-7124ba8",
+  "version": "0.0.0-experimental-5d9dbc3",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/listItem/_stories/ListItem.story.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { MultiCurrency, Plus } from '@transferwise/icons';
+import { Plus } from '@transferwise/icons';
 import {
   createSandboxStory,
   globalScope,
@@ -618,3 +618,37 @@ export const StylingLabels: Story = {
     );
   },
 };
+
+export const CustomSubtitleColoring: Story = {
+  parameters: {
+    controls: {
+      disable: true,
+    },
+    docs: {
+      source: {
+        code: `<List>
+  <ListItem
+    title="List item title"
+    subtitle={
+      <Emphasis text="This is <important>important</important> and <negative>this</negative> is <positive>positive</positive>." />
+    }
+    control={<ListItem.Button onClick={() => {}}>Click me</ListItem.Button>}
+  />
+</List>`,
+      },
+    },
+  },
+  render: function Render() {
+    return (
+      <List>
+        <ListItem
+          title="List item title"
+          subtitle={
+            <Emphasis text="This is <important>important</important> and <negative>this</negative> is <positive>positive</positive>." />
+          }
+          control={<ListItem.Button onClick={() => {}}>Click me</ListItem.Button>}
+        />
+      </List>
+    );
+  },
+};