spoko-design-system 0.2.0 → 0.2.1
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/dev-dist/sw.js +1 -1
- package/package.json +1 -1
- package/src/components/ProductDetailsList.vue +1 -1
- package/src/pages/index.astro +87 -61
package/dev-dist/sw.js
CHANGED
package/package.json
CHANGED
package/src/pages/index.astro
CHANGED
|
@@ -7,75 +7,101 @@ import Layout from "../layouts/Layout.astro";
|
|
|
7
7
|
import Headline from "../components/Headline.vue";
|
|
8
8
|
import Button from "../components/Button.vue";
|
|
9
9
|
import Quote from "../components/Quote.vue";
|
|
10
|
+
import FeaturesList from "../components/FeaturesList.vue";
|
|
10
11
|
|
|
11
12
|
const navItems = [
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
13
|
+
{
|
|
14
|
+
title: "Core",
|
|
15
|
+
description: "Base colors, typography, shadows etc.",
|
|
16
|
+
url: "/core/introduction",
|
|
17
|
+
icon: "ant-design:cluster-outlined",
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
title: "Components",
|
|
21
|
+
description: "The building blocks for our UI.",
|
|
22
|
+
url: "/components/buttons",
|
|
23
|
+
icon: "ant-design:build-twotone",
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
title: "Patterns",
|
|
27
|
+
description: "Common patterns for building interfaces.",
|
|
28
|
+
url: "/patterns/introduction",
|
|
29
|
+
icon: "ant-design:audit-outlined",
|
|
30
|
+
},
|
|
30
31
|
];
|
|
31
32
|
---
|
|
33
|
+
|
|
32
34
|
<Layout>
|
|
33
|
-
<div class="bg-slate-100 min-h-screen text-center"
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
<p slot="subtitle"
|
|
38
|
-
class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
|
|
39
|
-
set:html={SITE.description}
|
|
40
|
-
/>
|
|
35
|
+
<div class="bg-slate-100 min-h-screen text-center">
|
|
36
|
+
<Jumbatron class="w-full">
|
|
37
|
+
<span slot="intro" set:html={SITE.title} />
|
|
41
38
|
|
|
39
|
+
<p
|
|
40
|
+
slot="subtitle"
|
|
41
|
+
class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
|
|
42
|
+
set:html={SITE.description}
|
|
43
|
+
/>
|
|
42
44
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
45
|
+
<Button
|
|
46
|
+
slot="cta"
|
|
47
|
+
href="/core/introduction/"
|
|
48
|
+
title="Spoko Design System"
|
|
49
|
+
primary
|
|
50
|
+
rounded
|
|
51
|
+
>
|
|
52
|
+
Read More
|
|
53
|
+
</Button>
|
|
54
|
+
</Jumbatron>
|
|
55
|
+
<nav>
|
|
56
|
+
<div
|
|
57
|
+
class="px-4 flex-col flex flex-wrap md:flex-nowrap gap-4 max-w-5xl mx-auto text-left mt-12 md:(px-0 flex-row)"
|
|
48
58
|
>
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
59
|
+
{
|
|
60
|
+
navItems.map(({ title, description, url, icon }) => (
|
|
61
|
+
<a
|
|
62
|
+
href={url}
|
|
63
|
+
title={description}
|
|
64
|
+
class="flex w-full flex-wrap bg-white rounded-md hover:-translate-y-1 hover:shadow-lg transition-all flex-1 items-center py-10 px-4 md:(flex-col w-auto flex-nowrap text-center py-16)"
|
|
65
|
+
>
|
|
66
|
+
<Headline as="h2" textSize="2xl" underline={false}>
|
|
67
|
+
<Icon
|
|
68
|
+
name={icon}
|
|
69
|
+
aria-hidden="true"
|
|
70
|
+
class="text-blue-400 mr-2"
|
|
71
|
+
/>
|
|
72
|
+
{title}
|
|
73
|
+
</Headline>
|
|
74
|
+
<p class="text-slate-500 w-full">{description}</p>
|
|
75
|
+
</a>
|
|
76
|
+
))
|
|
77
|
+
}
|
|
78
|
+
</div>
|
|
79
|
+
</nav>
|
|
80
|
+
<div
|
|
81
|
+
class="mt-12 py-20 bg-blue-700 bg-vw text-white flex items-center justify-center relative"
|
|
82
|
+
>
|
|
83
|
+
<Quote>
|
|
84
|
+
<blockquote>
|
|
85
|
+
Well done is better than well said.
|
|
86
|
+
<small class="block font-headlight">- Benjamin Franklin</small>
|
|
87
|
+
</blockquote>
|
|
88
|
+
</Quote>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<div class="flex flex-col py-12">
|
|
92
|
+
<Headline underline as="div" class="mx-auto text-gray-900" textSize="3xl">Examples:</Headline>
|
|
93
|
+
<ul class="mx-auto flex flex-wrap items-center justify-center text-2xl py-6">
|
|
94
|
+
<li class="leading-5 me-6">
|
|
95
|
+
<a href="https://catalog.polo.blue" class="transition ease-in-out delay-200 duration-300 text-blue-600 hover:(text-light-blue-500 decoration-blue-600) underline decoration-white" target="_blank"> catalog.polo.blue</a>
|
|
96
|
+
</li>
|
|
97
|
+
<li class="leading-5 me-6">
|
|
98
|
+
<a href="https://polo.blue" class="transition ease-in-out delay-200 duration-300 text-blue-600 hover:(text-light-blue-500 decoration-blue-600) underline decoration-white" target="_blank"> polo.blue</a>
|
|
99
|
+
</li>
|
|
100
|
+
<li class="leading-5 me-6">
|
|
101
|
+
<a href="https://spoko.space" class="transition ease-in-out delay-200 duration-300 text-blue-600 hover:(text-light-blue-500 decoration-blue-600) underline decoration-white" target="_blank"> spoko.space</a>
|
|
102
|
+
</li>
|
|
103
|
+
</ul>
|
|
69
104
|
</div>
|
|
70
|
-
</nav>
|
|
71
|
-
<div class="my-12 py-20 bg-blue-700 bg-vw text-white flex items-center justify-center relative">
|
|
72
|
-
<Quote>
|
|
73
|
-
<blockquote>
|
|
74
|
-
Well done is better than well said.
|
|
75
|
-
<small class="block">-Benjamin Franklin</small>
|
|
76
|
-
</blockquote></Quote>
|
|
77
105
|
</div>
|
|
78
|
-
|
|
79
|
-
</div>
|
|
106
|
+
<script is:inline></script>
|
|
80
107
|
</Layout>
|
|
81
|
-
<script is:inline></script>
|