@muraldevkit/ui-toolkit 2.4.2 → 2.6.0

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 (39) hide show
  1. package/README.md +27 -1
  2. package/dist/components/button/MrlAnimatedIconButton/MrlAnimatedIconButton.d.ts +1 -1
  3. package/dist/components/button/MrlButton/MrlButton.d.ts +1 -1
  4. package/dist/components/button/MrlIconButton/MrlIconButton.d.ts +1 -1
  5. package/dist/components/focus-trap/MrlFocusTrap/MrlFocusTrap.d.ts +1 -1
  6. package/dist/components/form/radio/MrlRadioButton/MrlRadioButton.d.ts +46 -0
  7. package/dist/components/form/radio/MrlRadioButton/index.d.ts +1 -0
  8. package/dist/components/form/utils.d.ts +12 -0
  9. package/dist/components/grid/MrlCol/MrlCol.d.ts +3 -8
  10. package/dist/components/grid/MrlGrid/MrlGrid.d.ts +3 -10
  11. package/dist/components/grid/MrlRow/MrlRow.d.ts +4 -8
  12. package/dist/components/index.d.ts +1 -0
  13. package/dist/components/layout/MrlMain/MrlMain.d.ts +9 -0
  14. package/dist/components/layout/MrlMain/index.d.ts +1 -0
  15. package/dist/components/layout/MrlPage/MrlPage.d.ts +11 -0
  16. package/dist/components/layout/MrlPage/index.d.ts +11 -0
  17. package/dist/components/layout/MrlSidebar/MrlSidebar.d.ts +11 -0
  18. package/dist/components/layout/MrlSidebar/index.d.ts +1 -0
  19. package/dist/components/layout/MrlTopbar/MrlTopbar.d.ts +11 -0
  20. package/dist/components/layout/MrlTopbar/index.d.ts +1 -0
  21. package/dist/components/layout/constants.d.ts +16 -0
  22. package/dist/components/layout/context/LayoutContext.d.ts +24 -0
  23. package/dist/components/layout/index.d.ts +4 -0
  24. package/dist/components/layout/utils.d.ts +15 -0
  25. package/dist/components/svg/config.d.ts +1 -1
  26. package/dist/hooks/index.d.ts +1 -0
  27. package/dist/hooks/useBreakpoint/index.d.ts +15 -0
  28. package/dist/index.js +1 -1
  29. package/dist/styles/MrlMain/module.scss +26 -0
  30. package/dist/styles/MrlMain/variables.scss +5 -0
  31. package/dist/styles/MrlPage/module.scss +13 -0
  32. package/dist/styles/MrlRadioButton/module.scss +8 -0
  33. package/dist/styles/MrlRadioButtonStandalone/module.scss +2 -2
  34. package/dist/styles/MrlSidebar/module.scss +61 -0
  35. package/dist/styles/MrlTopbar/module.scss +12 -0
  36. package/dist/styles/grid/global.scss +5 -1
  37. package/dist/styles/grid/variables.scss +6 -5
  38. package/dist/styles/layout/variables.scss +3 -0
  39. package/package.json +2 -1
package/dist/styles/MrlMain/module.scss ADDED
@@ -0,0 +1,26 @@
1
+
2
+ @use './MrlMain.variables' as *;
3
+ @use '../layout.variables' as *;
4
+ @use '@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
5
+ .MrlMain {
6
+ align-items: initial;
7
+ background: rgba(var(--mrl-white), 1);
8
+ border-radius: var(--mrl-border-radius-container-large);
9
+ flex: 1;
10
+ margin-bottom: var(--mrl-spacing-05);
11
+ padding: var(--main-padding-large) var(--main-padding-small);
12
+ width: 100%;
13
+ &--no-topbar {
14
+ margin-top: var(--mrl-spacing-05);
15
+ }
16
+ }
17
+ @media (min-width: $mrl-breakpoint-02) {
18
+ .MrlMain {
19
+ padding: var(--main-padding-large) var(--main-padding-medium);
20
+ }
21
+ }
22
+ @media (min-width: $mrl-breakpoint-03) {
23
+ .MrlMain {
24
+ padding: var(--main-padding-large) var(--main-padding-large);
25
+ }
26
+ }
package/dist/styles/MrlMain/variables.scss ADDED
@@ -0,0 +1,5 @@
1
+ .MrlMain {
2
+ --main-padding-large: var(--mrl-spacing-10);
3
+ --main-padding-medium: var(--mrl-spacing-08);
4
+ --main-padding-small: var(--mrl-spacing-07);
5
+ }
package/dist/styles/MrlPage/module.scss ADDED
@@ -0,0 +1,13 @@
1
+
2
+ @import '../layout.variables';
3
+ .MrlPage {
4
+ background: var(--mrl-color-background-page);
5
+ display: flex;
6
+ flex-wrap: wrap;
7
+ padding-left: var(--mrl-spacing-05);
8
+ padding-right: var(--mrl-spacing-05);
9
+ position: relative;
10
+ &--no-topbar {
11
+ padding-top: var(--mrl-spacing-05);
12
+ }
13
+ }
package/dist/styles/MrlRadioButton/module.scss ADDED
@@ -0,0 +1,8 @@
1
+
2
+ .MrlRadioButton {
3
+ align-items: center;
4
+ display: flex;
5
+ :first-child {
6
+ align-self: flex-start;
7
+ }
8
+ }
package/dist/styles/MrlRadioButtonStandalone/module.scss CHANGED
@@ -5,11 +5,11 @@
5
5
  @use './MrlRadioButtonStandalone.variables.scss';
