@public-ui/sample-react 1.7.25 → 1.7.26-rc.1

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 (186) 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/1237.js +2 -0
  6. package/dist/1278.js +1 -1
  7. package/dist/1325.js +1 -1
  8. package/dist/1333.js +1 -1
  9. package/dist/1661.js +1 -1
  10. package/dist/1703.js +1 -1
  11. package/dist/1711.js +1 -1
  12. package/dist/1792.js +1 -1
  13. package/dist/1793.js +1 -1
  14. package/dist/1878.js +1 -1
  15. package/dist/1957.js +1 -1
  16. package/dist/2195.js +1 -1
  17. package/dist/2305.js +1 -1
  18. package/dist/2538.js +1 -1
  19. package/dist/279.js +1 -1
  20. package/dist/2830.js +1 -1
  21. package/dist/3180.js +1 -1
  22. package/dist/3332.js +1 -1
  23. package/dist/3344.js +1 -1
  24. package/dist/3596.js +1 -1
  25. package/dist/3714.js +1 -1
  26. package/dist/3974.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/4404.js +1 -1
  31. package/dist/{2214.js → 4614.js} +2 -2
  32. package/dist/4941.js +1 -1
  33. package/dist/500.js +1 -1
  34. package/dist/5139.js +1 -1
  35. package/dist/5164.js +1 -1
  36. package/dist/5484.js +1 -1
  37. package/dist/5540.js +1 -1
  38. package/dist/5756.js +1 -1
  39. package/dist/6682.js +1 -1
  40. package/dist/6781.js +1 -1
  41. package/dist/7245.js +1 -1
  42. package/dist/7263.js +1 -1
  43. package/dist/{2328.js → 7300.js} +1 -1
  44. package/dist/7512.js +1 -1
  45. package/dist/7856.js +1 -1
  46. package/dist/8002.js +1 -1
  47. package/dist/8049.js +1 -1
  48. package/dist/8189.js +1 -1
  49. package/dist/8264.js +1 -1
  50. package/dist/8389.js +1 -1
  51. package/dist/8515.js +1 -1
  52. package/dist/8557.js +1 -1
  53. package/dist/8588.js +1 -1
  54. package/dist/8724.js +1 -1
  55. package/dist/882.js +1 -1
  56. package/dist/895.js +1 -1
  57. package/dist/8993.js +1 -1
  58. package/dist/902.js +1 -1
  59. package/dist/9175.js +1 -1
  60. package/dist/9202.js +1 -1
  61. package/dist/9460.js +2 -0
  62. package/dist/9558.js +1 -1
  63. package/dist/9567.js +1 -1
  64. package/dist/9833.js +1 -1
  65. package/dist/9961.js +1 -1
  66. package/dist/9962.js +1 -1
  67. package/dist/index.html +2 -2
  68. package/dist/main.css +1 -1
  69. package/dist/main.js +1 -1
  70. package/package.json +8 -4
  71. package/public/index.html +2 -2
  72. package/src/components/SampleDescription.tsx +16 -9
  73. package/src/components/Sidebar.tsx +4 -4
  74. package/src/components/abbr/basic.tsx +5 -0
  75. package/src/components/accordion/basic.tsx +21 -11
  76. package/src/components/accordion/headlines.tsx +26 -20
  77. package/src/components/accordion/routes.ts +0 -5
  78. package/src/components/alert/basic.tsx +15 -1
  79. package/src/components/alert/card-msg.tsx +15 -6
  80. package/src/components/alert/html.tsx +7 -3
  81. package/src/components/avatar/basic.tsx +13 -6
  82. package/src/components/badge/basic.tsx +14 -7
  83. package/src/components/badge/button.tsx +7 -0
  84. package/src/components/breadcrumb/basic.tsx +53 -46
  85. package/src/components/button/basic.tsx +13 -2
  86. package/src/components/button/icons.tsx +26 -19
  87. package/src/components/button/routes.ts +0 -3
  88. package/src/components/button/width.tsx +22 -15
  89. package/src/components/button-group/basic.tsx +18 -7
  90. package/src/components/button-link/basic.tsx +26 -16
  91. package/src/components/button-link/icons.tsx +37 -30
  92. package/src/components/button-link/image.tsx +14 -7
  93. package/src/components/card/basic.tsx +12 -5
  94. package/src/components/card/routes.ts +0 -9
  95. package/src/components/details/basic.tsx +21 -12
  96. package/src/components/heading/badged.tsx +28 -20
  97. package/src/components/heading/basic.tsx +14 -8
  98. package/src/components/heading/paragraph.tsx +44 -38
  99. package/src/components/icon/basic.tsx +16 -10
  100. package/src/components/image/basic.tsx +9 -1
  101. package/src/components/indented-text/basic.tsx +25 -17
  102. package/src/components/input-checkbox/basic.tsx +9 -1
  103. package/src/components/input-checkbox/button.tsx +9 -1
  104. package/src/components/input-checkbox/switch.tsx +9 -1
  105. package/src/components/input-color/basic.tsx +9 -1
  106. package/src/components/input-date/basic.tsx +9 -1
  107. package/src/components/input-email/basic.tsx +9 -1
  108. package/src/components/input-file/basic.tsx +9 -1
  109. package/src/components/input-number/basic.tsx +13 -1
  110. package/src/components/input-password/basic.tsx +9 -1
  111. package/src/components/input-password/show-password.tsx +26 -19
  112. package/src/components/input-radio/basic.tsx +9 -1
  113. package/src/components/input-radio/horizontal.tsx +5 -5
  114. package/src/components/input-radio/routes.ts +0 -3
  115. package/src/components/input-range/basic.tsx +12 -1
  116. package/src/components/input-text/basic.tsx +9 -1
  117. package/src/components/input-text/focus.tsx +14 -8
  118. package/src/components/input-text/hide-errors.tsx +4 -1
  119. package/src/components/input-text/routes.ts +0 -2
  120. package/src/components/kolibri/basic.tsx +5 -0
  121. package/src/components/link/basic.tsx +25 -17
  122. package/src/components/link/icons.tsx +40 -34
  123. package/src/components/link/image.tsx +18 -12
  124. package/src/components/link/target.tsx +16 -8
  125. package/src/components/link-button/basic.tsx +14 -8
  126. package/src/components/link-group/basic.tsx +13 -2
  127. package/src/components/link-group/horizontal.tsx +13 -2
  128. package/src/components/logo/basic.tsx +13 -2
  129. package/src/components/modal/basic.tsx +9 -2
  130. package/src/components/nav/aria-current.tsx +24 -15
  131. package/src/components/nav/basic.tsx +64 -55
  132. package/src/components/nav/horizontal.tsx +58 -52
  133. package/src/components/nav/routes.ts +0 -3
  134. package/src/components/pagination/basic.tsx +15 -6
  135. package/src/components/progress/basic.tsx +10 -4
  136. package/src/components/quote/basic.tsx +7 -1
  137. package/src/components/quote/block.tsx +12 -6
  138. package/src/components/select/basic.tsx +9 -1
  139. package/src/components/skip-nav/basic.tsx +7 -11
  140. package/src/components/spin/basic.tsx +10 -1
  141. package/src/components/spin/custom.tsx +13 -3
  142. package/src/components/spin/cycle.tsx +10 -1
  143. package/src/components/split-button/basic.tsx +9 -2
  144. package/src/components/table/column-alignment.tsx +4 -0
  145. package/src/components/table/horizontal-scrollbar.tsx +7 -0
  146. package/src/components/table/render-cell.tsx +9 -1
  147. package/src/components/table/routes.ts +0 -3
  148. package/src/components/table/sort-date.tsx +9 -1
  149. package/src/components/table/with-pagination.tsx +1 -4
  150. package/src/components/tabs/basic.tsx +4 -0
  151. package/src/components/tabs/icons-only.tsx +12 -6
  152. package/src/components/textarea/adjust-height.tsx +12 -8
  153. package/src/components/textarea/basic.tsx +10 -1
  154. package/src/components/textarea/counter.tsx +10 -1
  155. package/src/components/textarea/resize.tsx +15 -6
  156. package/src/components/textarea/routes.ts +0 -9
  157. package/src/components/textarea/rows.tsx +12 -3
  158. package/src/components/toast/basic.tsx +17 -10
  159. package/src/components/toast-legacy/basic.tsx +17 -8
  160. package/src/components/version/basic.tsx +10 -1
  161. package/src/components/version/context.tsx +12 -5
  162. package/src/react.main.tsx +1 -1
  163. package/src/scenarios/appointment-form/AppointmentForm.tsx +53 -43
  164. package/src/scenarios/custom-tooltip-width.tsx +10 -1
  165. package/src/scenarios/static-form.tsx +1 -1
  166. package/src/shares/constants.ts +1 -0
  167. package/dist/3454.js +0 -2
  168. package/dist/4689.js +0 -2
  169. package/dist/9192.js +0 -2
  170. package/dist/9192.js.LICENSE.txt +0 -3
  171. package/src/components/accordion/header.tsx +0 -17
  172. package/src/components/accordion/list.tsx +0 -32
  173. package/src/components/button/hide-label.tsx +0 -31
  174. package/src/components/card/confirm.tsx +0 -19
  175. package/src/components/card/flex.tsx +0 -44
  176. package/src/components/card/selection.tsx +0 -70
  177. package/src/components/input-radio/select.tsx +0 -18
  178. package/src/components/input-text/blur.tsx +0 -14
  179. package/src/components/nav/active.tsx +0 -89
  180. package/src/components/table/badge-size.tsx +0 -51
  181. package/src/components/textarea/disabled.tsx +0 -10
  182. package/src/components/textarea/placeholder.tsx +0 -10
  183. package/src/components/textarea/readonly.tsx +0 -10
  184. /package/dist/{2214.js.LICENSE.txt → 1237.js.LICENSE.txt} +0 -0
  185. /package/dist/{3454.js.LICENSE.txt → 4614.js.LICENSE.txt} +0 -0
  186. /package/dist/{4689.js.LICENSE.txt → 9460.js.LICENSE.txt} +0 -0
