feat(pie-list): DSW-2960 implement list + list item component and tests by matthewhardern · Pull Request #2404 · justeattakeaway/pie

matthewhardern · 2025-06-09T08:57:19Z

Describe your changes (can list changeset entries if preferable)

Implements the initial version of the pie-list and pie-list-item components with basic functionality:

pie-list component:

Added variant prop supporting 'default' and 'compact' layouts
Added dividers prop to show separators between list items
Implemented proper semantic HTML with <ul role="list">
Integrated with PIE design system using CSS custom properties

pie-list-item component:

Added primaryText prop for text content
Added selected and disabled state props
Implemented proper accessibility with ARIA attributes
Applied PIE typography using font helpers

Additional changes:

Created Storybook stories with 4 variants (Default, Compact, WithDividers, CompactWithDividers)
Added test helpers and page objects for component testing
Implemented RTL support via RtlMixin
Added proper data-test-id attributes for testing

Author Checklist (complete before requesting a review, do not delete any)

I have performed a self-review of my code.
I have added thorough tests where applicable (unit / component / visual).
I have reviewed the PIE Storybook/PIE Docs PR preview.
I have reviewed visual test updates properly before approving.
If changes will affect consumers of the package, I have created a changeset entry.
If a changeset file has been created, I have tested these changes in PIE Aperture using the /test-aperture command.
I have filled out the DS Review Tracker checklist (Moving PR to "Ready to Review")

Not-applicable Checklist items

Visual test updates (none in this PR)

Task	Link
Aperture PR	🔗
NextJS 14 deployment	🔗
Nuxt 3 deployment	🔗
Vanilla deployment	🔗

Reviewer checklists (complete before approving)

Mark items as [-] N/A if not applicable.

Reviewer 1 - @jamieomaguire

I have reviewed the PIE Storybook/PIE Docs PR preview.
I have verified that all acceptance criteria for this ticket have been completed.
I have reviewed the Aperture changes (if added)
If there are visual test updates, I have reviewed them.

Reviewer 2 - @ashleynolan

I have reviewed the PIE Storybook/PIE Docs PR preview.
I have verified that all acceptance criteria for this ticket have been completed.
I have reviewed the Aperture changes (if added)
If there are visual test updates, I have reviewed them.

changeset-bot · 2025-06-09T08:57:23Z

🦋 Changeset detected

Latest commit: 77203c3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@justeattakeaway/pie-list	Minor
@justeattakeaway/pie-storybook	Patch
@justeattakeaway/pie-webc	Patch
@justeattakeaway/pie-docs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

…60-basic-list

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

packages/components/pie-list/pie-list.test.stories.ts

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

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

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

packages/components/pie-list/test/component/pie-list.spec.ts

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

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

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

Co-authored-by: Raouf <raouf.sawehli@justeattakeaway.com>

raoufswe · 2025-11-07T11:10:52Z

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

+
+    @property({
+        type: Boolean,
+        attribute: 'has-dividers',


i think we don't need this line anymore as we can use hasDividers as a css selector.

raoufswe · 2025-11-07T11:11:30Z

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

+}
+
+// Dividers between items
+:host([has-dividers]) ::slotted(pie-list-item:not(:last-child)),


Suggested change

:host([has-dividers]) ::slotted(pie-list-item:not(:last-child)),

:host([hasDividers]) ::slotted(pie-list-item:not(:last-child)),

raoufswe · 2025-11-07T11:11:41Z

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

+// Dividers between items
+:host([has-dividers]) ::slotted(pie-list-item:not(:last-child)),
+// Allow bespoke markup that renders native `<li>` elements.
+:host([has-dividers]) ::slotted(li:not(:last-child)) {


Suggested change

:host([has-dividers]) ::slotted(li:not(:last-child)) {

:host([hasDividers]) ::slotted(li:not(:last-child)) {

raoufswe · 2025-11-07T11:14:22Z

packages/components/pie-modal/test/helpers/page-object/pie-modal.component.ts

    private readonly headerLocator: Locator;
    private readonly descriptionLocator: Locator;
    readonly footerLocator: Locator;
-    private readonly page: Page;


is there a reason of this change or just a rebase issue?

github-actions bot added apps components pie-storybook pie-list labels Jun 9, 2025

github-actions bot temporarily deployed to storybook-pr-2404 June 9, 2025 09:01 Inactive

github-actions bot temporarily deployed to storybook-testing-pr-2404 June 9, 2025 09:02 Inactive

github-actions bot temporarily deployed to storybook-pr-2404 June 9, 2025 12:44 Inactive

github-actions bot temporarily deployed to storybook-testing-pr-2404 June 9, 2025 12:44 Inactive

matthewhardern force-pushed the dsw-2960-basic-list branch from cb8c46d to 7f35ff3 Compare June 9, 2025 13:47

github-actions bot temporarily deployed to storybook-pr-2404 June 9, 2025 13:51 Inactive

github-actions bot temporarily deployed to storybook-testing-pr-2404 June 9, 2025 13:52 Inactive

matthewhardern force-pushed the dsw-2960-basic-list branch from 7f35ff3 to e8e7f13 Compare June 10, 2025 07:56

github-actions bot temporarily deployed to storybook-pr-2404 June 10, 2025 08:00 Inactive

github-actions bot temporarily deployed to storybook-testing-pr-2404 June 10, 2025 08:01 Inactive

matthewhardern marked this pull request as ready for review June 10, 2025 08:12

matthewhardern requested review from a team as code owners June 10, 2025 08:12

matthewhardern changed the title ~~feat(pie-list): implement list + list item component and tests~~ feat(pie-list): DS2960 implement list + list item component and tests Jun 10, 2025

matthewhardern changed the title ~~feat(pie-list): DS2960 implement list + list item component and tests~~ feat(pie-list): DSW-2960 implement list + list item component and tests Jun 10, 2025

github-actions bot temporarily deployed to storybook-pr-2404 June 10, 2025 08:16 Inactive

github-actions bot temporarily deployed to storybook-testing-pr-2404 June 10, 2025 08:17 Inactive

matthewhardern force-pushed the dsw-2960-basic-list branch 4 times, most recently from cea6f8e to a482147 Compare June 11, 2025 07:59

github-actions bot temporarily deployed to storybook-pr-2404 June 11, 2025 08:04 Inactive

github-actions bot temporarily deployed to storybook-testing-pr-2404 June 11, 2025 08:04 Inactive

matthewhardern force-pushed the dsw-2960-basic-list branch from a482147 to bd1633d Compare June 16, 2025 08:34

github-actions bot temporarily deployed to storybook-pr-2404 June 16, 2025 08:38 Inactive

matthew.hardern added 4 commits October 6, 2025 12:13

fix(pie-list): DSW-2960 use host classes for state styling

8c2b963

Merge remote-tracking branch 'origin/dsw-2960-basic-list' into dsw-29…

7157150

…60-basic-list

fix(pie-list): DSW-2960 rely on slot fallback and drop default id

05f5ecf

fix(pie-list): DSW-2960 use active-01 tokens

f3192ef