@spaced-out/ui-design-system 0.0.59 → 0.0.61

package/lib/components/ErrorMessage/ErrorImages/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ForbiddenImage = require("./ForbiddenImage");
+Object.keys(_ForbiddenImage).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ForbiddenImage[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ForbiddenImage[key];
+    }
+  });
+});
+var _NotFoundImage = require("./NotFoundImage");
+Object.keys(_NotFoundImage).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _NotFoundImage[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _NotFoundImage[key];
+    }
+  });
+});
+var _ServerErrorImage = require("./ServerErrorImage");
+Object.keys(_ServerErrorImage).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ServerErrorImage[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ServerErrorImage[key];
+    }
+  });
+});
+var _UnauthorizedImage = require("./UnauthorizedImage");
+Object.keys(_UnauthorizedImage).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _UnauthorizedImage[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _UnauthorizedImage[key];
+    }
+  });
+});

package/lib/components/ErrorMessage/ErrorImages/index.js.flow

@@ -0,0 +1,6 @@
+// @flow strict
+
+export * from './ForbiddenImage';
+export * from './NotFoundImage';
+export * from './ServerErrorImage';
+export * from './UnauthorizedImage';

package/lib/components/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorMessage = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _ErrorImages = require("./ErrorImages");
+var _ErrorMessageModule = _interopRequireDefault(require("./ErrorMessage.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+const ErrorMessage = _ref => {
+  let {
+    classNames,
+    children,
+    imageVariant,
+    title,
+    description,
+    customImageUrl,
+    heading,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    "data-testid": "ErrorMessage",
+    className: (0, _classify.default)(_ErrorMessageModule.default.wrapper, classNames?.wrapper)
+  }), !!imageVariant && !customImageUrl && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_ErrorMessageModule.default.image, classNames?.image)
+  }, imageVariant === 'unauthorized' && /*#__PURE__*/React.createElement(_ErrorImages.UnauthorizedImage, null), imageVariant === 'forbidden' && /*#__PURE__*/React.createElement(_ErrorImages.ForbiddenImage, null), imageVariant === 'notFound' && /*#__PURE__*/React.createElement(_ErrorImages.NotFoundImage, null), imageVariant === 'serverError' && /*#__PURE__*/React.createElement(_ErrorImages.ServerErrorImage, null)), customImageUrl && /*#__PURE__*/React.createElement("img", {
+    className: (0, _classify.default)(_ErrorMessageModule.default.image, classNames?.image),
+    src: customImageUrl,
+    alt: "Empty State"
+  }), !!heading && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_ErrorMessageModule.default.heading, classNames?.heading)
+  }, heading), !!title && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_ErrorMessageModule.default.title, classNames?.title)
+  }, title), !!description && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_ErrorMessageModule.default.description, classNames?.description)
+  }, description), !!children && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_ErrorMessageModule.default.childrenWrapper, classNames?.children)
+  }, children));
+};
+exports.ErrorMessage = ErrorMessage;

package/lib/components/ErrorMessage/ErrorMessage.js.flow

@@ -0,0 +1,86 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+
+import {
+  ForbiddenImage,
+  NotFoundImage,
+  ServerErrorImage,
+  UnauthorizedImage,
+} from './ErrorImages';
+
+import css from './ErrorMessage.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  image?: string,
+  heading?: string,
+  title?: string,
+  description?: string,
+  children?: string,
+}>;
+
+export type ErrorMessageProps = {
+  classNames?: ClassNames,
+  children?: React.Node,
+  imageVariant?: 'unauthorized' | 'forbidden' | 'notFound' | 'serverError',
+  title?: React.Node,
+  description?: React.Node,
+  heading?: React.Node,
+  customImageUrl?: string,
+  ...
+};
+
+export const ErrorMessage = ({
+  classNames,
+  children,
+  imageVariant,
+  title,
+  description,
+  customImageUrl,
+  heading,
+  ...props
+}: ErrorMessageProps): React.Node => (
+  <div
+    {...props}
+    data-testid="ErrorMessage"
+    className={classify(css.wrapper, classNames?.wrapper)}
+  >
+    {!!imageVariant && !customImageUrl && (
+      <div className={classify(css.image, classNames?.image)}>
+        {imageVariant === 'unauthorized' && <UnauthorizedImage />}
+        {imageVariant === 'forbidden' && <ForbiddenImage />}
+        {imageVariant === 'notFound' && <NotFoundImage />}
+        {imageVariant === 'serverError' && <ServerErrorImage />}
+      </div>
+    )}
+    {customImageUrl && (
+      <img
+        className={classify(css.image, classNames?.image)}
+        src={customImageUrl}
+        alt="Empty State"
+      />
+    )}
+    {!!heading && (
+      <div className={classify(css.heading, classNames?.heading)}>
+        {heading}
+      </div>
+    )}
+    {!!title && (
+      <div className={classify(css.title, classNames?.title)}>{title}</div>
+    )}
+    {!!description && (
+      <div className={classify(css.description, classNames?.description)}>
+        {description}
+      </div>
+    )}
+    {!!children && (
+      <div className={classify(css.childrenWrapper, classNames?.children)}>
+        {children}
+      </div>
+    )}
+  </div>
+);

package/lib/components/ErrorMessage/ErrorMessage.module.css

