@transferwise/components 0.0.0-experimental-bd2aa28 → 0.0.0-experimental-17d9e6b

package/src/listItem/ListItem.css

@@ -1,212 +0,0 @@
-.wds-list-item {
-  list-style: none;
-  width: 100%;
-  padding: 0;
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
-  gap: 16px;
-  gap: var(--size-16);
-}
-.wds-list-item .partially-interactive {
-  padding: 16px;
-  padding: var(--size-16);
-}
-.wds-list-item label,
-.wds-list-item a {
-  padding: 16px;
-  padding: var(--size-16);
-}
-.wds-list-item-interactive label {
-  cursor: pointer;
-}
-.wds-list-item-interactive:hover {
-  background-color: var(--color-background-screen-hover);
-}
-.wds-list-item-interactive:hover .wds-list-item-control .wds-Button {
-  background-color: var(--Button-background-hover);
-  color: var(--Button-color-hover);
-  transition: none;
-}
-.wds-list-item-interactive:active {
-  background-color: var(--color-background-screen-active);
-}
-.wds-list-item-interactive .wds-list-item-control .wds-Button {
-  transition: none;
-}
-.wds-list-item-media-image {
-  width: var(--item-media-image-size);
-  height: var(--item-media-image-size);
-}
-.wds-list-item-body {
-  width: 100%;
-}
-.wds-list-item-title {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-list-item-additional-info {
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
-.wds-list-item-value {
-  flex: 0 0 auto;
-}
-.wds-list-item-control {
-  flex: 0 0 auto;
-}
-.wds-list-item-navigation,
-.wds-list-item-navigation:hover,
-.wds-list-item-navigation:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-.wds-list-item-spotlight-active {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-neutral-active);
-}
-.wds-list-item-spotlight-inactive {
-  background-color: rgba(134, 167, 189, 0.025);
-  border: 1px dashed rgba(0,0,0,0.10196);
-  border: 1px dashed var(--color-border-neutral);
-}
-@supports (color: color-mix(in lch, red, blue)) {
-.wds-list-item-spotlight-inactive {
-  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-}
-}
-.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
-  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
-}
-.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
-  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
-}
-.wds-list-item-prompt {
-  display: inline-flex;
-  padding-top: calc(8px / 2);
-  padding-top: calc(var(--padding-x-small) / 2);
-  padding-bottom: calc(8px / 2);
-  padding-bottom: calc(var(--padding-x-small) / 2);
-  padding-left: calc(8px - 1px);
-  padding-left: calc(var(--padding-x-small) - 1px);
-  padding-right: 8px;
-  padding-right: var(--padding-x-small);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  word-break: break-word;
-  word-wrap: break-word;
-}
-.wds-list-item-prompt .np-prompt-icon {
-  padding-right: calc(12px / 2);
-  padding-right: calc(var(--size-12) / 2);
-  padding-top: calc(4px - 1px);
-  padding-top: calc(var(--size-4) - 1px);
-  padding-bottom: calc(4px - 1px);
-  padding-bottom: calc(var(--size-4) - 1px);
-}
-.wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
-.wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-list-item-prompt a {
-  text-underline-offset: calc(4px / 2);
-  text-underline-offset: calc(var(--size-4) / 2);
-}
-.wds-list-item-prompt.np-prompt-interactive {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  border: none;
-}
-.wds-list-item-prompt.negative {
-  background-color: var(--color-sentiment-negative-secondary);
-  color: var(--color-sentiment-negative-primary);
-}
-.wds-list-item-prompt.negative a {
-  color: var(--color-sentiment-negative-primary);
-}
-.wds-list-item-prompt.negative a:hover {
-  color: var(--color-sentiment-negative-primary-hover);
-}
-.wds-list-item-prompt.negative a:active {
-  color: var(--color-sentiment-negative-primary-active);
-}
-.np-prompt-interactive.wds-list-item-prompt.negative:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
-}
-.np-prompt-interactive.wds-list-item-prompt.negative:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
-}
-.wds-list-item-prompt.positive,
-.wds-list-item-prompt.discount,
-.wds-list-item-prompt.savings {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-list-item-prompt.positive a,
-.wds-list-item-prompt.discount a,
-.wds-list-item-prompt.savings a {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-list-item-prompt.positive a:hover,
-.wds-list-item-prompt.discount a:hover,
-.wds-list-item-prompt.savings a:hover {
-  color: var(--color-sentiment-positive-primary-hover);
-}
-.wds-list-item-prompt.positive a:active,
-.wds-list-item-prompt.discount a:active,
-.wds-list-item-prompt.savings a:active {
-  color: var(--color-sentiment-positive-primary-active);
-}
-.np-prompt-interactive.wds-list-item-prompt.positive:hover,
-.np-prompt-interactive.wds-list-item-prompt.discount:hover,
-.np-prompt-interactive.wds-list-item-prompt.savings:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
-}
-.np-prompt-interactive.wds-list-item-prompt.positive:active,
-.np-prompt-interactive.wds-list-item-prompt.discount:active,
-.np-prompt-interactive.wds-list-item-prompt.savings:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
-}
-.wds-list-item-prompt.neutral {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-list-item-prompt.neutral a {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-prompt-interactive.wds-list-item-prompt.neutral:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-prompt-interactive.wds-list-item-prompt.neutral:active {
-  background-color: var(--color-background-neutral-active);
-}
-.wds-list-item-prompt.warning {
-  background-color: var(--color-sentiment-warning-secondary);
-  color: var(--color-sentiment-warning-content);
-}
-.wds-list-item-prompt.warning a {
-  color: var(--color-sentiment-warning-content);
-}
-.wds-list-item-prompt.warning a:hover {
-  color: var(--color-sentiment-warning-content-hover);
-}
-.wds-list-item-prompt.warning a:active {
-  color: var(--color-sentiment-warning-content-active);
-}
-.np-prompt-interactive.wds-list-item-prompt.warning:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
-}
-.np-prompt-interactive.wds-list-item-prompt.warning:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
-}

