@spaced-out/ui-design-system 0.0.27 → 0.0.29

package/lib/components/EmptyState/EmptyState.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyState = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _EmptyImages = require("./EmptyImages");
+var _EmptyStateModule = _interopRequireDefault(require("./EmptyState.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 EmptyState = _ref => {
+  let {
+    classNames,
+    children,
+    imageVariant,
+    title,
+    description,
+    customImageUrl,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    "data-testid": "EmptyState",
+    className: (0, _classify.default)(_EmptyStateModule.default.wrapper, classNames?.wrapper)
+  }), !!imageVariant && !customImageUrl && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_EmptyStateModule.default.image, classNames?.image)
+  }, imageVariant === 'calendar' && /*#__PURE__*/React.createElement(_EmptyImages.CalendarEmptyImage, null), imageVariant === 'data' && /*#__PURE__*/React.createElement(_EmptyImages.DataEmptyImage, null), imageVariant === 'file' && /*#__PURE__*/React.createElement(_EmptyImages.FileEmptyImage, null), imageVariant === 'message' && /*#__PURE__*/React.createElement(_EmptyImages.MessageEmptyImage, null), imageVariant === 'upload' && /*#__PURE__*/React.createElement(_EmptyImages.UploadEmptyImage, null)), customImageUrl && /*#__PURE__*/React.createElement("img", {
+    className: (0, _classify.default)(_EmptyStateModule.default.image, classNames?.image),
+    src: customImageUrl,
+    alt: "Empty State"
+  }), !!title && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_EmptyStateModule.default.title, classNames?.title)
+  }, title), !!description && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_EmptyStateModule.default.description, classNames?.description)
+  }, description), !!children && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_EmptyStateModule.default.childrenWrapper, classNames?.children)
+  }, children));
+};
+exports.EmptyState = EmptyState;

package/lib/components/EmptyState/EmptyState.js.flow

@@ -0,0 +1,80 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+
+import {
+  CalendarEmptyImage,
+  DataEmptyImage,
+  FileEmptyImage,
+  MessageEmptyImage,
+  UploadEmptyImage,
+} from './EmptyImages';
+
+import css from './EmptyState.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  image?: string,
+  title?: string,
+  description?: string,
+  children?: string,
+}>;
+
+export type EmptyStateProps = {
+  classNames?: ClassNames,
+  children?: React.Node,
+  imageVariant?: 'calendar' | 'data' | 'file' | 'message' | 'upload',
+  title?: React.Node,
+  description?: React.Node,
+  customImageUrl?: string,
+  ...
+};
+
+export const EmptyState = ({
+  classNames,
+  children,
+  imageVariant,
+  title,
+  description,
+  customImageUrl,
+  ...props
+}: EmptyStateProps): React.Node => (
+  <div
+    {...props}
+    data-testid="EmptyState"
+    className={classify(css.wrapper, classNames?.wrapper)}
+  >
+    {!!imageVariant && !customImageUrl && (
+      <div className={classify(css.image, classNames?.image)}>
+        {imageVariant === 'calendar' && <CalendarEmptyImage />}
+        {imageVariant === 'data' && <DataEmptyImage />}
+        {imageVariant === 'file' && <FileEmptyImage />}
+        {imageVariant === 'message' && <MessageEmptyImage />}
+        {imageVariant === 'upload' && <UploadEmptyImage />}
+      </div>
+    )}
+    {customImageUrl && (
+      <img
+        className={classify(css.image, classNames?.image)}
+        src={customImageUrl}
+        alt="Empty State"
+      />
+    )}
+    {!!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/EmptyState/EmptyState.module.css

@@ -0,0 +1,30 @@
+@value (colorTextSecondary) from '../../styles/variables/_color.css';
+@value (spaceMedium, spaceXSmall) 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 {
+  margin-bottom: spaceMedium;
+  max-width: size140;
+}
+
+.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/EmptyState/index.js

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

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

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

package/lib/components/Tabs/TabList/TabDropdown.js

@@ -73,7 +73,7 @@ const TabDropdown = _ref => {
         onOptionSelect && onOptionSelect(option);
         clickAway();
       },
-      size: size
+      size: props.menu.size || size
     }))));
   });
 };

package/lib/components/Tabs/TabList/TabDropdown.js.flow

@@ -94,7 +94,7 @@ export const TabDropdown = ({
                   onOptionSelect && onOptionSelect(option);
                   clickAway();
                 }}
-                size={size}
+                size={props.menu.size || size}
               />
             </div>
           )}

package/lib/components/Typeahead/Typeahead.js

@@ -27,6 +27,7 @@ const Typeahead = _ref => {
     onSelect,
     onSearch,
     selectedOption,
+    menuSize,
     ...inputProps
   } = _ref;
   const typeaheadRef = React.useRef();
@@ -112,7 +113,7 @@ const Typeahead = _ref => {
         handleSelect(option);
         clickAway();
       },
-      size: size
+      size: menuSize || size
     })));
   });
 };

package/lib/components/Typeahead/Typeahead.js.flow

@@ -44,6 +44,7 @@ export type TypeaheadProps = {
   required?: boolean,
   options?: Array<MenuOption>,
   selectedOption?: MenuOption,
+  menuSize?: 'medium' | 'small',
 };
 
 export const Typeahead = ({
@@ -54,6 +55,7 @@ export const Typeahead = ({
   onSelect,
   onSearch,
   selectedOption,
+  menuSize,
   ...inputProps
 }: TypeaheadProps): React.Node => {
   const typeaheadRef = React.useRef();
@@ -142,7 +144,7 @@ export const Typeahead = ({
                   handleSelect(option);
                   clickAway();
                 }}
-                size={size}
+                size={menuSize || size}
               />
             </div>
           )}

package/package.json

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