@snyk-mktg/brand-ui 2.5.9 → 2.5.10-canary.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 (81) hide show
  1. package/dist/css/bundle.css +82 -1
  2. package/dist/css/bundle.css.map +1 -1
  3. package/dist/css/components.css +82 -1
  4. package/dist/css/components.css.map +1 -1
  5. package/dist/css/evo-bundle.css +31 -1
  6. package/dist/css/evo-bundle.css.map +1 -1
  7. package/dist/css/labs-bundle.css +31 -1
  8. package/dist/css/labs-bundle.css.map +1 -1
  9. package/dist/scss/base/_baseline.scss +9 -4
  10. package/dist/scss/base/_color.scss +2 -17
  11. package/dist/scss/base/_layout.scss +35 -10
  12. package/dist/scss/base/_links.scss +3 -1
  13. package/dist/scss/base/decorations/_backgrounds.scss +21 -53
  14. package/dist/scss/base/decorations/_markers.scss +28 -26
  15. package/dist/scss/base/mixins/_accessibility.scss +6 -0
  16. package/dist/scss/base/mixins/_color-mode.scss +12 -0
  17. package/dist/scss/base/mixins/_glass.scss +36 -12
  18. package/dist/scss/base/mixins/_gradient-border.scss +49 -0
  19. package/dist/scss/base/mixins/index.scss +1 -0
  20. package/dist/scss/base/variables/_colors.scss +39 -33
  21. package/dist/scss/base/variables/_effects.scss +5 -5
  22. package/dist/scss/base/variables/_themes.scss +18 -18
  23. package/dist/scss/base/variables/_typography.scss +49 -57
  24. package/dist/scss/base.scss +3 -1
  25. package/dist/scss/components/atoms/_badge.scss +1 -1
  26. package/dist/scss/components/atoms/_button.scss +17 -115
  27. package/dist/scss/components/atoms/_checkbox.scss +12 -2
  28. package/dist/scss/components/atoms/_dropdown.scss +3 -3
  29. package/dist/scss/components/atoms/_feature-checkmark.scss +3 -1
  30. package/dist/scss/components/atoms/_icons.scss +6 -3
  31. package/dist/scss/components/atoms/_tabs.scss +4 -4
  32. package/dist/scss/components/atoms/_tag.scss +3 -2
  33. package/dist/scss/components/atoms/triggers/_filter.scss +1 -1
  34. package/dist/scss/components/molecules/_announcements.scss +15 -7
  35. package/dist/scss/components/molecules/_pagination.scss +5 -5
  36. package/dist/scss/components/molecules/_search.scss +1 -11
  37. package/dist/scss/components/molecules/_share-this.scss +2 -1
  38. package/dist/scss/components/molecules/_table-of-contents.scss +4 -4
  39. package/dist/scss/components/molecules/_tables.scss +59 -2
  40. package/dist/scss/components/molecules/cards/_card-bg-image.scss +1 -1
  41. package/dist/scss/components/molecules/cards/_card.scss +11 -6
  42. package/dist/scss/components/organisms/_footer.scss +1 -1
  43. package/dist/scss/components/organisms/_glossary.scss +7 -0
  44. package/dist/scss/components/organisms/_navigation.scss +5 -5
  45. package/dist/scss/components/organisms/_split-content.scss +0 -4
  46. package/dist/scss/components/organisms/_sub-navigation.scss +1 -1
  47. package/dist/scss/components/organisms/ctas/_basic-cta.scss +6 -4
  48. package/dist/scss/components/organisms/ctas/_body-cta.scss +16 -6
  49. package/dist/scss/components/organisms/ctas/_footer-cta.scss +20 -1
  50. package/dist/scss/components/organisms/heroes/_hero-case-study.scss +4 -7
  51. package/dist/scss/evo/_components.scss +1 -1
  52. package/dist/scss/evo/base/variables/_typography.scss +2 -0
  53. package/dist/scss/evo/components/atoms/_button.scss +92 -4
  54. package/dist/scss/evo/components/molecules/_share-this.scss +44 -0
  55. package/dist/scss/evo/components/molecules/cards/_card.scss +3 -0
  56. package/dist/scss/evo/components/organisms/_footer.scss +14 -0
  57. package/dist/scss/evo/components/organisms/ctas/_basic-cta.scss +1 -0
  58. package/dist/scss/labs/_components.scss +1 -1
  59. package/dist/scss/labs/base/_baseline.scss +2 -0
  60. package/dist/scss/labs/base/variables/_colors.scss +8 -0
  61. package/dist/scss/labs/base/variables/_typography.scss +44 -0
  62. package/dist/scss/labs/components/atoms/_button.scss +12 -0
  63. package/dist/scss/labs/components/atoms/triggers/_play.scss +1 -1
  64. package/dist/scss/labs/components/molecules/_pagination.scss +5 -0
  65. package/dist/scss/labs/components/molecules/_table-of-contents.scss +14 -1
  66. package/dist/scss/labs/components/molecules/cards/_card-bg-image.scss +7 -0
  67. package/dist/scss/labs/components/molecules/cards/_card.scss +10 -0
  68. package/dist/scss/labs/components/organisms/ctas/_basic-cta.scss +2 -0
  69. package/dist/scss/labs/utilities/_rich-text.scss +13 -0
  70. package/dist/scss/utilities/_rich-text.scss +1 -1
  71. package/package.json +3 -2
  72. package/dist/js/helpers/caseFormats.test.d.ts +0 -1
  73. package/dist/js/helpers/caseFormats.test.js +0 -59
  74. package/dist/js/helpers/classnames.test.d.ts +0 -1
  75. package/dist/js/helpers/classnames.test.js +0 -13
  76. package/dist/js/helpers/getInitials.test.d.ts +0 -1
  77. package/dist/js/helpers/getInitials.test.js +0 -29
  78. package/dist/js/helpers/grid.test.d.ts +0 -1
  79. package/dist/js/helpers/grid.test.js +0 -44
  80. package/dist/js/helpers/range.test.d.ts +0 -1
  81. package/dist/js/helpers/range.test.js +0 -24
