@react-ui-org/react-ui 0.56.0 → 0.58.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (103) hide show
  1. package/.nvmrc +1 -1
  2. package/dist/react-ui.css +17 -17
  3. package/dist/react-ui.development.css +2551 -831
  4. package/dist/react-ui.development.js +106 -66
  5. package/dist/react-ui.js +1 -1
  6. package/package.json +13 -2
  7. package/src/CNAME +1 -0
  8. package/src/components/Alert/Alert.jsx +5 -6
  9. package/src/components/Alert/Alert.module.scss +12 -34
  10. package/src/components/Alert/README.md +28 -15
  11. package/src/components/Alert/_settings.scss +5 -0
  12. package/src/components/Alert/_theme.scss +0 -43
  13. package/src/components/Badge/Badge.jsx +5 -3
  14. package/src/components/Badge/Badge.module.scss +29 -74
  15. package/src/components/Badge/README.md +19 -2
  16. package/src/components/Badge/_settings.scss +8 -0
  17. package/src/components/Button/Button.jsx +4 -3
  18. package/src/components/Button/Button.module.scss +183 -2
  19. package/src/components/Button/README.md +8 -6
  20. package/src/components/Button/_settings.scss +8 -3
  21. package/src/components/Button/_theme.scss +0 -3
  22. package/src/components/Button/_tools.scss +7 -71
  23. package/src/components/ButtonGroup/ButtonGroup.jsx +2 -2
  24. package/src/components/Card/Card.jsx +3 -2
  25. package/src/components/Card/Card.module.scss +13 -33
  26. package/src/components/Card/CardBody.jsx +1 -1
  27. package/src/components/Card/CardFooter.jsx +1 -1
  28. package/src/components/Card/README.md +28 -6
  29. package/src/components/Card/_settings.scss +5 -0
  30. package/src/components/Card/_theme.scss +0 -43
  31. package/src/components/CheckboxField/CheckboxField.jsx +9 -3
  32. package/src/components/CheckboxField/README.md +110 -5
  33. package/src/components/FileInputField/FileInputField.jsx +1 -1
  34. package/src/components/FormLayout/FormLayout.jsx +1 -1
  35. package/src/components/FormLayout/FormLayoutCustomField.jsx +1 -1
  36. package/src/components/Grid/Grid.jsx +1 -1
  37. package/src/components/Grid/Grid.module.scss +9 -2
  38. package/src/components/Grid/GridSpan.jsx +1 -1
  39. package/src/components/InputGroup/InputGroup.jsx +2 -2
  40. package/src/components/InputGroup/InputGroup.module.scss +9 -5
  41. package/src/components/Modal/Modal.jsx +1 -1
  42. package/src/components/Modal/ModalBody.jsx +1 -1
  43. package/src/components/Modal/ModalCloseButton.jsx +3 -5
  44. package/src/components/Modal/ModalContent.jsx +1 -1
  45. package/src/components/Modal/ModalFooter.jsx +1 -1
  46. package/src/components/Modal/ModalHeader.jsx +1 -1
  47. package/src/components/Modal/ModalTitle.jsx +1 -1
  48. package/src/components/Modal/README.md +18 -18
  49. package/src/components/Paper/Paper.jsx +1 -1
  50. package/src/components/Popover/Popover.jsx +58 -13
  51. package/src/components/Popover/Popover.module.scss +51 -23
  52. package/src/components/Popover/PopoverWrapper.jsx +1 -1
  53. package/src/components/Popover/README.md +60 -3
  54. package/src/components/Popover/_helpers/cleanPlacementStyle.js +20 -0
  55. package/src/components/Popover/_theme.scss +4 -2
  56. package/src/components/Radio/README.md +103 -0
  57. package/src/components/Radio/Radio.jsx +9 -3
  58. package/src/components/Radio/Radio.module.scss +4 -0
  59. package/src/components/ScrollView/ScrollView.jsx +3 -5
  60. package/src/components/SelectField/README.md +103 -0
  61. package/src/components/SelectField/SelectField.jsx +9 -3
  62. package/src/components/Table/Table.jsx +1 -1
  63. package/src/components/Tabs/Tabs.jsx +1 -1
  64. package/src/components/Tabs/TabsItem.jsx +1 -1
  65. package/src/components/Text/Text.jsx +1 -1
  66. package/src/components/TextArea/TextArea.jsx +1 -1
  67. package/src/components/TextField/README.md +14 -2
  68. package/src/components/TextField/TextField.jsx +1 -1
  69. package/src/components/TextLink/README.md +10 -3
  70. package/src/components/TextLink/TextLink.jsx +1 -1
  71. package/src/components/TextLink/_theme.scss +3 -3
  72. package/src/components/Toggle/README.md +83 -1
  73. package/src/components/Toggle/Toggle.jsx +9 -3
  74. package/src/components/Toolbar/Toolbar.jsx +1 -1
  75. package/src/components/Toolbar/ToolbarGroup.jsx +1 -1
  76. package/src/components/Toolbar/ToolbarItem.jsx +1 -1
  77. package/src/components/_helpers/getRootPriorityClassName.js +1 -1
  78. package/src/components/_helpers/resolveContextOrProp.js +6 -3
  79. package/src/index.js +3 -2
  80. package/src/providers/globalProps/GlobalPropsContext.jsx +5 -0
  81. package/src/providers/globalProps/GlobalPropsProvider.jsx +33 -0
  82. package/src/providers/globalProps/index.js +3 -0
  83. package/src/{provider → providers/globalProps}/withGlobalProps.jsx +16 -16
  84. package/src/providers/translations/TranslationsContext.jsx +6 -0
  85. package/src/providers/translations/TranslationsProvider.jsx +33 -0
  86. package/src/providers/translations/index.js +2 -0
  87. package/src/styles/elements/_links.scss +7 -2
  88. package/src/styles/settings/_collections.scss +9 -0
  89. package/src/styles/theme/_form-fields.scss +19 -0
  90. package/src/styles/theme/_links.scss +4 -3
  91. package/src/styles/tools/_collections.scss +265 -0
  92. package/src/styles/tools/_string.scss +5 -2
  93. package/src/styles/tools/form-fields/_box-field-layout.scss +7 -1
  94. package/src/styles/tools/form-fields/_foundation.scss +6 -4
  95. package/src/styles/tools/form-fields/_variants.scss +5 -1
  96. package/src/theme.scss +66 -1
  97. package/src/components/Alert/_tools.scss +0 -10
  98. package/src/components/Button/_base.scss +0 -156
  99. package/src/components/Button/_priorities.scss +0 -149
  100. package/src/components/Card/_tools.scss +0 -10
  101. package/src/provider/RUIContext.jsx +0 -9
  102. package/src/provider/RUIProvider.jsx +0 -42
  103. package/src/provider/index.js +0 -3
