flipper-ui 0.26.22 → 0.27.0

package/core/Experimental/Fab/FabWrapper.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+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) { (0, _defineProperty2["default"])(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; }
+var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    opacity: 0;\n    transition: opacity 200ms ease;\n    &:hover {\n        opacity: 1;\n    }\n"])));
+var FabWrapper = function FabWrapper(_ref) {
+  var padding = _ref.padding,
+    children = _ref.children,
+    style = _ref.style,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/_react["default"].createElement(Wrapper, {
+    className: "list-item-action",
+    style: _objectSpread({
+      padding: padding,
+      width: width,
+      height: height
+    }, style)
+  }, children);
+};
+var _default = FabWrapper;
+exports["default"] = _default;

package/core/Experimental/Fab/fab.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/core/Experimental/Fab/fab.spec.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _Fab = _interopRequireDefault(require("./Fab"));
+var _FileCopy = _interopRequireDefault(require("@material-ui/icons/FileCopy"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/* eslint-disable max-len */
+
+describe('Sidebar', function () {
+  it('Should call onClick', function () {
+    var onClickSpy = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/React.createElement(_Fab["default"], {
+      onClick: onClickSpy
+    }, /*#__PURE__*/React.createElement(_FileCopy["default"], null)));
+    var btn = _react2.screen.getByTestId('fab-button');
+    _userEvent["default"].click(btn);
+    (0, _react2.waitFor)(function () {
+      expect(onClickSpy).toHaveBeenCalled();
+    });
+  });
+  it('Should show tooltip', function () {
+    var onClickSpy = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/React.createElement(_Fab["default"], {
+      onClick: onClickSpy,
+      tooltip: "tooltip-test"
+    }, /*#__PURE__*/React.createElement(_FileCopy["default"], null)));
+    var btn = _react2.screen.getByTestId('fab-button');
+    _userEvent["default"].hover(btn);
+    (0, _react2.waitFor)(function () {
+      var tooltipMessage = _react2.screen.getByText('tooltip-test');
+      expect(tooltipMessage).toBeDefined();
+    });
+  });
+  it('Snapshot', function () {
+    var onClickSpy = jest.fn();
+    var miniTrue = (0, _react2.render)( /*#__PURE__*/React.createElement(_Fab["default"], {
+      onClick: onClickSpy
+    }, /*#__PURE__*/React.createElement(_FileCopy["default"], null)));
+    expect(miniTrue).toMatchSnapshot();
+    var miniFalse = (0, _react2.render)( /*#__PURE__*/React.createElement(_Fab["default"], {
+      mini: false,
+      onClick: onClickSpy
+    }, /*#__PURE__*/React.createElement(_FileCopy["default"], null)));
+    expect(miniFalse).toMatchInlineSnapshot("\n            {\n              \"asFragment\": [Function],\n              \"baseElement\": <body>\n                <div>\n                  <button\n                    class=\"MuiButtonBase-root MuiFab-root MuiFab-sizeSmall\"\n                    data-testid=\"fab-button\"\n                    name=\"action-button\"\n                    tabindex=\"0\"\n                    type=\"button\"\n                  >\n                    <span\n                      class=\"MuiFab-label\"\n                    >\n                      <svg\n                        aria-hidden=\"true\"\n                        class=\"MuiSvgIcon-root\"\n                        focusable=\"false\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\"\n                        />\n                      </svg>\n                    </span>\n                    <span\n                      class=\"MuiTouchRipple-root\"\n                    />\n                  </button>\n                </div>\n                <div>\n                  <button\n                    class=\"MuiButtonBase-root MuiFab-root MuiFab-sizeMedium\"\n                    data-testid=\"fab-button\"\n                    name=\"action-button\"\n                    tabindex=\"0\"\n                    type=\"button\"\n                  >\n                    <span\n                      class=\"MuiFab-label\"\n                    >\n                      <svg\n                        aria-hidden=\"true\"\n                        class=\"MuiSvgIcon-root\"\n                        focusable=\"false\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\"\n                        />\n                      </svg>\n                    </span>\n                    <span\n                      class=\"MuiTouchRipple-root\"\n                    />\n                  </button>\n                </div>\n              </body>,\n              \"container\": <div>\n                <button\n                  class=\"MuiButtonBase-root MuiFab-root MuiFab-sizeMedium\"\n                  data-testid=\"fab-button\"\n                  name=\"action-button\"\n                  tabindex=\"0\"\n                  type=\"button\"\n                >\n                  <span\n                    class=\"MuiFab-label\"\n                  >\n                    <svg\n                      aria-hidden=\"true\"\n                      class=\"MuiSvgIcon-root\"\n                      focusable=\"false\"\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <path\n                        d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\"\n                      />\n                    </svg>\n                  </span>\n                  <span\n                    class=\"MuiTouchRipple-root\"\n                  />\n                </button>\n              </div>,\n              \"debug\": [Function],\n              \"findAllByAltText\": [Function],\n              \"findAllByDisplayValue\": [Function],\n              \"findAllByLabelText\": [Function],\n              \"findAllByPlaceholderText\": [Function],\n              \"findAllByRole\": [Function],\n              \"findAllByTestId\": [Function],\n              \"findAllByText\": [Function],\n              \"findAllByTitle\": [Function],\n              \"findByAltText\": [Function],\n              \"findByDisplayValue\": [Function],\n              \"findByLabelText\": [Function],\n              \"findByPlaceholderText\": [Function],\n              \"findByRole\": [Function],\n              \"findByTestId\": [Function],\n              \"findByText\": [Function],\n              \"findByTitle\": [Function],\n              \"getAllByAltText\": [Function],\n              \"getAllByDisplayValue\": [Function],\n              \"getAllByLabelText\": [Function],\n              \"getAllByPlaceholderText\": [Function],\n              \"getAllByRole\": [Function],\n              \"getAllByTestId\": [Function],\n              \"getAllByText\": [Function],\n              \"getAllByTitle\": [Function],\n              \"getByAltText\": [Function],\n              \"getByDisplayValue\": [Function],\n              \"getByLabelText\": [Function],\n              \"getByPlaceholderText\": [Function],\n              \"getByRole\": [Function],\n              \"getByTestId\": [Function],\n              \"getByText\": [Function],\n              \"getByTitle\": [Function],\n              \"queryAllByAltText\": [Function],\n              \"queryAllByDisplayValue\": [Function],\n              \"queryAllByLabelText\": [Function],\n              \"queryAllByPlaceholderText\": [Function],\n              \"queryAllByRole\": [Function],\n              \"queryAllByTestId\": [Function],\n              \"queryAllByText\": [Function],\n              \"queryAllByTitle\": [Function],\n              \"queryByAltText\": [Function],\n              \"queryByDisplayValue\": [Function],\n              \"queryByLabelText\": [Function],\n              \"queryByPlaceholderText\": [Function],\n              \"queryByRole\": [Function],\n              \"queryByTestId\": [Function],\n              \"queryByText\": [Function],\n              \"queryByTitle\": [Function],\n              \"rerender\": [Function],\n              \"unmount\": [Function],\n            }\n        ");
+  });
+});

package/core/Experimental/Fab/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Fab';
+export { default as FabWrapper } from './FabWrapper';

package/core/Experimental/Fab/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FabWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _FabWrapper["default"];
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Fab["default"];
+  }
+});
+var _Fab = _interopRequireDefault(require("./Fab"));
+var _FabWrapper = _interopRequireDefault(require("./FabWrapper"));

