@spaced-out/ui-design-system 0.1.31 → 0.1.33

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.33](https://github.com/spaced-out/ui-design-system/compare/v0.1.32...v0.1.33) (2023-06-28)
+
+
+### Features
+
+* :new: stepper component and FileBlock separation ([#121](https://github.com/spaced-out/ui-design-system/issues/121)) ([3f20562](https://github.com/spaced-out/ui-design-system/commit/3f20562507b3fc9ed9b8854512d6bd0ac805d638))
+
+
+### Bug Fixes
+
+* collapsible card docs fix ([f1115e3](https://github.com/spaced-out/ui-design-system/commit/f1115e38ea4b1c270adc9ac3f83cae05fa6daf10))
+
+### [0.1.32](https://github.com/spaced-out/ui-design-system/compare/v0.1.31...v0.1.32) (2023-06-16)
+
+
+### Bug Fixes
+
+* fileupload shadow fixes ([d597982](https://github.com/spaced-out/ui-design-system/commit/d59798251ba05afc507fd0627f4f05d4fdbf5fda))
+
 ### [0.1.31](https://github.com/spaced-out/ui-design-system/compare/v0.1.30...v0.1.31) (2023-06-16)
 
 

package/lib/components/Badge/Badge.js

@@ -30,12 +30,12 @@ const Badge = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "Badge",
+    style: {
+      '--wrapperBgColor': BADGE_COLOR[fill]
+    },
     className: (0, _classify.default)(_BadgeModule.default.badgeWrapper, {
       [_BadgeModule.default.fixedWidth]: text.length <= 2
     }, classNames?.wrapper),
-    style: {
-      backgroundColor: BADGE_COLOR[fill]
-    },
     ref: ref
   }, /*#__PURE__*/React.createElement(_Text.ButtonTextSmall, {
     className: classNames?.text

package/lib/components/Badge/Badge.js.flow

@@ -40,6 +40,9 @@ export const Badge: React$AbstractComponent<BadgeProps, HTMLDivElement> =
     ({classNames, text, fill = 'gray'}: BadgeProps, ref): React.Node => (
       <div
         data-testid="Badge"
+        style={{
+          '--wrapperBgColor': BADGE_COLOR[fill],
+        }}
         className={classify(
           css.badgeWrapper,
           {
@@ -47,9 +50,6 @@ export const Badge: React$AbstractComponent<BadgeProps, HTMLDivElement> =
           },
           classNames?.wrapper,
         )}
-        style={{
-          backgroundColor: BADGE_COLOR[fill],
-        }}
         ref={ref}
       >
         <ButtonTextSmall className={classNames?.text}>{text}</ButtonTextSmall>

package/lib/components/Badge/Badge.module.css

@@ -1,18 +1,24 @@
 @value (size22, size100) from '../../styles/variables/_size.css';
 @value (spaceXSmall, spaceNone) from '../../styles/variables/_space.css';
+@value (colorGrayLightest) from '../../styles/variables/_color.css';
 
 .badgeWrapper {
+  --wrapperBgColor: colorGrayLightest;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: size100;
   height: size22;
   padding: spaceNone spaceXSmall;
+  min-width: fit-content;
   width: fit-content;
+  background-color: var(--wrapperBgColor);
 }
 
 .fixedWidth {
   padding: initial;
   width: size22;
   height: size22;
+  min-width: size22;
+  min-height: size22;
 }

package/lib/components/Dialog/index.js

@@ -3,34 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "DIALOG_SEMANTIC", {
-  enumerable: true,
-  get: function () {
-    return _Dialog.DIALOG_SEMANTIC;
-  }
-});
-Object.defineProperty(exports, "Dialog", {
-  enumerable: true,
-  get: function () {
-    return _Dialog.Dialog;
-  }
-});
-Object.defineProperty(exports, "DialogBody", {
-  enumerable: true,
-  get: function () {
-    return _Dialog.DialogBody;
-  }
-});
-Object.defineProperty(exports, "DialogFooter", {
-  enumerable: true,
-  get: function () {
-    return _Dialog.DialogFooter;
-  }
-});
-Object.defineProperty(exports, "DialogHeader", {
-  enumerable: true,
-  get: function () {
-    return _Dialog.DialogHeader;
-  }
-});
-var _Dialog = require("./Dialog");
+var _Dialog = require("./Dialog");
+Object.keys(_Dialog).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Dialog[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Dialog[key];
+    }
+  });
+});

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

@@ -1,14 +1,2 @@
 //@flow strict
-export type {
-  DialogBodyProps,
-  DialogFooterProps,
-  DialogHeaderProps,
-  DialogProps,
-} from './Dialog';
-export {
-  Dialog,
-  DIALOG_SEMANTIC,
-  DialogBody,
-  DialogFooter,
-  DialogHeader,
-} from './Dialog';
+export * from './Dialog';

package/lib/components/FileUpload/FileBlock/FileBlock.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FileBlock = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../../utils/classify"));
+var _Icon = require("../../Icon");
+var _LinearLoader = require("../../LinearLoader");
+var _Truncate = require("../../Truncate");
+var _FileUploadModule = _interopRequireDefault(require("../FileUpload.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; }
+
+const FileBlock = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    classNames,
+    fileObject,
+    onFileRefreshClick,
+    handleFileClear
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_FileUploadModule.default.file, classNames?.wrapper),
+    ref: ref
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.fileInfo
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.fileNameBlock
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.icon
+  }, /*#__PURE__*/React.createElement(FileStatusIcon, {
+    fileObject: fileObject
+  })), /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.fileName
+  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, fileObject.file.name))), fileObject.success && !!fileObject.successMessage && !fileObject.progress && /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.fileSuccess
+  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, fileObject.successMessage)), fileObject.reject && !!fileObject.rejectReason && !fileObject.progress && /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.fileError
+  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, fileObject.rejectReason)), !!fileObject.progress && /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.progress
+  }, /*#__PURE__*/React.createElement(_LinearLoader.LinearLoader, {
+    size: "small",
+    value: fileObject.progress === 'indeterminate' ? 0 : fileObject.progress,
+    indeterminate: fileObject.progress === 'indeterminate'
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.rightSection
+  }, fileObject.showReUpload && /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.rightBlock
+  }, /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
+    name: "refresh",
+    size: "small",
+    onClick: () => onFileRefreshClick?.(fileObject)
+  })), /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.rightBlock
+  }, /*#__PURE__*/React.createElement(_Icon.CloseIcon, {
+    size: "small",
+    onClick: () => handleFileClear?.(fileObject.id)
+  })))));
+});
+
+// This function returns the status of a file
+exports.FileBlock = FileBlock;
+const getFileStatus = fileObject => {
+  if (fileObject.progress) {
+    return 'progress';
+  }
+  if (fileObject.success) {
+    return 'success';
+  }
+  if (fileObject.reject) {
+    return 'error';
+  }
+  return 'default';
+};
+
+// This component renders the status icon for a file
+const FileStatusIcon = _ref2 => {
+  let {
+    fileObject
+  } = _ref2;
+  const status = getFileStatus(fileObject);
+  switch (status) {
+    case 'progress':
+      return /*#__PURE__*/React.createElement(_Icon.Icon, {
+        size: "small",
+        name: "loader",
+        color: "tertiary"
+      });
+    case 'success':
+      return /*#__PURE__*/React.createElement(_Icon.Icon, {
+        size: "small",
+        name: "check",
+        color: "success"
+      });
+    case 'error':
+      return /*#__PURE__*/React.createElement(_Icon.Icon, {
+        size: "small",
+        name: "circle-exclamation",
+        color: "danger",
+        type: "solid"
+      });
+    default:
+      return /*#__PURE__*/React.createElement(_Icon.Icon, {
+        size: "small",
+        name: "check",
+        color: "success"
+      });
+  }
+};

