@jobber/components 6.109.5 → 6.110.0

package/dist/FeatureSwitch/index.cjs

@@ -9,11 +9,11 @@ require('../Typography-cjs.js');
 require('../Text-cjs.js');
 require('../Content-cjs.js');
 require('../Switch-cjs.js');
+require('../Icon-cjs.js');
+require('@jobber/design');
 require('../Button-cjs.js');
 require('react-router-dom');
 require('../tslib.es6-cjs.js');
-require('../Icon-cjs.js');
-require('@jobber/design');
 require('../Emphasis-cjs.js');
 require('../Markdown-cjs.js');
 require('react/jsx-runtime');

package/dist/FeatureSwitch/index.mjs

@@ -7,11 +7,11 @@ import '../Typography-es.js';
 import '../Text-es.js';
 import '../Content-es.js';
 import '../Switch-es.js';
+import '../Icon-es.js';
+import '@jobber/design';
 import '../Button-es.js';
 import 'react-router-dom';
 import '../tslib.es6-es.js';
-import '../Icon-es.js';
-import '@jobber/design';
 import '../Emphasis-es.js';
 import '../Markdown-es.js';
 import 'react/jsx-runtime';

package/dist/Switch/index.cjs

@@ -3,7 +3,8 @@
 var Switch = require('../Switch-cjs.js');
 require('react');
 require('classnames');
-require('../Typography-cjs.js');
+require('../Icon-cjs.js');
+require('@jobber/design');
 
 
 

package/dist/Switch/index.mjs

@@ -1,4 +1,5 @@
 export { S as Switch } from '../Switch-es.js';
 import 'react';
 import 'classnames';
-import '../Typography-es.js';
+import '../Icon-es.js';
+import '@jobber/design';

package/dist/Switch-cjs.js

@@ -2,9 +2,9 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var Typography = require('./Typography-cjs.js');
+var Icon = require('./Icon-cjs.js');
 
-var styles = {"switch":"rVg6dYYBFN4-","track":"yyISARGmmJo-","isChecked":"_40c6OIH33p8-","toggle":"zA0Fmn8IIZI-","label":"HLUIVXs3n5w-","pip":"PiwOCJz7Zto-","disabled":"e-cSZjkHGw8-","spinning":"_0lBGF-nXMrc-"};
+var styles = {"switch":"rVg6dYYBFN4-","track":"yyISARGmmJo-","isChecked":"_40c6OIH33p8-","toggle":"zA0Fmn8IIZI-","disabled":"e-cSZjkHGw8-","pip":"PiwOCJz7Zto-","icon":"JS-CLzHa9-I-","spinning":"_0lBGF-nXMrc-"};
 
 function Switch({ value: providedValue, ariaLabel, name, disabled, onChange, }) {
     const [statefulValue, setValue] = React.useState(false);
@@ -25,24 +25,21 @@ function Switch({ value: providedValue, ariaLabel, name, disabled, onChange, })
     });
     return (React.createElement(React.Fragment, null,
         React.createElement("button", { id: name, type: "button", role: "switch", "aria-checked": value, "aria-label": ariaLabel, className: className, onClick: toggleSwitch, disabled: disabled },
-            React.createElement("span", { className: styles.toggle },
-                React.createElement(Label, { as: "On", disabled: disabled }),
-                React.createElement("span", { className: styles.pip }),
-                React.createElement(Label, { as: "Off", disabled: disabled }))),
+            React.createElement("span", { className: styles.icon, "aria-hidden": "true" },
+                React.createElement(Icon.Icon, Object.assign({ size: "small", name: value ? "checkmark" : "cross" }, getIconColor(value, disabled !== null && disabled !== void 0 ? disabled : false)))),
+            React.createElement("span", { className: styles.toggle })),
         React.createElement("input", { name: name, type: "hidden", value: String(value) })));
 }
