@onewelcome/react-lib-components 8.4.0 → 8.6.0

package/dist/esm/withReadOnly.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withReadOnly.esm.js","sources":["../../../../src/components/withReadOnly.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ComponentType, ForwardedRef, PropsWithChildren } from \"react\";\n\nexport interface WithReadOnlyProps {\n  readOnlyView?: boolean;\n  required?: boolean;\n  helperText?: string;\n  type?: string;\n}\n\nconst componentsWithKeyEventsToPrevent: string[] = [\"CheckboxWrapper\"];\n\nconst getDisplayName = <P,>(WrappedComponent: ComponentType<P>) => {\n  return WrappedComponent.displayName ?? WrappedComponent.name ?? \"Component\";\n};\n\nconst getConditionalProps = (readOnlyView: boolean, type: string, helperText?: string) => {\n  const props: Record<string, any> = {};\n\n  if (readOnlyView) {\n    props.style = { pointerEvents: \"none\", userSelect: \"text\" };\n    if (helperText) {\n      props.helperText = \"\";\n    }\n  } else {\n    props.helperText = helperText;\n  }\n\n  if (type) {\n    props.type = type;\n  }\n\n  return props;\n};\n\nexport const withReadOnly = <P extends object>(WrappedComponent: ComponentType<P>) => {\n  const preventKeyUpAndKeyDownHandlerForSpecificComponents = (readOnlyView: boolean) => {\n    const preventSubmissionKeys = (e: KeyboardEvent) => {\n      const isEnterOrSpace = (e: KeyboardEvent) => e.key === \"Enter\" || e.key === \" \";\n      if (isEnterOrSpace(e)) {\n        e.stopPropagation();\n        e.preventDefault();\n      }\n    };\n\n    if (\n      readOnlyView &&\n      componentsWithKeyEventsToPrevent.includes(\n        WrappedComponent.displayName || WrappedComponent.name\n      )\n    ) {\n      const props: Record<string, any> = {};\n\n      props.onKeyUp = (e: KeyboardEvent) => {\n        preventSubmissionKeys(e);\n      };\n\n      props.onKeyDown = (e: KeyboardEvent) => {\n        preventSubmissionKeys(e);\n      };\n\n      return props;\n    }\n\n    return {};\n  };\n\n  const WithReadOnlyComponent = React.forwardRef(\n    (props: PropsWithChildren<P & WithReadOnlyProps>, ref: ForwardedRef<any>) => {\n      const {\n        readOnlyView = false,\n        required,\n        children,\n        helperText,\n        type = \"\",\n        ...restProps\n      } = props;\n\n      return (\n        <WrappedComponent\n          ref={ref}\n          {...(restProps as P)}\n          data-readonlyview={readOnlyView}\n          aria-readonly={readOnlyView}\n          required={readOnlyView ? false : required}\n          {...getConditionalProps(readOnlyView, type, helperText)}\n          {...preventKeyUpAndKeyDownHandlerForSpecificComponents(readOnlyView)}\n        >\n          {children}\n        </WrappedComponent>\n      );\n    }\n  );\n\n  WithReadOnlyComponent.displayName = `withReadOnly_${getDisplayName(WrappedComponent)}`;\n  return WithReadOnlyComponent;\n};\n"],"names":[],"mappings":"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"}

package/dist/lib/style-inject.js

@@ -2,51 +2,58 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
-var styleInject$1 = {exports: {}};
-
-(function (module, exports) {
-	(function (global, factory) {
-		module.exports = factory() ;
-	}(commonjsGlobal, (function () {
-	function styleInject(css, ref) {
-	  if ( ref === void 0 ) ref = {};
-	  var insertAt = ref.insertAt;
-
-	  if (!css || typeof document === 'undefined') { return; }
-
-	  var head = document.head || document.getElementsByTagName('head')[0];
-	  var style = document.createElement('style');
-	  style.type = 'text/css';
-
-	  if (insertAt === 'top') {
-	    if (head.firstChild) {
-	      head.insertBefore(style, head.firstChild);
-	    } else {
-	      head.appendChild(style);
-	    }
-	  } else {
-	    head.appendChild(style);
-	  }
-
-	  if (style.styleSheet) {
-	    style.styleSheet.cssText = css;
-	  } else {
-	    style.appendChild(document.createTextNode(css));
-	  }
-	}
-
-	return styleInject;
-
-	}))); 
-} (styleInject$1));
-
-var styleInjectExports = styleInject$1.exports;
+var styleInject$2 = {exports: {}};
+
+var styleInject$1 = styleInject$2.exports;
+
+var hasRequiredStyleInject;
+
+function requireStyleInject () {
+	if (hasRequiredStyleInject) return styleInject$2.exports;
+	hasRequiredStyleInject = 1;
+	(function (module, exports) {
+		(function (global, factory) {
+			module.exports = factory() ;
+		}(styleInject$1, (function () {
+		function styleInject(css, ref) {
+		  if ( ref === void 0 ) ref = {};
+		  var insertAt = ref.insertAt;
+
+		  if (!css || typeof document === 'undefined') { return; }
+
+		  var head = document.head || document.getElementsByTagName('head')[0];
+		  var style = document.createElement('style');
+		  style.type = 'text/css';
+
+		  if (insertAt === 'top') {
+		    if (head.firstChild) {
+		      head.insertBefore(style, head.firstChild);
+		    } else {
+		      head.appendChild(style);
+		    }
+		  } else {
+		    head.appendChild(style);
+		  }
+
+		  if (style.styleSheet) {
+		    style.styleSheet.cssText = css;
+		  } else {
+		    style.appendChild(document.createTextNode(css));
+		  }
+		}
+
+		return styleInject;
+
+		}))); 
+	} (styleInject$2));
+	return styleInject$2.exports;
+}
+
+var styleInjectExports = requireStyleInject();
 var styleInject = /*@__PURE__*/getDefaultExportFromCjs(styleInjectExports);
 
 exports.default = styleInject;

package/dist/lib/style-inject.js.map

