@algolia/satellite 1.0.0-beta.137 → 1.0.0-beta.138

package/cjs/Toggle/Toggle.js

@@ -11,6 +11,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -25,7 +27,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var _excluded = ["className"];
+var _excluded = ["className", "checked", "defaultChecked"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -39,21 +41,48 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 var Toggle = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
+      checked = _ref.checked,
+      defaultChecked = _ref.defaultChecked,
       inputProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var isControlled = typeof checked === "boolean";
+
+  var _useState = (0, _react.useState)(Boolean(isControlled ? checked : defaultChecked)),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      internalChecked = _useState2[0],
+      setInternalChecked = _useState2[1];
+
+  var isChecked = Boolean(isControlled ? checked : internalChecked);
+
+  var handleChange = function handleChange(evt) {
+    var _inputProps$onChange;
+
+    (_inputProps$onChange = inputProps.onChange) === null || _inputProps$onChange === void 0 ? void 0 : _inputProps$onChange.call(inputProps, evt);
+
+    if (!isControlled && !evt.isDefaultPrevented()) {
+      setInternalChecked(evt.currentTarget.checked);
+    }
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     translate: "yes",
     className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["toggle-container"]))), className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, inputProps), {}, {
+      onChange: handleChange,
+      checked: isChecked,
+      "aria-checked": isChecked,
       type: "checkbox",
+      role: "switch",
       ref: ref
     })), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["toggle flex justify-around items-center"]))),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.Check, {
         size: 12,
-        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["text-white"])))
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["text-white"]))),
+        "aria-hidden": true
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.X, {
         size: 12,
-        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300"])))
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300"]))),
+        "aria-hidden": true
       })]
     })]
   });

package/esm/Toggle/Toggle.js

@@ -1,17 +1,18 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var _excluded = ["className"];
+var _excluded = ["className", "checked", "defaultChecked"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import cx from "clsx";
-import { forwardRef } from "react";
+import { forwardRef, useState } from "react";
 import { Check, X } from "react-feather";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -25,22 +26,49 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
  */
 export var Toggle = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
+      checked = _ref.checked,
+      defaultChecked = _ref.defaultChecked,
       inputProps = _objectWithoutProperties(_ref, _excluded);
 
+  var isControlled = typeof checked === "boolean";
+
+  var _useState = useState(Boolean(isControlled ? checked : defaultChecked)),
+      _useState2 = _slicedToArray(_useState, 2),
+      internalChecked = _useState2[0],
+      setInternalChecked = _useState2[1];
+
+  var isChecked = Boolean(isControlled ? checked : internalChecked);
+
+  var handleChange = function handleChange(evt) {
+    var _inputProps$onChange;
+
+    (_inputProps$onChange = inputProps.onChange) === null || _inputProps$onChange === void 0 ? void 0 : _inputProps$onChange.call(inputProps, evt);
+
+    if (!isControlled && !evt.isDefaultPrevented()) {
+      setInternalChecked(evt.currentTarget.checked);
+    }
+  };
+
   return /*#__PURE__*/_jsxs("div", {
     translate: "yes",
     className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["toggle-container"]))), className),
     children: [/*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, inputProps), {}, {
+      onChange: handleChange,
+      checked: isChecked,
+      "aria-checked": isChecked,
       type: "checkbox",
+      role: "switch",
       ref: ref
     })), /*#__PURE__*/_jsxs("div", {
       className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["toggle flex justify-around items-center"]))),
       children: [/*#__PURE__*/_jsx(Check, {
         size: 12,
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["text-white"])))
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["text-white"]))),
+        "aria-hidden": true
       }), /*#__PURE__*/_jsx(X, {
         size: 12,
-        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["text-grey-300"])))
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["text-grey-300"]))),
+        "aria-hidden": true
       })]
     })]
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@algolia/satellite",
-  "version": "1.0.0-beta.137",
+  "version": "1.0.0-beta.138",
   "description": "Algolia design system React components",
   "scripts": {
     "clean": "rimraf dist",
@@ -17,17 +17,17 @@
     "build:storybook": "yarn build-storybook -o .storybook-static",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --commit-path ./",
     "dev": "start-storybook -p 6060",
-    "test:accessibility": "test-storybook --url https://algolia-satellite.netlify.app/ --no-stories-json",
-    "test:jest": "jest --config jest.config.js",
     "quality": "run-s quality:test quality:types quality:lint",
     "quality:lint": "eslint 'src/**/*.{ts,tsx}'",
     "quality:types": "tsc",
-    "quality:test": "run-p test:jest",
+    "quality:test": "jest --config jest.config.js",
+    "quality:accessibility": "run-p -r dev quality:test-storybook",
+    "quality:test-storybook": "wait-on tcp:6060 && test-storybook --url http://localhost:6060 --no-stories-json --maxWorkers=2",
     "preversion": "yarn quality",
     "version": "yarn changelog && git add CHANGELOG.md",
     "postversion": "git push && git push --tags",
     "release": "./scripts/release.sh",
-    "chromatic": "cross-env NODE_ENV=storybook chromatic --build-script-name build:storybook --exit-zero-on-changes --auto-accept-changes master"
+    "chromatic": "chromatic --build-script-name build:storybook --exit-zero-on-changes --auto-accept-changes master"
   },
   "publishConfig": {
     "access": "public"
@@ -88,18 +88,11 @@
       "require": "./cjs/index.js",
       "default": "./esm/index.js"
     },
-    "./satellite.min.css": {
-      "default": "./satellite.min.css"
-    },
-    "./satellite.css": {
-      "default": "./satellite.css"
-    },
-    "./cjs/styles/tailwind.config.js": {
-      "default": "./cjs/styles/tailwind.config.js"
-    },
-    "./esm/styles/tailwind.config.js": {
-      "default": "./esm/styles/tailwind.config.js"
-    }
+    "./satellite.min.css": "./satellite.min.css",
+    "./scss/colors.scss": "./scss/colors.scss",
+    "./scss/variables.scss": "./scss/variables.scss",
+    "./cjs/styles/tailwind.config.js": "./cjs/styles/tailwind.config.js",
+    "./esm/styles/tailwind.config.js": "./esm/styles/tailwind.config.js"
   },
   "typings": "./esm/index.d.ts"
 }