-function Label({ as, disabled }) {
-    const getTextColor = () => {
-        if (disabled) {
-            return "grey";
-        }
-        else if (as === "On") {
-            return "white";
-        }
-        return "greyBlue";
+function getIconColor(isChecked, isDisabled) {
+    const checkedColor = {
+        color: "surface",
+    };
+    const uncheckedColor = {
+        customColor: isDisabled
+            ? "var(--color-disabled)"
+            : "var(--color-inactive--onSurface)",
     };
-    return (React.createElement("span", { className: styles.label },
-        React.createElement(Typography.Typography, { element: "span", textColor: getTextColor(), size: "small", fontWeight: "bold", textCase: "uppercase" }, as)));
+    return isChecked ? checkedColor : uncheckedColor;
 }
 
 exports.Switch = Switch;

package/dist/Switch-es.js

@@ -1,8 +1,8 @@
 import React__default, { useState } from 'react';
 import classnames from 'classnames';
-import { T as Typography } from './Typography-es.js';
+import { I as Icon } from './Icon-es.js';
 
-var styles = {"switch":"rVg6dYYBFN4-","track":"yyISARGmmJo-","isChecked":"_40c6OIH33p8-","toggle":"zA0Fmn8IIZI-","label":"HLUIVXs3n5w-","pip":"PiwOCJz7Zto-","disabled":"e-cSZjkHGw8-","spinning":"_0lBGF-nXMrc-"};
+var styles = {"switch":"rVg6dYYBFN4-","track":"yyISARGmmJo-","isChecked":"_40c6OIH33p8-","toggle":"zA0Fmn8IIZI-","disabled":"e-cSZjkHGw8-","pip":"PiwOCJz7Zto-","icon":"JS-CLzHa9-I-","spinning":"_0lBGF-nXMrc-"};
 
 function Switch({ value: providedValue, ariaLabel, name, disabled, onChange, }) {
     const [statefulValue, setValue] = useState(false);
@@ -23,24 +23,21 @@ function Switch({ value: providedValue, ariaLabel, name, disabled, onChange, })
     });
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("button", { id: name, type: "button", role: "switch", "aria-checked": value, "aria-label": ariaLabel, className: className, onClick: toggleSwitch, disabled: disabled },
-            React__default.createElement("span", { className: styles.toggle },
-                React__default.createElement(Label, { as: "On", disabled: disabled }),
-                React__default.createElement("span", { className: styles.pip }),
-                React__default.createElement(Label, { as: "Off", disabled: disabled }))),
+            React__default.createElement("span", { className: styles.icon, "aria-hidden": "true" },
+                React__default.createElement(Icon, Object.assign({ size: "small", name: value ? "checkmark" : "cross" }, getIconColor(value, disabled !== null && disabled !== void 0 ? disabled : false)))),
+            React__default.createElement("span", { className: styles.toggle })),
         React__default.createElement("input", { name: name, type: "hidden", value: String(value) })));
 }