package/src/listItem/ListItem.less

@@ -1,210 +0,0 @@
-.wds-list-item {
-    list-style: none;
-    width: 100%;
-    padding: 0;
-    border-radius: var(--radius-medium);
-    background-color: var(--color-background-screen);
-    gap: var(--size-16);
-
-    .partially-interactive {
-      padding: var(--size-16);
-    }
-
-    label, a {
-      padding: var(--size-16);
-    }
-
-    &-interactive {
-      label {
-        cursor: pointer;
-      }
-      &:hover {
-          background-color: var(--color-background-screen-hover);
-          .wds-list-item-control {
-             .wds-Button {
-               background-color: var(--Button-background-hover);
-               color: var(--Button-color-hover);
-               transition: none;
-             }
-         }
-      }
-      &:active {
-          background-color: var(--color-background-screen-active);
-      }
-      .wds-list-item-control {
-         .wds-Button {
-           transition: none;
-         }
-       }
-    }
-
-    &-media {
-
-        &-image {
-            width: var(--item-media-image-size);
-            height: var(--item-media-image-size);
-        }
-    }
-
-    &-body {
-      width: 100%;
-    }
-
-    &-title {
-        color: var(--color-content-primary);
-    }
-
-    &-additional-info {
-        color: var(--color-content-tertiary);
-    }
-
-    &-value {
-      flex: 0 0 auto;
-    }
-    
-    &-control {
-        flex: 0 0 auto;
-    }
-
-    &-navigation {
-      &, &:hover, &:focus {
-        text-decoration: none;
-      }
-    }
-
-    &-spotlight {
-        &-active {
-            background-color: var(--color-background-neutral);
-            &:not(.disabled, :disabled):hover {
-                background-color: var(--color-background-neutral-hover);
-            }
-            &:not(.disabled, :disabled):active {
-                background-color: var(--color-background-neutral-active);
-            }
-        }
-
-        &-inactive {
-            background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-            border: 1px dashed var(--color-border-neutral);
-            &:not(.disabled, :disabled):hover {
-                background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
-            }
-            &:not(.disabled, :disabled):active {
-                background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
-            }
-        }
-    }
-
-    &-prompt {
-        display: inline-flex;
-        padding-top: calc(var(--padding-x-small) / 2);
-        padding-bottom: calc(var(--padding-x-small) / 2);
-        padding-left: calc(var(--padding-x-small) - 1px);
-        padding-right: var(--padding-x-small);
-        border-radius: var(--radius-small);
-        word-break: break-word;
-        overflow-wrap: break-word;
-        
-        .np-prompt-icon {
-          padding-right: calc(var(--size-12) / 2);
-          padding-top: calc(var(--size-4) - 1px);
-          padding-bottom: calc(var(--size-4) - 1px);
-      
-          .tw-icon-tags,
-          .tw-icon-confetti {
-            color: var(--color-sentiment-positive-primary);
-          }
-        }
-      
-        a {
-          text-underline-offset: calc(var(--size-4) / 2); 
-        }
-      
-        &.np-prompt-interactive {
-          text-decoration: none;
-          cursor: pointer;
-          border: none;
-        }
-      
-        &.negative {
-          background-color: var(--color-sentiment-negative-secondary);
-          color: var(--color-sentiment-negative-primary);
-          a {
-            color: var(--color-sentiment-negative-primary);
-            &:hover {
-              color: var(--color-sentiment-negative-primary-hover);
-            }
-            &:active {
-              color: var(--color-sentiment-negative-primary-active);
-            }
-          }
-          .np-prompt-interactive& {
-            &:hover {
-              background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
-            }
-            &:active {
-              background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
-            }
-          }
-        }
-        &.positive,
-        &.discount,
-        &.savings {
-          background-color: var(--color-sentiment-positive-secondary);
-          color: var(--color-sentiment-positive-primary);
-          a {
-            color: var(--color-sentiment-positive-primary);
-            &:hover {
-              color: var(--color-sentiment-positive-primary-hover);
-            }
-            &:active {
-              color: var(--color-sentiment-positive-primary-active);
-            }
-          }
-          .np-prompt-interactive& {
-            &:hover {
-              background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
-            }
-            &:active {
-              background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
-            }
-          }
-        }
-        &.neutral {
-          background-color: var(--color-background-neutral);
-          color: var(--color-content-primary);
-          a {
-            color: var(--color-content-primary);
-          }
-          .np-prompt-interactive& {
-            &:hover {
-              background-color: var(--color-background-neutral-hover);
-            }
-            &:active {
-              background-color: var(--color-background-neutral-active);
-            }
-          }
-        }
-        &.warning {
-          background-color: var(--color-sentiment-warning-secondary);
-          color: var(--color-sentiment-warning-content);
-          a {
-            color: var(--color-sentiment-warning-content);
-            &:hover {
-              color: var(--color-sentiment-warning-content-hover);
-            }
-            &:active {
-              color: var(--color-sentiment-warning-content-active);
-            }
-          }
-          .np-prompt-interactive& {
-            &:hover {
-              background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
-            }
-            &:active {
-              background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
-            }
-          }
-        } 
-    }
-}