package/dist/css/components.css CHANGED
@@ -635,6 +635,18 @@
635
635
  font-size: 0.875rem;
636
636
  line-height: 1.5rem;
637
637
  }
638
+ .button.search-trigger:hover, .button.search-trigger:focus {
639
+ color: #145deb;
640
+ }
641
+ .button.search-trigger:hover.dark-mode, .dark-mode .button.search-trigger:hover, .button.search-trigger:focus.dark-mode, .dark-mode .button.search-trigger:focus {
642
+ color: #9bcfff;
643
+ }
644
+ .button.search-trigger:hover, .button.search-trigger:focus {
645
+ background-color: transparent;
646
+ }
647
+ .button.search-trigger:hover.dark-mode, .dark-mode .button.search-trigger:hover, .button.search-trigger:focus.dark-mode, .dark-mode .button.search-trigger:focus {
648
+ background-color: transparent;
649
+ }
638
650
 
639
651
  .buttons {
640
652
  max-width: max-content;
@@ -9140,6 +9152,57 @@ a.tag:focus {
9140
9152
  color: #3ea2ff;
9141
9153
  }
9142
9154
 
9155
+ .search-wrapper {
9156
+ position: relative;
9157
+ display: flex;
9158
+ align-items: center;
9159
+ width: 100%;
9160
+ padding: 2px;
9161
+ border-width: 0.0625rem;
9162
+ border-radius: 100rem;
9163
+ border-style: solid;
9164
+ }
9165
+ .search-wrapper {
9166
+ border-color: #383f76;
9167
+ }
9168
+ .search-wrapper.dark-mode, .dark-mode .search-wrapper {
9169
+ border-color: #fff;
9170
+ }
9171
+ .search-input {
9172
+ border: none;
9173
+ border-radius: 100rem;
9174
+ outline: none;
9175
+ padding: 0.5rem 1.5rem;
9176
+ width: 100%;
9177
+ font-family: "Roboto", sans-serif;
9178
+ min-width: 300px;
9179
+ font-size: 1rem;
9180
+ }
9181
+ .search-input {
9182
+ color: #383f76;
9183
+ }
9184
+ .search-input.dark-mode, .dark-mode .search-input {
9185
+ color: #fff;
9186
+ }
9187
+ .search-input::placeholder {
9188
+ font-size: 1rem;
9189
+ font-family: "Roboto", sans-serif;
9190
+ }
9191
+ @media (min-width: 769px) {
9192
+ .search-input {
9193
+ min-width: 500px;
9194
+ }
9195
+ }
9196
+ .search-submit {
9197
+ position: absolute;
9198
+ right: 0;
9199
+ }
9200
+
9201
+ .search-result-highlight {
9202
+ border-radius: 2px;
9203
+ background-color: #ffe792;
9204
+ }
9205
+
9143
9206
  .table-comparison-caption {
9144
9207
  width: calc(1440px / 12 * 6);
9145
9208
  }
@@ -9219,7 +9282,7 @@ a.tag:focus {
9219
9282
  background-color: "none";
9220
9283
  }
9221
9284
  .table-comparison-row-header {
9222
- width: calc(1440px / 12 * 6);
9285
+ width: calc(1440px / 12 * 4);
9223
9286
  padding-left: 1rem;
9224
9287
  text-align: left;
9225
9288
  vertical-align: top;
@@ -14113,6 +14176,16 @@ a.tag:focus {
14113
14176
  transform: unset;
14114
14177
  }
14115
14178
  }
14179
+ .brandui-navigation .navigation-wrapper:has(.with-search) {
14180
+ justify-content: end;
14181
+ gap: 1rem;
14182
+ }
14183
+ @media (max-width: 1024px) {
14184
+ .brandui-navigation .navigation-wrapper:has(.with-search) {
14185
+ justify-content: start;
14186
+ gap: 0.5rem;
14187
+ }
14188
+ }
14116
14189
  @media (max-width: 1024px) {
14117
14190
  .brandui-navigation .navigation-wrapper {
14118
14191
  margin-top: 5rem;
@@ -14959,6 +15032,11 @@ a.tag:focus {
14959
15032
  transition: 0.2s ease-in-out;
14960
15033
  margin-left: auto;
14961
15034
  }
15035
+ @media (min-width: 1025px) {
15036
+ .brandui-navigation .navigation-buttons.with-search {
15037
+ margin-left: 0;
15038
+ }
15039
+ }
14962
15040
  @media (max-width: 1024px) {
14963
15041
  .brandui-navigation .navigation-buttons {
14964
15042
  margin: 0 auto;
@@ -14966,6 +15044,9 @@ a.tag:focus {
14966
15044
  align-items: center;
14967
15045
  flex-direction: column-reverse;
14968
15046
  }
15047
+ .brandui-navigation .navigation-buttons.no-reverse {
15048
+ flex-direction: column;
15049
+ }
14969
15050
  }
14970
15051
  @media (max-width: 1024px) {
14971
15052
  .brandui-navigation .navigation {