@hyvor/design 2.1.8-beta.4 → 2.1.8-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
interface Logo {
|
|
3
|
+
name: string;
|
|
4
|
+
src: string;
|
|
5
|
+
href?: string;
|
|
6
|
+
width?: number;
|
|
7
|
+
height?: number;
|
|
8
|
+
// keep this one logo in its real colors instead of the shared white
|
|
9
|
+
// silhouette treatment below, for opaque, full-color icons (e.g. a
|
|
10
|
+
// square app icon) that would otherwise crush into a blank box
|
|
11
|
+
color?: boolean;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
interface Props {
|
|
15
|
+
logos: Logo[];
|
|
16
|
+
label?: string;
|
|
17
|
+
background?: string;
|
|
18
|
+
invert?: boolean;
|
|
19
|
+
marquee?: boolean;
|
|
20
|
+
speed?: number;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
let {
|
|
24
|
+
logos,
|
|
25
|
+
label = '',
|
|
26
|
+
background = 'var(--accent)',
|
|
27
|
+
invert = true,
|
|
28
|
+
marquee = true,
|
|
29
|
+
speed = 34
|
|
30
|
+
}: Props = $props();
|
|
31
|
+
|
|
32
|
+
// the track is rendered twice back to back and animated exactly -50%,
|
|
33
|
+
// since both halves are pixel-identical, the loop point is invisible
|
|
34
|
+
const track = $derived(marquee ? [...logos, ...logos] : logos);
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
{#snippet logoImg(logo: Logo, hidden = false)}
|
|
38
|
+
<img
|
|
39
|
+
src={logo.src}
|
|
40
|
+
alt={logo.name}
|
|
41
|
+
width={logo.width ?? 120}
|
|
42
|
+
height={logo.height ?? 28}
|
|
43
|
+
class="logo"
|
|
44
|
+
class:invert={invert && !logo.color}
|
|
45
|
+
class:color={logo.color}
|
|
46
|
+
aria-hidden={hidden}
|
|
47
|
+
/>
|
|
48
|
+
{/snippet}
|
|
49
|
+
|
|
50
|
+
<section class="hds-logo-strip" style:--ls-bg={background} style:--ls-speed="{speed}s">
|
|
51
|
+
<div class="hds-container">
|
|
52
|
+
{#if label}
|
|
53
|
+
<p class="label">{label}</p>
|
|
54
|
+
{/if}
|
|
55
|
+
|
|
56
|
+
{#if !marquee}
|
|
57
|
+
<div class="logos">
|
|
58
|
+
{#each logos as logo}
|
|
59
|
+
{#if logo.href}
|
|
60
|
+
<a href={logo.href} target="_blank" rel="noopener" class="logo-link">
|
|
61
|
+
{@render logoImg(logo)}
|
|
62
|
+
</a>
|
|
63
|
+
{:else}
|
|
64
|
+
{@render logoImg(logo)}
|
|
65
|
+
{/if}
|
|
66
|
+
{/each}
|
|
67
|
+
</div>
|
|
68
|
+
{/if}
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
{#if marquee}
|
|
72
|
+
<div class="marquee">
|
|
73
|
+
<div class="marquee-track">
|
|
74
|
+
{#each track as logo, i}
|
|
75
|
+
{@const hidden = i >= logos.length}
|
|
76
|
+
{#if logo.href}
|
|
77
|
+
<a
|
|
78
|
+
href={logo.href}
|
|
79
|
+
target="_blank"
|
|
80
|
+
rel="noopener"
|
|
81
|
+
class="logo-link"
|
|
82
|
+
tabindex={hidden ? -1 : undefined}
|
|
83
|
+
>
|
|
84
|
+
{@render logoImg(logo, hidden)}
|
|
85
|
+
</a>
|
|
86
|
+
{:else}
|
|
87
|
+
{@render logoImg(logo, hidden)}
|
|
88
|
+
{/if}
|
|
89
|
+
{/each}
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
{/if}
|
|
93
|
+
</section>
|
|
94
|
+
|
|
95
|
+
<style>
|
|
96
|
+
.hds-logo-strip {
|
|
97
|
+
background: var(--ls-bg);
|
|
98
|
+
padding: 52px 0;
|
|
99
|
+
overflow: hidden;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.label {
|
|
103
|
+
text-align: center;
|
|
104
|
+
font-size: 16px;
|
|
105
|
+
font-weight: 600;
|
|
106
|
+
letter-spacing: 0.07em;
|
|
107
|
+
text-transform: uppercase;
|
|
108
|
+
color: var(--accent-light-mid);
|
|
109
|
+
margin: 0 0 36px;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* static (non-marquee) layout */
|
|
113
|
+
.logos {
|
|
114
|
+
display: flex;
|
|
115
|
+
align-items: center;
|
|
116
|
+
justify-content: center;
|
|
117
|
+
flex-wrap: wrap;
|
|
118
|
+
gap: 24px 52px;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* marquee layout */
|
|
122
|
+
.marquee {
|
|
123
|
+
mask-image: linear-gradient(
|
|
124
|
+
to right,
|
|
125
|
+
transparent 0,
|
|
126
|
+
black 64px,
|
|
127
|
+
black calc(100% - 64px),
|
|
128
|
+
transparent 100%
|
|
129
|
+
);
|
|
130
|
+
-webkit-mask-image: linear-gradient(
|
|
131
|
+
to right,
|
|
132
|
+
transparent 0,
|
|
133
|
+
black 64px,
|
|
134
|
+
black calc(100% - 64px),
|
|
135
|
+
transparent 100%
|
|
136
|
+
);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.marquee-track {
|
|
140
|
+
display: flex;
|
|
141
|
+
align-items: center;
|
|
142
|
+
gap: 52px;
|
|
143
|
+
width: max-content;
|
|
144
|
+
animation: marquee-scroll var(--ls-speed) linear infinite;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.marquee:hover .marquee-track {
|
|
148
|
+
animation-play-state: paused;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
@keyframes marquee-scroll {
|
|
152
|
+
from {
|
|
153
|
+
transform: translateX(0);
|
|
154
|
+
}
|
|
155
|
+
to {
|
|
156
|
+
/* one full set-width, since the track is two identical sets back to back */
|
|
157
|
+
transform: translateX(-50%);
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.logo-link {
|
|
162
|
+
display: block;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.logo {
|
|
166
|
+
display: block;
|
|
167
|
+
flex-shrink: 0;
|
|
168
|
+
opacity: 0.8;
|
|
169
|
+
transition: opacity 0.15s ease;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.logo.invert {
|
|
173
|
+
filter: brightness(0) invert(1);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.logo.color {
|
|
177
|
+
filter: none;
|
|
178
|
+
opacity: 1;
|
|
179
|
+
border-radius: 10px;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.logo:hover {
|
|
183
|
+
opacity: 1;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
@media (prefers-reduced-motion: reduce) {
|
|
187
|
+
.marquee {
|
|
188
|
+
mask-image: none;
|
|
189
|
+
-webkit-mask-image: none;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.marquee-track {
|
|
193
|
+
animation: none;
|
|
194
|
+
flex-wrap: wrap;
|
|
195
|
+
justify-content: center;
|
|
196
|
+
width: 100%;
|
|
197
|
+
padding: 0 15px;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.marquee-track :global(.logo[aria-hidden='true']) {
|
|
201
|
+
display: none;
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
</style>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
interface Logo {
|
|
2
|
+
name: string;
|
|
3
|
+
src: string;
|
|
4
|
+
href?: string;
|
|
5
|
+
width?: number;
|
|
6
|
+
height?: number;
|
|
7
|
+
color?: boolean;
|
|
8
|
+
}
|
|
9
|
+
interface Props {
|
|
10
|
+
logos: Logo[];
|
|
11
|
+
label?: string;
|
|
12
|
+
background?: string;
|
|
13
|
+
invert?: boolean;
|
|
14
|
+
marquee?: boolean;
|
|
15
|
+
speed?: number;
|
|
16
|
+
}
|
|
17
|
+
declare const LogoStrip: import("svelte").Component<Props, {}, "">;
|
|
18
|
+
type LogoStrip = ReturnType<typeof LogoStrip>;
|
|
19
|
+
export default LogoStrip;
|
|
@@ -22,6 +22,7 @@ export { default as GdprSeal } from './Seal/GdprSeal.svelte';
|
|
|
22
22
|
export { default as CcpaSeal } from './Seal/CcpaSeal.svelte';
|
|
23
23
|
export { default as SsoSeal } from './Seal/SsoSeal.svelte';
|
|
24
24
|
export { default as IsoSeal } from './Seal/IsoSeal.svelte';
|
|
25
|
+
export { default as LogoStrip } from './LogoStrip/LogoStrip.svelte';
|
|
25
26
|
export { default as AllFeaturesAccordion } from './AllFeaturesAccordion/AllFeaturesAccordion.svelte';
|
|
26
27
|
export { default as AllFeaturesAccordionFeature } from './AllFeaturesAccordion/AllFeaturesAccordionFeature.svelte';
|
|
27
28
|
export { default as FAQ } from './FAQ/FAQ.svelte';
|
package/dist/marketing/index.js
CHANGED
|
@@ -20,6 +20,7 @@ export { default as GdprSeal } from './Seal/GdprSeal.svelte';
|
|
|
20
20
|
export { default as CcpaSeal } from './Seal/CcpaSeal.svelte';
|
|
21
21
|
export { default as SsoSeal } from './Seal/SsoSeal.svelte';
|
|
22
22
|
export { default as IsoSeal } from './Seal/IsoSeal.svelte';
|
|
23
|
+
export { default as LogoStrip } from './LogoStrip/LogoStrip.svelte';
|
|
23
24
|
export { default as AllFeaturesAccordion } from './AllFeaturesAccordion/AllFeaturesAccordion.svelte';
|
|
24
25
|
export { default as AllFeaturesAccordionFeature } from './AllFeaturesAccordion/AllFeaturesAccordionFeature.svelte';
|
|
25
26
|
export { default as FAQ } from './FAQ/FAQ.svelte';
|