@muraldevkit/ui-toolkit 2.0.1 → 2.2.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 (21) hide show
  1. package/dist/components/form/checkbox/MrlCheckbox/MrlCheckbox.d.ts +19 -2
  2. package/dist/components/form/label/MrlLabelWithDescription/MrlLabelWithDescription.d.ts +32 -0
  3. package/dist/components/form/label/MrlLabelWithDescription/index.d.ts +1 -0
  4. package/dist/components/grid/MrlCol/MrlCol.d.ts +17 -0
  5. package/dist/components/grid/MrlCol/index.d.ts +1 -0
  6. package/dist/components/grid/MrlGrid/MrlGrid.d.ts +18 -0
  7. package/dist/components/grid/MrlGrid/index.d.ts +1 -0
  8. package/dist/components/grid/MrlRow/MrlRow.d.ts +29 -0
  9. package/dist/components/grid/MrlRow/index.d.ts +1 -0
  10. package/dist/components/grid/constants.d.ts +49 -0
  11. package/dist/components/grid/index.d.ts +3 -0
  12. package/dist/components/index.d.ts +1 -0
  13. package/dist/index.js +1 -1
  14. package/dist/styles/MrlCheckbox/global.scss +0 -5
  15. package/dist/styles/MrlCheckbox/module.scss +3 -11
  16. package/dist/styles/MrlCheckbox/variables.scss +0 -23
  17. package/dist/styles/MrlLabelWithDescription/module.scss +62 -0
  18. package/dist/styles/MrlLabelWithDescription/variables.scss +21 -0
  19. package/dist/styles/grid/global.scss +2 -0
  20. package/dist/styles/grid/variables.scss +36 -0
  21. package/package.json +1 -1
package/dist/styles/MrlCheckbox/global.scss CHANGED
@@ -6,11 +6,6 @@
6
6
  @use '../../forms.global.scss' as *;
7
7
  @use './MrlCheckbox.variables.scss';
8
8
 
