@vitality-ds/components 4.0.0-alpha.0

package/dist/esm/Toaster/components/AnimatedToast/index.js

@@ -0,0 +1,44 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback } from "react";
+import { ToastProvider } from "../../ToastProvider";
+import Toast from "../Toast";
+import useContainerAnimations from "./hooks/useContainerAnimations";
+import { getContainerAnimationStyles, getToastAnimationStyles } from "./logic";
+function AnimatedToast(_ref) {
+  var toast = _ref.toast,
+    setHover = _ref.setHover,
+    removeToast = _ref.removeToast;
+  var id = toast.id,
+    type = toast.type,
+    title = toast.title,
+    message = toast.message,
+    hideIcon = toast.options.hideIcon;
+  var _useContainerAnimatio = useContainerAnimations(toast, getContainerAnimationStyles, getToastAnimationStyles),
+    _useContainerAnimatio2 = _slicedToArray(_useContainerAnimatio, 3),
+    containerStyles = _useContainerAnimatio2[0],
+    toastStyles = _useContainerAnimatio2[1],
+    toastRef = _useContainerAnimatio2[2];
+  var onClose = useCallback(function () {
+    return removeToast(id);
+  }, [id, removeToast]);
+  return /*#__PURE__*/React.createElement(ToastProvider, {
+    toastType: type
+  }, /*#__PURE__*/React.createElement("div", {
+    onMouseEnter: function onMouseEnter() {
+      return setHover(id, true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHover(id, false);
+    },
+    style: containerStyles
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: toastRef,
+    style: toastStyles
+  }, /*#__PURE__*/React.createElement(Toast, {
+    title: title,
+    message: message,
+    hideIcon: hideIcon,
+    onClose: onClose
+  }))));
+}
+export default AnimatedToast;

package/dist/esm/Toaster/components/AnimatedToast/logic.js

@@ -0,0 +1,18 @@
+import { TIME_ENTER, TOAST_STATES } from "../../constants";
+var animationEasingFunction = "cubic-bezier(0.45, 0, 0.55, 1)";
+export var getContainerAnimationStyles = function getContainerAnimationStyles(toastState) {
+  var height = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 76;
+  return {
+    maxHeight: toastState > TOAST_STATES.display ? 0 : "".concat(height + 8, "px"),
+    paddingTop: toastState > TOAST_STATES.display ? 0 : "8px",
+    transition: "all 0.3s ".concat(animationEasingFunction),
+    position: "relative",
+    zIndex: toastState > TOAST_STATES.display ? 1 : 10
+  };
+};
+export var getToastAnimationStyles = function getToastAnimationStyles(toastState) {
+  return {
+    transform: "translate(".concat(toastState > TOAST_STATES.pending ? "-10px" : "500px", ", ").concat(toastState <= TOAST_STATES.display ? "0px" : "-500px", ")"),
+    transition: "transform ".concat(TIME_ENTER / 1000, "s ").concat(animationEasingFunction)
+  };
+};

package/dist/esm/Toaster/components/AnimatedToast/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Toaster/components/CloseIconButton/index.js

@@ -0,0 +1,19 @@
+import { Close } from "@vitality-ds/icons";
+import React, { useContext } from "react";
+import Tooltip from "../../../Tooltip";
+import { ToastContext } from "../../ToastProvider";
+import { BaseCloseIconButton } from "./styled";
+function CloseIconButton(_ref) {
+  var onClose = _ref.onClose;
+  var type = useContext(ToastContext);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: "Close"
+  }, /*#__PURE__*/React.createElement(BaseCloseIconButton, {
+    type: type,
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(Close, {
+    size: "sm",
+    color: "inherit"
+  })));
+}
+export default CloseIconButton;

package/dist/esm/Toaster/components/CloseIconButton/styled.js

@@ -0,0 +1,5 @@
+import { styled } from "@vitality-ds/system";
+import BaseCloseIconButtonStyles from "./styles/BaseCloseIconButton.styles";
+
+// eslint-disable-next-line import/prefer-default-export
+export var BaseCloseIconButton = styled("button", BaseCloseIconButtonStyles);

package/dist/esm/Toaster/components/CloseIconButton/styles/BaseCloseIconButton.styles.js

