@vitality-ds/components 4.0.0-alpha.0

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

@@ -0,0 +1,328 @@
+import { TOAST_STATES } from "./constants";
+import { removeToast, selectDeadToasts, selectGetToastById, setHover, syncToasts, transitToast, updateToast } from "./logic";
+describe("syncToasts", function () {
+  var toasts = [{
+    id: "1",
+    type: "success",
+    message: "toast 1",
+    title: "title 1",
+    options: {}
+  }, {
+    id: "2",
+    type: "error",
+    message: "toast 2",
+    title: "title 2",
+    options: {}
+  }];
+  var dateNow = Date.now();
+  var state = {
+    toasts: [{
+      id: "1",
+      type: "success",
+      message: "toast 1",
+      title: "title 1",
+      options: {},
+      startTime: dateNow,
+      stateTime: dateNow,
+      state: TOAST_STATES.pending,
+      hovering: false
+    }]
+  };
+  it("should add new toasts to state", function () {
+    var newState = syncToasts(toasts, dateNow)(state);
+    expect(newState.toasts).toHaveLength(2);
+    var newToast = newState.toasts.find(function (t) {
+      return t.id === "2";
+    });
+    expect(newToast).toBeDefined();
+    expect(newToast.type).toBe("error");
+    expect(newToast.message).toBe("toast 2");
+    expect(newToast.title).toBe("title 2");
+    expect(newToast.startTime).toBe(dateNow);
+    expect(newToast.stateTime).toBe(dateNow);
+    expect(newToast.state).toBe(TOAST_STATES.pending);
+    expect(newToast.hovering).toBe(false);
+  });
+  it("should not add already existing toasts to state", function () {
+    var newState = syncToasts(toasts, dateNow)(state);
+    expect(newState.toasts).toHaveLength(2);
+    var existingToast = newState.toasts.find(function (t) {
+      return t.id === "1";
+    });
+    expect(existingToast).toBeDefined();
+    expect(existingToast.type).toBe("success");
+    expect(existingToast.message).toBe("toast 1");
+    expect(existingToast.title).toBe("title 1");
+    expect(existingToast.startTime).toBe(dateNow);
+    expect(existingToast.stateTime).toBe(dateNow);
+    expect(existingToast.state).toBe(TOAST_STATES.pending);
+    expect(existingToast.hovering).toBe(false);
+  });
+  it("should set default options for new toasts", function () {
+    var newState = syncToasts(toasts, dateNow)(state);
+    expect(newState.toasts).toHaveLength(2);
+    var newToast = newState.toasts.find(function (t) {
+      return t.id === "2";
+    });
+    expect(newToast.options).toEqual({});
+  });
+  it("should select only active toasts from state", function () {
+    var newState = syncToasts(toasts, dateNow)(state);
+    expect(newState.toasts).toHaveLength(2);
+    var activeToasts = newState.toasts.filter(function (t) {
+      return t.id === "1";
+    });
+    expect(activeToasts).toHaveLength(1);
+  });
+});
+describe("updateToast", function () {
+  it("updates the correct toast in state", function () {
+    var toast1 = {
+      id: "1",
+      message: "Hello"
+    };
+    var toast2 = {
+      id: "2",
+      message: "World"
+    };
+    var state = {
+      toasts: [toast1, toast2]
+    };
+    var updatedToast = {
+      id: "1",
+      message: "Updated Message"
+    };
+    var expectedState = {
+      toasts: [updatedToast, toast2]
+    };
+    var result = updateToast(updatedToast)(state);
+    expect(result).toEqual(expectedState);
+  });
+  it("returns the original state if the toast does not exist", function () {
+    var toast1 = {
+      id: "1",
+      message: "Hello"
+    };
+    var toast2 = {
+      id: "2",
+      message: "World"
+    };
+    var state = {
+      toasts: [toast1, toast2]
+    };
+    var updatedToast = {
+      id: "3",
+      message: "Updated Message"
+    };
+    var result = updateToast(updatedToast)(state);
+    expect(result).toEqual(state);
+  });
+});
+describe("selectDeadToasts", function () {
+  it("returns an empty array if there are no dead toasts", function () {
+    var state = {
+      toasts: [{
+        id: 1,
+        state: TOAST_STATES.pending
+      }]
+    };
+    expect(selectDeadToasts(state)).toEqual([]);
+  });
+  it("returns an array of dead toasts", function () {
+    var state = {
+      toasts: [{
+        id: 1,
+        state: TOAST_STATES.dead
+      }, {
+        id: 2,
+        state: TOAST_STATES.pending
+      }, {
+        id: 3,
+        state: TOAST_STATES.dead
+      }]
+    };
+    expect(selectDeadToasts(state)).toEqual([{
+      id: 1,
+      state: TOAST_STATES.dead
+    }, {
+      id: 3,
+      state: TOAST_STATES.dead
+    }]);
+  });
+});
+describe("selectGetToastById", function () {
+  it("returns undefined if the toast does not exist", function () {
+    var state = {
+      toasts: [{
+        id: 1,
+        state: TOAST_STATES.pending
+      }]
+    };
+    expect(selectGetToastById(state)(2)).toBeUndefined();
+  });
+  it("returns the toast if it exists", function () {
+    var state = {
+      toasts: [{
+        id: 1,
+        state: TOAST_STATES.pending
+      }, {
+        id: 2,
+        state: TOAST_STATES.dead
+      }]
+    };
+    expect(selectGetToastById(state)(2)).toEqual({
+      id: 2,
+      state: TOAST_STATES.dead
+    });
+  });
+});
+describe("transitToast", function () {
+  var state = {
+    toasts: [{
+      id: "1",
+      state: 2,
+      message: "Hello",
+      stateTime: 0
+    }, {
+      id: "2",
+      state: "success",
+      message: "World",
+      stateTime: 0
+    }, {
+      id: "3",
+      state: "dead",
+      message: "Dead toast",
+      stateTime: 0
+    }]
+  };
+  var dateNow = Date.now();
+  it("should update the state of the specified toast", function () {
+    var newState = "success";
+    var updatedState = transitToast("1", dateNow, newState)(state);
+    var expectedToast = {
+      id: "1",
+      state: newState,
+      message: "Hello",
+      stateTime: dateNow
+    };
+    expect(selectGetToastById(updatedState)("1")).toEqual(expectedToast);
+  });
+  it("should return the original state if the specified toast is not found", function () {
+    var updatedState = transitToast("4", dateNow, "success")(state);
+    expect(updatedState).toEqual(state);
+  });
+});
+describe("removeToast", function () {
+  var dateNow = Date.now();
+  var toastId = "123";
+  it("removes a toast with a given ID", function () {
+    var state = {
+      toasts: [{
+        id: "456",
+        state: 2
+      }, {
+        id: toastId,
+        state: 2
+      }, {
+        id: "789",
+        state: 2
+      }]
+    };
+    var expectedState = {
+      toasts: [{
+        id: "456",
+        state: 2
+      }, {
+        id: toastId,
+        state: 3,
+        stateTime: dateNow
+      }, {
+        id: "789",
+        state: 2
+      }]
+    };
+    expect(removeToast(toastId, dateNow)(state)).toEqual(expectedState);
+  });
+  it("does not modify state if toast with given ID does not exist", function () {
+    var state = {
+      toasts: [{
+        id: "456",
+        state: 2
+      }, {
+        id: "789",
+        state: 2
+      }]
+    };
+    expect(removeToast(toastId, dateNow)(state)).toEqual(state);
+  });
+});
+describe("setHover", function () {
+  var dateNow = Date.now();
+  var toastId = "123";
+  it("sets hovering property of a toast with a given ID", function () {
+    var state = {
+      toasts: [{
+        id: "456",
+        state: 2,
+        hovering: false
+      }, {
+        id: toastId,
+        state: 2,
+        hovering: false
+      }, {
+        id: "789",
+        state: 2,
+        hovering: false
+      }]
+    };
+    var expectedState = {
+      toasts: [{
+        id: "456",
+        state: 2,
+        hovering: false
+      }, {
+        id: toastId,
+        state: 2,
+        hovering: true,
+        stateTime: dateNow
+      }, {
+        id: "789",
+        state: 2,
+        hovering: false
+      }]
+    };
+    expect(setHover(toastId, true, dateNow)(state)).toEqual(expectedState);
+  });
+  it("does not modify state if toast with given ID does not exist", function () {
+    var state = {
+      toasts: [{
+        id: "456",
+        state: 2,
+        hovering: false
+      }, {
+        id: "789",
+        state: 2,
+        hovering: false
+      }]
+    };
+    expect(setHover(toastId, true, dateNow)(state)).toEqual(state);
+  });
+  it("does not modify state if hovering property is already set to given value", function () {
+    var state = {
+      toasts: [{
+        id: "456",
+        state: 2,
+        hovering: false
+      }, {
+        id: toastId,
+        state: 2,
+        hovering: true
+      }, {
+        id: "789",
+        state: 2,
+        hovering: false
+      }]
+    };
+    expect(setHover(toastId, true, dateNow)(state)).toEqual(state);
+  });
+});

