Skip to content
This repository was archived by the owner on Apr 25, 2025. It is now read-only.

Commit ef18727

Browse files
agligaagliga
authored
feat: added item-tile, item-tile-group, and layout-grid (#2474)
1 parent 60b3299 commit ef18727

File tree

31 files changed

+1605
-31
lines changed

31 files changed

+1605
-31
lines changed

‎.changeset/slow-pets-melt.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ebay/ebayui-core": minor
3+
---
4+
5+
feat: added item-tile, item-tile-group, and layout-grid

‎.storybook/preview.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export const parameters = {
1818
"dialogs",
1919
"form input",
2020
"graphics & icons",
21+
"layout",
2122
"media",
2223
"navigation & disclosure",
2324
"notices & tips",

‎src/components/ebay-file-preview-card-group/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99

1010
Group of file preview cards, primarily used alongside `ebay-file-input`.
1111

12+
## Compatibility
13+
14+
This component only works on Marko 5 and later.
15+
1216
## Examples and Documentation
1317

1418
- [Storybook](https://ebay.github.io/ebayui-core/?path=/story/media-ebay-file-preview-card-group)

‎src/components/ebay-file-preview-card/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99

1010
Preview card for files, primarily used alongside `ebay-file-preview-card-group` and `ebay-file-input`.
1111

12+
## Compatibility
13+
14+
This component only works on Marko 5 and later.
15+
1216
## Examples and Documentation
1317

1418
- [Storybook](https://ebay.github.io/ebayui-core/?path=/story/media-ebay-file-preview-card)

‎src/components/ebay-file-preview-card/component.ts

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,27 +13,31 @@ export type FilePreviewCardMenuAction = {
1313
label: string;
1414
};
1515

16+
export type FilePreviewCardFile =
17+
| File
18+
| {
19+
name: string;
20+
type?: File["type"];
21+
src?: string;
22+
};
1623
interface FilePreviewCardInput extends Omit<Marko.HTML.Div, `on${string}`> {
1724
"a11y-cancel-upload-text"?: AttrString;
1825
"delete-text"?: AttrString;
1926
as?: keyof Marko.NativeTags;
20-
file?:
21-
| File
22-
| {
23-
name: string;
24-
type?: File["type"];
25-
src?: string;
26-
};
27+
file?: FilePreviewCardFile;
2728
status?: "uploading";
29+
href?: string;
2830
"info-text"?: AttrString;
2931
"menu-actions"?: FilePreviewCardMenuAction[];
32+
action?: Marko.AttrTag<Marko.HTML.Button>;
3033
"see-more"?: number;
3134
"a11y-see-more-text"?: AttrString;
3235
"footer-title"?: AttrString;
3336
"footer-subtitle"?: AttrString;
3437
"on-menu-action"?: (name: string, event: MenuButtonEvent) => void;
3538
"on-see-more"?: () => void;
3639
"on-delete"?: () => void;
40+
"on-action"?: () => void;
3741
"on-cancel"?: () => void;
3842
}
3943

‎src/components/ebay-file-preview-card/index.marko

Lines changed: 37 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { processHtmlAttributes } from "../../common/html-attributes";
12
$ const {
23
a11yCancelUploadText,
34
deleteText,
@@ -9,6 +10,8 @@ $ const {
910
a11ySeeMoreText,
1011
footerTitle,
1112
footerSubtitle,
13+
action,
14+
href,
1215
as: cardEl = "div",
1316
...htmlInput
1417
} = input;
@@ -31,28 +34,30 @@ $ file.type = type;
3134
3235
<${cardEl} class="file-preview-card" ...htmlInput>
3336
<div class="file-preview-card__body">
34-
<if(status === "uploading")>
35-
<ebay-progress-spinner
36-
class="file-preview-card__asset"
37-
size="large"
38-
/>
39-
</if>
40-
<else-if(file.type === "image")>
41-
<img
42-
class={
43-
"file-preview-card__asset": true,
44-
"file-preview-card__asset--fade": seeMore !== undefined,
45-
}
46-
src=file.src
47-
alt=file.name
48-
>
49-
</else-if>
50-
<else-if(file.type === "video")>
51-
<video class="file-preview-card__asset" src=file.src/>
52-
</else-if>
53-
<else>
54-
<ebay-file-24-icon class="file-preview-card__asset"/>
55-
</else>
37+
<${href ? "a" : null} href=href>
38+
<if(status === "uploading")>
39+
<ebay-progress-spinner
40+
class="file-preview-card__asset"
41+
size="large"
42+
/>
43+
</if>
44+
<else-if(file.type === "image")>
45+
<img
46+
class={
47+
"file-preview-card__asset": true,
48+
"file-preview-card__asset--fade": seeMore !== undefined,
49+
}
50+
src=file.src
51+
alt=file.name
52+
>
53+
</else-if>
54+
<else-if(file.type === "video")>
55+
<video class="file-preview-card__asset" src=file.src/>
56+
</else-if>
57+
<else>
58+
<ebay-file-24-icon class="file-preview-card__asset"/>
59+
</else>
60+
</>
5661
<if(seeMore)>
5762
<button
5863
type="button"
@@ -90,15 +95,23 @@ $ file.type = type;
9095
</for>
9196
</ebay-menu-button>
9297
</if>
93-
<else>
98+
<else-if(action)>
99+
<ebay-icon-button
100+
class="file-preview-card__action"
101+
onClick("emit", "action")
102+
...processHtmlAttributes(action)>
103+
<${action} />
104+
</ebay-icon-button>
105+
</else-if>
106+
<else-if(deleteText)>
94107
<ebay-icon-button
95108
class="file-preview-card__action"
96109
aria-label=deleteText
97110
onClick("emit", "delete")
98111
>
99112
<ebay-delete-16-icon/>
100113
</ebay-icon-button>
101-
</else>
114+
</else-if>
102115
</else>
103116
<if(file.type !== "image")>
104117
<div class="file-preview-card__info">

‎src/components/ebay-item-tile-group/README.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<h1 style="display: flex; justify-content: space-between; align-items: center;">
2+
<span>
3+
ebay-item-tile
4+
</span>
5+
<span style="font-weight: normal; font-size: medium; margin-bottom: -15px;">
6+
DS v1.0.0
7+
</span>
8+
</h1>
9+
10+
## Compatibility
11+
12+
This component only works on Marko 5 and later.
13+
14+
## Examples and Documentation
15+
16+
- [Storybook](https://ebay.github.io/ebayui-core/?path=/story/structure-ebay-item-tile)
17+
- [Storybook Docs](https://ebay.github.io/ebayui-core/?path=/docs/structure-ebay-item-tile)
18+
- [Code Examples](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-item-tile/examples)

‎src/components/ebay-item-tile-group/browser.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"requireRemap": [
3+
{
4+
"from": "./style",
5+
"to": "../../common/empty",
6+
"if-flag": "ebayui-no-skin"
7+
}
8+
]
9+
}

‎src/components/ebay-item-tile-group/examples/default.marko

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
class {}
2+
<ebay-item-tile-group on-action("emit", "action") ...input>
3+
<@item href="https://ebay.com"
4+
file={
5+
name: "file-name.jpg",
6+
type: "image/jpeg",
7+
src: "https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-real-square-pic.jpg",
8+
}
9+
>
10+
<@action aria-label="Add to watchlist">
11+
<ebay-heart-16-icon/>
12+
</@action>
13+
<@supertitle>
14+
<ebay-signal status="time-sensitive">
15+
Time Sensitive
16+
</ebay-signal>
17+
</@supertitle>
18+
<@title>
19+
Apple iPhone 11 Pro Max
20+
</@title>
21+
<@subtitle>
22+
256GB Space Gray
23+
</@subtitle>
24+
<@description class="price">
25+
$29.99
26+
<span class="clipped"> Was: </span>
27+
<s class="list-price"> $68.99 </s>
28+
</@description>
29+
<@description>
30+
<a href="https://ebay.com"> Buy it now </a>
31+
</@description>
32+
<@description>Free shipping</@description>
33+
<@description>Sponsored</@description>
34+
</@item>
35+
<@item href="https://ebay.com"
36+
file={
37+
name: "file-name.jpg",
38+
type: "image/jpeg",
39+
src: "https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-real-square-pic.jpg",
40+
}
41+
>
42+
<@action aria-label="Add to watchlist">
43+
<ebay-heart-16-icon/>
44+
</@action>
45+
<@supertitle>
46+
<ebay-signal status="time-sensitive">
47+
Time Sensitive
48+
</ebay-signal>
49+
</@supertitle>
50+
<@title>
51+
Apple iPhone 11 Pro Max
52+
</@title>
53+
<@subtitle>
54+
256GB Space Gray
55+
</@subtitle>
56+
<@description class="price">
57+
$29.99
58+
<span class="clipped"> Was: </span>
59+
<s class="list-price"> $68.99 </s>
60+
</@description>
61+
<@description>
62+
<a href="https://ebay.com"> Buy it now </a>
63+
</@description>
64+
<@description>Free shipping</@description>
65+
<@description>Sponsored</@description>
66+
</@item>
67+
<@item href="https://ebay.com"
68+
file={
69+
name: "file-name.jpg",
70+
type: "image/jpeg",
71+
src: "https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-real-square-pic.jpg",
72+
}
73+
>
74+
<@action aria-label="Add to watchlist">
75+
<ebay-heart-16-icon/>
76+
</@action>
77+
<@supertitle>
78+
<ebay-signal status="time-sensitive">
79+
Time Sensitive
80+
</ebay-signal>
81+
</@supertitle>
82+
<@title>
83+
Apple iPhone 11 Pro Max
84+
</@title>
85+
<@subtitle>
86+
256GB Space Gray
87+
</@subtitle>
88+
<@description class="price">
89+
$29.99
90+
<span class="clipped"> Was: </span>
91+
<s class="list-price"> $68.99 </s>
92+
</@description>
93+
<@description>
94+
<a href="https://ebay.com"> Buy it now </a>
95+
</@description>
96+
<@description>Free shipping</@description>
97+
<@description>Sponsored</@description>
98+
</@item>
99+
<@item href="https://ebay.com"
100+
file={
101+
name: "file-name.jpg",
102+
type: "image/jpeg",
103+
src: "https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-real-square-pic.jpg",
104+
}
105+
>
106+
<@action aria-label="Add to watchlist">
107+
<ebay-heart-16-icon/>
108+
</@action>
109+
<@supertitle>
110+
<ebay-signal status="time-sensitive">
111+
Time Sensitive
112+
</ebay-signal>
113+
</@supertitle>
114+
<@title>
115+
Apple iPhone 11 Pro Max
116+
</@title>
117+
<@subtitle>
118+
256GB Space Gray
119+
</@subtitle>
120+
<@description class="price">
121+
$29.99
122+
<span class="clipped"> Was: </span>
123+
<s class="list-price"> $68.99 </s>
124+
</@description>
125+
<@description>
126+
<a href="https://ebay.com"> Buy it now </a>
127+
</@description>
128+
<@description>Free shipping</@description>
129+
<@description>Sponsored</@description>
130+
</@item>
131+
<@item href="https://ebay.com"
132+
file={
133+
name: "file-name.jpg",
134+
type: "image/jpeg",
135+
src: "https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-real-square-pic.jpg",
136+
}
137+
>
138+
<@action aria-label="Add to watchlist">
139+
<ebay-heart-16-icon/>
140+
</@action>
141+
<@supertitle>
142+
<ebay-signal status="time-sensitive">
143+
Time Sensitive
144+
</ebay-signal>
145+
</@supertitle>
146+
<@title>
147+
Apple iPhone 11 Pro Max
148+
</@title>
149+
<@subtitle>
150+
256GB Space Gray
151+
</@subtitle>
152+
<@description class="price">
153+
$29.99
154+
<span class="clipped"> Was: </span>
155+
<s class="list-price"> $68.99 </s>
156+
</@description>
157+
<@description>
158+
<a href="https://ebay.com"> Buy it now </a>
159+
</@description>
160+
<@description>Free shipping</@description>
161+
<@description>Sponsored</@description>
162+
</@item>
163+
<@item href="https://ebay.com"
164+
file={
165+
name: "file-name.jpg",
166+
type: "image/jpeg",
167+
src: "https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-real-square-pic.jpg",
168+
}
169+
>
170+
<@action aria-label="Add to watchlist">
171+
<ebay-heart-16-icon/>
172+
</@action>
173+
<@supertitle>
174+
<ebay-signal status="time-sensitive">
175+
Time Sensitive
176+
</ebay-signal>
177+
</@supertitle>
178+
<@title>
179+
Apple iPhone 11 Pro Max
180+
</@title>
181+
<@subtitle>
182+
256GB Space Gray
183+
</@subtitle>
184+
<@description class="price">
185+
$29.99
186+
<span class="clipped"> Was: </span>
187+
<s class="list-price"> $68.99 </s>
188+
</@description>
189+
<@description>
190+
<a href="https://ebay.com"> Buy it now </a>
191+
</@description>
192+
<@description>Free shipping</@description>
193+
<@description>Sponsored</@description>
194+
</@item>
195+
</ebay-item-tile-group>

0 commit comments

Comments
 (0)