spoko-design-system 0.0.8 → 0.0.9
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/Carousel.astro +14 -29
- package/src/components/ProductCarousel.astro +48 -0
- package/src/components/ProductTile.astro +0 -4
- package/src/components/newFile.tsx +42 -0
- package/src/config.ts +1 -0
- package/src/layouts/MainLayout.astro +7 -0
- package/src/pages/components/carousel.mdx +44 -2
- package/src/pages/components/product-tile.mdx +18 -6
- package/uno.config.ts +1 -1
package/package.json
CHANGED
|
@@ -1,19 +1,15 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
2
|
+
export const productObject = {
|
|
3
|
+
name: "Combi-instrument MFA+",
|
|
4
|
+
url: "https://google.com",
|
|
5
|
+
number: "6R0920870F",
|
|
6
|
+
photo:
|
|
7
|
+
"https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337",
|
|
8
|
+
};
|
|
3
9
|
---
|
|
4
|
-
<script>
|
|
5
|
-
import { register } from "swiper/element/bundle";
|
|
6
|
-
|
|
7
|
-
document.addEventListener("astro:page-load", () => {
|
|
8
|
-
//"DOMContentLoaded"
|
|
9
|
-
// register Swiper custom elements
|
|
10
|
-
register();
|
|
11
|
-
})
|
|
12
|
-
|
|
13
|
-
</script>
|
|
14
10
|
|
|
15
11
|
<swiper-container
|
|
16
|
-
class="max-w
|
|
12
|
+
class="max-w-full w-full flex overflow-hidden"
|
|
17
13
|
grid-rows="1"
|
|
18
14
|
mousewheel-force-to-axis="true"
|
|
19
15
|
navigation="true"
|
|
@@ -22,20 +18,9 @@
|
|
|
22
18
|
slides-per-view="auto"
|
|
23
19
|
space-between="0"
|
|
24
20
|
>
|
|
25
|
-
<swiper-slide class="bg-blue-50 p-12 border-1">
|
|
26
|
-
|
|
27
|
-
</swiper-slide>
|
|
28
|
-
<swiper-slide class="bg-blue-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
<swiper-slide class="bg-blue-200 p-12 border-1">
|
|
32
|
-
C
|
|
33
|
-
</swiper-slide>
|
|
34
|
-
<swiper-slide class="bg-blue-300 p-12 border-1">
|
|
35
|
-
D
|
|
36
|
-
</swiper-slide>
|
|
37
|
-
<swiper-slide class="bg-blue-400 p-12 border-1">
|
|
38
|
-
A
|
|
39
|
-
</swiper-slide>
|
|
40
|
-
|
|
41
|
-
</swiper-container>
|
|
21
|
+
<swiper-slide class="bg-blue-50 p-12 border-1 min-w-full">A</swiper-slide>
|
|
22
|
+
<swiper-slide class="bg-blue-100 p-12 border-1 min-w-full">B</swiper-slide>
|
|
23
|
+
<swiper-slide class="bg-blue-200 p-12 border-1 min-w-full">C</swiper-slide>
|
|
24
|
+
<swiper-slide class="bg-blue-300 p-12 border-1 min-w-full">D</swiper-slide>
|
|
25
|
+
<swiper-slide class="bg-blue-400 p-12 border-1 min-w-full">A</swiper-slide>
|
|
26
|
+
</swiper-container>
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
---
|
|
2
|
+
import ProductTile from "../components/ProductTile.astro";
|
|
3
|
+
export const productObject = {
|
|
4
|
+
name: "Combi-instrument MFA+",
|
|
5
|
+
url: "https://google.com",
|
|
6
|
+
number: "6R0920870F",
|
|
7
|
+
photo:
|
|
8
|
+
"https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337",
|
|
9
|
+
};
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
<div class="bg-white rounded-lg p-4 w-full">
|
|
13
|
+
<swiper-container
|
|
14
|
+
class="flex w-full max-w-full"
|
|
15
|
+
grid-rows="1"
|
|
16
|
+
mousewheel-force-to-axis="true"
|
|
17
|
+
navigation="false"
|
|
18
|
+
scrollbar="false"
|
|
19
|
+
slides-per-view="auto"
|
|
20
|
+
space-between="0"
|
|
21
|
+
>
|
|
22
|
+
<swiper-slide
|
|
23
|
+
class="carousel-product-tile"
|
|
24
|
+
>
|
|
25
|
+
<ProductTile productObject={productObject} />
|
|
26
|
+
</swiper-slide>
|
|
27
|
+
<swiper-slide
|
|
28
|
+
class="carousel-product-tile"
|
|
29
|
+
>
|
|
30
|
+
<ProductTile productObject={productObject} />
|
|
31
|
+
</swiper-slide>
|
|
32
|
+
<swiper-slide
|
|
33
|
+
class="carousel-product-tile"
|
|
34
|
+
>
|
|
35
|
+
<ProductTile productObject={productObject} />
|
|
36
|
+
</swiper-slide>
|
|
37
|
+
<swiper-slide
|
|
38
|
+
class="carousel-product-tile"
|
|
39
|
+
>
|
|
40
|
+
<ProductTile productObject={productObject} />
|
|
41
|
+
</swiper-slide>
|
|
42
|
+
<swiper-slide
|
|
43
|
+
class="carousel-product-tile"
|
|
44
|
+
>
|
|
45
|
+
<ProductTile productObject={productObject} />
|
|
46
|
+
</swiper-slide>
|
|
47
|
+
</swiper-container>
|
|
48
|
+
</div>
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
---
|
|
2
2
|
const { productObject, locale, index } = Astro.props;
|
|
3
|
-
import i18next, { t } from "i18next";
|
|
4
3
|
import Image from "./Image.astro"
|
|
5
4
|
import ProductNumber from "./ProductNumber.astro"
|
|
6
5
|
|
|
@@ -9,7 +8,6 @@ import ProductNumber from "./ProductNumber.astro"
|
|
|
9
8
|
{ productObject &&
|
|
10
9
|
(
|
|
11
10
|
|
|
12
|
-
<div class="flex flex-wrap sm:flex-nowrap content-between w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
|
|
13
11
|
<!-- product image -->
|
|
14
12
|
<div class="img--4/3 img--small">
|
|
15
13
|
{ productObject.photo !== null ?
|
|
@@ -46,7 +44,5 @@ import ProductNumber from "./ProductNumber.astro"
|
|
|
46
44
|
}
|
|
47
45
|
</div>
|
|
48
46
|
|
|
49
|
-
</div>
|
|
50
|
-
|
|
51
47
|
)}
|
|
52
48
|
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import Image from "./Image.astro";
|
|
2
|
+
import ProductNumber from "./ProductNumber.astro";
|
|
3
|
+
|
|
4
|
+
<Fragment>
|
|
5
|
+
{productObject &&
|
|
6
|
+
(
|
|
7
|
+
|
|
8
|
+
<Fragment><div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
|
|
9
|
+
{/** product image */}
|
|
10
|
+
<div class="img--4/3 img--small">
|
|
11
|
+
{productObject.photo !== null ?
|
|
12
|
+
<Fragment><Image imageObject={{
|
|
13
|
+
src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
|
|
14
|
+
alt: 'Image Alt',
|
|
15
|
+
height: '180',
|
|
16
|
+
width: '240',
|
|
17
|
+
class: 'img--overlay object-cover'
|
|
18
|
+
}} /></Fragment>
|
|
19
|
+
:
|
|
20
|
+
<Fragment><img src="/1x1.png" class="bg-gray-100/70" alt={productObject.name} /></Fragment>}
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
{/** product deails */}
|
|
24
|
+
<div class="sm:pl-4 flex flex-col">
|
|
25
|
+
<a class="font-light leading-none mb-2 pr-4 line-clamp-2 h-[2em] before:(content-empty absolute left-0 right-4 h-full top-0)" href={productObject.url} itemprop="url" title={productObject.number}>
|
|
26
|
+
{productObject.name}
|
|
27
|
+
</a>
|
|
28
|
+
|
|
29
|
+
<ProductNumber productNumber={productObject.number} copyDisabled={true} />
|
|
30
|
+
|
|
31
|
+
{index !== null &&
|
|
32
|
+
(<Fragment><meta itemprop="position" content={String(index)} /></Fragment>
|
|
33
|
+
,
|
|
34
|
+
<Fragment><meta itemprop="name" content={productObject.name} /></Fragment>)}
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
</div></Fragment>
|
|
38
|
+
|
|
39
|
+
)}
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
</Fragment>;
|
package/src/config.ts
CHANGED
|
@@ -27,6 +27,7 @@ export const SIDEBAR = [
|
|
|
27
27
|
{ text: "Breadcrumbs", link: "/components/breadcrumbs" },
|
|
28
28
|
{ text: "Buttons", link: "/components/buttons" },
|
|
29
29
|
{ text: "Card", link: "/components/card" },
|
|
30
|
+
{ text: "Carousel", link: "/components/carousel" },
|
|
30
31
|
{ text: "Copyright", link: "/components/copyright" },
|
|
31
32
|
{ text: "HandDrive", link: "/components/hand-drive" },
|
|
32
33
|
{ text: "Headline", link: "/components/headline" },
|
|
@@ -15,6 +15,13 @@ const { content = {} } = Astro.props;
|
|
|
15
15
|
const currentPage = Astro.url.pathname;
|
|
16
16
|
const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
|
|
17
17
|
---
|
|
18
|
+
<script>
|
|
19
|
+
// Swiper Element
|
|
20
|
+
import { register } from "swiper/element/bundle";
|
|
21
|
+
document.addEventListener("astro:page-load", () => {
|
|
22
|
+
register();
|
|
23
|
+
});
|
|
24
|
+
</script>
|
|
18
25
|
|
|
19
26
|
<html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
|
|
20
27
|
<head>
|
|
@@ -3,6 +3,7 @@ title: "Carousel"
|
|
|
3
3
|
layout: "../../layouts/MainLayout.astro"
|
|
4
4
|
---
|
|
5
5
|
import Carousel from '../../components/Carousel.astro'
|
|
6
|
+
import ProductCarousel from '../../components/ProductCarousel.astro'
|
|
6
7
|
|
|
7
8
|
# Carousel
|
|
8
9
|
|
|
@@ -13,8 +14,49 @@ Carousel - modern carousel based on Swiper Element (Web Component)
|
|
|
13
14
|
</div>
|
|
14
15
|
|
|
15
16
|
```js
|
|
16
|
-
|
|
17
|
+
<swiper-container
|
|
18
|
+
class="max-w-full w-full flex overflow-hidden"
|
|
19
|
+
grid-rows="1"
|
|
20
|
+
mousewheel-force-to-axis="true"
|
|
21
|
+
navigation="true"
|
|
22
|
+
pagination-type="fraction"
|
|
23
|
+
scrollbar="false"
|
|
24
|
+
slides-per-view="auto"
|
|
25
|
+
space-between="0"
|
|
26
|
+
>
|
|
27
|
+
<swiper-slide class="bg-blue-50 p-12 border-1 min-w-full">A</swiper-slide>
|
|
28
|
+
<swiper-slide class="bg-blue-100 p-12 border-1 min-w-full">B</swiper-slide>
|
|
29
|
+
<swiper-slide class="bg-blue-200 p-12 border-1 min-w-full">C</swiper-slide>
|
|
30
|
+
<swiper-slide class="bg-blue-300 p-12 border-1 min-w-full">D</swiper-slide>
|
|
31
|
+
<swiper-slide class="bg-blue-400 p-12 border-1 min-w-full">A</swiper-slide>
|
|
32
|
+
</swiper-container>
|
|
17
33
|
```
|
|
18
34
|
#
|
|
19
35
|
|
|
20
|
-
Find the code for this page in the `src/pages/components/carousel.mdx` file.
|
|
36
|
+
Find the code for this page in the `src/pages/components/carousel.mdx` file.
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
## Product Carousel
|
|
40
|
+
<div class="component-preview">
|
|
41
|
+
<ProductCarousel />
|
|
42
|
+
</div>
|
|
43
|
+
```html
|
|
44
|
+
<div class="bg-white rounded-lg p-4 w-full">
|
|
45
|
+
<swiper-container
|
|
46
|
+
class="flex w-full max-w-full"
|
|
47
|
+
grid-rows="1"
|
|
48
|
+
mousewheel-force-to-axis="true"
|
|
49
|
+
navigation="false"
|
|
50
|
+
scrollbar="false"
|
|
51
|
+
slides-per-view="auto"
|
|
52
|
+
space-between="0"
|
|
53
|
+
>
|
|
54
|
+
<swiper-slide
|
|
55
|
+
class="carousel-product-tile"
|
|
56
|
+
>
|
|
57
|
+
<ProductTile productObject={productObject} />
|
|
58
|
+
</swiper-slide>
|
|
59
|
+
...
|
|
60
|
+
</swiper-container>
|
|
61
|
+
</div>
|
|
62
|
+
```
|
|
@@ -15,15 +15,27 @@ export const productObject = {
|
|
|
15
15
|
|
|
16
16
|
ProductTile - product link component which can be used for carousels, section with related products, recently added etc.
|
|
17
17
|
|
|
18
|
+
It requires a container with a specific width - it's best to set it directly in the carousel's `<swiper-slide>` tag.
|
|
19
|
+
#
|
|
20
|
+
|
|
18
21
|
<div class="component-preview">
|
|
19
22
|
<div class="flex flex-wrap bg-white w-full p-4 pb-0">
|
|
20
23
|
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
<div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
|
|
25
|
+
<ProductTile productObject={productObject} />
|
|
26
|
+
</div>
|
|
27
|
+
<div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
|
|
28
|
+
<ProductTile productObject={productObject} />
|
|
29
|
+
</div>
|
|
30
|
+
<div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
|
|
31
|
+
<ProductTile productObject={productObject} />
|
|
32
|
+
</div>
|
|
33
|
+
<div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
|
|
34
|
+
<ProductTile productObject={productObject} />
|
|
35
|
+
</div>
|
|
36
|
+
<div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
|
|
37
|
+
<ProductTile productObject={productObject} />
|
|
38
|
+
</div>
|
|
27
39
|
</div>
|
|
28
40
|
</div>
|
|
29
41
|
|
package/uno.config.ts
CHANGED
|
@@ -41,7 +41,7 @@ export default defineConfig({
|
|
|
41
41
|
['img--small', 'w-60 sm:(w-22) xl:(w-30)'],
|
|
42
42
|
['img--medium', 'w-60'],
|
|
43
43
|
['underline-on-hover', 'relative flex w-full bg-white pb-1 dark:bg-blue-901 after:absolute after:bg-lightBlue-500 after:w-[calc(100%-1rem)] after:left-0 after:h-px after:top-[calc(100%-1px)] after:bottom-1 after:content-empty after:scale-x-0 after:transition-transform-300 after:origin-top-right hover:after:origin-top-left hover:after:scale-x-100'],
|
|
44
|
-
|
|
44
|
+
['carousel-product-tile', 'flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 lg:(w-28.57% min-w-28.57%) 2xl:(w-24.09% min-w-24.09%) relative'],
|
|
45
45
|
['btn-primary', 'bg-lightBlue-500 border border-transparent font-medium hover:bg-lightBlue-600 inline-flex items-center justify-center shadow text-base text-white'],
|
|
46
46
|
['btn-primary-outline', 'border-lightBlue-500 border font-medium inline-flex items-center justify-center shadow text-base text-lightBlue-500 transition-all hover:(bg-lightBlue-500 text-white)'],
|
|
47
47
|
['btn-secondary', 'bg-gray-500 border border-transparent font-medium hover:bg-gray-600 inline-flex items-center justify-center shadow text-base text-white'],
|