@bigbinary/neeto-molecules 1.1.16 → 1.1.18

package/dist/ToggleFeatureCard/index.js

@@ -1,148 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-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 React, { useRef, useState, useEffect } from "react";
-import classnames from "classnames";
-import { useFormikContext } from "formik";
-import { slugify } from "@bigbinary/neeto-commons-frontend/pure";
-import { useHotKeys, useOnClickOutside } from "@bigbinary/neeto-commons-frontend/react-utils";
-import { Edit, Close } from "@bigbinary/neeto-icons";
-import { Typography, Label, Button } from "@bigbinary/neetoui";
-import { Input } from "@bigbinary/neetoui/formik";
-import { isEmpty } from "ramda";
-import { useTranslation } from "react-i18next";
-import { SIZES } from "./constants";
-import useScrollIntoView from "./hooks/useScrollIntoView";
-import "./toggleFeatureCard.scss";
-import TooltipSwitch from "./ToolTipSwitch";
-var ToggleFeatureCard = function ToggleFeatureCard(_ref) {
-  var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? "" : _ref$title,
-    _ref$description = _ref.description,
-    description = _ref$description === void 0 ? null : _ref$description,
-    _ref$switchName = _ref.switchName,
-    switchName = _ref$switchName === void 0 ? "switch" : _ref$switchName,
-    _ref$titleDataCy = _ref.titleDataCy,
-    titleDataCy = _ref$titleDataCy === void 0 ? "" : _ref$titleDataCy,
-    _ref$switchDataCy = _ref.switchDataCy,
-    switchDataCy = _ref$switchDataCy === void 0 ? "" : _ref$switchDataCy,
-    _ref$descriptionDataC = _ref.descriptionDataCy,
-    descriptionDataCy = _ref$descriptionDataC === void 0 ? "" : _ref$descriptionDataC,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    inputProps = _ref.inputProps,
-    switchProps = _ref.switchProps;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var cardRef = useRef();
-  var id = slugify(title);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isEditing = _useState2[0],
-    setIsEditing = _useState2[1];
-  var _useFormikContext = useFormikContext(),
-    setFieldValue = _useFormikContext.setFieldValue,
-    values = _useFormikContext.values,
-    submitCount = _useFormikContext.submitCount,
-    errors = _useFormikContext.errors,
-    initialValues = _useFormikContext.initialValues;
-  useEffect(function () {
-    if (submitCount >= 1 && isEmpty(errors)) {
-      setIsEditing(false);
-    }
-  }, [submitCount]);
-  useEffect(function () {
-    if (!isEmpty(errors)) {
-      setIsEditing(true);
-    }
-  }, [values, errors]);
-  var _useState3 = useState(location.hash.split("#")[1] === id),
-    _useState4 = _slicedToArray(_useState3, 2),
-    shouldHighlight = _useState4[0],
-    setShouldHighlight = _useState4[1];
-  var hasInput = (values === null || values === void 0 ? void 0 : values[switchName]) && (inputProps === null || inputProps === void 0 ? void 0 : inputProps.name);
-  var enabledCondition = values === null || values === void 0 ? void 0 : values[switchName];
-  var handleInputReset = function handleInputReset() {
-    setIsEditing(false);
-    hasInput && setFieldValue(inputProps === null || inputProps === void 0 ? void 0 : inputProps.name, initialValues === null || initialValues === void 0 ? void 0 : initialValues[inputProps === null || inputProps === void 0 ? void 0 : inputProps.name]);
-  };
-  useOnClickOutside(cardRef, function () {
-    return setShouldHighlight(false);
-  });
-  useScrollIntoView({
-    elementId: id,
-    trigger: shouldHighlight
-  });
-  var inputRef = useHotKeys("enter", function () {
-    return setIsEditing(false);
-  }, {
-    mode: "scoped"
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": "toggle-feature-card",
-    id: id,
-    ref: cardRef,
-    className: classnames("neeto-ui-bg-white  neeto-ui-rounded-lg flex flex-col space-y-2 border p-4", {
-      "neeto-ui-border-gray-300": !shouldHighlight
-    }, {
-      "toggle-feature-card--highlighted": shouldHighlight
-    })
-  }, /*#__PURE__*/React.createElement(Label, {
-    className: "flex flex-row items-center gap-2"
-  }, /*#__PURE__*/React.createElement(TooltipSwitch, _extends({}, _objectSpread({
-    enabledCondition: enabledCondition,
-    isDisabled: isDisabled,
-    switchDataCy: switchDataCy
-  }, switchProps), {
-    name: switchName
-  })), /*#__PURE__*/React.createElement(Typography, {
-    component: "span",
-    "data-cy": titleDataCy,
-    "data-testid": "toggle-feature-card-title",
-    style: "h4",
-    weight: "semibold"
-  }, title)), /*#__PURE__*/React.createElement(Typography, {
-    className: "mb-4 whitespace-pre-line",
-    "data-cy": descriptionDataCy,
-    "data-testid": "toggle-feature-card-description",
-    style: "body2"
-  }, description), hasInput && !isEditing && /*#__PURE__*/React.createElement("div", {
-    className: "m-0 flex flex-row items-center space-x-2"
-  }, inputProps === null || inputProps === void 0 ? void 0 : inputProps.display, /*#__PURE__*/React.createElement(Button, {
-    "data-cy": inputProps === null || inputProps === void 0 ? void 0 : inputProps.editButtonDataCy,
-    "data-testid": "toggle-feature-card-input-display-edit",
-    icon: Edit,
-    size: "small",
-    style: "text",
-    type: "button",
-    tooltipProps: {
-      content: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.editButtonTooltip) || t("neetoMolecules.toggleFeatureCard.input.editButtonDefaultTooltip"),
-      position: "right"
-    },
-    onClick: function onClick() {
-      return setIsEditing(true);
-    }
-  })), hasInput && isEditing && /*#__PURE__*/React.createElement(Input, _extends({
-    autoFocus: true,
-    "data-cy": inputProps === null || inputProps === void 0 ? void 0 : inputProps.dataCy,
-    "data-testid": "toggle-feature-card-input-field",
-    label: inputProps === null || inputProps === void 0 ? void 0 : inputProps.label,
-    name: inputProps === null || inputProps === void 0 ? void 0 : inputProps.name,
-    placeholder: inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder,
-    ref: inputRef,
-    size: "medium",
-    suffix: /*#__PURE__*/React.createElement(Button, {
-      "data-testid": "toggle-feature-card-input-reset",
-      icon: Close,
-      size: "small",
-      style: "text",
-      type: "button",
-      onClick: handleInputReset
-    })
-  }, inputProps)), children);
-};
-export default ToggleFeatureCard;

package/dist/ToggleFeatureCard/toggleFeatureCard.scss

@@ -1,4 +0,0 @@
-.toggle-feature-card--highlighted {
-  border-color: rgb(var(--neeto-ui-primary-800)) !important;
-  box-shadow: 0px 0px 0px 1px rgb(var(--neeto-ui-primary-800));
-}