@nulogy/components 6.6.4 → 6.7.0

package/dist/main.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('@babel/runtime/helpers/typeof'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/defineProperty'), require('object-assign'), require('@nulogy/icons'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inheritsLoose'), require('prop-types'), require('react-fast-compare'), require('warning'), require('@babel/runtime/helpers/slicedToArray'), require('@babel/runtime/helpers/objectWithoutPropertiesLoose'), require('deep-equal'), require('create-react-context'), require('react-dom'), require('react-windowed-select'), require('exenv'), require('smoothscroll-polyfill'), require('classnames'), require('@babel/runtime/helpers/toConsumableArray'), require('react-input-autosize'), require('@babel/runtime/helpers/taggedTemplateLiteral')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', '@babel/runtime/helpers/typeof', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/defineProperty', 'object-assign', '@nulogy/icons', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inheritsLoose', 'prop-types', 'react-fast-compare', 'warning', '@babel/runtime/helpers/slicedToArray', '@babel/runtime/helpers/objectWithoutPropertiesLoose', 'deep-equal', 'create-react-context', 'react-dom', 'react-windowed-select', 'exenv', 'smoothscroll-polyfill', 'classnames', '@babel/runtime/helpers/toConsumableArray', 'react-input-autosize', '@babel/runtime/helpers/taggedTemplateLiteral'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.NDSComponents = {}, global.React, global.styled, global.typeof, global.classCallCheck, global.createClass, global.defineProperty, global.assign, global.icons, global.extends, global.assertThisInitialized, global.inheritsLoose, global.PropTypes, global.isEqual, global.warning, global.slicedToArray, global.objectWithoutPropertiesLoose, global.deepEqual, global.createReactContext, global.reactDom, global.components, global.exenv, global.smoothscroll, global.t, null, global.AutosizeInput));
-}(this, (function (exports, React, styled, _typeof$3, _classCallCheck$3, _createClass$3, _defineProperty$2, assign$1, icons, _extends$4, _assertThisInitialized$4, _inheritsLoose$2, PropTypes, isEqual$2, warning$1, _slicedToArray$1, _objectWithoutPropertiesLoose$2, deepEqual, createContext, reactDom, WindowedSelect, exenv, smoothscroll, t, toConsumableArray, AutosizeInput) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('@babel/runtime/helpers/typeof'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/defineProperty'), require('object-assign'), require('@nulogy/icons'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inheritsLoose'), require('prop-types'), require('react-fast-compare'), require('warning'), require('@babel/runtime/helpers/slicedToArray'), require('@babel/runtime/helpers/objectWithoutPropertiesLoose'), require('deep-equal'), require('create-react-context'), require('react-dom'), require('react-windowed-select'), require('exenv'), require('smoothscroll-polyfill'), require('@babel/runtime/helpers/toConsumableArray'), require('react-input-autosize'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('classnames')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', '@babel/runtime/helpers/typeof', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/defineProperty', 'object-assign', '@nulogy/icons', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inheritsLoose', 'prop-types', 'react-fast-compare', 'warning', '@babel/runtime/helpers/slicedToArray', '@babel/runtime/helpers/objectWithoutPropertiesLoose', 'deep-equal', 'create-react-context', 'react-dom', 'react-windowed-select', 'exenv', 'smoothscroll-polyfill', '@babel/runtime/helpers/toConsumableArray', 'react-input-autosize', '@babel/runtime/helpers/taggedTemplateLiteral', 'classnames'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.NDSComponents = {}, global.React, global.styled, global.typeof, global.classCallCheck, global.createClass, global.defineProperty, global.assign, global.icons, global.extends, global.assertThisInitialized, global.inheritsLoose, global.PropTypes, global.isEqual, global.warning, global.slicedToArray, global.objectWithoutPropertiesLoose, global.deepEqual, global.createReactContext, global.reactDom, global.components, global.exenv, global.smoothscroll, null, global.AutosizeInput, null, global.t));
+}(this, (function (exports, React, styled, _typeof$3, _classCallCheck$3, _createClass$3, _defineProperty$2, assign$1, icons, _extends$4, _assertThisInitialized$4, _inheritsLoose$2, PropTypes, isEqual$2, warning$1, _slicedToArray$1, _objectWithoutPropertiesLoose$2, deepEqual, createContext, reactDom, WindowedSelect, exenv, smoothscroll, toConsumableArray, AutosizeInput, taggedTemplateLiteral, t) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -49,8 +49,8 @@
   var WindowedSelect__default = /*#__PURE__*/_interopDefaultLegacy(WindowedSelect);
   var exenv__default = /*#__PURE__*/_interopDefaultLegacy(exenv);
   var smoothscroll__default = /*#__PURE__*/_interopDefaultLegacy(smoothscroll);
-  var t__default = /*#__PURE__*/_interopDefaultLegacy(t);
   var AutosizeInput__default = /*#__PURE__*/_interopDefaultLegacy(AutosizeInput);
+  var t__default = /*#__PURE__*/_interopDefaultLegacy(t);
 
   var defaultOptions = {
     bindI18n: 'languageChanged',
@@ -24495,68 +24495,83 @@
     default: false
   };
 
-  var Slider = styled__default['default'].span.withConfig({
-    displayName: "ToggleButton__Slider",
-    componentId: "t7wo9n-0"
-  })(function (_ref) {
-    var disabled = _ref.disabled,
-        theme = _ref.theme;
-    return {
-      position: "absolute",
-      height: theme.space.x3,
-      width: theme.space.x6,
-      top: "0",
-      right: "0",
-      bottom: "0",
-      left: "0",
-      backgroundColor: disabled ? theme.colors.grey : theme.colors.darkGrey,
-      borderRadius: "12px",
-      transition: ".2s ease",
-      cursor: disabled ? undefined : "pointer",
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        height: "22px",
-        width: "22px",
-        left: "1px",
-        top: "1px",
-        borderRadius: theme.radii.circle,
-        boxSizing: "border-box",
-        backgroundColor: disabled ? theme.colors.whiteGrey : theme.colors.white,
-        transition: ".2s ease"
-      }
-    };
-  });
-  var Switch$1 = styled__default['default'].div.withConfig({
-    displayName: "ToggleButton__Switch",
-    componentId: "t7wo9n-1"
-  })(function (_ref2) {
-    var theme = _ref2.theme;
-    return {
-      position: "relative",
-      display: "inline-flex",
-      minWidth: theme.space.x6,
-      minHeight: theme.space.x3,
-      input: {
-        opacity: "0",
-        width: "1px",
-        height: "1px"
+  var getSwitchBackground = function getSwitchBackground(toggled) {
+    return toggled ? "darkBlue" : "darkGrey";
+  };
+
+  var animationConfig = {
+    transition: {
+      type: "spring",
+      stiffness: 850,
+      damping: 37,
+      duration: 0.1
+    },
+    scale: 1.08
+  };
+
+  var Switch$1 = function Switch(_ref) {
+    var children = _ref.children,
+        disabled = _ref.disabled,
+        toggled = _ref.toggled,
+        onClick = _ref.onClick;
+    return /*#__PURE__*/React__default['default'].createElement(AnimatedBox, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: toggled ? "flex-end" : "flex-start",
+      height: "24px",
+      width: "48px",
+      bg: disabled ? "grey" : getSwitchBackground(toggled),
+      borderRadius: "20px",
+      padding: "2px",
+      boxShadow: "small",
+      whileHover: "hover",
+      onClick: onClick
+    }, children);
+  };
+
+  var Slider = function Slider(_ref2) {
+    var disabled = _ref2.disabled,
+        children = _ref2.children;
+    return /*#__PURE__*/React__default['default'].createElement(motion.div, {
+      className: "slider",
+      layout: true,
+      variants: {
+        hover: {
+          boxShadow: disabled ? undefined : Theme.shadows.focus,
+          scale: disabled ? undefined : animationConfig.scale
+        }
+      },
+      transition: animationConfig.transition,
+      whileFocus: {
+        boxShadow: disabled ? undefined : Theme.shadows.focus,
+        scale: disabled ? undefined : animationConfig.scale
+      },
+      style: {
+        height: "20px",
+        width: "20px",
+        borderRadius: "50%",
+        backgroundColor: disabled ? Theme.colors.whiteGrey : Theme.colors.white
       }
-    };
-  });
+    }, children);
+  };
+
   var ToggleInput = styled__default['default'].input.withConfig({
     displayName: "ToggleButton__ToggleInput",
-    componentId: "t7wo9n-2"
+    componentId: "t7wo9n-0"
   })(function (_ref3) {
     var _ref4;
 
     var disabled = _ref3.disabled,
         theme = _ref3.theme;
-    return _ref4 = {}, _ref4["&:checked + " + Slider + ":before"] = {
-      transform: "translateX(24px)"
-    }, _ref4["&:checked + " + Slider] = {
+    return _ref4 = {
+      width: "1px",
+      height: "1px",
+      opacity: 0,
+      position: "absolute"
+    }, _ref4["&:checked + .slider}"] = {
       backgroundColor: disabled ? theme.colors.grey : theme.colors.darkBlue
-    }, _ref4["&:focus + " + Slider + ":before"] = {
+    }, _ref4["&:focus + .slider"] = {
+      transform: disabled ? null : "scale(" + animationConfig.scale + ")",
       boxShadow: disabled ? undefined : theme.shadows.focus
     }, _ref4;
   });
@@ -24577,6 +24592,8 @@
     };
 
     return /*#__PURE__*/React__default['default'].createElement(Switch$1, {
+      disabled: disabled,
+      toggled: toggled,
       onClick: handleClick
     }, /*#__PURE__*/React__default['default'].createElement(ToggleInput, Object.assign({
       ref: inputRef,

package/dist/main.module.js

@@ -21,10 +21,10 @@ import reactDom, { findDOMNode, createPortal } from 'react-dom';
 import WindowedSelect, { components as components$1 } from 'react-windowed-select';
 import exenv from 'exenv';
 import smoothscroll from 'smoothscroll-polyfill';
-import t from 'classnames';
 import '@babel/runtime/helpers/toConsumableArray';
 import AutosizeInput from 'react-input-autosize';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
+import t from 'classnames';
 
 var defaultOptions = {
   bindI18n: 'languageChanged',
@@ -24469,68 +24469,83 @@ RadioGroup.defaultProps = {
   default: false
 };
 
-var Slider = styled.span.withConfig({
-  displayName: "ToggleButton__Slider",
-  componentId: "t7wo9n-0"
-})(function (_ref) {
-  var disabled = _ref.disabled,
-      theme = _ref.theme;
-  return {
-    position: "absolute",
-    height: theme.space.x3,
-    width: theme.space.x6,
-    top: "0",
-    right: "0",
-    bottom: "0",
-    left: "0",
-    backgroundColor: disabled ? theme.colors.grey : theme.colors.darkGrey,
-    borderRadius: "12px",
-    transition: ".2s ease",
-    cursor: disabled ? undefined : "pointer",
-    "&:before": {
-      content: "''",
-      position: "absolute",
-      height: "22px",
-      width: "22px",
-      left: "1px",
-      top: "1px",
-      borderRadius: theme.radii.circle,
-      boxSizing: "border-box",
-      backgroundColor: disabled ? theme.colors.whiteGrey : theme.colors.white,
-      transition: ".2s ease"
-    }
-  };
-});
-var Switch$1 = styled.div.withConfig({
-  displayName: "ToggleButton__Switch",
-  componentId: "t7wo9n-1"
-})(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    position: "relative",
-    display: "inline-flex",
-    minWidth: theme.space.x6,
-    minHeight: theme.space.x3,
-    input: {
-      opacity: "0",
-      width: "1px",
-      height: "1px"
+var getSwitchBackground = function getSwitchBackground(toggled) {
+  return toggled ? "darkBlue" : "darkGrey";
+};
+
+var animationConfig = {
+  transition: {
+    type: "spring",
+    stiffness: 850,
+    damping: 37,
+    duration: 0.1
+  },
+  scale: 1.08
+};
+
+var Switch$1 = function Switch(_ref) {
+  var children = _ref.children,
+      disabled = _ref.disabled,
+      toggled = _ref.toggled,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/React__default.createElement(AnimatedBox, {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: toggled ? "flex-end" : "flex-start",
+    height: "24px",
+    width: "48px",
+    bg: disabled ? "grey" : getSwitchBackground(toggled),
+    borderRadius: "20px",
+    padding: "2px",
+    boxShadow: "small",
+    whileHover: "hover",
+    onClick: onClick
+  }, children);
+};
+
+var Slider = function Slider(_ref2) {
+  var disabled = _ref2.disabled,
+      children = _ref2.children;
+  return /*#__PURE__*/React__default.createElement(motion.div, {
+    className: "slider",
+    layout: true,
+    variants: {
+      hover: {
+        boxShadow: disabled ? undefined : Theme.shadows.focus,
+        scale: disabled ? undefined : animationConfig.scale
+      }
+    },
+    transition: animationConfig.transition,
+    whileFocus: {
+      boxShadow: disabled ? undefined : Theme.shadows.focus,
+      scale: disabled ? undefined : animationConfig.scale
+    },
+    style: {
+      height: "20px",
+      width: "20px",
+      borderRadius: "50%",
+      backgroundColor: disabled ? Theme.colors.whiteGrey : Theme.colors.white
     }
-  };
-});
+  }, children);
+};
+
 var ToggleInput = styled.input.withConfig({
   displayName: "ToggleButton__ToggleInput",
-  componentId: "t7wo9n-2"
+  componentId: "t7wo9n-0"
 })(function (_ref3) {
   var _ref4;
 
   var disabled = _ref3.disabled,
       theme = _ref3.theme;
-  return _ref4 = {}, _ref4["&:checked + " + Slider + ":before"] = {
-    transform: "translateX(24px)"
-  }, _ref4["&:checked + " + Slider] = {
+  return _ref4 = {
+    width: "1px",
+    height: "1px",
+    opacity: 0,
+    position: "absolute"
+  }, _ref4["&:checked + .slider}"] = {
     backgroundColor: disabled ? theme.colors.grey : theme.colors.darkBlue
-  }, _ref4["&:focus + " + Slider + ":before"] = {
+  }, _ref4["&:focus + .slider"] = {
+    transform: disabled ? null : "scale(" + animationConfig.scale + ")",
     boxShadow: disabled ? undefined : theme.shadows.focus
   }, _ref4;
 });
@@ -24551,6 +24566,8 @@ var ToggleButton = /*#__PURE__*/React__default.forwardRef(function (props, ref)
   };
 
   return /*#__PURE__*/React__default.createElement(Switch$1, {
+    disabled: disabled,
+    toggled: toggled,
     onClick: handleClick
   }, /*#__PURE__*/React__default.createElement(ToggleInput, Object.assign({
     ref: inputRef,

package/dist/src/Toggle/ToggleButton.d.ts

@@ -1,14 +1,11 @@
 import React from "react";
 import { DefaultNDSThemeType } from "../theme.type";
-declare type ToggleInputProps = React.ComponentPropsWithRef<"input"> & {
-    disabled?: boolean;
-    name?: string;
-    theme?: DefaultNDSThemeType;
-};
-declare type ToggleButtonProps = ToggleInputProps & {
+declare type ToggleButtonProps = React.ComponentPropsWithRef<"input"> & {
     defaultToggled?: boolean;
     toggled?: boolean;
     disabled?: boolean;
+    name?: string;
+    theme?: DefaultNDSThemeType;
 };
-declare const ToggleButton: React.SFC<ToggleButtonProps>;
+declare const ToggleButton: React.FC<ToggleButtonProps>;
 export default ToggleButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "6.6.4",
+  "version": "6.7.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {