feat(List): support multiple texts in sub title

mittwald · Dec 18, 2024 · 87e0cf6 · 87e0cf6
1 parent 6f3067b
commit 87e0cf6
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/...nts/src/components/List/components/Items/components/Item/components/View/View.module.scss b/...nts/src/components/List/components/Items/components/Item/components/View/View.module.scss
@@ -35,7 +35,7 @@
       grid-template-columns: 1fr;
     }
 
-    &:not(:has(.text)) {
+    &:not(:has(.subTitle)) {
       grid-template-areas: "avatar title";
 
       &:not(:has(.avatar)) {
@@ -53,9 +53,15 @@
       align-self: center;
     }
 
-    .text {
+    .subTitle {
       grid-area: subtitle;
       font-size: var(--list-item--subtitle-font-size);
+
+      .text:not(:last-child):after {
+        content: "–";
+        display: inline-block;
+        margin: 0 var(--size-rem--s);
+      }
     }
   }
 

diff --git a/.../components/src/components/List/components/Items/components/Item/components/View/View.tsx b/.../components/src/components/List/components/Items/components/Item/components/View/View.tsx
@@ -52,7 +52,7 @@ export const View = (props: Props) => {
     },
     Text: {
       className: styles.text,
-      tunnelId: "title",
+      tunnelId: "text",
     },
     Link: {
       unstyled: true,
@@ -69,6 +69,9 @@ export const View = (props: Props) => {
             {children}
             <div className={styles.title}>
               <TunnelExit id="title" />
+              <div className={styles.subTitle}>
+                <TunnelExit id="text" />
+              </div>
             </div>
           </div>
           <TunnelExit id="button" />

diff --git a/packages/components/src/components/List/stories/ListItem.stories.tsx b/packages/components/src/components/List/stories/ListItem.stories.tsx
@@ -140,3 +140,16 @@ export const WithActionGroup: Story = {
     </View>
   ),
 };
+
+export const WithMultipleTexts: Story = {
+  render: () => (
+    <View>
+      <Avatar>
+        <Image alt="John Doe" src={dummyText.imageSrc} />
+      </Avatar>
+      <Heading>John Doe</Heading>
+      <Text>Mittwald</Text>
+      <Text>Development</Text>
+    </View>
+  ),
+};