@transferwise/components 0.0.0-experimental-fa9fbe9 → 0.0.0-experimental-00012dd

package/src/prompt/CriticalBanner/CriticalBanner.css

@@ -1,134 +0,0 @@
-.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__title {
-  display: -webkit-box;
-  -webkit-line-clamp: 8;
-  line-clamp: 8;
-  -webkit-box-orient: vertical;
-  max-height: 192px;
-  overflow: hidden;
-  transition: max-height var(--critical-banner-duration) var(--critical-banner-easing);
-}
-.wds-critical-banner--collapsed .wds-critical-banner__title {
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  max-height: 48px;
-}
-.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 {
-  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-top: 3px;
-}
-@media (max-width: 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
-}
-@container (--screen-400-zoom) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0px;
-  }
-}
-.wds-critical-banner--collapsed .wds-critical-banner__title,
-.wds-critical-banner--collapsed .wds-critical-banner__description {
-  transform: translateY(0);
-}
-.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: 600px) {
-  .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: 600px) {
-  .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__title,
-  .wds-critical-banner .wds-prompt__content-wrapper,
-  .wds-critical-banner__toggle {
-    transition: none !important;
-  }
-}

package/src/prompt/CriticalBanner/CriticalBanner.less

@@ -1,155 +0,0 @@
-@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 (--screen-400-zoom) {
-      padding-top: 0px;
-    }
-  }
-
-  &--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;
-  }
-}