@@ -1,149 +0,0 @@
1
- @use "sass:map";
2
- @use "settings";
3
- @use "theme";
4
- @use "tools";
5
-
6
- @layer components.button {
7
- .isRootPriorityFilled.isRootColorPrimary {
8
- @include tools.button-color(filled, primary);
9
- }
10
-
11
- .isRootPriorityFilled.isRootColorSecondary {
12
- @include tools.button-color(filled, secondary);
13
- }
14
-
15
- .isRootPriorityFilled.isRootColorSelected {
16
- @include tools.button-color(filled, selected);
17
- }
18
-
19
- .isRootPriorityFilled.isRootColorSuccess {
20
- @include tools.button-color(filled, success);
21
- }
22
-
23
- .isRootPriorityFilled.isRootColorWarning {
24
- @include tools.button-color(filled, warning);
25
- }
26
-
27
- .isRootPriorityFilled.isRootColorDanger {
28
- @include tools.button-color(filled, danger);
29
- }
30
-
31
- .isRootPriorityFilled.isRootColorHelp {
32
- @include tools.button-color(filled, help);
33
- }
34
-
35
- .isRootPriorityFilled.isRootColorInfo {
36
- @include tools.button-color(filled, info);
37
- }
38
-
39
- .isRootPriorityFilled.isRootColorNote {
40
- @include tools.button-color(filled, note);
41
- }
42
-
43
- .isRootPriorityFilled.isRootColorLight {
44
- @include tools.button-color(filled, light);
45
- }
46
-
47
- .isRootPriorityFilled.isRootColorDark {
48
- @include tools.button-color(filled, dark);
49
- }
50
-
51
- .isRootPriorityOutline.isRootColorPrimary {
52
- @include tools.button-color(outline, primary);
53
- }
54
-
55
- .isRootPriorityOutline.isRootColorSecondary {
56
- @include tools.button-color(outline, secondary);
57
- }
58
-
59
- .isRootPriorityOutline.isRootColorSelected {
60
- @include tools.button-color(outline, selected);
61
- }
62
-
63
- .isRootPriorityOutline.isRootColorSuccess {
64
- @include tools.button-color(outline, success);
65
- }
66
-
67
- .isRootPriorityOutline.isRootColorWarning {
68
- @include tools.button-color(outline, warning);
69
- }
70
-
71
- .isRootPriorityOutline.isRootColorDanger {
72
- @include tools.button-color(outline, danger);
73
- }
74
-
75
- .isRootPriorityOutline.isRootColorHelp {
76
- @include tools.button-color(outline, help);
77
- }
78
-
79
- .isRootPriorityOutline.isRootColorInfo {
80
- @include tools.button-color(outline, info);
81
- }
82
-
83
- .isRootPriorityOutline.isRootColorNote {
84
- @include tools.button-color(outline, note);
85
- }
86
-
87
- .isRootPriorityOutline.isRootColorLight {
88
- @include tools.button-color(outline, light);
89
- }
90
-
91
- .isRootPriorityOutline.isRootColorDark {
92
- @include tools.button-color(outline, dark);
93
- }
94
-
95
- .isRootPriorityFlat.isRootColorPrimary {
96
- @include tools.button-color(flat, primary);
97
- }
98
-
99
- .isRootPriorityFlat.isRootColorSecondary {
100
- @include tools.button-color(flat, secondary);
101
- }
102
-
103
- .isRootPriorityFlat.isRootColorSelected {
104
- @include tools.button-color(flat, selected);
105
- }
106
-
107
- .isRootPriorityFlat.isRootColorSuccess {
108
- @include tools.button-color(flat, success);
109
- }
110
-
111
- .isRootPriorityFlat.isRootColorWarning {
112
- @include tools.button-color(flat, warning);
113
- }
114
-
115
- .isRootPriorityFlat.isRootColorDanger {
116
- @include tools.button-color(flat, danger);
117
- }
118
-
119
- .isRootPriorityFlat.isRootColorHelp {
120
- @include tools.button-color(flat, help);
121
- }
122
-
123
- .isRootPriorityFlat.isRootColorInfo {
124
- @include tools.button-color(flat, info);
125
- }
126
-
127
- .isRootPriorityFlat.isRootColorNote {
128
- @include tools.button-color(flat, note);
129
- }
130
-
131
- .isRootPriorityFlat.isRootColorLight {
132
- @include tools.button-color(flat, light);
133
- }
134
-
135
- .isRootPriorityFlat.isRootColorDark {
136
- @include tools.button-color(flat, dark);
137
- }
138
-
139
- .isRootInButtonGroup:not(:first-child)::before {
140
- content: "";
141
- position: absolute;
142
- top: calc(-1 * #{theme.$border-width});
143
- bottom: calc(-1 * #{theme.$border-width});
144
- left: calc(-1 * #{theme.$border-width});
145
- z-index: map.get(settings.$group-z-indexes, separator);
146
- border-left: var(--rui-local-separator-width) solid var(--rui-local-separator-color);
147
- transform: translateX(calc(-0.5 * var(--rui-local-gap) - 50%));
148
- }
149
- }
@@ -1,10 +0,0 @@
1
- @use "sass:map";
2
- @use "theme";
3
-
4
- @mixin color($color) {
5
- $color-variant-properties: map.get(theme.$colors, $color);
6
-
7
- --rui-local-color: #{map.get($color-variant-properties, color)};
8
- --rui-local-border-color: #{map.get($color-variant-properties, border-color)};
9
- --rui-local-background-color: #{map.get($color-variant-properties, background-color)};
10
- }
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import defaultTranslations from '../translations/en';
3
-
4
- const RUIContext = React.createContext({
5
- globalProps: {},
6
- translations: defaultTranslations,
7
- });
8
-
9
- export default RUIContext;
@@ -1,42 +0,0 @@
1
- import PropTypes from 'prop-types';
2
- import React, {
3
- useContext,
4
- useMemo,
5
- } from 'react';
6
- import defaultTranslations from '../translations/en';
7
- import { mergeDeep } from '../utils/mergeDeep';
8
- import RUIContext from './RUIContext';
9
-
10
- const RUIProvider = ({
11
- children,
12
- globalProps,
13
- translations,
14
- }) => {
15
- const context = useContext(RUIContext);
16
- const childProps = useMemo(() => ({
17
- globalProps: mergeDeep(context?.globalProps || {}, globalProps),
18
- translations: mergeDeep(context?.translations || {}, translations),
19
- }), [context, globalProps, translations]);
20
-
21
- return (
22
- <RUIContext.Provider
23
- value={childProps}
24
- >
25
- {children}
26
- </RUIContext.Provider>
27
- );
28
- };
29
-
30
- RUIProvider.defaultProps = {
31
- children: null,
32
- globalProps: null,
33
- translations: defaultTranslations,
34
- };
35
-
36
- RUIProvider.propTypes = {
37
- children: PropTypes.node,
38
- globalProps: PropTypes.shape({}),
39
- translations: PropTypes.shape({}),
40
- };
41
-
42
- export default RUIProvider;
@@ -1,3 +0,0 @@
1
- export { default as RUIProvider } from './RUIProvider';
2
- export { default as RUIContext } from './RUIContext';
3
- export { default as withGlobalProps } from './withGlobalProps';