fix: design feedback

jpmorganchase · Dec 20, 2023 · 67f381a · 67f381a
1 parent 5811991
commit 67f381a
Showing 1 changed file with 46 additions and 37 deletions.
diff --git a/packages/core/stories/patterns/contact-details/contact-details.stories.tsx b/packages/core/stories/patterns/contact-details/contact-details.stories.tsx
@@ -6,6 +6,7 @@ import {
   Button,
   Tooltip,
   FlexLayout,
+  FlowLayout,
 } from "@salt-ds/core";
 import {
   WomanIcon,
@@ -15,22 +16,24 @@ import {
   ChatIcon,
   ChevronDownIcon,
   ChevronUpIcon,
+  UserBadgeIcon,
 } from "@salt-ds/icons";
 import { Meta } from "@storybook/react";
 import { useState } from "react";
+import persona from "../../assets/avatar.png";
 
 export default {
   title: "Patterns/Contact Details",
 } as Meta;
 
 const basicContact = {
   primary: "Jane Doe",
-  secondary: "Company Name",
+  secondary: "This is a long secondary title to show that the text will wrap",
   metadata: [
     {
       label: "Role",
       value: "Analyst",
-      icon: <WomanIcon aria-hidden />,
+      icon: <UserBadgeIcon aria-hidden />,
     },
     {
       label: "Location",
@@ -50,21 +53,25 @@ const basicContact = {
   ],
 };
 
-export const ContactDetails = ({
-  avatarSrc = "https://storybook.saltdesignsystem.com/assets/avatar-840503bf.png",
-}) => {
+export const ContactDetails = ({ avatarSrc = { persona } }) => {
   return (
-    <StackLayout direction={"row"} gap={1}>
+    <StackLayout
+      direction={"row"}
+      gap={1}
+      style={{
+        width: "300px",
+      }}
+    >
       <Avatar
         src={avatarSrc}
         aria-label={basicContact.primary}
-        fallbackIcon={<WomanIcon />}
+        fallbackIcon={<UserBadgeIcon />}
         size={2}
       />
       <StackLayout direction={"column"} gap={1}>
         <Text styleAs="h3">{basicContact.primary}</Text>
         <Text styleAs="h4">{basicContact.secondary}</Text>
-        <StackLayout direction={"row"}>
+        <StackLayout direction={"row"} gap={1}>
           <StackLayout gap={1} direction={"column"}>
             {basicContact.metadata.map((metadata) => {
               return (
@@ -87,7 +94,7 @@ export const ContactDetails = ({
 
 export const Horizontal = () => {
   return (
-    <StackLayout direction={"row"} gap={1}>
+    <StackLayout direction={"row"} gap={1} style={{ width: "400px" }}>
       <Avatar
         src="https://storybook.saltdesignsystem.com/assets/avatar-840503bf.png"
         aria-label={basicContact.primary}
@@ -97,7 +104,7 @@ export const Horizontal = () => {
       <StackLayout direction={"column"} gap={1}>
         <Text styleAs="h3">{basicContact.primary}</Text>
         <Text styleAs="h4">{basicContact.secondary}</Text>
-        <StackLayout gap={1} direction={"row"}>
+        <FlowLayout gap={1}>
           {basicContact.metadata.map((metadata) => {
             return (
               <FlexLayout
@@ -113,7 +120,7 @@ export const Horizontal = () => {
               </FlexLayout>
             );
           })}
-        </StackLayout>
+        </FlowLayout>
       </StackLayout>
     </StackLayout>
   );
@@ -133,7 +140,7 @@ export const CardEmbedded = () => {
 
 export const QuickAction = () => {
   return (
-    <StackLayout direction="row" gap={1}>
+    <StackLayout direction="row" gap={1} style={{ width: "300px" }}>
       <Avatar
         src="https://storybook.saltdesignsystem.com/assets/avatar-840503bf.png"
         aria-label={basicContact.primary}
@@ -181,7 +188,7 @@ export const CollapsableDetails = () => {
     setExpandedDetails(!expandedDetails);
   }
   return (
-    <StackLayout direction="row" gap={1}>
+    <StackLayout direction="row" gap={1} style={{ width: "300px" }}>
       <Avatar
         src="https://storybook.saltdesignsystem.com/assets/avatar-840503bf.png"
         aria-label={basicContact.primary}
@@ -192,30 +199,32 @@ export const CollapsableDetails = () => {
         <Text styleAs="h3">{basicContact.primary}</Text>
         <Text styleAs="h4">{basicContact.secondary}</Text>
         <StackLayout gap={1} direction={"row"}>
-          <Tooltip
-            content={`Email ${basicContact.primary}`}
-            placement={"bottom"}
-          >
-            <Button variant="secondary">
-              <MessageIcon aria-hidden />
-            </Button>
-          </Tooltip>
-          <Tooltip
-            content={`Call ${basicContact.primary}`}
-            placement={"bottom"}
-          >
-            <Button variant="secondary">
-              <CallIcon aria-hidden />
-            </Button>
-          </Tooltip>
-          <Tooltip
-            content={`Text ${basicContact.primary}`}
-            placement={"bottom"}
-          >
-            <Button variant="secondary">
-              <ChatIcon aria-hidden />
-            </Button>
-          </Tooltip>
+          <div style={{ flexGrow: "1" }}>
+            <Tooltip
+              content={`Email ${basicContact.primary}`}
+              placement={"bottom"}
+            >
+              <Button variant="secondary">
+                <MessageIcon aria-hidden />
+              </Button>
+            </Tooltip>
+            <Tooltip
+              content={`Call ${basicContact.primary}`}
+              placement={"bottom"}
+            >
+              <Button variant="secondary">
+                <CallIcon aria-hidden />
+              </Button>
+            </Tooltip>
+            <Tooltip
+              content={`Text ${basicContact.primary}`}
+              placement={"bottom"}
+            >
+              <Button variant="secondary">
+                <ChatIcon aria-hidden />
+              </Button>
+            </Tooltip>
+          </div>
           <Button
             onClick={handleClick}
             variant="secondary"