@@ -0,0 +1,24 @@
+import { css } from "@vitality-ds/system";
+import getVariantHoverStatesByColorScale from "../../Toast/helpers/getVariantHoverStatesByColorScale";
+export default css({
+  backgroundColor: "transparent",
+  border: "none",
+  boxSizing: "content-box",
+  alignSelf: "flex-start",
+  cursor: "pointer",
+  margin: "-$xs",
+  padding: 0,
+  svg: {
+    borderRadius: "$rounded",
+    padding: "$xs"
+  },
+  variants: {
+    type: {
+      success: getVariantHoverStatesByColorScale("success"),
+      warning: getVariantHoverStatesByColorScale("warning"),
+      error: getVariantHoverStatesByColorScale("critical"),
+      info: getVariantHoverStatesByColorScale("info"),
+      general: getVariantHoverStatesByColorScale("general")
+    }
+  }
+});

package/dist/esm/Toaster/components/CloseIconButton/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Toaster/components/Toast/constants.js

@@ -0,0 +1,19 @@
+import { Completed, Error, Info } from "@vitality-ds/icons";
+var TOAST_TYPES = {
+  success: {
+    icon: Completed
+  },
+  warning: {
+    icon: Error
+  },
+  error: {
+    icon: Error
+  },
+  info: {
+    icon: Info
+  },
+  general: {
+    icon: Info
+  }
+};
+export default TOAST_TYPES;

package/dist/esm/Toaster/components/Toast/helpers/getVariantHoverStatesByColorScale.js

@@ -0,0 +1,14 @@
+import { colorUseCases, getColorScaleValueByUseCase } from "@vitality-ds/system";
+var backgrounds = colorUseCases.backgrounds,
+  text = colorUseCases.text;
+function getVariantHoverStatesByColorScale(colorScale) {
+  return {
+    svg: {
+      "&:hover": {
+        background: getColorScaleValueByUseCase(colorScale, backgrounds.uiElement_hovered),
+        color: getColorScaleValueByUseCase(colorScale, text.lowContrast)
+      }
+    }
+  };
+}
+export default getVariantHoverStatesByColorScale;

package/dist/esm/Toaster/components/Toast/helpers/getVariantsByColorScale.js

@@ -0,0 +1,17 @@
+import { colorUseCases, getColorScaleValueByUseCase } from "@vitality-ds/system";
+var backgrounds = colorUseCases.backgrounds,
+  borders = colorUseCases.borders,
+  text = colorUseCases.text;
+function getVariantsByColorScale(colorScale) {
+  return {
+    backgroundColor: getColorScaleValueByUseCase(colorScale, backgrounds.app),
+    color: getColorScaleValueByUseCase(colorScale, text.hiContrast),
+    svg: {
+      path: {
+        fill: getColorScaleValueByUseCase(colorScale, text.lowContrast)
+      }
+    },
+    borderColor: "".concat(getColorScaleValueByUseCase(colorScale, text.hiSaturation), " ").concat(getColorScaleValueByUseCase(colorScale, borders.uiElement), " ").concat(getColorScaleValueByUseCase(colorScale, borders.uiElement))
+  };
+}
+export default getVariantsByColorScale;

package/dist/esm/Toaster/components/Toast/hooks/useToast.js

@@ -0,0 +1,8 @@
+import { getIconFromType } from "../logic";
+var useToast = function useToast(type) {
+  var IconComponent = getIconFromType(type);
+  return {
+    IconComponent: IconComponent
+  };
+};
+export default useToast;

package/dist/esm/Toaster/components/Toast/index.js

@@ -0,0 +1,25 @@
+import React, { useContext } from "react";
+import Typography from "../../../Typography";
+import { ToastContext } from "../../ToastProvider";
+import CloseIconButton from "../CloseIconButton";
+import useToast from "./hooks/useToast";
+import { BaseContent, BaseToast } from "./styled";
+function Toast(_ref) {
+  var title = _ref.title,
+    message = _ref.message,
+    hideIcon = _ref.hideIcon,
+    onClose = _ref.onClose;
+  var type = useContext(ToastContext);
+  var _useToast = useToast(type),
+    IconComponent = _useToast.IconComponent;
+  return /*#__PURE__*/React.createElement(BaseToast, {
+    type: type
+  }, !hideIcon && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconComponent, {
+    size: "sm"
+  })), /*#__PURE__*/React.createElement(BaseContent, null, title && /*#__PURE__*/React.createElement(Typography, {
+    variant: "display200"
+  }, title), message && /*#__PURE__*/React.createElement(Typography, null, message)), /*#__PURE__*/React.createElement(CloseIconButton, {
+    onClose: onClose
+  }));
+}
+export default Toast;

