@invoicebox/ui 0.1.0-alpha.265 → 0.1.0-alpha.267

package/dist/components/form/Toggle/index.js

@@ -10,7 +10,7 @@ var _styles = _interopRequireWildcard(require("./styles"));
 var S = _styles;
 var _Typography = require("../../common/Typography");
 var _palette = require("../../../palette");
-var _excluded = ["checked", "variant", "label", "onChange"];
+var _excluded = ["checked", "variant", "label", "onChange", "disabled"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -23,6 +23,7 @@ var Toggle = exports.Toggle = function Toggle(_ref) {
     variant = _ref$variant === void 0 ? 'small' : _ref$variant,
     label = _ref.label,
     onChange = _ref.onChange,
+    disabled = _ref.disabled,
     other = _objectWithoutProperties(_ref, _excluded);
   var palette = (0, _palette.useComponentPalette)('toggle');
   var labelVariant = _styles.INPUT_VARIANT_MAP[variant].labelVariant;
@@ -30,14 +31,17 @@ var Toggle = exports.Toggle = function Toggle(_ref) {
     onChange(event.target.checked);
   };
   return /*#__PURE__*/_react["default"].createElement(S.Label, {
-    $color: palette.label
+    $color: palette.label,
+    $disabled: disabled,
+    $disabledColor: palette.disabledLabel
   }, /*#__PURE__*/_react["default"].createElement(S.StyledInput, _extends({
     $variant: variant,
     $palette: palette,
     checked: checked,
     onChange: handleChange,
-    type: "checkbox"
-  }, other)), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    type: "checkbox",
+    disabled: disabled
+  }, other)), label && /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     variant: labelVariant
   }, label));
 };

package/dist/components/form/Toggle/index.stories.js

@@ -35,7 +35,8 @@ var Component = function Component(props) {
 var Default = exports.Default = {
   args: {
     label: 'Label',
-    variant: 'small'
+    variant: 'small',
+    disabled: false
   },
   render: Component
 };

package/dist/components/form/Toggle/palette.d.ts

@@ -4,5 +4,7 @@ export type TTogglePalette = {
     defaultBg: string;
     activeBg: string;
     label: string;
+    disabledLabel: string;
+    disabledBorder: string;
 };
 export declare const generateTogglePalette: (abstractPalette: TAbstractPalette) => TTogglePalette;

package/dist/components/form/Toggle/palette.js

@@ -11,6 +11,8 @@ var generateTogglePalette = exports.generateTogglePalette = function generateTog
     circle: abstractPalette.base,
     defaultBg: (0, _hexToRgba["default"])(abstractPalette.primary, 0.3),
     activeBg: abstractPalette.secondary,
-    label: abstractPalette.primary
+    label: abstractPalette.primary,
+    disabledLabel: (0, _hexToRgba["default"])(abstractPalette.primary, 0.5),
+    disabledBorder: (0, _hexToRgba["default"])(abstractPalette.primary, 0.1)
   };
 };

package/dist/components/form/Toggle/styles.d.ts

@@ -4,6 +4,8 @@ import { TTogglePalette } from './palette';
 export type TToggleSize = 'small' | 'medium';
 export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
     $color: string;