package/core/Experimental/Sidebar/Sidebar.stories.d.ts

@@ -0,0 +1,7 @@
+export declare const loading: () => JSX.Element;
+export declare const sidebar: () => JSX.Element;
+declare const _default: {
+    title: string;
+    component: (props: import("./SidebarV2").IProps) => JSX.Element;
+};
+export default _default;

package/core/Experimental/Sidebar/Sidebar.stories.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sidebar = exports.loading = exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SidebarV = _interopRequireDefault(require("./SidebarV2"));
+var _Home = _interopRequireDefault(require("@material-ui/icons/Home"));
+var _Computer = _interopRequireDefault(require("@material-ui/icons/Computer"));
+var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));
+var loading = function loading() {
+  return /*#__PURE__*/_react["default"].createElement(_SidebarV["default"], {
+    loading: true,
+    options: []
+  });
+};
+exports.loading = loading;
+var sidebar = function sidebar() {
+  return /*#__PURE__*/_react["default"].createElement(_SidebarV["default"], {
+    options: [{
+      icon: /*#__PURE__*/_react["default"].createElement(_Home["default"], null),
+      name: 'Home',
+      label: 'Home',
+      route: '/'
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_Computer["default"], null),
+      name: 'Computer',
+      label: 'Computer',
+      route: '/computer'
+    }],
+    extraOptions: [{
+      icon: /*#__PURE__*/_react["default"].createElement(_Edit["default"], null),
+      name: 'Edit',
+      label: 'edit',
+      route: '/edit'
+    }],
+    handleGoTo: function handleGoTo(foo, bar) {
+      return function () {
+        alert(foo + ' ' + bar);
+      };
+    }
+  });
+};
+exports.sidebar = sidebar;
+var _default = {
+  title: 'v2/Sidebar',
+  component: _SidebarV["default"]
+};
+exports["default"] = _default;