package/lib/components/FileUpload/FileBlock/FileBlock.js.flow

@@ -0,0 +1,139 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../../utils/classify';
+import {ClickableIcon, CloseIcon, Icon} from '../../Icon';
+import {LinearLoader} from '../../LinearLoader';
+import {Truncate} from '../../Truncate';
+import type {FileObject} from '../FileUpload';
+
+import css from '../FileUpload.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+}>;
+
+export type FileBlockProps = {
+  classNames?: ClassNames,
+  fileObject: FileObject,
+  onFileRefreshClick?: (file: FileObject) => void,
+  handleFileClear?: (id: string) => mixed,
+};
+
+export const FileBlock: React$AbstractComponent<
+  FileBlockProps,
+  HTMLDivElement,
+> = React.forwardRef<FileBlockProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      fileObject,
+      onFileRefreshClick,
+      handleFileClear,
+    }: FileBlockProps,
+    ref,
+  ): React.Node => (
+    <>
+      <div className={classify(css.file, classNames?.wrapper)} ref={ref}>
+        <div className={css.fileInfo}>
+          <div className={css.fileNameBlock}>
+            <div className={css.icon}>
+              <FileStatusIcon fileObject={fileObject} />
+            </div>
+            <div className={css.fileName}>
+              <Truncate>{fileObject.file.name}</Truncate>
+            </div>
+          </div>
+
+          {fileObject.success &&
+            !!fileObject.successMessage &&
+            !fileObject.progress && (
+            <div className={css.fileSuccess}>
+              <Truncate>{fileObject.successMessage}</Truncate>
+            </div>
+          )}
+
+          {fileObject.reject &&
+            !!fileObject.rejectReason &&
+            !fileObject.progress && (
+            <div className={css.fileError}>
+              <Truncate>{fileObject.rejectReason}</Truncate>
+            </div>
+          )}
+
+          {!!fileObject.progress && (
+            <div className={css.progress}>
+              <LinearLoader
+                size="small"
+                value={
+                  fileObject.progress === 'indeterminate'
+                    ? 0
+                    : fileObject.progress
+                }
+                indeterminate={fileObject.progress === 'indeterminate'}
+              ></LinearLoader>
+            </div>
+          )}
+        </div>
+        <div className={css.rightSection}>
+          {fileObject.showReUpload && (
+            <div className={css.rightBlock}>
+              <ClickableIcon
+                name="refresh"
+                size="small"
+                onClick={() => onFileRefreshClick?.(fileObject)}
+              />
+            </div>
+          )}
+
+          <div className={css.rightBlock}>
+            <CloseIcon
+              size="small"
+              onClick={() => handleFileClear?.(fileObject.id)}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  ),
+);
+
+// This function returns the status of a file
+const getFileStatus = (fileObject: FileObject) => {
+  if (fileObject.progress) {
+    return 'progress';
+  }
+  if (fileObject.success) {
+    return 'success';
+  }
+  if (fileObject.reject) {
+    return 'error';
+  }
+
+  return 'default';
+};
+
+// This component renders the status icon for a file
+const FileStatusIcon = ({fileObject}: {fileObject: FileObject}) => {
+  const status = getFileStatus(fileObject);
+  switch (status) {
+  case 'progress':
+    return <Icon size="small" name="loader" color="tertiary" />;
+  case 'success':
+    return <Icon size="small" name="check" color="success" />;
+  case 'error':
+    return (
+      <Icon
+        size="small"
+        name="circle-exclamation"
+        color="danger"
+        type="solid"
+      />
+    );
+
+  default:
+    return <Icon size="small" name="check" color="success" />;
+  }
+};