package/dist/esm/Toaster/components/Toast/logic.js

@@ -0,0 +1,6 @@
+import TOAST_TYPES from "./constants";
+
+// eslint-disable-next-line import/prefer-default-export
+export function getIconFromType(type) {
+  return TOAST_TYPES[type].icon;
+}

package/dist/esm/Toaster/components/Toast/logic.spec.js

@@ -0,0 +1,29 @@
+import { Completed, Error, Info } from "@vitality-ds/icons";
+import { getIconFromType } from "./logic";
+describe("getIconFromType", function () {
+  it("should return the icon for the success toast type", function () {
+    var type = "success";
+    var icon = getIconFromType(type);
+    expect(icon).toEqual(Completed);
+  });
+  it("should return the icon for the warning toast type", function () {
+    var type = "warning";
+    var icon = getIconFromType(type);
+    expect(icon).toEqual(Error);
+  });
+  it("should return the icon for the error toast type", function () {
+    var type = "error";
+    var icon = getIconFromType(type);
+    expect(icon).toEqual(Error);
+  });
+  it("should return the icon for the info toast type", function () {
+    var type = "info";
+    var icon = getIconFromType(type);
+    expect(icon).toEqual(Info);
+  });
+  it("should return the icon for the general toast type", function () {
+    var type = "general";
+    var icon = getIconFromType(type);
+    expect(icon).toEqual(Info);
+  });
+});

package/dist/esm/Toaster/components/Toast/styled.js

@@ -0,0 +1,5 @@
+import { styled } from "@vitality-ds/system";
+import BaseContentStyles from "./styles/BaseContent.styles";
+import BaseToastStyles from "./styles/BaseToast.styles";
+export var BaseToast = styled("div", BaseToastStyles);
+export var BaseContent = styled("div", BaseContentStyles);

package/dist/esm/Toaster/components/Toast/styles/BaseContent.styles.js

@@ -0,0 +1,4 @@
+import { css } from "@vitality-ds/system";
+export default css({
+  flex: 1
+});

package/dist/esm/Toaster/components/Toast/styles/BaseToast.styles.js

@@ -0,0 +1,23 @@
+import { css } from "@vitality-ds/system";
+import getVariantsByColorScale from "../helpers/getVariantsByColorScale";
+export default css({
+  $$size: "400px",
+  width: "$$size",
+  display: "flex",
+  borderStyle: "solid",
+  borderWidth: "4px 1px 1px 1px",
+  borderRadius: "$default",
+  boxShadow: "$lg",
+  boxSizing: "border-box",
+  padding: "$md",
+  gap: "$sm",
+  variants: {
+    type: {
+      success: getVariantsByColorScale("success"),
+      warning: getVariantsByColorScale("warning"),
+      error: getVariantsByColorScale("critical"),
+      info: getVariantsByColorScale("info"),
+      general: getVariantsByColorScale("neutral")
+    }
+  }
+});

package/dist/esm/Toaster/components/Toast/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Toaster/constants.js

@@ -0,0 +1,12 @@
+export var MAX_TOASTS = 3;
+export var TIME_ENTER = 500;
+export var TIME_WAIT = 1000;
+export var TIME_EXIT = 1000;
+export var TIME_DISPLAY = 5000;
+export var TOAST_STATES = {
+  pending: 0,
+  enter: 1,
+  display: 2,
+  exit: 3,
+  dead: 4
+};

package/dist/esm/Toaster/hooks/useInterval.js