package/core/Experimental/Sidebar/SidebarV2.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface ISidebarOption {
+    icon: React.ReactElement;
+    label: string;
+    name: string;
+    route: string;
+}
+export interface IProps {
+    options: ISidebarOption[];
+    top?: number;
+    loading?: boolean;
+    handleGoTo?: (name: string, route: string) => () => void;
+    extraOptions?: ISidebarOption[];
+}
+/**
+ * Sidebar component V2
+ */
+declare const Sidebar: (props: IProps) => JSX.Element;
+export default Sidebar;

package/core/Experimental/Sidebar/SidebarV2.js

@@ -0,0 +1,143 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _Sidebar = _interopRequireDefault(require("../../Sidebar"));
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _nginformaticaStyleguide = require("nginformatica-styleguide");
+var _times = _interopRequireDefault(require("ramda/es/times"));
+var _map = _interopRequireDefault(require("ramda/es/map"));
+var _lab = require("@material-ui/lab");
+var _Tooltip = _interopRequireDefault(require("../../Tooltip"));
+var _List = _interopRequireDefault(require("../../List"));
+var _ListItem = _interopRequireDefault(require("../../ListItem"));
+var _excluded = ["options", "loading", "handleGoTo", "extraOptions", "top"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var StyledFlipperSidebar = (0, _styledComponents["default"])(_Sidebar["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    & > div {\n        border-right: 1px solid ", ";\n    }\n"])), _nginformaticaStyleguide.theme.colors.grays.g6);
+var MenuItem = (0, _styledComponents["default"])(_ListItem["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    &&& {\n        & div {\n            padding: 0;\n        }\n    }\n"])));
+var Link = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    color: ", ";\n    text-decoration: none;\n"])), _nginformaticaStyleguide.theme.colors.primary.main);
+var PaperBar = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    flex-direction: column;\n    display: flex;\n    justify-content: space-between;\n    flex: 1;\n    padding-bottom: 16px;\n"])));
+var LABEL_TIMEOUT = 300;
+var renderSkeleton = function renderSkeleton(index) {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "skeleton-container",
+    role: "skeleton",
+    key: "sidebar-skeleton-".concat(index),
+    style: {
+      padding: '2px 10px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
+    width: 36,
+    height: 36
+  }));
+};
+var SIDEBAR_SKELETON_SIZE = 6;
+var sidebarSkeleton = (0, _times["default"])(renderSkeleton, SIDEBAR_SKELETON_SIZE);
+
+// create a function that extract path from location.pathname
+// and return the route
+var extract = function extract(location) {
+  var lastSlashIndex = location.lastIndexOf('/');
+  return '/' + location.slice(lastSlashIndex + 1);
+};
+var useSidebar = function useSidebar() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  var route = extract(location.pathname);
+  var toggle = (0, _react.useCallback)(function () {
+    setExpanded(!expanded);
+  }, [expanded]);
+  return {
+    toggle: toggle,
+    expanded: expanded,
+    route: route
+  };
+};
+var emptyList = [];
+
+/**
+ * Sidebar component V2
+ */
+var Sidebar = function Sidebar(props) {
+  var options = props.options,
+    loading = props.loading,
+    handleGoTo = props.handleGoTo,
+    _props$extraOptions = props.extraOptions,
+    extraOptions = _props$extraOptions === void 0 ? emptyList : _props$extraOptions,
+    top = props.top,
+    otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useSidebar = useSidebar(),
+    expanded = _useSidebar.expanded,
+    route = _useSidebar.route,
+    toggle = _useSidebar.toggle;
+  var _useState3 = (0, _react.useState)(expanded),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    showLabel = _useState4[0],
+    setShowLabel = _useState4[1];
+  (0, _react.useEffect)(function () {
+    if (expanded) {
+      setTimeout(function () {
+        return setShowLabel(true);
+      }, LABEL_TIMEOUT);
+    } else {
+      setShowLabel(false);
+    }
+  }, [expanded]);
+  var renderOption = function renderOption(option) {
+    return /*#__PURE__*/_react["default"].createElement(Link, {
+      "data-testid": "sidebar-option-".concat(option.route.replace('/', '')),
+      key: option.name
+    }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      withWrapper: true,
+      placement: "right",
+      enterDelay: 500,
+      title: expanded ? '' : option.label
+    }, /*#__PURE__*/_react["default"].createElement(MenuItem, {
+      key: option.name,
+      selected: option.name === route,
+      icon: option.icon,
+      style: {
+        minHeight: '42px'
+      },
+      padding: "0 18px",
+      subtitle: showLabel ? option.label : '',
+      onClick: handleGoTo === null || handleGoTo === void 0 ? void 0 : handleGoTo(option.name, option.route)
+    })));
+  };
+  return /*#__PURE__*/_react["default"].createElement(StyledFlipperSidebar, {
+    open: true,
+    docked: true,
+    name: "sidebar",
+    id: "sidebar",
+    ButtonProps: {
+      id: 'sidebar-toggle-button'
+    },
+    minWidth: 56,
+    maxWidth: 228,
+    style: {
+      transition: 'width 100ms ease-in-out',
+      zIndex: 1199
+    },
+    expanded: expanded,
+    onToggle: toggle,
+    top: top || 0
+  }, /*#__PURE__*/_react["default"].createElement(PaperBar, otherProps, /*#__PURE__*/_react["default"].createElement(_List["default"], {
+    dense: true
+  }, loading ? sidebarSkeleton : (0, _map["default"])(renderOption, options)), /*#__PURE__*/_react["default"].createElement(_List["default"], {
+    dense: true
+  }, !loading && (0, _map["default"])(renderOption, extraOptions))));
+};
+var _default = Sidebar;
+exports["default"] = _default;

