@transferwise/components 0.0.0-experimental-4d90243 → 0.0.0-experimental-a308934

package/src/sentimentSurface/SentimentSurface.story.tsx

@@ -202,18 +202,26 @@ const TokenSwatch = ({ token }: { token: string }) => (
 export const EmphasisLevels: Story = {
   render: (args) => (
     <>
-      <SentimentSurface {...args} sentiment="negative" emphasis="base">
-        <div className="p-a-2">Negative - Base emphasis</div>
-      </SentimentSurface>
-      <SentimentSurface {...args} sentiment="negative" emphasis="elevated">
-        <div className="p-a-2">Negative - Elevated emphasis</div>
-      </SentimentSurface>
-      <SentimentSurface {...args} sentiment="success" emphasis="base">
-        <div className="p-a-2">Success - Base emphasis</div>
-      </SentimentSurface>
-      <SentimentSurface {...args} sentiment="success" emphasis="elevated">
-        <div className="p-a-2">Success - Elevated emphasis</div>
-      </SentimentSurface>
+      {sentiments.map((sentiment) => (
+        <div key={sentiment}>
+          <SentimentSurface
+            key={`${sentiment}-base`}
+            {...args}
+            sentiment={sentiment}
+            emphasis="base"
+          >
+            <div className="p-a-2 text-capitalize">{sentiment} - Base emphasis</div>
+          </SentimentSurface>
+          <SentimentSurface
+            key={`${sentiment}-elevated`}
+            {...args}
+            sentiment={sentiment}
+            emphasis="elevated"
+          >
+            <div className="p-a-2 text-capitalize">{sentiment} - Elevated emphasis</div>
+          </SentimentSurface>
+        </div>
+      ))}
     </>
   ),
   parameters: {
@@ -369,8 +377,8 @@ export const SentimentAwareComponents: Story = {
           {STATUS_NEGATIVE}
         </div>
 
-        <Header level="group" title="Success sentiment surface" />
-        <SentimentSurface sentiment="success">
+        <Header level="group" title="Success sentiment surface - Base emphasis" />
+        <SentimentSurface sentiment="success" emphasis="base">
           <div className="p-a-2 m-b-2 sentimentAwareComponent">
             {BODY}
             {AVATAR_SUCCESS}
@@ -378,8 +386,26 @@ export const SentimentAwareComponents: Story = {
           </div>
         </SentimentSurface>
 
-        <Header level="group" title="Negative sentiment surface" />
-        <SentimentSurface sentiment="negative">
+        <Header level="group" title="Success sentiment surface - Elevated emphasis" />
+        <SentimentSurface sentiment="success" emphasis="elevated">
+          <div className="p-a-2 m-b-2 sentimentAwareComponent">
+            {BODY}
+            {AVATAR_SUCCESS}
+            {STATUS_SUCCESS}
+          </div>
+        </SentimentSurface>
+
+        <Header level="group" title="Negative sentiment surface - Base emphasis" />
+        <SentimentSurface sentiment="negative" emphasis="base">
+          <div className="p-a-2 m-b-2 sentimentAwareComponent">
+            {BODY}
+            {AVATAR_NEGATIVE}
+            {STATUS_NEGATIVE}
+          </div>
+        </SentimentSurface>
+
+        <Header level="group" title="Negative sentiment surface - Elevated emphasis" />
+        <SentimentSurface sentiment="negative" emphasis="elevated">
           <div className="p-a-2 m-b-2 sentimentAwareComponent">
             {BODY}
             {AVATAR_NEGATIVE}
@@ -427,7 +453,7 @@ function CustomCard({ children, className }: { className?: string; children: Rea
 
 export const CustomComponents: Story = {
   tags: ['!autodocs', '!dev'],
-  render: (args) => (
+  render: () => (
     <>
       <style>{`
         .custom-card {