Merge branch 'main' into 714-scrollbar-appears-briefly-when-the-text-loads-and-then-disappears

Anton-88 · web-flow · commit 55265d488bfa · 2025-07-02T15:20:49.000+03:00
diff --git a/website/modules/asset/ui/src/scss/_buttons.scss b/website/modules/asset/ui/src/scss/_buttons.scss
@@ -25,6 +25,7 @@
   @include responsive-font(12px, 20px);
   transform: scale(1);
   @include transition(transform, 0.3s);
+
   @include breakpoint-medium {
     letter-spacing: -0.01em;
   }
@@ -73,8 +74,9 @@
     .sf-button {
       justify-content: center;
       align-items: center;
-      padding: 12px;
+      padding: 11px;
       margin: 0 auto 24px;
+      border: 1px solid $gray-500;
       width: 100%;
 
       &.sf-button_underline {
@@ -93,7 +95,6 @@
       &:last-child {
         background: none;
         color: $gray-500;
-        border: 1px solid $gray-500;
         box-sizing: border-box;
         text-decoration: none;
         background-color: $white;
diff --git a/website/modules/asset/ui/src/scss/_carousel.scss b/website/modules/asset/ui/src/scss/_carousel.scss
@@ -33,16 +33,37 @@
     }
   }
   &__title {
-    margin: 0 0 4px;
+    margin: 0;
     font-weight: 700;
     font-size: 14px;
     line-height: 110%;
     @include breakpoint-medium {
-      line-height: 150%;
+      line-height: 120%;
     }
     color: $gray-500;
     text-decoration: none;
-    @include truncate-lines(1);
+    @include truncate-lines(2);
+  }
+  &__wrapper{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-bottom: 4px;
+    @include breakpoint-medium {
+      margin-bottom: 8px;
+    }
+    
+  }
+  &__container{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 70px;
+    min-width: 160px;
+    margin-bottom: 4px;
+    @include breakpoint-medium {
+      margin-bottom: 13px;
+    }
   }
   &__subtitle {
     font-weight: 500;
@@ -68,11 +89,8 @@
     @include truncate-lines(1);
   }
   &__organization {
-    margin-bottom: 12px;
     @include truncate-lines(1);
-    margin-bottom: 8px;
   }
-
   &__content {
     p {
       font-weight: 500;
diff --git a/website/modules/asset/ui/src/scss/_cases.scss b/website/modules/asset/ui/src/scss/_cases.scss
@@ -277,44 +277,35 @@
   }
 
   .tag-link {
-    @include truncate-lines(1);
-    @include font-settings(11px, 140%, $font-weight-medium);
-    text-transform: capitalize;
-    color: $gray-300;
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: 6px;
     text-decoration: none;
     cursor: pointer;
+    padding: 8px 8px;
+    margin-left: -8px;
+    margin-right: 0;
+    color: $gray-300;
+    @include font-settings(11px, 140%, $font-weight-medium);
+    text-transform: capitalize;
     transition:
       background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
       color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
       transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    margin: 0 -8px;
-    padding: 8px 8px;
-
-    &:hover {
-      background-color: rgba($gray-100, 0.6);
-      color: $gray-500;
-      transform: translateX(4px);
-
-      &::before {
-        background-color: rgba($gray-200, 0.8);
-        transform: scale(1.1);
-        box-shadow: 0 2px 4px rgba($gray-300, 0.2);
-      }
-    }
-
+  
+    &:hover,
     &:focus-visible {
       background-color: rgba($gray-100, 0.6);
       color: $gray-500;
       transform: translateX(4px);
-
+  
       &::before {
         background-color: rgba($gray-200, 0.8);
         transform: scale(1.1);
         box-shadow: 0 2px 4px rgba($gray-300, 0.2);
       }
     }
-
+  
     &::before {
       content: '';
       display: inline-block;
@@ -329,13 +320,20 @@
       margin-top: -1px;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       border-radius: 2px;
+      flex-shrink: 0;
     }
-
-    span {
-      margin-left: 5px;
-      transition: color 0.3s ease;
+  
+    .tag-label {
+      @include truncate-lines(2);
     }
-  }
+  
+    .tag-count {
+      flex-shrink: 0;
+      white-space: nowrap;
+      margin-left: 4px;
+      color: $gray-300;
+    }
+  }  
 }
 
 .no-tags-message {
@@ -541,7 +539,7 @@
   line-height: 140%;
   text-transform: capitalize;
   color: $gray-300;
-  height: 24px;
+  min-height: 24px;
   @include breakpoint-medium {
     font-size: 11px;
     line-height: 110%;
@@ -559,6 +557,7 @@
   font-size: 16px;
   color: $gray-300;
   text-decoration: none;
+  @include truncate-lines(1);
 }
 
 .clear-all {
diff --git a/website/modules/asset/ui/src/scss/_services.scss b/website/modules/asset/ui/src/scss/_services.scss
@@ -29,7 +29,7 @@
       }
       
       &-expand-button {
-        top: 20px;
+        top: 25px;
       }
     }
   }
