Skip to content

list-item POC #2911

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jamieomaguire wants to merge 8 commits into
base: main
Choose a base branch
from
Open

list-item POC #2911

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b179f4d
ideate using avatar
jamieomaguire May 27, 2026
b250e50
flatten slot structure and flush last item to end
jamieomaguire May 27, 2026
12bd984
prototype 1
jamieomaguire May 27, 2026
4cbcbb8
basic style text
jamieomaguire May 27, 2026
91fe9ca
interactions!
jamieomaguire May 27, 2026
834d8b8
switch list
jamieomaguire May 27, 2026
6968027
split text slot into primary and secondary
jamieomaguire May 28, 2026
dc5b621
list height fix
jamieomaguire Jun 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 71 additions & 15 deletions apps/pie-storybook/stories/pie-avatar.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@
import { type Meta } from '@storybook/web-components';

import '@justeattakeaway/pie-webc/components/avatar';
import { type AvatarProps, defaultProps, tags } from '@justeattakeaway/pie-webc/components/avatar';

Check warning on line 5 in apps/pie-storybook/stories/pie-avatar.stories.ts

View workflow job for this annotation

GitHub Actions / lint-js 

'tags' is defined but never used

import { ifDefined } from 'lit/directives/if-defined.js';

Check warning on line 7 in apps/pie-storybook/stories/pie-avatar.stories.ts

View workflow job for this annotation

GitHub Actions / lint-js 

'ifDefined' is defined but never used
import { createStory } from '../utilities';
import '@justeattakeaway/pie-thumbnail';

type AvatarStoryMeta = Meta<AvatarProps>;

