spoko-design-system 0.2.2 → 0.2.3
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.
- package/package.json +1 -1
- package/src/components/Card.astro +1 -1
- package/src/components/Headline.vue +2 -9
- package/src/components/Jumbatron.vue +2 -4
- package/src/components/ProductDetailName.vue +2 -5
- package/src/components/ProductDetailsList.vue +6 -3
- package/src/components/layout/Header.astro +1 -1
- package/src/pages/components/card.mdx +12 -12
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@ import Image from "../components/Image.astro";
|
|
|
5
5
|
---
|
|
6
6
|
|
|
7
7
|
<div
|
|
8
|
-
class="bg-white border border-gray-200 rounded-lg shadow
|
|
8
|
+
class="bg-white border border-gray-200 rounded-lg shadow overflow-hidden"
|
|
9
9
|
>
|
|
10
10
|
<a href={href} class="aspect-ratio-video block relative">
|
|
11
11
|
{
|
|
@@ -32,21 +32,14 @@ const props = defineProps({
|
|
|
32
32
|
@apply relative pb-4;
|
|
33
33
|
|
|
34
34
|
&:after {
|
|
35
|
-
content
|
|
36
|
-
position: absolute;
|
|
37
|
-
left: 0;
|
|
38
|
-
bottom: 0;
|
|
35
|
+
@apply content-empty absolute left-0 bottom-0;
|
|
39
36
|
height: 3px;
|
|
40
37
|
width: 55px;
|
|
41
38
|
background-color: var(--primary);
|
|
42
39
|
}
|
|
43
40
|
|
|
44
41
|
&:before {
|
|
45
|
-
content
|
|
46
|
-
position: absolute;
|
|
47
|
-
left: 0;
|
|
48
|
-
bottom: 1px;
|
|
49
|
-
height: 1px;
|
|
42
|
+
@apply content-empty absolute left-0 bottom-px h-px;
|
|
50
43
|
width: 95%;
|
|
51
44
|
max-width: 255px;
|
|
52
45
|
background-color: #64748b
|
|
@@ -21,14 +21,12 @@ const props = defineProps({
|
|
|
21
21
|
:class="props.small ? 'sm:py-12 md:py-14 lg:py-16 xl:py-20' : 'sm:py-16 md:py-20 lg:py-28 xl:py-32'">
|
|
22
22
|
<header class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
23
23
|
<div class="text-center">
|
|
24
|
-
<h1 class="text-3xl tracking-tight sm:(text-4xl pt-0) md:text-5xl lg:text-6xl
|
|
24
|
+
<h1 class="text-3xl tracking-tight font-headlight text-white sm:(text-4xl pt-0) md:text-5xl lg:text-6xl ">
|
|
25
25
|
<slot name="intro" />
|
|
26
26
|
</h1>
|
|
27
27
|
<slot name="subtitle" />
|
|
28
|
-
<div class="mt-5 sm:mt-8
|
|
29
|
-
<div>
|
|
28
|
+
<div class="mt-5 sm:(mt-8 flex justify-center)" v-if="hasSlot('cta')">
|
|
30
29
|
<slot name="cta" />
|
|
31
|
-
</div>
|
|
32
30
|
</div>
|
|
33
31
|
</div>
|
|
34
32
|
</header>
|
|
@@ -34,19 +34,16 @@ const props = defineProps({
|
|
|
34
34
|
@apply overflow-hidden relative;
|
|
35
35
|
|
|
36
36
|
span {
|
|
37
|
-
@apply block bg-white
|
|
37
|
+
@apply block bg-white relative z-10 pr-1.5 w-full;
|
|
38
38
|
|
|
39
39
|
&:before {
|
|
40
40
|
// order: 2;
|
|
41
|
-
@apply text-gray-300 absolute select-none border-b border-gray-200
|
|
41
|
+
@apply text-gray-300 absolute select-none border-b border-gray-200 w-full -z-1 absolute content-empty left-0;
|
|
42
42
|
height: 1em;
|
|
43
43
|
white-space: nowrap;
|
|
44
44
|
font-weight: 100;
|
|
45
45
|
bottom: 2px;
|
|
46
|
-
left: 0;
|
|
47
46
|
flex: 1;
|
|
48
|
-
content: '';
|
|
49
|
-
position:absolute;
|
|
50
47
|
}
|
|
51
48
|
}
|
|
52
49
|
|
|
@@ -41,14 +41,17 @@ const props = defineProps({
|
|
|
41
41
|
|
|
42
42
|
<style lang="scss">
|
|
43
43
|
.details {
|
|
44
|
-
border:
|
|
44
|
+
@apply border-none w-full md:w-auto
|
|
45
45
|
box-shadow: none;
|
|
46
46
|
|
|
47
|
+
col {
|
|
48
|
+
@apply w-1/2;
|
|
49
|
+
}
|
|
50
|
+
|
|
47
51
|
td,
|
|
48
52
|
tr,
|
|
49
53
|
th {
|
|
50
|
-
border
|
|
51
|
-
@apply leading-4 text-sm py-2;
|
|
54
|
+
@apply leading-4 text-sm py-2 border-none;
|
|
52
55
|
}
|
|
53
56
|
|
|
54
57
|
th {
|
|
@@ -54,7 +54,7 @@ const navItemsLeft = [
|
|
|
54
54
|
</div>
|
|
55
55
|
|
|
56
56
|
<div
|
|
57
|
-
class="flex items-center pr-0 sm:static sm:inset-auto ml-auto sm:ml-6 -mr-2
|
|
57
|
+
class="flex items-center pr-0 sm:static sm:inset-auto ml-auto sm:ml-6 -mr-2 print:hidden order-3 sm:order-3 w-20 justify-end"
|
|
58
58
|
itemprop="hasPart"
|
|
59
59
|
itemscope
|
|
60
60
|
itemtype="http://schema.org/SiteNavigationElement"
|
|
@@ -15,14 +15,14 @@ Card - product link component which can be used for carousels, section with rela
|
|
|
15
15
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 w-full" itemscope itemtype="https://schema.org/ItemList">
|
|
16
16
|
<Card href="https://google.com" imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
|
|
17
17
|
<a href="#">
|
|
18
|
-
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900
|
|
18
|
+
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 leading-none">Lorem Ipsum</h5>
|
|
19
19
|
</a>
|
|
20
|
-
<p class="mb-3 font-normal text-gray-700
|
|
20
|
+
<p class="mb-3 font-normal text-gray-700 ">
|
|
21
21
|
Magna magna mollit esse incididunt deserunt eiusmod ad id ullamco cupidatat laborum enim nostrud. Irure officia occaecat adipisicing amet labore et incididunt exercitation. Consequat aliqua excepteur duis dolore cupidatat.
|
|
22
22
|
</p>
|
|
23
23
|
|
|
24
24
|
<div class="flex items-center justify-between my-4">
|
|
25
|
-
<span class="text-2xl font-bold text-gray-900
|
|
25
|
+
<span class="text-2xl font-bold text-gray-900">€599.00</span>
|
|
26
26
|
</div>
|
|
27
27
|
|
|
28
28
|
<Button tertiary small href="#">
|
|
@@ -33,14 +33,14 @@ Card - product link component which can be used for carousels, section with rela
|
|
|
33
33
|
|
|
34
34
|
<Card href="#" imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
|
|
35
35
|
<a href="#">
|
|
36
|
-
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900
|
|
36
|
+
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 leading-none">Lorem Ipsum</h5>
|
|
37
37
|
</a>
|
|
38
|
-
<p class="mb-3 font-normal text-gray-700
|
|
38
|
+
<p class="mb-3 font-normal text-gray-700 ">
|
|
39
39
|
Magna magna mollit esse incididunt deserunt eiusmod ad id ullamco cupidatat laborum enim nostrud. Irure officia occaecat adipisicing amet labore et incididunt exercitation. Consequat aliqua excepteur duis dolore cupidatat.
|
|
40
40
|
</p>
|
|
41
41
|
|
|
42
42
|
<div class="flex items-center justify-between my-4">
|
|
43
|
-
<span class="text-2xl font-bold text-gray-900
|
|
43
|
+
<span class="text-2xl font-bold text-gray-900 ">€599.00</span>
|
|
44
44
|
</div>
|
|
45
45
|
|
|
46
46
|
<Button tertiary small href="#">
|
|
@@ -51,14 +51,14 @@ Card - product link component which can be used for carousels, section with rela
|
|
|
51
51
|
|
|
52
52
|
<Card href="#" imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
|
|
53
53
|
<a href="#">
|
|
54
|
-
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900
|
|
54
|
+
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 leading-none">Lorem Ipsum</h5>
|
|
55
55
|
</a>
|
|
56
|
-
<p class="mb-3 font-normal text-gray-700
|
|
56
|
+
<p class="mb-3 font-normal text-gray-700 ">
|
|
57
57
|
Magna magna mollit esse incididunt deserunt eiusmod ad id ullamco cupidatat laborum enim nostrud. Irure officia occaecat adipisicing amet labore et incididunt exercitation. Consequat aliqua excepteur duis dolore cupidatat.
|
|
58
58
|
</p>
|
|
59
59
|
|
|
60
60
|
<div class="flex items-center justify-between my-4">
|
|
61
|
-
<span class="text-2xl font-bold text-gray-900
|
|
61
|
+
<span class="text-2xl font-bold text-gray-900 ">€599.00</span>
|
|
62
62
|
</div>
|
|
63
63
|
|
|
64
64
|
<Button tertiary small href="#">
|
|
@@ -73,14 +73,14 @@ Card - product link component which can be used for carousels, section with rela
|
|
|
73
73
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 w-full" itemscope itemtype="https://schema.org/ItemList">
|
|
74
74
|
<Card href="https://google.com" imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
|
|
75
75
|
<a href="#">
|
|
76
|
-
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900
|
|
76
|
+
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 leading-none">Lorem Ipsum</h5>
|
|
77
77
|
</a>
|
|
78
|
-
<p class="mb-3 font-normal text-gray-700
|
|
78
|
+
<p class="mb-3 font-normal text-gray-700 ">
|
|
79
79
|
Magna magna mollit esse incididunt deserunt eiusmod ad id ullamco cupidatat laborum enim nostrud. Irure officia occaecat adipisicing amet labore et incididunt exercitation. Consequat aliqua excepteur duis dolore cupidatat.
|
|
80
80
|
</p>
|
|
81
81
|
|
|
82
82
|
<div class="flex items-center justify-between my-4">
|
|
83
|
-
<span class="text-2xl font-bold text-gray-900
|
|
83
|
+
<span class="text-2xl font-bold text-gray-900 ">€599.00</span>
|
|
84
84
|
</div>
|
|
85
85
|
|
|
86
86
|
<Button tertiary small href="#">
|