@vitality-ds/components 5.3.0 → 5.5.0

package/dist/esm/Button/primitives/styles/BaseButton.styles.js

@@ -51,7 +51,9 @@ export default css({
       critical: {},
       success: {},
       warning: {},
-      info: {}
+      info: {},
+      brand: {},
+      accent: {}
     },
     /**
      * The size of the button
@@ -103,6 +105,14 @@ export default css({
     color: "info",
     variant: "subtle",
     css: getSubtleVariant("info")
+  }, {
+    color: "brand",
+    variant: "subtle",
+    css: getSubtleVariant("brand")
+  }, {
+    color: "accent",
+    variant: "subtle",
+    css: getSubtleVariant("accent")
   },
   /**
    * OnSurface Variants
@@ -134,6 +144,14 @@ export default css({
     color: "info",
     variant: "onSurface",
     css: getOnSurfaceVariant("info")
+  }, {
+    color: "brand",
+    variant: "onSurface",
+    css: getOnSurfaceVariant("brand")
+  }, {
+    color: "accent",
+    variant: "onSurface",
+    css: getOnSurfaceVariant("accent")
   },
   /**
    * Ghost Variants
@@ -162,6 +180,14 @@ export default css({
     color: "info",
     variant: "ghost",
     css: getGhostVariant("info")
+  }, {
+    color: "brand",
+    variant: "ghost",
+    css: getGhostVariant("brand")
+  }, {
+    color: "accent",
+    variant: "ghost",
+    css: getGhostVariant("accent")
   },
   /**
    * Link Variants
@@ -190,6 +216,14 @@ export default css({
     color: "info",
     variant: "link",
     css: getLinkVariant("info")
+  }, {
+    color: "brand",
+    variant: "link",
+    css: getLinkVariant("brand")
+  }, {
+    color: "accent",
+    variant: "link",
+    css: getLinkVariant("accent")
   },
   /**
    * Solid Variants
@@ -218,5 +252,13 @@ export default css({
     color: "info",
     variant: "solid",
     css: getColorVariant("info")
+  }, {
+    color: "brand",
+    variant: "solid",
+    css: getColorVariant("brand")
+  }, {
+    color: "accent",
+    variant: "solid",
+    css: getColorVariant("accent")
   }]
 });

package/dist/esm/Callout/components/CalloutDescription/styles/BaseCalloutDescription.styles.js

@@ -14,13 +14,20 @@ export default css({
         fontWeight: "$caption",
         lineHeight: "$caption"
       },
+      blockCompact: {
+        display: "inline"
+      },
       "default": {}
     },
     severity: {
       info: getTextColorVariant("info"),
       critical: getTextColorVariant("critical"),
       success: getTextColorVariant("success"),
-      warning: getTextColorVariant("warning")
+      warning: getTextColorVariant("warning"),
+      accent: getTextColorVariant("accent"),
+      brand: getTextColorVariant("brand"),
+      primary: getTextColorVariant("primary"),
+      neutral: getTextColorVariant("neutral")
     },
     hideTitle: {
       "true": {}
@@ -49,5 +56,21 @@ export default css({
     size: "compact",
     severity: "warning",
     css: getCompactTextColorVariant("warning")
+  }, {
+    size: "compact",
+    severity: "accent",
+    css: getCompactTextColorVariant("accent")
+  }, {
+    size: "compact",
+    severity: "brand",
+    css: getCompactTextColorVariant("brand")
+  }, {
+    size: "compact",
+    severity: "primary",
+    css: getCompactTextColorVariant("primary")
+  }, {
+    size: "compact",
+    severity: "neutral",
+    css: getCompactTextColorVariant("neutral")
   }]
 });

package/dist/esm/Callout/constants.js

@@ -1,28 +1,60 @@
-import { Alert, Completed, Error, Info } from "@vitality-ds/icons";
+import { Alert, Completed, Error, GentuLogo, Info } from "@vitality-ds/icons";
 // eslint-disable-next-line import/prefer-default-export
 export var DEFAULT_CONTENT = {
   success: {
     icon: Completed,
     title: "Success",
+    titleColor: "$colors$success10",
     spinnerColor: "success",
     iconColor: "success"
   },
   info: {
     icon: Info,
     title: "Information",
+    titleColor: "$colors$info10",
     spinnerColor: "info",
     iconColor: "info"
   },
   warning: {
     icon: Alert,
     title: "Warning",
+    titleColor: "$colors$warning10",
     spinnerColor: "warning",
     iconColor: "warning"
   },
   critical: {
     icon: Error,
     title: "Critical",
+    titleColor: "$colors$critical10",
     spinnerColor: "critical",
     iconColor: "critical"
+  },
+  accent: {
+    icon: Info,
+    title: "Information",
+    titleColor: "$colors$accent10",
+    spinnerColor: "accent",
+    iconColor: "accent"
+  },
+  brand: {
+    icon: GentuLogo,
+    title: "Brand",
+    titleColor: "$colors$brand10",
+    spinnerColor: "brand",
+    iconColor: "brand"
+  },
+  primary: {
+    icon: Info,
+    title: "Information",
+    titleColor: "$colors$primary10",
+    spinnerColor: "primary",
+    iconColor: "primary"
+  },
+  neutral: {
+    icon: Info,
+    title: "Information",
+    titleColor: "$colors$neutral12",
+    spinnerColor: "neutral",
+    iconColor: "lowContrast"
   }
 };

package/dist/esm/Callout/hooks/useCalloutContent.js

@@ -6,18 +6,22 @@ var useCalloutContent = function useCalloutContent(_ref) {
     icon = _ref.icon;
   var _getDefaultContent = getDefaultContent(severity),
     defaultTitle = _getDefaultContent.title,
+    titleColor = _getDefaultContent.titleColor,
     defaultIcon = _getDefaultContent.icon,
     iconColor = _getDefaultContent.iconColor,
     spinnerColor = _getDefaultContent.spinnerColor;
-  var iconSize = size === "compact" ? "sm" : "md";
+  var isCompactLayout = size === "compact" || size === "blockCompact";
+  var iconSize = isCompactLayout ? "sm" : "md";
   var titleToDisplay = title || defaultTitle;
   var iconToDisplay = icon || defaultIcon;
   return {
     titleToDisplay: titleToDisplay,
+    titleColor: titleColor,
     iconToDisplay: iconToDisplay,
     iconColor: iconColor,
     spinnerColor: spinnerColor,
-    iconSize: iconSize
+    iconSize: iconSize,
+    isCompactLayout: isCompactLayout
   };
 };
 export default useCalloutContent;

package/dist/esm/Callout/index.js

@@ -5,7 +5,7 @@ import { EMPTY_OBJ } from "../helpers/logic/empties";
 import Typography from "../Typography";
 import CalloutDescription from "./components/CalloutDescription";
 import useCalloutContent from "./hooks/useCalloutContent";
-import { BaseCallout, BaseCalloutActions, BaseCalloutTitleContainer } from "./styled";
+import { BaseCallout, BaseCalloutActions, BaseCalloutIconContainer, BaseCalloutTitleContainer } from "./styled";
 function Callout(_ref) {
   var title = _ref.title,
     icon = _ref.icon,
@@ -26,37 +26,75 @@ function Callout(_ref) {
       icon: icon
     }),
     titleToDisplay = _useCalloutContent.titleToDisplay,
+    titleColor = _useCalloutContent.titleColor,
     iconToDisplay = _useCalloutContent.iconToDisplay,
     iconColor = _useCalloutContent.iconColor,
     spinnerColor = _useCalloutContent.spinnerColor,
-    iconSize = _useCalloutContent.iconSize;
+    iconSize = _useCalloutContent.iconSize,
+    isCompactLayout = _useCalloutContent.isCompactLayout;
   var IconComponent = iconToDisplay;
   var commonButtonProps = {
     color: severity,
     spinnerColor: spinnerColor,
     size: "compact"
   };
+  var getTitleContent = function getTitleContent() {
+    if (hideTitle) {
+      return /*#__PURE__*/React.createElement(CalloutDescription, {
+        hideTitle: hideTitle,
+        size: size,
+        severity: severity,
+        content: description
+      });
+    }
+    if (size === "compact") {
+      return /*#__PURE__*/React.createElement(CalloutDescription, {
+        hideTitle: hideTitle,
+        size: size,
+        severity: severity,
+        content: description
+      });
+    }
+    if (size === "blockCompact") {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+        color: titleColor,
+        variant: "display200"
+      }, titleToDisplay), /*#__PURE__*/React.createElement(CalloutDescription, {
+        hideTitle: hideTitle,
+        size: size,
+        severity: severity,
+        content: description
+      }));
+    }
+    return /*#__PURE__*/React.createElement(Typography, {
+      color: titleColor,
+      variant: "display300"
+    }, titleToDisplay);
+  };
+  var getIconContent = function getIconContent() {
+    if (size === "blockCompact") {
+      return /*#__PURE__*/React.createElement(BaseCalloutIconContainer, null, /*#__PURE__*/React.createElement(IconComponent, {
+        size: iconSize,
+        color: iconColor
+      }));
+    }
+    return /*#__PURE__*/React.createElement(IconComponent, {
+      size: iconSize,
+      color: iconColor
+    });
+  };
   return /*#__PURE__*/React.createElement(BaseCallout, {
     role: "alert",
     size: size,
     severity: severity
   }, /*#__PURE__*/React.createElement(BaseCalloutTitleContainer, {
     size: size
-  }, /*#__PURE__*/React.createElement(IconComponent, {
-    size: iconSize,
-    color: iconColor
-  }), hideTitle || size === "compact" ? /*#__PURE__*/React.createElement(CalloutDescription, {
-    hideTitle: hideTitle,
-    size: size,
+  }, getIconContent(), getTitleContent()), !isCompactLayout && !hideTitle && /*#__PURE__*/React.createElement(CalloutDescription, {
     severity: severity,
     content: description
-  }) : /*#__PURE__*/React.createElement(Typography, {
-    color: severity,
-    variant: "display300"
-  }, titleToDisplay)), size !== "compact" && !hideTitle && /*#__PURE__*/React.createElement(CalloutDescription, {
-    severity: severity,
-    content: description
-  }), actions && size !== "compact" && /*#__PURE__*/React.createElement(BaseCalloutActions, null, secondary && /*#__PURE__*/React.createElement(ButtonPrimitive, _extends({
+  }), actions && size !== "compact" && /*#__PURE__*/React.createElement(BaseCalloutActions, {
+    size: size
+  }, secondary && /*#__PURE__*/React.createElement(ButtonPrimitive, _extends({
     onClick: secondary.onClick,
     variant: "ghost",
     iconRight: secondary.icon,

package/dist/esm/Callout/styled.js

@@ -1,7 +1,9 @@
 import { styled } from "@vitality-ds/system";
 import BaseCalloutStyles from "./styles/BaseCallout.styles";
 import BaseCalloutActionsStyles from "./styles/BaseCalloutActions.styles";
+import BaseCalloutIconContainerStyles from "./styles/BaseCalloutIconContainer.styles";
 import BaseCalloutTitleContainerStyles from "./styles/BaseCalloutTitleContainer.styles";
 export var BaseCallout = styled("div", BaseCalloutStyles);
 export var BaseCalloutActions = styled("div", BaseCalloutActionsStyles);
+export var BaseCalloutIconContainer = styled("div", BaseCalloutIconContainerStyles);
 export var BaseCalloutTitleContainer = styled("div", BaseCalloutTitleContainerStyles);

package/dist/esm/Callout/styles/BaseCallout.styles.js

@@ -14,13 +14,21 @@ export default css({
       info: {},
       warning: {},
       critical: {},
-      success: {}
+      success: {},
+      accent: {},
+      brand: {},
+      primary: {},
+      neutral: {}
     },
     size: {
       compact: {
         backgroundColor: "transparent",
         padding: 0
       },
+      blockCompact: {
+        flexDirection: "row",
+        padding: "$sm"
+      },
       "default": {}
     }
   },
@@ -40,5 +48,53 @@ export default css({
     size: "default",
     severity: "critical",
     css: getColorVariant("critical")
+  }, {
+    size: "default",
+    severity: "accent",
+    css: getColorVariant("accent")
+  }, {
+    size: "default",
+    severity: "brand",
+    css: getColorVariant("brand")
+  }, {
+    size: "default",
+    severity: "primary",
+    css: getColorVariant("primary")
+  }, {
+    size: "default",
+    severity: "neutral",
+    css: getColorVariant("neutral")
+  }, {
+    size: "blockCompact",
+    severity: "warning",
+    css: getColorVariant("warning")
+  }, {
+    size: "blockCompact",
+    severity: "success",
+    css: getColorVariant("success")
+  }, {
+    size: "blockCompact",
+    severity: "info",
+    css: getColorVariant("info")
+  }, {
+    size: "blockCompact",
+    severity: "critical",
+    css: getColorVariant("critical")
+  }, {
+    size: "blockCompact",
+    severity: "accent",
+    css: getColorVariant("accent")
+  }, {
+    size: "blockCompact",
+    severity: "brand",
+    css: getColorVariant("brand")
+  }, {
+    size: "blockCompact",
+    severity: "primary",
+    css: getColorVariant("primary")
+  }, {
+    size: "blockCompact",
+    severity: "neutral",
+    css: getColorVariant("neutral")
   }]
 });

package/dist/esm/Callout/styles/BaseCalloutActions.styles.js

@@ -4,5 +4,14 @@ export default css({
   display: "flex",
   flex: 1,
   alignItems: "flex-start",
-  justifyContent: "flex-end"
+  justifyContent: "flex-end",
+  variants: {
+    size: {
+      blockCompact: {
+        flexGrow: 0
+      },
+      compact: {},
+      "default": {}
+    }
+  }
 });

package/dist/esm/Callout/styles/BaseCalloutIconContainer.styles.js

@@ -0,0 +1,7 @@
+import { css } from "@vitality-ds/system";
+
+// Adjust alignment of inline text with the icon in blockCompact mode
+export default css({
+  display: "flex",
+  marginTop: "0.15rem"
+});

package/dist/esm/Callout/styles/BaseCalloutTitleContainer.styles.js

@@ -1,4 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { css } from "@vitality-ds/system";
+import { BaseTypography } from "../../Typography/styled";
+import { BaseCalloutDescription } from "../components/CalloutDescription/styled";
 export default css({
   display: "flex",
   flex: 1,
@@ -12,6 +15,12 @@ export default css({
       compact: {
         gap: "$sm"
       },
+      blockCompact: {
+        gap: "$sm",
+        "& div": _defineProperty({}, "& > ".concat(BaseTypography, ", & > ").concat(BaseCalloutDescription), {
+          marginRight: "$sm"
+        })
+      },
       "default": {}
     }
   }

package/dist/esm/Spinner/styles/BaseSpinnerCircle.styles.js

@@ -30,6 +30,12 @@ export default css({
       },
       warning: {
         stroke: getColorScaleValueByUseCase("warning", text.onSolidBackgrounds)
+      },
+      accent: {
+        stroke: getColorScaleValueByUseCase("accent", text.onSolidBackgrounds)
+      },
+      brand: {
+        stroke: getColorScaleValueByUseCase("brand", text.onSolidBackgrounds)
       }
     }
   }