@transferwise/components 0.0.0-experimental-38195a1 → 0.0.0-experimental-4f26f19

package/src/PromoCard/PromoCard.css

@@ -21,18 +21,24 @@
   margin-inline: auto;
   inline-size: 100%;
   block-size: auto;
+  inline-size: calc(100% + 48px);
   inline-size: calc(100% + var(--size-48));
+  inset-inline-start: calc(24px * -1);
   inset-inline-start: calc(var(--size-24) * -1);
   position: relative;
 }
 .np-Card-description {
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-Card-indicator {
   position: absolute;
+  inset-inline-end: 8px;
   inset-inline-end: var(--size-8);
+  inset-block-end: 8px;
   inset-block-end: var(--size-8);
   display: flex;
+  gap: 4px;
   gap: var(--size-4);
 }
 .np-Card-indicatorText {
@@ -40,6 +46,7 @@
   vertical-align: middle;
   text-align: start;
   background: var(--Card-indicator-text-background-color);
+  padding: 16px;
   padding: var(--size-16);
   border-radius: 100px;
 }
@@ -91,7 +98,9 @@
 .np-Card--checked:focus-visible:not(.is-disabled):not(:disabled),
 .np-Card--link:focus-visible:not(.is-disabled):not(:disabled) {
   --Card-image-scale: 1.1;
+  outline: var(--ring-outline-color) solid 4px;
   outline: var(--ring-outline-color) solid var(--size-4);
+  outline-offset: 4px;
   outline-offset: var(--size-4);
   box-shadow: var(--Card-box-shadow);
 }
@@ -100,6 +109,7 @@
   outline: none;
 }
 .np-Card--link .np-Card-titleLink {
+  color: #37517e;
   color: var(--color-content-primary);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -118,17 +128,23 @@
   z-index: 10;
 }
 .np-Card--checked.is-checked {
+  box-shadow: 0 0 0 4px var(--color-interactive-primary);
   box-shadow: 0 0 0 var(--size-4) var(--color-interactive-primary);
 }
 .np-Card--checked.is-checked .np-Card-check {
   color: var(--Card-check-color);
   background: var(--Card-check-background-color);
+  border-radius: 9999px;
   border-radius: var(--radius-full);
   display: flex;
+  block-size: 40px;
   block-size: var(--size-40);
   position: absolute;
+  inset-inline-end: 8px;
   inset-inline-end: var(--size-8);
+  inset-block-start: 8px;
   inset-block-start: var(--size-8);
+  inline-size: 40px;
   inline-size: var(--size-40);
   justify-content: center;
   align-items: center;
@@ -139,6 +155,7 @@
 .np-CardGroup {
   display: flex;
   flex-direction: column;
+  gap: 24px;
   gap: var(--size-24);
   inline-size: 100%;
 }

package/src/Prompt/ActionPrompt/ActionPrompt.css

@@ -6,7 +6,9 @@
   --Prompt-border-radius: var(--radius-large);
 }
 .wds-action-prompt--media-image {
+  inline-size: 48px;
   inline-size: var(--size-48);
+  block-size: 48px;
   block-size: var(--size-48);
   -o-object-fit: contain;
      object-fit: contain;
@@ -24,5 +26,6 @@
   }
 }
 .wds-action-prompt__content {
+  max-inline-size: calc(48px * 10);
   max-inline-size: calc(var(--size-48) * 10);
 }

package/src/Prompt/ActionPrompt/_stories/ActionPrompt.test.story.tsx

