@vitality-ds/components 4.3.4 → 4.4.1

package/dist/esm/StatusBadge/StatusBadgeButton.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["label", "icon", "importance", "severity", "css", "style", "className", "as", "onClick"];
+var _excluded = ["label", "icon", "hideIcon", "importance", "severity", "css", "style", "className", "as", "onClick"];
 import React from "react";
 import StatusBadgeIcon from "./components/StatusBadgeIcon";
 import { getIcon } from "./logic";
@@ -8,6 +8,8 @@ import { BaseStatusBadgeButton } from "./styled";
 var StatusBadgeButton = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var label = _ref.label,
     icon = _ref.icon,
+    _ref$hideIcon = _ref.hideIcon,
+    hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
     _ref$importance = _ref.importance,
     importance = _ref$importance === void 0 ? "normal" : _ref$importance,
     _ref$severity = _ref.severity,
@@ -24,7 +26,7 @@ var StatusBadgeButton = /*#__PURE__*/React.forwardRef(function (_ref, forwardedR
     ref: forwardedRef,
     importance: importance,
     severity: severity
-  }, restProps), /*#__PURE__*/React.createElement(StatusBadgeIcon, null, icon || getIcon(severity)), label);
+  }, restProps), !hideIcon && /*#__PURE__*/React.createElement(StatusBadgeIcon, null, icon || getIcon(severity)), label);
 });
 StatusBadgeButton.displayName = "StatusBadgeButton";
 export default StatusBadgeButton;

package/dist/esm/StatusBadge/StatusBadgeLink.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["label", "icon", "importance", "severity", "css", "style", "className", "as", "href", "target"];
+var _excluded = ["label", "icon", "hideIcon", "importance", "severity", "css", "style", "className", "as", "href", "target"];
 import React from "react";
 import StatusBadgeIcon from "./components/StatusBadgeIcon";
 import { getIcon } from "./logic";
@@ -8,6 +8,8 @@ import { BaseStatusBadgeLink } from "./styled";
 var StatusBadgeLink = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var label = _ref.label,
     icon = _ref.icon,
+    _ref$hideIcon = _ref.hideIcon,
+    hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
     _ref$importance = _ref.importance,
     importance = _ref$importance === void 0 ? "normal" : _ref$importance,
     _ref$severity = _ref.severity,
@@ -26,7 +28,7 @@ var StatusBadgeLink = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
     ref: forwardedRef,
     importance: importance,
     severity: severity
-  }, restProps), /*#__PURE__*/React.createElement(StatusBadgeIcon, null, icon || getIcon(severity)), label);
+  }, restProps), !hideIcon && /*#__PURE__*/React.createElement(StatusBadgeIcon, null, icon || getIcon(severity)), label);
 });
 StatusBadgeLink.displayName = "StatusBadgeLink";
 export default StatusBadgeLink;

package/dist/esm/Switch/constants/labelDirections.js

@@ -0,0 +1,10 @@
+/**
+ * Below values relate to direction property of the
+ */
+var LABEL_DIRECTIONS = {
+  top: "vertical",
+  bottom: "verticalReverse",
+  left: "horizontal",
+  right: "horizontalReverse"
+};
+export default LABEL_DIRECTIONS;

package/dist/esm/Switch/constants/size.js

@@ -0,0 +1,7 @@
+var SIZE = {
+  INSET_SPACING: 2,
+  THUMB: 16,
+  TRACK_WIDTH: 40,
+  TRACK_HEIGHT: 20
+};
+export default SIZE;

package/dist/esm/Switch/constants/transitions.js

@@ -0,0 +1,5 @@
+var TRANSITION = {
+  DURATION_MS: 250,
+  TIMING_FUNCTION: "cubic-bezier(0.22, 1, 0.36, 1)"
+};
+export default TRANSITION;

package/dist/esm/Switch/index.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["defaultChecked", "required", "name", "value", "id", "checked", "onCheckedChange", "disabled", "style", "className", "as", "css"];
+var _excluded = ["defaultChecked", "required", "name", "value", "id", "checked", "onCheckedChange", "disabled", "style", "className", "as", "css", "labelPosition", "label"];
 import { Close, Done } from "@vitality-ds/icons";
 import React from "react";
