@public-ui/sample-react 2.1.7 → 2.1.8

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 (160) hide show
  1. package/dist/1487.js +1 -1
  2. package/dist/1636.js +1 -1
  3. package/dist/1792.js +1 -1
  4. package/dist/1795.js +1 -1
  5. package/dist/2017.js +1 -1
  6. package/dist/2322.js +1 -1
  7. package/dist/2538.js +1 -1
  8. package/dist/2567.js +1 -1
  9. package/dist/263.js +1 -1
  10. package/dist/2719.js +1 -1
  11. package/dist/3064.js +1 -1
  12. package/dist/3077.js +1 -1
  13. package/dist/3238.js +1 -1
  14. package/dist/3301.js +2 -0
  15. package/dist/3395.js +1 -1
  16. package/dist/35.js +1 -1
  17. package/dist/3521.js +1 -1
  18. package/dist/356.js +1 -1
  19. package/dist/3714.js +1 -1
  20. package/dist/3735.js +1 -1
  21. package/dist/3766.js +1 -1
  22. package/dist/3994.js +1 -1
  23. package/dist/4025.js +1 -1
  24. package/dist/4065.js +2 -0
  25. package/dist/4118.js +1 -1
  26. package/dist/4182.js +1 -1
  27. package/dist/4188.js +1 -1
  28. package/dist/4332.js +1 -1
  29. package/dist/4402.js +1 -1
  30. package/dist/4795.js +2 -0
  31. package/dist/4818.js +1 -1
  32. package/dist/4892.js +1 -1
  33. package/dist/4933.js +1 -1
  34. package/dist/4943.js +1 -1
  35. package/dist/495.js +1 -1
  36. package/dist/5034.js +1 -1
  37. package/dist/5056.js +1 -1
  38. package/dist/5138.js +1 -1
  39. package/dist/5296.js +1 -1
  40. package/dist/5356.js +1 -1
  41. package/dist/5551.js +1 -1
  42. package/dist/5835.js +1 -1
  43. package/dist/5840.js +1 -1
  44. package/dist/5889.js +1 -1
  45. package/dist/5912.js +1 -1
  46. package/dist/6082.js +1 -1
  47. package/dist/6099.js +1 -1
  48. package/dist/6181.js +1 -1
  49. package/dist/619.js +1 -1
  50. package/dist/6671.js +1 -1
  51. package/dist/6775.js +1 -1
  52. package/dist/7274.js +1 -1
  53. package/dist/7440.js +2 -0
  54. package/dist/7795.js +1 -1
  55. package/dist/7802.js +1 -1
  56. package/dist/7860.js +1 -1
  57. package/dist/8092.js +1 -1
  58. package/dist/8111.js +1 -1
  59. package/dist/8146.js +1 -1
  60. package/dist/8427.js +1 -1
  61. package/dist/8495.js +1 -1
  62. package/dist/8672.js +1 -1
  63. package/dist/8737.js +1 -1
  64. package/dist/8786.js +1 -1
  65. package/dist/8796.js +1 -1
  66. package/dist/8977.js +1 -1
  67. package/dist/9333.js +1 -1
  68. package/dist/9389.js +1 -1
  69. package/dist/9561.js +1 -1
  70. package/dist/9599.js +1 -1
  71. package/dist/9612.js +1 -1
  72. package/dist/9890.js +1 -1
  73. package/dist/index.html +1 -1
  74. package/dist/main.css +3 -3
  75. package/dist/main.js +1 -1
  76. package/dist/main.js.LICENSE.txt +2 -2
  77. package/package.json +16 -16
  78. package/public/index.html +1 -1
  79. package/src/@shared/_mixins.scss +3 -0
  80. package/src/App.tsx +1 -1
  81. package/src/components/FormWrap.tsx +1 -1
  82. package/src/components/Navigation.tsx +63 -0
  83. package/src/components/Sidebar.tsx +5 -41
  84. package/src/components/abbr/basic.tsx +12 -12
  85. package/src/components/alert/card-msg.tsx +3 -1
  86. package/src/components/alert/html.tsx +4 -2
  87. package/src/components/button/access-key.tsx +34 -25
  88. package/src/components/button/aria-description.tsx +20 -11
  89. package/src/components/button/baselined.tsx +22 -13
  90. package/src/components/button/icons.tsx +33 -26
  91. package/src/components/button/partials/cases.tsx +13 -6
  92. package/src/components/button/partials/variants.tsx +15 -17
  93. package/src/components/button/width.tsx +33 -28
  94. package/src/components/button-group/basic.tsx +25 -16
  95. package/src/components/button-link/basic.tsx +3 -3
  96. package/src/components/button-link/image.tsx +0 -1
  97. package/src/components/card/basic.tsx +1 -1
  98. package/src/components/combobox/partials/variants.tsx +1 -1
  99. package/src/components/details/basic.tsx +2 -2
  100. package/src/components/form/basic.tsx +1 -1
  101. package/src/components/form/error-list.tsx +1 -0
  102. package/src/components/handout/basic.tsx +304 -279
  103. package/src/components/input-checkbox/partials/variants.tsx +22 -10
  104. package/src/components/input-date/reset.tsx +1 -1
  105. package/src/components/input-password/show-password.tsx +1 -1
  106. package/src/components/input-text/partials/cases.tsx +1 -1
  107. package/src/components/input-text/routes.ts +2 -0
  108. package/src/components/input-text/smart-button.tsx +33 -0
  109. package/src/components/input-text/text-formatter.tsx +98 -45
  110. package/src/components/link/image.tsx +0 -1
  111. package/src/components/link/target.tsx +1 -1
  112. package/src/components/modal/basic.tsx +1 -1
  113. package/src/components/nav/basic.tsx +23 -12
  114. package/src/components/nav/horizontal.tsx +12 -3
  115. package/src/components/nav/links.ts +36 -0
  116. package/src/components/table/column-alignment.tsx +64 -62
  117. package/src/components/table/complex-headers.tsx +80 -78
  118. package/src/components/table/horizontal-scrollbar.tsx +30 -28
  119. package/src/components/table/interactive-child-elements.tsx +81 -69
  120. package/src/components/table/pagination-position.tsx +15 -13
  121. package/src/components/table/render-cell.tsx +14 -3
  122. package/src/components/table/sort-data.tsx +11 -8
  123. package/src/components/table/stateful-with-selection.tsx +47 -27
  124. package/src/components/table/stateful-with-single-selection.tsx +47 -27
  125. package/src/components/table/stateless-with-selection.tsx +37 -17
  126. package/src/components/table/stateless-with-single-selection.tsx +37 -17
  127. package/src/components/table/stateless.tsx +29 -27
  128. package/src/components/table/with-footer.tsx +1 -0
  129. package/src/components/table/with-pagination.tsx +1 -1
  130. package/src/components/tabs/behavior.tsx +61 -0
  131. package/src/components/tabs/routes.ts +2 -0
  132. package/src/components/textarea/adjust-height.tsx +1 -1
  133. package/src/components/textarea/counter.tsx +4 -1
  134. package/src/components/textarea/resize.tsx +1 -1
  135. package/src/components/textarea/rows.tsx +1 -1
  136. package/src/components/toast/basic.tsx +13 -11
  137. package/src/hooks/useToasterService.ts +21 -0
  138. package/src/react.main.tsx +6 -1
  139. package/src/scenarios/appointment-form/AppointmentForm.tsx +1 -0
  140. package/src/scenarios/custom-tooltip-width.tsx +26 -11
  141. package/src/scenarios/disabled-interactive-elements.tsx +123 -114
  142. package/src/scenarios/focus-elements.tsx +21 -16
  143. package/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx +1 -1
  144. package/src/scenarios/horizontal-scrollbar-advanced/layout.scss +19 -0
  145. package/src/scenarios/input-group-with-error.tsx +41 -0
  146. package/src/scenarios/inputs-get-value.tsx +121 -119
  147. package/src/scenarios/routes.ts +4 -2
  148. package/src/scenarios/static-form.tsx +65 -62
  149. package/src/style.scss +10 -13
  150. package/tsconfig.json +1 -2
  151. package/unocss.config.ts +213 -0
  152. package/dist/3171.js +0 -2
  153. package/dist/4262.js +0 -2
  154. package/dist/479.js +0 -2
  155. package/dist/8710.js +0 -2
  156. package/src/scenarios/horizontal-scrollbar-advanced/layout.css +0 -31
  157. /package/dist/{3171.js.LICENSE.txt → 3301.js.LICENSE.txt} +0 -0
  158. /package/dist/{4262.js.LICENSE.txt → 4065.js.LICENSE.txt} +0 -0
  159. /package/dist/{479.js.LICENSE.txt → 4795.js.LICENSE.txt} +0 -0
  160. /package/dist/{8710.js.LICENSE.txt → 7440.js.LICENSE.txt} +0 -0