package/src/listItem/ListItem.spec.tsx

@@ -1,35 +0,0 @@
-import { render, screen } from '../test-utils';
-import ListItem from './ListItem';
-
-describe('ListItem', () => {
-  describe('spotlight', () => {
-    it('only fully interactive variant can have spotlight:active', () => {
-      render(<ListItem title="Test Title" spotlight="active" control={<ListItem.Navigation />} />);
-      const listItem = screen.getByRole('listitem');
-      expect(listItem).toHaveClass('wds-list-item-interactive');
-      expect(listItem).toHaveClass('wds-list-item-spotlight-active');
-    });
-
-    it('only fully interactive variant can have spotlight:inactive', () => {
-      render(
-        <ListItem
-          title="Test Title"
-          spotlight="inactive"
-          control={<ListItem.Switch onClick={() => {}} />}
-        />,
-      );
-      const listItem = screen.getByRole('listitem');
-      expect(listItem).toHaveClass('wds-list-item-interactive');
-      expect(listItem).toHaveClass('wds-list-item-spotlight-inactive');
-    });
-
-    it('non interactive variant can have spotlight', () => {
-      render(<ListItem title="Test Title" spotlight="inactive" />);
-      const listItem = screen.getByRole('listitem');
-      expect(listItem).toHaveClass('wds-list-item-non-interactive');
-      expect(listItem).not.toHaveClass('wds-list-item-interactive');
-      expect(listItem).not.toHaveClass('wds-list-item-spotlight-inactive');
-      expect(listItem).not.toHaveClass('wds-list-item-spotlight-active');
-    });
-  });
-});