package/core/Experimental/Sidebar/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SidebarV2';

package/core/Experimental/Sidebar/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _SidebarV["default"];
+  }
+});
+var _SidebarV = _interopRequireDefault(require("./SidebarV2"));

package/core/Experimental/Sidebar/sidebar.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/core/Experimental/Sidebar/sidebar.spec.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _SidebarV = _interopRequireDefault(require("./SidebarV2"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var options = [{
+  icon: /*#__PURE__*/React.createElement("svg", null),
+  label: 'Option-1',
+  name: 'option1',
+  route: '/option1'
+}, {
+  icon: /*#__PURE__*/React.createElement("svg", null),
+  label: 'Option-2',
+  name: 'option2',
+  route: '/option2'
+}];
+describe('Sidebar', function () {
+  it('renders the options', function () {
+    (0, _react2.render)( /*#__PURE__*/React.createElement(_SidebarV["default"], {
+      options: options
+    }));
+    options.forEach(function (option) {
+      expect(_react2.screen.getByTitle(option.label)).toBeDefined();
+    });
+  });
+  it('calls handleGoTo when an option is clicked', function () {
+    var handleGoTo = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/React.createElement(_SidebarV["default"], {
+      options: options,
+      handleGoTo: handleGoTo
+    }));
+    var expandBtn = _react2.screen.getByTestId('sidebar-option-option1');
+    expandBtn.addEventListener('click', function (event) {
+      return event.preventDefault();
+    }, false);
+    _userEvent["default"].click(expandBtn);
+    expect(handleGoTo).toHaveBeenCalledWith('option1', '/option1');
+  });
+  it('renders extraOptions when provided', function () {
+    var extraOptions = [{
+      icon: /*#__PURE__*/React.createElement("svg", null),
+      label: 'Extra Option 1',
+      name: 'extraOption1',
+      route: '/extraOption1'
+    }, {
+      icon: /*#__PURE__*/React.createElement("svg", null),
+      label: 'Extra Option 2',
+      name: 'extraOption2',
+      route: '/extraOption2'
+    }];
+    (0, _react2.render)( /*#__PURE__*/React.createElement(_SidebarV["default"], {
+      options: options,
+      extraOptions: extraOptions
+    }));
+    extraOptions.forEach(function (option) {
+      expect(_react2.screen.getByTitle(option.label)).toBeDefined();
+    });
+  });
+  it('renders a skeleton when loading', function () {
+    (0, _react2.render)( /*#__PURE__*/React.createElement(_SidebarV["default"], {
+      options: options,
+      loading: true
+    }));
+    expect(_react2.screen.queryAllByRole('skeleton')).toHaveLength(6);
+  });
+  it('should show labels when expanded', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var handleGoTo, expandBtn;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            handleGoTo = jest.fn();
+            (0, _react2.render)( /*#__PURE__*/React.createElement(_SidebarV["default"], {
+              options: options,
+              handleGoTo: handleGoTo
+            }));
+            expandBtn = _react2.screen.getByTestId('sidebar-button');
+            _userEvent["default"].click(expandBtn);
+            _context.next = 6;
+            return (0, _react2.waitFor)(function () {
+              var labels = options.map(function (option) {
+                return _react2.screen.getByTestId("list-item-".concat(option.label));
+              });
+              labels.forEach(function (label) {
+                return expect(label).toBeDefined();
+              });
+            });
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should now show labels when collapsed', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var handleGoTo;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            handleGoTo = jest.fn();
+            (0, _react2.render)( /*#__PURE__*/React.createElement(_SidebarV["default"], {
+              options: options,
+              handleGoTo: handleGoTo
+            }));
+            _context2.next = 4;
+            return (0, _react2.waitFor)(function () {
+              var labels = options.map(function (option) {
+                return _react2.screen.queryByTestId("list-item-".concat(option.label));
+              });
+              labels.forEach(function (label) {
+                return expect(label).toBeNull();
+              });
+            });
+          case 4:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

package/core/Experimental/index.d.ts

@@ -0,0 +1,5 @@
+export { default as SidebarV2 } from './Sidebar';
+export { default as FabV2 } from './Fab';
+export { default as ButtonV2 } from './Button';
+export { default as DialogV2 } from './Dialog';
+export { default as CardV2 } from './Card';

package/core/Experimental/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ButtonV2", {
+  enumerable: true,
+  get: function get() {
+    return _Button["default"];
+  }
+});
+Object.defineProperty(exports, "CardV2", {
+  enumerable: true,
+  get: function get() {
+    return _Card["default"];
+  }
+});
+Object.defineProperty(exports, "DialogV2", {
+  enumerable: true,
+  get: function get() {
+    return _Dialog["default"];
+  }
+});
+Object.defineProperty(exports, "FabV2", {
+  enumerable: true,
+  get: function get() {
+    return _Fab["default"];
+  }
+});
+Object.defineProperty(exports, "SidebarV2", {
+  enumerable: true,
+  get: function get() {
+    return _Sidebar["default"];
+  }
+});
+var _Sidebar = _interopRequireDefault(require("./Sidebar"));
+var _Fab = _interopRequireDefault(require("./Fab"));
+var _Button = _interopRequireDefault(require("./Button"));
+var _Dialog = _interopRequireDefault(require("./Dialog"));
+var _Card = _interopRequireDefault(require("./Card"));

package/core/ListItem.js

@@ -50,6 +50,7 @@ var ListItem = function ListItem(props) {
     }, props.icon), (props.title || props.subtitle) && /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
       primaryTypographyProps: typographyProps,
       secondaryTypographyProps: typographyProps,
+      "data-testid": "list-item-".concat(props.subtitle),
       primary: props.title,
       secondary: props.subtitle,
       style: props.action ? {

package/core/Sidebar.js

@@ -103,6 +103,7 @@ var Sidebar = function Sidebar(_ref) {
     }, /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
       name: "button-".concat(name || 'sidebar'),
       color: color,
+      "data-testid": "sidebar-button",
       variant: "contained",
       className: classes.button,
       style: {

package/core/Slider.d.ts

@@ -3,6 +3,6 @@ import { DefaultProps } from './types';
 interface ISliderProps {
     defaultValue?: number | number[];
 }
-export declare type FlipperSliderProps = Omit<SliderProps, 'defaultValue'> & DefaultProps & ISliderProps;
+export type FlipperSliderProps = Omit<SliderProps, 'defaultValue'> & DefaultProps & ISliderProps;
 declare const Slider: ({ padding, margin, style, defaultValue, ...otherProps }: FlipperSliderProps) => JSX.Element;
 export default Slider;

package/core/StepCard/StepCardDetails.js

@@ -68,9 +68,9 @@ var StepCardDetails = function StepCardDetails(props) {
     justifyContent: "start"
   }, /*#__PURE__*/_react["default"].createElement(StepsList, null)), image && /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
     justifyContent: "end"
-  }, /*#__PURE__*/_react["default"].createElement("img", {
+  }, typeof image === 'string' ? /*#__PURE__*/_react["default"].createElement("img", {
     src: image,
     alt: "Step Icon"
-  })));
+  }) : image));
 };
 exports.StepCardDetails = StepCardDetails;