package/dist/esm/Toaster/styled.js

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

package/dist/esm/Toaster/styles/BaseToaster.styles.js

@@ -0,0 +1,8 @@
+import { css } from "@vitality-ds/system";
+export default css({
+  position: "fixed",
+  right: 0,
+  top: 0,
+  zIndex: "$toast",
+  pointerEvents: "all"
+});

package/dist/esm/Toaster/types.js

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

package/dist/esm/Tooltip/BaseTooltip.js

@@ -0,0 +1,37 @@
+import { Portal, Root as TooltipPrimitiveRoot, Trigger as TooltipPrimitiveTrigger } from "@radix-ui/react-tooltip";
+import React from "react";
+import { SIZES } from "./constants";
+import { BaseTooltipArrow, BaseTooltipContent } from "./styled";
+// todo fix this type
+var BaseTooltip = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
+  var ariaLabel = props.ariaLabel,
+    children = props.children,
+    content = props.content,
+    isOpen = props.isOpen,
+    onOpenChange = props.onOpenChange,
+    preferredSide = props.preferredSide,
+    preferredAlignment = props.preferredAlignment,
+    showArrow = props.showArrow;
+  var arrowHeight = SIZES.arrowHeight,
+    arrowWidth = SIZES.arrowWidth,
+    offsetWithArrow = SIZES.offsetWithArrow,
+    offsetWhenArrowHidden = SIZES.offsetWhenArrowHidden;
+  var sideOffset = showArrow ? offsetWithArrow : offsetWhenArrowHidden;
+  return /*#__PURE__*/React.createElement(TooltipPrimitiveRoot, {
+    open: isOpen,
+    onOpenChange: onOpenChange
+  }, /*#__PURE__*/React.createElement(TooltipPrimitiveTrigger, {
+    ref: forwardedRef,
+    asChild: true
+  }, children), /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(BaseTooltipContent, {
+    sideOffset: sideOffset,
+    "aria-label": ariaLabel,
+    side: preferredSide,
+    align: preferredAlignment
+  }, content, showArrow && /*#__PURE__*/React.createElement(BaseTooltipArrow, {
+    width: arrowWidth,
+    height: arrowHeight
+  }))));
+});
+BaseTooltip.displayName = "BaseTooltip";
+export default BaseTooltip;