package/dist/main.js.LICENSE.txt CHANGED
@@ -33,7 +33,7 @@
33
33
  */
34
34
 
35
35
  /**
36
- * @remix-run/router v1.19.0
36
+ * @remix-run/router v1.19.2
37
37
  *
38
38
  * Copyright (c) Remix Software Inc.
39
39
  *
@@ -44,7 +44,7 @@
44
44
  */
45
45
 
46
46
  /**
47
- * React Router v6.26.0
47
+ * React Router v6.26.2
48
48
  *
49
49
  * Copyright (c) Remix Software Inc.
50
50
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/sample-react",
3
- "version": "2.1.7",
3
+ "version": "2.1.8",
4
4
  "description": "This app contains samples for the KoliBri/Public UI",
5
5
  "license": "EUPL-1.2",
6
6
  "repository": {
@@ -11,34 +11,34 @@
11
11
  "@leanup/stack": "1.3.54",
12
12
  "@leanup/stack-react": "1.3.54",
13
13
  "@leanup/stack-webpack": "1.3.54",
14
- "@types/node": "ts5.4",
15
- "@types/react": "18.3.3",
14
+ "@playwright/test": "1.47.2",
15
+ "@types/node": "ts5.6",
16
+ "@types/react": "18.3.4",
16
17
  "@types/react-dom": "18.3.0",
17
18
  "@unocss/preset-uno": "0.58.9",
18
19
  "@unocss/webpack": "0.58.9",
20
+ "adopted-style-sheets": "1.1.5-rc.4",
19
21
  "ajv": "8.17.1",
20
- "chromedriver": "124.0.4",
22
+ "chromedriver": "129.0.0",
21
23
  "cpy-cli": "5.0.0",
22
- "eslint-plugin-jsx-a11y": "6.9.0",
23
- "eslint-plugin-react": "7.35.0",
24
+ "eslint-plugin-jsx-a11y": "6.10.0",
25
+ "eslint-plugin-react": "7.36.1",
24
26
  "formik": "2.4.6",
25
27
  "nightwatch-axe-verbose": "2.3.1",
26
28
  "npm-run-all": "4.1.5",
27
29
  "react": "18.3.1",
28
30
  "react-dom": "18.3.1",
29
- "react-router": "6.26.0",
30
- "react-router-dom": "6.26.0",
31
- "rimraf": "5.0.10",
31
+ "react-number-format": "5.4.2",
32
+ "react-router": "6.26.2",
33
+ "react-router-dom": "6.26.2",
34
+ "rimraf": "6.0.1",
32
35
  "ts-prune": "0.10.3",
33
- "typescript": "5.5.4",
36
+ "typescript": "5.6.2",
34
37
  "world_countries_lists": "2.9.0",
35
38
  "yup": "1.4.0",
36
- "@public-ui/components": "2.1.7",
37
- "@public-ui/react": "2.1.7",
38
- "@public-ui/themes": "2.1.7"
39
- },
40
- "devDependencies": {
41
- "@playwright/test": "1.45.3"
39
+ "@public-ui/components": "2.1.8",
40
+ "@public-ui/react": "2.1.8",
41
+ "@public-ui/themes": "2.1.8"
42
42
  },
43
43
  "files": [
44
44
  ".eslintignore",
package/public/index.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <!doctype html>
2
- <html lang="de" dir="ltr">
2
+ <html lang="en" dir="ltr">
3
3
  <head>
4
4
  <title>Code-Samples | KoliBri – Public UI</title>
5
5
  <meta charset="UTF-8" />
package/src/@shared/_mixins.scss ADDED
@@ -0,0 +1,3 @@
1
+ @function rem($size) {
2
+ @return calc(#{$size}rem / var(--kolibri-root-font-size, 16));
3
+ }
package/src/App.tsx CHANGED
@@ -138,7 +138,7 @@ export const App: FC = () => {
138
138
  />
139
139
  )}
140
140
 
141
- <main className="p-4" id="route-container">
141
+ <main className="flex flex-col items-start p-4" id="route-container">
142
142
  {!hideMenus && isDraftTheme(theme) && <KolBadge className="block mb-3" _label="DRAFT" _color="#db5461" />}
143
143
  <Routes>
144
144
  {ROUTE_TREE}
package/src/components/FormWrap.tsx CHANGED
@@ -4,7 +4,7 @@ import { KolButton, KolForm } from '@public-ui/react';
4
4
 
5
5
  export const FormWrap = <P,>({ RefComponent: Component, ...props }: { RefComponent: any } & Partial<P>) => {
6
6
  return (
7
- <KolForm>
7
+ <KolForm className="w-full">
8
8
  <div className="grid gap-4">
9
9
  <Component {...props} />
10
10
  <div className="flex gap-4">
package/src/components/Navigation.tsx ADDED
@@ -0,0 +1,63 @@
1
+ import * as React from 'react';
2
+ import { KolAccordion, KolTree, KolTreeItem } from '@public-ui/react';
3
+ import { useMobile } from '../hooks/useMobile';
4
+ import type { Routes, Route } from '../shares/types';
5
+ import { useHref, useMatch, useResolvedPath } from 'react-router-dom';
6
+
7
+ type NavigationProps = {
8
+ routes: Routes;
9
+ };
10
+
11
+ function ComponentNavContainer({ children }: { children?: React.ReactNode }): React.ReactNode {
12
+ const isMobile = useMobile();
13
+
14
+ return isMobile ? (
15
+ <KolAccordion _label="All components" class="mt">
16
+ {children}
17
+ </KolAccordion>
18
+ ) : (
19
+ <div className="mt scrollable-container">{children}</div>
20
+ );
21
+ }
22
+
23
+ function TreeItem({ label, to, children }: any) {
24
+ const href = useHref(to);
25
+ const resolved = useResolvedPath(to);
26
+ const match = useMatch({ path: resolved.pathname, end: true });
27
+
28
+ return (
29
+ <KolTreeItem _label={label} _href={href} _active={!!match}>
30
+ {children}
31
+ </KolTreeItem>
32
+ );
33
+ }
34
+
35
+ function Navigation({ routes }: NavigationProps): React.ReactNode {
36
+ const buildSubTree = (parentName: string, children: Route) => {
37
+ return Object.keys(children).map((childName) => {
38
+ const isTreeExample = parentName === 'tree' && childName === 'basic/:subPage';
39
+ const subPathName = isTreeExample ? 'basic/home' : childName;
40
+ const label = isTreeExample ? 'basic' : childName;
41
+
42
+ return <TreeItem key={[parentName, childName].join('/')} label={label} to={[parentName, subPathName].join('/')}></TreeItem>;
43
+ });
44
+ };
45
+
46
+ const parentTreeElements = Object.entries(routes).map(([parentName, children]) => (
47
+ <TreeItem key={parentName} label={parentName} to={parentName}>
48
+ {buildSubTree(parentName, children)}
49
+ </TreeItem>
50
+ ));
51
+
52
+ return (
53
+ <ComponentNavContainer>
54
+ <nav>
55
+ <KolTree _label="Navigation" class="block">
56
+ {parentTreeElements}
57
+ </KolTree>
58
+ </nav>
59
+ </ComponentNavContainer>
60
+ );
61
+ }
62
+
63
+ export default Navigation;
package/src/components/Sidebar.tsx CHANGED
@@ -1,12 +1,12 @@
1
- import type { FC, PropsWithChildren } from 'react';
1
+ import type { FC } from 'react';
2
2
  import React from 'react';
3
3
 
4
- import { KolAccordion, KolButton, KolHeading, KolLink, KolSelect, KolVersion } from '@public-ui/react';
4
+ import { KolButton, KolHeading, KolSelect, KolVersion } from '@public-ui/react';
5
5
 
6
- import { useMobile } from '../hooks/useMobile';
7
6
  import { THEME_OPTIONS } from '../shares/theme';
8
7
 
9
8
  import type { Routes } from '../shares/types';
9
+ import Navigation from './Navigation';
10
10
  type Props = {
11
11
  version: string;
12
12
  theme: string;
@@ -18,17 +18,8 @@ type Props = {
18
18
  onThemeChange: (theme: unknown) => void;
19
19
  };
20
20
 
21
- const ComponentNavContainer = ({ children, isMobile }: PropsWithChildren<{ isMobile: boolean }>) =>
22
- isMobile ? (
23
- <KolAccordion _label="Alle Komponenten" class="mt">
24
- {children}
25
- </KolAccordion>
26
- ) : (
27
- <div className="mt scrollable-container">{children}</div>
28
- );
29
21
  export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample, buildDate, commitHash, onThemeChange }) => {
30
22
  /* KolSelect calls onChange initially by design - work around this with a state variable */
31
- const isMobile = useMobile();
32
23
 
33
24
  const getIndexOfSample = () => routeList.indexOf(sample);
34
25
  const formatSampleAsLabel = () => sample.replace(/\//g, ' ');
@@ -37,11 +28,6 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
37
28
  onThemeChange((value as [string])[0]);
38
29
  };
39
30
 
40
- const handleLinkClick = (event: Event) => {
41
- location.replace((event.target as HTMLLinkElement).href); // KoliBri prevents the default click behavior as soon as an event listener is set, so we need to reimplement it.
42
- document.querySelector('#route-container')?.scrollIntoView({ behavior: 'smooth' });
43
- };
44
-
45
31
  const handlePreviousClick = () => {
46
32
  const currentIndex = getIndexOfSample();
47
33
  const nextIndex = currentIndex <= 0 ? routeList.length - 1 : currentIndex - 1;
@@ -74,35 +60,13 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
74
60
  <KolHeading _label="Components" _level={2} className="block mt"></KolHeading>
75
61
  <div className="flex flex-justify-between flex-items-center mt">
76
62
  <KolButton _icons="codicon codicon-arrow-left" _hideLabel _label="Previous component" _on={{ onClick: handlePreviousClick }} />
77
- <span className="text-center">
63
+ <span className="text-base text-center">
78
64
  {formatSampleAsLabel()} ({getIndexOfSample() + 1}/{routeList.length})
79
65
  </span>
80
66
  <KolButton _icons="codicon codicon-arrow-right" _hideLabel _label="Next component" _on={{ onClick: handleNextClick }} />
81
67
  </div>
82
68
 
83
- <ComponentNavContainer isMobile={isMobile}>
84
- <nav>
85
- <ul className="m0 p0 list-inside">
86
- {Object.entries(routes).map(([parentName, children]) => (
87
- <li key={parentName} className="mt-2">
88
- {parentName}
89
- <ul className="list-inside ml p0">
90
- {Object.keys(children).map((childName) => (
91
- <li key={`${parentName}/${childName}`}>
92
- {/* Handle special case for nested routes in tree example - this might need a proper refactoring in the future */}
93
- {parentName === 'tree' && childName === 'basic/:subPage' ? (
94
- <KolLink _label="basic" _href={`#/${parentName}/basic/home`} _on={{ onClick: handleLinkClick }} />
95
- ) : (
96
- <KolLink _label={childName} _href={`#/${parentName}/${childName}`} _on={{ onClick: handleLinkClick }} />
97
- )}
98
- </li>
99
- ))}
100
- </ul>
101
- </li>
102
- ))}
103
- </ul>
104
- </nav>
105
- </ComponentNavContainer>
69
+ <Navigation routes={routes} />
106
70
  </div>
107
71
  </aside>
108
72
  );