-import { BaseSwitch, BaseSwitchThumb } from "./styled";
+import Stack from "../Stack";
+import LABEL_DIRECTIONS from "./constants/labelDirections";
+import { BaseSwitch, BaseSwitchLabel, BaseSwitchThumb } from "./styled";
 var iconProps = {
   color: "inherit",
   size: "inherit"
@@ -21,8 +23,19 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     className = _ref.className,
     as = _ref.as,
     css = _ref.css,
+    _ref$labelPosition = _ref.labelPosition,
+    labelPosition = _ref$labelPosition === void 0 ? "left" : _ref$labelPosition,
+    label = _ref.label,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(BaseSwitch, _extends({
+  var direction = LABEL_DIRECTIONS[labelPosition];
+  return /*#__PURE__*/React.createElement(Stack, {
+    direction: direction,
+    align: "center"
+  }, label && /*#__PURE__*/React.createElement(BaseSwitchLabel, {
+    direction: labelPosition,
+    disabled: disabled,
+    htmlFor: id
+  }, label), /*#__PURE__*/React.createElement(BaseSwitch, _extends({
     defaultChecked: defaultChecked,
     required: required,
     name: name,
@@ -34,7 +47,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     ref: forwardedRef
   }, restProps), /*#__PURE__*/React.createElement(BaseSwitchThumb, {
     checked: checked
-  }), checked ? /*#__PURE__*/React.createElement(Done, iconProps) : /*#__PURE__*/React.createElement(Close, iconProps));
+  }), checked ? /*#__PURE__*/React.createElement(Done, iconProps) : /*#__PURE__*/React.createElement(Close, iconProps)));
 });
 Switch.displayName = "Switch";
 export default Switch;

package/dist/esm/Switch/styled.js

@@ -1,6 +1,8 @@
 import { Root as SwitchPrimitiveRoot, Thumb as SwitchPrimitiveThumb } from "@radix-ui/react-switch";
 import { styled } from "@vitality-ds/system";
 import baseSwitchStyles from "./styles/BaseSwitch.styles";
+import baseSwitchLabelStyles from "./styles/BaseSwitchLabel.styles";
 import baseSwitchThumbStyles from "./styles/BaseSwitchThumb.styles";
 export var BaseSwitchThumb = styled(SwitchPrimitiveThumb, baseSwitchThumbStyles);
-export var BaseSwitch = styled(SwitchPrimitiveRoot, baseSwitchStyles);
+export var BaseSwitch = styled(SwitchPrimitiveRoot, baseSwitchStyles);
+export var BaseSwitchLabel = styled("label", baseSwitchLabelStyles);

package/dist/esm/Switch/styles/BaseSwitch.styles.js

@@ -1,8 +1,13 @@
 import { colorUseCases, css, getColorScaleValueByUseCase } from "@vitality-ds/system";
-import CONFIG from "../constants";
+import SIZE from "../constants/size";
+import TRANSITION from "../constants/transitions";
 var text = colorUseCases.text,
   backgrounds = colorUseCases.backgrounds,
   borders = colorUseCases.borders;
