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

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

@@ -8,10 +8,10 @@ import {
 } from '../../hooks/useFileUpload';
 import classify from '../../utils/classify';
 import {UnstyledButton} from '../Button';
-import {ClickableIcon, CloseIcon, Icon} from '../Icon';
-import {LinearLoader} from '../LinearLoader';
 import {Truncate} from '../Truncate';
 
+import {FileBlock} from './FileBlock';
+
 import css from './FileUpload.module.css';
 
 
@@ -88,12 +88,6 @@ export type FileUploadProps = {
   onFileRefreshClick?: (file: FileObject) => void,
 };
 
-export type FileBlockProps = {
-  file: FileObject,
-  onFileRefreshClick?: (file: FileObject) => void,
-  handleFileClear?: (id: string) => mixed,
-};
-
 const FileUploadBase = (props: FileUploadProps, ref) => {
   const {
     classNames,
@@ -184,10 +178,10 @@ const FileUploadBase = (props: FileUploadProps, ref) => {
 
       {files.length > 0 && (
         <div className={css.files}>
-          {files.map((file: FileObject) => (
-            <React.Fragment key={file.id}>
+          {files.map((fileObject: FileObject) => (
+            <React.Fragment key={fileObject.id}>
               <FileBlock
-                file={file}
+                fileObject={fileObject}
                 onFileRefreshClick={onFileRefreshClick}
                 handleFileClear={handleFileClear}
               />
@@ -199,102 +193,6 @@ const FileUploadBase = (props: FileUploadProps, ref) => {
   );
 };
 
-const FileBlock = ({
-  file,
-  onFileRefreshClick,
-  handleFileClear,
-}: FileBlockProps): React.Node => (
-  <>
-    <div className={css.file}>
-      <div className={css.fileInfo}>
-        <div className={css.fileNameBlock}>
-          <div className={css.icon}>
-            <FileStatusIcon file={file} />
-          </div>
-          <div className={css.fileName}>
-            <Truncate>{file.file.name}</Truncate>
-          </div>
-        </div>
-
-        {file.success && !!file.successMessage && (
-          <div className={css.fileSuccess}>
-            <Truncate>{file.successMessage}</Truncate>
-          </div>
-        )}
-
-        {file.reject && !!file.rejectReason && (
-          <div className={css.fileError}>
-            <Truncate>{file.rejectReason}</Truncate>
-          </div>
-        )}
-
-        {!!file.progress && (
-          <div className={css.progress}>
-            <LinearLoader
-              size="small"
-              value={file.progress === 'indeterminate' ? 0 : file.progress}
-              indeterminate={file.progress === 'indeterminate'}
-            ></LinearLoader>
-          </div>
-        )}
-      </div>
-      <div className={css.rightSection}>
-        {file.showReUpload && (
-          <div className={css.rightBlock}>
-            <ClickableIcon
-              name="refresh"
-              size="small"
-              onClick={() => onFileRefreshClick?.(file)}
-            />
-          </div>
-        )}
-
-        <div className={css.rightBlock}>
-          <CloseIcon size="small" onClick={() => handleFileClear?.(file.id)} />
-        </div>
-      </div>
-    </div>
-  </>
-);
-
-// This function returns the status of a file
-const getFileStatus = (file: FileObject) => {
-  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 = ({file}: {file: FileObject}) => {
-  const status = getFileStatus(file);
-  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" />;
-  }
-};
-
 export const FileUpload: React.AbstractComponent<
   FileUploadProps,
   FileUploadRef,

package/lib/components/FileUpload/FileUpload.module.css

@@ -19,6 +19,7 @@
 @value (
   borderWidthNone,
   borderWidthPrimary,
+  borderWidthTertiary,
   borderRadiusMedium
 ) from '../../styles/variables/_border.css';
 
@@ -74,8 +75,8 @@
 .dropzone:focus {
   background-color: colorBackgroundPrimary;
   border-color: colorTextClickable;
-  box-shadow: borderWidthNone borderWidthNone borderWidthNone borderWidthPrimary
-    colorFocusPrimary;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
 }
 
 .dropzone.disabled {
@@ -130,7 +131,7 @@
   composes: formLabelMedium from '../../styles/typography.module.css';
   color: colorTextPrimary;
   gap: spaceXXSmall;
-  align-items: flex-start;
+  align-items: center;
 }
 
 .fileName {

package/lib/components/FileUpload/index.js

@@ -3,6 +3,17 @@
 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];
+    }
+  });
+});
 var _FileUpload = require("./FileUpload");
 Object.keys(_FileUpload).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

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

package/lib/components/Stepper/Step/Step.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Step = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../../utils/classify"));
+var _Icon = require("../../Icon");
+var _StepperModule = _interopRequireDefault(require("../Stepper.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 Step = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    active,
+    children,
+    completed = false,
+    disabled = false,
+    expanded = false,
+    index = 0,
+    last,
+    classNames,
+    onClick,
+    allowClick
+  } = _ref;
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+  const stepContent = childrenArray.map(stepContent => /*#__PURE__*/React.cloneElement(stepContent, {
+    ...stepContent.props,
+    active,
+    completed,
+    disabled
+  }));
+  const handleClick = e => allowClick && onClick?.(index, e);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: (0, _classify.default)(_StepperModule.default.stepWrapper, {
+      [_StepperModule.default.active]: active,
+      [_StepperModule.default.completed]: completed,
+      [_StepperModule.default.expanded]: expanded,
+      [_StepperModule.default.last]: last,
+      [_StepperModule.default.disabled]: disabled,
+      [_StepperModule.default.clickable]: allowClick
+    }, classNames?.wrapper),
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_StepperModule.default.stepWrapperCounter, {
+      [_StepperModule.default.selected]: active,
+      [_StepperModule.default.completed]: completed,
+      [_StepperModule.default.expanded]: expanded,
+      [_StepperModule.default.last]: last,
+      [_StepperModule.default.disabled]: disabled
+    }, classNames?.stepCounter)
+  }, completed && !active ? /*#__PURE__*/React.createElement(_Icon.Icon, {
+    name: "check",
+    color: "inversePrimary",
+    size: "small"
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, (index + 1).toString())), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_StepperModule.default.stepContent, classNames?.content)
+  }, stepContent));
+});
+exports.Step = Step;

package/lib/components/Stepper/Step/Step.js.flow

@@ -0,0 +1,101 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../../utils/classify';
+import {Icon} from '../../Icon';
+
+import css from '../Stepper.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  stepCounter?: string,
+  content?: string,
+}>;
+
+export type StepProps = {
+  active?: boolean,
+  children: React.Node,
+  completed?: boolean,
+  disabled?: boolean,
+  expanded?: boolean,
+  index: number,
+  last?: boolean,
+  classNames?: ClassNames,
+  allowClick?: boolean,
+  onClick?: (idx: number, e?: ?SyntheticEvent<HTMLElement>) => mixed,
+};
+
+export const Step: React$AbstractComponent<StepProps, HTMLDivElement> =
+  React.forwardRef<StepProps, HTMLDivElement>(
+    (
+      {
+        active,
+        children,
+        completed = false,
+        disabled = false,
+        expanded = false,
+        index = 0,
+        last,
+        classNames,
+        onClick,
+        allowClick,
+      }: StepProps,
+      ref,
+    ): React.Node => {
+      const childrenArray = React.Children.toArray(children).filter(Boolean);
+      const stepContent = childrenArray.map((stepContent) =>
+        React.cloneElement(stepContent, {
+          ...stepContent.props,
+          active,
+          completed,
+          disabled,
+        }),
+      );
+
+      const handleClick = (e) => allowClick && onClick?.(index, e);
+
+      return (
+        <div
+          ref={ref}
+          className={classify(
+            css.stepWrapper,
+            {
+              [css.active]: active,
+              [css.completed]: completed,
+              [css.expanded]: expanded,
+              [css.last]: last,
+              [css.disabled]: disabled,
+              [css.clickable]: allowClick,
+            },
+            classNames?.wrapper,
+          )}
+          onClick={handleClick}
+        >
+          <div
+            className={classify(
+              css.stepWrapperCounter,
+              {
+                [css.selected]: active,
+                [css.completed]: completed,
+                [css.expanded]: expanded,
+                [css.last]: last,
+                [css.disabled]: disabled,
+              },
+              classNames?.stepCounter,
+            )}
+          >
+            {completed && !active ? (
+              <Icon name="check" color="inversePrimary" size="small" />
+            ) : (
+              <React.Fragment>{(index + 1).toString()}</React.Fragment>
+            )}
+          </div>
+          <div className={classify(css.stepContent, classNames?.content)}>
+            {stepContent}
+          </div>
+        </div>
+      );
+    },
+  );

package/lib/components/Stepper/Step/StepContent.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepContent = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../../utils/classify");
+var _StepperModule = _interopRequireDefault(require("../Stepper.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 StepContent = _ref => {
+  let {
+    children,
+    classNames,
+    active,
+    completed = false,
+    disabled = false
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_StepperModule.default.stepContentWrapper, {
+      [_StepperModule.default.active]: active,
+      [_StepperModule.default.completed]: completed,
+      [_StepperModule.default.disabled]: disabled
+    }, classNames?.wrapper)
+  }, children);
+};
+exports.StepContent = StepContent;

package/lib/components/Stepper/Step/StepContent.js.flow

