Merge release/2.4.1 into main branch (#1110)

Author: github-actions[bot]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "dependencies": {
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-bold": "^2.0.3",
@@ -18,6 +18,7 @@
     "@tiptap/extension-text": "^2.0.3",
     "@tiptap/pm": "^2.0.3",
     "@tiptap/react": "^2.0.3",
+    "@tiptap/suggestion": "^2.1.13",
     "@types/testing-library__jest-dom": "^6.0.0",
     "@typescript-eslint/eslint-plugin": "^2",
     "@typescript-eslint/parser": "^2",
@@ -29,6 +30,7 @@
     "react-toggle": "4.1.1",
     "react-transition-group": "^4.3.0",
     "sanitize-html": "^2.11.0",
+    "tippy.js": "^6.3.7",
     "uuid": "^7.0.2"
   },
   "scripts": {

scss/avatars.scss

@@ -1,5 +1,5 @@
-$avatar-small-height: 2.75rem;
-$avatar-small-width: 2.75rem;
+$avatar-small-height: 44px;
+$avatar-small-width: 44px;
 
-$avatar-large-height: 5rem;
-$avatar-large-width: 5rem;
+$avatar-large-height: 80px;
+$avatar-large-width: 80px;

scss/borders.scss

@@ -1 +1 @@
-$ux-border-radius: 0.25rem;
+$ux-border-radius: 4px;

scss/buttons.scss

@@ -26,14 +26,14 @@ $warning: $ux-yellow-400;
 
 @mixin btn-focus-outline {
   box-shadow: none !important;
-  outline: 0.125rem solid $ux-blue-500;
-  outline-offset: 0.125rem;
+  outline: 2px solid $ux-blue-500;
+  outline-offset: 2px;
 }
 
 @mixin btn-focus-outline--dark-bg {
   box-shadow: none !important;
-  outline: 0.125rem solid $ux-white;
-  outline-offset: 0.125rem;
+  outline: 2px solid $ux-white;
+  outline-offset: 2px;
 }
 
 @mixin btn-remove-bootstrap-focus-outline {

scss/cards.scss

@@ -1,7 +1,7 @@
-$card-xs-spacing: 1rem;
-$card-sm-spacing: 1.25rem;
-$card-spacing: 1.5rem;
-$card-width: 56rem;
-$card-width-md: 40rem;
-$card-width-sm: 32rem;
-$card-width-xs: 15rem;
+$card-xs-spacing: 16px;
+$card-sm-spacing: 20px;
+$card-spacing: 24px;
+$card-width: 896px;
+$card-width-md: 640px;
+$card-width-sm: 512px;
+$card-width-xs: 240px;

scss/drawer.scss

@@ -1,3 +1,3 @@
-$drawer-width-small: 32rem;
-$drawer-width-medium: 40rem;
-$drawer-width-large: 55.625rem;
+$drawer-width-small: 512px;
+$drawer-width-medium: 640px;
+$drawer-width-large: 890px;

scss/forms/control_button_group.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -8px;
 
   &--full-width {
     // This is a min-width because we are using a negative margin-right on the container
@@ -15,7 +15,7 @@
 
     .FormControlLabel {
       flex: 1 1 0;
-      min-width: 16rem;
+      min-width: 256px;
     }
   }
 
@@ -25,8 +25,8 @@
     flex-wrap: wrap;
 
     .FormControlLabel--bordered {
-      padding: 0.3125rem 0.625rem;
-      margin-right: 0.5rem;
+      padding: 5px 10px;
+      margin-right: 8px;
 
       input[type='radio'] {
         display: none;
@@ -36,7 +36,7 @@
 
   .FormControlLabel {
     flex-wrap: wrap;
-    margin: 0 0.5rem 0.5rem 0;
+    margin: 0 8px 8px 0;
     display: block;
   }
 }

scss/forms/form_control_label.scss

@@ -7,7 +7,7 @@
   align-items: center;
   color: $ux-gray-900;
   display: flex;
-  margin-bottom: 0.5rem;
+  margin-bottom: 8px;
 
   &--with-children {
     @include synth-font-type-30--medium;
@@ -29,21 +29,20 @@
 
   &__control {
     display: flex;
-    margin-right: .5rem;
+    margin-right: 8px;
   }
 
   &__children {
-    @include synth-font-type-30--medium;
+    @include synth-font-type-30;
 
-    font-weight: 100;
-    margin-top: 0.5rem;
+    margin-top: 8px;
     width: 100%;
   }
 
   &--bordered {
     border: 1px solid $ux-gray-400;
     border-radius: $ux-border-radius;
-    padding: 1rem;
+    padding: 16px;
     cursor: pointer;
 
     &:hover {
@@ -68,8 +67,8 @@
   }
 
   input[type='checkbox'], input[type='radio'] {
-    min-height: 1rem;
-    min-width: 1rem;
-    margin-top: 0.125rem;
+    min-height: 16px;
+    min-width: 16px;
+    margin-top: 2px;
   }
 }

scss/forms/form_group.scss

@@ -7,20 +7,19 @@
   align-items: flex-start;
   display: flex;
   flex-direction: column;
-  margin: 0.5rem 0;
+  margin: 8px 0;
 
   &--bordered {
     border: 1px solid $ux-gray-400;
     border-radius: $ux-border-radius;
-    padding: 1rem;
+    padding: 16px;
 
     .InputLabel {
       @include synth-font-type-30--bold;
-      margin-bottom: 0.5rem;
+      margin-bottom: 8px;
 
       &__helper-text {
         @include synth-font-type-30;
-        font-weight: 100;
         color: $ux-gray-900;
       }
     }
@@ -42,13 +41,13 @@
     flex-direction: row;
 
     .InputLabel {
-      margin-right: 1rem;
-      margin-bottom: 0.5rem;
+      margin-right: 16px;
+      margin-bottom: 8px;
     }
 
     .FormControlLabel {
       white-space: nowrap;
-      margin-right: 1rem;
+      margin-right: 16px;
     }
 
     .FormControlLabel--active {
@@ -59,7 +58,7 @@
   &__helper-text {
     @include synth-font-type-20;
     color: $ux-gray-900;
-    margin: 0 0 0.75rem;
+    margin: 0 0 12px;
 
     &--pre {
       white-space: pre-wrap;
@@ -69,7 +68,7 @@
   &__invalid-feedback {
     @include synth-font-type-20--medium;
     color: $ux-red;
-    padding: .375rem 0;
+    padding: 6px 0;
     margin: 0;
 
     &__list {
@@ -79,7 +78,7 @@
 
   .form-control {
     @include synth-font-type-30;
-    height: 2.25rem;
+    height: 36px;
   }
 
   textarea.form-control {

scss/forms/input_label.scss

@@ -6,7 +6,7 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  margin-bottom: 0.375rem;
+  margin-bottom: 6px;
 
   &__helper-text {
     @include synth-font-type-10--uppercase;