spoko-design-system 0.0.5 → 0.0.6
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
CHANGED
package/src/config.ts
CHANGED
|
@@ -26,6 +26,7 @@ export const SIDEBAR = [
|
|
|
26
26
|
{ text: "Badges", link: "/components/badges" },
|
|
27
27
|
{ text: "Breadcrumbs", link: "/components/breadcrumbs" },
|
|
28
28
|
{ text: "Buttons", link: "/components/buttons" },
|
|
29
|
+
{ text: "Card", link: "/components/card" },
|
|
29
30
|
{ text: "Copyright", link: "/components/copyright" },
|
|
30
31
|
{ text: "HandDrive", link: "/components/hand-drive" },
|
|
31
32
|
{ text: "Headline", link: "/components/headline" },
|
|
@@ -35,11 +36,9 @@ export const SIDEBAR = [
|
|
|
35
36
|
{ text: "Jumbatron", link: "/components/jumbatron" },
|
|
36
37
|
{ text: "Modal", link: "/components/modal" },
|
|
37
38
|
{ text: "PostHeader", link: "/components/post-header" },
|
|
39
|
+
{ text: "PR-Code", link: "/components/pr-code" },
|
|
38
40
|
{ text: "Product Number", link: "/components/product-number" },
|
|
39
|
-
{ text: "Product Tile", link: "/components/product-tile" },
|
|
40
41
|
{ text: "Table", link: "/components/table" },
|
|
41
|
-
{ text: "PR-Code", link: "/components/pr-code" },
|
|
42
|
-
{ text: "Card", link: "/components/card" },
|
|
43
42
|
|
|
44
43
|
{ text: "Extras", header: true },
|
|
45
44
|
{ text: "Flags", link: "/components/flags" },
|
|
@@ -20,10 +20,48 @@ Card - product link component which can be used for carousels, section with rela
|
|
|
20
20
|
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
|
|
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
|
+
<div class="flex items-center justify-between my-4">
|
|
25
|
+
<span class="text-2xl font-bold text-gray-900 dark:text-white">€599.00</span>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<Button tertiary small href="#">
|
|
29
|
+
Read more
|
|
30
|
+
<Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl leading-none" />
|
|
31
|
+
</Button>
|
|
32
|
+
</Card>
|
|
33
|
+
|
|
34
|
+
<Card 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
|
+
<a href="#">
|
|
36
|
+
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
|
|
37
|
+
</a>
|
|
38
|
+
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
|
|
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
|
+
</p>
|
|
41
|
+
|
|
42
|
+
<div class="flex items-center justify-between my-4">
|
|
43
|
+
<span class="text-2xl font-bold text-gray-900 dark:text-white">€599.00</span>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<Button tertiary small href="#">
|
|
47
|
+
Read more
|
|
48
|
+
<Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl leading-none" />
|
|
49
|
+
</Button>
|
|
50
|
+
</Card>
|
|
51
|
+
|
|
52
|
+
<Card 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
|
+
<a href="#">
|
|
54
|
+
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
|
|
55
|
+
</a>
|
|
56
|
+
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
|
|
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
|
+
</p>
|
|
59
|
+
|
|
60
|
+
<div class="flex items-center justify-between my-4">
|
|
24
61
|
<span class="text-2xl font-bold text-gray-900 dark:text-white">€599.00</span>
|
|
25
62
|
</div>
|
|
26
|
-
|
|
63
|
+
|
|
64
|
+
<Button tertiary small href="#">
|
|
27
65
|
Read more
|
|
28
66
|
<Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl leading-none" />
|
|
29
67
|
</Button>
|
|
@@ -33,7 +71,23 @@ Card - product link component which can be used for carousels, section with rela
|
|
|
33
71
|
|
|
34
72
|
```html
|
|
35
73
|
<div class="grid grid-cols-3 gap-8 w-full" itemscope itemtype="https://schema.org/ItemList">
|
|
74
|
+
<Card 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
|
+
<a href="#">
|
|
76
|
+
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
|
|
77
|
+
</a>
|
|
78
|
+
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
|
|
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
|
+
</p>
|
|
81
|
+
|
|
82
|
+
<div class="flex items-center justify-between my-4">
|
|
83
|
+
<span class="text-2xl font-bold text-gray-900 dark:text-white">€599.00</span>
|
|
84
|
+
</div>
|
|
36
85
|
|
|
86
|
+
<Button tertiary small href="#">
|
|
87
|
+
Read more
|
|
88
|
+
<Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl leading-none" />
|
|
89
|
+
</Button>
|
|
90
|
+
</Card>
|
|
37
91
|
</div>
|
|
38
92
|
```
|
|
39
93
|
|
|
@@ -27,15 +27,23 @@ Flags based on CSS (UnoCSS) classes only.
|
|
|
27
27
|
<FlagUA />
|
|
28
28
|
```
|
|
29
29
|
|
|
30
|
-
## Circle icon flags
|
|
30
|
+
## Circle icon flags with shadow
|
|
31
31
|
<div class="component-preview">
|
|
32
|
-
<
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
<div class="bg-white p-6 columns-8 md:columns-16 w-full">
|
|
33
|
+
<Icon name="circle-flags:pl" class="shadow-md rounded-full" />
|
|
34
|
+
<Icon name="circle-flags:fi" class="shadow-md rounded-full" />
|
|
35
|
+
<Icon name="circle-flags:nl" class="shadow-md rounded-full" />
|
|
36
|
+
<Icon name="circle-flags:no" class="shadow-md rounded-full" />
|
|
37
|
+
<Icon name="circle-flags:ua" class="shadow-md rounded-full" />
|
|
38
|
+
<Icon name="circle-flags:uk" class="shadow-md rounded-full" />
|
|
39
|
+
</div>
|
|
35
40
|
</div>
|
|
36
41
|
|
|
37
42
|
```js
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
43
|
+
<Icon name="circle-flags:pl" class="shadow-md rounded-full" />
|
|
44
|
+
<Icon name="circle-flags:fi" class="shadow-md rounded-full" />
|
|
45
|
+
<Icon name="circle-flags:nl" class="shadow-md rounded-full" />
|
|
46
|
+
<Icon name="circle-flags:no" class="shadow-md rounded-full" />
|
|
47
|
+
<Icon name="circle-flags:ua" class="shadow-md rounded-full" />
|
|
48
|
+
<Icon name="circle-flags:uk" class="shadow-md rounded-full" />
|
|
41
49
|
```
|