Expand All @@ -15,20 +16,7 @@
title: 'Components/Avatar',
component: 'pie-avatar',
argTypes: {
label: {
description: 'The name to display in the Avatar as initials. Should be a username, first and last name or company name.',
control: 'text',
},
tag: {
description: 'Set the element tag of the avatar.',
control: 'select',
options: tags,
defaultValue: {
summary: defaultProps.tag,
},
},
src: {
description: 'Used to load an image to display inside the Avatar',
type: {
control: 'text',
},
},
Expand All @@ -44,10 +32,78 @@

export default avatarStoryMeta;

const Template = ({ label, tag, src }: AvatarProps) => html`

Check warning on line 35 in apps/pie-storybook/stories/pie-avatar.stories.ts

View workflow job for this annotation

GitHub Actions / lint-js 

'src' is defined but never used

Check warning on line 35 in apps/pie-storybook/stories/pie-avatar.stories.ts

View workflow job for this annotation

GitHub Actions / lint-js 

'tag' is defined but never used

Check warning on line 35 in apps/pie-storybook/stories/pie-avatar.stories.ts

View workflow job for this annotation

GitHub Actions / lint-js 

'label' is defined but never used
<pie-avatar label="${ifDefined(label)}" tag="${ifDefined(tag)}" src="${ifDefined(src)}"></pie-avatar>
<div style="min-width: 300px; display: flex; gap: 8px; flex-direction: column;">
<pie-avatar type="checkbox">
<label for="1">
Apple
<input id="1" type="radio" name="fruit" value="apple" />
</label>
</pie-avatar>
<pie-avatar type="checkbox">
<label for="2">
Banana
<input id="2" type="radio" name="fruit" value="banana" />
</label>
</pie-avatar>
</div>
<div style="margin-top: 24px; min-width: 300px; display: flex; gap: 8px; flex-direction: column;">
<pie-avatar type="checkbox">
<label for="3">
<p>Broccoli</p>
</label>
<input id="3" type="radio" name="veg" value="broccoli" />
<span>3rd thing</span>
<span>4rd thing</span>
</pie-avatar>

<pie-avatar type="checkbox">
<label for="4">
<pie-thumbnail src="./static/images/pie-logo.svg"></pie-thumbnail>
<p>carrot</p>
</label>
<input id="4" type="radio" name="veg" value="carrot" />
</pie-avatar>
</div>

<div style="margin-top: 42px; min-width: 300px; display: flex; gap: 8px; flex-direction: column;">
<pie-avatar type="checkbox">
<label for="5">
Apple
<input id="5" type="checkbox" name="fruit" value="apple" />
</label>
</pie-avatar>
<pie-avatar type="checkbox">
<label for="6">
Banana
<input id="6" type="checkbox" name="fruit" value="banana" />
</label>
</pie-avatar>
</div>

<div style="margin-top: 24px; min-width: 300px; display: flex; gap: 8px; flex-direction: column;">
<pie-avatar type="checkbox">
<label for="7">
<input id="7" type="checkbox" name="veg" value="broccoli" />
<p>Broccoli</p>
</label>
</pie-avatar>
<pie-avatar type="checkbox">

<pie-thumbnail src="./static/images/pie-logo.svg"></pie-thumbnail>
<p>carrot</p>
<input id="8" type="checkbox" name="veg" value="carrot" />
<input id="8" type="checkbox" name="veg" value="carrot" />

</pie-avatar>
</div>
`;

// <pie-avatar type="ordered-list">
// <input id="3" type="radio" name="fruit" value="mango" />
// <label for="3">mango</label>
// </pie-avatar>

const createAvatarStory = createStory<AvatarProps>(Template, defaultArgs);

export const Default = createAvatarStory();
Expand Down
177 changes: 176 additions & 1 deletion apps/pie-storybook/stories/pie-list.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@ import { html } from 'lit';
import { type Meta } from '@storybook/web-components';

import '@justeattakeaway/pie-webc/components/list';
import '@justeattakeaway/pie-webc/components/list-item';
import '@justeattakeaway/pie-webc/components/thumbnail';
import '@justeattakeaway/pie-webc/components/tag';
import '@justeattakeaway/pie-webc/components/switch';
import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js';

import { type ListProps } from '@justeattakeaway/pie-webc/components/list';

import { createStory } from '../utilities';
Expand All @@ -28,7 +34,176 @@ export default listStoryMeta;
// TODO: remove the eslint-disable rule when props are added
// eslint-disable-next-line no-empty-pattern
const Template = ({}: ListProps) => html`
<pie-list></pie-list>
<div style="width: 400px">
<h2>Single item list</h2>
<pie-list>
<pie-list-item is-bold>
<pie-thumbnail size="40" slot="leading" src="./static/images/pie-logo.svg"></pie-thumbnail>
<span slot="primaryText">Primary text</span>
<span slot="secondaryText">Secondary text</span>
<span slot="trailing">Meta text</span>
</pie-list-item>
</pie-list>

<h2>Multi-item lists</h2>
<pie-list>
<pie-list-item is-bold>
<pie-thumbnail size="40" slot="leading" src="./static/images/pie-logo.svg"></pie-thumbnail>
<span slot="primaryText">Primary text</span>
<span slot="secondaryText">Secondary text</span>
<span slot="trailing">Meta text</span>
</pie-list-item>

<pie-list-item is-bold>
<pie-thumbnail size="40" slot="leading" src="./static/images/pie-logo.svg"></pie-thumbnail>
<span slot="primaryText">Primary text</span>
<span slot="secondaryText">Secondary text</span>
<span slot="trailing">Meta text</span>
</pie-list-item>

<pie-list-item>
<icon-placeholder slot="leading"></icon-placeholder>
<span slot="primaryText">Primary text</span>
<span slot="secondaryText">Secondary text</span>
<span slot="trailing">Meta text</span>
</pie-list-item>

<pie-list-item>
<icon-placeholder slot="leading"></icon-placeholder>
<span slot="primaryText">Primary text</span>
<span slot="secondaryText">Secondary text</span>
<span slot="trailing">Meta text</span>
</pie-list-item>
</pie-list>

<h2>Radio group Trailing</h2>
<pie-list type="interactive">
<pie-list-item>
<pie-thumbnail size="40" slot="leading" src="./static/images/pie-logo.svg"></pie-thumbnail>
<label for="radio1" slot="primaryText">Option One</label>
<span id="secondary-text-1" slot="secondaryText">Details for option one</span>
<input aria-describedby="secondary-text-1" slot="trailing" name="radios" type="radio" id="radio1" value="radio1" />
</pie-list-item>

<pie-list-item>
<pie-thumbnail size="40" slot="leading" src="./static/images/pie-logo.svg"></pie-thumbnail>
<label for="radio2" slot="primaryText">Option Two</label>
<span id="secondary-text-2" slot="secondaryText">Details for option two</span>
<input aria-describedby="secondary-text-2" slot="trailing" name="radios" type="radio" id="radio2" value="radio2" />
</pie-list-item>

<pie-list-item>
<pie-thumbnail size="40" slot="leading" src="./static/images/pie-logo.svg"></pie-thumbnail>
<label for="radio3" slot="primaryText">Option Three</label>
<span id="secondary-text-3" slot="secondaryText">Details for option three</span>
<input aria-describedby="secondary-text-3" slot="trailing" name="radios" type="radio" id="radio3" value="radio3" />
</pie-list-item>

<pie-list-item>
<pie-thumbnail size="40" slot="leading" src="./static/images/pie-logo.svg"></pie-thumbnail>
<label for="radio4" slot="primaryText">Option Four</label>
<span id="secondary-text-4" slot="secondaryText">Details for option four</span>
<input aria-describedby="secondary-text-4" slot="trailing" name="radios" type="radio" id="radio4" value="radio4" />
</pie-list-item>
</pie-list>

<h2>Radio group Leading</h2>
<pie-list type="interactive">
<pie-list-item>
<input aria-describedby="desc-credit-card tag-credit-card" slot="leading" name="payment_method" type="radio" id="radio-credit-card" value="credit_card" />
<label for="radio-credit-card" slot="primaryText">Credit Card</label>
<span id="desc-credit-card" slot="secondaryText">Visa, Mastercard, Amex</span>
<pie-tag id="tag-credit-card" slot="trailing">Card</pie-tag>
</pie-list-item>

<pie-list-item>
<input aria-describedby="desc-paypal tag-paypal" slot="leading" name="payment_method" type="radio" id="radio-paypal" value="paypal" />
<label for="radio-paypal" slot="primaryText">PayPal</label>
<span id="desc-paypal" slot="secondaryText">Pay with your PayPal account balance</span>
<pie-tag id="tag-paypal" slot="trailing">Online</pie-tag>
</pie-list-item>

<pie-list-item>
<input aria-describedby="desc-apple-pay tag-apple-pay" slot="leading" name="payment_method" type="radio" id="radio-apple-pay" value="apple_pay" />
<label for="radio-apple-pay" slot="primaryText">Apple Pay</label>
<span id="desc-apple-pay" slot="secondaryText">Fast checkout using your Apple Wallet</span>
<pie-tag id="tag-apple-pay" slot="trailing">Apple</pie-tag>
</pie-list-item>

<pie-list-item>
<input aria-describedby="desc-google-pay tag-google-pay" slot="leading" name="payment_method" type="radio" id="radio-google-pay" value="google_pay" />
<label for="radio-google-pay" slot="primaryText">Google Pay</label>
<span id="desc-google-pay" slot="secondaryText">Checkout securely with saved cards</span>
<pie-tag id="tag-google-pay" slot="trailing">Google</pie-tag>
</pie-list-item>

<pie-list-item>
<input aria-describedby="desc-bank-transfer tag-bank-transfer" slot="leading" name="payment_method" type="radio" id="radio-bank-transfer" value="bank_transfer" />
<label for="radio-bank-transfer" slot="primaryText">Bank Transfer</label>
<span id="desc-bank-transfer" slot="secondaryText">Direct wire from your checking account</span>
<pie-tag id="tag-bank-transfer" slot="trailing">Bank</pie-tag>
</pie-list-item>
</pie-list>

<h2>Switch group Trailing</h2>
<pie-list type="interactive">
<pie-list-item is-bold>
<label for="switch1" slot="primaryText">Option One</label>
<span id="secondary-text-1" slot="secondaryText">Details for option one</span>
<pie-switch aria-describedby="secondary-text-1" slot="trailing" name="switches" id="switch1"
value="switch1"></pie-switch>
</pie-list-item>

<pie-list-item is-bold>
<label for="switch2" slot="primaryText">Option Two</label>
<span id="secondary-text-2" slot="secondaryText">Details for option two</span>
<pie-switch aria-describedby="secondary-text-2" slot="trailing" name="switches" id="switch2"
value="switch2"></pie-switch>
</pie-list-item>

<pie-list-item>
<label for="switch3" slot="primaryText">Option Three</label>
<span id="secondary-text-3" slot="secondaryText">Details for option three</span>
<pie-switch aria-describedby="secondary-text-3" slot="trailing" name="switches" id="switch3"
value="switch3"></pie-switch>
</pie-list-item>

<pie-list-item>
<label for="switch4" slot="primaryText">Option Four</label>
<span id="secondary-text-4" slot="secondaryText">Details for option four</span>
<pie-switch aria-describedby="secondary-text-4" slot="trailing" name="switches" id="switch4"
value="switch4"></pie-switch>
</pie-list-item>
</pie-list>

<h2>Checkbox group</h2>
<pie-list>
<pie-list-item>
<label for="checkbox1">checkbox 1</label>
<input name="checkboxes" type="checkbox" id="checkbox1" value="checkbox1" />
</pie-list-item>
<pie-list-item>
<label for="checkbox2">checkbox 2</label>
<input name="checkboxes" type="checkbox" id="checkbox2" value="checkbox2" />
</pie-list-item>
<pie-list-item>
<label for="checkbox3">checkbox 3</label>
<input name="checkboxes" type="checkbox" id="checkbox3" value="checkbox3" />
</pie-list-item>
<pie-list-item>
<label for="checkbox4">checkbox 4</label>
<input name="checkboxes" type="checkbox" id="checkbox4" value="checkbox4" />
</pie-list-item>
<pie-list-item>
<label for="checkbox5">checkbox 5</label>
<input name="checkboxes" type="checkbox" id="checkbox5" value="checkbox5" />
</pie-list-item>
<pie-list-item>
<label for="checkbox6">checkbox 6</label>
<input name="checkboxes" type="checkbox" id="checkbox6" value="checkbox6" />
</pie-list-item>
</pie-list>
</div>
`;

export const Default = createStory<ListProps>(Template, defaultArgs)();
83 changes: 57 additions & 26 deletions packages/components/pie-avatar/src/avatar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,67 @@
:host {
// Note: For consistency sake, the recommended display should be either
// "block" or "inline-block", otherwise it can be ommited for floating elements
display: block;

display: flex;
--avatar-size: 32px;
border: 1px solid purple;
min-height: 48px;
}

.c-avatar-visuallyHidden {
@include p.visually-hidden;
}

.c-avatar {
display: flex;
justify-content: center;
align-items: center;
font-family: var(--dt-font-body-s-family);
@include p.font-size(--dt-font-body-s-size);
background-color: var(--dt-color-container-inverse);
color: var(--dt-color-content-interactive-primary);
width: var(--avatar-size);
height: var(--avatar-size);
border-radius:var(--dt-radius-rounded-e);
overflow: hidden;
}
:host([type="checkbox"]) {
::slotted(label) {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 5px 10px;
background: lightblue;
gap: 1em;
}

.c-avatar--image {
width: 100%;
height: 100%;
object-fit: cover;
::slotted(*:nth-child(n+3):last-child) {
margin-inline-start: auto;
}
}

.c-avatar--button {
border: none;
font-family: inherit;
}
// :host([type="checkbox"]) {
// ::slotted(label)::after {
// content: '';
// position: absolute;
// inset: 0;
// background-color: lightgreen;
// }
// }

@include p.radio-slotted-input-base('input[type="radio"]');
@include p.radio-slotted-interactive-state('input[type="radio"]', 'dt-color-interactive-brand');
@include p.radio-slotted-animations('input[type="radio"]');

// .c-avatar-visuallyHidden {
// @include p.visually-hidden;
// }

// .c-avatar {
// display: flex;
// justify-content: center;
// align-items: center;
// font-family: var(--dt-font-body-s-family);
// @include p.font-size(--dt-font-body-s-size);
// background-color: var(--dt-color-container-inverse);
// color: var(--dt-color-content-interactive-primary);
// width: var(--avatar-size);
// height: var(--avatar-size);
// border-radius:var(--dt-radius-rounded-e);
// overflow: hidden;
// }

// .c-avatar--image {
// width: 100%;
// height: 100%;
// object-fit: cover;
// }

// .c-avatar--button {
// border: none;
// font-family: inherit;
// }
Loading
Loading