+    $disabled?: boolean | undefined;
+    $disabledColor: string;
 }>> & string;
 export declare const INPUT_VARIANT_MAP: Record<TToggleSize, {
     width: number;
@@ -12,6 +14,7 @@ export declare const INPUT_VARIANT_MAP: Record<TToggleSize, {
     labelVariant: keyof typeof typography;
     leftChecked: number;
     left: number;
+    border: number;
 }>;
 export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
     $palette: TTogglePalette;

package/dist/components/form/Toggle/styles.js

@@ -9,9 +9,14 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
 var Label = exports.Label = _styledComponents["default"].label.withConfig({
   displayName: "styles__Label",
   componentId: "sc-1pe8ina-0"
-})(["display:inline-flex;align-items:center;gap:8px;cursor:pointer;box-sizing:border-box;color:", ";"], function (_ref) {
-  var $color = _ref.$color;
-  return $color;
+})(["display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;color:", ";cursor:", ";"], function (_ref) {
+  var $color = _ref.$color,
+    $disabledColor = _ref.$disabledColor,
+    $disabled = _ref.$disabled;
+  return $disabled ? $disabledColor : $color;
+}, function (_ref2) {
+  var $disabled = _ref2.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
 });
 var INPUT_VARIANT_MAP = exports.INPUT_VARIANT_MAP = {
   small: {
@@ -19,46 +24,57 @@ var INPUT_VARIANT_MAP = exports.INPUT_VARIANT_MAP = {
     height: 16,
     circleSize: 14,
     labelVariant: 'captionRegular',
-    leftChecked: 12,
-    left: 1
+    leftChecked: 11,
+    left: 0,
+    border: 1
   },
   medium: {
-    width: 33,
-    height: 20,
+    width: 32.225,
+    height: 19.2,
     circleSize: 16,
     labelVariant: 'headline5',
-    leftChecked: 15.5,
-    left: 1.5
+    leftChecked: 13,
+    left: 0,
+    border: 1.5
   }
 };
 var StyledInput = exports.StyledInput = _styledComponents["default"].input.withConfig({
   displayName: "styles__StyledInput",
   componentId: "sc-1pe8ina-1"
-})(["position:relative;width:", "px;height:", "px;cursor:pointer;flex-shrink:0;-webkit-appearance:none;box-shadow:none;border:none;background:", ";border-radius:30px;&:after{content:'';display:block;position:absolute;left:", "px;top:50%;transform:translateY(-50%);width:", "px;height:", "px;border-radius:50%;background-color:", ";transition:all 0.2s ease-in-out 0s;}&:checked::after{left:", "px;}&:checked{background:", ";}&:disabled{cursor:not-allowed;}"], function (_ref2) {
-  var $variant = _ref2.$variant;
-  return INPUT_VARIANT_MAP[$variant].width;
-}, function (_ref3) {
+})(["position:relative;width:", "px;height:", "px;cursor:pointer;flex-shrink:0;box-sizing:border-box;border:", "px solid;border-color:rgba(0,0,0,0);-webkit-appearance:none;box-shadow:none;background:", ";border-radius:50px;&:after{content:'';display:block;position:absolute;left:", "px;top:50%;transform:translateY(-50%);width:", "px;height:", "px;border-radius:50%;background-color:", ";transition:all 0.2s ease-in-out 0s;}&:checked::after{left:", "px;}&:checked{background:", ";}&:disabled{cursor:not-allowed;border:", "px solid ", ";background:white;&:after{box-shadow:0 3px 8px rgba(0,0,0,0.15);}}"], function (_ref3) {
   var $variant = _ref3.$variant;
-  return INPUT_VARIANT_MAP[$variant].height;
+  return INPUT_VARIANT_MAP[$variant].width;
 }, function (_ref4) {
-  var $palette = _ref4.$palette;
-  return $palette.defaultBg;
+  var $variant = _ref4.$variant;
+  return INPUT_VARIANT_MAP[$variant].height;
 }, function (_ref5) {
   var $variant = _ref5.$variant;
-  return INPUT_VARIANT_MAP[$variant].left;
+  return INPUT_VARIANT_MAP[$variant].border;
 }, function (_ref6) {
-  var $variant = _ref6.$variant;
-  return INPUT_VARIANT_MAP[$variant].circleSize;
+  var $palette = _ref6.$palette;
+  return $palette.defaultBg;
 }, function (_ref7) {
   var $variant = _ref7.$variant;
-  return INPUT_VARIANT_MAP[$variant].circleSize;
+  return INPUT_VARIANT_MAP[$variant].left;
 }, function (_ref8) {
-  var $palette = _ref8.$palette;
-  return $palette.circle;
+  var $variant = _ref8.$variant;
+  return INPUT_VARIANT_MAP[$variant].circleSize;
 }, function (_ref9) {
   var $variant = _ref9.$variant;
-  return INPUT_VARIANT_MAP[$variant].leftChecked;
+  return INPUT_VARIANT_MAP[$variant].circleSize;
 }, function (_ref10) {
   var $palette = _ref10.$palette;
+  return $palette.circle;
+}, function (_ref11) {
+  var $variant = _ref11.$variant;
+  return INPUT_VARIANT_MAP[$variant].leftChecked;
+}, function (_ref12) {
+  var $palette = _ref12.$palette;
   return $palette.activeBg;
+}, function (_ref13) {
+  var $variant = _ref13.$variant;
+  return INPUT_VARIANT_MAP[$variant].border;
+}, function (_ref14) {
+  var $palette = _ref14.$palette;
+  return $palette.disabledBorder;
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.265",
+    "version": "0.1.0-alpha.267",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {