@public-ui/sample-react 2.1.4 → 2.1.5-rc.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.
Files changed (201) hide show
  1. package/dist/1069.js +1 -1
  2. package/dist/1085.js +1 -1
  3. package/dist/1184.js +1 -1
  4. package/dist/1222.js +1 -1
  5. package/dist/1278.js +1 -1
  6. package/dist/1325.js +1 -1
  7. package/dist/1333.js +1 -1
  8. package/dist/1661.js +1 -1
  9. package/dist/1703.js +1 -1
  10. package/dist/1711.js +1 -1
  11. package/dist/1792.js +1 -1
  12. package/dist/1793.js +1 -1
  13. package/dist/1878.js +1 -1
  14. package/dist/1957.js +1 -1
  15. package/dist/2305.js +1 -1
  16. package/dist/2471.js +1 -1
  17. package/dist/2538.js +1 -1
  18. package/dist/279.js +1 -1
  19. package/dist/2830.js +1 -1
  20. package/dist/3180.js +1 -1
  21. package/dist/3332.js +1 -1
  22. package/dist/3596.js +1 -1
  23. package/dist/3714.js +1 -1
  24. package/dist/3797.js +1 -1
  25. package/dist/3974.js +1 -1
  26. package/dist/3990.js +1 -1
  27. package/dist/4014.js +1 -1
  28. package/dist/4102.js +1 -1
  29. package/dist/4218.js +1 -1
  30. package/dist/4303.js +1 -1
  31. package/dist/4404.js +1 -1
  32. package/dist/453.js +1 -1
  33. package/dist/4941.js +1 -1
  34. package/dist/500.js +1 -1
  35. package/dist/5139.js +1 -1
  36. package/dist/5164.js +1 -1
  37. package/dist/5365.js +1 -1
  38. package/dist/5540.js +1 -1
  39. package/dist/5756.js +1 -1
  40. package/dist/6393.js +1 -1
  41. package/dist/6682.js +1 -1
  42. package/dist/6781.js +1 -1
  43. package/dist/{5168.js → 6787.js} +2 -2
  44. package/dist/7100.js +1 -1
  45. package/dist/7245.js +1 -1
  46. package/dist/7263.js +1 -1
  47. package/dist/7512.js +1 -1
  48. package/dist/7856.js +1 -1
  49. package/dist/{445.js → 788.js} +2 -2
  50. package/dist/8002.js +1 -1
  51. package/dist/8189.js +1 -1
  52. package/dist/8264.js +1 -1
  53. package/dist/8384.js +1 -1
  54. package/dist/8389.js +1 -1
  55. package/dist/8515.js +1 -1
  56. package/dist/8557.js +1 -1
  57. package/dist/8588.js +1 -1
  58. package/dist/8724.js +1 -1
  59. package/dist/8791.js +1 -1
  60. package/dist/882.js +1 -1
  61. package/dist/8823.js +1 -1
  62. package/dist/895.js +1 -1
  63. package/dist/8993.js +1 -1
  64. package/dist/902.js +1 -1
  65. package/dist/9175.js +1 -1
  66. package/dist/9202.js +1 -1
  67. package/dist/9833.js +1 -1
  68. package/dist/9961.js +1 -1
  69. package/dist/index.html +2 -2
  70. package/dist/main.css +1 -1
  71. package/dist/main.js +1 -1
  72. package/package.json +4 -4
  73. package/public/index.html +2 -2
  74. package/src/components/SampleDescription.tsx +10 -6
  75. package/src/components/Sidebar.tsx +4 -4
  76. package/src/components/abbr/basic.tsx +2 -1
  77. package/src/components/accordion/basic.tsx +10 -9
  78. package/src/components/accordion/headlines.tsx +9 -9
  79. package/src/components/accordion/routes.ts +0 -2
  80. package/src/components/alert/basic.tsx +15 -10
  81. package/src/components/alert/card-msg.tsx +13 -6
  82. package/src/components/alert/html.tsx +2 -1
  83. package/src/components/avatar/basic.tsx +2 -1
  84. package/src/components/badge/basic.tsx +7 -6
  85. package/src/components/badge/button.tsx +13 -18
  86. package/src/components/breadcrumb/basic.tsx +2 -1
  87. package/src/components/button/access-key.tsx +7 -2
  88. package/src/components/button/baselined.tsx +2 -1
  89. package/src/components/button/basic.tsx +3 -1
  90. package/src/components/button/icons.tsx +2 -1
  91. package/src/components/button/partials/variants.tsx +0 -1
  92. package/src/components/button/routes.ts +0 -2
  93. package/src/components/button/width.tsx +2 -1
  94. package/src/components/button-group/basic.tsx +7 -2
  95. package/src/components/button-link/basic.tsx +28 -19
  96. package/src/components/button-link/icons.tsx +2 -1
  97. package/src/components/button-link/image.tsx +2 -1
  98. package/src/components/card/basic.tsx +11 -4
  99. package/src/components/card/routes.ts +0 -6
  100. package/src/components/combobox/basic.tsx +5 -4
  101. package/src/components/details/basic.tsx +6 -5
  102. package/src/components/drawer/basic.tsx +4 -4
  103. package/src/components/drawer/controlled.tsx +4 -4
  104. package/src/components/form/basic.tsx +5 -4
  105. package/src/components/form/error-list.tsx +6 -5
  106. package/src/components/heading/badged.tsx +4 -1
  107. package/src/components/heading/basic.tsx +8 -7
  108. package/src/components/heading/paragraph.tsx +2 -4
  109. package/src/components/heading/routes.ts +1 -1
  110. package/src/components/icon/basic.tsx +2 -1
  111. package/src/components/image/basic.tsx +2 -1
  112. package/src/components/indented-text/basic.tsx +4 -1
  113. package/src/components/input-checkbox/basic.tsx +2 -5
  114. package/src/components/input-checkbox/button.tsx +2 -6
  115. package/src/components/input-checkbox/switch.tsx +2 -7
  116. package/src/components/input-color/basic.tsx +2 -4
  117. package/src/components/input-date/basic.tsx +2 -6
  118. package/src/components/input-email/basic.tsx +2 -1
  119. package/src/components/input-file/basic.tsx +2 -4
  120. package/src/components/input-number/basic.tsx +3 -4
  121. package/src/components/input-password/basic.tsx +2 -1
  122. package/src/components/input-password/show-password.tsx +3 -2
  123. package/src/components/input-radio/basic.tsx +2 -1
  124. package/src/components/input-radio/horizontal.tsx +2 -2
  125. package/src/components/input-radio/objectValue.tsx +11 -11
  126. package/src/components/input-radio/routes.ts +0 -2
  127. package/src/components/input-range/basic.tsx +5 -1
  128. package/src/components/input-text/basic.tsx +2 -1
  129. package/src/components/input-text/hide-errors.tsx +6 -2
  130. package/src/components/input-text/routes.ts +0 -2
  131. package/src/components/kolibri/basic.tsx +3 -3
  132. package/src/components/link/basic.tsx +4 -1
  133. package/src/components/link/icons.tsx +2 -1
  134. package/src/components/link/image.tsx +4 -9
  135. package/src/components/link/target.tsx +24 -7
  136. package/src/components/link-button/basic.tsx +2 -1
  137. package/src/components/link-group/basic.tsx +6 -2
  138. package/src/components/link-group/horizontal.tsx +6 -2
  139. package/src/components/modal/basic.tsx +6 -5
  140. package/src/components/nav/aria-current.tsx +4 -4
  141. package/src/components/nav/basic.tsx +3 -2
  142. package/src/components/nav/horizontal.tsx +2 -4
  143. package/src/components/pagination/basic.tsx +8 -6
  144. package/src/components/progress/basic.tsx +2 -1
  145. package/src/components/quote/basic.tsx +2 -1
  146. package/src/components/quote/block.tsx +2 -4
  147. package/src/components/select/basic.tsx +2 -4
  148. package/src/components/skip-nav/basic.tsx +6 -8
  149. package/src/components/spin/basic.tsx +2 -1
  150. package/src/components/spin/custom.tsx +3 -2
  151. package/src/components/spin/cycle.tsx +2 -1
  152. package/src/components/split-button/basic.tsx +3 -2
  153. package/src/components/table/column-alignment.tsx +3 -1
  154. package/src/components/table/complex-headers.tsx +3 -1
  155. package/src/components/table/horizontal-scrollbar.tsx +4 -2
  156. package/src/components/table/pagination-position.tsx +4 -1
  157. package/src/components/table/render-cell.tsx +2 -1
  158. package/src/components/table/routes.ts +0 -2
  159. package/src/components/table/sort-data.tsx +1 -4
  160. package/src/components/table/stateful-with-selection.tsx +3 -1
  161. package/src/components/table/stateless-with-selection.tsx +3 -1
  162. package/src/components/table/stateless.tsx +3 -1
  163. package/src/components/table/with-footer.tsx +3 -1
  164. package/src/components/table/with-pagination.tsx +1 -4
  165. package/src/components/tabs/basic.tsx +14 -15
  166. package/src/components/tabs/icons-only.tsx +1 -1
  167. package/src/components/textarea/adjust-height.tsx +7 -10
  168. package/src/components/textarea/basic.tsx +2 -1
  169. package/src/components/textarea/counter.tsx +5 -8
  170. package/src/components/textarea/partials/cases.tsx +1 -0
  171. package/src/components/textarea/resize.tsx +8 -6
  172. package/src/components/textarea/routes.ts +0 -6
  173. package/src/components/textarea/rows.tsx +4 -1
  174. package/src/components/toast/basic.tsx +2 -1
  175. package/src/components/toolbar/basic.tsx +10 -2
  176. package/src/components/toolbar/disabled.tsx +7 -2
  177. package/src/components/tree/basic.tsx +4 -0
  178. package/src/components/version/basic.tsx +2 -1
  179. package/src/components/version/context.tsx +2 -1
  180. package/src/react.main.tsx +1 -1
  181. package/src/scenarios/appointment-form/AppointmentForm.tsx +54 -43
  182. package/src/scenarios/custom-tooltip-width.tsx +11 -1
  183. package/src/scenarios/disabled-interactive-elements.tsx +1 -0
  184. package/src/scenarios/focus-elements.tsx +10 -2
  185. package/src/scenarios/inputs-get-value.tsx +1 -1
  186. package/src/scenarios/static-form.tsx +1 -1
  187. package/dist/3454.js +0 -2
  188. package/dist/5168.js.LICENSE.txt +0 -3
  189. package/src/components/accordion/list.tsx +0 -45
  190. package/src/components/button/hide-label.tsx +0 -41
  191. package/src/components/card/confirm.tsx +0 -28
  192. package/src/components/card/flex.tsx +0 -44
  193. package/src/components/card/selection.tsx +0 -83
  194. package/src/components/input-radio/select.tsx +0 -25
  195. package/src/components/input-text/blur.tsx +0 -21
  196. package/src/components/table/badge-size.tsx +0 -66
  197. package/src/components/textarea/disabled.tsx +0 -22
  198. package/src/components/textarea/placeholder.tsx +0 -17
  199. package/src/components/textarea/readonly.tsx +0 -22
  200. /package/dist/{3454.js.LICENSE.txt → 6787.js.LICENSE.txt} +0 -0
  201. /package/dist/{445.js.LICENSE.txt → 788.js.LICENSE.txt} +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/sample-react",
3
- "version": "2.1.4",
3
+ "version": "2.1.5-rc.2",
4
4
  "description": "This app contains samples for the KoliBri/Public UI",
5
5
  "license": "EUPL-1.2",
6
6
  "dependencies": {
@@ -29,9 +29,9 @@
29
29
  "typescript": "5.5.2",
30
30
  "world_countries_lists": "2.9.0",
31
31
  "yup": "1.4.0",
32
- "@public-ui/components": "2.1.4",
33
- "@public-ui/react": "2.1.4",
34
- "@public-ui/themes": "2.1.4"
32
+ "@public-ui/components": "2.1.5-rc.2",
33
+ "@public-ui/themes": "2.1.5-rc.2",
34
+ "@public-ui/react": "2.1.5-rc.2"
35
35
  },
36
36
  "files": [
37
37
  ".eslintignore",
package/public/index.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <title>Code-Samples | KoliBri – Public UI</title>
5
5
  <meta charset="UTF-8" />
6
- <meta name="description" content="Webanwendung mit der KoliBri-Komponentenbibliothek." />
6
+ <meta name="description" content="Webapp demonstrating KolBri-components with React." />
7
7
  <meta name="viewport" content="width=device-width, initial-scale=1" />
8
8
  <link rel="shortcut icon" type="image/x-icon" href="assets/kolibri.ico" />
9
9
  <link rel="stylesheet" href="assets/bundes/style.css" />
@@ -23,6 +23,6 @@
23
23
  <body>
24
24
  <div id="app"></div>
25
25
  <script async src="main.js"></script>
26
- <noscript>Diese Webseite erfordert, dass Sie JavaScript aktivieren.</noscript>
26
+ <noscript>This website requires JavaScript.</noscript>
27
27
  </body>
28
28
  </html>
package/src/components/SampleDescription.tsx CHANGED
@@ -9,17 +9,21 @@ import { HideMenusContext } from '../shares/HideMenusContext';
9
9
 
10
10
  export const SampleDescription: FC<PropsWithChildren> = (props) => {
11
11
  const hideMenus = useContext(HideMenusContext);
12
- const docRedirect = useMemo(() => {
12
+ const docLink = useMemo(() => {
13
13
  const arr = location.href.split('/');
14
- return `${PUBLIC_DOC_COMPONENT_URL}/${arr[arr.length - 2]}`;
15
- }, [PUBLIC_DOC_COMPONENT_URL, location.href]);
14
+ const componentName = arr[arr.length - 2];
15
+
16
+ return componentName === 'scenarios'
17
+ ? null // Scenarios are not a component and hence have no documentation.
18
+ : `${PUBLIC_DOC_COMPONENT_URL}/${componentName}`;
19
+ }, [location.href]);
16
20
 
17
21
  return hideMenus ? null : (
18
22
  <div className="flex justify-between mb-sm">
19
23
  <KolIndentedText>{props.children}</KolIndentedText>
20
- <div className="flex flex-wrap gap-2">
21
- <KolLink _href={docRedirect} _label="Dokumentation" _target="_blank" />
22
- <KolLink _href={`${location.href}?hideMenus`} _label="Beispiel" _target="_blank" />
24
+ <div className="flex flex-wrap gap-2 shrink-0 ml">
25
+ {docLink && <KolLink _href={docLink} _label="Documentation" _target="_blank" />}
26
+ <KolLink _href={`${location.href}?hideMenus`} _label="Standalone example" _target="_blank" />
23
27
  </div>
24
28
  </div>
25
29
  );
package/src/components/Sidebar.tsx CHANGED
@@ -68,15 +68,15 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
68
68
  </div>
69
69
  )}
