spoko-design-system 0.0.1 → 0.0.5

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.
Files changed (113) hide show
  1. package/.astro/icon.d.ts +8109 -10
  2. package/.github/workflows/deploy.yml +39 -39
  3. package/.stackblitzrc +5 -5
  4. package/.vscode/extensions.json +5 -4
  5. package/.vscode/launch.json +11 -11
  6. package/.vscode/settings.json +6 -0
  7. package/LICENSE +21 -21
  8. package/Layout/Header.astro +111 -89
  9. package/README.md +94 -69
  10. package/astro-i18next.config.mjs +17 -17
  11. package/astro-i18next.config.ts +10 -10
  12. package/astro.config.mjs +51 -42
  13. package/index.ts +6 -6
  14. package/package.json +25 -17
  15. package/public/astro-design-system-logo.svg +10 -10
  16. package/public/favicon.ico +0 -0
  17. package/public/favicon.svg +0 -0
  18. package/public/fonts/lg.svg +53 -53
  19. package/public/fonts/vwhead-bold-demo.html +549 -549
  20. package/public/fonts/vwhead-regular-demo.html +549 -549
  21. package/public/fonts/vwtext-bold-demo.html +549 -549
  22. package/public/fonts/vwtext-regular-demo.html +549 -549
  23. package/public/github.svg +3 -3
  24. package/public/grid_dot.svg +4 -4
  25. package/public/linkedin.svg +44 -44
  26. package/public/locales/en/translation.json +8 -5
  27. package/public/locales/pl/translation.json +8 -5
  28. package/public/make-scrollable-code-focusable.js +3 -3
  29. package/public/polo.blue.svg +29 -0
  30. package/public/spoko.space.svg +71 -0
  31. package/public/twitter.svg +46 -46
  32. package/sandbox.config.json +11 -11
  33. package/src/MyComponent.astro +8 -8
  34. package/src/components/Badge.vue +19 -19
  35. package/src/components/Badges.vue +24 -23
  36. package/src/components/Breadcrumbs.vue +108 -111
  37. package/src/components/Button.vue +37 -0
  38. package/src/components/ButtonCopy.vue +52 -0
  39. package/src/components/Card.astro +25 -0
  40. package/src/components/CategoryLink.astro +18 -0
  41. package/src/components/Copyright.astro +11 -11
  42. package/src/components/Date.astro +7 -0
  43. package/src/components/FuckRussia.vue +65 -65
  44. package/src/components/HandDrive.astro +29 -30
  45. package/src/components/HeadCommon.astro +40 -40
  46. package/src/components/HeadSEO.astro +41 -41
  47. package/src/components/Header/AstroLogo.astro +7 -27
  48. package/src/components/Header/Header.astro +44 -48
  49. package/src/components/Header/SkipToContent.astro +1 -1
  50. package/src/components/Headline.vue +60 -0
  51. package/src/components/Image.astro +30 -0
  52. package/src/components/Jumbatron.vue +46 -31
  53. package/src/components/LeftSidebar.astro +45 -44
  54. package/src/components/MainColors.vue +29 -29
  55. package/src/components/MainInput.vue +18 -18
  56. package/src/components/MainTable.vue +40 -45
  57. package/src/components/Modal.astro +30 -0
  58. package/src/components/PageContent.astro +14 -14
  59. package/src/components/PostHeader.astro +104 -0
  60. package/src/components/PrCode.vue +156 -0
  61. package/src/components/ProductNumber.astro +117 -0
  62. package/src/components/ProductTile.astro +54 -0
  63. package/src/components/RightSidebar.astro +15 -11
  64. package/src/components/SlimBanner.vue +59 -59
  65. package/src/components/TableOfContents.astro +11 -11
  66. package/src/components/Translations.vue +27 -0
  67. package/src/components/flags/FlagPL.vue +2 -2
  68. package/src/components/flags/FlagUA.vue +2 -2
  69. package/src/components/layout/Header.astro +50 -69
  70. package/src/config.ts +51 -42
  71. package/src/design.config.ts +73 -92
  72. package/src/env.d.ts +1 -1
  73. package/src/flag-poland.svg +1 -0
  74. package/src/flag-uk.svg +1 -0
  75. package/src/layouts/Layout.astro +43 -0
  76. package/src/layouts/MainLayout.astro +60 -50
  77. package/src/pages/components/badges.mdx +69 -35
  78. package/src/pages/components/breadcrumbs.mdx +136 -103
  79. package/src/pages/components/buttons.mdx +143 -60
  80. package/src/pages/components/card.mdx +40 -0
  81. package/src/pages/components/copyright.mdx +41 -24
  82. package/src/pages/components/flags.mdx +40 -26
  83. package/src/pages/components/fuck-russia.mdx +39 -16
  84. package/src/pages/components/hand-drive.mdx +38 -27
  85. package/src/pages/components/headline.mdx +148 -0
  86. package/src/pages/components/icons.astro +54 -45
  87. package/src/pages/components/image.mdx +502 -0
  88. package/src/pages/components/input.mdx +45 -14
  89. package/src/pages/components/jumbatron.mdx +71 -48
  90. package/src/pages/components/modal.mdx +64 -0
  91. package/src/pages/components/post-header.mdx +58 -0
  92. package/src/pages/components/pr-code.mdx +41 -0
  93. package/src/pages/components/product-number.mdx +65 -0
  94. package/src/pages/components/product-tile.mdx +39 -0
  95. package/src/pages/components/slimbanner.mdx +29 -27
  96. package/src/pages/components/table.mdx +39 -20
  97. package/src/pages/core/colors.mdx +8 -8
  98. package/src/pages/core/introduction.mdx +74 -68
  99. package/src/pages/core/shadows.astro +20 -20
  100. package/src/pages/core/typography.astro +46 -46
  101. package/src/pages/index.astro +70 -52
  102. package/src/pages/patterns/introduction.mdx +60 -61
  103. package/src/styles/_variables.scss +75 -75
  104. package/src/styles/base/_base.scss +166 -158
  105. package/src/styles/base/_typography.scss +147 -147
  106. package/src/styles/content.scss +66 -71
  107. package/src/styles/main.scss +22 -22
  108. package/tailwind.config.cjs +8 -8
  109. package/tsconfig.json +11 -11
  110. package/uno.config.ts +246 -227
  111. package/src/components/MainButton.vue +0 -26
  112. package/src/components/MainStatusPill.vue +0 -32
  113. package/src/pages/components/status-pill.mdx +0 -22