package/core/StepCard/index.d.ts

@@ -86,11 +86,18 @@ export interface IStepCardProps {
     subTitle?: string;
     /**
      * The image to be displayed on the expansion panel details
+     * Accepts a string or a JSX.Element
      *
-     * @type {string}
+     * @type {string | JSX.Element}
+     * @example
+     * <StepCard image={<img src="https://picsum.photos/200" />} />
+     * @example
+     * <StepCard image="https://picsum.photos/200" />
+     * @example
+     * <StepCard image={<Image />} />
      * @memberof IStepCardProps
      */
-    image?: string;
+    image?: string | JSX.Element;
     /**
      * The number of remaining steps
      * @type {number}

package/core/Stepper.d.ts

@@ -5,7 +5,7 @@ export interface StepperProps extends DefaultProps {
     bottomLabel?: boolean;
     orientation?: 'horizontal' | 'vertical';
 }
-declare type TStep = {
+type TStep = {
     label: JSX.Element | string;
     icon: JSX.Element | ((active?: boolean) => JSX.Element);
 };

package/core/TextField.d.ts

@@ -48,7 +48,7 @@ interface IEditProps extends Pick<TextFieldProps, 'showEdit' | 'style'> {
 }
 export declare const TextFieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StaticTextFieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const useStyles: (props?: any) => Record<"input" | "outlinedInput" | "outlinedLabel" | "outlinedMultiline" | "iconOutlined", string>;
+export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"input" | "outlinedInput" | "outlinedLabel" | "outlinedMultiline" | "iconOutlined">;
 export declare const HelperBox: (props: IHelperProps) => JSX.Element;
 export declare const EditBox: (props: IEditProps) => JSX.Element;
 declare const TextField: ({ margin, padding, style, error, variant, InputLabelProps, InputProps, SelectProps, autoComplete, onHelperClick, helperIcon, fullWidth, hasClear, onClear, ...otherProps }: TextFieldProps) => JSX.Element;

package/core/types.d.ts

@@ -11,6 +11,6 @@ export interface DefaultProps {
 export interface HTMLElementWithDataCy<T> extends React.HTMLAttributes<T> {
     'data-cy': string;
 }
-export declare type PropWithDataCy<T> = Partial<T> & {
+export type PropWithDataCy<T> = Partial<T> & {
     'data-cy': string;
 };

package/index.d.ts

@@ -62,3 +62,4 @@ export { default as Chapter } from './core/Chapter';
 export { default as DataTable } from './core/DataTable';
 export { default as StepCard } from './core/StepCard';
 export { default as StepCardSkeleton } from './core/StepCardSkeleton';
+export * as Experimental from './core/Experimental';