@@ -0,0 +1,28 @@
+import { useEffect, useLayoutEffect, useRef } from "react";
+var useInterval = function useInterval(callback, delay) {
+  // Reference to store current callback, we don't need to set the initial ref.
+  var savedCallback = useRef(null);
+
+  // we use layout effect here incase rendering takes a long time.
+  // In theory a callback could update things that require dom interactions
+  useLayoutEffect(function () {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval, after the render phase this is because we want to ensure the first
+  // callback is triggered after the first render the rest happens outside of the react lifecycle
+  useEffect(function () {
+    if (delay !== null && savedCallback.current) {
+      var id = setInterval(function () {
+        return savedCallback.current();
+      }, delay);
+      return function () {
+        return clearInterval(id);
+      };
+    }
+    return function () {
+      return null;
+    };
+  }, [delay]);
+};
+export default useInterval;

package/dist/esm/Toaster/hooks/useToastLogic.js

@@ -0,0 +1,49 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useMemo, useState } from "react";
+import { getInitialState, removeToast as removeToastLogic, selectDeadToasts, setHover as setHoverLogic, syncToasts as _syncToastsLogic, updateToastStates as updateToastStatesLogic } from "../logic";
+import useInterval from "./useInterval";
+var useToasterLogic = function useToasterLogic(incomingToasts, onClose) {
+  // State / Logic
+  var _useState = useState(getInitialState()),
+    _useState2 = _slicedToArray(_useState, 2),
+    toasterState = _useState2[0],
+    setToasterState = _useState2[1];
+
+  // Internal State Controls
+  var controls = useMemo(function () {
+    return {
+      syncToastsLogic: function syncToastsLogic(toasts) {
+        return setToasterState(_syncToastsLogic(toasts, Date.now()));
+      },
+      removeToast: function removeToast(toastId) {
+        return setToasterState(removeToastLogic(toastId, Date.now()));
+      },
+      setHover: function setHover(toastId, isOver) {
+        return setToasterState(setHoverLogic(toastId, isOver, Date.now()));
+      },
+      updateToastStates: function updateToastStates() {
+        return setToasterState(updateToastStatesLogic(Date.now()));
+      }
+    };
+  }, []);
+
+  // Attempt to add new toasts every time the incomingToasts change
+  useEffect(function () {
+    controls.syncToastsLogic(incomingToasts);
+  }, [incomingToasts, controls]);
+
+  // Update the state transitions, while we have toasts
+  useInterval(function () {
+    controls.updateToastStates();
+  }, toasterState.toasts.length > 0 ? 250 : null);
+
+  // Call onClose on dead toasts and remove them
+  useEffect(function () {
+    var deadToasts = selectDeadToasts(toasterState);
+    deadToasts.forEach(function (t) {
+      return onClose(t.id);
+    });
+  }, [toasterState, controls, onClose]);
+  return [toasterState.toasts, controls];
+};
+export default useToasterLogic;

package/dist/esm/Toaster/index.js

@@ -0,0 +1,23 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { memo } from "react";
+import AnimatedToast from "./components/AnimatedToast";
+import useToastLogic from "./hooks/useToastLogic";
+import { BaseToaster } from "./styled";
+function Toaster(_ref) {
+  var toasts = _ref.toasts,
+    onClose = _ref.onClose;
+  var _useToastLogic = useToastLogic(toasts, onClose),
+    _useToastLogic2 = _slicedToArray(_useToastLogic, 2),
+    internalToasts = _useToastLogic2[0],
+    controls = _useToastLogic2[1];
+  return /*#__PURE__*/React.createElement(BaseToaster, null, internalToasts === null || internalToasts === void 0 ? void 0 : internalToasts.map(function (toast) {
+    return /*#__PURE__*/React.createElement(AnimatedToast, {
+      key: toast.id,
+      toast: toast,
+      setHover: controls === null || controls === void 0 ? void 0 : controls.setHover,
+      removeToast: controls === null || controls === void 0 ? void 0 : controls.removeToast
+    });
+  }));
+}
+Toaster.displayName = "Toaster";
+export default /*#__PURE__*/memo(Toaster);

package/dist/esm/Toaster/logic.js

@@ -0,0 +1,145 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _extends from "@babel/runtime/helpers/extends";
+import { MAX_TOASTS, TIME_DISPLAY, TIME_ENTER, TIME_EXIT, TIME_WAIT, TOAST_STATES } from "./constants";
+export var getInitialState = function getInitialState() {
+  return {
+    toasts: []
+  };
+};
+export var selectGetToastById = function selectGetToastById(state) {
+  return function (toastId) {
+    return state.toasts.find(function (t) {
+      return t.id === toastId;
+    });
+  };
+};
+export var selectDeadToasts = function selectDeadToasts(state) {
+  return state.toasts.filter(function (t) {
+    return t.state === TOAST_STATES.dead;
+  });
+};
+export var syncToasts = function syncToasts(toasts, dateNow) {
+  return function (state) {
+    var newToasts = toasts.filter(function (t) {
+      return !state.toasts.find(function (st) {
+        return st.id === t.id;
+      });
+    }).map(function (t) {
+      return _extends({}, t, {
+        options: t.options || {},
+        startTime: dateNow,
+        stateTime: dateNow,
+        state: TOAST_STATES.pending,
+        hovering: false
+      });
+    });
+    var activeToasts = state.toasts.filter(function (st) {
+      return toasts.findIndex(function (t) {
+        return t.id === st.id;
+      }) >= 0;
+    });
+    return _extends({}, state, {
+      toasts: [].concat(_toConsumableArray(activeToasts), _toConsumableArray(newToasts))
+    });
+  };
+};
+export var updateToast = function updateToast(toast) {
+  return function (state) {
+    var toastIndex = state.toasts.findIndex(function (t) {
+      return t.id === toast.id;
+    });
+    if (toastIndex === -1) {
+      return state;
+    }
+    var updatedToasts = [].concat(_toConsumableArray(state.toasts.slice(0, toastIndex)), [toast], _toConsumableArray(state.toasts.slice(toastIndex + 1)));
+    return _extends({}, state, {
+      toasts: updatedToasts
+    });
+  };
+};
+export var transitToast = function transitToast(toastId, dateNow, newState) {
+  return function (state) {
+    var toast = selectGetToastById(state)(toastId);
+    if (toast) {
+      return updateToast(_extends({}, toast, {
+        stateTime: dateNow,
+        state: newState
+      }))(state);
+    }
+    return state;
+  };
+};
+export var removeToast = function removeToast(toastId, dateNow) {
+  return function (state) {
+    return transitToast(toastId, dateNow, TOAST_STATES.exit)(state);
+  };
+};
+export var setHover = function setHover(toastId, isOver, dateNow) {
+  return function (state) {
+    var toast = selectGetToastById(state)(toastId);
+    if (!toast || toast.hovering === isOver) {
+      return state;
+    }
+    return updateToast(_extends({}, toast, {
+      hovering: isOver,
+      stateTime: dateNow
+    }))(state);
+  };
+};
+export var updateToastStates = function updateToastStates(dateNow) {
+  return function (state) {
+    return state.toasts.reduce(function (acc, toast, toastIndex, arr) {
+      if (acc.aliveCount >= MAX_TOASTS) {
+        return acc;
+      }
+      var timeInState = dateNow - toast.stateTime;
+      switch (toast.state) {
+        case TOAST_STATES.pending:
+          if (
+          // First toast can always slide in
+          toastIndex === 0 ||
+          // Otherwise it has to wait for the one before it.
+          arr[toastIndex - 1].state === TOAST_STATES.display && dateNow - arr[toastIndex - 1].stateTime >= TIME_WAIT - TIME_ENTER || arr[toastIndex - 1].state > TOAST_STATES.display) {
+            return {
+              state: transitToast(toast.id, dateNow, TOAST_STATES.enter)(acc.state),
+              aliveCount: acc.aliveCount + 1
+            };
+          }
+          break;
+        case TOAST_STATES.enter:
+          if (timeInState >= TIME_ENTER) {
+            return {
+              state: transitToast(toast.id, dateNow, TOAST_STATES.display)(acc.state),
+              aliveCount: acc.aliveCount + 1
+            };
+          }
+          break;
+        case TOAST_STATES.display:
+          if (!toast.options.indefinite && timeInState >= TIME_DISPLAY && !toast.hovering) {
+            return {
+              state: transitToast(toast.id, dateNow, TOAST_STATES.exit)(acc.state),
+              aliveCount: acc.aliveCount
+            };
+          }
+          break;
+        case TOAST_STATES.exit:
+          if (timeInState >= TIME_EXIT) {
+            return {
+              state: transitToast(toast.id, dateNow, TOAST_STATES.dead)(acc.state),
+              aliveCount: acc.aliveCount
+            };
+          }
+          break;
+        default:
+          return null;
+      }
+      return {
+        state: acc.state,
+        aliveCount: acc.aliveCount + (toast.state <= TOAST_STATES.display)
+      };
+    }, {
+      state: state,
+      aliveCount: 0
+    }).state;
+  };
+};