6
6
  .MrlRadioButtonStandalone {
7
7
  display: inline-block;
8
- height: var(--mrl-radio-button-height);
9
8
  margin: calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));
10
9
  margin-left: var(--mrl-spacing-01);
10
+ min-height: var(--mrl-radio-button-height);
11
+ min-width: var(--mrl-radio-button-width);
11
12
  position: relative;
12
- width: var(--mrl-radio-button-width);
13
13
  }
14
14
  .MrlRadioButtonStandalone-input {
15
15
  appearance: none;
package/dist/styles/MrlSidebar/module.scss ADDED
@@ -0,0 +1,61 @@
1
+
2
+ @use '../layout.variables' as *;
3
+ @use '../../grid/grid.variables' as *;
4
+ .MrlSidebar {
5
+ align-items: stretch;
6
+ margin-right: var(--mrl-spacing-05);
7
+ text-align: center;
8
+ width: $sidebar-width;
9
+ &--mobile {
10
+ align-items: stretch;
11
+ background: var(--mrl-color-background-page);
12
+ height: calc(100%);
13
+ left: calc(($sidebar-width + 2px) * -1);
14
+ position: absolute;
15
+ transition: opacity var(--mrl-duration-03) var(--mrl-timing-m1),
16
+ left var(--mrl-duration-03) var(--mrl-timing-m1);
17
+ z-index: 2;
18
+ @media (prefers-reduced-motion: reduce) {
19
+ transition: opacity var(--mrl-duration-03) var(--mrl-timing-m1);
20
+ }
21
+ &--open {
22
+ left: 0;
23
+ opacity: 1;
24
+ }
25
+ &--withClose {
26
+ padding-top: 1000px;
27
+ }
28
+ }
29
+ &--offset {
30
+ &.MrlSidebar--mobile,
31
+ &.MrlSidebar-overlay {
32
+ height: calc(100% - $topbar-height);
33
+ top: $topbar-height;
34
+ }
35
+ }
36
+ }
37
+ .MrlSidebar-menu-trigger {
38
+ left: var(--mrl-spacing-05);
39
+ position: absolute;
40
+ top: var(--mrl-spacing-05);
41
+ width: 50px;
42
+ }
43
+ .MrlSidebar-menu-close {
44
+ position: absolute;
45
+ right: calc(var(--mrl-spacing-05) / 2);
46
+ top: var(--mrl-spacing-05);
47
+ }
48
+ .MrlSidebar-overlay {
49
+ background-color: rgba(0, 0, 0, 56%);
50
+ bottom: 0;
51
+ left: -10000px;
52
+ opacity: 0;
53
+ position: absolute;
54
+ right: 0;
55
+ top: 0;
56
+ transition: opacity var(--mrl-duration-03) var(--mrl-timing-m1);
57
+ z-index: 1;
58
+ &--visible {
59
+ opacity: 1;
60
+ }
61
+ }
package/dist/styles/MrlTopbar/module.scss ADDED
@@ -0,0 +1,12 @@
1
+
2
+ @use '../layout.variables' as *;
3
+ .MrlTopbar {
4
+ height: $topbar-height;
5
+ width: 100%;
6
+ &--mobile {
7
+ margin-left: calc(var(--mrl-spacing-10) + var(--mrl-spacing-01));
8
+ }
9
+ }
10
+ .MrlTopbar--no-sidebar {
11
+ margin-left: 0;
12
+ }
package/dist/styles/grid/global.scss CHANGED
@@ -1,2 +1,6 @@
1
- @import 'grid.variables';
2
1
  @import '../../vendor/bootstrap/bootstrap-grid';
2
+ @import 'grid.variables';
3
+ .container {
4
+ max-width: 100%;
5
+ padding: 0;
6
+ }
package/dist/styles/grid/variables.scss CHANGED
@@ -1,11 +1,12 @@
1
1
 
2
+ @use '@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
2
3
  $grid-breakpoints: (
3
4
  xs: 0,
4
- sm: 600px,
5
- md: 834px,
6
- lg: 1024px,
7
- xl: 1280px,
8
- xxl: 1440px
5
+ sm: $mrl-breakpoint-01,
6
+ md: $mrl-breakpoint-02,
7
+ lg: $mrl-breakpoint-03,
8
+ xl: $mrl-breakpoint-04,
9
+ xxl: $mrl-breakpoint-05
9
10
  );
10
11
  $grid-gutter-width: 1rem;
11
12
  $spacer: 1rem;
package/dist/styles/layout/variables.scss ADDED
@@ -0,0 +1,3 @@
1
+
2
+ $topbar-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-08) + 2px);
3
+ $sidebar-width: calc(var(--mrl-spacing-14) + var(--mrl-spacing-11));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muraldevkit/ui-toolkit",
3
- "version": "2.4.2",
3
+ "version": "2.6.0",
4
4
  "description": "Mural's UI Toolkit",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -100,6 +100,7 @@
100
100
  "lint-staged": "13.2.2",
101
101
  "null-loader": "4.0.1",
102
102
  "prettier": "2.8.8",
103
+ "react-markdown": "8.0.7",
103
104
  "rimraf": "5.0.0",
104
105
  "sass": "1.62.1",
105
106
  "sass-loader": "13.2.2",