blob: e68f4b12f6301eb470a0d8489f533c3e9b863feb (
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
|
<!--
@component
Renders the "Title" and "See All action" for a `Shelf`
### Supported CSS Variables
- `--shelf-title-font`: overrides the font used for the "title" element
-->
<script lang="ts">
import { type Opt, isSome } from '@jet/environment/types/optional';
import { type Action, isFlowAction } from '@jet-app/app-store/api/models';
import SFSymbol from '~/components/SFSymbol.svelte';
import LinkWrapper from '../LinkWrapper.svelte';
export let title: string;
export let subtitle: Opt<string> = undefined;
export let seeAllAction: Opt<Action> = undefined;
</script>
<div class="title-action-wrapper" class:with-subtitle={!!subtitle}>
<LinkWrapper action={seeAllAction} label={title}>
<div class="link-contents">
<h2 class="shelf-title" data-test-id="shelf-title">{title}</h2>
{#if isSome(seeAllAction) && isFlowAction(seeAllAction)}
<span
class="chevron-container"
data-test-id="shelf-see-all-chevron"
aria-hidden="true"
>
<SFSymbol name="chevron.forward" />
</span>
{/if}
</div>
</LinkWrapper>
</div>
{#if subtitle}
<p>{subtitle}</p>
{/if}
<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 *;
.title-action-wrapper {
display: flex;
align-items: end;
justify-content: space-between;
margin: 0 var(--bodyGutter) 13px;
}
.title-action-wrapper.with-subtitle {
margin-bottom: 3px;
}
.title-action-wrapper :global(a:hover) {
text-decoration: none;
}
p {
font: var(--title-3-tall);
color: var(--systemSecondary);
margin: 0 var(--bodyGutter) 13px;
}
h2 {
color: var(--systemPrimary, #000);
font: var(--shelf-title-font, var(--title-2-emphasized));
text-wrap: pretty;
}
.link-contents {
display: flex;
align-items: center;
gap: 6px;
}
.chevron-container {
line-height: 0;
padding: 6px 0 4px;
display: block;
}
.chevron-container :global(svg) {
height: 12px;
display: block;
translate: 0 0;
transition: translate 210ms ease-out;
@include rtl {
transform: rotate(180deg);
}
}
.chevron-container :global(svg path:not([fill='none'])) {
fill: var(--systemGray2);
}
.link-contents:hover .chevron-container :global(svg) {
translate: 1px 0;
@include rtl {
transform: rotate(180deg);
translate: -1px 0;
}
}
</style>
|