@@ -0,0 +1,40 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../../utils/classify';
+
+import css from '../Stepper.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type StepContentProps = {
+  children: React.Node,
+  active?: boolean,
+  completed?: boolean,
+  disabled?: boolean,
+  classNames?: ClassNames,
+};
+
+export const StepContent = ({
+  children,
+  classNames,
+  active,
+  completed = false,
+  disabled = false,
+}: StepContentProps): React.Node => (
+  <div
+    className={classify(
+      css.stepContentWrapper,
+      {
+        [css.active]: active,
+        [css.completed]: completed,
+        [css.disabled]: disabled,
+      },
+      classNames?.wrapper,
+    )}
+  >
+    {children}
+  </div>
+);

package/lib/components/Stepper/Step/StepLabel.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepLabel = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../../utils/classify");
+var _StepperModule = _interopRequireDefault(require("../Stepper.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 StepLabel = _ref => {
+  let {
+    children,
+    classNames,
+    active,
+    completed = false,
+    disabled = false
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_StepperModule.default.stepLabelWrapper, {
+      [_StepperModule.default.active]: active,
+      [_StepperModule.default.completed]: completed,
+      [_StepperModule.default.disabled]: disabled
+    }, classNames?.wrapper)
+  }, children);
+};
+exports.StepLabel = StepLabel;

package/lib/components/Stepper/Step/StepLabel.js.flow

@@ -0,0 +1,40 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../../utils/classify';
+
+import css from '../Stepper.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type StepLabelProps = {
+  children: React.Node,
+  active?: boolean,
+  completed?: boolean,
+  disabled?: boolean,
+  classNames?: ClassNames,
+};
+
+export const StepLabel = ({
+  children,
+  classNames,
+  active,
+  completed = false,
+  disabled = false,
+}: StepLabelProps): React.Node => (
+  <div
+    className={classify(
+      css.stepLabelWrapper,
+      {
+        [css.active]: active,
+        [css.completed]: completed,
+        [css.disabled]: disabled,
+      },
+      classNames?.wrapper,
+    )}
+  >
+    {children}
+  </div>
+);

package/lib/components/Stepper/Step/index.js

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

package/lib/components/Stepper/Step/index.js.flow

@@ -0,0 +1,5 @@
+// @flow strict
+
+export * from './Step';
+export * from './StepContent';
+export * from './StepLabel';

package/lib/components/Stepper/Stepper.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Stepper = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../utils/classify");
+var _StepperModule = _interopRequireDefault(require("./Stepper.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 Stepper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    activeStep = 0,
+    children,
+    orientation = 'horizontal',
+    classNames,
+    disabled = false
+  } = _ref;
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+  const steps = childrenArray.map((step, index) => {
+    let isLastStepCompleted = false;
+    const {
+      disabled: disabledChild,
+      onClick
+    } = step.props;
+    if (index === 0) {
+      isLastStepCompleted = true;
+    } else {
+      isLastStepCompleted = childrenArray[index - 1]?.props?.completed;
+    }
+    return /*#__PURE__*/React.cloneElement(step, {
+      ...step.props,
+      index,
+      last: index + 1 === childrenArray.length,
+      active: index === activeStep,
+      allowClick: onClick && index !== activeStep && isLastStepCompleted,
+      disabled: disabledChild || disabled
+    });
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_StepperModule.default.stepperWrapper, _StepperModule.default[orientation], classNames?.wrapper),
+    ref: ref
+  }, steps);
+});
+exports.Stepper = Stepper;

package/lib/components/Stepper/Stepper.js.flow

@@ -0,0 +1,64 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+
+import css from './Stepper.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type StepperProps = {
+  classNames?: ClassNames,
+  activeStep?: number,
+  children: React.Node,
+  orientation?: 'horizontal' | 'vertical',
+  disabled?: boolean,
+};
+
+export const Stepper: React$AbstractComponent<StepperProps, HTMLDivElement> =
+  React.forwardRef<StepperProps, HTMLDivElement>(
+    (
+      {
+        activeStep = 0,
+        children,
+        orientation = 'horizontal',
+        classNames,
+        disabled = false,
+      }: StepperProps,
+      ref,
+    ) => {
+      const childrenArray = React.Children.toArray(children).filter(Boolean);
+      const steps = childrenArray.map((step, index) => {
+        let isLastStepCompleted = false;
+        const {disabled: disabledChild, onClick} = step.props;
+        if (index === 0) {
+          isLastStepCompleted = true;
+        } else {
+          isLastStepCompleted = childrenArray[index - 1]?.props?.completed;
+        }
+        return React.cloneElement(step, {
+          ...step.props,
+          index,
+          last: index + 1 === childrenArray.length,
+          active: index === activeStep,
+          allowClick: onClick && index !== activeStep && isLastStepCompleted,
+          disabled: disabledChild || disabled,
+        });
+      });
+
+      return (
+        <div
+          className={classify(
+            css.stepperWrapper,
+            css[orientation],
+            classNames?.wrapper,
+          )}
+          ref={ref}
+        >
+          {steps}
+        </div>
+      );
+    },
+  );