@codacy/ui-components 0.49.4 → 0.50.0

package/lib/Icons/Symbols.d.ts

@@ -2,3 +2,4 @@
 export declare const CheckIcon: () => JSX.Element;
 export declare const MinusIcon: () => JSX.Element;
 export declare const CloseIcon: () => JSX.Element;
+export declare const DangerIcon: () => JSX.Element;

package/lib/Icons/Symbols.js

@@ -33,4 +33,23 @@ export var CloseIcon = function CloseIcon() {
     d: "M368 368L144 144M368 144L144 368",
     className: "ionicon-fill-none ionicon-stroke-width"
   }));
+};
+export var DangerIcon = function DangerIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "ionicon",
+    viewBox: "0 0 512 512"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M85.57 446.25h340.86a32 32 0 0028.17-47.17L284.18 82.58c-12.09-22.44-44.27-22.44-56.36 0L57.4 399.08a32 32 0 0028.17 47.17z",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    className: "ionicon-fill-none ionicon-stroke-width"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M250.26 195.39l5.74 122 5.73-121.95a5.74 5.74 0 00-5.79-6h0a5.74 5.74 0 00-5.68 5.95z",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    className: "ionicon-fill-none ionicon-stroke-width"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M256 397.25a20 20 0 1120-20 20 20 0 01-20 20z"
+  }));
 };

package/lib/Modal/ConfirmationModal.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ConfirmationModalProps } from './types';
+import { DialogStateReturn } from 'reakit/ts/Dialog';
+export declare const ConfirmationModal: React.FC<ConfirmationModalProps & DialogStateReturn>;

package/lib/Modal/ConfirmationModal.js

@@ -0,0 +1,44 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import React, { useCallback, useRef } from 'react';
+import { Modal } from '.';
+import { Button, ButtonGroup, IconAndText, Subheader } from '..';
+export var ConfirmationModal = function ConfirmationModal(_ref) {
+  var title = _ref.title,
+      confirmText = _ref.confirmText,
+      onConfirm = _ref.onConfirm,
+      _ref$cancelText = _ref.cancelText,
+      cancelText = _ref$cancelText === void 0 ? 'Cancel' : _ref$cancelText,
+      onCancel = _ref.onCancel,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+      icon = _ref.icon,
+      children = _ref.children,
+      dialog = _objectWithoutProperties(_ref, ["title", "confirmText", "onConfirm", "cancelText", "onCancel", "variant", "icon", "children"]);
+
+  var cancelRef = useRef(null);
+  var handleCancel = useCallback(function () {
+    if (onCancel) onCancel();
+    dialog.hide();
+  }, [onCancel, dialog]);
+  return /*#__PURE__*/React.createElement(Modal, Object.assign({
+    focusRef: cancelRef
+  }, dialog), /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Subheader, null, icon ? /*#__PURE__*/React.createElement(IconAndText, {
+    icon: icon,
+    iconProps: {
+      color: "icon-".concat(variant)
+    }
+  }, title) : /*#__PURE__*/React.createElement(React.Fragment, null, title))), /*#__PURE__*/React.createElement(Modal.Body, {
+    mt: 4
+  }, children), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    mt: 5
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "primary",
+    color: variant,
+    onClick: onConfirm
+  }, confirmText), /*#__PURE__*/React.createElement(Button, {
+    variant: "link",
+    color: "subtle",
+    onClick: handleCancel,
+    ref: cancelRef
+  }, cancelText))));
+};

package/lib/Modal/types.d.ts

@@ -40,3 +40,12 @@ export interface ModalProps extends ModalHeaderProps {
     /** Vertical positioning */
     vPos?: 'top' | 'center';
 }
+export interface ConfirmationModalProps extends Omit<ModalProps, 'title' | 'description' | 'headerImg' | 'focusRef'> {
+    title: string;
+    confirmText: string;
+    onConfirm: () => void;
+    cancelText?: string;
+    onCancel?: () => void;
+    variant?: 'primary' | 'danger';
+    icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codacy/ui-components",
-  "version": "0.49.4",
+  "version": "0.50.0",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -62,11 +62,11 @@
     "@types/react": "^16.9.56",
     "@types/react-dom": "^16.9.9",
     "@types/react-select": "3.0.13",
+    "@types/resize-observer-browser": "^0.1.6",
     "@types/styled-system": "^5.1.10",
     "@types/styled-system__should-forward-prop": "^5.1.2",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "^2.34.0",
-    "@types/resize-observer-browser": "^0.1.6",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.1",
     "babel-plugin-emotion": "^10.0.33",
@@ -93,11 +93,11 @@
     "react": "^17.0.1",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^17.0.1",
+    "react-toastify": "^8.0.2",
+    "reakit": "1.1.1",
     "rimraf": "^3.0.2",
     "typeface-clear-sans": "0.0.44",
-    "typescript": "^3.8.3",
-    "reakit": "1.1.1",
-    "react-toastify": "^8.0.2"
+    "typescript": "^3.8.3"
   },
   "peerDependencies": {
     "@emotion/styled": "10.x",