package/package.json CHANGED
@@ -1,8 +1,12 @@
1
1
  {
2
2
  "name": "@public-ui/sample-react",
3
- "version": "1.7.25",
3
+ "version": "1.7.26-rc.1",
4
4
  "description": "This app contains samples for the KoliBri/Public UI",
5
5
  "license": "EUPL-1.2",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "https://github.com/public-ui/kolibri"
9
+ },
6
10
  "dependencies": {
7
11
  "@leanup/stack": "1.3.54",
8
12
  "@leanup/stack-react": "1.3.54",
@@ -29,9 +33,9 @@
29
33
  "typescript": "5.5.2",
30
34
  "world_countries_lists": "2.9.0",
31
35
  "yup": "1.4.0",
32
- "@public-ui/react": "1.7.25",
33
- "@public-ui/themes": "1.7.25",
34
- "@public-ui/components": "1.7.25"
36
+ "@public-ui/react": "1.7.26-rc.1",
37
+ "@public-ui/components": "1.7.26-rc.1",
38
+ "@public-ui/themes": "1.7.26-rc.1"
35
39
  },
36
40
  "files": [
37
41
  ".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
@@ -1,5 +1,7 @@
1
1
  import type { FC, PropsWithChildren } from 'react';
2
- import React, { useContext } from 'react';
2
+ import React, { useContext, useMemo } from 'react';
3
+
4
+ import { PUBLIC_DOC_COMPONENT_URL } from '../shares/constants';
3
5
 
4
6
  import { KolIndentedText, KolLink } from '@public-ui/react';
5
7
 
@@ -7,17 +9,22 @@ import { HideMenusContext } from '../shares/HideMenusContext';
7
9
 
8
10
  export const SampleDescription: FC<PropsWithChildren> = (props) => {
9
11
  const hideMenus = useContext(HideMenusContext);
12
+ const docLink = useMemo(() => {
13
+ const arr = location.href.split('/');
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]);
10
20
 
11
21
  return hideMenus ? null : (
12
- <div className="flex mb-sm">
22
+ <div className="flex justify-between mb-sm">
13
23
  <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>
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" />
27
+ </div>
21
28
  </div>
22
29
  );
23
30
  };
package/src/components/Sidebar.tsx CHANGED
@@ -69,15 +69,15 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
69
69
  {buildDate ? `at ${buildDate}` : ''}
70
70
  </div>
71
71
  )}
72
- <KolSelect _label="Theme wählen" _list={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={[theme]} class="mt"></KolSelect>
72
+ <KolSelect _label="Theme" _list={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={[theme]} class="mt"></KolSelect>
73
73
 
74
- <KolHeading _label="Komponenten" _level={2} className="block mt"></KolHeading>
74
+ <KolHeading _label="Components" _level={2} className="block mt"></KolHeading>
75
75
  <div className="flex flex-justify-between flex-items-center mt">
76
- <KolButton _icons="codicon codicon-arrow-left" _hideLabel _label="Vorherige Komponente auswählen" _on={{ onClick: handlePreviousClick }} />
76
+ <KolButton _icons="codicon codicon-arrow-left" _hideLabel _label="Previous component" _on={{ onClick: handlePreviousClick }} />
77
77
  <span className="text-center">
78
78
  {formatSampleAsLabel()} ({getIndexOfSample() + 1}/{routeList.length})
79
79
  </span>
80
- <KolButton _icons="codicon codicon-arrow-right" _hideLabel _label="Nächste Komponente auswählen" _on={{ onClick: handleNextClick }} />
80
+ <KolButton _icons="codicon codicon-arrow-right" _hideLabel _label="Next component" _on={{ onClick: handleNextClick }} />
81
81
  </div>
82
82
 
83
83
  <ComponentNavContainer isMobile={isMobile}>
package/src/components/abbr/basic.tsx CHANGED
@@ -1,9 +1,14 @@
1
1
  import React from 'react';
2
2
  import { FC } from 'react';
3
3
  import { KolAbbr } from '@public-ui/react';
4
+ import { SampleDescription } from '../SampleDescription';
4
5
 
5
6
  export const AbbrBasic: FC = () => (
6
7
  <>
8
+ <SampleDescription>
9
+ <p>KolAbbr shows the full expansion of an abbreviated term on mouse over. The sample illustrates the different possible alignments for the tooltip.</p>
10
+ </SampleDescription>
11
+
7
12
  <p>
8
13
  Ich bin <KolAbbr _title="Abkürzung">z.B.</KolAbbr> eine Abkürzung.
9
14
  </p>
package/src/components/accordion/basic.tsx CHANGED
@@ -2,17 +2,27 @@ import React from 'react';
2
2
  import { KolAccordion } from '@public-ui/react';
3
3
 
4
4
  import { FC } from 'react';
5
+ import { SampleDescription } from '../SampleDescription';
5
6
 
6
7
  export const AccordionBasic: FC = () => (
7
- <div className="grid gap-4">
8
- <KolAccordion _heading="Überschrift Accordion Tab 1" _level={1}>
9
- <div slot="content">Inhalt Accordion Tab 1</div>
10
- </KolAccordion>
11
- <KolAccordion _heading="Überschrift Accordion Tab 2" _level={1} _open>
12
- <div slot="content">Inhalt Accordion Tab 2</div>
13
- </KolAccordion>
14
- <KolAccordion _heading="Überschrift Accordion Tab 3" _level={1}>
15
- <div slot="content">Inhalt Accordion Tab 3</div>
16
- </KolAccordion>
17
- </div>
8
+ <>
9
+ <SampleDescription>
10
+ <p>
11
+ KolAccordion hides its content until opened. The open state can be toggled by clicking the headline or by setting the <code>_open</code>-prop
12
+ programmatically. Additionally, the sample shows the disabled state for a closed and an open accordion.
13
+ </p>
14
+ </SampleDescription>
15
+
16
+ <div className="grid gap-4">
17
+ <KolAccordion _heading="Überschrift Accordion Tab 1" _level={1}>
18
+ <div slot="content">Inhalt Accordion Tab 1</div>
19
+ </KolAccordion>
20
+ <KolAccordion _heading="Überschrift Accordion Tab 2" _level={1} _open>
21
+ <div slot="content">Inhalt Accordion Tab 2</div>
22
+ </KolAccordion>
23
+ <KolAccordion _heading="Überschrift Accordion Tab 3" _level={1}>
24
+ <div slot="content">Inhalt Accordion Tab 3</div>
25
+ </KolAccordion>
26
+ </div>
27
+ </>
18
28
  );
package/src/components/accordion/headlines.tsx CHANGED
@@ -2,26 +2,32 @@ import React from 'react';
2
2
  import { KolAccordion } from '@public-ui/react';
3
3
 
4
4
  import { FC } from 'react';
5
+ import { SampleDescription } from '../SampleDescription';
5
6
 
6
7
  export const AccordionHeadlines: FC = () => (
7
- <div className="grid gap-4">
8
- <KolAccordion _heading="Überschrift Level 1" _level={1}>
9
- <div slot="content">Inhalt Accordion Tab 1</div>
10
- </KolAccordion>
11
- <KolAccordion _heading="Überschrift Level 2" _level={2}>
12
- <div slot="content">Inhalt Accordion Tab 2</div>
13
- </KolAccordion>
14
- <KolAccordion _heading="Überschrift Level 3" _level={3}>
15
- <div slot="content">Inhalt Accordion Tab 3</div>
16
- </KolAccordion>
17
- <KolAccordion _heading="Überschrift Level 4" _level={4}>
18
- <div slot="content">Inhalt Accordion Tab 4</div>
19
- </KolAccordion>
20
- <KolAccordion _heading="Überschrift Level 5" _level={5}>
21
- <div slot="content">Inhalt Accordion Tab 5</div>
22
- </KolAccordion>
23
- <KolAccordion _heading="Überschrift Level 6" _level={6}>
24
- <div slot="content">Inhalt Accordion Tab 6</div>
25
- </KolAccordion>
26
- </div>
8
+ <>
9
+ <SampleDescription>
10
+ <p>This sample shows KolAccordion with the different heading levels from 1-6.</p>
11
+ </SampleDescription>
12
+ <div className="grid gap-4">
13
+ <KolAccordion _heading="Überschrift Level 1" _level={1}>
14
+ <div slot="content">Inhalt Accordion Tab 1</div>
15
+ </KolAccordion>
16
+ <KolAccordion _heading="Überschrift Level 2" _level={2}>
17
+ <div slot="content">Inhalt Accordion Tab 2</div>
18
+ </KolAccordion>
19
+ <KolAccordion _heading="Überschrift Level 3" _level={3}>
20
+ <div slot="content">Inhalt Accordion Tab 3</div>
21
+ </KolAccordion>
22
+ <KolAccordion _heading="Überschrift Level 4" _level={4}>
23
+ <div slot="content">Inhalt Accordion Tab 4</div>
24
+ </KolAccordion>
25
+ <KolAccordion _heading="Überschrift Level 5" _level={5}>
26
+ <div slot="content">Inhalt Accordion Tab 5</div>
27
+ </KolAccordion>
28
+ <KolAccordion _heading="Überschrift Level 6" _level={6}>
29
+ <div slot="content">Inhalt Accordion Tab 6</div>
30
+ </KolAccordion>
31
+ </div>
32
+ </>
27
33
  );
package/src/components/accordion/routes.ts CHANGED
@@ -2,16 +2,11 @@ import { Routes } from '../../shares/types';
2
2
 
3
3
  import { AccordionBasic } from './basic';
4
4
 
5
- import { AccordionHeader } from './header';
6
-
7
5
  import { AccordionHeadlines } from './headlines';
8
- import { AccordionList } from './list';
9
6
 
10
7
  export const ACCORDION_ROUTES: Routes = {
11
8
  accordion: {
12
9
  basic: AccordionBasic,
13
- header: AccordionHeader,
14
10
  headlines: AccordionHeadlines,
15
- list: AccordionList,
16
11
  },
17
12
  };
package/src/components/alert/basic.tsx CHANGED
@@ -5,6 +5,7 @@ import { HeadingLevel } from '@public-ui/components/dist/types/types/heading-lev
5
5
 
6
6
  import { FC } from 'react';
7
7
  import { AlertType, AlertVariant } from '@public-ui/components';
8
+ import { SampleDescription } from '../SampleDescription';
8
9
 
9
10
  type PropsByType = {
10
11
  level: HeadingLevel;
@@ -32,7 +33,7 @@ const AlertByType: FC<PropsByType> = ({ level, type, variant }) => (
32
33
  </>
33
34
  );
34
35
 
35
- export const AlertBasic: FC<PropsBasic> = ({ variant = 'msg' }) => (
36
+ export const AlertVariants: FC<PropsBasic> = ({ variant = 'msg' }) => (
36
37
  <div className="grid gap-4">
37
38
  <AlertByType level={1} type="default" variant={variant} />
38
39
  <AlertByType level={2} type="error" variant={variant} />
@@ -41,3 +42,16 @@ export const AlertBasic: FC<PropsBasic> = ({ variant = 'msg' }) => (
41
42
  <AlertByType level={5} type="warning" variant={variant} />
42
43
  </div>
43
44
  );
45
+
46
+ export const AlertBasic = () => (
47
+ <>
48
+ <SampleDescription>
49
+ <p>
50
+ KolAlert shows messages of different types. This sample illustrates the variant <code>msg</code>, showing all possible types with and without headlines
51
+ and close buttons.
52
+ </p>
53
+ </SampleDescription>
54
+
55
+ <AlertVariants variant="msg" />
56
+ </>
57
+ );
package/src/components/alert/card-msg.tsx CHANGED
@@ -1,10 +1,19 @@
1
- import React from 'react';
2
- import { FC } from 'react';
1
+ import React, { FC } from 'react';
3
2
 
4
- import { AlertBasic } from './basic';
3
+ import { AlertVariants } from './basic';
4
+ import { SampleDescription } from '../SampleDescription';
5
5
 
6
6
  export const AlertCardMsg: FC = () => (
7
- <div className="grid">
8
- <AlertBasic variant="card" />
9
- </div>
7
+ <>
8
+ <SampleDescription>
9
+ <p>
10
+ KolAlert shows messages of different types. This sample illustrates the variant <code>card</code>, showing all possible types with and without headlines
11
+ and close buttons.
12
+ </p>
13
+ </SampleDescription>
14
+
15
+ <div className="grid">
16
+ <AlertVariants variant="card" />
17
+ </div>
18
+ </>
10
19
  );
package/src/components/alert/html.tsx CHANGED
@@ -2,11 +2,15 @@ import React from 'react';
2
2
  import { KolAlert } from '@public-ui/react';
3
3
 
4
4
  import { FC } from 'react';
5
+ import { SampleDescription } from '../SampleDescription';
5
6
 
6
7
  export const AlertHtml: FC = () => (
7
- <div>
8
+ <>
9
+ <SampleDescription>
10
+ <p>This sample shows how KolAlert can be used with arbitrary HTML as slot content.</p>
11
+ </SampleDescription>
12
+
8
13
  <KolAlert _heading="Ausgabe von HTML-Code im Alert" _type="info">
9
- {' '}
10
14
  <h2 className="mt-2 mb-3">Hier wird eine H2-Überschrift ausgegeben</h2>
11
15
  <div style={{ display: 'grid', gridAutoFlow: 'column', gap: '1rem' }}>
12
16
  <div>
@@ -25,5 +29,5 @@ export const AlertHtml: FC = () => (
25
29
  </div>
26
30
  </div>
27
31
  </KolAlert>
28
- </div>
32
+ </>
29
33
  );
package/src/components/avatar/basic.tsx CHANGED
@@ -1,12 +1,19 @@
1
1
  import { KolAvatar } from '@public-ui/react';
2
2
  import React, { FC } from 'react';
3
+ import { SampleDescription } from '../SampleDescription';
3
4
 
4
5
  export const AvatarBasic: FC = () => (
5
- <div className="flex flex-wrap gap-4">
6
- <KolAvatar _src="https://www.w3schools.com/howto/img_avatar.png" _label="Elke Mustermann" />
6
+ <>
7
+ <SampleDescription>
8
+ <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>
9
+ </SampleDescription>
7
10
 
8
- {/* intentional trailing space 👇 - it's supposed to be trimmed */}
9
- <KolAvatar _label="Elke Mustermann " />
10
- <KolAvatar _label="Marianne" />
11
- </div>
11
+ <div className="flex flex-wrap gap-4">
12
+ <KolAvatar _src="https://www.w3schools.com/howto/img_avatar.png" _label="Elke Mustermann" />
13
+
14
+ {/* intentional trailing space 👇 - it's supposed to be trimmed */}
15
+ <KolAvatar _label="Elke Mustermann " />
16
+ <KolAvatar _label="Marianne" />
17
+ </div>
18
+ </>
12
19
  );
package/src/components/badge/basic.tsx CHANGED
@@ -2,17 +2,24 @@ import React from 'react';
2
2
  import { KolBadge } from '@public-ui/react';
3
3
 
4
4
  import { FC } from 'react';
5
+ import { SampleDescription } from '../SampleDescription';
5
6
 
6
7
  const PROPS = {
7
8
  _label: 'Label',
8
9
  };
9
10
 
10
11
  export const BadgeBasic: FC = () => (
11
- <div className="flex gap-2">
12
- <KolBadge {...PROPS}></KolBadge>
13
- <KolBadge _color="#86ffc6" {...PROPS}></KolBadge>
14
- <KolBadge _color="#06539e" {...PROPS}></KolBadge>
15
- <KolBadge _color="#ae0000" {...PROPS}></KolBadge>
16
- <KolBadge _color="#8b008b" {...PROPS}></KolBadge>
17
- </div>
12
+ <>
13
+ <SampleDescription>
14
+ <p>KolBadge shows badges with a label, background color and optional icon.</p>
15
+ </SampleDescription>
16
+
17
+ <div className="flex gap-2">
18
+ <KolBadge {...PROPS}></KolBadge>
19
+ <KolBadge _color="#86ffc6" {...PROPS}></KolBadge>
20
+ <KolBadge _color="#06539e" {...PROPS}></KolBadge>
21
+ <KolBadge _color="#ae0000" {...PROPS}></KolBadge>
22
+ <KolBadge _color="#8b008b" {...PROPS}></KolBadge>
23
+ </div>
24
+ </>
18
25
  );
package/src/components/badge/button.tsx CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import { KolBadge, KolHeading } from '@public-ui/react';
3
3
 
4
4
  import { FC } from 'react';
5
+ import { SampleDescription } from '../SampleDescription';
5
6
 
6
7
  const createBadgeProps = (label: string) => ({
7
8
  _smartButton: {
@@ -15,6 +16,12 @@ const createBadgeProps = (label: string) => ({
15
16
 
16
17
  export const BadgeButton: FC = () => (
17
18
  <>
19
+ <SampleDescription>
20
+ <p>
21
+ 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.
22
+ </p>
23
+ </SampleDescription>
24
+
18
25
  <div className="mb-4">
19
26
  <KolHeading _label="Badge" _level={2} />
20
27
  </div>
package/src/components/breadcrumb/basic.tsx CHANGED
@@ -2,52 +2,59 @@ import React from 'react';
2
2
  import { KolBreadcrumb } from '@public-ui/react';
3
3
 
4
4
  import { FC } from 'react';
5
+ import { SampleDescription } from '../SampleDescription';
5
6
 
6
7
  export const BreadcrumbBasic: FC = () => (
7
- <div className="grid gap-4">
8
- <KolBreadcrumb
9
- _ariaLabel="Breadcrumb aus Text-Links"
10
- _links={[
11
- { _label: 'Startseite', _href: '#/back-page' },
12
- { _label: 'Unterseite der Startseite', _href: '#/back-page' },
13
- {
14
- _label: 'Unterseite der Unterseite',
15
- _href: '#/back-page',
16
- },
17
- ]}
18
- ></KolBreadcrumb>
19
- <KolBreadcrumb
20
- _ariaLabel="Breadcrumb aus Icons- oder Text-Links"
21
- _links={[
22
- {
23
- _label: 'Startseite',
24
- _icons: 'codicon codicon-home',
25
- _hideLabel: true,
26
- _href: '#/back-page',
27
- },
28
- {
29
- _label: 'Unterseite der Startseite mit sehr langem Link-Test',
30
- _href: '#/back-page',
31
- },
32
- {
33
- _label: 'Unterseite der Unterseite',
34
- _href: '#/back-page',
35
- },
36
- ]}
37
- ></KolBreadcrumb>
38
- <KolBreadcrumb
39
- _ariaLabel="Breadcrumb aus Icons- und Text-Links"
40
- _links={[
41
- { _label: 'Startseite', _icons: 'codicon codicon-home', _href: '#/back-page' },
42
- {
43
- _label: 'Unterseite der Startseite und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen',
44
- _href: '#/back-page',
45
- },
46
- {
47
- _label: 'Unterseite der Unterseite',
48
- _href: '#/back-page',
49
- },
50
- ]}
51
- ></KolBreadcrumb>
52
- </div>
8
+ <>
9
+ <SampleDescription>
10
+ <p>KolBreadcrumb shows a breadcrumb navigation. The sample illustrates a variation of link, text and icon elements.</p>
11
+ </SampleDescription>
12
+
13
+ <div className="grid gap-4">
14
+ <KolBreadcrumb
15
+ _ariaLabel="Breadcrumb aus Text-Links"
16
+ _links={[
17
+ { _label: 'Startseite', _href: '#/back-page' },
18
+ { _label: 'Unterseite der Startseite', _href: '#/back-page' },
19
+ {
20
+ _label: 'Unterseite der Unterseite',
21
+ _href: '#/back-page',
22
+ },
23
+ ]}
24
+ ></KolBreadcrumb>
25
+ <KolBreadcrumb
26
+ _ariaLabel="Breadcrumb aus Icons- oder Text-Links"
27
+ _links={[
28
+ {
29
+ _label: 'Startseite',
30
+ _icons: 'codicon codicon-home',
31
+ _hideLabel: true,
32
+ _href: '#/back-page',
33
+ },
34
+ {
35
+ _label: 'Unterseite der Startseite mit sehr langem Link-Test',
36
+ _href: '#/back-page',
37
+ },
38
+ {
39
+ _label: 'Unterseite der Unterseite',
40
+ _href: '#/back-page',
41
+ },
42
+ ]}
43
+ ></KolBreadcrumb>
44
+ <KolBreadcrumb
45
+ _ariaLabel="Breadcrumb aus Icons- und Text-Links"
46
+ _links={[
47
+ { _label: 'Startseite', _icons: 'codicon codicon-home', _href: '#/back-page' },
48
+ {
49
+ _label: 'Unterseite der Startseite und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen',
50
+ _href: '#/back-page',
51
+ },
52
+ {
53
+ _label: 'Unterseite der Unterseite',
54
+ _href: '#/back-page',
55
+ },
56
+ ]}
57
+ ></KolBreadcrumb>
58
+ </div>
59
+ </>
53
60
  );
package/src/components/button/basic.tsx CHANGED
@@ -1,5 +1,16 @@
1
- import React, { FC } from 'react';
1
+ import type { FC } from 'react';
2
+ import React from 'react';
2
3
  import { FocusElement } from '../FocusInput';
3
4
  import { ButtonVariants } from './partials/variants';
5
+ import { SampleDescription } from '../SampleDescription';
4
6
 
5
- export const ButtonBasic: FC = () => <FocusElement RefComponent={ButtonVariants} />;
7
+ export const ButtonBasic: FC = () => (
8
+ <>
9
+ <SampleDescription>
10
+ <p>
11
+ KolButton shows a button-element. This sample demonstrates the basic usage with its different styling variants, icons, disabled state and hidden labels.
12
+ </p>
13
+ </SampleDescription>
14
+ <FocusElement RefComponent={ButtonVariants} />
15
+ </>
16
+ );
package/src/components/button/icons.tsx CHANGED
@@ -2,26 +2,33 @@ import React from 'react';
2
2
  import { KolButton } from '@public-ui/react';
3
3
 
4
4
  import { FC } from 'react';
5
+ import { SampleDescription } from '../SampleDescription';
5
6
 
6
7
  export const ButtonIcons: FC = () => (
7
- <KolButton
8
- _icons={{
9
- bottom: 'codicon codicon-arrow-down',
10
- left: {
11
- icon: 'codicon codicon-arrow-left',
12
- },
13
- top: {
14
- style: {
15
- 'font-size': '200%',
16
- transform: 'rotate(45deg)',
8
+ <>
9
+ <SampleDescription>
10
+ <p>This sample shows KolButton with icons in all alignments.</p>
11
+ </SampleDescription>
12
+
13
+ <KolButton
14
+ _icons={{
15
+ bottom: 'codicon codicon-arrow-down',
16
+ left: {
17
+ icon: 'codicon codicon-arrow-left',
18
+ },
19
+ top: {
20
+ style: {
21
+ 'font-size': '200%',
22
+ transform: 'rotate(45deg)',
23
+ },
24
+ icon: 'codicon codicon-arrow-up',
17
25
  },
18
- icon: 'codicon codicon-arrow-up',
19
- },
20
- right: 'codicon codicon-arrow-right',
21
- }}
22
- _label="Label"
23
- _on={{
24
- onClick: (_event, _value) => alert('Klick!'),
25
- }}
26
- />
26
+ right: 'codicon codicon-arrow-right',
27
+ }}
28
+ _label="Label"
29
+ _on={{
30
+ onClick: (_event, _value) => alert('Klick!'),
31
+ }}
32
+ />
33
+ </>
27
34
  );
package/src/components/button/routes.ts CHANGED
@@ -2,8 +2,6 @@ import { Routes } from '../../shares/types';
2
2
 
3
3
  import { ButtonBasic } from './basic';
4
4
 
5
- import { ButtonIconOnly } from './hide-label';
6
-
7
5
  import { ButtonIcons } from './icons';
8
6
 
9
7
  import { ButtonWidth } from './width';
@@ -11,7 +9,6 @@ import { ButtonWidth } from './width';
11
9
  export const BUTTON_ROUTES: Routes = {
12
10
  button: {
13
11
  basic: ButtonBasic,
14
- 'hide-label': ButtonIconOnly,
15
12
  icons: ButtonIcons,
16
13
  width: ButtonWidth,
17
14
  },