-function Label({ as, disabled }) {
-    const getTextColor = () => {
-        if (disabled) {
-            return "grey";
-        }
-        else if (as === "On") {
-            return "white";
-        }
-        return "greyBlue";
+function getIconColor(isChecked, isDisabled) {
+    const checkedColor = {
+        color: "surface",
+    };
+    const uncheckedColor = {
+        customColor: isDisabled
+            ? "var(--color-disabled)"
+            : "var(--color-inactive--onSurface)",
     };
-    return (React__default.createElement("span", { className: styles.label },
-        React__default.createElement(Typography, { element: "span", textColor: getTextColor(), size: "small", fontWeight: "bold", textCase: "uppercase" }, as)));
+    return isChecked ? checkedColor : uncheckedColor;
 }
 
 export { Switch as S };

package/dist/styles.css

@@ -7850,15 +7850,19 @@ h2.react-datepicker__current-month {
 .rVg6dYYBFN4- {
   --switch--width: 48px;
   --switch--pipSize: 16px;
-  --switch--labelWidth: calc(var(--switch--pipSize) * 1.3);
   --switch--borderOffset: var(--border-thick);
+  --switch-pipOnPosition: calc(
+    var(--switch--width) - var(--switch--pipSize) -
+      (var(--switch--borderOffset) * 2) - var(--space-smallest)
+  );
+  --switch-pipOffPosition: var(--space-smallest);
 }
 
 .yyISARGmmJo-,
 .yyISARGmmJo- * {
   box-sizing: border-box;
-  transition: all 200ms;
-  transition: all var(--timing-base);
+  transition: all 200ms ease-in-out;
+  transition: all var(--timing-base) ease-in-out;
 }
 
 .yyISARGmmJo- {
@@ -7872,8 +7876,8 @@ h2.react-datepicker__current-month {
   border-radius: var(--switch--pipSize);
   overflow: hidden;
   line-height: normal;
-  background-color: rgba(255, 255, 255, 1);
-  background-color: var(--color-surface);
+  background-color: hsl(195, 12%, 94%);
+  background-color: var(--color-inactive--surface);
   cursor: pointer;
   -webkit-appearance: none;
           appearance: none;
@@ -7900,78 +7904,46 @@ h2.react-datepicker__current-month {
   background-color: var(--color-interactive);
 }
 
-.zA0Fmn8IIZI- {
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  margin-left: calc(var(--switch--width) / -2);
-  pointer-events: none;
-  -ms-flex: 1 1 100%;
-      flex: 1 1 100%;
-  -ms-flex-align: center;
-      align-items: center;
-}
-
-._40c6OIH33p8- .zA0Fmn8IIZI- {
-  margin-left: 0;
-}
-
-.HLUIVXs3n5w- {
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  min-width: var(--switch--labelWidth);
-  margin-top: 1px;
-  margin-top: var(--space-minuscule);
-  -webkit-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  pointer-events: none;
-  -ms-flex-align: center;
-      align-items: center;
-  -ms-flex-pack: center;
-      justify-content: center;
-  opacity: 0;
-}
-
-.HLUIVXs3n5w-:first-of-type {
-  padding-left: 8px;
-  padding-left: var(--space-small);
-}
-
-.HLUIVXs3n5w-:last-of-type {
-  padding-right: 8px;
-  padding-right: var(--space-small);
+._40c6OIH33p8-:hover {
+  border-color: hsl(107, 65%, 24%);
+  border-color: var(--color-interactive--hover);
+  background-color: hsl(107, 65%, 24%);
+  background-color: var(--color-interactive--hover);
 }
 
-.PiwOCJz7Zto- {
-  -ms-flex: 0 0 auto;
-      flex: 0 0 auto;
+.zA0Fmn8IIZI- {
   width: var(--switch--pipSize);
   height: var(--switch--pipSize);
   border: none;
   border-radius: 100%;
   border-radius: var(--radius-circle);
-  background-color: hsl(198, 35%, 21%);
-  background-color: var(--color-interactive--subtle);
-  transition: all 100ms ease-out;
-  transition: all var(--timing-quick) ease-out;
+  background-color: hsl(197, 90%, 12%);
+  background-color: var(--color-inactive--onSurface);
+  -webkit-transform: translateX(var(--switch-pipOffPosition));
+          transform: translateX(var(--switch-pipOffPosition));
 }
 
-._40c6OIH33p8- .PiwOCJz7Zto- {
+._40c6OIH33p8- .zA0Fmn8IIZI- {
   border-color: hsl(107, 58%, 33%);
   border-color: var(--color-interactive);
   background-color: rgba(255, 255, 255, 1);
   background-color: var(--color-surface);
+  -webkit-transform: translateX(var(--switch-pipOnPosition));
+          transform: translateX(var(--switch-pipOnPosition));
 }
 
-.e-cSZjkHGw8- .PiwOCJz7Zto- {
+.e-cSZjkHGw8- .zA0Fmn8IIZI- {
   border-color: hsl(0, 0%, 93%);
   border-color: var(--color-disabled--secondary);
   background-color: hsl(0, 0%, 58%);
   background-color: var(--color-disabled);
 }
 
+.e-cSZjkHGw8-._40c6OIH33p8- .zA0Fmn8IIZI- {
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+}
+
 .e-cSZjkHGw8- {
   border-color: hsl(0, 0%, 58%);
   border-color: var(--color-disabled);
@@ -7995,6 +7967,63 @@ h2.react-datepicker__current-month {
   border-color: var(--color-disabled);
 }
 
+.JS-CLzHa9-I- {
+  display: -ms-flexbox;
+  display: flex;
+  position: absolute;
+  -webkit-transform: translateX(
+    calc(
+      var(--switch-pipOffPosition) + var(--switch--pipSize) +
+        4px
+    )
+  );
+  -webkit-transform: translateX(
+    calc(
+      var(--switch-pipOffPosition) + var(--switch--pipSize) +
+        var(--space-smaller)
+    )
+  );
+          transform: translateX(
+    calc(
+      var(--switch-pipOffPosition) + var(--switch--pipSize) +
+        4px
+    )
+  );
+          transform: translateX(
+    calc(
+      var(--switch-pipOffPosition) + var(--switch--pipSize) +
+        var(--space-smaller)
+    )
+  );
+}
+
+._40c6OIH33p8- .JS-CLzHa9-I- {
+  -webkit-transform: translateX(
+    calc(
+      var(--switch-pipOnPosition) - var(--switch--pipSize) -
+        4px
+    )
+  );
+  -webkit-transform: translateX(
+    calc(
+      var(--switch-pipOnPosition) - var(--switch--pipSize) -
+        var(--space-smaller)
+    )
+  );
+          transform: translateX(
+    calc(
+      var(--switch-pipOnPosition) - var(--switch--pipSize) -
+        4px
+    )
+  );
+          transform: translateX(
+    calc(
+      var(--switch-pipOnPosition) - var(--switch--pipSize) -
+        var(--space-smaller)
+    )
+  );
+}
+
 .ViFkIUcS6PM- {
   font-style: normal;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.109.5",
+  "version": "6.110.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "f7a0a568d4416a7f2e691260e61efebe85541559"
+  "gitHead": "8c986f28ec1bc68fb16cc16110bb76af64ab3e1e"
 }