@@ -46,6 +46,11 @@
         opacity: 1;
         overflow: visible;
         transform: none;
+        padding-top: 20px;
+
+        @include breakpoint-medium {
+          padding-top: 0;
+        }
       }
     }
   }
@@ -149,7 +154,6 @@
     font-size: 14px;
     line-height: 20px;
     color: $gray-300;
-    margin: 0;
     display: block;
     max-height: 0;
     opacity: 0;
@@ -166,6 +170,10 @@
       opacity: 1;
       overflow: visible;
       transform: none;
+      
+      p {
+        padding-top: 20px;
+      }
     }
   }
   
diff --git a/website/modules/asset/ui/src/scss/_testimonials.scss b/website/modules/asset/ui/src/scss/_testimonials.scss
@@ -37,13 +37,12 @@
         &__bio {
           display: block;
           width: calc(100% - 102px);
-          padding: 12px 12px 0 24px;
+          padding: 4px 12px 0 24px;
           @include breakpoint-medium {
             width: calc(100% - 160px);
-            padding: 40px 40px 0;
+            padding: 32px 40px 0;
           }
           a {
-            margin-top: 8px;
             font-size: 11px;
             font-weight: 300;
             color: $gray-500;
@@ -57,12 +56,7 @@
       }
       &__title {
         @include breakpoint-medium {
-          @include font-settings(14px, 150%, 700);
-        }
-      }
-      &__organization {
-        @include breakpoint-medium {
-          margin-bottom: 14px;
+          @include font-settings(14px, 120%, 700);
         }
       }
       &__url {
@@ -112,7 +106,7 @@
               margin-bottom: 10px;
               @include font-settings(22px, 110%, 700);
             }
-            @include truncate-lines(1);
+            @include truncate-lines(2);
           }
 
           &__position {
@@ -162,7 +156,6 @@
             }
             &__bio {
               width: 100%;
-              padding: 12px 12px 12px 24px;
               @include breakpoint-medium {
                 padding: 0;
               }
diff --git a/website/modules/case-studies-page/views/index.html b/website/modules/case-studies-page/views/index.html
@@ -143,21 +143,24 @@
                   class="tag-link"
                   href="{{ data.url | build({}, { industry: { $pull: tag.value } }) }}#filter"
                 >
-                  {{ tag.label }} <span>[ {{ count }} ]</span>
+                  <span class="tag-label">{{ tag.label }}</span>
+                  <span class="tag-count">[ {{ count }} ]</span>
                 </a>
                 {% elif filterType == 'caseStudyType' %}
                 <a
                   class="tag-link"
                   href="{{ data.url | build({}, { caseStudyType: { $pull: tag.value } }) }}#filter"
                 >
-                  {{ tag.label }} <span>[ {{ count }} ]</span>
+                  <span class="tag-label">{{ tag.label }}</span>
+                  <span class="tag-count">[ {{ count }} ]</span>
                 </a>
                 {% elif filterType == 'stack' %}
                 <a
                   class="tag-link"
                   href="{{ data.url | build({}, { stack: { $pull: tag.value } }) }}#filter"
                 >
-                  {{ tag.label }} <span>[ {{ count }} ]</span>
+                  <span class="tag-label">{{ tag.label }}</span>
+                  <span class="tag-count">[ {{ count }} ]</span>
                 </a>
                 {% endif %}
               </li>
@@ -168,21 +171,24 @@
                   class="tag-link"
                   href="{{ data.url | build({}, { industry: { $addToSet: tag.value } }) }}#filter"
                 >
-                  {{ tag.label }} <span>[ {{ count }} ]</span>
+                  <span class="tag-label">{{ tag.label }}</span>
+                  <span class="tag-count">[ {{ count }} ]</span>
                 </a>
                 {% elif filterType == 'caseStudyType' %}
                 <a
                   class="tag-link"
                   href="{{ data.url | build({}, { caseStudyType: { $addToSet: tag.value } }) }}#filter"
                 >
-                  {{ tag.label }} <span>[ {{ count }} ]</span>
+                  <span class="tag-label">{{ tag.label }}</span>
+                  <span class="tag-count">[ {{ count }} ]</span>
                 </a>
                 {% elif filterType == 'stack' %}
                 <a
                   class="tag-link"
                   href="{{ data.url | build({}, { stack: { $addToSet: tag.value } }) }}#filter"
                 >
-                  {{ tag.label }} <span>[ {{ count }} ]</span>
+                  <span class="tag-label">{{ tag.label }}</span>
+                  <span class="tag-count">[ {{ count }} ]</span>
                 </a>
                 {% endif %}
               </li>
diff --git a/website/modules/testimonials-carousel-widget/views/widget.html b/website/modules/testimonials-carousel-widget/views/widget.html
@@ -32,12 +32,16 @@
                   />
               </div>
               <div class="sf-testimonial-header__bio">
-                <h4 class="sf-person__title">{{ card.title }}</h4>
-                <h5 class="sf-person__position">{{ card.position }}</h5>
-                {% if card.organization %}
-                <h5 class="sf-person__position sf-person__organization">
-                  {{ card.organization }}
-                </h5>
+                <div class="sf-person__container">
+                  <div class="sf-person__wrapper">
+                    <h4 class="sf-person__title">{{ card.title }}</h4>
+                  </div>
+                  <h5 class="sf-person__position">{{ card.position }}</h5>
+                  {% if card.organization %}
+                  <h5 class="sf-person__position sf-person__organization">
+                    {{ card.organization }}
+                  </h5>
+                </div>
                 {% endif %} {% if card.url %}
                 <a href="{{ card.url }}" target="_blank" class="sf-person__url"
                   >{{ card.url }}</a
@@ -46,7 +50,7 @@ <h5 class="sf-person__position sf-person__organization">
               </div>
             </div>
             <div class="sf-person-wrapper">
-              <div class="sf-person__content">{% area card, 'feedback' %}</div>
+              <div class="sf-person__content">“{{ card.feedback }}”</div>
               {% if card._caseStudy %}
               <div class="card-swiper__case-study">
                 <h5 class="card-swiper__case-study-title">
diff --git a/website/modules/testimonials/index.js b/website/modules/testimonials/index.js
@@ -1,5 +1,3 @@
-const headingToolbar = require('../../lib/headingToolbar');
-
 module.exports = {
   extend: '@apostrophecms/piece-type',
   options: {
@@ -75,15 +73,8 @@ module.exports = {
       },
       feedback: {
         label: 'Feedback',
-        type: 'area',
-        options: {
-          max: 1,
-          widgets: {
-            '@apostrophecms/rich-text': {
-              ...headingToolbar,
-            },
-          },
-        },
+        type: 'string',
+        help: 'Insert the text without quotation marks. They will be added automatically.',
       },
     },
     group: {
diff --git a/website/views/fragments/utilities.html b/website/views/fragments/utilities.html
@@ -72,7 +72,7 @@ <h4 class="sf-team-card__position body-medium">{{ card.title }}</h4>
         </div>
         <div class="card-swiper-back">
           <div class="card-swiper__feedback">
-            {% area card, 'feedback' %}
+            “{{ card.feedback }}”
           </div>
           <hr>
           {% if card._caseStudy and card._caseStudy[0] %}

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`&-expand-button {`
`32`		`- top: 20px;`
	`32`	`+ top: 25px;`
`33`	`33`	`}`
`34`	`34`	`}`
`35`	`35`	`}`
`@@ -46,6 +46,11 @@`
`46`	`46`	`opacity: 1;`
`47`	`47`	`overflow: visible;`
`48`	`48`	`transform: none;`
	`49`	`+ padding-top: 20px;`
	`50`	`+`
	`51`	`+ @include breakpoint-medium {`
	`52`	`+ padding-top: 0;`
	`53`	`+ }`
`49`	`54`	`}`
`50`	`55`	`}`
`51`	`56`	`}`
`@@ -149,7 +154,6 @@`
`149`	`154`	`font-size: 14px;`
`150`	`155`	`line-height: 20px;`
`151`	`156`	`color: $gray-300;`
`152`		`- margin: 0;`
`153`	`157`	`display: block;`
`154`	`158`	`max-height: 0;`
`155`	`159`	`opacity: 0;`
`@@ -166,6 +170,10 @@`
`166`	`170`	`opacity: 1;`
`167`	`171`	`overflow: visible;`
`168`	`172`	`transform: none;`
	`173`	`+`
	`174`	`+ p {`
	`175`	`+ padding-top: 20px;`
	`176`	`+ }`
`169`	`177`	`}`
`170`	`178`	`}`
`171`	`179`
Original file line number	Diff line number	Diff line change
`@@ -37,13 +37,12 @@`
`37`	`37`	`&__bio {`
`38`	`38`	`display: block;`
`39`	`39`	`width: calc(100% - 102px);`
`40`		`- padding: 12px 12px 0 24px;`
	`40`	`+ padding: 4px 12px 0 24px;`
`41`	`41`	`@include breakpoint-medium {`
`42`	`42`	`width: calc(100% - 160px);`
`43`		`- padding: 40px 40px 0;`
	`43`	`+ padding: 32px 40px 0;`
`44`	`44`	`}`
`45`	`45`	`a {`
`46`		`- margin-top: 8px;`
`47`	`46`	`font-size: 11px;`
`48`	`47`	`font-weight: 300;`
`49`	`48`	`color: $gray-500;`
`@@ -57,12 +56,7 @@`
`57`	`56`	`}`
`58`	`57`	`&__title {`
`59`	`58`	`@include breakpoint-medium {`
`60`		`- @include font-settings(14px, 150%, 700);`
`61`		`- }`
`62`		`- }`
`63`		`- &__organization {`
`64`		`- @include breakpoint-medium {`
`65`		`- margin-bottom: 14px;`
	`59`	`+ @include font-settings(14px, 120%, 700);`
`66`	`60`	`}`
`67`	`61`	`}`
`68`	`62`	`&__url {`
`@@ -112,7 +106,7 @@`
`112`	`106`	`margin-bottom: 10px;`
`113`	`107`	`@include font-settings(22px, 110%, 700);`
`114`	`108`	`}`
`115`		`- @include truncate-lines(1);`
	`109`	`+ @include truncate-lines(2);`
`116`	`110`	`}`
`117`	`111`
`118`	`112`	`&__position {`
`@@ -162,7 +156,6 @@`
`162`	`156`	`}`
`163`	`157`	`&__bio {`
`164`	`158`	`width: 100%;`
`165`		`- padding: 12px 12px 12px 24px;`
`166`	`159`	`@include breakpoint-medium {`
`167`	`160`	`padding: 0;`
`168`	`161`	`}`