feat(pie-list): improve list item styling and add new stories

Update list item component to enhance typography and layout:
- Use p.font-size() for better font size control
- Add line-height to primary text for improved readability
- Change compact variant padding for better vertical alignment
- Convert secondary text div to p element for semantic markup
- Adjust meta text font size using p.font-size()
- Remove margin from secondary text

Add new stories for list items with secondary text and icons/thumbnails

Author: matthew.hardern

apps/pie-storybook/stories/pie-list.stories.ts

@@ -192,6 +192,42 @@ export const CheckboxLeadingListItem: Story = {
   `,
 };
 
+export const IconLeadingListItemSecondaryText: Story = {
+    name: 'List Item - Icon Leading - Secondary Text',
+    parameters: {
+        backgrounds: {
+            default: 'background-subtle',
+        },
+    },
+    render: () => html`
+    <div style="width: 350px">
+      <pie-list>
+        <pie-list-item leadingType="icon" primaryText="Next payment" secondaryText="4 May 2025, £1.99 per month">
+            <icon-plus-circle size="m" slot="leading"></icon-plus-circle>
+        </pie-list-item>
+      </pie-list>
+    </div>
+  `,
+};
+
+export const ThumbnailLeadingListItemSecondaryText: Story = {
+    name: 'List Item - Thumbnail Leading - Secondary Text',
+    parameters: {
+        backgrounds: {
+            default: 'background-subtle',
+        },
+    },
+    render: () => html`
+    <div style="width: 350px">
+      <pie-list>
+        <pie-list-item leadingType="thumbnail" primaryText="Next payment" secondaryText="4 May 2025, £1.99 per month">
+            <img slot="leading" src="https://placehold.co/32x24" alt="placeholder">
+        </pie-list-item>
+      </pie-list>
+    </div>
+  `,
+};
+
 //----------------------------------------------------------------------
 // 2. INTERACTIVITY (INTERACTIVE/NON-INTERACTIVE)
 //----------------------------------------------------------------------

packages/components/pie-list/src/pie-list-item/index.ts

@@ -488,7 +488,7 @@ export class PieListItem extends RtlMixin(PieElement) implements ListItemProps {
 
                     <!-- Secondary text -->
                     ${this.secondaryText ? html`
-                        <div class="c-list-item__secondary">${this.secondaryText}</div>
+                        <p class="c-list-item__secondary">${this.secondaryText}</p>
                     ` : html`
                         <slot name="secondary"></slot>
                     `}

packages/components/pie-list/src/pie-list-item/list-item.scss

@@ -35,8 +35,9 @@
 // Primary text styles
 .c-list-item__primary {
   color: var(--dt-color-content-default);
-  font-size: var(--dt-font-body-l-size);
+  font-size: #{p.font-size(--dt-font-body-l-size)};
   font-weight: var(--dt-font-weight-regular);
+  line-height: #{p.line-height(--dt-font-body-l-line-height)};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -45,10 +46,11 @@
 // Secondary text styles
 .c-list-item__secondary {
   color: var(--dt-color-content-subdued);
-  font-size: var(--dt-font-body-s-size);
+  font-size: #{p.font-size(--dt-font-body-s-size)};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin: 0;
 }
 
 // Leading content container - using logical properties for RTL support
@@ -72,15 +74,15 @@
 // Meta text styles
 .c-list-item__meta {
   color: var(--dt-color-content-subdued);
-  font-size: var(--dt-font-body-s-size);
+  font-size: #{p.font-size(--dt-font-body-s-size)};
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 // Compact variation
 .c-list-item--compact {
-  padding-block: var(--dt-spacing-b);
+  padding-block: var(--dt-spacing-c);
   padding-inline: var(--dt-spacing-d);
   min-height: 40px;
 }