package/lib/components/FileUpload/FileBlock/index.js

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

package/lib/components/FileUpload/FileBlock/index.js.flow

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

package/lib/components/FileUpload/FileUpload.js

@@ -8,9 +8,8 @@ var React = _interopRequireWildcard(require("react"));
 var _useFileUpload = require("../../hooks/useFileUpload");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Button = require("../Button");
-var _Icon = require("../Icon");
-var _LinearLoader = require("../LinearLoader");
 var _Truncate = require("../Truncate");
+var _FileBlock = require("./FileBlock");
 var _FileUploadModule = _interopRequireDefault(require("./FileUpload.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); }
@@ -91,105 +90,13 @@ const FileUploadBase = (props, ref) => {
     className: (0, _classify.default)(_FileUploadModule.default.secondaryInstruction, classNames?.secondaryInstruction)
   }, secondaryInstruction)), files.length > 0 && /*#__PURE__*/React.createElement("div", {
     className: _FileUploadModule.default.files
-  }, files.map(file => /*#__PURE__*/React.createElement(React.Fragment, {
-    key: file.id
-  }, /*#__PURE__*/React.createElement(FileBlock, {
-    file: file,
+  }, files.map(fileObject => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: fileObject.id
+  }, /*#__PURE__*/React.createElement(_FileBlock.FileBlock, {
+    fileObject: fileObject,
     onFileRefreshClick: onFileRefreshClick,
     handleFileClear: handleFileClear
   })))));
 };