@@ -1 +1 @@
-{"version":3,"file":"style-inject.js","sources":["../../node_modules/style-inject/dist/style-inject.js"],"sourcesContent":["(function (global, factory) {\n\ttypeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\n\ttypeof define === 'function' && define.amd ? define(factory) :\n\t(global.styleInject = factory());\n}(this, (function () { 'use strict';\n\nfunction styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nreturn styleInject;\n\n})));\n"],"names":["this"],"mappings":";;;;;;;;;;;;;AAAA,CAAA,CAAC,UAAU,MAAM,EAAE,OAAO,EAAE;EACoC,MAAiB,CAAA,OAAA,GAAA,OAAO,EAAE,CAEzD,CAAC;AAClC,EAAC,CAACA,cAAI,GAAG,YAAY,CACrB;AACA,CAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;GAC7B,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,GAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;GACE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,GAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;GACrE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,GAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,GAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,KAAI,IAAI,IAAI,CAAC,UAAU,EAAE;OACnB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,MAAK,MAAM;AACX,OAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;MACzB;AACL,IAAG,MAAM;AACT,KAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACzB;AACH;AACA,GAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,KAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,IAAG,MAAM;KACL,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;IACjD;EACF;AACD;AACA,CAAA,OAAO,WAAW,CAAC;AACnB;AACA,EAAC,EAAE,EAAA;;;;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"style-inject.js","sources":["../../node_modules/style-inject/dist/style-inject.js","../../node_modules/style-inject/dist/style-inject.js?commonjs-entry"],"sourcesContent":["(function (global, factory) {\n\ttypeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\n\ttypeof define === 'function' && define.amd ? define(factory) :\n\t(global.styleInject = factory());\n}(this, (function () { 'use strict';\n\nfunction styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nreturn styleInject;\n\n})));\n","import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireStyleInject } from \"/home/circleci/project/node_modules/style-inject/dist/style-inject.js\";\nvar styleInjectExports = requireStyleInject();\nexport { styleInjectExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(styleInjectExports);"],"names":["this"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,EAAA,CAAC,UAAU,MAAM,EAAE,OAAO,EAAE;GACoC,MAAiB,CAAA,OAAA,GAAA,OAAO,EAAE,CAEzD,CAAC;AAClC,GAAC,CAACA,aAAI,GAAG,YAAY,CACrB;AACA,EAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;IAC7B,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,IAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;IACE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,IAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACrE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,IAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,IAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,MAAI,IAAI,IAAI,CAAC,UAAU,EAAE;QACnB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,OAAK,MAAM;AACX,QAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;OACzB;AACL,KAAG,MAAM;AACT,MAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KACzB;AACH;AACA,IAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,MAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,KAAG,MAAM;MACL,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;KACjD;GACF;AACD;AACA,EAAA,OAAO,WAAW,CAAC;AACnB;AACA,GAAC,EAAE,EAAA;;;;;ACjCH,IAAI,kBAAkB,GAAG,kBAAkB,EAAE,CAAC;AAE9C,kBAAe,aAAa,uBAAuB,CAAC,kBAAkB,CAAC;;;;","x_google_ignoreList":[0,1]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "8.4.0",
+  "version": "8.6.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -61,23 +61,23 @@
     "@mdx-js/react": "^3.0.1",
     "@onewelcome/eslint-config-shared-codestyle": "^9.2.3",
     "@onewelcome/storybook-addon-basestyling": "^2.0.0",
-    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-a11y": "^8.1.11",
-    "@storybook/addon-actions": "^8.1.11",
-    "@storybook/addon-docs": "^8.1.11",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-interactions": "^8.1.11",
-    "@storybook/addon-links": "^8.1.11",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.1.11",
-    "@storybook/components": "^8.1.11",
-    "@storybook/manager-api": "^8.1.11",
-    "@storybook/react": "^8.1.11",
-    "@storybook/react-webpack5": "^8.1.11",
-    "@storybook/theming": "^8.1.11",
+    "@storybook/addon-a11y": "~8.1.11",
+    "@storybook/addon-actions": "~8.1.11",
+    "@storybook/addon-docs": "~8.1.11",
+    "@storybook/addon-essentials": "~8.1.11",
+    "@storybook/addon-interactions": "~8.1.11",
+    "@storybook/addon-links": "~8.1.11",
+    "@storybook/addon-webpack5-compiler-babel": "~3.0.3",
+    "@storybook/blocks": "~8.1.11",
+    "@storybook/components": "~8.1.11",
+    "@storybook/manager-api": "~8.1.11",
+    "@storybook/react": "~8.1.11",
+    "@storybook/react-webpack5": "~8.1.11",
+    "@storybook/theming": "~8.1.11",
     "@testing-library/dom": "^10.3.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
@@ -127,7 +127,7 @@
     "sass": "1.77.6",
     "sass-loader": "^14.2.1",
     "size-limit": "^11.1.4",
-    "storybook": "^8.1.11",
+    "storybook": "~8.1.11",
     "storybook-addon-mock": "^5.0.0",
     "storybook-addon-pseudo-states": "^3.1.1",
     "style-loader": "^4.0.0",

package/src/components/Button/BaseButton.tsx

@@ -16,7 +16,7 @@
 
 import React, { ForwardRefRenderFunction, ComponentPropsWithRef, Fragment } from "react";
 import classes from "./BaseButton.module.scss";
-import { Spinner } from "./Spinner";
+import { ButtonSpinner } from "./Spinner";
 
 export interface Props extends ComponentPropsWithRef<"button"> {
   type?: "submit" | "button" | "reset";
@@ -49,7 +49,7 @@ const BaseButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> =
       {loading ? (
         <Fragment>
           <div className={classes["content-hidden"]}>{children}</div>
-          <Spinner className={classes["spinner"]} />
+          <ButtonSpinner className={classes["spinner"]} />
         </Fragment>
       ) : (
         children

package/src/components/Button/Spinner.tsx

@@ -16,7 +16,7 @@
 
 import React from "react";
 
-export const Spinner: React.FC<React.SVGProps<SVGSVGElement>> = props => (
+export const ButtonSpinner: React.FC<React.SVGProps<SVGSVGElement>> = props => (
   <svg
     {...props}
     width="24"

package/src/components/Form/Checkbox/Checkbox.module.scss

@@ -133,3 +133,73 @@
 .indeterminate {
   color: var(--color-primary);
 }
+
+[data-readonlyview="true"] {
+  & label {
+    border-color: var(--read-only-border-color);
+    color: var(--read-only-text-color);
+    background-color: transparent;
+    user-select: text;
+  }
+
+  & .checkbox-wrapper {
+    & span {
+      color: var(--color-blue-grey100);
+
+      &.checkmark {
+        background-color: var(--color-blue-grey900);
+        color: var(--color-white);
+        border-radius: 2px;
+        &:before {
+          outline: 1px solid var(--read-only-border-color);
+          border-radius: 2px;
+          outline-offset: -1px;
+        }
+      }
+    }
+  }
+
+  input[type="checkbox"] {
+    pointer-events: none;
+  }
+}
+
+input[type="checkbox"] {
+  &[data-readonlyview="true"] {
+    & ~ span {
+      &:before {
+        color: var(--color-blue-grey100);
+      }
+
+      &.checkmark {
+        background-color: var(--color-blue-grey900);
+        color: var(--color-white);
+        border: 1px solid var(--read-only-border-color);
+        border-radius: 3px;
+        &:before {
+          color: var(--color-white);
+        }
+      }
+    }
+
+    & ~ span[data-icon="true"] {
+      color: var(--color-blue-grey100);
+
+      &.checkmark {
+        background-color: var(--color-blue-grey900);
+        color: var(--color-white);
+        border: 0;
+        &:before {
+          outline: 1px solid var(--read-only-border-color);
+          outline-offset: -1px;
+          border-radius: 2px;
+        }
+      }
+    }
+
+    & ~ label {
+      pointer-events: none;
+      user-select: text;
+    }
+  }
+}

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -30,6 +30,7 @@ import {
   Props as FormSelectorWrapperProps
 } from "../FormSelectorWrapper/FormSelectorWrapper";
 import { FormSelector } from "../form.interfaces";
+import { withReadOnly } from "../../withReadOnly";
 
 const isToggle = (children: ReactNode) => !!(children as ReactElement)?.props?.["data-toggle"];
 
@@ -182,4 +183,4 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   );
 };
 
-export const Checkbox = React.forwardRef(CheckboxComponent);
+export const Checkbox = withReadOnly(React.forwardRef(CheckboxComponent));

package/src/components/Form/Fieldset/Fieldset.tsx

@@ -32,6 +32,7 @@ import { FormHelperText } from "../FormHelperText/FormHelperText";
 import { InputWrapper } from "../Wrapper/InputWrapper/InputWrapper";
 import { SelectWrapper } from "../Wrapper/SelectWrapper/SelectWrapper";
 import { TextareaWrapper } from "../Wrapper/TextareaWrapper/TextareaWrapper";
+import { withReadOnly } from "../../withReadOnly";
 
 export interface Props extends ComponentPropsWithRef<"fieldset"> {
   children?: ReactElement | ReactElement[];
@@ -123,4 +124,4 @@ const FieldsetComponent: ForwardRefRenderFunction<HTMLFieldSetElement, Props> =
   );
 };
 
-export const Fieldset = React.forwardRef(FieldsetComponent);
+export const Fieldset = withReadOnly(React.forwardRef(FieldsetComponent));

package/src/components/Form/FileUpload/FileItem/FileItem.module.scss

@@ -186,4 +186,20 @@
   .file-subtitle {
     margin-left: 0;
   }
+
+  &[data-readonlyview="true"] {
+    & .file-list-container {
+      & p {
+        & span {
+          &:before {
+            color: var(--font-family);
+          }
+        }
+      }
+
+      & button {
+        visibility: hidden;
+      }
+    }
+  }
 }

package/src/components/Form/FileUpload/FileItem/FileItem.tsx

@@ -22,6 +22,7 @@ import { ProgressBar } from "../../../ProgressBar/ProgressBar";
 import { FileType } from "../FileUpload";
 import { Button } from "../../../Button/Button";
 import { Link } from "../../../Link/Link";
+import { withReadOnly } from "../../../withReadOnly";
 export type UploadProgress = "uploading" | "completed" | "error" | "readonly" | "retry";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
@@ -62,7 +63,8 @@ const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     progress,
     downloadFileLink,
     totalPercentage,
-    onRequestedFileAction
+    onRequestedFileAction,
+    ...rest
   }: Props,
   ref
 ) => {
@@ -213,8 +215,20 @@ const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     );
   };
 
