@automattic/vip-design-system 0.9.6 → 0.10.2

package/build/system/OptionRow/OptionRow.test.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _OptionRow = require("./OptionRow");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+* Internal dependencies
+*/
+describe('<OptionRow />', function () {
+  it('renders the OptionRow', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_OptionRow.OptionRow, {
+              label: "Option Row",
+              subTitle: "Mostly used to link off to other pages.",
+              as: "a"
+            })), container = _render.container;
+            expect(_react.screen.getByText('Mostly used to link off to other pages.')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 5;
+            return (0, _jestAxe.axe)(container);
+
+          case 5:
+            _context.t1 = _context.sent;
+            _context.next = 8;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('renders a disabled OptionRow', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var image1, _render2, container;
+
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            // eslint-disable-next-line max-len
+            image1 = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79' fill='none' %3E%3Cpath d='M71.4 15.3L54.2 4.2C54 4 53.7 4 53.4 4H26.4C26.1 4 25.8 4.1 25.6 4.2L8.29997 15.3C7.89997 15.6 7.59998 16 7.59998 16.5V32.1V63C7.59998 63.5 7.89997 64 8.29997 64.2L25.5 75.3C25.5 75.3 25.6 75.3 25.6 75.4C25.6 75.4 25.7 75.4 25.7 75.5C25.9 75.6 26 75.6 26.2 75.6H53.2C53.4 75.6 53.5 75.6 53.7 75.5C53.8 75.5 53.8 75.5 53.8 75.4C53.8 75.4 53.9 75.4 53.9 75.3L71.4 64.2C71.5 64.1 71.7 64 71.8 63.8C71.8 63.8 71.8 63.7 71.9 63.7C72 63.6 72.1 63.4 72.1 63.2V63.1C72.1 63 72.1 62.9 72.1 62.8V32.1V16.5C72.1 16 71.8 15.6 71.4 15.3ZM24.9 71.4L10.6 62.2V34.8L24.9 44V71.4ZM51.9 72.6H27.8V44.7H51.9V72.6ZM69.1 31.3L52.9 41.7H26.8L10.6 31.3V17.3L26.8 6.9H52.9L69.1 17.3V31.3Z' fill='%23BD9D70' /%3E%3C/svg%3E";
+            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_OptionRow.OptionRow, {
+              image: image1,
+              label: "Option Row",
+              subTitle: "Mostly used to link off to other pages.",
+              as: "a",
+              disabled: true,
+              meta: ""
+            })), container = _render2.container;
+            expect(_react.screen.getByAltText('Image representing the list item').closest('div')).toHaveStyle({
+              background: 'none'
+            });
+            expect(_react.screen.queryByTestId('meta')).not.toBeInTheDocument(); // Check for accessibility issues
+
+            _context2.t0 = expect;
+            _context2.next = 7;
+            return (0, _jestAxe.axe)(container);
+
+          case 7:
+            _context2.t1 = _context2.sent;
+            _context2.next = 10;
+            return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

package/build/system/Progress/Progress.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Progress = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -11,25 +17,23 @@ var _Spinner = require("../Spinner");
 
 var _ = require("../");
 
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-var _excluded = ["steps", "activeStep", "sx"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _classnames = _interopRequireDefault(require("classnames"));
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _excluded = ["steps", "activeStep", "sx", "className"];
 
 var Progress = function Progress(_ref) {
   var steps = _ref.steps,
       activeStep = _ref.activeStep,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      className = _ref.className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsxs)(_.Box, {
-    children: [(0, _jsxRuntime.jsx)(_themeUi.Progress, _extends({}, props, {
-      sx: _extends({
+    children: [(0, _jsxRuntime.jsx)(_themeUi.Progress, (0, _extends2["default"])({
+      className: (0, _classnames["default"])('vip-progress-component', className)
+    }, props, {
+      sx: (0, _extends2["default"])({
         color: 'primary'
       }, sx),
       max: steps.length,
@@ -63,5 +67,6 @@ exports.Progress = Progress;
 Progress.propTypes = {
   steps: _propTypes["default"].array,
   activeStep: _propTypes["default"].number,
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };

package/build/system/Progress/Progress.stories.js

@@ -1,20 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports["default"] = exports.Default = void 0;
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-
 /**
  * Internal dependencies
  */

package/build/system/ResourceList/ResourceItem.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.ResourceItem = void 0;
 
@@ -9,8 +11,6 @@ var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /** @jsxImportSource theme-ui */
 
 /**

package/build/system/ResourceList/ResourceList.js

@@ -1,18 +1,27 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.ResourceList = void 0;
 
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+/** @jsxImportSource theme-ui */
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/**
+ * External dependencies
+ */
 
+/**
+ * Internal dependencies
+ */
 var formatterOptions = {
   weekday: 'long',
   year: 'numeric',
@@ -37,7 +46,7 @@ var formatDate = function formatDate(date) {
 };
 
 var StyledListItem = function StyledListItem(props) {
-  return (0, _jsxRuntime.jsx)(_.Box, _extends({
+  return (0, _jsxRuntime.jsx)(_.Box, (0, _extends3["default"])({
     as: "li",
     sx: {
       py: 2,
@@ -64,7 +73,7 @@ var ResourceList = function ResourceList(_ref) {
 
       var formattedDate = formatDate(item[dateKey]);
       var itemsAtDate = itemGroups[formattedDate];
-      return _extends({}, itemGroups, (_extends2 = {}, _extends2[formattedDate] = itemsAtDate ? [].concat(itemsAtDate, [item]) : [item], _extends2));
+      return (0, _extends3["default"])({}, itemGroups, (_extends2 = {}, _extends2[formattedDate] = itemsAtDate ? [].concat(itemsAtDate, [item]) : [item], _extends2));
     }, {});
   }
 
@@ -83,6 +92,7 @@ var ResourceList = function ResourceList(_ref) {
       m: 0,
       p: 0
     },
+    className: "vip-resource-list-component",
     children: groupedByDay ? Object.keys(groupedItems).map(function (groupName, index) {
       return (0, _jsxRuntime.jsxs)(_.Box, {
         sx: {

package/build/system/ResourceList/ResourceList.stories.js

@@ -0,0 +1,377 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.Relative = exports.Grouped = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _bi = require("react-icons/bi");
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'ResourceList',
+  component: _.ResourceList
+};
+exports["default"] = _default;
+var logs = [{
+  actor: 'Saxon Fletcher',
+  action: 'switched primary domain to',
+  object: 'mydomain.com',
+  date: new Date()
+}, {
+  actor: 'Saxon Fletcher',
+  action: 'switched primary domain to',
+  object: 'mydomain.com',
+  date: new Date(new Date().setHours(11))
+}, {
+  actor: 'Simon Wheatley',
+  action: 'deployed to',
+  object: 'Production',
+  showObject: true,
+  date: new Date(new Date().setDate(15))
+}, {
+  actor: 'Saxon Fletcher',
+  action: 'created a backup on',
+  object: 'Production',
+  date: new Date(new Date().setDate(13))
+}];
+
+var Grouped = function Grouped() {
+  return (0, _jsxRuntime.jsxs)(_.Box, {
+    sx: {
+      p: 5,
+      pt: 2
+    },
+    children: [(0, _jsxRuntime.jsx)(_.Heading, {
+      sx: {
+        mb: 2
+      },
+      children: "Audit Log"
+    }), (0, _jsxRuntime.jsx)(_.Text, {
+      sx: {
+        mb: 4
+      },
+      children: "A live trail of system and human events."
+    }), (0, _jsxRuntime.jsx)(_.ResourceList, {
+      items: logs,
+      dateKey: "date",
+      groupedByDay: true,
+      renderItem: function renderItem(item) {
+        return (0, _jsxRuntime.jsxs)(_.ResourceItem, {
+          item: item,
+          icon: (0, _jsxRuntime.jsx)(_bi.BiGlobe, {
+            sx: {
+              color: 'red'
+            }
+          }),
+          dateKey: 'date',
+          relativeTime: true,
+          timeOnly: true,
+          children: [(0, _jsxRuntime.jsxs)(_.Flex, {
+            sx: {
+              alignItems: 'center',
+              gap: 3
+            },
+            children: [(0, _jsxRuntime.jsx)(_.Avatar, {
+              name: item.actor,
+              src: "https://uifaces.co/our-content/donated/1H_7AxP0.jpg",
+              size: 16
+            }), (0, _jsxRuntime.jsxs)(_.Heading, {
+              variant: "h4",
+              as: "p",
+              sx: {
+                mb: 0,
+                fontWeight: 'normal'
+              },
+              children: [item.actor, ' ', (0, _jsxRuntime.jsx)(_.Text, {
+                as: "span",
+                sx: {
+                  color: 'muted',
+                  mb: 0
+                },
+                children: item.action
+              }), ' ', item.object]
+            })]
+          }), item.showObject && (0, _jsxRuntime.jsxs)(_.Box, {
+            variant: "indent",
+            sx: {
+              mt: 2,
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: 3,
+              alignItems: 'center'
+            },
+            children: [(0, _jsxRuntime.jsxs)(_.Heading, {
+              variant: "h5",
+              as: "div",
+              sx: {
+                mb: 0
+              },
+              children: ["Merge pull request", ' ', (0, _jsxRuntime.jsx)(_.Text, {
+                as: "span",
+                sx: {
+                  color: 'muted'
+                },
+                children: "#443"
+              })]
+            }), (0, _jsxRuntime.jsxs)(_.Text, {
+              sx: {
+                mb: 0,
+                fontSize: 1,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1
+              },
+              children: [(0, _jsxRuntime.jsx)(_.Avatar, {
+                name: item.actor,
+                src: "https://uifaces.co/our-content/donated/n4Ngwvi7.jpg",
+                size: 16
+              }), item.actor]
+            }), (0, _jsxRuntime.jsxs)(_.Text, {
+              sx: {
+                mb: 0,
+                fontSize: 1,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1
+              },
+              children: [(0, _jsxRuntime.jsx)(_bi.BiCheckCircle, {
+                size: 16
+              }), "Deployed in 31s"]
+            })]
+          })]
+        });
+      }
+    })]
+  });
+};
+
+exports.Grouped = Grouped;
+var deploys = [{
+  title: 'Merge pull request',
+  id: '#773',
+  author: 'Saxon Fletcher',
+  date: new Date(new Date().setHours(11)),
+  status: 'running'
+}, {
+  title: 'Update homepage',
+  id: '#772',
+  author: 'Saxon Fletcher',
+  date: new Date(new Date().setHours(9))
+}, {
+  title: 'Improve overall performance',
+  id: '#771',
+  author: 'Saxon Fletcher',
+  date: new Date(new Date().setHours(8))
+}, {
+  title: 'Merge pull request',
+  id: '#770',
+  author: 'Saxon Fletcher',
+  date: new Date(new Date().setHours(5)),
+  status: 'failed'
+}, {
+  title: 'Merge pull request',
+  id: '#773',
+  author: 'Saxon Fletcher',
+  date: new Date(new Date().setHours(11))
+}, {
+  title: 'Update homepage',
+  id: '#772',
+  author: 'Saxon Fletcher',
+  date: new Date(new Date().setHours(9))
+}, {
+  title: 'Improve overall performance',
+  id: '#771',
+  author: 'Saxon Fletcher',
+  date: new Date(new Date().setHours(8))
+}, {
+  title: 'Merge pull request',
+  id: '#770',
+  author: 'Saxon Fletcher',
+  date: new Date(new Date().setHours(5))
+}, {
+  title: 'Merge pull request',
+  id: '#773',
+  author: 'Saxon Fletcher',
+  date: new Date(new Date().setHours(11))
+}, {
+  title: 'Update homepage',
+  id: '#772',
+  author: 'Saxon Fletcher',
+  date: new Date(new Date().setHours(9))
+}, {
+  title: 'Improve overall performance',
+  id: '#771',
+  author: 'Saxon Fletcher',
+  date: new Date(new Date().setHours(8))
+}, {
+  title: 'Merge pull request',
+  id: '#770',
+  author: 'Saxon Fletcher',
+  date: new Date(new Date().setHours(5))
+}, {
+  title: 'Merge pull request',
+  id: '#773',
+  author: 'Saxon Fletcher',
+  date: new Date(new Date().setHours(11))
+}, {
+  title: 'Update homepage',
+  id: '#772',
+  author: 'Saxon Fletcher',
+  date: new Date(new Date().setHours(9))
+}, {
+  title: 'Improve overall performance',
+  id: '#771',
+  author: 'Saxon Fletcher',
+  date: new Date(new Date().setHours(8))
+}, {
+  title: 'Merge pull request',
+  id: '#770',
+  author: 'Saxon Fletcher',
+  date: new Date(new Date().setHours(5))
+}];
+
+var Relative = function Relative() {
+  return (0, _jsxRuntime.jsxs)(_.Box, {
+    sx: {
+      p: 5,
+      pt: 2
+    },
+    children: [(0, _jsxRuntime.jsx)(_.Heading, {
+      sx: {
+        mb: 2
+      },
+      children: "Deploys"
+    }), (0, _jsxRuntime.jsx)(_.Text, {
+      sx: {
+        mb: 4
+      },
+      children: "View and manage application deployments."
+    }), (0, _jsxRuntime.jsx)(_.Card, {
+      variant: "indent",
+      sx: {
+        mb: 4,
+        display: 'flex',
+        flexDirection: 'row-reverse',
+        gap: 1
+      },
+      children: deploys.map(function (deploy, index) {
+        return (0, _jsxRuntime.jsx)(_.Box, {
+          sx: {
+            flex: '1 1 auto',
+            width: 10,
+            height: 4,
+            backgroundColor: deploy.status === 'running' ? 'blue.50' : 'green.50',
+            borderRadius: 1
+          }
+        }, index);
+      })
+    }), (0, _jsxRuntime.jsx)(_.ResourceList, {
+      items: deploys,
+      dateKey: "date",
+      groupedByDay: false,
+      renderItem: function renderItem(item) {
+        return (0, _jsxRuntime.jsx)(_.ResourceItem, {
+          item: item,
+          dateKey: 'date',
+          relativeTime: true,
+          timeOnly: true,
+          renderActions: function renderActions() {
+            return (0, _jsxRuntime.jsx)(_.Flex, {
+              sx: {
+                alignItems: 'center'
+              },
+              children: (0, _jsxRuntime.jsx)(_.Button, {
+                variant: "secondary",
+                sx: {
+                  fontSize: 1
+                },
+                children: "Rollback"
+              })
+            });
+          },
+          children: (0, _jsxRuntime.jsxs)(_.Flex, {
+            sx: {
+              alignItems: 'center',
+              gap: 4
+            },
+            children: [(0, _jsxRuntime.jsxs)(_.Flex, {
+              sx: {
+                alignItems: 'center',
+                gap: 3,
+                minWidth: 300
+              },
+              children: [(0, _jsxRuntime.jsxs)(_.Heading, {
+                variant: "h4",
+                as: "p",
+                sx: {
+                  mb: 0,
+                  fontWeight: 'normal'
+                },
+                children: [item.title, ' ', (0, _jsxRuntime.jsx)(_.Text, {
+                  as: "span",
+                  sx: {
+                    color: 'muted',
+                    mb: 0
+                  },
+                  children: item.id
+                })]
+              }), item.status === 'running' && (0, _jsxRuntime.jsx)(_.Badge, {
+                sx: {
+                  mb: 0
+                },
+                children: "Running"
+              })]
+            }), (0, _jsxRuntime.jsxs)(_.Text, {
+              sx: {
+                mb: 0,
+                color: 'muted',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 2
+              },
+              children: [(0, _jsxRuntime.jsx)(_.Avatar, {
+                name: item.author,
+                size: 16,
+                src: "https://randomuser.me/api/portraits/men/46.jpg"
+              }), item.author]
+            }), (0, _jsxRuntime.jsx)(_.Text, {
+              sx: {
+                mb: 0,
+                color: item.status === 'running' ? 'blue.60' : 'muted',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1
+              },
+              children: item.status === 'running' ? (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
+                children: [(0, _jsxRuntime.jsx)(_bi.BiRevision, {
+                  size: 16
+                }), "Running for 31s"]
+              }) : (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
+                children: [(0, _jsxRuntime.jsx)(_bi.BiCheckCircle, {
+                  size: 16
+                }), "Deployed in 31s"]
+              })
+            })]
+          })
+        });
+      }
+    })]
+  });
+};
+
+exports.Relative = Relative;

package/build/system/Spinner/Spinner.js

@@ -1,36 +1,41 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Spinner = void 0;
 
-var _themeUi = require("theme-ui");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _themeUi = require("theme-ui");
 
-var _excluded = ["sx"];
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _classnames = _interopRequireDefault(require("classnames"));
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _excluded = ["sx", "className"];
 
 var Spinner = function Spinner(_ref) {
   var sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(_themeUi.Spinner, _extends({
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(_themeUi.Spinner, (0, _extends2["default"])({
     strokeWidth: 2,
     sx: {
       fill: 'none',
       color: 'primary'
-    }
+    },
+    className: (0, _classnames["default"])('vip-spinner-component', className)
   }, props));
 };
 
 exports.Spinner = Spinner;
 Spinner.propTypes = {
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };