@vitality-ds/components 4.3.4-alpha.0 → 4.4.0

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,18 @@ 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, {
+    disabled: disabled,
+    htmlFor: id
+  }, label), /*#__PURE__*/React.createElement(BaseSwitch, _extends({
     defaultChecked: defaultChecked,
     required: required,
     name: name,
@@ -34,7 +46,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",
@@ -39,8 +44,8 @@ export default css({
   variants: {
     size: {
       "1": {
-        width: CONFIG.TRACK_WIDTH,
-        height: CONFIG.TRACK_HEIGHT
+        width: TRACK_WIDTH,
+        height: TRACK_HEIGHT
       }
     },
     checked: {

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

@@ -0,0 +1,17 @@
+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,
+  variants: {
+    disabled: {
+      "true": {
+        cursor: "not-allowed",
+        color: getColorScaleValueByUseCase("neutral", text.disabled)
+      }
+    }
+  }
+});

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

@@ -1,23 +1,30 @@
 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)
         }