@phillips/seldon 1.145.0 → 1.146.0

package/dist/scss/components/Toast/_toast.scss

@@ -0,0 +1,95 @@
+@use '../../allPartials' as *;
+
+.#{$px}-toast {
+  align-items: center;
+  background-color: $primary-black;
+  border-radius: 4px;
+  box-shadow: 0 6px 14px 0 $primary-black;
+  color: $white;
+  column-gap: $spacing-sm;
+  display: grid;
+  grid-template-areas: 'title action';
+  grid-template-columns: auto max-content;
+  padding: $spacing-xsm $spacing-sm;
+
+  &__content {
+    display: flex;
+    gap: $spacing-sm;
+  }
+
+  &__action {
+    color: $cta-blue;
+
+    &:hover {
+      color: $white;
+    }
+  }
+
+  &[data-state='open'] {
+    animation: slide-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-state='closed'] {
+    animation: hide 100ms ease-in;
+  }
+
+  &[data-swipe='move'] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+  }
+
+  &[data-swipe='cancel'] {
+    transform: translateX(0);
+    transition: transform 200ms ease-out;
+  }
+
+  &[data-swipe='end'] {
+    animation: swipeOut 100ms ease-out;
+  }
+}
+
+@keyframes hide {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes swipe-out {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+
+  to {
+    transform: translateX(calc(100% + #{$spacing-lg}));
+  }
+}
+
+.#{$px}-toast-viewport {
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+  left: 0;
+  list-style: none;
+  margin: 0;
+  max-width: 100vw;
+  outline: none;
+  padding: $spacing-lg;
+  position: fixed;
+  z-index: 99999;
+}

package/dist/scss/patterns/AccountPageHeader/_accountPageHeader.scss

@@ -8,7 +8,12 @@
     width: 100%;
   }
 
-  &__header {
+  &__title {
+    // To help center the title, accounts for the extra space inside the span below the text
+    margin-top: $spacing-micro;
+  }
+
+  &__title-wrapper {
     align-items: center;
     display: flex;
     gap: $spacing-md;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.145.0",
+  "version": "1.146.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -49,6 +49,7 @@
     "@radix-ui/react-popover": "^1.1.11",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-toast": "^1.2.11",
     "@types/dompurify": "^3.0.5",
     "change-case": "^5.4.4",
     "classnames": "^2.5.1",
@@ -68,7 +69,8 @@
     "react-remove-scroll": "^2.6.3",
     "react-transition-group": "^4.4.5",
     "react-zoom-pan-pinch": "^3.6.1",
-    "usehooks-ts": "^3.1.0"
+    "usehooks-ts": "^3.1.0",
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.3",
@@ -103,6 +105,7 @@
     "@types/react-dom": "^18.0.11",
     "@types/react-modal": "^3.16.3",
     "@types/react-transition-group": "^4.4.11",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.3.1",