@vitality-ds/components 5.4.0 → 5.5.0

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

@@ -58,7 +58,9 @@ var _default = exports["default"] = (0, _system.css)({
       critical: {},
       success: {},
       warning: {},
-      info: {}
+      info: {},
+      brand: {},
+      accent: {}
     },
     /**
      * The size of the button
@@ -110,6 +112,14 @@ var _default = exports["default"] = (0, _system.css)({
     color: "info",
     variant: "subtle",
     css: (0, _helpers.getSubtleVariant)("info")
+  }, {
+    color: "brand",
+    variant: "subtle",
+    css: (0, _helpers.getSubtleVariant)("brand")
+  }, {
+    color: "accent",
+    variant: "subtle",
+    css: (0, _helpers.getSubtleVariant)("accent")
   },
   /**
    * OnSurface Variants
@@ -141,6 +151,14 @@ var _default = exports["default"] = (0, _system.css)({
     color: "info",
     variant: "onSurface",
     css: (0, _helpers.getOnSurfaceVariant)("info")
+  }, {
+    color: "brand",
+    variant: "onSurface",
+    css: (0, _helpers.getOnSurfaceVariant)("brand")
+  }, {
+    color: "accent",
+    variant: "onSurface",
+    css: (0, _helpers.getOnSurfaceVariant)("accent")
   },
   /**
    * Ghost Variants
@@ -169,6 +187,14 @@ var _default = exports["default"] = (0, _system.css)({
     color: "info",
     variant: "ghost",
     css: (0, _helpers.getGhostVariant)("info")
+  }, {
+    color: "brand",
+    variant: "ghost",
+    css: (0, _helpers.getGhostVariant)("brand")
+  }, {
+    color: "accent",
+    variant: "ghost",
+    css: (0, _helpers.getGhostVariant)("accent")
   },
   /**
    * Link Variants
@@ -197,6 +223,14 @@ var _default = exports["default"] = (0, _system.css)({
     color: "info",
     variant: "link",
     css: (0, _helpers.getLinkVariant)("info")
+  }, {
+    color: "brand",
+    variant: "link",
+    css: (0, _helpers.getLinkVariant)("brand")
+  }, {
+    color: "accent",
+    variant: "link",
+    css: (0, _helpers.getLinkVariant)("accent")
   },
   /**
    * Solid Variants
@@ -225,5 +259,13 @@ var _default = exports["default"] = (0, _system.css)({
     color: "info",
     variant: "solid",
     css: (0, _helpers.getColorVariant)("info")
+  }, {
+    color: "brand",
+    variant: "solid",
+    css: (0, _helpers.getColorVariant)("brand")
+  }, {
+    color: "accent",
+    variant: "solid",
+    css: (0, _helpers.getColorVariant)("accent")
   }]
 });

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

@@ -20,13 +20,20 @@ var _default = exports["default"] = (0, _system.css)({
         fontWeight: "$caption",
         lineHeight: "$caption"
       },
+      blockCompact: {
+        display: "inline"
+      },
       "default": {}
     },
     severity: {
       info: (0, _helpers.getTextColorVariant)("info"),
       critical: (0, _helpers.getTextColorVariant)("critical"),
       success: (0, _helpers.getTextColorVariant)("success"),
-      warning: (0, _helpers.getTextColorVariant)("warning")
+      warning: (0, _helpers.getTextColorVariant)("warning"),
+      accent: (0, _helpers.getTextColorVariant)("accent"),
+      brand: (0, _helpers.getTextColorVariant)("brand"),
+      primary: (0, _helpers.getTextColorVariant)("primary"),
+      neutral: (0, _helpers.getTextColorVariant)("neutral")
     },
     hideTitle: {
       "true": {}
@@ -55,5 +62,21 @@ var _default = exports["default"] = (0, _system.css)({
     size: "compact",
     severity: "warning",
     css: (0, _helpers.getCompactTextColorVariant)("warning")
+  }, {
+    size: "compact",
+    severity: "accent",
+    css: (0, _helpers.getCompactTextColorVariant)("accent")
+  }, {
+    size: "compact",
+    severity: "brand",
+    css: (0, _helpers.getCompactTextColorVariant)("brand")
+  }, {
+    size: "compact",
+    severity: "primary",
+    css: (0, _helpers.getCompactTextColorVariant)("primary")
+  }, {
+    size: "compact",
+    severity: "neutral",
+    css: (0, _helpers.getCompactTextColorVariant)("neutral")
   }]
 });

package/dist/Callout/constants.js

@@ -10,25 +10,57 @@ var DEFAULT_CONTENT = exports.DEFAULT_CONTENT = {
   success: {
     icon: _icons.Completed,
     title: "Success",
+    titleColor: "$colors$success10",
     spinnerColor: "success",
     iconColor: "success"
   },
   info: {
     icon: _icons.Info,
     title: "Information",
+    titleColor: "$colors$info10",
     spinnerColor: "info",
     iconColor: "info"
   },
   warning: {
     icon: _icons.Alert,
     title: "Warning",
+    titleColor: "$colors$warning10",
     spinnerColor: "warning",
     iconColor: "warning"
   },
   critical: {
     icon: _icons.Error,
     title: "Critical",
+    titleColor: "$colors$critical10",
     spinnerColor: "critical",
     iconColor: "critical"
+  },
+  accent: {
+    icon: _icons.Info,
+    title: "Information",
+    titleColor: "$colors$accent10",
+    spinnerColor: "accent",
+    iconColor: "accent"
+  },
+  brand: {
+    icon: _icons.GentuLogo,
+    title: "Brand",
+    titleColor: "$colors$brand10",
+    spinnerColor: "brand",
+    iconColor: "brand"
+  },
+  primary: {
+    icon: _icons.Info,
+    title: "Information",
+    titleColor: "$colors$primary10",
+    spinnerColor: "primary",
+    iconColor: "primary"
+  },
+  neutral: {
+    icon: _icons.Info,
+    title: "Information",
+    titleColor: "$colors$neutral12",
+    spinnerColor: "neutral",
+    iconColor: "lowContrast"
   }
 };

package/dist/Callout/hooks/useCalloutContent.js

@@ -12,18 +12,22 @@ var useCalloutContent = function useCalloutContent(_ref) {
     icon = _ref.icon;
   var _getDefaultContent = (0, _logic.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
   };
 };
 var _default = exports["default"] = useCalloutContent;

package/dist/Callout/index.js

@@ -33,37 +33,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["default"].createElement(_CalloutDescription["default"], {
+        hideTitle: hideTitle,
+        size: size,
+        severity: severity,
+        content: description
+      });
+    }
+    if (size === "compact") {
+      return /*#__PURE__*/_react["default"].createElement(_CalloutDescription["default"], {
+        hideTitle: hideTitle,
+        size: size,
+        severity: severity,
+        content: description
+      });
+    }
+    if (size === "blockCompact") {
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        color: titleColor,
+        variant: "display200"
+      }, titleToDisplay), /*#__PURE__*/_react["default"].createElement(_CalloutDescription["default"], {
+        hideTitle: hideTitle,
+        size: size,
+        severity: severity,
+        content: description
+      }));
+    }
+    return /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      color: titleColor,
+      variant: "display300"
+    }, titleToDisplay);
+  };
+  var getIconContent = function getIconContent() {
+    if (size === "blockCompact") {
+      return /*#__PURE__*/_react["default"].createElement(_styled.BaseCalloutIconContainer, null, /*#__PURE__*/_react["default"].createElement(IconComponent, {
+        size: iconSize,
+        color: iconColor
+      }));
+    }
+    return /*#__PURE__*/_react["default"].createElement(IconComponent, {
+      size: iconSize,
+      color: iconColor
+    });
+  };
   return /*#__PURE__*/_react["default"].createElement(_styled.BaseCallout, {
     role: "alert",
     size: size,
     severity: severity
   }, /*#__PURE__*/_react["default"].createElement(_styled.BaseCalloutTitleContainer, {
     size: size
-  }, /*#__PURE__*/_react["default"].createElement(IconComponent, {
-    size: iconSize,
-    color: iconColor
-  }), hideTitle || size === "compact" ? /*#__PURE__*/_react["default"].createElement(_CalloutDescription["default"], {
-    hideTitle: hideTitle,
-    size: size,
+  }, getIconContent(), getTitleContent()), !isCompactLayout && !hideTitle && /*#__PURE__*/_react["default"].createElement(_CalloutDescription["default"], {
     severity: severity,
     content: description
-  }) : /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    color: severity,
-    variant: "display300"
-  }, titleToDisplay)), size !== "compact" && !hideTitle && /*#__PURE__*/_react["default"].createElement(_CalloutDescription["default"], {
-    severity: severity,
-    content: description
-  }), actions && size !== "compact" && /*#__PURE__*/_react["default"].createElement(_styled.BaseCalloutActions, null, secondary && /*#__PURE__*/_react["default"].createElement(_primitives["default"], (0, _extends2["default"])({
+  }), actions && size !== "compact" && /*#__PURE__*/_react["default"].createElement(_styled.BaseCalloutActions, {
+    size: size
+  }, secondary && /*#__PURE__*/_react["default"].createElement(_primitives["default"], (0, _extends2["default"])({
     onClick: secondary.onClick,
     variant: "ghost",
     iconRight: secondary.icon,

package/dist/Callout/styled.js

@@ -4,11 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BaseCalloutTitleContainer = exports.BaseCalloutActions = exports.BaseCallout = void 0;
+exports.BaseCalloutTitleContainer = exports.BaseCalloutIconContainer = exports.BaseCalloutActions = exports.BaseCallout = void 0;
 var _system = require("@vitality-ds/system");
 var _BaseCallout = _interopRequireDefault(require("./styles/BaseCallout.styles"));
 var _BaseCalloutActions = _interopRequireDefault(require("./styles/BaseCalloutActions.styles"));
+var _BaseCalloutIconContainer = _interopRequireDefault(require("./styles/BaseCalloutIconContainer.styles"));
 var _BaseCalloutTitleContainer = _interopRequireDefault(require("./styles/BaseCalloutTitleContainer.styles"));
 var BaseCallout = exports.BaseCallout = (0, _system.styled)("div", _BaseCallout["default"]);
 var BaseCalloutActions = exports.BaseCalloutActions = (0, _system.styled)("div", _BaseCalloutActions["default"]);
+var BaseCalloutIconContainer = exports.BaseCalloutIconContainer = (0, _system.styled)("div", _BaseCalloutIconContainer["default"]);
 var BaseCalloutTitleContainer = exports.BaseCalloutTitleContainer = (0, _system.styled)("div", _BaseCalloutTitleContainer["default"]);

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

@@ -20,13 +20,21 @@ var _default = exports["default"] = (0, _system.css)({
       info: {},
       warning: {},
       critical: {},
-      success: {}
+      success: {},
+      accent: {},
+      brand: {},
+      primary: {},
+      neutral: {}
     },
     size: {
       compact: {
         backgroundColor: "transparent",
         padding: 0
       },
+      blockCompact: {
+        flexDirection: "row",
+        padding: "$sm"
+      },
       "default": {}
     }
   },
@@ -46,5 +54,53 @@ var _default = exports["default"] = (0, _system.css)({
     size: "default",
     severity: "critical",
     css: (0, _helpers.getColorVariant)("critical")
+  }, {
+    size: "default",
+    severity: "accent",
+    css: (0, _helpers.getColorVariant)("accent")
+  }, {
+    size: "default",
+    severity: "brand",
+    css: (0, _helpers.getColorVariant)("brand")
+  }, {
+    size: "default",
+    severity: "primary",
+    css: (0, _helpers.getColorVariant)("primary")
+  }, {
+    size: "default",
+    severity: "neutral",
+    css: (0, _helpers.getColorVariant)("neutral")
+  }, {
+    size: "blockCompact",
+    severity: "warning",
+    css: (0, _helpers.getColorVariant)("warning")
+  }, {
+    size: "blockCompact",
+    severity: "success",
+    css: (0, _helpers.getColorVariant)("success")
+  }, {
+    size: "blockCompact",
+    severity: "info",
+    css: (0, _helpers.getColorVariant)("info")
+  }, {
+    size: "blockCompact",
+    severity: "critical",
+    css: (0, _helpers.getColorVariant)("critical")
+  }, {
+    size: "blockCompact",
+    severity: "accent",
+    css: (0, _helpers.getColorVariant)("accent")
+  }, {
+    size: "blockCompact",
+    severity: "brand",
+    css: (0, _helpers.getColorVariant)("brand")
+  }, {
+    size: "blockCompact",
+    severity: "primary",
+    css: (0, _helpers.getColorVariant)("primary")
+  }, {
+    size: "blockCompact",
+    severity: "neutral",
+    css: (0, _helpers.getColorVariant)("neutral")
   }]
 });

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

@@ -10,5 +10,14 @@ var _default = exports["default"] = (0, _system.css)({
   display: "flex",
   flex: 1,
   alignItems: "flex-start",
-  justifyContent: "flex-end"
+  justifyContent: "flex-end",
+  variants: {
+    size: {
+      blockCompact: {
+        flexGrow: 0
+      },
+      compact: {},
+      "default": {}
+    }
+  }
 });

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _system = require("@vitality-ds/system");
+// Adjust alignment of inline text with the icon in blockCompact mode
+var _default = exports["default"] = (0, _system.css)({
+  display: "flex",
+  marginTop: "0.15rem"
+});

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

@@ -1,10 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _system = require("@vitality-ds/system");
+var _styled = require("../../Typography/styled");
+var _styled2 = require("../components/CalloutDescription/styled");
 var _default = exports["default"] = (0, _system.css)({
   display: "flex",
   flex: 1,
@@ -18,6 +22,12 @@ var _default = exports["default"] = (0, _system.css)({
       compact: {
         gap: "$sm"
       },
+      blockCompact: {
+        gap: "$sm",
+        "& div": (0, _defineProperty2["default"])({}, "& > ".concat(_styled.BaseTypography, ", & > ").concat(_styled2.BaseCalloutDescription), {
+          marginRight: "$sm"
+        })
+      },
       "default": {}
     }
   }

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

@@ -36,6 +36,12 @@ var _default = exports["default"] = (0, _system.css)({
       },
       warning: {
         stroke: (0, _system.getColorScaleValueByUseCase)("warning", text.onSolidBackgrounds)
+      },
+      accent: {
+        stroke: (0, _system.getColorScaleValueByUseCase)("accent", text.onSolidBackgrounds)
+      },
+      brand: {
+        stroke: (0, _system.getColorScaleValueByUseCase)("brand", text.onSolidBackgrounds)
       }
     }
   }

package/dist/components/src/Button/logic.d.ts

@@ -1,12 +1,12 @@
 import { Appearances } from "./types";
 export declare const getAppearance: (appearance: keyof Appearances) => {
-    color: "neutral" | "primary" | "success" | "info" | "warning" | "critical" | ({
-        "@bp1"?: "neutral" | "primary" | "success" | "info" | "warning" | "critical";
-        "@bp2"?: "neutral" | "primary" | "success" | "info" | "warning" | "critical";
-        "@bp3"?: "neutral" | "primary" | "success" | "info" | "warning" | "critical";
-        "@initial"?: "neutral" | "primary" | "success" | "info" | "warning" | "critical";
+    color: "neutral" | "primary" | "accent" | "success" | "info" | "warning" | "critical" | "brand" | ({
+        "@bp1"?: "neutral" | "primary" | "accent" | "success" | "info" | "warning" | "critical" | "brand";
+        "@bp2"?: "neutral" | "primary" | "accent" | "success" | "info" | "warning" | "critical" | "brand";
+        "@bp3"?: "neutral" | "primary" | "accent" | "success" | "info" | "warning" | "critical" | "brand";
+        "@initial"?: "neutral" | "primary" | "accent" | "success" | "info" | "warning" | "critical" | "brand";
     } & {
-        [x: string]: "neutral" | "primary" | "success" | "info" | "warning" | "critical";
+        [x: string]: "neutral" | "primary" | "accent" | "success" | "info" | "warning" | "critical" | "brand";
     });
     variant: "link" | "subtle" | "solid" | "onSurface" | "ghost" | ({
         "@bp1"?: "link" | "subtle" | "solid" | "onSurface" | "ghost";
@@ -16,12 +16,12 @@ export declare const getAppearance: (appearance: keyof Appearances) => {
     } & {
         [x: string]: "link" | "subtle" | "solid" | "onSurface" | "ghost";
     });
-    spinnerColor: "neutral" | "primary" | "success" | "info" | "warning" | "critical" | ({
-        "@bp1"?: "neutral" | "primary" | "success" | "info" | "warning" | "critical";
-        "@bp2"?: "neutral" | "primary" | "success" | "info" | "warning" | "critical";
-        "@bp3"?: "neutral" | "primary" | "success" | "info" | "warning" | "critical";
-        "@initial"?: "neutral" | "primary" | "success" | "info" | "warning" | "critical";
+    spinnerColor: "neutral" | "primary" | "accent" | "success" | "info" | "warning" | "critical" | "brand" | ({
+        "@bp1"?: "neutral" | "primary" | "accent" | "success" | "info" | "warning" | "critical" | "brand";
+        "@bp2"?: "neutral" | "primary" | "accent" | "success" | "info" | "warning" | "critical" | "brand";
+        "@bp3"?: "neutral" | "primary" | "accent" | "success" | "info" | "warning" | "critical" | "brand";
+        "@initial"?: "neutral" | "primary" | "accent" | "success" | "info" | "warning" | "critical" | "brand";
     } & {
-        [x: string]: "neutral" | "primary" | "success" | "info" | "warning" | "critical";
+        [x: string]: "neutral" | "primary" | "accent" | "success" | "info" | "warning" | "critical" | "brand";
     });
 };

package/dist/components/src/Button/primitives/styled.d.ts

@@ -37,6 +37,8 @@ export declare const BaseButton: import("@stitches/react/types/styled-component"
             success: {};
             warning: {};
             info: {};
+            brand: {};
+            accent: {};
         };
         size: {
             default: {

package/dist/components/src/Button/primitives/styles/BaseButton.styles.d.ts

@@ -47,6 +47,8 @@ declare const _default: import("@stitches/react/types/styled-component").CssComp
             success: {};
             warning: {};
             info: {};
+            brand: {};
+            accent: {};
         };
         /**
          * The size of the button

package/dist/components/src/Callout/components/CalloutDescription/styled.d.ts

@@ -12,6 +12,9 @@ export declare const BaseCalloutDescription: import("@stitches/react/types/style
                 fontWeight: string;
                 lineHeight: string;
             };
+            blockCompact: {
+                display: string;
+            };
             default: {};
         };
         severity: {
@@ -19,6 +22,10 @@ export declare const BaseCalloutDescription: import("@stitches/react/types/style
             critical: import("@vitality-ds/system").CSS;
             success: import("@vitality-ds/system").CSS;
             warning: import("@vitality-ds/system").CSS;
+            accent: import("@vitality-ds/system").CSS;
+            brand: import("@vitality-ds/system").CSS;
+            primary: import("@vitality-ds/system").CSS;
+            neutral: import("@vitality-ds/system").CSS;
         };
         hideTitle: {
             true: {};

package/dist/components/src/Callout/components/CalloutDescription/styles/BaseCalloutDescription.styles.d.ts

@@ -12,6 +12,9 @@ declare const _default: import("@stitches/react/types/styled-component").CssComp
                 fontWeight: string;
                 lineHeight: string;
             };
+            blockCompact: {
+                display: string;
+            };
             default: {};
         };
         severity: {
@@ -19,6 +22,10 @@ declare const _default: import("@stitches/react/types/styled-component").CssComp
             critical: import("@vitality-ds/system").CSS;
             success: import("@vitality-ds/system").CSS;
             warning: import("@vitality-ds/system").CSS;
+            accent: import("@vitality-ds/system").CSS;
+            brand: import("@vitality-ds/system").CSS;
+            primary: import("@vitality-ds/system").CSS;
+            neutral: import("@vitality-ds/system").CSS;
         };
         hideTitle: {
             true: {};

package/dist/components/src/Callout/components/CalloutDescription/types.d.ts

@@ -1,6 +1,8 @@
 import { VariantProps } from "@vitality-ds/system";
 import React from "react";
 import { BaseCalloutDescription } from "./styled";
-export declare type CalloutDescriptionProps = VariantProps<typeof BaseCalloutDescription> & {
+declare type BaseDescriptionProps = VariantProps<typeof BaseCalloutDescription>;
+export declare type CalloutDescriptionProps = BaseDescriptionProps & {
     content: React.ReactNode;
 };
+export {};