+var DURATION_MS = TRANSITION.DURATION_MS,
+  TIMING_FUNCTION = TRANSITION.TIMING_FUNCTION;
+var TRACK_WIDTH = SIZE.TRACK_WIDTH,
+  TRACK_HEIGHT = SIZE.TRACK_HEIGHT;
 export default css({
   all: "unset",
   boxSizing: "border-box",
@@ -15,7 +20,7 @@ export default css({
   lineHeight: 1,
   margin: "0",
   outline: "none",
-  transition: "background-color ".concat(CONFIG.TRANSITION_DURATION_MS, "ms ").concat(CONFIG.TRANSITION_TIMING_FUNCTION),
+  transition: "background-color ".concat(DURATION_MS, "ms ").concat(TIMING_FUNCTION),
   borderRadius: "$rounded",
   position: "relative",
   cursor: "pointer",
@@ -25,7 +30,7 @@ export default css({
     cursor: "not-allowed",
     "&, &:hover": {
       backgroundColor: getColorScaleValueByUseCase("neutral", backgrounds.uiElementSolid_disabled),
-      color: getColorScaleValueByUseCase("neutral", text.onSolidBackgrounds)
+      color: getColorScaleValueByUseCase("neutral", text.disabled)
     }
   },
   "&:hover": {
@@ -39,21 +44,21 @@ export default css({
   variants: {
     size: {
       "1": {
-        width: CONFIG.TRACK_WIDTH,
-        height: CONFIG.TRACK_HEIGHT
+        width: TRACK_WIDTH,
+        height: TRACK_HEIGHT
       }
     },
     checked: {
       "true": {
         justifyContent: "flex-start",
-        backgroundColor: getColorScaleValueByUseCase("primary", backgrounds.uiElementSolid_active),
+        backgroundColor: getColorScaleValueByUseCase("primary", backgrounds.uiElementSolid),
         "&:hover": {
-          backgroundColor: getColorScaleValueByUseCase("primary", backgrounds.uiElementSolid_hovered)
+          backgroundColor: getColorScaleValueByUseCase("primary", backgrounds.uiElementSolid_active)
         },
         "&[data-disabled]": {
           "&, &:hover": {
-            backgroundColor: getColorScaleValueByUseCase("primary", backgrounds.uiElementSolid_disabled),
-            color: getColorScaleValueByUseCase("primary", text.disabled)
+            backgroundColor: getColorScaleValueByUseCase("neutral", backgrounds.uiElementSolid_disabled),
+            color: getColorScaleValueByUseCase("neutral", text.disabled)
           }
         }
       }

package/dist/esm/Switch/styles/BaseSwitchLabel.styles.js

@@ -0,0 +1,33 @@
+import { colorUseCases, css, getColorScaleValueByUseCase } from "@vitality-ds/system";
+var text = colorUseCases.text;
+export default css({
+  fontSize: "$body",
+  cursor: "pointer",
+  whiteSpace: "pre",
+  textWrap: "auto",
+  flex: 1,
+  marginBottom: 0,
+  // Gentu global style override
+  variants: {
+    disabled: {
+      "true": {
+        cursor: "not-allowed",
+        color: getColorScaleValueByUseCase("neutral", text.disabled)
+      }
+    },
+    direction: {
+      top: {
+        textAlign: "center"
+      },
+      bottom: {
+        textAlign: "center"
+      },
+      left: {
+        textAlign: "right"
+      },
+      right: {
+        textAlign: "left"
+      }
+    }
+  }
+});

package/dist/esm/Switch/styles/BaseSwitchThumb.styles.js

@@ -1,25 +1,32 @@
 import { colorUseCases, css, getColorScaleValueByUseCase } from "@vitality-ds/system";
-import CONFIG from "../constants";
-var text = colorUseCases.text;
+import SIZE from "../constants/size";
+import TRANSITION from "../constants/transitions";
+var text = colorUseCases.text,
+  backgrounds = colorUseCases.backgrounds;
+var THUMB = SIZE.THUMB,
+  INSET_SPACING = SIZE.INSET_SPACING,
+  TRACK_WIDTH = SIZE.TRACK_WIDTH;
+var DURATION_MS = TRANSITION.DURATION_MS,
+  TIMING_FUNCTION = TRANSITION.TIMING_FUNCTION;
 export default css({
   position: "absolute",
   left: 0,
-  width: CONFIG.THUMB,
-  height: CONFIG.THUMB,
+  width: THUMB,
+  height: THUMB,
   borderRadius: "$rounded",
-  transition: "transform ".concat(CONFIG.TRANSITION_DURATION_MS, "ms ").concat(CONFIG.TRANSITION_TIMING_FUNCTION),
-  transform: "translateX(".concat(CONFIG.INSET_SPACING, "px)"),
+  transition: "transform ".concat(DURATION_MS, "ms ").concat(TIMING_FUNCTION),
+  transform: "translateX(".concat(INSET_SPACING, "px)"),
   willChange: "transform",
   backgroundColor: getColorScaleValueByUseCase("neutral", text.onSolidBackgrounds),
   "&[data-disabled]": {
-    backgroundColor: getColorScaleValueByUseCase("neutral", text.onSolidBackgrounds)
+    backgroundColor: getColorScaleValueByUseCase("neutral", backgrounds.uiElement)
   },
   variants: {
     checked: {
       "true": {
-        transform: "translateX(".concat(CONFIG.TRACK_WIDTH - CONFIG.THUMB - CONFIG.INSET_SPACING, "px)"),
+        transform: "translateX(".concat(TRACK_WIDTH - THUMB - INSET_SPACING, "px)"),
         "&[data-disabled]": {
-          backgroundColor: getColorScaleValueByUseCase("primary", text.disabled)
+          backgroundColor: getColorScaleValueByUseCase("neutral", text.disabled)
         }
       }
     }