blob: 09464623300022c2035ff128bebf658d0f153efe (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
<script lang="ts" context="module">
import type { Shelf, EditorialLink } from '@jet-app/app-store/api/models';
interface EditorialLinkShelf extends Shelf {
contentType: 'smallStoryCard';
items: [EditorialLink];
}
export function isEditorialLinkShelf(
shelf: Shelf,
): shelf is EditorialLinkShelf {
const { contentType, items } = shelf;
return contentType === 'editorialLink' && Array.isArray(items);
}
</script>
<script lang="ts">
import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
import ChevronRightIcon from '~/sf-symbols/chevron.right.svg';
import LinkWrapper from '~/components/LinkWrapper.svelte';
export let shelf: EditorialLinkShelf;
$: item = shelf.items[0];
$: ({ clickAction, descriptionText, summaryText } = item);
</script>
<ShelfWrapper {shelf} withBottomPadding={false}>
<article>
<LinkWrapper
action={clickAction}
includeExternalLinkArrowIcon={false}
label={descriptionText}
>
<svelte:fragment>
<div>
<span class="title">{descriptionText}</span>
<span class="subtitle">{summaryText}</span>
</div>
<span class="icon-container" aria-hidden="true">
<ChevronRightIcon />
</span>
</svelte:fragment>
</LinkWrapper>
</article>
</ShelfWrapper>
<style lang="scss">
@use '@amp/web-shared-styles/sasskit-stylekit/ac-sasskit-config';
@use 'ac-sasskit/core/helpers' as *;
@use 'ac-sasskit/core/locale' as *;
article {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
padding: 16px;
margin: 0 var(--bodyGutter);
border-radius: var(--global-border-radius-medium);
background-color: var(--systemQuinary);
transition: background-color 210ms ease-out;
}
article:hover {
cursor: pointer;
// a fallback for browsers that don't support relative colors (e.g. the `from` syntax)
background-color: var(--systemQuinary);
// stylelint-disable-next-line color-function-notation
background-color: rgb(
from var(--systemQuinary) r g b / calc(alpha + 0.02)
);
}
article:hover .icon-container {
transform: translateX(2px);
@include rtl {
transform: translateX(-2px) rotate(-180deg);
}
}
div {
display: flex;
flex-direction: column;
gap: 4px;
}
.title {
font: var(--body-emphasized);
}
.subtitle {
color: var(--systemSecondary);
}
.icon-container {
position: relative;
height: 10px;
aspect-ratio: 0.9;
transition: transform 210ms ease-out;
@include rtl {
transform: rotate(-180deg);
}
}
.icon-container :global(path:not([fill='none'])) {
fill: var(--systemPrimary);
}
article :global(a) {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
&:hover {
text-decoration: none;
}
}
</style>
|