70
70
 
71
- <KolSelect _label="Theme wählen" _options={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={[theme]} class="mt"></KolSelect>
71
+ <KolSelect _label="Theme" _options={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={[theme]} class="mt"></KolSelect>
72
72
 
73
- <KolHeading _label="Komponenten" _level={2} className="block mt"></KolHeading>
73
+ <KolHeading _label="Components" _level={2} className="block mt"></KolHeading>
74
74
  <div className="flex flex-justify-between flex-items-center mt">
75
- <KolButton _icons="codicon codicon-arrow-left" _hideLabel _label="Vorherige Komponente auswählen" _on={{ onClick: handlePreviousClick }} />
75
+ <KolButton _icons="codicon codicon-arrow-left" _hideLabel _label="Previous component" _on={{ onClick: handlePreviousClick }} />
76
76
  <span className="text-center">
77
77
  {formatSampleAsLabel()} ({getIndexOfSample() + 1}/{routeList.length})
78
78
  </span>
79
- <KolButton _icons="codicon codicon-arrow-right" _hideLabel _label="Nächste Komponente auswählen" _on={{ onClick: handleNextClick }} />
79
+ <KolButton _icons="codicon codicon-arrow-right" _hideLabel _label="Next component" _on={{ onClick: handleNextClick }} />
80
80
  </div>
81
81
 
82
82
  <ComponentNavContainer isMobile={isMobile}>
package/src/components/abbr/basic.tsx CHANGED
@@ -7,8 +7,9 @@ import type { FC } from 'react';
7
7
  export const AbbrBasic: FC = () => (
8
8
  <>
9
9
  <SampleDescription>
10
- <p>Beim Bewegen der Maus über den unterstrichenen Abkürzungen, soll die ausgeschriebene Abkürzung an verschiedenen Stellen erscheinen.</p>
10
+ <p>KolAbbr shows the full expansion of an abbreviated term on mouse over. The sample illustrates the different possible alignments for the tooltip.</p>
11
11
  </SampleDescription>
12
+
12
13
  <p>
13
14
  Ich bin <KolAbbr _label="zum Beispiel">z.B.</KolAbbr> eine Abkürzung.
14
15
  </p>
package/src/components/accordion/basic.tsx CHANGED
@@ -8,17 +8,18 @@ import type { FC } from 'react';
8
8
  export const AccordionBasic: FC = () => (
9
9
  <>
10
10
  <SampleDescription>
11
- <p>Beim klicken mit der Maus auf die einzelnen Überschriften, soll der Inhalt darunter aufgeklappt und beim erneuten klicken wieder zugeklappt werden.</p>
11
+ <p>
12
+ KolAccordion hides its content until opened. The open state can be toggled by clicking the headline or by setting the <code>_open</code>-prop
13
+ programmatically. Additionally, the sample shows the disabled state for a closed and an open accordion.
14
+ </p>
12
15
  </SampleDescription>
16
+
13
17
  <div className="grid gap-4">
14
- <KolAccordion _label="Überschrift Accordion Tab 1" _level={1}>
15
- <div slot="">Inhalt Accordion Tab 1</div>
16
- </KolAccordion>
17
- <KolAccordion _disabled _label="Überschrift Accordion Tab 2 (deaktiviert)" _level={1} _open>
18
- <div slot="">Inhalt Accordion Tab 2</div>
19
- </KolAccordion>
20
- <KolAccordion _label="Überschrift Accordion Tab 3" _level={1}>
21
- <div slot="">Inhalt Accordion Tab 3</div>
18
+ <KolAccordion _label="Überschrift Accordion Tab 1">Inhalt Accordion Tab 1</KolAccordion>
19
+ <KolAccordion _label="Überschrift Accordion Tab 2">Inhalt Accordion Tab 2</KolAccordion>
20
+ <KolAccordion _label="Überschrift Accordion Tab 2 (deaktiviert)" _disabled></KolAccordion>
21
+ <KolAccordion _label="Überschrift Accordion Tab 2 (disabled and open)" _disabled _open>
22
+ Inhalt Accordion Tab 2
22
23
  </KolAccordion>
23
24
  </div>
24
25
  </>
package/src/components/accordion/headlines.tsx CHANGED
@@ -1,33 +1,33 @@
1
+ import type { FC } from 'react';
1
2
  import React from 'react';
2
3
 
3
4
  import { KolAccordion } from '@public-ui/react';
4
5
  import { SampleDescription } from '../SampleDescription';
5
6
 
6
- import type { FC } from 'react';
7
-
8
7
  export const AccordionHeadlines: FC = () => (
9
8
  <>
10
9
  <SampleDescription>
11
- <p>Beim klicken mit der Maus auf die einzelnen Überschriften, soll der Inhalt darunter aufgeklappt und beim erneuten klicken wieder zugeklappt werden.</p>
10
+ <p>This sample shows KolAccordion with the different heading levels from 1-6.</p>
12
11
  </SampleDescription>
12
+
13
13
  <div className="grid gap-4">
14
14
  <KolAccordion _label="Überschrift Level 1" _level={1}>
15
- <div slot="">Inhalt Accordion Tab 1</div>
15
+ Inhalt Accordion Tab 1
16
16
  </KolAccordion>
17
17
  <KolAccordion _label="Überschrift Level 2" _level={2}>
18
- <div slot="">Inhalt Accordion Tab 2</div>
18
+ Inhalt Accordion Tab 2
19
19
  </KolAccordion>
20
20
  <KolAccordion _label="Überschrift Level 3" _level={3}>
21
- <div slot="">Inhalt Accordion Tab 3</div>
21
+ Inhalt Accordion Tab 3
22
22
  </KolAccordion>
23
23
  <KolAccordion _label="Überschrift Level 4" _level={4}>
24
- <div slot="">Inhalt Accordion Tab 4</div>
24
+ Inhalt Accordion Tab 4
25
25
  </KolAccordion>
26
26
  <KolAccordion _label="Überschrift Level 5" _level={5}>
27
- <div slot="">Inhalt Accordion Tab 5</div>
27
+ Inhalt Accordion Tab 5
28
28
  </KolAccordion>
29
29
  <KolAccordion _label="Überschrift Level 6" _level={6}>
30
- <div slot="">Inhalt Accordion Tab 6</div>
30
+ Inhalt Accordion Tab 6
31
31
  </KolAccordion>
32
32
  </div>
33
33
  </>
package/src/components/accordion/routes.ts CHANGED
@@ -1,12 +1,10 @@
1
1
  import { Routes } from '../../shares/types';
2
2
  import { AccordionBasic } from './basic';
3
3
  import { AccordionHeadlines } from './headlines';
4
- import { AccordionList } from './list';
5
4
 
6
5
  export const ACCORDION_ROUTES: Routes = {
7
6
  accordion: {
8
7
  basic: AccordionBasic,
9
8
  headlines: AccordionHeadlines,
10
- list: AccordionList,
11
9
  },
12
10
  };
package/src/components/alert/basic.tsx CHANGED
@@ -30,20 +30,25 @@ const AlertByType: FC<PropsByType> = ({ level, type, variant }) => (
30
30
  </>
31
31
  );
32
32
 
33
- export const AlertBasic: FC<PropsBasic> = ({ variant = 'msg' }) => (
33
+ export const AlertVariants: FC<PropsBasic> = ({ variant = 'msg' }) => (
34
+ <div className="grid gap-4">
35
+ <AlertByType level={1} type="default" variant={variant} />
36
+ <AlertByType level={2} type="error" variant={variant} />
37
+ <AlertByType level={3} type="info" variant={variant} />
38
+ <AlertByType level={4} type="success" variant={variant} />
39
+ <AlertByType level={5} type="warning" variant={variant} />
40
+ </div>
41
+ );
42
+
43
+ export const AlertBasic: FC<PropsBasic> = () => (
34
44
  <>
35
45
  <SampleDescription>
36
46
  <p>
37
- Hier werden verschiedene Alerts gezeigt. Beim klicken auf das X soll das Schließen-Event ausgelöst werden. In diesem Beispiel erscheint eine Textbox mit
38
- Inhalt Schließen.
47
+ KolAlert shows messages of different types. This sample illustrates the variant <code>msg</code>, showing all possible types with and without headlines
48
+ and close buttons.
39
49
  </p>
40
50
  </SampleDescription>
41
- <div className="grid gap-4">
42
- <AlertByType level={1} type="default" variant={variant} />
43
- <AlertByType level={2} type="error" variant={variant} />
44
- <AlertByType level={3} type="info" variant={variant} />
45
- <AlertByType level={4} type="success" variant={variant} />
46
- <AlertByType level={5} type="warning" variant={variant} />
47
- </div>
51
+
52
+ <AlertVariants variant="msg" />
48
53
  </>
49
54
  );
package/src/components/alert/card-msg.tsx CHANGED
@@ -1,11 +1,18 @@
1
+ import type { FC } from 'react';
1
2
  import React from 'react';
2
3
 
3
- import { AlertBasic } from './basic';
4
-
5
- import type { FC } from 'react';
4
+ import { AlertVariants } from './basic';
5
+ import { SampleDescription } from '../SampleDescription';
6
6
 
7
7
  export const AlertCardMsg: FC = () => (
8
- <div className="grid">
9
- <AlertBasic variant="card" />
10
- </div>
8
+ <>
9
+ <SampleDescription>
10
+ <p>
11
+ KolAlert shows messages of different types. This sample illustrates the variant <code>card</code>, showing all possible types with and without headlines
12
+ and close buttons.
13
+ </p>
14
+ </SampleDescription>
15
+
16
+ <AlertVariants variant="card" />
17
+ </>
11
18
  );
package/src/components/alert/html.tsx CHANGED
@@ -7,8 +7,9 @@ import type { FC } from 'react';
7
7
  export const AlertHtml: FC = () => (
8
8
  <>
9
9
  <SampleDescription>
10
- <p>Hier werden Alerts als html ausgegeben.</p>
10
+ <p>This sample shows how KolAlert can be used with arbitrary HTML as slot content.</p>
11
11
  </SampleDescription>
12
+
12
13
  <div>
13
14
  <KolAlert _label="Ausgabe von HTML-Code im Alert" _type="info">
14
15
  <h2 className="mt-2 mb-3">Hier wird eine H2-Überschrift ausgegeben</h2>
package/src/components/avatar/basic.tsx CHANGED
@@ -6,8 +6,9 @@ import { SampleDescription } from '../SampleDescription';
6
6
  export const AvatarBasic: FC = () => (
7
7
  <>
8
8
  <SampleDescription>
9
- <p>Hier werden verschiedene Avatar-Typen angezeigt</p>
9
+ <p>KolAlert shows a user&apos;s avatar. It can be used with or without an image. If no image is defined, the name&apos;s initials are shown instead.</p>
10
10
  </SampleDescription>
11
+
11
12
  <div className="flex flex-wrap gap-4">
12
13
  <KolAvatar _src="https://www.w3schools.com/howto/img_avatar.png" _label="Elke Mustermann" />
13
14
 
package/src/components/badge/basic.tsx CHANGED
@@ -8,14 +8,15 @@ import type { FC } from 'react';
8
8
  export const BadgeBasic: FC = () => (
9
9
  <>
10
10
  <SampleDescription>
11
- <p>Hier werden verschiedenfarbige Badges angezeigt</p>
11
+ <p>KolBadge shows badges with a label, background color and optional icon.</p>
12
12
  </SampleDescription>
13
+
13
14
  <div className="flex gap-2">
14
- <KolBadge _label="schwarz"></KolBadge>
15
- <KolBadge _color="#86ffc6" _label="türkis"></KolBadge>
16
- <KolBadge _color="#06539e" _label="blau"></KolBadge>
17
- <KolBadge _color="#ae0000" _label="rot"></KolBadge>
18
- <KolBadge _color="#8b008b" _label="lila"></KolBadge>
15
+ <KolBadge _label="black"></KolBadge>
16
+ <KolBadge _color="#86ffc6" _label="teal"></KolBadge>
17
+ <KolBadge _color="#06539e" _label="blue"></KolBadge>
18
+ <KolBadge _color="#ae0000" _label="red with icon" _icons="codicon codicon-smiley"></KolBadge>
19
+ <KolBadge _color="#8b008b" _label="purple with icon" _icons="codicon codicon-squirrel"></KolBadge>
19
20
  </div>
20
21
  </>
21
22
  );
package/src/components/badge/button.tsx CHANGED
@@ -1,14 +1,14 @@
1
+ import type { FC } from 'react';
1
2
  import React from 'react';
2
3
 
3
- import { KolBadge, KolHeading } from '@public-ui/react';
4
+ import { KolBadge } from '@public-ui/react';
4
5
  import { SampleDescription } from '../SampleDescription';
5
6
 
6
- import type { FC } from 'react';
7
-
8
7
  const createBadgeProps = (label: string) => ({
8
+ _label: label,
9
9
  _smartButton: {
10
10
  _icons: 'codicon codicon-close',
11
- _label: `Entfernen von ${label}`,
11
+ _label: `Remove ${label}`,
12
12
  _on: {
13
13
  onClick: () => alert('clicked'),
14
14
  },
@@ -19,21 +19,16 @@ export const BadgeButton: FC = () => (
19
19
  <>
20
20
  <SampleDescription>
21
21
  <p>
22
- Hier werden verschiedenfarbige Badges mit X Button angezeigt. Beim klicken auf das X soll das Schließen-Event ausgelöst werden. In diesem Beispiel
23
- erscheint eine Textbox mit Inhalt.{' '}
22
+ This sample shows KolBadge with an optional <code>smartButton</code>. The sample defines a &quot;close&quot; button with X-icon a click event listener.
24
23
  </p>
25
24
  </SampleDescription>
26
- <>
27
- <div className="mb-4">
28
- <KolHeading _label="Badge" _level={2} />
29
- </div>
30
- <div className="flex gap-2">
31
- <KolBadge _label="schwarz" {...createBadgeProps('schwarz')}></KolBadge>
32
- <KolBadge _label="türkis" _color="#86ffc6" {...createBadgeProps('türkis')}></KolBadge>
33
- <KolBadge _label="blau" _color="#06539e" {...createBadgeProps('blau')}></KolBadge>
34
- <KolBadge _label="rot" _color="#ae0000" {...createBadgeProps('rot')}></KolBadge>
35
- <KolBadge _label="lila" _color="#8b008b" {...createBadgeProps('lila')}></KolBadge>
36
- </div>
37
- </>
25
+
26
+ <div className="flex gap-2">
27
+ <KolBadge {...createBadgeProps('black')}></KolBadge>
28
+ <KolBadge _color="#86ffc6" {...createBadgeProps('teal')}></KolBadge>
29
+ <KolBadge _color="#06539e" {...createBadgeProps('blue')}></KolBadge>
30
+ <KolBadge _color="#ae0000" _icons="codicon codicon-smiley" {...createBadgeProps('red with icon')}></KolBadge>
31
+ <KolBadge _color="#8b008b" _icons="codicon codicon-squirrel" {...createBadgeProps('purple with icon')}></KolBadge>
32
+ </div>
38
33
  </>
39
34
  );
package/src/components/breadcrumb/basic.tsx CHANGED
@@ -8,8 +8,9 @@ import type { FC } from 'react';
8
8
  export const BreadcrumbBasic: FC = () => (
9
9
  <>
10
10
  <SampleDescription>
11
- <p>Hier wird eine Breadcrumb-Navigation dargestellt. Beim klicken auf die Links wird man auf Unterseiten weitergeleitet.</p>
11
+ <p>KolBreadcrumb shows a breadcrumb navigation. The sample illustrates a variation of link, text and icon elements.</p>
12
12
  </SampleDescription>
13
+
13
14
  <div className="grid gap-4">
14
15
  <KolBreadcrumb
15
16
  _label="Breadcrumb aus Text-Links"
package/src/components/button/access-key.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { KolButton } from '@public-ui/react';
1
+ import { KolButton, KolLink } from '@public-ui/react';
2
2
  import React from 'react';
3
3
  import type { FC } from 'react';
4
4
  import { SampleDescription } from '../SampleDescription';
@@ -6,8 +6,13 @@ import { SampleDescription } from '../SampleDescription';
6
6
  export const ButtonAccessKey: FC = () => (
7
7
  <>
8
8
  <SampleDescription>
9
- <p>Hier verstehe ich es nicht!</p>
9
+ <p>
10
+ This sample shows KolButton with{' '}
11
+ <KolLink _label="access keys" _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey" _target="blank" />. The access keys
12
+ can be used to trigger the buttons using the keyboard.
13
+ </p>
10
14
  </SampleDescription>
15
+
11
16
  <div className="flex flex-wrap gap-4">
12
17
  <KolButton _label="Mit S access key" _accessKey="S"></KolButton>
13
18
  <KolButton _label="Sehr kleines s" _accessKey="s"></KolButton>
package/src/components/button/baselined.tsx CHANGED
@@ -8,8 +8,9 @@ import { SampleDescription } from '../SampleDescription';
8
8
  export const ButtonBaselined: FC = () => (
9
9
  <>
10
10
  <SampleDescription>
11
- <p>Hier verstehe ich Baselined nicht!</p>
11
+ <p>This KolButton sample is used for internal testing purposes: It features multiple buttons with and without icons which are vertically aligned.</p>
12
12
  </SampleDescription>
13
+
13
14
  <div className="inline-block">
14
15
  <KolButton _label="Label-Text"></KolButton>
15
16
  <KolButton _label="Label-Text"></KolButton>
package/src/components/button/basic.tsx CHANGED
@@ -6,7 +6,9 @@ import { SampleDescription } from '../SampleDescription';
6
6
  export const ButtonBasic: FC = () => (
7
7
  <>
8
8
  <SampleDescription>
9
- <p>Hier sind anklickbare und nicht anklickbare Buttons. Es gibt außerdem Buttons mit Label und ohne Label.</p>
9
+ <p>
10
+ KolButton shows a button-element. This sample demonstrates the basic usage with its different styling variants, icons, disabled state and hidden labels.
11
+ </p>
10
12
  </SampleDescription>
11
13
 
12
14
  <ButtonVariants />
package/src/components/button/icons.tsx CHANGED
@@ -8,8 +8,9 @@ import { SampleDescription } from '../SampleDescription';
8
8
  export const ButtonIcons: FC = () => (
9
9
  <>
10
10
  <SampleDescription>
11
- <p>Hier wird ein Button mit dem Label &apos;Label&apos; angezeigt. Beim anklicken wird ein alert als Popup ausgeführt. </p>
11
+ <p>This sample shows KolButton with icons in all alignments.</p>
12
12
  </SampleDescription>
13
+
13
14
  <KolButton
14
15
  _icons={{
15
16
  bottom: 'codicon codicon-arrow-down',
package/src/components/button/partials/variants.tsx CHANGED
@@ -5,7 +5,6 @@ import { ButtonCases } from './cases';
5
5
  export const ButtonVariants = function ButtonVariant() {
6
6
  return (
7
7
  <div className="grid gap-4">
8
- <h1>Button</h1>
9
8
  <section>
10
9
  <h2>Button</h2>
11
10
  <ButtonCases />
package/src/components/button/routes.ts CHANGED
@@ -2,14 +2,12 @@ import { Routes } from '../../shares/types';
2
2
  import { ButtonAccessKey } from './access-key';
3
3
  import { ButtonBaselined } from './baselined';
4
4
  import { ButtonBasic } from './basic';
5
- import { ButtonIconOnly } from './hide-label';
6
5
  import { ButtonIcons } from './icons';
7
6
  import { ButtonWidth } from './width';
8
7
 
9
8
  export const BUTTON_ROUTES: Routes = {
10
9
  button: {
11
10
  basic: ButtonBasic,
12
- 'hide-label': ButtonIconOnly,
13
11
  icons: ButtonIcons,
14
12
  width: ButtonWidth,
15
13
  'access-key': ButtonAccessKey,
package/src/components/button/width.tsx CHANGED
@@ -15,8 +15,9 @@ const ARGS = {
15
15
  export const ButtonWidth: FC = () => (
16
16
  <>
17
17
  <SampleDescription>
18
- <p>Hier werden breite Buttons angezeigt. Beim anklicken wird ein alert als Popup ausgeführt.</p>
18
+ <p>This sample shows KolButton with adjusted widths.</p>
19
19
  </SampleDescription>
20
+
20
21
  <div className="grid gap-14">
21
22
  <div className="flex flex-wrap gap-14">
22
23
  <KolButton _label="Primary" _variant="primary" {...ARGS}></KolButton>
package/src/components/button-group/basic.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
 
3
- import { KolButton, KolButtonGroup } from '@public-ui/react';
3
+ import { KolBadge, KolButton, KolButtonGroup } from '@public-ui/react';
4
4
  import { SampleDescription } from '../SampleDescription';
5
5
 
6
6
  import type { FC } from 'react';
@@ -8,8 +8,13 @@ import type { FC } from 'react';
8
8
  export const ButtonGroupBasic: FC = () => (
9
9
  <>
10
10
  <SampleDescription>
11
- <p>Hier werden Vier verschiedene Buttons angezeigt. Drei davon lassen sich anklicken und in den Status Active versetzen.</p>
11
+ <p>KolButtonGroup shows multiple KolButton-elements visually grouped together.</p>
12
+
13
+ <p>
14
+ <KolBadge _label="The component is deprecated and won't be available anymore in KoliBri version 3." _color="#db5461" />
15
+ </p>
12
16
  </SampleDescription>
17
+
13
18
  <KolButtonGroup>
14
19
  <KolButton _label="Active" _variant="primary"></KolButton>
15
20
  <KolButton _label="Not active" _disabled></KolButton>
package/src/components/button-link/basic.tsx CHANGED
@@ -3,25 +3,34 @@ import React from 'react';
3
3
  import { KolButtonLink } from '@public-ui/react';
4
4
 
5
5
  import type { FC } from 'react';
6
+ import { SampleDescription } from '../SampleDescription';
6
7
 
7
8
  export const ButtonLinkBasic: FC = () => (
8
- <div className="grid gap-4">
9
- <p>
10
- In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. <KolButtonLink _label="Simple Link" /> Er wird standardmäßig als{' '}
11
- <strong>inline-Element</strong> ausgegeben.
12
- </p>
13
- <p>
14
- In diesem Absatz wird ein Link gesetzt, der einmal als inline-block-Element ausgegeben wird.{' '}
15
- <KolButtonLink style={{ display: 'inline-block', margin: '1rem', border: '1px dotted' }} _label="Simple Link" />. Damit kann man mir per CSS-Styles eine
16
- Breite, eine Höhe und andere Eigenschaften zuweisen.
17
- <br />
18
- <br />
19
- Danach folgt ein Link, der als block-Element ausgegeben wird.
20
- <KolButtonLink style={{ display: 'block' }} _label="Simple Link" />
21
- Daher gehe ich über die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
22
- </p>
23
- <p>
24
- <KolButtonLink _label="Disabled ButtonLink" _disabled />
25
- </p>
26
- </div>
9
+ <>
10
+ <SampleDescription>
11
+ <p>
12
+ KolButtonLink shows an element, that behaves like a button but looks like a link. The sample illustrates KolButtonLink with different display-properties
13
+ such as <code>block</code>, <code>inline-block</code> and <code>inline</code>. It also demonstrates the disabled-state.
14
+ </p>
15
+ </SampleDescription>
16
+ <div>
17
+ <p>
18
+ In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. <KolButtonLink _label="Simple Link" /> Er wird standardmäßig als{' '}
19
+ <strong>inline-Element</strong> ausgegeben.
20
+ </p>
21
+ <p>
22
+ In diesem Absatz wird ein Link gesetzt, der einmal als inline-block-Element ausgegeben wird.{' '}
23
+ <KolButtonLink style={{ display: 'inline-block', margin: '1rem', border: '1px dotted' }} _label="Simple Link" />. Damit kann man mir per CSS-Styles eine
24
+ Breite, eine Höhe und andere Eigenschaften zuweisen.
25
+ <br />
26
+ <br />
27
+ Danach folgt ein Link, der als block-Element ausgegeben wird.
28
+ <KolButtonLink style={{ display: 'block' }} _label="Simple Link" />
29
+ Daher gehe ich über die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
30
+ </p>
31
+ <p>
32
+ <KolButtonLink _label="Disabled ButtonLink" _disabled />
33
+ </p>
34
+ </div>
35
+ </>
27
36
  );
package/src/components/button-link/icons.tsx CHANGED
@@ -8,8 +8,9 @@ import { SampleDescription } from '../SampleDescription';
8
8
  export const ButtonLinkIcons: FC = () => (
9
9
  <>
10
10
  <SampleDescription>
11
- <p>Hier werden verschiedene Links mit Icons angezeigt. Die Links führen zu keinem Ziel.</p>
11
+ <p>This sample shows KolButtonLink with icons in different locations.</p>
12
12
  </SampleDescription>
13
+
13
14
  <div className="grid gap-4">
14
15
  <KolButtonLink _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" />
15
16
  <KolButtonLink
package/src/components/button-link/image.tsx CHANGED
@@ -8,8 +8,9 @@ import { SampleDescription } from '../SampleDescription';
8
8
  export const ButtonLinkImage: FC = () => (
9
9
  <>
10
10
  <SampleDescription>
11
- <p>Hier wird ein Link angezeigt, der als Text gerendert wird. Nach klicken auf den Link wird das Bild abgrenzung.jpg angezeigt.</p>
11
+ <p>This sample shows KolButtonLink with slot-content instead of a label. The sample uses an image as content.</p>
12
12
  </SampleDescription>
13
+
13
14
  <div className="grid gap-4">
14
15
  <KolButtonLink _label="Ich bin ein Link, der als Text gerendert wird" />
15
16
  <br />
package/src/components/card/basic.tsx CHANGED
@@ -8,10 +8,17 @@ import { SampleDescription } from '../SampleDescription';
8
8
  export const CardBasic: FC = () => (
9
9
  <>
10
10
  <SampleDescription>
11
- <p>Hier wird eine Card mit Titel und &apos;Inhalt&apos; angezeigt. Es gibt keine Interaktionsmöglichkeit.</p>
11
+ <p>KolCard shows a card with title and slot content. The second sample features a close button.</p>
12
12
  </SampleDescription>
13
- <KolCard _label="Titel">
14
- <div slot="">Inhalt</div>
15
- </KolCard>
13
+
14
+ <div className="grid grid-cols-2 gap-4">
15
+ <KolCard _label="Card with title and content">
16
+ <div>Card contents.</div>
17
+ </KolCard>
18
+
19
+ <KolCard _label="Card with closer" _hasCloser>
20
+ <p>This card has a close button.</p>
21
+ </KolCard>
22
+ </div>
16
23
  </>
17
24
  );
package/src/components/card/routes.ts CHANGED
@@ -1,14 +1,8 @@
1
1
  import { Routes } from '../../shares/types';
2
2
  import { CardBasic } from './basic';
3
- import { CardConfirm } from './confirm';
4
- import { CardFlex } from './flex';
5
- import { CardSelection } from './selection';
6
3
 
7
4
  export const CARD_ROUTES: Routes = {
8
5
  card: {
9
6
  basic: CardBasic,
10
- confirm: CardConfirm,
11
- flex: CardFlex,
12
- selection: CardSelection,
13
7
  },
14
8
  };
package/src/components/combobox/basic.tsx CHANGED
@@ -5,9 +5,10 @@ import { ComboboxVariants } from './partials/variants';
5
5
  import { SampleDescription } from '../SampleDescription';
6
6
  export const ComboboxBasic: FC = () => (
7
7
  <>
8
- <SampleDescription>The Combobox merges a text input with a suggestion list, enabling users to type or select their choice.</SampleDescription>
9
- <>
10
- <FormWrap RefComponent={ComboboxVariants} />
11
- </>
8
+ <SampleDescription>
9
+ KolCombobox combines a text input with a suggestion list, enabling users to either type in a value or to select on of the suggestions.
10
+ </SampleDescription>
11
+
12
+ <FormWrap RefComponent={ComboboxVariants} />
12
13
  </>
13
14
  );