@lumx/react 2.1.1 → 2.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/README.md +1 -1
  2. package/esm/_internal/Avatar2.js +5 -1
  3. package/esm/_internal/Avatar2.js.map +1 -1
  4. package/esm/_internal/Button2.js.map +1 -1
  5. package/esm/_internal/ButtonRoot.js +14 -4
  6. package/esm/_internal/ButtonRoot.js.map +1 -1
  7. package/esm/_internal/ClickAwayProvider.js +1 -1
  8. package/esm/_internal/Dialog2.js +13 -8
  9. package/esm/_internal/Dialog2.js.map +1 -1
  10. package/esm/_internal/DragHandle.js +1 -1
  11. package/esm/_internal/DragHandle.js.map +1 -1
  12. package/esm/_internal/Flag2.js +1 -3
  13. package/esm/_internal/Flag2.js.map +1 -1
  14. package/esm/_internal/IconButton.js +0 -2
  15. package/esm/_internal/IconButton.js.map +1 -1
  16. package/esm/_internal/List2.js +16 -9
  17. package/esm/_internal/List2.js.map +1 -1
  18. package/esm/_internal/Message2.js +2 -2
  19. package/esm/_internal/Message2.js.map +1 -1
  20. package/esm/_internal/SlideshowControls.js +3 -3
  21. package/esm/_internal/SlideshowControls.js.map +1 -1
  22. package/esm/_internal/TextField.js +5 -2
  23. package/esm/_internal/TextField.js.map +1 -1
  24. package/esm/_internal/Thumbnail2.js +29 -34
  25. package/esm/_internal/Thumbnail2.js.map +1 -1
  26. package/esm/_internal/Tooltip2.js +1 -1
  27. package/esm/_internal/UserBlock.js +44 -14
  28. package/esm/_internal/UserBlock.js.map +1 -1
  29. package/esm/_internal/getRootClassName.js +17 -1
  30. package/esm/_internal/getRootClassName.js.map +1 -1
  31. package/esm/_internal/user-block.js +1 -0
  32. package/esm/_internal/user-block.js.map +1 -1
  33. package/package.json +4 -8
  34. package/src/components/avatar/Avatar.stories.tsx +1 -1
  35. package/src/components/avatar/Avatar.tsx +8 -0
  36. package/src/components/button/Button.stories.tsx +85 -15
  37. package/src/components/button/Button.tsx +2 -0
  38. package/src/components/button/ButtonRoot.test.tsx +13 -0
  39. package/src/components/button/ButtonRoot.tsx +10 -1
  40. package/src/components/button/IconButton.test.tsx +9 -0
  41. package/src/components/button/IconButton.tsx +11 -26
  42. package/src/components/button/__snapshots__/ButtonRoot.test.tsx.snap +13 -0
  43. package/src/components/button/__snapshots__/IconButton.test.tsx.snap +19 -0
  44. package/src/components/comment-block/CommentBlock.stories.tsx +1 -1
  45. package/src/components/dialog/Dialog.stories.tsx +45 -3
  46. package/src/components/dialog/Dialog.tsx +15 -11
  47. package/src/components/dialog/__snapshots__/Dialog.test.tsx.snap +76 -0
  48. package/src/components/drag-handle/DragHandle.tsx +5 -1
  49. package/src/components/flag/Flag.test.tsx +1 -2
  50. package/src/components/flag/Flag.tsx +2 -10
  51. package/src/components/flag/__snapshots__/Flag.test.tsx.snap +0 -15
  52. package/src/components/image-block/ImageBlock.stories.tsx +1 -1
  53. package/src/components/link-preview/LinkPreview.stories.tsx +1 -1
  54. package/src/components/list/List.stories.tsx +7 -1
  55. package/src/components/list/ListItem.stories.tsx +28 -3
  56. package/src/components/list/ListItem.tsx +25 -7
  57. package/src/components/list/__snapshots__/List.test.tsx.snap +23 -3
  58. package/src/components/list/__snapshots__/ListItem.test.tsx.snap +84 -11
  59. package/src/components/list/useInteractiveList.tsx +1 -1
  60. package/src/components/message/Message.tsx +2 -2
  61. package/src/components/skeleton/SkeletonRectangle.stories.tsx +1 -1
  62. package/src/components/slideshow/useKeyNavigate.ts +2 -2
  63. package/src/components/text-field/TextField.stories.tsx +97 -82
  64. package/src/components/text-field/TextField.tsx +5 -0
  65. package/src/components/thumbnail/Thumbnail.stories.tsx +22 -1
  66. package/src/components/thumbnail/Thumbnail.test.tsx +20 -2
  67. package/src/components/thumbnail/Thumbnail.tsx +40 -15
  68. package/src/components/thumbnail/__snapshots__/Thumbnail.test.tsx.snap +53 -6
  69. package/src/components/user-block/UserBlock.stories.tsx +28 -5
  70. package/src/components/user-block/UserBlock.tsx +40 -16
  71. package/src/components/user-block/__snapshots__/UserBlock.test.tsx.snap +244 -145
  72. package/src/stories/generated/Button/Demos.stories.tsx +1 -0
  73. package/src/stories/knobs/buttonKnob.ts +9 -0
  74. package/src/stories/knobs/emphasisKnob.ts +8 -0
  75. package/src/utils/MaterialThemeSwitcher/MaterialThemeSwitcher.tsx +54 -0
  76. package/src/utils/MaterialThemeSwitcher/index.ts +1 -0
  77. package/src/stories/knobs/index.ts +0 -2
  78. package/types.d.ts +0 -2561
