spoko-design-system 1.1.1 → 1.1.2
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/.claude/settings.local.json +2 -1
- package/.github/workflows/code-quality.yml +3 -3
- package/.prettierrc +1 -0
- package/CHANGELOG.md +6 -0
- package/package.json +8 -2
- package/src/MyComponent.astro +1 -1
- package/src/components/Badge.vue +2 -2
- package/src/components/Badges.vue +17 -7
- package/src/components/Breadcrumbs.vue +47 -39
- package/src/components/Button.vue +31 -30
- package/src/components/ButtonCopy.astro +12 -17
- package/src/components/ButtonCopy.vue +26 -25
- package/src/components/Card.astro +4 -6
- package/src/components/Carousel.astro +4 -4
- package/src/components/Category/CategoriesCarousel.astro +75 -75
- package/src/components/Category/CategoryDetails.astro +75 -79
- package/src/components/Category/CategoryLink.vue +8 -12
- package/src/components/Category/CategorySidebarToggler.vue +2 -7
- package/src/components/Category/CategoryTile.astro +3 -3
- package/src/components/Category/CategoryViewToggler.astro +18 -18
- package/src/components/Category/SubCategoryLink.vue +13 -13
- package/src/components/Faq.astro +16 -17
- package/src/components/FaqItem.astro +27 -27
- package/src/components/FeaturesList.vue +19 -29
- package/src/components/FuckRussia.vue +40 -27
- package/src/components/HandDrive.astro +11 -15
- package/src/components/Header/Header.astro +165 -166
- package/src/components/Header/SkipToContent.astro +1 -1
- package/src/components/Headline.vue +44 -27
- package/src/components/Image.astro +5 -7
- package/src/components/Input.vue +143 -153
- package/src/components/Jumbotron/index.astro +143 -156
- package/src/components/Jumbotron/types.ts +28 -29
- package/src/components/Jumbotron/variants/Default.astro +44 -40
- package/src/components/Jumbotron/variants/Hero.astro +45 -53
- package/src/components/Jumbotron/variants/Post.astro +68 -64
- package/src/components/Jumbotron/variants/PostSplit.astro +89 -81
- package/src/components/Jumbotron.astro +12 -12
- package/src/components/LanguageSuggestion.astro +66 -69
- package/src/components/LeftSidebar.astro +10 -10
- package/src/components/MainColors.vue +2 -2
- package/src/components/MainInput.vue +6 -3
- package/src/components/Modal.astro +2 -2
- package/src/components/PartNumber.vue +2 -3
- package/src/components/Post/PostCategories.astro +2 -4
- package/src/components/Post/PostCategories.vue +2 -2
- package/src/components/PostHeader.astro +4 -6
- package/src/components/PrCode.vue +20 -19
- package/src/components/Product/ProductButton.vue +2 -5
- package/src/components/Product/ProductCarousel.astro +38 -27
- package/src/components/Product/ProductColors.vue +46 -42
- package/src/components/Product/ProductDetailName.vue +22 -22
- package/src/components/Product/ProductDetails.vue +115 -99
- package/src/components/Product/ProductDoc.vue +27 -25
- package/src/components/Product/ProductEngineType.vue +13 -10
- package/src/components/Product/ProductImage.astro +18 -19
- package/src/components/Product/ProductLink.vue +55 -58
- package/src/components/Product/ProductLinkInfo.astro +15 -18
- package/src/components/Product/ProductModel.vue +25 -24
- package/src/components/Product/ProductModels.vue +29 -33
- package/src/components/Product/ProductName.vue +15 -15
- package/src/components/Product/ProductNumber.astro +23 -31
- package/src/components/Product/ProductPositions.vue +32 -34
- package/src/components/ProductCarousel.astro +5 -5
- package/src/components/ProductCodes.vue +12 -14
- package/src/components/ProductDetailName.vue +18 -20
- package/src/components/ProductDetailsList.vue +48 -27
- package/src/components/Quote.vue +8 -6
- package/src/components/ReloadPrompt.astro +39 -47
- package/src/components/SlimBanner.vue +44 -19
- package/src/components/Table.vue +4 -6
- package/src/components/Translations.vue +17 -8
- package/src/components/flags/FlagPL.vue +4 -3
- package/src/components/flags/FlagUA.vue +2 -2
- package/src/components/layout/CallToAction.astro +17 -12
- package/src/components/layout/Container.astro +3 -1
- package/src/components/layout/Header.astro +12 -21
- package/src/config.ts +43 -43
- package/src/design.config.ts +63 -63
- package/src/env.d.ts +4 -4
- package/src/layouts/Layout.astro +10 -19
- package/src/layouts/MainLayout.astro +13 -19
- package/src/layouts/partials/FooterCommon.astro +2 -2
- package/src/layouts/partials/HeadCommon.astro +9 -9
- package/src/layouts/partials/HeadSEO.astro +12 -5
- package/src/pages/components/icons.astro +130 -121
- package/src/pages/core/shadows.astro +18 -11
- package/src/pages/index.astro +178 -75
- package/src/pwa.ts +4 -4
- package/src/styles/base/base.css +14 -19
- package/src/styles/base/grid.css +54 -58
- package/src/styles/base/typography.css +40 -40
- package/src/styles/content.css +25 -23
- package/src/styles/main.css +5 -6
- package/src/types/Product.ts +31 -31
- package/src/types/astro.d.ts +1 -1
- package/src/types/index.ts +234 -237
- package/src/utils/api/getCategories.ts +9 -9
- package/src/utils/category/getMainCategoryList.ts +22 -22
- package/src/utils/category/getSortedCategories.ts +7 -11
- package/src/utils/product/getPriceFormatted.ts +14 -11
- package/src/utils/product/getProductChecklist.ts +10 -11
- package/src/utils/product/useFormatProductNumber.ts +18 -9
- package/src/utils/seo/getShorterDescription.ts +6 -4
- package/src/utils/text/formatDate.ts +2 -3
- package/src/utils/text/formatLocaleNumber.ts +2 -2
- package/src/utils/text/formatPad.ts +2 -2
- package/src/utils/text/getNumberFormatted.ts +10 -10
- package/src/utils/text/getTranslatedLink.ts +3 -3
- package/src/utils/text.ts +11 -8
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
const MAX_DESCRIPTION_LENGTH = 150;
|
|
2
2
|
|
|
3
|
-
export const getShorterDescription = (
|
|
3
|
+
export const getShorterDescription = (
|
|
4
|
+
description: string | null,
|
|
5
|
+
limit = MAX_DESCRIPTION_LENGTH
|
|
6
|
+
) => {
|
|
4
7
|
function cutString(s: string, n: number) {
|
|
5
|
-
const text = s.replace(/(\n)/g,
|
|
8
|
+
const text = s.replace(/(\n)/g, ' ');
|
|
6
9
|
const cut = text.indexOf('. ', n);
|
|
7
10
|
return cut === -1 ? text : `${text.substring(0, cut)}.`;
|
|
8
11
|
}
|
|
9
12
|
|
|
10
13
|
return description ? cutString(description, limit) || '' : '';
|
|
11
|
-
|
|
12
|
-
}
|
|
14
|
+
};
|
|
13
15
|
|
|
14
16
|
export default getShorterDescription;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* Format numbers like details data: liters, measuring etc. */
|
|
2
2
|
|
|
3
|
-
export default function formatLocaleNumber(number: number
|
|
3
|
+
export default function formatLocaleNumber(number: number) {
|
|
4
4
|
// For English-only design system, always use dot notation
|
|
5
5
|
return String(number).replace(/,/g, '.');
|
|
6
|
-
}
|
|
6
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export const formatPad = (num: number, size: number) => {
|
|
2
2
|
return String(num).padStart(size, '0');
|
|
3
|
-
}
|
|
3
|
+
};
|
|
4
4
|
|
|
5
5
|
export default formatPad;
|
|
6
6
|
// export const formatPad = (num: number, size: number) => {
|
|
@@ -10,4 +10,4 @@ export default formatPad;
|
|
|
10
10
|
// while (productId.length < size) productId = `0${productId}`
|
|
11
11
|
|
|
12
12
|
// return productId
|
|
13
|
-
// }
|
|
13
|
+
// }
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
export const getNumberFormatted = (num, digits) => {
|
|
2
2
|
const lookup = [
|
|
3
|
-
{ value: 1e18, symbol:
|
|
4
|
-
{ value: 1e15, symbol:
|
|
5
|
-
{ value: 1e12, symbol:
|
|
6
|
-
{ value: 1e9, symbol:
|
|
7
|
-
{ value: 1e6, symbol:
|
|
8
|
-
{ value: 1e3, symbol:
|
|
9
|
-
{ value: 1, symbol:
|
|
3
|
+
{ value: 1e18, symbol: 'E' },
|
|
4
|
+
{ value: 1e15, symbol: 'P' },
|
|
5
|
+
{ value: 1e12, symbol: 'T' },
|
|
6
|
+
{ value: 1e9, symbol: 'G' },
|
|
7
|
+
{ value: 1e6, symbol: 'M' },
|
|
8
|
+
{ value: 1e3, symbol: 'k' },
|
|
9
|
+
{ value: 1, symbol: '' },
|
|
10
10
|
];
|
|
11
11
|
const item = lookup.find(item => num >= item.value) || lookup[lookup.length - 1];
|
|
12
|
-
return (num / item.value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/,
|
|
13
|
-
}
|
|
12
|
+
return (num / item.value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + item.symbol;
|
|
13
|
+
};
|
|
14
14
|
|
|
15
15
|
export default getNumberFormatted;
|
|
16
16
|
/*
|
|
@@ -31,4 +31,4 @@ export default getNumberFormatted;
|
|
|
31
31
|
// ];
|
|
32
32
|
// tests.forEach(test => {
|
|
33
33
|
// console.log("getNumberFormatted(%f, %i) = %s", test.num, test.digits, getNumberFormatted(test.num, test.digits));
|
|
34
|
-
// });
|
|
34
|
+
// });
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export const getTranslatedLink = (
|
|
2
|
-
return locale === 'en' ? link : `/${locale}${link}
|
|
3
|
-
}
|
|
1
|
+
export const getTranslatedLink = (link: string, locale = 'en') => {
|
|
2
|
+
return locale === 'en' ? link : `/${locale}${link}`;
|
|
3
|
+
};
|
|
4
4
|
|
|
5
5
|
export default getTranslatedLink;
|
package/src/utils/text.ts
CHANGED
|
@@ -1,19 +1,22 @@
|
|
|
1
1
|
export const text2paragraphs = (text: string, firstLineBottomMargin: boolean = false) => {
|
|
2
2
|
// return '<p class="mb-2">' + text.split(/[\n\r]+/g).join('</p><p>') + '</p>'
|
|
3
|
-
let out =
|
|
3
|
+
let out =
|
|
4
|
+
'<p' +
|
|
5
|
+
(firstLineBottomMargin ? 'class="mb-3"' : '') +
|
|
6
|
+
'>' +
|
|
7
|
+
text.split('\n').join('</p><p>') +
|
|
8
|
+
'<\/p>';
|
|
4
9
|
return out.split('<p><\/p><p>').join('<p class="mt-3">');
|
|
5
|
-
}
|
|
6
|
-
|
|
10
|
+
};
|
|
7
11
|
|
|
8
12
|
export const countWords = (str: string) => {
|
|
9
13
|
return str.trim().split(/\s+/).length;
|
|
10
|
-
}
|
|
14
|
+
};
|
|
11
15
|
|
|
12
16
|
export const firstSentence = (str: string) => {
|
|
13
17
|
return str.split('\.');
|
|
14
|
-
}
|
|
18
|
+
};
|
|
15
19
|
|
|
16
20
|
export const removeSemicolon = (name: string) => {
|
|
17
|
-
return name.replace(';', '')
|
|
18
|
-
}
|
|
19
|
-
|
|
21
|
+
return name.replace(';', '');
|
|
22
|
+
};
|