@transferwise/components 46.136.1 → 46.137.0

package/src/prompt/CriticalBanner/CriticalBanner.less

@@ -0,0 +1,155 @@
+@import (reference) "./CriticalBanner.vars.less";
+
+.wds-critical-banner {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: 0;
+  container-type: inline-size;
+
+  // Animation variables
+  --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
+  --critical-banner-duration: 150ms;
+
+  &--media-image {
+    width: var(--size-48);
+    height: var(--size-48);
+    object-fit: contain;
+  }
+
+  &__title {
+    display: -webkit-box;
+    -webkit-line-clamp: 8;
+    line-clamp: 8;
+    -webkit-box-orient: vertical;
+    max-height: 192px; // ~8 lines (24px line-height × 8) - balanced for common cases
+    overflow: hidden;
+    transition: max-height var(--critical-banner-duration) var(--critical-banner-easing);
+  }
+
+  &--collapsed &__title {
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    max-height: 48px; // ~2 lines (24px line-height × 2)
+  }
+
+  &__description {
+    max-height: 30vh;
+    opacity: 1;
+    overflow: hidden;
+    transition:
+      max-height var(--critical-banner-duration) var(--critical-banner-easing),
+      opacity var(--critical-banner-duration) var(--critical-banner-easing);
+  }
+
+  &--collapsed &__description--with-title {
+    max-height: 0;
+    opacity: 0;
+  }
+
+  // When collapsed WITHOUT a title: show 2 lines
+  &--collapsed &__description:not(&__description--with-title) {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .wds-prompt__content-wrapper {
+    grid-template-columns: auto 1fr auto;
+    align-items: flex-start;
+    transition: row-gap var(--critical-banner-duration) var(--critical-banner-easing);
+  }
+
+  &--collapsed .wds-prompt__content-wrapper {
+    row-gap: 0;
+  }
+
+  &__text-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    text-align: start;
+    min-width: 0;
+    max-width: 480px;
+    height: 100%;
+
+    // Padding prevents text shifting when collapsing/expanding layout shift
+    padding-top: 3px;
+
+    @media (--screen-400-zoom) {
+      padding-top: 0;
+    }
+
+    @container (max-width: 320px) {
+      padding-top: 0;
+    }
+  }
+
+  &--collapsed &__title,
+  &--collapsed &__description {
+    transform: translateY(0);
+  }
+
+  &__toggle {
+    flex-shrink: 0;
+    transition: transform var(--critical-banner-duration) var(--critical-banner-easing);
+
+    &--collapsed {
+      transform: rotate(180deg);
+    }
+
+    @container (min-width: @wds-critical-banner-collapsible-max) {
+      display: none;
+    }
+  }
+
+  /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
+     actions only go full-width below mobile-max token (container query) */
+  .wds-prompt__actions-wrapper {
+    grid-column-start: 2;
+    grid-column-end: 3;
+    max-height: 200px;
+    opacity: 1;
+    overflow: visible;
+
+    @container (max-width: @wds-critical-banner-action-wrapper-max) {
+      grid-column: span 3;
+      width: 100%;
+
+      .wds-Button {
+        flex: 1 1 100%;
+        width: 100%;
+      }
+    }
+  }
+
+  &--collapsed .wds-prompt__actions-wrapper {
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  &--with-two-actions .wds-prompt__actions-wrapper {
+    @container (max-width: @wds-critical-banner-action-wrapper-max) {
+      .wds-Button {
+        flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+        min-width: fit-content;
+      }
+    }
+  }
+}
+
+// Reduced motion support
+@media (prefers-reduced-motion: reduce) {
+  .wds-critical-banner__description,
+  .wds-critical-banner__title,
+  .wds-critical-banner .wds-prompt__content-wrapper,
+  .wds-critical-banner__toggle {
+    transition: none !important;
+  }
+}