package/dist/esm/Tooltip/constants.js

@@ -0,0 +1,7 @@
+// eslint-disable-next-line import/prefer-default-export
+export var SIZES = {
+  arrowHeight: 5,
+  arrowWidth: 11,
+  offsetWithArrow: 2,
+  offsetWhenArrowHidden: 7
+};

package/dist/esm/Tooltip/contexts/index.js

@@ -0,0 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { TooltipProvider as RadixTooltipProvider } from "@radix-ui/react-tooltip";
+import React from "react";
+function TooltipProvider(props) {
+  return /*#__PURE__*/React.createElement(RadixTooltipProvider, _extends({
+    delayDuration: 350
+  }, props));
+}
+export default TooltipProvider;

package/dist/esm/Tooltip/contexts/types.js

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

package/dist/esm/Tooltip/index.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["ariaLabel", "as", "children", "className", "content", "css", "onOpenChange", "showArrow", "isOpen", "preferredSide", "preferredAlignment", "style"];
+import React from "react";
+import BaseTooltip from "./BaseTooltip";
+function Tooltip(_ref) {
+  var ariaLabel = _ref.ariaLabel,
+    as = _ref.as,
+    children = _ref.children,
+    className = _ref.className,
+    content = _ref.content,
+    css = _ref.css,
+    onOpenChange = _ref.onOpenChange,
+    _ref$showArrow = _ref.showArrow,
+    showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
+    isOpen = _ref.isOpen,
+    _ref$preferredSide = _ref.preferredSide,
+    preferredSide = _ref$preferredSide === void 0 ? "top" : _ref$preferredSide,
+    _ref$preferredAlignme = _ref.preferredAlignment,
+    preferredAlignment = _ref$preferredAlignme === void 0 ? "center" : _ref$preferredAlignme,
+    style = _ref.style,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(BaseTooltip, _extends({
+    showArrow: showArrow,
+    content: content,
+    ariaLabel: ariaLabel,
+    onOpenChange: onOpenChange,
+    isOpen: isOpen,
+    preferredSide: preferredSide,
+    preferredAlignment: preferredAlignment
+  }, restProps), children);
+}
+export default Tooltip;