@@ -315,7 +315,6 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
-    fixedRows: { heights: 'auto' },
     i18n: {
       defaultIconTitle: { en: 'Default status icon', ar: 'أيقونة الحالة الافتراضية' },
       defaultIconDescription: {

package/src/Prompt/CriticalBanner/CriticalBanner.css

@@ -19,7 +19,9 @@
   background: var(--critical-banner-background);
 }
 .wds-critical-banner--media-image {
+  inline-size: 48px;
   inline-size: var(--size-48);
+  block-size: 48px;
   block-size: var(--size-48);
   -o-object-fit: contain;
      object-fit: contain;
@@ -137,6 +139,7 @@
           )
           100% 0 / var(--critical-banner-mobile-overhang-size)
           var(--critical-banner-mobile-overhang-size) no-repeat;
+    margin-block-end: 32px;
     margin-block-end: var(--critical-banner-mobile-overhang-size);
   }
   .wds-critical-banner-overhang-query .wds-critical-banner-overhang::after {

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.test.story.tsx

@@ -515,7 +515,6 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
-    fixedRows: { heights: [10, 12, 12, 13, 13] },
     renderAs: 'iframe',
     i18n: {
       titleOnly: { en: 'Title only', ar: 'العنوان فقط' },

package/src/Prompt/InfoPrompt/InfoPrompt.css

@@ -8,6 +8,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  max-inline-size: calc(48px * 10);
   max-inline-size: calc(var(--size-48) * 10);
 }
 .wds-info-prompt__content:has(.wds-info-prompt__title) {
@@ -23,7 +24,9 @@
   margin-block-start: var(--Prompt-gap);
 }
 .wds-info-prompt__media svg {
+  inline-size: 24px;
   inline-size: var(--size-24);
+  block-size: 24px;
   block-size: var(--size-24);
 }
 .wds-info-prompt .wds-prompt__media-wrapper {
@@ -31,21 +34,25 @@
 }
 @media (max-width: 320px) {
   .wds-info-prompt .wds-prompt__media-wrapper {
+    padding-block-start: 4px;
     padding-block-start: var(--size-4);
   }
 }
 @media (max-width: 320px) {
   .wds-info-prompt .wds-prompt__media-wrapper:has(.wds-info-prompt__media > .tw-icon) {
+    padding-block-start: 8px;
     padding-block-start: var(--size-8);
   }
 }
 @media (max-width: 320px) {
   .wds-info-prompt .wds-prompt__media-wrapper:has(+ .wds-info-prompt__content .wds-info-prompt__title:first-child) {
+    padding-block-start: 8px;
     padding-block-start: var(--size-8);
   }
 }
 @media (max-width: 320px) {
   .wds-info-prompt .wds-prompt__media-wrapper:has(+ .wds-info-prompt__content .wds-info-prompt__title:first-child):has(.wds-info-prompt__media > .tw-icon) {
+    padding-block-start: 12px;
     padding-block-start: var(--size-12);
   }
 }

package/src/Prompt/InfoPrompt/_stories/InfoPrompt.test.story.tsx

@@ -583,7 +583,6 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
-    fixedRows: { heights: 'auto' },
     i18n: {
       basicDescription: { en: 'Basic description only.', ar: 'الوصف الأساسي فقط.' },
       withTitleHeading: { en: 'With Title', ar: 'مع عنوان' },

package/src/Prompt/InlinePrompt/InlinePrompt.css

@@ -3,6 +3,7 @@
   --Prompt-padding-x: var(--padding-x-small);
   --Prompt-padding-y: calc(var(--padding-x-small) / 2);
   display: inline-flex;
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .wds-inline-prompt:has(a),
@@ -28,6 +29,7 @@
 .wds-inline-prompt a,
 .wds-inline-prompt button {
   color: var(--color-sentiment-content-primary);
+  text-underline-offset: calc(4px / 2);
   text-underline-offset: calc(var(--size-4) / 2);
 }
 .wds-inline-prompt a:hover,
@@ -45,7 +47,9 @@
   inset: 0;
 }
 .wds-inline-prompt .wds-inline-prompt-process-indicator {
+  inline-size: 16px;
   inline-size: var(--size-16);
+  block-size: 16px;
   block-size: var(--size-16);
 }
 .wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {

package/src/Prompt/InlinePrompt/_stories/InlinePrompt.test.story.tsx

@@ -47,7 +47,6 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
-    fixedRows: { heights: 'auto' },
     i18n: {
       defaultIcon: {
         en: 'Short content with default icon.',

package/src/Prompt/PrimitivePrompt/PrimitivePrompt.css

@@ -1,9 +1,13 @@
 .wds-prompt {
+  border-radius: 10px;
   border-radius: var(--Prompt-border-radius, var(--radius-small));
   display: flex;
+  gap: 16px;
   gap: var(--Prompt-gap, var(--size-16));
   word-wrap: break-word;
+  padding-block: 8px;
   padding-block: var(--Prompt-padding-y, var(--padding-x-small));
+  padding-inline: 8px;
   padding-inline: var(--Prompt-padding-x, var(--padding-x-small));
   text-align: start;
   word-break: break-word;
@@ -11,7 +15,9 @@
 }
 .wds-prompt__content-wrapper {
   display: grid;
+  grid-gap: 16px;
   grid-gap: var(--Prompt-gap, var(--size-16));
+  gap: 16px;
   gap: var(--Prompt-gap, var(--size-16));
   grid-template-columns: auto 1fr;
   inline-size: 100%;
@@ -21,8 +27,8 @@
 }
 .wds-prompt__media-wrapper {
   align-self: flex-start;
-  align-content: center;
-  min-block-size: calc(var(--wds-line-height-body) * var(--wds-font-size-body));
+  padding-block-start: calc(4px - 1px);
+  padding-block-start: calc(var(--size-4) - 1px);
 }
 .wds-prompt__media-wrapper .tw-icon-tags,
 .wds-prompt__media-wrapper .tw-icon-confetti {
@@ -31,6 +37,7 @@
 .wds-prompt__actions-wrapper {
   display: flex;
   flex-wrap: wrap;
+  gap: 8px;
   gap: var(--Prompt-actions-gap, var(--size-8));
   grid-column-start: 2;
   grid-column-end: 3;
@@ -52,8 +59,12 @@
   --offset: calc(-1 * var(--Prompt-padding-x, var(--padding-x-small)));
   content: "";
   position: absolute;
+  inset: calc(-1 * 8px);
   inset: var(--offset);
+  inline-size: calc(24px + 8px * 2);
   inline-size: var(--size);
+  block-size: calc(24px + 8px * 2);
   block-size: var(--size);
+  border-radius: 10px;
   border-radius: var(--Prompt-border-radius, var(--radius-small));
 }

package/src/Prompt/PrimitivePrompt/PrimitivePrompt.less

@@ -22,8 +22,7 @@
 
   &__media-wrapper {
     align-self: flex-start;
-    align-content: center;
-    min-height: calc(var(--wds-line-height-body) * var(--wds-font-size-body));
+    padding-top: calc(var(--size-4) - 1px);
 
     .tw-icon-tags,
     .tw-icon-confetti {

package/src/Section/Section.css

@@ -1,7 +1,10 @@
 .np-section {
+  margin-block-start: 32px;
   margin-block-start: var(--size-32);
 }
 .np-section--with-horizontal-padding {
+  padding-inline-end: 16px;
   padding-inline-end: var(--space-content-horizontal);
+  padding-inline-start: 16px;
   padding-inline-start: var(--space-content-horizontal);
 }

package/src/SegmentedControl/SegmentedControl.css

@@ -6,11 +6,14 @@
 .segmented-control__segments {
   display: inline-flex;
   position: relative;
+  padding: 4px;
   padding: var(--size-4);
   inline-size: 100%;
   justify-content: center;
   align-items: center;
+  background: rgba(134,167,189,0.10196);
   background: var(--color-background-neutral);
+  border-radius: 24px;
   border-radius: var(--size-24);
   transition: outline 300ms;
   outline: 2px solid transparent;
@@ -22,11 +25,15 @@
   content: "";
   position: absolute;
   inline-size: var(--segment-highlight-width);
+  inset-block-start: 4px;
   inset-block-start: var(--size-4);
+  inset-block-end: 4px;
   inset-block-end: var(--size-4);
   inset-inline-start: var(--segment-highlight-x);
   z-index: 0;
+  background: #ffffff;
   background: var(--color-background-screen);
+  border-radius: 24px;
   border-radius: var(--size-24);
   transition: left 300ms,
     right 300ms;
@@ -38,15 +45,19 @@
   position: relative;
   flex: 1 1 100%;
   flex-flow: column;
+  padding-block: 8px;
   padding-block: var(--size-8);
+  padding-inline: 16px;
   padding-inline: var(--size-16);
   margin-block: 0 0;
+  margin-inline: 4px 0;
   margin-inline: var(--size-4) 0;
   min-inline-size: 0;
   line-height: inherit;
   align-items: center;
   text-align: center;
   vertical-align: middle;
+  border-radius: 24px;
   border-radius: var(--size-24);
   z-index: 1;
   cursor: pointer;
@@ -57,6 +68,7 @@
   margin-inline-start: 0;
 }
 .segmented-control__segment:hover {
+  background: rgba(0,0,0,0.10196);
   background: var(--color-background-overlay);
 }
 .segmented-control__radio-input {

package/src/SentimentSurface/_stories/SentimentSurface.story.tsx

@@ -564,7 +564,7 @@ export const ExposedTokens: Story = {
             }}
           >
             <h4
-              className="d-block m-b-2 text-capitalize wds-text-title-body"
+              className="d-block m-b-2 text-capitalize np-text-title-body"
               style={{
                 color: 'inherit',
               }}

package/src/SlidingPanel/SlidingPanel.css

@@ -1,6 +1,7 @@
 .sliding-panel {
   transform: translateX(-100%)  ;
   transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
+  background: #ffffff;
   background: var(--color-background-elevated);
   z-index: 1030;
   position: absolute;
@@ -65,20 +66,26 @@
   box-shadow: inset -1px 0 0 0 #e2e6e8;
 }
 .np-theme-personal .sliding-panel.sliding-panel--border-top {
+  box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset 0 -1px 0 0 var(--color-border-neutral);
 }
 .np-theme-personal .sliding-panel.sliding-panel--border-right {
+  box-shadow: inset 1px 0 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
 }
 [dir="rtl"] .np-theme-personal .sliding-panel.sliding-panel--border-right {
+  box-shadow: inset -1px 0 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
 }
 .np-theme-personal .sliding-panel.sliding-panel--border-bottom {
+  box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset 0 1px 0 0 var(--color-border-neutral);
 }
 .np-theme-personal .sliding-panel.sliding-panel--border-left {
+  box-shadow: inset -1px 0 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
 }
 [dir="rtl"] .np-theme-personal .sliding-panel.sliding-panel--border-left {
+  box-shadow: inset 1px 0 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
 }

package/src/Snackbar/Snackbar.css

@@ -1,71 +1,129 @@
-.snackbar {
-  text-align: center;
+.wds-Snackbar {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-inline: 16px;
+  padding-inline: var(--size-16);
+  padding-block-end: calc(16px + env(safe-area-inset-bottom));
+  padding-block-end: calc(var(--size-16) + env(safe-area-inset-bottom));
   position: fixed;
   inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
+  inset-inline: 0;
   z-index: 1060;
 }
-.snackbar__text {
-  background: #37517e;
-  color: #ffffff;
-  display: inline-flex;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-  align-items: center;
-  justify-content: space-between;
+@media (min-width: 600px) {
+  .wds-Snackbar {
+    padding-block-end: 24px;
+    padding-block-end: var(--size-24);
+  }
+}
+.wds-Snackbar-container {
+  --Prompt-border-radius: var(--radius-medium);
+  --Prompt-gap: var(--size-8);
+  --Prompt-padding-x: var(--size-12);
+  --Prompt-padding-y: var(--size-12);
+  box-sizing: border-box;
+  max-inline-size: 480px;
   text-align: start;
-  font-size: var(--wds-font-size-body);
-  margin-block: 0;
-  margin-inline: var(--size-16);
-  padding-block: var(--size-8);
-  padding-inline: var(--size-16);
-  inline-size: calc(100% - var(--size-32));
-  transition: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
-.np-theme-personal .snackbar__text {
-  box-shadow: 0 2px 4px 0 rgba(69, 71, 69, 0.35);
-  position: relative;
-  background: var(--color-contrast-theme);
-  border-radius: var(--radius-small);
-  color: var(--color-contrast-overlay);
+.wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+  grid-template-columns: auto minmax(0, 1fr);
 }
-.np-theme-personal .snackbar__text::after {
-  display: block;
-  border-radius: inherit;
-  block-size: 100%;
-  inline-size: 100%;
-  content: "";
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  z-index: -1;
-  background-color: var(--color-background-neutral);
-}
-.np-theme-personal--dark .snackbar__text,
-.np-theme-personal--forest-green .snackbar__text {
-  box-shadow: none;
+@media (min-width: 600px) {
+  .wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+}
+.wds-Snackbar-container .wds-prompt__media-wrapper {
+  display: flex;
+  align-items: center;
+  min-block-size: max(32px, 1lh);
+  min-block-size: max(var(--size-32), 1lh);
+  padding-block-start: 0;
+  color: var(--color-sentiment-content-primary);
+}
+.wds-Snackbar-container .wds-prompt__media-wrapper:has(+ .wds-Snackbar__content .wds-Snackbar__action) {
+  min-block-size: max(32px, calc(1lh + 5px * 2));
+  min-block-size: max(var(--size-32), calc(1lh + var(--size-5) * 2));
+}
+.wds-Snackbar__media-asset {
+  display: flex;
+}
+.wds-Snackbar__media-asset svg {
+  inline-size: 24px;
+  inline-size: var(--size-24);
+  block-size: 24px;
+  block-size: var(--size-24);
+}
+.wds-Snackbar-container .wds-prompt__dismiss {
+  display: none;
+  align-self: flex-start;
+  margin-block-start: calc(4px - 1px);
+  margin-block-start: calc(var(--size-4) - 1px);
 }
 @media (min-width: 600px) {
-  .snackbar__text {
-    inline-size: auto;
-    max-inline-size: 600px;
+  .wds-Snackbar-container .wds-prompt__dismiss {
+    display: flex;
   }
 }
-.snackbar__text__action {
+.wds-Snackbar__action {
   flex-shrink: 0;
-  margin-inline-start: var(--size-16);
 }
-.snackbar__text-container-enter,
-.snackbar__text-container-exit {
-  transform: translateY(calc(100% + 10px));
+.wds-Snackbar__content {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  gap: var(--size-8);
+  flex: 1 0 0;
+  min-block-size: 32px;
+  min-block-size: var(--size-32);
+  min-inline-size: 0;
 }
-.snackbar__text-container-enter-active {
-  transform: translateY(-16px);
-  transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
+.wds-Snackbar__message {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  inline-size: auto;
+  flex: 1 0 0;
+  min-inline-size: 0;
+  align-self: stretch;
 }
-@media (min-width: 600px) {
-  .snackbar__text-container-enter-active {
-    transform: translateY(-24px);
+.wds-Snackbar__body {
+  display: block;
+}
+.wds-Snackbar-container-appear,
+.wds-Snackbar-container-enter {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
+}
+.wds-Snackbar-container-appear-active,
+.wds-Snackbar-container-enter-active {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  transition: opacity 150ms linear, transform var(--Snackbar-enter-duration) cubic-bezier(0, 0, 0, 1);
+}
+.wds-Snackbar-container-exit {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+.wds-Snackbar-container-exit-active {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
+  transition: opacity 50ms linear 50ms, transform var(--Snackbar-exit-duration) cubic-bezier(1, 0, 1, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .wds-Snackbar-container-appear,
+  .wds-Snackbar-container-appear-active,
+  .wds-Snackbar-container-enter,
+  .wds-Snackbar-container-enter-active,
+  .wds-Snackbar-container-exit {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+  .wds-Snackbar-container-exit-active {
+    opacity: 0;
+    transform: none;
+    transition: none;
   }
 }