@@ -0,0 +1,35 @@
+@value (colorTextSecondary, colorTextClickable) from '../../styles/variables/_color.css';
+@value (spaceMedium, spaceXSmall, spaceSmall) from '../../styles/variables/_space.css';
+@value (sizeFluid, size140) from '../../styles/variables/_size.css';
+
+.wrapper {
+  display: flex;
+  width: sizeFluid;
+  height: sizeFluid;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: spaceMedium;
+}
+
+.image {
+  max-width: size140;
+}
+
+.heading {
+  composes: jumboMedium from '../../styles/typography.module.css';
+  margin-bottom: spaceSmall;
+  color: colorTextClickable;
+}
+
+.title {
+  composes: subTitleMedium from '../../styles/typography.module.css';
+  margin-bottom: spaceXSmall;
+}
+
+.description {
+  composes: bodyMedium from '../../styles/typography.module.css';
+  color: colorTextSecondary;
+  margin-bottom: spaceMedium;
+}

package/lib/components/ErrorMessage/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ErrorMessage = require("./ErrorMessage");
+Object.keys(_ErrorMessage).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ErrorMessage[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ErrorMessage[key];
+    }
+  });
+});

package/lib/components/ErrorMessage/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './ErrorMessage';

package/lib/components/Menu/Menu.js

@@ -16,6 +16,7 @@ const RenderOption = _ref => {
   let {
     options,
     composeOptions,
+    groupTitleOptions,
     ...restProps
   } = _ref;
   if (options && Array.isArray(options) && options.length) {
@@ -38,6 +39,20 @@ const RenderOption = _ref => {
       option: option
     }, restProps)))))));
   }
+  if (groupTitleOptions && Array.isArray(groupTitleOptions) && groupTitleOptions.length) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, groupTitleOptions.map((optionsGroup, index) =>
+    /*#__PURE__*/
+    // eslint-disable-next-line react/no-array-index-key
+    React.createElement(React.Fragment, {
+      key: index
+    }, !!optionsGroup.groupTitle && /*#__PURE__*/React.createElement("div", {
+      className: _MenuModule.default.groupTitleWrapper
+    }, optionsGroup.groupTitle), optionsGroup.options?.map(option => /*#__PURE__*/React.createElement(React.Fragment, {
+      key: option.key
+    }, /*#__PURE__*/React.createElement(_MenuOptionButton.MenuOptionButton, _extends({
+      option: option
+    }, restProps)))))));
+  }
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 };
 const Menu = props => {

package/lib/components/Menu/Menu.js.flow

@@ -39,14 +39,21 @@ export type MenuProps = {
 
 export type MenuSizeTypes = 'medium' | 'small';
 
+export type MenuGroupTitleOption = {
+  groupTitle?: React.Node,
+  options?: Array<MenuOption>,
+};
+
 export type MenuOptionTypes = {
   options?: Array<MenuOption>,
   composeOptions?: Array<Array<MenuOption>>,
+  groupTitleOptions?: Array<MenuGroupTitleOption>,
 };
 
 const RenderOption = ({
   options,
   composeOptions,
+  groupTitleOptions,
   ...restProps
 }: MenuProps): React.Node => {
   if (options && Array.isArray(options) && options.length) {
@@ -80,6 +87,32 @@ const RenderOption = ({
       </>
     );
   }
+  if (
+    groupTitleOptions &&
+    Array.isArray(groupTitleOptions) &&
+    groupTitleOptions.length
+  ) {
+    return (
+      <>
+        {groupTitleOptions.map((optionsGroup, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <React.Fragment key={index}>
+            {!!optionsGroup.groupTitle && (
+              <div className={css.groupTitleWrapper}>
+                {optionsGroup.groupTitle}
+              </div>
+            )}
+
+            {optionsGroup.options?.map((option) => (
+              <React.Fragment key={option.key}>
+                <MenuOptionButton option={option} {...restProps} />
+              </React.Fragment>
+            ))}
+          </React.Fragment>
+        ))}
+      </>
+    );
+  }
   return <></>;
 };
 

package/lib/components/Menu/Menu.module.css

@@ -34,6 +34,7 @@
   spaceSmall,
   spaceXSmall,
   spaceXXSmall,
+  spaceMedium,
   spaceNone
 ) from '../../styles/variables/_space.css';
 
@@ -185,3 +186,13 @@
 .menuDivider:last-child {
   padding-bottom: spaceNone;
 }
+
+.groupTitleWrapper {
+  composes: formLabelSmall from '../../styles/typography.module.css';
+  display: flex;
+  margin-bottom: spaceXSmall;
+  padding-left: spaceSmall;
+  padding-right: calc(spaceXSmall / 2);
+  color: colorTextTertiary;
+  margin-top: spaceSmall;
+}

package/lib/components/Menu/index.js

@@ -3,17 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Menu", {
-  enumerable: true,
-  get: function () {
-    return _Menu.Menu;
-  }
-});
-Object.defineProperty(exports, "MenuOptionButton", {
-  enumerable: true,
-  get: function () {
-    return _MenuOptionButton.MenuOptionButton;
-  }
-});
 var _Menu = require("./Menu");
-var _MenuOptionButton = require("./MenuOptionButton");
+Object.keys(_Menu).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Menu[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Menu[key];
+    }
+  });
+});
+var _MenuOptionButton = require("./MenuOptionButton");
+Object.keys(_MenuOptionButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MenuOptionButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _MenuOptionButton[key];
+    }
+  });
+});

package/lib/components/Menu/index.js.flow

@@ -1,5 +1,4 @@
 // @flow strict
 
-export type {MenuOption, MenuProps} from './Menu';
-export {Menu} from './Menu';
-export {MenuOptionButton} from './MenuOptionButton';
+export * from './Menu';
+export * from './MenuOptionButton';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.0.59",
+  "version": "0.0.61",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {