@public-ui/sample-react 1.7.10 → 1.7.12

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 (204) hide show
  1. package/dist/104.js +2 -0
  2. package/dist/{4669.js → 1296.js} +2 -2
  3. package/dist/{8869.js → 1461.js} +2 -2
  4. package/dist/{8734.js → 1684.js} +2 -2
  5. package/dist/{4333.js → 1720.js} +2 -2
  6. package/dist/1728.js +2 -0
  7. package/dist/1888.js +2 -0
  8. package/dist/2120.js +2 -0
  9. package/dist/{1181.js → 2240.js} +2 -2
  10. package/dist/{8612.js → 2444.js} +2 -2
  11. package/dist/2628.js +2 -0
  12. package/dist/{3388.js → 2740.js} +2 -2
  13. package/dist/2764.js +2 -0
  14. package/dist/2782.js +2 -0
  15. package/dist/2812.js +2 -0
  16. package/dist/{2164.js → 3180.js} +2 -2
  17. package/dist/{5324.js → 3200.js} +2 -2
  18. package/dist/3204.js +2 -0
  19. package/dist/352.js +2 -0
  20. package/dist/3564.js +2 -0
  21. package/dist/3920.js +2 -0
  22. package/dist/4064.js +2 -0
  23. package/dist/408.js +2 -0
  24. package/dist/{8037.js → 4136.js} +1 -1
  25. package/dist/{9533.js → 4184.js} +2 -2
  26. package/dist/{4686.js → 4544.js} +2 -2
  27. package/dist/{9865.js → 4728.js} +2 -2
  28. package/dist/4915.js +2 -0
  29. package/dist/{1596.js → 4988.js} +2 -2
  30. package/dist/{3552.js → 5336.js} +2 -2
  31. package/dist/5376.js +2 -0
  32. package/dist/{9912.js → 5456.js} +2 -2
  33. package/dist/5615.js +1 -1
  34. package/dist/5628.js +2 -0
  35. package/dist/5744.js +2 -0
  36. package/dist/{9317.js → 5768.js} +2 -2
  37. package/dist/{9330.js → 5839.js} +2 -2
  38. package/dist/5956.js +2 -0
  39. package/dist/5972.js +2 -0
  40. package/dist/6040.js +2 -0
  41. package/dist/{3600.js → 6112.js} +2 -2
  42. package/dist/{1767.js → 6272.js} +2 -2
  43. package/dist/6864.js +2 -0
  44. package/dist/{4279.js → 7192.js} +2 -2
  45. package/dist/7312.js +2 -0
  46. package/dist/{7432.js → 7344.js} +2 -2
  47. package/dist/736.js +2 -0
  48. package/dist/{4950.js → 7392.js} +2 -2
  49. package/dist/7496.js +2 -0
  50. package/dist/7508.js +2 -0
  51. package/dist/7596.js +2 -0
  52. package/dist/7712.js +2 -0
  53. package/dist/{2643.js → 7808.js} +2 -2
  54. package/dist/8188.js +2 -0
  55. package/dist/{7170.js → 8232.js} +2 -2
  56. package/dist/8248.js +2 -0
  57. package/dist/828.js +2 -0
  58. package/dist/{1218.js → 8476.js} +2 -2
  59. package/dist/{6010.js → 8524.js} +2 -2
  60. package/dist/{9727.js → 9088.js} +2 -2
  61. package/dist/9096.js +2 -0
  62. package/dist/{2079.js → 9224.js} +2 -2
  63. package/dist/{4463.js → 9404.js} +2 -2
  64. package/dist/9424.js +2 -0
  65. package/dist/{8404.js → 9496.js} +2 -2
  66. package/dist/{9709.js → 9544.js} +2 -2
  67. package/dist/9680.js +2 -0
  68. package/dist/9888.js +2 -0
  69. package/dist/9984.js +1 -1
  70. package/dist/index.html +1 -1
  71. package/dist/main.css +1 -1
  72. package/dist/main.js +1 -2333
  73. package/dist/main.js.LICENSE.txt +2 -4
  74. package/package.json +14 -15
  75. package/public/index.html +1 -1
  76. package/src/App.tsx +28 -22
  77. package/src/components/BackPage.tsx +17 -0
  78. package/src/components/SampleDescription.tsx +23 -0
  79. package/src/components/alert/html.tsx +2 -2
  80. package/src/components/breadcrumb/basic.tsx +9 -9
  81. package/src/components/handout/basic.tsx +50 -32
  82. package/src/components/input-text/hide-errors.tsx +25 -0
  83. package/src/components/input-text/routes.ts +2 -0
  84. package/src/components/link/basic.tsx +7 -6
  85. package/src/components/link/icons.tsx +5 -1
  86. package/src/components/link/image.tsx +3 -3
  87. package/src/components/link/target.tsx +6 -5
  88. package/src/components/link-button/basic.tsx +1 -3
  89. package/src/components/link-group/basic.tsx +3 -3
  90. package/src/components/link-group/horizontal.tsx +3 -3
  91. package/src/components/nav/active.tsx +3 -3
  92. package/src/components/nav/aria-current.tsx +2 -2
  93. package/src/components/nav/basic.tsx +13 -13
  94. package/src/components/nav/horizontal.tsx +12 -12
  95. package/src/scenarios/appointment-form/AppointmentForm.tsx +10 -4
  96. package/src/scenarios/appointment-form/AvailableAppointmentsForm.tsx +4 -9
  97. package/src/scenarios/appointment-form/DistrictForm.tsx +3 -8
  98. package/src/scenarios/appointment-form/PersonalInformationForm.tsx +20 -0
  99. package/src/scenarios/appointment-form/formUtils.ts +8 -0
  100. package/src/scenarios/routes.ts +3 -1
  101. package/src/scenarios/static-form.tsx +74 -0
  102. package/src/shares/HideMenusContext.ts +3 -0
  103. package/dist/1090.js +0 -2
  104. package/dist/1338.js +0 -2
  105. package/dist/1517.js +0 -2
  106. package/dist/2163.js +0 -2
  107. package/dist/2415.js +0 -2
  108. package/dist/2594.js +0 -2
  109. package/dist/2611.js +0 -2
  110. package/dist/3099.js +0 -2
  111. package/dist/3145.js +0 -2
  112. package/dist/3345.js +0 -2
  113. package/dist/3466.js +0 -2
  114. package/dist/3580.js +0 -2
  115. package/dist/3619.js +0 -2
  116. package/dist/3776.js +0 -2
  117. package/dist/4150.js +0 -2
  118. package/dist/42.js +0 -2
  119. package/dist/4385.js +0 -2
  120. package/dist/4531.js +0 -2
  121. package/dist/4815.js +0 -2
  122. package/dist/5027.js +0 -2
  123. package/dist/521.js +0 -2
  124. package/dist/5373.js +0 -2
  125. package/dist/5518.js +0 -2
  126. package/dist/5853.js +0 -2
  127. package/dist/6308.js +0 -2
  128. package/dist/755.js +0 -2
  129. package/dist/7654.js +0 -2
  130. package/dist/817.js +0 -2
  131. package/dist/881.js +0 -2
  132. package/dist/892.js +0 -2
  133. package/dist/8948.js +0 -2
  134. package/dist/895.js +0 -2
  135. package/dist/8951.js +0 -2
  136. package/dist/9797.js +0 -2
  137. package/dist/9886.js +0 -2
  138. package/src/scenarios/appointment-form/ErrorList.tsx +0 -35
  139. /package/dist/{1090.js.LICENSE.txt → 104.js.LICENSE.txt} +0 -0
  140. /package/dist/{1181.js.LICENSE.txt → 1296.js.LICENSE.txt} +0 -0
  141. /package/dist/{1218.js.LICENSE.txt → 1461.js.LICENSE.txt} +0 -0
  142. /package/dist/{1338.js.LICENSE.txt → 1684.js.LICENSE.txt} +0 -0
  143. /package/dist/{1517.js.LICENSE.txt → 1720.js.LICENSE.txt} +0 -0
  144. /package/dist/{1596.js.LICENSE.txt → 1728.js.LICENSE.txt} +0 -0
  145. /package/dist/{1767.js.LICENSE.txt → 1888.js.LICENSE.txt} +0 -0
  146. /package/dist/{2079.js.LICENSE.txt → 2120.js.LICENSE.txt} +0 -0
  147. /package/dist/{2163.js.LICENSE.txt → 2240.js.LICENSE.txt} +0 -0
  148. /package/dist/{2164.js.LICENSE.txt → 2444.js.LICENSE.txt} +0 -0
  149. /package/dist/{2415.js.LICENSE.txt → 2628.js.LICENSE.txt} +0 -0
  150. /package/dist/{2594.js.LICENSE.txt → 2740.js.LICENSE.txt} +0 -0
  151. /package/dist/{2611.js.LICENSE.txt → 2764.js.LICENSE.txt} +0 -0
  152. /package/dist/{2643.js.LICENSE.txt → 2782.js.LICENSE.txt} +0 -0
  153. /package/dist/{3099.js.LICENSE.txt → 2812.js.LICENSE.txt} +0 -0
  154. /package/dist/{3145.js.LICENSE.txt → 3180.js.LICENSE.txt} +0 -0
  155. /package/dist/{3345.js.LICENSE.txt → 3200.js.LICENSE.txt} +0 -0
  156. /package/dist/{3388.js.LICENSE.txt → 3204.js.LICENSE.txt} +0 -0
  157. /package/dist/{3466.js.LICENSE.txt → 352.js.LICENSE.txt} +0 -0
  158. /package/dist/{3552.js.LICENSE.txt → 3564.js.LICENSE.txt} +0 -0
  159. /package/dist/{3580.js.LICENSE.txt → 3920.js.LICENSE.txt} +0 -0
  160. /package/dist/{3600.js.LICENSE.txt → 4064.js.LICENSE.txt} +0 -0
  161. /package/dist/{3619.js.LICENSE.txt → 408.js.LICENSE.txt} +0 -0
  162. /package/dist/{3776.js.LICENSE.txt → 4184.js.LICENSE.txt} +0 -0
  163. /package/dist/{4150.js.LICENSE.txt → 4544.js.LICENSE.txt} +0 -0
  164. /package/dist/{42.js.LICENSE.txt → 4728.js.LICENSE.txt} +0 -0
  165. /package/dist/{4279.js.LICENSE.txt → 4915.js.LICENSE.txt} +0 -0
  166. /package/dist/{4333.js.LICENSE.txt → 4988.js.LICENSE.txt} +0 -0
  167. /package/dist/{4385.js.LICENSE.txt → 5336.js.LICENSE.txt} +0 -0
  168. /package/dist/{4463.js.LICENSE.txt → 5376.js.LICENSE.txt} +0 -0
  169. /package/dist/{4531.js.LICENSE.txt → 5456.js.LICENSE.txt} +0 -0
  170. /package/dist/{4669.js.LICENSE.txt → 5628.js.LICENSE.txt} +0 -0
  171. /package/dist/{4686.js.LICENSE.txt → 5744.js.LICENSE.txt} +0 -0
  172. /package/dist/{4815.js.LICENSE.txt → 5768.js.LICENSE.txt} +0 -0
  173. /package/dist/{4950.js.LICENSE.txt → 5839.js.LICENSE.txt} +0 -0
  174. /package/dist/{5027.js.LICENSE.txt → 5956.js.LICENSE.txt} +0 -0
  175. /package/dist/{521.js.LICENSE.txt → 5972.js.LICENSE.txt} +0 -0
  176. /package/dist/{5324.js.LICENSE.txt → 6040.js.LICENSE.txt} +0 -0
  177. /package/dist/{5373.js.LICENSE.txt → 6112.js.LICENSE.txt} +0 -0
  178. /package/dist/{5518.js.LICENSE.txt → 6272.js.LICENSE.txt} +0 -0
  179. /package/dist/{5853.js.LICENSE.txt → 6864.js.LICENSE.txt} +0 -0
  180. /package/dist/{6010.js.LICENSE.txt → 7192.js.LICENSE.txt} +0 -0
  181. /package/dist/{6308.js.LICENSE.txt → 7312.js.LICENSE.txt} +0 -0
  182. /package/dist/{7170.js.LICENSE.txt → 7344.js.LICENSE.txt} +0 -0
  183. /package/dist/{7432.js.LICENSE.txt → 736.js.LICENSE.txt} +0 -0
  184. /package/dist/{755.js.LICENSE.txt → 7392.js.LICENSE.txt} +0 -0
  185. /package/dist/{7654.js.LICENSE.txt → 7496.js.LICENSE.txt} +0 -0
  186. /package/dist/{817.js.LICENSE.txt → 7508.js.LICENSE.txt} +0 -0
  187. /package/dist/{8404.js.LICENSE.txt → 7596.js.LICENSE.txt} +0 -0
  188. /package/dist/{8612.js.LICENSE.txt → 7712.js.LICENSE.txt} +0 -0
  189. /package/dist/{8734.js.LICENSE.txt → 7808.js.LICENSE.txt} +0 -0
  190. /package/dist/{881.js.LICENSE.txt → 8188.js.LICENSE.txt} +0 -0
  191. /package/dist/{8869.js.LICENSE.txt → 8232.js.LICENSE.txt} +0 -0
  192. /package/dist/{892.js.LICENSE.txt → 8248.js.LICENSE.txt} +0 -0
  193. /package/dist/{8948.js.LICENSE.txt → 828.js.LICENSE.txt} +0 -0
  194. /package/dist/{895.js.LICENSE.txt → 8476.js.LICENSE.txt} +0 -0
  195. /package/dist/{8951.js.LICENSE.txt → 8524.js.LICENSE.txt} +0 -0
  196. /package/dist/{9317.js.LICENSE.txt → 9088.js.LICENSE.txt} +0 -0
  197. /package/dist/{9330.js.LICENSE.txt → 9096.js.LICENSE.txt} +0 -0
  198. /package/dist/{9533.js.LICENSE.txt → 9224.js.LICENSE.txt} +0 -0
  199. /package/dist/{9709.js.LICENSE.txt → 9404.js.LICENSE.txt} +0 -0
  200. /package/dist/{9727.js.LICENSE.txt → 9424.js.LICENSE.txt} +0 -0
  201. /package/dist/{9797.js.LICENSE.txt → 9496.js.LICENSE.txt} +0 -0
  202. /package/dist/{9865.js.LICENSE.txt → 9544.js.LICENSE.txt} +0 -0
  203. /package/dist/{9886.js.LICENSE.txt → 9680.js.LICENSE.txt} +0 -0
  204. /package/dist/{9912.js.LICENSE.txt → 9888.js.LICENSE.txt} +0 -0
package/dist/main.js.LICENSE.txt CHANGED
@@ -2,8 +2,6 @@
2
2
  * KoliBri - The accessible HTML-Standard
3
3
  */
4
4
 
5
- /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
6
-
7
5
  /**
8
6
  * @license React
9
7
  * react-dom.production.min.js
@@ -35,7 +33,7 @@
35
33
  */
36
34
 
37
35
  /**
38
- * @remix-run/router v1.14.2
36
+ * @remix-run/router v1.15.0
39
37
  *
40
38
  * Copyright (c) Remix Software Inc.
41
39
  *
@@ -46,7 +44,7 @@
46
44
  */
47
45
 
48
46
  /**
49
- * React Router v6.21.3
47
+ * React Router v6.22.0
50
48
  *
51
49
  * Copyright (c) Remix Software Inc.
52
50
  *
package/package.json CHANGED
@@ -1,22 +1,22 @@
1
1
  {
2
2
  "name": "@public-ui/sample-react",
3
- "version": "1.7.10",
3
+ "version": "1.7.12",
4
4
  "description": "This app contains samples for the KoliBri/Public UI",
5
5
  "license": "EUPL-1.2",
6
6
  "dependencies": {
7
7
  "@leanup/stack": "1.3.49",
8
8
  "@leanup/stack-react": "1.3.49",
9
9
  "@leanup/stack-webpack": "1.3.49",
10
- "@public-ui/components": "1.7.10",
11
- "@public-ui/react": "1.7.10",
12
- "@public-ui/themes": "1.7.10",
13
- "@types/node": "20.11.6",
14
- "@types/react": "18.2.48",
15
- "@types/react-dom": "18.2.18",
16
- "@unocss/preset-uno": "0.58.3",
17
- "@unocss/webpack": "0.58.3",
10
+ "@public-ui/components": "1.7.12",
11
+ "@public-ui/react": "1.7.12",
12
+ "@public-ui/themes": "1.7.12",
13
+ "@types/node": "20.11.17",
14
+ "@types/react": "18.2.55",
15
+ "@types/react-dom": "18.2.19",
16
+ "@unocss/preset-uno": "0.58.5",
17
+ "@unocss/webpack": "0.58.5",
18
18
  "ajv": "8.12.0",
19
- "chromedriver": "120.0.2",
19
+ "chromedriver": "121.0.0",
20
20
  "cpy-cli": "5.0.0",
21
21
  "eslint-plugin-jsx-a11y": "6.8.0",
22
22
  "eslint-plugin-react": "7.33.2",
@@ -25,12 +25,12 @@
25
25
  "npm-run-all": "4.1.5",
26
26
  "react": "18.2.0",
27
27
  "react-dom": "18.2.0",
28
- "react-router": "6.21.3",
29
- "react-router-dom": "6.21.3",
28
+ "react-router": "6.22.0",
29
+ "react-router-dom": "6.22.0",
30
30
  "rimraf": "3.0.2",
31
31
  "ts-prune": "0.10.3",
32
32
  "typescript": "5.3.3",
33
- "world_countries_lists": "2.8.2",
33
+ "world_countries_lists": "2.9.0",
34
34
  "yup": "1.3.3"
35
35
  },
36
36
  "files": [
@@ -48,9 +48,8 @@
48
48
  "webpack.config.js"
49
49
  ],
50
50
  "scripts": {
51
- "clean": "git clean -f -d -X",
52
- "clean:locks": "rimraf package-lock.json pnpm-lock.yaml && npm run clean",
53
51
  "build": "rimraf dist && cross-env NODE_ENV=production webpack",
52
+ "build:deps": "pnpm --filter @public-ui/sample-react^... build",
54
53
  "format": "prettier --check src",
55
54
  "lint": "eslint \"{src,tests}/**/*.{html,js,json,jsx,ts,tsx,gql,graphql}\"",
56
55
  "serve": "cross-env NODE_ENV=development webpack serve --devtool=source-map",
package/public/index.html CHANGED
@@ -18,7 +18,7 @@
18
18
  <link rel="stylesheet" href="assets/tabler-icons/tabler-icons.css" />
19
19
  <link rel="stylesheet" href="main.css" />
20
20
  <meta name="robots" content="noindex" />
21
- <meta name="kolibri" content="dev-mode=false" />
21
+ <meta name="kolibri" content="dev-mode=false;experimental-mode=true;" />
22
22
  </head>
23
23
  <body>
24
24
  <div id="app"></div>
package/src/App.tsx CHANGED
@@ -3,13 +3,16 @@ import { Navigate, Route, Routes, useSearchParams } from 'react-router-dom';
3
3
  import { Route as MyRoute, Routes as MyRoutes } from './shares/types';
4
4
 
5
5
  import { Option } from '@public-ui/components';
6
+ import PackageJson from '@public-ui/components/package.json';
6
7
  import { KolAlert, KolBadge } from '@public-ui/react';
8
+ import { HideMenusContext } from './shares/HideMenusContext';
9
+ import { useLocation } from 'react-router';
10
+ import { Sidebar } from './components/Sidebar';
7
11
  import { ROUTES } from './shares/routes';
8
- import { isDraftTheme, Theme, THEME_OPTIONS } from './shares/theme';
9
- import PackageJson from '@public-ui/components/package.json';
10
12
  import { getTheme, getThemeName, setStorage, setTheme } from './shares/store';
11
- import { Sidebar } from './components/Sidebar';
12
- import { useLocation } from 'react-router';
13
+ import { THEME_OPTIONS, Theme, isDraftTheme } from './shares/theme';
14
+
15
+ import { BackPage } from './components/BackPage';
13
16
 
14
17
  setStorage(localStorage);
15
18
 
@@ -116,25 +119,28 @@ export const App: FC = () => {
116
119
  };
117
120
 
118
121
  return (
119
- <div className={!hideMenus ? 'app-container' : ''} data-theme={theme}>
120
- {!hideMenus && (
121
- <Sidebar
122
- version={PackageJson.version}
123
- theme={theme}
124
- sample={routerLocation.pathname}
125
- routes={ROUTES}
126
- routeList={ROUTE_LIST}
127
- onThemeChange={handleThemeChange}
128
- />
129
- )}
122
+ <HideMenusContext.Provider value={hideMenus}>
123
+ <div className={!hideMenus ? 'app-container' : ''} data-theme={theme}>
124
+ {!hideMenus && (
125
+ <Sidebar
126
+ version={PackageJson.version}
127
+ theme={theme}
128
+ sample={routerLocation.pathname}
129
+ routes={ROUTES}
130
+ routeList={ROUTE_LIST}
131
+ onThemeChange={handleThemeChange}
132
+ />
133
+ )}
130
134
 
131
- <div className="p-4" id="route-container">
132
- {!hideMenus && isDraftTheme(theme) && <KolBadge className="mb-3" _label="DRAFT" _color="#db5461" />}
133
- <Routes>
134
- {ROUTE_TREE}
135
- <Route path="*" element={<KolAlert _type="info">This code example has not been migrated yet - it&#39;s coming soon!</KolAlert>} />
136
- </Routes>
135
+ <div className="p-4" id="route-container">
136
+ {!hideMenus && isDraftTheme(theme) && <KolBadge className="mb-3" _label="DRAFT" _color="#db5461" />}
137
+ <Routes>
138
+ {ROUTE_TREE}
139
+ <Route path="*" element={<KolAlert _type="info">This code example has not been migrated yet - it&#39;s coming soon!</KolAlert>} />
140
+ <Route path="back-page" element={<BackPage />} />
141
+ </Routes>
142
+ </div>
137
143
  </div>
138
- </div>
144
+ </HideMenusContext.Provider>
139
145
  );
140
146
  };
package/src/components/BackPage.tsx ADDED
@@ -0,0 +1,17 @@
1
+ import { KolAlert, KolButton } from '@public-ui/react';
2
+ import React from 'react';
3
+
4
+ import type { FC } from 'react';
5
+
6
+ export const BackPage: FC = () => {
7
+ const goBack = {
8
+ onClick: () => history.back(),
9
+ };
10
+
11
+ return (
12
+ <KolAlert _label="This is an example page" _level={0} _type="info">
13
+ <p>You followed an example link.</p>
14
+ {history.length > 1 && <KolButton _label="Go Back" _on={goBack} />}
15
+ </KolAlert>
16
+ );
17
+ };
package/src/components/SampleDescription.tsx ADDED
@@ -0,0 +1,23 @@
1
+ import type { FC, PropsWithChildren } from 'react';
2
+ import React, { useContext } from 'react';
3
+
4
+ import { KolIndentedText, KolLink } from '@public-ui/react';
5
+
6
+ import { HideMenusContext } from '../shares/HideMenusContext';
7
+
8
+ export const SampleDescription: FC<PropsWithChildren> = (props) => {
9
+ const hideMenus = useContext(HideMenusContext);
10
+
11
+ return hideMenus ? null : (
12
+ <div className="flex mb-sm">
13
+ <KolIndentedText>{props.children}</KolIndentedText>
14
+ <KolLink
15
+ _hideLabel
16
+ _href={`${location.href}?hideMenus`}
17
+ _label="Beispiel in neuem Tab öffnen"
18
+ _target="_blank"
19
+ className="mla flex-self-center"
20
+ ></KolLink>
21
+ </div>
22
+ );
23
+ };
package/src/components/alert/html.tsx CHANGED
@@ -10,14 +10,14 @@ export const AlertHtml: FC = () => (
10
10
  <h2 className="mt-2 mb-3">Hier wird eine H2-Überschrift ausgegeben</h2>
11
11
  <div style={{ display: 'grid', gridAutoFlow: 'column', gap: '1rem' }}>
12
12
  <div>
13
- <h4>Text in einer linken Spalte</h4>
13
+ <h3>Text in einer linken Spalte</h3>
14
14
  <p>
15
15
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem sed fugiat dolorum ratione et, ullam officia nobis nihil debitis, consectetur dicta
16
16
  accusantium. Vitae debitis, quibusdam vel recusandae deleniti placeat dolorem?
17
17
  </p>
18
18
  </div>
19
19
  <div>
20
- <h4>Text in einer rechten Spalte</h4>
20
+ <h3>Text in einer rechten Spalte</h3>
21
21
  <p>
22
22
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod beatae officiis, velit nam dicta quae repellat perspiciatis explicabo illo. Possimus,
23
23
  molestiae deleniti! Exercitationem blanditiis ducimus similique tempora ratione consequuntur eaque!
package/src/components/breadcrumb/basic.tsx CHANGED
@@ -8,11 +8,11 @@ export const BreadcrumbBasic: FC = () => (
8
8
  <KolBreadcrumb
9
9
  _ariaLabel="Breadcrumb aus Text-Links"
10
10
  _links={[
11
- { _label: 'Startseite', _href: '#/' },
12
- { _label: 'Unterseite der Startseite', _href: '#/unterseite' },
11
+ { _label: 'Startseite', _href: '#/back-page' },
12
+ { _label: 'Unterseite der Startseite', _href: '#/back-page' },
13
13
  {
14
14
  _label: 'Unterseite der Unterseite',
15
- _href: '#/unterseite/unterseite',
15
+ _href: '#/back-page',
16
16
  },
17
17
  ]}
18
18
  ></KolBreadcrumb>
@@ -23,29 +23,29 @@ export const BreadcrumbBasic: FC = () => (
23
23
  _label: 'Startseite',
24
24
  _icons: 'codicon codicon-home',
25
25
  _hideLabel: true,
26
- _href: '#/',
26
+ _href: '#/back-page',
27
27
  },
28
28
  {
29
29
  _label: 'Unterseite der Startseite mit sehr langem Link-Test',
30
- _href: '#/unterseite',
30
+ _href: '#/back-page',
31
31
  },
32
32
  {
33
33
  _label: 'Unterseite der Unterseite',
34
- _href: '#/unterseite/unterseite',
34
+ _href: '#/back-page',
35
35
  },
36
36
  ]}
37
37
  ></KolBreadcrumb>
38
38
  <KolBreadcrumb
39
39
  _ariaLabel="Breadcrumb aus Icons- und Text-Links"
40
40
  _links={[
41
- { _label: 'Startseite', _icons: 'codicon codicon-home', _href: '#/' },
41
+ { _label: 'Startseite', _icons: 'codicon codicon-home', _href: '#/back-page' },
42
42
  {
43
43
  _label: 'Unterseite der Startseite und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen',
44
- _href: '#/unterseite',
44
+ _href: '#/back-page',
45
45
  },
46
46
  {
47
47
  _label: 'Unterseite der Unterseite',
48
- _href: '#/unterseite/unterseite',
48
+ _href: '#/back-page',
49
49
  },
50
50
  ]}
51
51
  ></KolBreadcrumb>
package/src/components/handout/basic.tsx CHANGED
@@ -824,29 +824,47 @@ export const HandoutBasic: FC = () => (
824
824
  </div>
825
825
  <div className="grid gap-2 py-2">
826
826
  <div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
827
- <KolLinkButton _href="#" _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
828
- <KolLinkButton _href="#" _disabled _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
829
- <KolLinkButton _href="#" _hideLabel _icons="codicon codicon-arrow-left" _label="primary" _variant="primary"></KolLinkButton>
827
+ <KolLinkButton _href="#/back-page" _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
828
+ <KolLinkButton
829
+ _href="#/back-page"
830
+ _disabled
831
+ _icons={{ left: 'codicon codicon-arrow-left' }}
832
+ _label="primary"
833
+ _variant="primary"
834
+ ></KolLinkButton>
835
+ <KolLinkButton _href="#/back-page" _hideLabel _icons="codicon codicon-arrow-left" _label="primary" _variant="primary"></KolLinkButton>
830
836
  </div>
831
837
  <div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
832
- <KolLinkButton _href="#" _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
833
- <KolLinkButton _href="#" _disabled _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
834
- <KolLinkButton _href="#" _hideLabel _icons="codicon codicon-arrow-right" _label="secondary" _variant="secondary"></KolLinkButton>
838
+ <KolLinkButton _href="#/back-page" _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
839
+ <KolLinkButton
840
+ _href="#/back-page"
841
+ _disabled
842
+ _icons={{ right: 'codicon codicon-arrow-right' }}
843
+ _label="secondary"
844
+ _variant="secondary"
845
+ ></KolLinkButton>
846
+ <KolLinkButton _href="#/back-page" _hideLabel _icons="codicon codicon-arrow-right" _label="secondary" _variant="secondary"></KolLinkButton>
835
847
  </div>
836
848
  <div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
837
- <KolLinkButton _href="#" _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
838
- <KolLinkButton _href="#" _disabled _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
839
- <KolLinkButton _href="#" _hideLabel _icons="codicon codicon-arrow-up" _label="danger" _variant="danger"></KolLinkButton>
849
+ <KolLinkButton _href="#/back-page" _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
850
+ <KolLinkButton _href="#/back-page" _disabled _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
851
+ <KolLinkButton _href="#/back-page" _hideLabel _icons="codicon codicon-arrow-up" _label="danger" _variant="danger"></KolLinkButton>
840
852
  </div>
841
853
  <div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
842
- <KolLinkButton _href="#" _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
843
- <KolLinkButton _href="#" _disabled _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
844
- <KolLinkButton _href="#" _hideLabel _icons="codicon codicon-arrow-down" _label="normal" _variant="normal"></KolLinkButton>
854
+ <KolLinkButton _href="#/back-page" _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
855
+ <KolLinkButton
856
+ _href="#/back-page"
857
+ _disabled
858
+ _icons={{ bottom: 'codicon codicon-arrow-down' }}
859
+ _label="normal"
860
+ _variant="normal"
861
+ ></KolLinkButton>
862
+ <KolLinkButton _href="#/back-page" _hideLabel _icons="codicon codicon-arrow-down" _label="normal" _variant="normal"></KolLinkButton>
845
863
  </div>
846
864
  <div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
847
- <KolLinkButton _href="#" _label="ghost" _variant="ghost"></KolLinkButton>
848
- <KolLinkButton _href="#" _disabled _label="ghost" _variant="ghost"></KolLinkButton>
849
- <KolLinkButton _href="#" _icons="codicon codicon-home" _hideLabel _label="ghost" _variant="ghost"></KolLinkButton>
865
+ <KolLinkButton _href="#/back-page" _label="ghost" _variant="ghost"></KolLinkButton>
866
+ <KolLinkButton _href="#/back-page" _disabled _label="ghost" _variant="ghost"></KolLinkButton>
867
+ <KolLinkButton _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="ghost" _variant="ghost"></KolLinkButton>
850
868
  </div>
851
869
  </div>
852
870
  </KolTabs>
@@ -856,14 +874,14 @@ export const HandoutBasic: FC = () => (
856
874
  <div slot="content" className="grid gap-2 p-2">
857
875
  <KolAccordion _heading="Links" _level={3} _open>
858
876
  <div className="grid gap-2" slot="content">
859
- <KolLink _href="#" _label="Linktext"></KolLink>
860
- <KolLink _href="#" _icons="codicon codicon-home" _label="Linktext mit Icon"></KolLink>
861
- <KolLink _href="#" _icons="codicon codicon-home" _hideLabel _label="Linktext nur mit Icon"></KolLink>
877
+ <KolLink _href="#/back-page" _label="Linktext"></KolLink>
878
+ <KolLink _href="#/back-page" _icons="codicon codicon-home" _label="Linktext mit Icon"></KolLink>
879
+ <KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Linktext nur mit Icon"></KolLink>
862
880
  <KolLink _href="/" _label="Besuchter Link"></KolLink>
863
881
  <p>
864
- Ich bin ein <KolLink _href="#" _label="externer Link" _target="w3c"></KolLink> im Fließtext.
882
+ Ich bin ein <KolLink _href="#/back-page" _label="externer Link" _target="w3c"></KolLink> im Fließtext.
865
883
  </p>
866
- <KolLink _ariaLabel="Zurück zur Startseite" _href="#" _label="">
884
+ <KolLink _ariaLabel="Zurück zur Startseite" _href="#/back-page" _label="">
867
885
  <KolLogo slot="expert" class="inline-flex w-50" _org={Bundesanstalt['Informationstechnikzentrum Bund']} />
868
886
  </KolLink>
869
887
  </div>
@@ -918,47 +936,47 @@ export const HandoutBasic: FC = () => (
918
936
  {
919
937
  _label: 'Homepage',
920
938
  _icons: 'codicon codicon-home',
921
- _href: '#/',
939
+ _href: '#/back-page',
922
940
  },
923
941
  {
924
942
  _label: '2 Navigation point',
925
943
  _icons: 'codicon codicon-home',
926
- _href: '#/untermenu',
944
+ _href: '#/back-page',
927
945
  },
928
946
  {
929
947
  _active: true,
930
948
  _label: '3 Navigation point',
931
- _href: '#abc',
949
+ _href: '#/back-page',
932
950
  _icons: 'codicon codicon-home',
933
951
  _children: [
934
952
  {
935
953
  _label: '3.1 Navigation point',
936
954
  _icons: 'codicon codicon-home',
937
- _href: '#/',
955
+ _href: '#/back-page',
938
956
  },
939
957
  {
940
958
  _label: '3.2 External navigation point',
941
959
  _icons: 'codicon codicon-home',
942
- _href: '#abc',
960
+ _href: '#/back-page',
943
961
  _target: '_blank',
944
962
  },
945
963
  {
946
964
  _label: '3.3 Navigation point',
947
- _href: '#abc',
965
+ _href: '#/back-page',
948
966
  _icons: 'codicon codicon-home',
949
967
  _children: [
950
968
  {
951
969
  _active: true,
952
970
  _label: '3.3.1 Navigation point (active)',
953
971
  _icons: 'codicon codicon-home',
954
- _href: '#abc',
972
+ _href: '#/back-page',
955
973
  },
956
- { _label: '3.3.2 Navigation point', _icons: 'codicon codicon-home', _href: '#abc' },
974
+ { _label: '3.3.2 Navigation point', _icons: 'codicon codicon-home', _href: '#/back-page' },
957
975
  ],
958
976
  },
959
977
  ],
960
978
  },
961
- { _label: '3 Navigation point', _icons: 'codicon codicon-home', _href: '#abc' },
979
+ { _label: '3 Navigation point', _icons: 'codicon codicon-home', _href: '#/back-page' },
962
980
  ]}
963
981
  _hasCompactButton
964
982
  />
@@ -969,11 +987,11 @@ export const HandoutBasic: FC = () => (
969
987
  <KolBreadcrumb
970
988
  _ariaLabel="Breadcrumb aus Text-Links"
971
989
  _links={[
972
- { _label: 'Startseite', _href: '#/' },
973
- { _label: 'Unterseite der Startseite', _href: '#/unterseite' },
990
+ { _label: 'Startseite', _href: '#/back-page' },
991
+ { _label: 'Unterseite der Startseite', _href: '#/back-page' },
974
992
  {
975
993
  _label: 'Unterseite der Unterseite',
976
- _href: '#/unterseite/unterseite',
994
+ _href: '#/back-page',
977
995
  },
978
996
  ]}
979
997
  ></KolBreadcrumb>
package/src/components/input-text/hide-errors.tsx ADDED
@@ -0,0 +1,25 @@
1
+ import { KolAlert, KolCard, KolInputText } from '@public-ui/react';
2
+ import type { FC } from 'react';
3
+ import React from 'react';
4
+ import { SampleDescription } from '../SampleDescription';
5
+
6
+ export const InputTextHideErrors: FC = () => (
7
+ <div className="grid gap-4">
8
+ <SampleDescription>
9
+ This case shows the <code>_hideError</code> feature in the se. You can use the <code>_error</code> prop to show an error message.
10
+ </SampleDescription>
11
+ <KolCard _label="Normal input field with error" _level={0}>
12
+ <KolInputText _error="Error message" _label="Input with error" _touched />
13
+ </KolCard>
14
+ <KolCard _label="Input field with hidden error" _level={0}>
15
+ <fieldset className="grid md:grid-cols-2 gap-4">
16
+ <legend>Combined input field</legend>
17
+ <KolAlert className="col-span-2" _level={0} _type="error">
18
+ This is a combined error message
19
+ </KolAlert>
20
+ <KolInputText _error="This is a combined error message" _hideError _label="First input" _touched />
21
+ <KolInputText _error="This is a combined error message" _hideError _label="Second input with error" _touched />
22
+ </fieldset>
23
+ </KolCard>
24
+ </div>
25
+ );
package/src/components/input-text/routes.ts CHANGED
@@ -2,6 +2,7 @@ import { Routes } from '../../shares/types';
2
2
 
3
3
  import { InputTextBasic } from './basic';
4
4
  import { InputTextBlur } from './blur';
5
+ import { InputTextHideErrors } from './hide-errors';
5
6
  import { InputTextFocus } from './focus';
6
7
 
7
8
  export const INPUT_TEXT_ROUTES: Routes = {
@@ -9,5 +10,6 @@ export const INPUT_TEXT_ROUTES: Routes = {
9
10
  basic: InputTextBasic,
10
11
  blur: InputTextBlur,
11
12
  focus: InputTextFocus,
13
+ 'hide-errors': InputTextHideErrors,
12
14
  },
13
15
  };
package/src/components/link/basic.tsx CHANGED
@@ -5,19 +5,20 @@ import { FC } from 'react';
5
5
 
6
6
  export const LinkBasic: FC = () => (
7
7
  <div className="grid gap-4">
8
- <KolLink _href="#" _label="Simple Link" />
8
+ <KolLink _href="#/back-page" _label="Simple Link" />
9
9
  <p>
10
- In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. <KolLink _href="#" _label="Simple Link" /> Er wird standardmäßig als{' '}
11
- <strong>inline-Element</strong> ausgegeben.
10
+ In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. <KolLink _href="#/back-page" _label="Simple Link" /> Er wird standardmäßig
11
+ als <strong>inline-Element</strong> ausgegeben.
12
12
  </p>
13
13
  <p>
14
14
  In diesem Absatz wird ein Link gesetzt, der einmal als inline-block-Element ausgegeben wird.{' '}
15
- <KolLink class="d-inline-block" _href="#" _label="Simple Link" />. Damit kann man mir per CSS-Styles eine Breite, eine Höhe und andere Eigenschaften
16
- zuweisen.
15
+ <KolLink class="d-inline-block" _href="#/back-page" _label="Simple Link" />. Damit kann man mir per CSS-Styles eine Breite, eine Höhe und andere
16
+ Eigenschaften zuweisen.
17
17
  <br />
18
18
  <br />
19
19
  Danach folgt ein Link, der als block-Element ausgegeben wird.
20
- <KolLink class="d-block" _href="#" _label="Simple Link" />, daher gehe ich über die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
20
+ <KolLink class="d-block" _href="#/back-page" _label="Simple Link" />, daher gehe ich über die ganze Breite des Eltern-Elements erzeuge so einen
21
+ Zeilenumbruch.
21
22
  </p>
22
23
  </div>
23
24
  );
package/src/components/link/icons.tsx CHANGED
@@ -5,24 +5,27 @@ import { FC } from 'react';
5
5
 
6
6
  export const LinkIcons: FC = () => (
7
7
  <div className="grid gap-4">
8
- <KolLink _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" />
8
+ <KolLink _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" _href="#/back-page" />
9
9
  <KolLink
10
10
  _icons={{
11
11
  right: 'codicon codicon-home',
12
12
  }}
13
13
  _label="Ich bin ein Link mit Icon rechts"
14
+ _href="#/back-page"
14
15
  />
15
16
  <KolLink
16
17
  _icons={{
17
18
  top: 'codicon codicon-home',
18
19
  }}
19
20
  _label="Ich bin ein Link mit Icon oben"
21
+ _href="#/back-page"
20
22
  />
21
23
  <KolLink
22
24
  _icons={{
23
25
  bottom: 'codicon codicon-home',
24
26
  }}
25
27
  _label="Ich bin ein Link mit Icon unten"
28
+ _href="#/back-page"
26
29
  />
27
30
  <KolLink
28
31
  _icons={{
@@ -32,6 +35,7 @@ export const LinkIcons: FC = () => (
32
35
  left: 'codicon codicon-home',
33
36
  }}
34
37
  _label="Ich bin ein Link mit allen Icons"
38
+ _href="#/back-page"
35
39
  />
36
40
  </div>
37
41
  );
package/src/components/link/image.tsx CHANGED
@@ -5,14 +5,14 @@ import { FC } from 'react';
5
5
 
6
6
  export const LinkImage: FC = () => (
7
7
  <div className="grid gap-4">
8
- <KolLink _href="#" _label="Ich bin ein Link, der als Text gerendert wird" />
8
+ <KolLink _href="#/back-page" _label="Ich bin ein Link, der als Text gerendert wird" />
9
9
  <br />
10
- <KolLink _href="#" _label="">
10
+ <KolLink _href="#/back-page" _label="">
11
11
  <img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
12
12
  <KolKolibri style={{ width: '300px' }}></KolKolibri>
13
13
  </KolLink>
14
14
  <br />
15
- <KolLink _href="#" _label="">
15
+ <KolLink _href="#/back-page" _label="">
16
16
  <img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
17
17
  </KolLink>
18
18
  </div>
package/src/components/link/target.tsx CHANGED
@@ -5,10 +5,11 @@ import { FC } from 'react';
5
5
 
6
6
  export const LinkTarget: FC = () => (
7
7
  <div className="d-flex gap-4">
8
- <KolLink _href="#" _label="Ich bin ein Link ohne Target" /> <KolLink _href="#" _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
9
- <KolLink _href="#" _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />{' '}
10
- <KolLink _href="#" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link ohne Target" />{' '}
11
- <KolLink _href="#" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
12
- <KolLink _href="#" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
8
+ <KolLink _href="#/back-page" _label="Ich bin ein Link ohne Target" />{' '}
9
+ <KolLink _href="#/back-page" _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
10
+ <KolLink _href="#/back-page" _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />{' '}
11
+ <KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link ohne Target" />{' '}
12
+ <KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
13
+ <KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
13
14
  </div>
14
15
  );
package/src/components/link-button/basic.tsx CHANGED
@@ -4,9 +4,7 @@ import { KolLinkButton } from '@public-ui/react';
4
4
  import { FC } from 'react';
5
5
 
6
6
  const ARGS = {
7
- _on: {
8
- onClick: (_event, _value) => alert('Klick!'),
9
- },
7
+ _href: '#/back-page',
10
8
  };
11
9
 
12
10
  export const LinkButtonBasic: FC = () => (
package/src/components/link-group/basic.tsx CHANGED
@@ -2,8 +2,8 @@ import React, { FC } from 'react';
2
2
  import { KolLinkGroup } from '@public-ui/react';
3
3
 
4
4
  const links = [
5
- { _label: 'Link 1', _href: 'https://www.w3.org' },
6
- { _label: 'Link 2', _href: 'https://www.w3.org' },
7
- { _label: 'Link 3', _href: 'https://www.w3.org' },
5
+ { _label: 'Link 1', _href: '#/back-page' },
6
+ { _label: 'Link 2', _href: '#/back-page' },
7
+ { _label: 'Link 3', _href: '#/back-page' },
8
8
  ];
9
9
  export const LinkGroupBasic: FC = () => <KolLinkGroup _links={links} />;
package/src/components/link-group/horizontal.tsx CHANGED
@@ -2,8 +2,8 @@ import React, { FC } from 'react';
2
2
  import { KolLinkGroup } from '@public-ui/react';
3
3
 
4
4
  const links = [
5
- { _label: 'Link 1', _href: 'https://www.w3.org' },
6
- { _label: 'Link 2', _href: 'https://www.w3.org' },
7
- { _label: 'Link 3', _href: 'https://www.w3.org' },
5
+ { _label: 'Link 1', _href: '#/back-page' },
6
+ { _label: 'Link 2', _href: '#/back-page' },
7
+ { _label: 'Link 3', _href: '#/back-page' },
8
8
  ];
9
9
  export const LinkGroupHorizontal: FC = () => <KolLinkGroup _links={links} _orientation="horizontal" />;