9
- // hide double focus ring from nested standalone checkbox component
10
- .MrlCheckbox .MrlCheckboxStandalone-input:focus-visible + .mrl-u-focus-indicator::after {
11
- border: none;
12
- }
13
-
14
9
  .MrlCheckbox-input:disabled {
15
10
  ~ .MrlCheckbox-inputDisplay {
16
11
  --mrl-checkbox-input-border-color: var(--mrl-color-background-disabled);
package/dist/styles/MrlCheckbox/module.scss CHANGED
@@ -7,21 +7,13 @@
7
7
  @use '../../forms.global.scss' as *;
8
8
  @use './MrlCheckbox.variables.scss';
9
9
 
10
- /// @todo - Design question - what happens if the label goes to multiple lines?
11
-
12
- .MrlCheckbox .MrlCheckbox-label {
13
- color: var(--mrl-checkbox-label-color);
14
- vertical-align: middle;
15
- }
16
-
17
10
  .MrlCheckbox {
18
11
  align-items: center;
19
12
  display: flex;
20
13
  min-height: var(--mrl-checkbox-height);
21
14
  position: relative;
22
- }
23
15
 
24
- // State: focused
25
- .mrl-is--focused::after {
26
- @include mrl-focus-pseudo-element;
16
+ :first-child {
17
+ align-self: flex-start;
18
+ }
27
19
  }
package/dist/styles/MrlCheckbox/variables.scss CHANGED
@@ -4,36 +4,13 @@
4
4
  ////
5
5
  @use '../../forms.variables.scss';
6
6
 
7
- .MrlCheckbox {
8
- --mrl-checkbox-label-color: rgba(var(--mrl-gray-80), 1);
9
- }
10
-
11
- // State: selected (checked or indeterminate)
12
- .MrlCheckbox.mrl-is--selected,
13
- .MrlCheckbox.mrl-is--indeterminate {
14
- --mrl-checkbox-label-color: rgba(var(--mrl-gray-100), 1);
15
- }
16
-
17
- // State: error
18
- .MrlCheckbox.mrl-is--invalid {
19
- --mrl-checkbox-label-color: rgba(var(--mrl-gray-80), 1);
20
- }
21
-
22
7
  .MrlCheckbox-input[aria-invalid='true'] {
23
8
  ~ .mrl-checkbox-inputDisplay {
24
9
  --mrl-checkbox-input-border-color: var(--mrl-color-background-error);
25
10
  }
26
11
  }
27
12
 
28
- // State: disabled
29
- /* stylelint-disable no-descending-specificity */
30
- // We want to be able to group all related-state styles together
31
- .MrlCheckbox.mrl-is--disabled .MrlCheckbox-label {
32
- --mrl-checkbox-label-color: var(--mrl-color-text-disabled);
33
- }
34
-
35
13
  // State: hover
36
14
  .MrlCheckbox:hover {
37
15
  --mrl-checkbox-input-border-color: rgba(var(--mrl-gray-90), 1);
38
- --mrl-checkbox-label-color: rgba(var(--mrl-gray-90), 1);
39
16
  }
package/dist/styles/MrlLabelWithDescription/module.scss ADDED
@@ -0,0 +1,62 @@
1
+ ////
2
+ /// LabelWithDescription component scoped styles
3
+ /// @group label-with-description
4
+ ////
5
+
6
+ @use './MrlLabelWithDescription.variables.scss';
7
+
8
+ .MrlLabelWithDescription {
9
+ --mrl-label-text-padding-top: calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));
10
+ --mrl-description-margin-left: calc(var(--mrl-spacing-08) + var(--mrl-spacing-03));
11
+ --mrl-description-margin-top: calc(-1 * calc(var(--mrl-spacing-02) + var(--mrl-spacing-01)));
12
+
13
+ min-height: var(--mrl-spacing-09);
14
+
15
+ // keep the same size of the icon when we have a multiline label
16
+ :global(.MrlSvgContainer) {
17
+ flex-shrink: 0;
18
+ }
19
+ }
20
+
21
+ .MrlLabelWithDescription-label {
22
+ color: var(--mrl-label-with-description-color);
23
+ vertical-align: middle;
24
+
25
+ :global(.MrlLabel-text) {
26
+ padding-top: var(--mrl-label-text-padding-top);
27
+ }
28
+
29
+ &.has-icon {
30
+ :global(.MrlLabel-text) {
31
+ padding-top: 0;
32
+ }
33
+ }
34
+
35
+ &.has-multiline-label {
36
+ :global(.MrlLabel-text) {
37
+ padding-top: var(--mrl-label-text-padding-top);
38
+ }
39
+ }
40
+ }
41
+
42
+ .MrlLabelWithDescription-description {
43
+ color: var(--mrl-label-with-description-color);
44
+ margin-left: var(--mrl-spacing-02);
45
+
46
+ .MrlLabelWithDescription-text {
47
+ --mrl-text-weight: var(--mrl-type-weight-text-secondary);
48
+ }
49
+
50
+ &.has-icon,
51
+ &.has-multiline-label {
52
+ margin-left: var(--mrl-description-margin-left);
53
+ }
54
+
55
+ &.has-icon {
56
+ margin-top: var(--mrl-description-margin-top);
57
+ }
58
+
59
+ &.has-multiline-label {
60
+ margin-top: 0;
61
+ }
62
+ }
package/dist/styles/MrlLabelWithDescription/variables.scss ADDED
@@ -0,0 +1,21 @@
1
+ ////
2
+ /// LabelWithDescription component styles
3
+ /// @group label-with-description
4
+ ////
5
+
6
+ .MrlLabelWithDescription {
7
+ --mrl-label-with-description-color: rgba(var(--mrl-gray-80), 1);
8
+
9
+ &.mrl-is--selected,
10
+ &.mrl-is--indeterminate {
11
+ --mrl-label-with-description-color: rgba(var(--mrl-gray-100), 1);
12
+ }
13
+
14
+ &.mrl-is--disabled {
15
+ --mrl-label-with-description-color: var(--mrl-color-text-disabled);
16
+ }
17
+
18
+ &:not(.mrl-is--disabled):hover {
19
+ --mrl-label-with-description-color: rgba(var(--mrl-gray-90), 1);
20
+ }
21
+ }
package/dist/styles/grid/global.scss ADDED
@@ -0,0 +1,2 @@
1
+ @import 'grid.variables';
2
+ @import '../../vendor/bootstrap/bootstrap-grid';
package/dist/styles/grid/variables.scss ADDED
@@ -0,0 +1,36 @@
1
+ ////
2
+ //// Grid variables
3
+ //// @group grid
4
+ ////
5
+
6
+ //// Grid customizations
7
+ $grid-breakpoints: (
8
+ xs: 0,
9
+ sm: 600px,
10
+ md: 834px,
11
+ lg: 1024px,
12
+ xl: 1280px,
13
+ xxl: 1440px
14
+ );
15
+ $grid-gutter-width: 1rem;
16
+
17
+ //// Spacers customization
18
+ // Example of impacted selectors: p-1, px-2, px-lg-4, etc. p-16px
19
+ $spacer: 1rem;
20
+ $spacers: (
21
+ 0: 0,
22
+ 1: $spacer * 1,
23
+ 2: $spacer * 2,
24
+ 3: $spacer * 3,
25
+ 4: $spacer * 0.25,
26
+ 5: $spacer * 0.5
27
+ );
28
+
29
+ //// Gutters customization
30
+ // Example of impacted selectors: g-1, gx-2, gx-lg-4, etc.
31
+ $gutters: (
32
+ 0: 0,
33
+ 1: $spacer,
34
+ 2: $spacer * 2,
35
+ none: 0
36
+ );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muraldevkit/ui-toolkit",
3
- "version": "2.0.1",
3
+ "version": "2.2.0",
4
4
  "description": "Mural's UI Toolkit",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",