@@ -0,0 +1,43 @@
1
+ ---
2
+ import HeadCommon from '../components/HeadCommon.astro';
3
+ import HeadSEO from '../components/HeadSEO.astro';
4
+ import * as CONFIG from '../config';
5
+ import { t, changeLanguage } from "i18next";
6
+ import '../styles/main.scss';
7
+ import Copyright from '../components/Copyright.astro'
8
+ const locale = "en";
9
+ changeLanguage(locale);
10
+ const { content = {} } = Astro.props;
11
+ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
12
+ ---
13
+
14
+ <html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
15
+ <head>
16
+ <HeadCommon />
17
+ <HeadSEO {content} canonicalURL={canonicalURL} />
18
+ <title>{content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}</title>
19
+ </head>
20
+
21
+ <body class="bg-blue-50">
22
+
23
+
24
+ <div class=" bg-white z-10 mb-11 relative">
25
+ <slot />
26
+ </div>
27
+ <footer>
28
+ <Copyright class="fixed bottom-0 z-0 w-full">
29
+ <a slot="middle-item" href={`https://${import.meta.env.COPYRIGHT_DOMAIN}`} target="_blank" rel="follow noopener" class="flex my-auto items-center mx-auto" title={`Proudly made in Poland by ${import.meta.env.COPYRIGHT_DOMAIN}`}>
30
+ <div class="text-xxs md:text-xs mr-1 mt-0.5 whitespace-nowrap">createdy by</div>
31
+ <img
32
+ class="h-4 md:h-5 w-min"
33
+ src={`/${import.meta.env.COPYRIGHT_IMG}`}
34
+ alt="Modern Websites"
35
+ width="126"
36
+ height="23"
37
+ loading="lazy"
38
+ >
39
+ </a>
40
+ </Copyright>
41
+ </footer>
42
+ </body>
43
+ </html>
@@ -1,50 +1,60 @@
1
- ---
2
- import HeadCommon from '../components/HeadCommon.astro';
3
- import HeadSEO from '../components/HeadSEO.astro';
4
- import Header from '../components/Header/Header.astro';
5
- import PageContent from '../components/PageContent.astro';
6
- import LeftSidebar from '../components/LeftSidebar.astro';
7
- import RightSidebar from '../components/RightSidebar.astro';
8
- import * as CONFIG from '../config';
9
- import { t, changeLanguage } from "i18next";
10
- import '../styles/main.scss';
11
- const locale = "en";
12
- changeLanguage(locale);
13
-
14
- const { content = {} } = Astro.props;
15
- const currentPage = Astro.url.pathname;
16
- // const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
17
- const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
18
- console.log('canonicalURL', canonicalURL)
19
- ---
20
-
21
- <html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
22
- <head>
23
- <HeadCommon />
24
- <HeadSEO {content} canonicalURL={canonicalURL} />
25
- <title>{content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}</title>
26
- </head>
27
-
28
- <body class="bg-slate-100">
29
- <div class="sticky top-0 z-10 w-full">
30
- <Header currentPage={currentPage} />
31
- </div>
32
- <div class="grid grid-cols-12">
33
- <div class="col-span-3 sticky top-0 pt-12 h-screen flex">
34
- <div class="ml-auto">
35
- <LeftSidebar currentPage={currentPage} />
36
- </div>
37
- </div>
38
- <main class="py-4 px-8 pb-32 col-span-6 overflow-auto">
39
- <div>
40
- <PageContent content={content}>
41
- <slot />
42
- </PageContent>
43
- </div>
44
- </main>
45
- <div class="col-span-3 sticky top-0 h-screen flex">
46
- <RightSidebar content={content} />
47
- </div>
48
- </div>
49
- </body>
50
- </html>
1
+ ---
2
+ import HeadCommon from '../components/HeadCommon.astro';
3
+ import HeadSEO from '../components/HeadSEO.astro';
4
+ import Header from '../components/Header/Header.astro';
5
+ import PageContent from '../components/PageContent.astro';
6
+ import LeftSidebar from '../components/LeftSidebar.astro';
7
+ import * as CONFIG from '../config';
8
+ import { t, changeLanguage } from "i18next";
9
+ import '../styles/main.scss';
10
+ import Copyright from '../components/Copyright.astro'
11
+ const locale = "en";
12
+ changeLanguage(locale);
13
+ const { content = {} } = Astro.props;
14
+ const currentPage = Astro.url.pathname;
15
+ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
16
+ ---
17
+
18
+ <html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
19
+ <head>
20
+ <HeadCommon />
21
+ <HeadSEO {content} canonicalURL={canonicalURL} />
22
+ <title>{content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}</title>
23
+ </head>
24
+
25
+ <body class="bg-blue-50">
26
+ <div class="sticky top-0 z-10 w-full">
27
+ <Header currentPage={currentPage} />
28
+ </div>
29
+
30
+ <div class="flex bg-white z-10 mb-11 relative">
31
+ <div class="sticky top-0 flex lg:(h-screen w-64) z-50 ">
32
+ <div class="mr-auto ">
33
+ <LeftSidebar currentPage={currentPage} />
34
+ </div>
35
+ </div>
36
+ <main class="pb-4 px-4 sm:px-8 col-auto sm:(pb-32) overflow-auto w-full">
37
+ <div>
38
+ <PageContent content={content}>
39
+ <slot />
40
+ </PageContent>
41
+ </div>
42
+ </main>
43
+ </div>
44
+ <footer>
45
+ <Copyright class="fixed bottom-0 z-0 w-full">
46
+ <a slot="middle-item" href="https://spoko.space" target="_blank" rel="follow noopener" class="flex my-auto items-center mx-auto" title={`Proudly made in Poland by spoko.space`}>
47
+ <div class="text-xxs md:text-xs mr-1 mt-0.5 whitespace-nowrap">createdy by</div>
48
+ <img
49
+ class="h-4 md:h-5 w-min"
50
+ src="/spoko.space.svg"
51
+ alt="Modern Websites"
52
+ width="126"
53
+ height="23"
54
+ loading="lazy"
55
+ >
56
+ </a>
57
+ </Copyright>
58
+ </footer>
59
+ </body>
60
+ </html>
@@ -1,35 +1,69 @@
1
- ---
2
- title: "Badges"
3
- layout: "../../layouts/MainLayout.astro"
4
- ---
5
- import Badges from '../../components/Badges.vue'
6
-
7
- ## Badges
8
-
9
- ### Badges - GTI
10
- <div class="component-preview">
11
- <div class="relative min-h-6 ">
12
- <Badges badges={['GTI']} class:list="top-2" />
13
- </div>
14
- </div>
15
- ```js
16
- <div class="relative min-h-14 ">
17
- <Badges badges={['GTI']} class:list="top-2" />
18
- </div>
19
-
20
- ```
21
-
22
-
23
- ### Badges - Motorsport
24
- <div class="component-preview">
25
- <div class="relative min-h-6 ">
26
- <Badges badges={['Motorsport']} class:list="top-2" />
27
- </div>
28
- </div>
29
-
30
- ```js
31
- <div class="relative min-h-14 ">
32
- <Badges badges={['Motorsport']} class:list="top-2" />
33
- </div>
34
-
35
- ```
1
+ ---
2
+ title: "Badges"
3
+ layout: "../../layouts/MainLayout.astro"
4
+ ---
5
+ import Badges from '../../components/Badges.vue'
6
+
7
+ ## Product badges
8
+
9
+ ### Badge - GTI
10
+ <div class="component-preview">
11
+ <div class="relative min-h-10">
12
+ <Badges badges={['GTI']} class="top-2" />
13
+ </div>
14
+ </div>
15
+ ```js
16
+ <div class="relative min-h-10">
17
+ <Badges badges={['GTI']} class="top-2" />
18
+ </div>
19
+
20
+ ```
21
+
22
+
23
+ ### Badge - Motorsport
24
+ <div class="component-preview">
25
+ <div class="relative min-h-10">
26
+ <Badges badges={['Motorsport']} class="top-2" />
27
+ </div>
28
+ </div>
29
+
30
+ ```js
31
+ <div class="relative min-h-10">
32
+ <Badges badges={['Motorsport']} class="top-2" />
33
+ </div>
34
+
35
+ ```
36
+
37
+
38
+ ### Badge on image - Motorsport
39
+ <div class="component-preview">
40
+ <div class="relative">
41
+ <img src="https://placehold.co/300x200" alt="image alt" />
42
+ <Badges badges={['Motorsport']} class="top-2" />
43
+ </div>
44
+ </div>
45
+
46
+ ```js
47
+ <div class="relative">
48
+ <img src="https://placehold.co/300x200" alt="image alt" />
49
+ <Badges badges={['Motorsport']} class="top-2" />
50
+ </div>
51
+
52
+ ```
53
+
54
+
55
+ ### Few badges on image
56
+ <div class="component-preview">
57
+ <div class="relative">
58
+ <img src="https://placehold.co/300x200" alt="image alt" />
59
+ <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
60
+ </div>
61
+ </div>
62
+
63
+ ```js
64
+ <div class="relative">
65
+ <img src="https://placehold.co/300x200" alt="image alt" />
66
+ <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
67
+ </div>
68
+
69
+ ```
@@ -1,103 +1,136 @@
1
- ---
2
- title: "Breadcrumbs"
3
- layout: "../../layouts/MainLayout.astro"
4
-
5
-
6
- ---
7
- import Breadcrumbs from '../../components/Breadcrumbs.vue'
8
-
9
- ## Breadcrumbs
10
-
11
- Breadcrumbs component
12
-
13
-
14
- ### show back
15
-
16
- <div class="component-preview">
17
- <Breadcrumbs
18
- breadcrumbs={ [ {"name": "Level1", "path": "level 1"}, {"name": "Level 2", "path": "level2"}, {"name": "Level 3", "path": "level3"} ] }
19
- data-lang="en"
20
- product-number="6R0XXXXXX"
21
- class="py-1 order-0 px-1 max-w-full flex bg-white"
22
- show-back
23
- text-back="Back"
24
- />
25
- </div>
26
-
27
- ```js
28
-
29
- <Breadcrumbs
30
- breadcrumbs={
31
- [
32
- {"name": "Level1", "path": "level 1"},
33
- {"name": "Level 2", "path": "level2"},
34
- {"name": "Level 3", "path": "level3"}
35
- ]
36
- }
37
- data-lang="en"
38
- product-number="6R0XXXXXX"
39
- class="py-1 order-0 px-1 max-w-full flex bg-white"
40
- show-back
41
- text-back="Back"
42
- />
43
- ```
44
-
45
-
46
- ### show home
47
-
48
- <div class="component-preview">
49
- <Breadcrumbs
50
- breadcrumbs={ [ {"name": "Level1", "path": "level 1"}, {"name": "Level 2", "path": "level2"}, {"name": "Level 3", "path": "level3"} ] }
51
- data-lang="en"
52
- product-number="6R0XXXXXX"
53
- class="py-1 order-0 px-1 max-w-full flex bg-white"
54
- show-home
55
- />
56
- </div>
57
-
58
- ```js
59
-
60
- <Breadcrumbs
61
- breadcrumbs={
62
- [
63
- {"name": "Level1", "path": "level 1"},
64
- {"name": "Level 2", "path": "level2"},
65
- {"name": "Level 3", "path": "level3"}
66
- ]
67
- }
68
- data-lang="en"
69
- product-number="6R0XXXXXX"
70
- class="py-1 order-0 px-1 max-w-full flex bg-white"
71
- show-home
72
- />
73
- ```
74
-
75
-
76
- ### simply
77
-
78
- <div class="component-preview">
79
- <Breadcrumbs
80
- breadcrumbs={ [ {"name": "Level1", "path": "level 1"}, {"name": "Level 2", "path": "level2"}, {"name": "Level 3", "path": "level3"} ] }
81
- data-lang="en"
82
- product-number="6R0XXXXXX"
83
- class="py-1 order-0 px-1 max-w-full flex bg-white"
84
- />
85
- </div>
86
-
87
- ```js
88
-
89
- <Breadcrumbs
90
- breadcrumbs={
91
- [
92
- {"name": "Level1", "path": "level 1"},
93
- {"name": "Level 2", "path": "level2"},
94
- {"name": "Level 3", "path": "level3"}
95
- ]
96
- }
97
- data-lang="en"
98
- product-number="6R0XXXXXX"
99
- class="py-1 order-0 px-1 max-w-full flex bg-white"
100
- show-back
101
- text-back="Back"
102
- />
103
- ```
1
+ ---
2
+ title: "Breadcrumbs"
3
+ layout: "../../layouts/MainLayout.astro"
4
+
5
+
6
+ ---
7
+ import Breadcrumbs from '../../components/Breadcrumbs.vue'
8
+
9
+ ## Breadcrumbs
10
+
11
+ Breadcrumbs component with BreadcrumbList Microdata.
12
+
13
+ Structured Data for Breadcrumbs that produce a Rich Snippet (in this case breadcrumbs) in search results that are clickable, too!
14
+
15
+ #
16
+
17
+ https://schema.org/BreadcrumbList
18
+
19
+ https://schema.org/ListItem
20
+
21
+
22
+
23
+ ### show back
24
+
25
+ <div class="component-preview">
26
+ <Breadcrumbs
27
+ breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
28
+ product-number="6R0XXXXXX"
29
+ class="py-1 order-0 px-1 max-w-full flex bg-white"
30
+ show-back
31
+ text-back="Home"
32
+ />
33
+ </div>
34
+
35
+ ```js
36
+ <Breadcrumbs
37
+ breadcrumbs={
38
+ [
39
+ {"name": "Level1", "path": "level1"},
40
+ {"name": "Level 2", "path": "level2"},
41
+ {"name": "Level 3", "path": "level3"}
42
+ ]
43
+ }
44
+ product-number="6R0XXXXXX"
45
+ class="py-1 order-0 px-1 max-w-full flex bg-white"
46
+ show-back
47
+ text-back="Home"
48
+ />
49
+ ```
50
+
51
+
52
+ ### show home
53
+
54
+ <div class="component-preview">
55
+ <Breadcrumbs
56
+ breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
57
+ product-number="6R0XXXXXX"
58
+ class="py-1 order-0 px-1 max-w-full flex bg-white"
59
+ show-home
60
+ />
61
+ </div>
62
+
63
+ ```js
64
+ <Breadcrumbs
65
+ breadcrumbs={
66
+ [
67
+ {"name": "Level1", "path": "level 1"},
68
+ {"name": "Level 2", "path": "level2"},
69
+ {"name": "Level 3", "path": "level3"}
70
+ ]
71
+ }
72
+ product-number="6R0XXXXXX"
73
+ class="py-1 order-0 px-1 max-w-full flex bg-white"
74
+ show-home
75
+ />
76
+ ```
77
+
78
+
79
+ ### simply
80
+
81
+ <div class="component-preview">
82
+ <Breadcrumbs
83
+ breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
84
+ product-number="6R0XXXXXX"
85
+ class="py-1 order-0 px-1 max-w-full flex bg-white"
86
+ />
87
+ </div>
88
+
89
+ ```js
90
+ <Breadcrumbs
91
+ breadcrumbs={
92
+ [
93
+ {"name": "Level1", "path": "level 1"},
94
+ {"name": "Level 2", "path": "level2"},
95
+ {"name": "Level 3", "path": "level3"}
96
+ ]
97
+ }
98
+ product-number="6R0XXXXXX"
99
+ class="py-1 order-0 px-1 max-w-full flex bg-white"
100
+ show-back
101
+ text-back="Back"
102
+ />
103
+ ```
104
+
105
+
106
+ ### Schema example:
107
+ - https://validator.schema.org/?hl=en-US#url=https%3A%2F%2Fcatalog.polo.blue%2FN10733102%2F
108
+ #
109
+
110
+ | @type | BreadcrumbList |
111
+ | ---------------- | --------------------------------------------------------------------------------- |
112
+ | **itemListElement** | |
113
+ | **@type** | ListItem |
114
+ | **name** | Electrical, Lighting, Telematics |
115
+ | **position** | 1 |
116
+ | **item** | |
117
+ | **@type** | Thing |
118
+ | **@id** | https://catalog.polo.blue/electrical-lighting-telematics/ |
119
+ | **itemListElement** | |
120
+ | **@type** | ListItem |
121
+ | **name** | Exterior Lighting |
122
+ | **position** | 2 |
123
+ | **item** | |
124
+ | **@type** | Thing |
125
+ | **@id** | https://catalog.polo.blue/electrical-lighting-telematics/exterior-lighting/ |
126
+ | **itemListElement** | |
127
+ | **@type** | ListItem |
128
+ | **name** | Bulbs |
129
+ | **position** | 3 |
130
+ | **item** | |
131
+ | **@type** | Thing |
132
+ | **@id** | https://catalog.polo.blue/electrical-lighting-telematics/exterior-lighting/bulbs/ |
133
+ | **itemListElement** | |
134
+ | **@type** | ListItem |
135
+ | **name** | Bulb carrier with bulb; silver lens |
136
+ | **position** | 4 |