blob: 850b0d01cab659a7267e252e1116538d6509007e (
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
|
<script lang="ts">
import type { Shelf } from '@jet-app/app-store/api/models';
import ShelfTitle from '~/components/Shelf/Title.svelte';
export let shelf: Shelf | undefined = undefined;
/**
* Whether or not to automatically display the shelf "centered" at the normal
* page width for the App Store
*
* When `false`, the shelf is not constrained horizontally in any way
*
* The value of this property may be ignored when the shelf's `.presentationHints`
* indicate that it is being rendered in a context where "centering" would not be
* appropriate
*
* @default true
*/
export let centered: boolean = false;
export let withTopBorder: boolean = false;
export let withTopMargin: boolean = false;
export let withPaddingTop: boolean = true;
export let withBottomPadding: boolean = true;
$: seeAllAction =
shelf?.header?.titleAction ??
shelf?.header?.accessoryAction ??
shelf?.seeAllAction;
</script>
<section
id={shelf?.id}
data-test-id="shelf-wrapper"
class="shelf"
class:centered
class:border-top={withTopBorder}
class:margin-top={withTopMargin}
class:padding-top={withPaddingTop}
class:padding-bottom={withBottomPadding}
>
{#if $$slots['title']}
<slot name="title" />
{:else if shelf?.header?.title}
<ShelfTitle
title={shelf.header.title}
subtitle={shelf.header.subtitle}
{seeAllAction}
/>
{:else if shelf?.title}
<ShelfTitle
title={shelf.title}
subtitle={shelf.subtitle}
{seeAllAction}
/>
{/if}
<slot />
</section>
<style>
.padding-top {
padding-top: 13px;
}
.centered {
margin: 0 var(--bodyGutter);
}
.margin-top {
margin-top: 13px;
}
.border-top {
border-top: 1px solid var(--systemGray4);
}
.shelf.padding-bottom {
padding-bottom: 32px;
}
</style>
|