package/dist/esm/Tooltip/styled.js

@@ -0,0 +1,6 @@
+import { Arrow as TooltipPrimitiveArrow, Content as TooltipPrimitiveContent } from "@radix-ui/react-tooltip";
+import { styled } from "@vitality-ds/system";
+import baseTooltipArrowStyles from "./styles/BaseTooltipArrow.styles";
+import baseTooltipContentStyles from "./styles/BaseTooltipContent.styles";
+export var BaseTooltipArrow = styled(TooltipPrimitiveArrow, baseTooltipArrowStyles);
+export var BaseTooltipContent = styled(TooltipPrimitiveContent, baseTooltipContentStyles);

package/dist/esm/Tooltip/styles/BaseTooltipArrow.styles.js

@@ -0,0 +1,5 @@
+import { colorUseCases, css, getColorScaleValueByUseCase } from "@vitality-ds/system";
+var text = colorUseCases.text;
+export default css({
+  fill: getColorScaleValueByUseCase("neutral", text.hiContrast)
+});

package/dist/esm/Tooltip/styles/BaseTooltipContent.styles.js

@@ -0,0 +1,15 @@
+import { colorUseCases, css, getColorScaleValueByUseCase } from "@vitality-ds/system";
+var text = colorUseCases.text,
+  backgrounds = colorUseCases.backgrounds;
+export default css({
+  boxSizing: "border-box",
+  fontFamily: "$default",
+  fontSize: "$caption",
+  lineHeight: "$caption",
+  borderRadius: "$default",
+  zIndex: "$tooltip",
+  maxWidth: 300,
+  backgroundColor: getColorScaleValueByUseCase("neutral", text.hiContrast),
+  color: getColorScaleValueByUseCase("neutral", backgrounds.app),
+  padding: "$md"
+});

package/dist/esm/Tooltip/types.js

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

package/dist/esm/TruncateContent/hooks/useDynamicStyle.js

@@ -0,0 +1,8 @@
+import { useMemo } from "react";
+import { getDynamicStyle } from "../styles/helpers";
+var useDynamicStyle = function useDynamicStyle(gradientColor, initialHeight) {
+  return useMemo(function () {
+    return getDynamicStyle(gradientColor, initialHeight);
+  }, [gradientColor, initialHeight]);
+};
+export default useDynamicStyle;

package/dist/esm/TruncateContent/hooks/useTruncateContent.js

@@ -0,0 +1,16 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState } from "react";
+var useTruncateContent = function useTruncateContent() {
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isTruncated = _useState2[0],
+    setIsTruncated = _useState2[1];
+  var toggleTruncated = function toggleTruncated() {
+    return setIsTruncated(!isTruncated);
+  };
+  return {
+    isTruncated: isTruncated,
+    toggleTruncated: toggleTruncated
+  };
+};
+export default useTruncateContent;

package/dist/esm/TruncateContent/index.js

@@ -0,0 +1,27 @@
+import React from "react";
+import useDynamicStyle from "./hooks/useDynamicStyle";
+import useTruncateContent from "./hooks/useTruncateContent";
+import { BaseButton, BaseContainer, BaseInner } from "./styled";
+function TruncateContent(_ref) {
+  var children = _ref.children,
+    _ref$gradientColor = _ref.gradientColor,
+    gradientColor = _ref$gradientColor === void 0 ? "$neutral1" : _ref$gradientColor,
+    _ref$initialHeight = _ref.initialHeight,
+    initialHeight = _ref$initialHeight === void 0 ? "75px" : _ref$initialHeight,
+    _ref$buttonTextColor = _ref.buttonTextColor,
+    buttonTextColor = _ref$buttonTextColor === void 0 ? "$neutral11" : _ref$buttonTextColor;
+  var _useTruncateContent = useTruncateContent(),
+    isTruncated = _useTruncateContent.isTruncated,
+    toggleTruncated = _useTruncateContent.toggleTruncated;
+  var dynamicStyle = useDynamicStyle(gradientColor, initialHeight);
+  return /*#__PURE__*/React.createElement(BaseContainer, null, /*#__PURE__*/React.createElement(BaseInner, {
+    css: dynamicStyle,
+    truncated: isTruncated
+  }, children), /*#__PURE__*/React.createElement(BaseButton, {
+    css: {
+      color: buttonTextColor
+    },
+    onClick: toggleTruncated
+  }, isTruncated ? "Show more" : "Show less"));
+}
+export default TruncateContent;

package/dist/esm/TruncateContent/styled.js

@@ -0,0 +1,9 @@
+import { styled } from "@vitality-ds/system";
+import BaseButtonStyles from "./styles/BaseButton.styles";
+import BaseContainerStyles from "./styles/BaseContainer.styles";
+import BaseInnerStyles from "./styles/BaseInner.styles";
+
+// eslint-disable-next-line import/prefer-default-export
+export var BaseContainer = styled("div", BaseContainerStyles);
+export var BaseInner = styled("div", BaseInnerStyles);
+export var BaseButton = styled("button", BaseButtonStyles);

package/dist/esm/TruncateContent/styles/BaseButton.styles.js

@@ -0,0 +1,30 @@
+import { css, getColorScaleValueByUseCase } from "@vitality-ds/system";
+import { colorUseCases } from "@vitality-ds/tokens";
+export default css({
+  background: "none",
+  padding: "$xs",
+  marginLeft: "-$xs",
+  border: 0,
+  fontFamily: "$caption",
+  fontSize: "$caption",
+  lineHeight: "$caption",
+  cursor: "pointer",
+  "&:hover": {
+    textDecoration: "underline"
+  },
+  variants: {
+    color: {
+      neutral: {
+        color: getColorScaleValueByUseCase("neutral", colorUseCases.text.lowContrast),
+        outlineColor: getColorScaleValueByUseCase("neutral", colorUseCases.borders.focusRing)
+      },
+      primary: {
+        color: getColorScaleValueByUseCase("primary", colorUseCases.text.hiSaturation),
+        outlineColor: getColorScaleValueByUseCase("primary", colorUseCases.borders.focusRing)
+      }
+    }
+  },
+  defaultVariants: {
+    color: "neutral"
+  }
+});