+  const restPropsWithoutPointerEvents = () => {
+    let props = rest;
+    delete rest?.style?.pointerEvents;
+    return props;
+  };
+
   return (
-    <div ref={ref} className={classes["file-item-wrapper"]} aria-label={`${name}-wrapper`}>
+    <div
+      ref={ref}
+      className={classes["file-item-wrapper"]}
+      aria-label={`${name}-wrapper`}
+      tabIndex={0}
+      {...restPropsWithoutPointerEvents()}
+    >
       <div className={classes["file-list-container"]}>
         {status !== ACTION_STATUS.UPLOADING && getUploadedFileInfo()}
 
@@ -240,4 +254,4 @@ const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   );
 };
 
-export const FileItem = React.forwardRef(FileItemComponent);
+export const FileItem = withReadOnly(React.forwardRef(FileItemComponent));

package/src/components/Form/FileUpload/FileUpload.module.scss

@@ -80,6 +80,58 @@
   & {
     @include transition(all, 0.2s, ease-in-out);
   }
+
+  &[data-readonlyview="true"]:has(.file-list) {
+    .required {
+      &:after {
+        display: none;
+      }
+    }
+
+    ul {
+      li {
+        p {
+          span[data-icon] {
+            &:before {
+              color: var(--color-blue-grey900);
+            }
+          }
+        }
+
+        button {
+          visibility: hidden;
+        }
+      }
+    }
+
+    .upload-button-wrapper {
+      display: none;
+    }
+  }
+
+  &[data-readonlyview="true"]:not(:has(.file-list)) {
+    .upload-button-wrapper {
+      min-height: 4.5rem;
+
+      & .file-select {
+        border: 0;
+
+        & p {
+          color: var(--read-only-text-color);
+        }
+      }
+
+      & .file-upload-btn {
+        display: none;
+      }
+    }
+
+    .required {
+      &:after {
+        display: none;
+      }
+    }
+  }
 }
 
 .upload-button-wrapper {
@@ -88,7 +140,6 @@
 
   &.drag-active {
     .outline {
-      pointer-events: none;
       position: absolute;
       margin: 0;
       padding: 0;
@@ -134,6 +185,11 @@
   }
 }
 
+.file-selector-helper-text {
+  color: var(--greyed-out);
+  display: block;
+}
+
 .file-select {
   display: flex;
   align-items: center;

package/src/components/Form/FileUpload/FileUpload.tsx

@@ -29,6 +29,7 @@ import { Typography } from "../../Typography/Typography";
 import classes from "./FileUpload.module.scss";
 import { useDetermineStatusIcon } from "../../../hooks/useDetermineStatusIcon";
 import { Label } from "../Label/Label";
+import { withReadOnly } from "../../withReadOnly";
 
 type FileUploadType = Omit<InputProps, "onDrop" | "type" | "onChange" | "suffix" | "prefix">;
 export type FileType = Omit<FileConfig, "onRequestedFileAction"> &
@@ -43,6 +44,9 @@ export interface Props extends FileUploadType {
   maxFileSizeInBytes?: number;
   selectButtonText?: string;
   dragAndDropText?: string;
+  /**
+   * @deprecated use the `helperText` prop instead
+   */
   subText?: string;
   onDragOver?: DragEventHandler;
   onDragEnter?: DragEventHandler;
@@ -54,6 +58,8 @@ export interface Props extends FileUploadType {
   isRequired?: boolean;
   invalidDropErrorMessage?: string;
   noMultipleFileDropErrorMessage?: string;
+  readOnlyViewMessage?: string;
+  helperText?: string;
 }
 
 const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
@@ -71,11 +77,12 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     onChange,
     dragAndDropText = "Drag and drop or",
     selectButtonText = "Browse file",
+    readOnlyViewMessage = "No file uploaded",
     onDragOver,
     onDragLeave,
     wrapperProps,
     onDrop,
-    subText,
+    subText, // @deprecated
     onRequestedFileAction,
     exceedingMaxSizeErrorText,
     fileList,
@@ -83,6 +90,7 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     isRequired = true,
     invalidDropErrorMessage = "Invalid file format. Supported formats are: $accept.",
     noMultipleFileDropErrorMessage = "You can upload only a single file.",
+    helperText = subText,
     ...rest
   }: Props,
   ref
@@ -98,6 +106,7 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   let errorTextClass = [classes["file-selector-sub-text"]];
   dragActive && dropzoneContainerClassNames.push(classes["drag-active"]);
   const hasError = inputError || error || errorMsg;
+  const readOnlyView = rest["data-readonlyview"];
   if (hasError) {
     const errorClass = classes["error"];
     dropzoneClassNames.push(errorClass);
@@ -231,7 +240,7 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   return (
     <div className={classes["file-upload-wrapper"]} {...wrapperProps}>
       <div className={classes["dropzone-wrapper"]}>
-        <div className={dropzoneClassNames.join(" ")}>
+        <div className={dropzoneClassNames.join(" ")} data-readonlyview={readOnlyView}>
           <Label ref={labelRef} className={`${labelClasses.join(" ")}`} htmlFor={inputId}>
             {title}
           </Label>
@@ -258,10 +267,11 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
             onDragOver={e => !disabled && handleOnDragOver(e)}
             onDragLeave={e => !disabled && handleOnDragLeave(e)}
             onDrop={e => !disabled && handleOnDrop(e)}
+            tabIndex={readOnlyView ? 0 : -1}
           >
             <div className={classes["file-select"]}>
               <Typography variant="body" className={"drag-and-drop-text"}>
-                {dragAndDropText}
+                {readOnlyView ? readOnlyViewMessage : dragAndDropText}
               </Typography>
 
               <div className={classes["file-upload-btn"]}>
@@ -293,9 +303,9 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
             {errorMsg}
           </Typography>
         )}
-        {subText && (
+        {helperText && (
           <Typography variant={"sub-text"} className={subTextClass.join(" ")}>
-            {subText}
+            {helperText}
           </Typography>
         )}
       </div>
@@ -303,4 +313,4 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   );
 };
 
-export const FileUpload = React.forwardRef(FileUploadComponent);
+export const FileUpload = withReadOnly(React.forwardRef(FileUploadComponent));

package/src/components/Form/FormHelperText/FormHelperText.module.scss

@@ -26,3 +26,7 @@ div.disabled {
 div.error {
   color: var(--error);
 }
+
+[data-readonlyview="true"] div.form-helper-text {
+  display: none;
+}

package/src/components/Form/Input/Input.module.scss

@@ -94,6 +94,32 @@
   [data-icon-status="error"] {
     color: var(--error);
   }
+
+  &[data-readonlyview="true"] {
+    color: var(--read-only-text-color);
+
+    & .Input-module {
+      border-color: var(--read-only-border-color);
+    }
+
+    & span.outline {
+      color: var(--read-only-text-color);
+      border-color: var(--read-only-border-color);
+      background-color: var(--color-white);
+
+      &.focus {
+        border-color: var(--read-only-border-color);
+      }
+    }
+
+    &:hover {
+      & .outline {
+        color: var(--read-only-text-color);
+        background-color: var(--color-white);
+        border-color: var(--read-only-border-color);
+      }
+    }
+  }
 }
 
 .input {

package/src/components/Form/Input/Input.tsx

@@ -28,6 +28,7 @@ import readyclasses from "../../../readyclasses.module.scss";
 import { FormElement } from "../form.interfaces";
 import { useDetermineStatusIcon } from "../../../hooks/useDetermineStatusIcon";
 import { MergeElementProps } from "../../../interfaces";
+import { withReadOnly } from "../../withReadOnly";
 
 export const dateTypes = ["date", "time", "datetime-local"] as const;
 
@@ -51,6 +52,7 @@ export type Props = MergeElementProps<
     type: Type;
     suffix?: ReactNode;
     prefix?: ReactNode;
+    readOnlyView?: boolean;
   }
 >;
 
@@ -69,6 +71,7 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     disabled,
     onFocus,
     onBlur,
+    readOnlyView,
     ...rest
   }: Props,
   ref: Ref<HTMLInputElement>
@@ -106,13 +109,16 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   success && wrapperClasses.push(classes["success"]);
 
   const icon = useDetermineStatusIcon({ success, error });
+  const readOnlyMode = rest["data-readonlyview"] as boolean;
 
   return (
     <div
       ref={inputWrapperRef}
       {...wrapperProps}
       style={{ ...style }}
+      data-readonlyview={readOnlyMode}
       className={`${classes["input-wrapper"]} ${wrapperClasses.join(" ")}`}
+      tabIndex={readOnlyMode ? 0 : -1}
     >
       {prefix && (
         <div data-prefix className={classes["prefix"]}>
@@ -122,6 +128,8 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
       <input
         {...rest}
         ref={ref}
+        aria-readonly={readOnlyMode}
+        readOnly={readOnlyMode}
         onFocus={event => {
           setFocus(true);
           onFocus?.(event);
@@ -136,6 +144,7 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
         disabled={disabled}
         className={inputClassNames.join(" ")}
         spellCheck={rest.spellCheck ?? false}
+        tabIndex={readOnlyMode ? -1 : 0}
       />
       {icon}
       {suffix && (
@@ -149,4 +158,4 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   );
 };
 
-export const Input = React.forwardRef(InputComponent);
+export const Input = withReadOnly(React.forwardRef(InputComponent));