@transferwise/components 0.0.0-experimental-d73d39f → 0.0.0-experimental-807a5a3

package/src/prompt/CriticalBanner/CriticalBanner.css

@@ -0,0 +1,108 @@
+.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;
+  --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
+  --critical-banner-duration: 150ms;
+  /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
+     actions only go full-width below mobile-max token (container query) */
+}
+.wds-critical-banner--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.wds-critical-banner--collapsed .wds-critical-banner__title {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.wds-critical-banner__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);
+}
+.wds-critical-banner--collapsed .wds-critical-banner__description--with-title {
+  max-height: 0;
+  opacity: 0;
+}
+.wds-critical-banner--collapsed .wds-critical-banner__description:not(.wds-critical-banner__description--with-title) {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.wds-critical-banner .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);
+}
+.wds-critical-banner--collapsed .wds-prompt__content-wrapper {
+  row-gap: 0;
+}
+.wds-critical-banner__text-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  max-width: 480px;
+  height: 100%;
+}
+.wds-critical-banner__toggle {
+  flex-shrink: 0;
+  transition: transform var(--critical-banner-duration) var(--critical-banner-easing);
+}
+.wds-critical-banner__toggle--collapsed {
+  transform: rotate(180deg);
+}
+@container (min-width: 768px) {
+  .wds-critical-banner__toggle {
+    display: none;
+  }
+}
+.wds-critical-banner .wds-prompt__actions-wrapper {
+  grid-column-start: 2;
+  grid-column-end: 3;
+  max-height: 200px;
+  opacity: 1;
+  overflow: visible;
+}
+@container (max-width: 480px) {
+  .wds-critical-banner .wds-prompt__actions-wrapper {
+    grid-column: span 3;
+    width: 100%;
+  }
+  .wds-critical-banner .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 100%;
+    width: 100%;
+  }
+}
+.wds-critical-banner--collapsed .wds-prompt__actions-wrapper {
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+@container (max-width: 480px) {
+  .wds-critical-banner--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .wds-critical-banner__description,
+  .wds-critical-banner .wds-prompt__content-wrapper,
+  .wds-critical-banner__toggle {
+    transition: none !important;
+  }
+}

package/src/prompt/CriticalBanner/CriticalBanner.less

@@ -0,0 +1,127 @@
+@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;
+  }
+
+  &--collapsed &__title {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  &__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 {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-width: 0;
+    max-width: 480px;
+    height: 100%;
+  }
+
+  &__toggle {
+    flex-shrink: 0;
+    transition: transform var(--critical-banner-duration) var(--critical-banner-easing);
+
+    &--collapsed {
+      transform: rotate(180deg);
+    }
+
+    @container (min-width: @wds-critical-banner-cq-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-cq-buttons-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-cq-buttons-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 .wds-prompt__content-wrapper,
+  .wds-critical-banner__toggle {
+    transition: none !important;
+  }
+}