package/dist/esm/TruncateContent/styles/BaseContainer.styles.js

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

package/dist/esm/TruncateContent/styles/BaseInner.styles.js

@@ -0,0 +1,25 @@
+import { css } from "@vitality-ds/system";
+export default css({
+  // These values are dynamically set as a prop is passed in
+  $$fadeToColor: "$colors$neutral1",
+  $$initialHeight: "75px",
+  variants: {
+    truncated: {
+      "true": {
+        overflow: "hidden",
+        position: "relative",
+        maxHeight: "$$initialHeight",
+        "&:before": {
+          content: "",
+          position: "absolute",
+          height: "50%",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          color: "inherit",
+          background: "linear-gradient(to top, $$fadeToColor, rgba(255, 255, 255, 0))"
+        }
+      }
+    }
+  }
+});

package/dist/esm/TruncateContent/styles/helpers.js

@@ -0,0 +1,7 @@
+/* eslint-disable import/prefer-default-export */
+export var getDynamicStyle = function getDynamicStyle(gradientColor, initialHeight) {
+  return {
+    $$fadeToColor: "$colors".concat(gradientColor),
+    $$initialHeight: initialHeight
+  };
+};

package/dist/esm/TruncateContent/types.js

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

package/dist/esm/Typography/constants.js

@@ -0,0 +1,9 @@
+export var AVAILABLE_MAX_LINES = 3;
+export var DEFAULT_VARIANT_ELEMENTS = {
+  caption: "small",
+  body: "p",
+  sectionSubtitle: "h3",
+  sectionTitle: "h2",
+  pageTitle: "h1"
+};
+export var AVAILABLE_VARIANTS = ["$caption", "$body", "$sectionSubtitle", "$sectionTitle", "$pageTitle", "$display100", "$display200", "$display300", "$display400", "$display500", "$display600", "$display700", "$display800", "$display900"];

package/dist/esm/Typography/hooks/useTypographyElementFromTagProp.js

@@ -0,0 +1,10 @@
+import { useMemo } from "react";
+import { DEFAULT_VARIANT_ELEMENTS } from "../constants";
+import { getHtmlElementFromHtmlTagProp } from "../logic";
+var useTypographyElementFromTagProp = function useTypographyElementFromTagProp(htmlTag, variant) {
+  var renderedComponent = useMemo(function () {
+    return getHtmlElementFromHtmlTagProp(DEFAULT_VARIANT_ELEMENTS, htmlTag, variant);
+  }, [htmlTag, variant]);
+  return renderedComponent;
+};
+export default useTypographyElementFromTagProp;

package/dist/esm/Typography/index.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "style", "as", "css", "htmlTag", "variant", "color", "textAlign"];
+import React from "react";
+import useTypographyElementFromTagProp from "./hooks/useTypographyElementFromTagProp";
+import { BaseTypography } from "./styled";
+function Typography(_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    as = _ref.as,
+    css = _ref.css,
+    htmlTag = _ref.htmlTag,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "body" : _ref$variant,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "hiContrast" : _ref$color,
+    textAlign = _ref.textAlign,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var renderedComponent = useTypographyElementFromTagProp(htmlTag, variant);
+  return /*#__PURE__*/React.createElement(BaseTypography, _extends({}, rest, {
+    as: renderedComponent,
+    color: color,
+    variant: variant,
+    textAlign: textAlign
+  }));
+}
+export default Typography;