@utahdts/utah-design-system 4.2.1 → 5.0.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 (31) hide show
  1. package/css/1-settings/_color-swatches.scss +74 -0
  2. package/css/1-settings/_font-stuff.scss +52 -2
  3. package/css/1-settings/_settings-index.scss +91 -12
  4. package/css/6-components/base-components/containers/_drawer.scss +1 -1
  5. package/css/6-components/base-components/containers/_tab-group.scss +3 -0
  6. package/css/6-components/base-components/footer/_utah-footer.scss +4 -1
  7. package/css/6-components/base-components/forms/_switch.scss +1 -1
  8. package/css/6-components/base-components/forms/_text-input.scss +1 -0
  9. package/css/6-components/base-components/navigation/_main-menu.scss +4 -1
  10. package/css/6-components/base-components/popups/_search-modal.scss +8 -0
  11. package/css/6-components/base-components/widgetsIndicators/_badge.scss +2 -2
  12. package/css/6-components/project-components/_swatch-list.scss +5 -2
  13. package/css/6-components/utah-header/_badge.scss +2 -2
  14. package/css/6-components/utah-header/_logos.scss +9 -6
  15. package/css/6-components/utah-header/_mobile-menu.scss +3 -3
  16. package/css/6-components/utah-header/_notifications.scss +200 -0
  17. package/css/6-components/utah-header/_official-banner.scss +78 -0
  18. package/css/6-components/utah-header/_official-website-popup.scss +3 -2
  19. package/css/6-components/utah-header/_utah-header-wrapper.scss +12 -1
  20. package/css/6-components/utah-header/index.scss +2 -0
  21. package/dist/style.css +410 -38
  22. package/dist/utah-design-system.es.js +7450 -7220
  23. package/dist/utah-design-system.umd.js +7732 -7328
  24. package/package.json +15 -15
  25. package/react/components/containers/accordion/Accordion.jsx +1 -0
  26. package/react/components/containers/tabs/TabPanel.jsx +1 -0
  27. package/react/components/forms/MultiSelect/MultiSelectComboBox.jsx +0 -1
  28. package/react/components/navigation/pagination/Pagination.jsx +27 -23
  29. package/react/components/popups/Popup.jsx +1 -0
  30. package/react/components/table/TableWrapper.jsx +15 -1
  31. package/react/components/table/useCurrentValuesFromStateContext.js +1 -1
package/css/6-components/utah-header/_official-banner.scss ADDED
@@ -0,0 +1,78 @@
1
+ .utds-official-website {
2
+ &__wrapper {
3
+ button {
4
+ padding: 0;
5
+ border: none;
6
+ display: inline-flex;
7
+ min-height: 0;
8
+ background: transparent;
9
+ color: var(--gray-light-color);
10
+ font-size: var(--font-size-xs);
11
+ border-radius: 0;
12
+
13
+ span {
14
+ text-decoration: underline;
15
+ }
16
+
17
+ svg {
18
+ margin-left: var(--spacing-2xs);
19
+ }
20
+
21
+ &:hover {
22
+ color: white;
23
+ }
24
+
25
+ &:active {
26
+ scale: 1;
27
+ box-shadow: none;
28
+ }
29
+
30
+ &[aria-expanded="true"] {
31
+ svg {
32
+ transform: rotate(180deg);
33
+ }
34
+ }
35
+ }
36
+ }
37
+
38
+ &__banner {
39
+ padding: var(--spacing-3xs) var(--spacing-l);
40
+ background: var(--gray-color);
41
+ color: var(--gray-light-color);
42
+ font-size: var(--font-size-xs);
43
+ }
44
+
45
+ &-popup__wrapper {
46
+ background: var(--gray-dark-color);
47
+ }
48
+
49
+ &__button-title--mobile {
50
+ display: none;
51
+ }
52
+ }
53
+
54
+ @media screen and (max-width: 990px) {
55
+ .utah-design-system .utds-official-website-popup__content {
56
+ flex-wrap: wrap;
57
+ gap: var(--spacing-l);
58
+ flex-direction: column;
59
+ align-items: flex-start;
60
+ }
61
+ }
62
+
63
+ @media screen and (max-width: 768px) {
64
+ .utds-official-website__banner > span:first-child, .utds-official-website__button-title--desktop {
65
+ display: none;
66
+ }
67
+ .utds-official-website__button-title--mobile {
68
+ display: inline;
69
+ }
70
+ .utds-official-website__banner {
71
+ padding: var(--spacing-3xs) 0;
72
+ }
73
+ .utds-official-website__button {
74
+ width: 100%;
75
+ justify-content: flex-start !important;
76
+ padding: 0 var(--spacing-l) !important;
77
+ }
78
+ }
package/css/6-components/utah-header/_official-website-popup.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  .utah-design-system {
2
2
  &.utds-official-website-popup {
3
3
  &__wrapper {
4
- background: var(--gray-color);
4
+ background: var(--gray-dark-color);
5
5
  color: white;
6
6
  padding: var(--spacing-l);
7
7
  position: relative;
@@ -63,7 +63,7 @@
63
63
  margin-top: var(--spacing-xs);
64
64
  }
65
65
  &__official-image {
66
- width: 150px;
66
+ width: 325px;
67
67
  font-family: 'Source Sans 3', 'Source Sans Pro', Arial, Helvetica, sans-serif;
68
68
  font-weight: normal;
69
69
  font-size: 14px;
@@ -72,6 +72,7 @@
72
72
  }
73
73
  &__copyright {
74
74
  font-size: var(--font-size-s);
75
+ margin-left: 27%;
75
76
  }
76
77
  }
77
78
  }
package/css/6-components/utah-header/_utah-header-wrapper.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  .utds {
2
2
  &-header {
3
- padding: var(--spacing-s) var(--spacing-l);
3
+ padding: var(--spacing-s) var(--spacing);
4
4
  border-bottom: 1px solid #d7d7d7 !important;
5
5
  width: 100%;
6
6
  justify-content: flex-start;
@@ -19,6 +19,17 @@
19
19
  &--small {
20
20
  height: 60px;
21
21
  }
22
+
23
+ & + .main-menu__outer {
24
+ .menu-item a[href].menu-item--selected,
25
+ .vertical-menu a[href].vertical-menu__link-title:hover,
26
+ .vertical-menu button.vertical-menu__button-title:hover {
27
+ color: var(--header-primary-color);
28
+ }
29
+ .horizontal-menu > ul li a[href].menu-item--selected + span.menu-chiclet::after {
30
+ background-color: var(--header-primary-color);
31
+ }
32
+ }
22
33
  }
23
34
  }
24
35
  .utds-header-desktop--hidden {
package/css/6-components/utah-header/index.scss CHANGED
@@ -3,7 +3,9 @@
3
3
  @use 'action-items';
4
4
  @use 'utah-header-wrapper';
5
5
  @use 'logos';
6
+ @use 'official-banner';
6
7
  @use 'official-website-popup';
7
8
  @use 'badge';
8
9
  @use 'mobile-menu';
9
10
  @use 'footer';
11
+ @use 'notifications';