-const FileBlock = _ref => {
-  let {
-    file,
-    onFileRefreshClick,
-    handleFileClear
-  } = _ref;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: _FileUploadModule.default.file
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _FileUploadModule.default.fileInfo
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _FileUploadModule.default.fileNameBlock
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _FileUploadModule.default.icon
-  }, /*#__PURE__*/React.createElement(FileStatusIcon, {
-    file: file
-  })), /*#__PURE__*/React.createElement("div", {
-    className: _FileUploadModule.default.fileName
-  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, file.file.name))), file.success && !!file.successMessage && /*#__PURE__*/React.createElement("div", {
-    className: _FileUploadModule.default.fileSuccess
-  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, file.successMessage)), file.reject && !!file.rejectReason && /*#__PURE__*/React.createElement("div", {
-    className: _FileUploadModule.default.fileError
-  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, file.rejectReason)), !!file.progress && /*#__PURE__*/React.createElement("div", {
-    className: _FileUploadModule.default.progress
-  }, /*#__PURE__*/React.createElement(_LinearLoader.LinearLoader, {
-    size: "small",
-    value: file.progress === 'indeterminate' ? 0 : file.progress,
-    indeterminate: file.progress === 'indeterminate'
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: _FileUploadModule.default.rightSection
-  }, file.showReUpload && /*#__PURE__*/React.createElement("div", {
-    className: _FileUploadModule.default.rightBlock
-  }, /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
-    name: "refresh",
-    size: "small",
-    onClick: () => onFileRefreshClick?.(file)
-  })), /*#__PURE__*/React.createElement("div", {
-    className: _FileUploadModule.default.rightBlock
-  }, /*#__PURE__*/React.createElement(_Icon.CloseIcon, {
-    size: "small",
-    onClick: () => handleFileClear?.(file.id)
-  })))));
-};
-
-// This function returns the status of a file
-const getFileStatus = file => {
-  if (file.progress) {
-    return 'progress';
-  }
-  if (file.success) {
-    return 'success';
-  }
-  if (file.reject) {
-    return 'error';
-  }
-  return 'default';
-};
-
-// This component renders the status icon for a file
-const FileStatusIcon = _ref2 => {
-  let {
-    file
-  } = _ref2;
-  const status = getFileStatus(file);
-  switch (status) {
-    case 'progress':
-      return /*#__PURE__*/React.createElement(_Icon.Icon, {
-        size: "small",
-        name: "loader",
-        color: "tertiary"
-      });
-    case 'success':
-      return /*#__PURE__*/React.createElement(_Icon.Icon, {
-        size: "small",
-        name: "check",
-        color: "success"
-      });
-    case 'error':
-      return /*#__PURE__*/React.createElement(_Icon.Icon, {
-        size: "small",
-        name: "circle-exclamation",
-        color: "danger",
-        type: "solid"
-      });
-    default:
-      return /*#__PURE__*/React.createElement(_Icon.Icon, {
-        size: "small",
-        name: "check",
-        color: "success"
-      });
-  }
-};
 const FileUpload = /*#__PURE__*/React.forwardRef(FileUploadBase);
 exports.FileUpload = FileUpload;