package/src/stories/generated/Button/Demos.stories.tsx CHANGED
@@ -6,5 +6,6 @@ export default { title: 'LumX components/button/Demos' };
6
6
  export { App as EmphasisHigh } from './emphasis-high';
7
7
  export { App as EmphasisLow } from './emphasis-low';
8
8
  export { App as EmphasisMedium } from './emphasis-medium';
9
+ export { App as FullWidth } from './full-width';
9
10
  export { App as Small } from './small';
10
11
  export { App as Toggle } from './toggle';
package/src/stories/knobs/buttonKnob.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { Button, ButtonProps, Size } from '@lumx/react';
2
+ import { select } from '@storybook/addon-knobs';
3
+ import { ButtonSize } from '@lumx/react/components/button/ButtonRoot';
4
+
5
+ export const buttonSize = (
6
+ name = 'Size',
7
+ value: ButtonSize = Button.defaultProps?.size as any,
8
+ groupId: string | undefined = undefined,
9
+ ): ButtonProps['size'] => select(name, [Size.m, Size.s], value, groupId);
package/src/stories/knobs/emphasisKnob.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { Emphasis } from '@lumx/react';
2
+ import { select } from '@storybook/addon-knobs';
3
+
4
+ export const emphasis = (
5
+ name = 'Emphasis',
6
+ value: Emphasis = Emphasis.high,
7
+ groupId: string | undefined = undefined,
8
+ ): Emphasis => select(name, Emphasis, value, groupId);
package/src/utils/MaterialThemeSwitcher/MaterialThemeSwitcher.tsx ADDED
@@ -0,0 +1,54 @@
1
+ import React, { useCallback, useState } from 'react';
2
+ import { Switch } from '@lumx/react/components/switch';
3
+ import { Alignment } from '@lumx/react';
4
+
5
+ // Global state used to
6
+ const globalState = {
7
+ isEnabled: false,
8
+ styleSheet: null as any,
9
+ };
10
+
11
+ /** Toggle apply the material CSS override. */
12
+ async function toggleMaterialTheme(wasEnabled: boolean) {
13
+ globalState.isEnabled = !wasEnabled;
14
+
15
+ // Inject the material theme CSS file.
16
+ if (!globalState.styleSheet) {
17
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
18
+ // @ts-ignore
19
+ const cssCode = await import('!!raw-loader!@lumx/core/css/material.css');
20
+
21
+ // Inject CSS override in a <style> node in <head>
22
+ const style = document.createElement('style');
23
+ style.textContent = cssCode.default;
24
+ document.head.appendChild(style);
25
+
26
+ globalState.styleSheet = style.sheet;
27
+ }
28
+ // Disable/Enable stylesheet
29
+ globalState.styleSheet.disabled = !globalState.isEnabled;
30
+ }
31
+
32
+ export const MaterialThemeSwitcher: React.FC<any> = ({ theme }) => {
33
+ const [isEnabled, setEnabled] = useState(globalState.isEnabled);
34
+ const toggleTheme = useCallback(
35
+ () =>
36
+ setEnabled((wasEnabled) => {
37
+ toggleMaterialTheme(wasEnabled);
38
+ return !wasEnabled;
39
+ }),
40
+ [],
41
+ );
42
+
43
+ return (
44
+ <Switch
45
+ className="material-theme-switcher"
46
+ isChecked={isEnabled}
47
+ onChange={toggleTheme}
48
+ position={Alignment.right}
49
+ theme={theme}
50
+ >
51
+ Material theme
52
+ </Switch>
53
+ );
54
+ };
package/src/utils/MaterialThemeSwitcher/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './MaterialThemeSwitcher';
package/src/stories/knobs/index.ts DELETED
@@ -1,2 +0,0 @@
1
- export * from './image';
2
- export * from './lorem';