package/src/components/abbr/basic.tsx CHANGED
@@ -14,32 +14,32 @@ export const AbbrBasic: FC = () => (
14
14
  I am <KolAbbr _label="zum Beispiel">e.g.</KolAbbr> an abbreviation.
15
15
  </p>
16
16
  <p>
17
- I am{' '}
17
+ I am&nbsp;
18
18
  <KolAbbr _label="zum Beispiel" _tooltipAlign="right">
19
19
  e.g.
20
- </KolAbbr>{' '}
21
- an abbreviation (right).
20
+ </KolAbbr>
21
+ &nbsp;an abbreviation (right).
22
22
  </p>
23
23
  <p>
24
- I am{' '}
24
+ I am&nbsp;
25
25
  <KolAbbr _label="zum Beispiel" _tooltipAlign="bottom">
26
26
  e.g.
27
- </KolAbbr>{' '}
28
- an abbreviation (below).
27
+ </KolAbbr>
28
+ &nbsp;an abbreviation (below).
29
29
  </p>
30
30
  <p>
31
- I am{' '}
31
+ I am&nbsp;
32
32
  <KolAbbr _label="zum Beispiel" _tooltipAlign="left">
33
33
  e.g.
34
- </KolAbbr>{' '}
35
- an abbreviation (left).
34
+ </KolAbbr>
35
+ &nbsp;an abbreviation (left).
36
36
  </p>
37
37
  <p>
38
- I am{' '}
38
+ I am&nbsp;
39
39
  <KolAbbr _label="zum Beispiel" _tooltipAlign="top">
40
40
  e.g.
41
- </KolAbbr>{' '}
42
- an abbreviation (top).
41
+ </KolAbbr>
42
+ &nbsp;an abbreviation (top).
43
43
  </p>
44
44
  </>
45
45
  );
package/src/components/alert/card-msg.tsx CHANGED
@@ -13,6 +13,8 @@ export const AlertCardMsg: FC = () => (
13
13
  </p>
14
14
  </SampleDescription>
15
15
 
16
- <AlertVariants variant="card" />
16
+ <section className="w-full">
17
+ <AlertVariants variant="card" />
18
+ </section>
17
19
  </>
18
20
  );
package/src/components/alert/html.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
 
3
- import { KolAlert } from '@public-ui/react';
3
+ import { KolAlert, KolHeading } from '@public-ui/react';
4
4
  import { SampleDescription } from '../SampleDescription';
5
5
  import type { FC } from 'react';
6
6
 
@@ -12,7 +12,9 @@ export const AlertHtml: FC = () => (
12
12
 
13
13
  <div>
14
14
  <KolAlert _label="Output of HTML code in the alert" _type="info">
15
- <h2 className="mt-2 mb-3">An H2 heading is output here</h2>
15
+ <div className="mt-2 mb-3">
16
+ <KolHeading _level={2} _label="An H2 heading is output here" />
17
+ </div>
16
18
  <div className="grid gap-4 sm:grid-cols-2">
17
19
  <div>
18
20
  <h3>Text in a left-hand column</h3>
package/src/components/button/access-key.tsx CHANGED
@@ -2,30 +2,39 @@ 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';
5
+ import { useToasterService } from '../../hooks/useToasterService';
5
6
 
6
- export const ButtonAccessKey: FC = () => (
7
- <>
8
- <SampleDescription>
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>
14
- </SampleDescription>
7
+ export const ButtonAccessKey: FC = () => {
8
+ const { dummyClickEventHandler } = useToasterService();
15
9
 
16
- <div className="flex flex-wrap gap-4">
17
- <KolButton _label="With S access key" _accessKey="S"></KolButton>
18
- <KolButton _label="Very small s" _accessKey="s"></KolButton>
19
- <KolButton _label="Access key does not appear in label" _accessKey="x"></KolButton>
20
- <KolButton _label="access key without label" _hideLabel _accessKey="s" _icons="codicon codicon-dashboard"></KolButton>
21
- <KolButton
22
- _label="with inline icons"
23
- _icons={{
24
- left: 'codicon codicon-dashboard',
25
- right: 'codicon codicon-dashboard',
26
- }}
27
- _accessKey="s"
28
- />
29
- </div>
30
- </>
31
- );
10
+ const dummyEventHandler = {
11
+ onClick: dummyClickEventHandler,
12
+ };
13
+
14
+ return (
15
+ <>
16
+ <SampleDescription>
17
+ <p>
18
+ This sample shows KolButton with{' '}
19
+ <KolLink _label="access keys" _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey" _target="blank" />. The access
20
+ keys can be used to trigger the buttons using the keyboard.
21
+ </p>
22
+ </SampleDescription>
23
+
24
+ <div className="flex flex-wrap gap-4">
25
+ <KolButton _label="With S access key" _accessKey="S" _on={dummyEventHandler}></KolButton>
26
+ <KolButton _label="Very small s" _accessKey="s" _on={dummyEventHandler}></KolButton>
27
+ <KolButton _label="Access key does not appear in label" _accessKey="x" _on={dummyEventHandler}></KolButton>
28
+ <KolButton _label="access key without label" _hideLabel _accessKey="s" _icons="codicon codicon-dashboard" _on={dummyEventHandler}></KolButton>
29
+ <KolButton
30
+ _label="with inline icons"
31
+ _icons={{
32
+ left: 'codicon codicon-dashboard',
33
+ right: 'codicon codicon-dashboard',
34
+ }}
35
+ _accessKey="s"
36
+ />
37
+ </div>
38
+ </>
39
+ );
40
+ };
package/src/components/button/aria-description.tsx CHANGED
@@ -2,16 +2,25 @@ import { KolButton } from '@public-ui/react';
2
2
  import React from 'react';
3
3
  import type { FC } from 'react';
4
4
  import { SampleDescription } from '../SampleDescription';
5
+ import { useToasterService } from '../../hooks/useToasterService';
5
6
 
6
- export const ButtonAriaDescription: FC = () => (
7
- <>
8
- <SampleDescription>
9
- <p>This sample shows KolButton with aria-description</p>
10
- </SampleDescription>
7
+ export const ButtonAriaDescription: FC = () => {
8
+ const { dummyClickEventHandler } = useToasterService();
11
9
 
12
- <div className="flex flex-wrap gap-4">
13
- <KolButton _label="Button Text without area description"></KolButton>
14
- <KolButton _label="Button Text" _ariaDescription="Button Area Description"></KolButton>
15
- </div>
16
- </>
17
- );
10
+ const dummyEventHandler = {
11
+ onClick: dummyClickEventHandler,
12
+ };
13
+
14
+ return (
15
+ <>
16
+ <SampleDescription>
17
+ <p>This sample shows KolButton with aria-description</p>
18
+ </SampleDescription>
19
+
20
+ <div className="flex flex-wrap gap-4">
21
+ <KolButton _label="Button Text without area description" _on={dummyEventHandler}></KolButton>
22
+ <KolButton _label="Button Text" _ariaDescription="Button Area Description" _on={dummyEventHandler}></KolButton>
23
+ </div>
24
+ </>
25
+ );
26
+ };
package/src/components/button/baselined.tsx CHANGED
@@ -4,18 +4,27 @@ import { KolButton } from '@public-ui/react';
4
4
 
5
5
  import type { FC } from 'react';
6
6
  import { SampleDescription } from '../SampleDescription';
7
+ import { useToasterService } from '../../hooks/useToasterService';
7
8
 
8
- export const ButtonBaselined: FC = () => (
9
- <>
10
- <SampleDescription>
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
- </SampleDescription>
9
+ export const ButtonBaselined: FC = () => {
10
+ const { dummyClickEventHandler } = useToasterService();
13
11
 
14
- <div className="inline-block">
15
- <KolButton _label="Label-Text"></KolButton>
16
- <KolButton _label="Label-Text"></KolButton>
17
- <KolButton _label="Label-Text"></KolButton>
18
- <KolButton _icons="codicon codicon-reactions" _label="Label-Text with Icon"></KolButton>
19
- </div>
20
- </>
21
- );
12
+ const dummyEventHandler = {
13
+ onClick: dummyClickEventHandler,
14
+ };
15
+
16
+ return (
17
+ <>
18
+ <SampleDescription>
19
+ <p>This KolButton sample is used for internal testing purposes: It features multiple buttons with and without icons which are vertically aligned.</p>
20
+ </SampleDescription>
21
+
22
+ <div className="flex">
23
+ <KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>
24
+ <KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>
25
+ <KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>
26
+ <KolButton _icons="codicon codicon-reactions" _label="Label-Text with Icon" _on={dummyEventHandler}></KolButton>
27
+ </div>
28
+ </>
29
+ );
30
+ };
package/src/components/button/icons.tsx CHANGED
@@ -4,32 +4,39 @@ import { KolButton } from '@public-ui/react';
4
4
 
5
5
  import type { FC } from 'react';
6
6
  import { SampleDescription } from '../SampleDescription';
7
+ import { useToasterService } from '../../hooks/useToasterService';
7
8
 
8
- export const ButtonIcons: FC = () => (
9
- <>
10
- <SampleDescription>
11
- <p>This sample shows KolButton with icons in all alignments.</p>
12
- </SampleDescription>
9
+ export const ButtonIcons: FC = () => {
10
+ const { dummyClickEventHandler } = useToasterService();
13
11
 
14
- <KolButton
15
- _icons={{
16
- bottom: 'codicon codicon-arrow-down',
17
- left: {
18
- icon: 'codicon codicon-arrow-left',
19
- },
20
- top: {
21
- style: {
22
- 'font-size': '200%',
23
- transform: 'rotate(45deg)',
12
+ const dummyEventHandler = {
13
+ onClick: dummyClickEventHandler,
14
+ };
15
+
16
+ return (
17
+ <>
18
+ <SampleDescription>
19
+ <p>This sample shows KolButton with icons in all alignments.</p>
20
+ </SampleDescription>
21
+
22
+ <KolButton
23
+ _icons={{
24
+ bottom: 'codicon codicon-arrow-down',
25
+ left: {
26
+ icon: 'codicon codicon-arrow-left',
27
+ },
28
+ top: {
29
+ style: {
30
+ 'font-size': '200%',
31
+ transform: 'rotate(45deg)',
32
+ },
33
+ icon: 'codicon codicon-arrow-up',
24
34
  },
25
- icon: 'codicon codicon-arrow-up',
26
- },
27
- right: 'codicon codicon-arrow-right',
28
- }}
29
- _label="Label"
30
- _on={{
31
- onClick: (_event, _value) => alert('Klick!'),
32
- }}
33
- />
34
- </>
35
- );
35
+ right: 'codicon codicon-arrow-right',
36
+ }}
37
+ _label="Label"
38
+ _on={dummyEventHandler}
39
+ />
40
+ </>
41
+ );
42
+ };
package/src/components/button/partials/cases.tsx CHANGED
@@ -2,16 +2,23 @@ import React from 'react';
2
2
 
3
3
  import { KolButton } from '@public-ui/react';
4
4
  import type { Components } from '@public-ui/components';
5
+ import { useToasterService } from '../../../hooks/useToasterService';
5
6
 
6
7
  export const ButtonCases = function ButtonCases(props: Partial<Components.KolButton>) {
8
+ const { dummyClickEventHandler } = useToasterService();
9
+
10
+ const dummyEventHandler = {
11
+ onClick: dummyClickEventHandler,
12
+ };
13
+
7
14
  return (
8
15
  <div className="flex flex-wrap gap-4">
9
- <KolButton {...props} _icons="codicon codicon-home" _label="Primary" _variant="primary"></KolButton>
10
- <KolButton {...props} _icons="codicon codicon-heart" _label="Secondary" _variant="secondary"></KolButton>
11
- <KolButton {...props} _icons="codicon codicon-hubot" _label="Normal" _variant="normal"></KolButton>
12
- <KolButton {...props} _icons="codicon codicon-hubot" _label="Tertiary" _variant="tertiary"></KolButton>
13
- <KolButton {...props} _icons="codicon codicon-trash" _label="Danger" _variant="danger"></KolButton>
14
- <KolButton {...props} _icons="codicon codicon-reactions" _label="Ghost" _variant="ghost"></KolButton>
16
+ <KolButton {...props} _icons="codicon codicon-home" _label="Primary" _variant="primary" _on={dummyEventHandler}></KolButton>
17
+ <KolButton {...props} _icons="codicon codicon-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler}></KolButton>
18
+ <KolButton {...props} _icons="codicon codicon-hubot" _label="Normal" _variant="normal" _on={dummyEventHandler}></KolButton>
19
+ <KolButton {...props} _icons="codicon codicon-hubot" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler}></KolButton>
20
+ <KolButton {...props} _icons="codicon codicon-trash" _label="Danger" _variant="danger" _on={dummyEventHandler}></KolButton>
21
+ <KolButton {...props} _icons="codicon codicon-reactions" _label="Ghost" _variant="ghost" _on={dummyEventHandler}></KolButton>
15
22
  </div>
16
23
  );
17
24
  };
package/src/components/button/partials/variants.tsx CHANGED
@@ -1,26 +1,24 @@
1
1
  import React from 'react';
2
2
 
3
3
  import { ButtonCases } from './cases';
4
+ import { KolHeading } from '@public-ui/react';
5
+ import type { Components } from '@public-ui/components';
4
6
 
5
7
  export const ButtonVariants = function ButtonVariant() {
8
+ const examples: { label: string; buttonProps: Partial<Components.KolButton> }[] = [
9
+ { label: 'Button', buttonProps: {} },
10
+ { label: 'Button (disabled)', buttonProps: { _disabled: true } },
11
+ { label: 'Button (hideLabel)', buttonProps: { _hideLabel: true } },
12
+ { label: 'Button (disabled, hideLabel)', buttonProps: { _disabled: true, _hideLabel: true } },
13
+ ];
6
14
  return (
7
- <div className="grid gap-4">
8
- <section>
9
- <h2>Button</h2>
10
- <ButtonCases />
11
- </section>
12
- <section>
13
- <h2>Button (disabled)</h2>
14
- <ButtonCases _disabled />
15
- </section>
16
- <section>
17
- <h2>Button (hideLabel)</h2>
18
- <ButtonCases _hideLabel />
19
- </section>
20
- <section>
21
- <h2>Button (disabled, hideLabel)</h2>
22
- <ButtonCases _disabled _hideLabel />
23
- </section>
15
+ <div className="grid gap-8">
16
+ {examples.map(({ label, buttonProps }, index) => (
17
+ <section key={index} className="grid gap-4">
18
+ <KolHeading _level={2} _label={label} />
19
+ <ButtonCases {...buttonProps} />
20
+ </section>
21
+ ))}
24
22
  </div>
25
23
  );
26
24
  };