From 19adff1d875465b832ed38144a6a06035573d2d4 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Wed, 12 Oct 2022 15:39:42 +0200
Subject: [PATCH] Send skeleton properties down to sibling components

---
 .../src/components/upload/Upload.tsx          | 156 +++++++++---------
 1 file changed, 76 insertions(+), 80 deletions(-)

diff --git a/packages/dnb-eufemia/src/components/upload/Upload.tsx b/packages/dnb-eufemia/src/components/upload/Upload.tsx
index 549535d7ea6..719bf9491fb 100644
--- a/packages/dnb-eufemia/src/components/upload/Upload.tsx
+++ b/packages/dnb-eufemia/src/components/upload/Upload.tsx
@@ -11,7 +11,7 @@ import HeightAnimation from '../height-animation/HeightAnimation'
 
 // Shared
 import { createSpacingClasses } from '../space/SpacingHelper'
-import { createSkeletonClass } from '../skeleton/SkeletonHelper'
+import Skeleton from '../skeleton/Skeleton'
 import Context from '../../shared/Context'
 import { extendPropsWithContext } from '../../shared/component-helper'
 import { format } from '../number-format/NumberUtils'
@@ -58,7 +58,6 @@ const Upload = (localProps: UploadProps & SpacingProps & LocaleProps) => {
     ...props
   } = extendedProps
 
-  const skeletonClasses = createSkeletonClass('shape', skeleton, context)
   const spacingClasses = createSpacingClasses(props)
 
   const { files, setFiles } = useUpload(id)
@@ -71,87 +70,84 @@ const Upload = (localProps: UploadProps & SpacingProps & LocaleProps) => {
     <HeightAnimation
       open
       data-testid="upload"
-      className={classnames(
-        'dnb-upload',
-        skeletonClasses,
-        spacingClasses,
-        className
-      )}
+      className={classnames('dnb-upload', spacingClasses, className)}
       {...props}
     >
-      <Lead data-testid="upload-title" space="0">
-        {title}
-      </Lead>
-
-      <P
-        data-testid="upload-text"
-        top="xx-small"
-        className="dnb-upload__text"
-      >
-        {text}
-      </P>
-
-      <Dl
-        top="medium" // "small xx-small" (20px) is still not officially supported
-        bottom={0}
-        direction="horizontal"
-        className="dnb-upload__condition-list"
-      >
-        <Dl.Item>
-          <Dt
-            data-testid="upload-accepted-formats-description"
-            className="dnb-upload__condition-list__label"
-          >
-            {formatsDescription}
-          </Dt>
-          <Dd data-testid="upload-accepted-formats">
-            {prettyfiedAcceptedFileFormats}
-          </Dd>
-        </Dl.Item>
-
-        <Dl.Item>
-          <Dt
-            data-testid="upload-file-size-description"
-            className="dnb-upload__condition-list__label"
-          >
-            {fileSizeDescription}
-          </Dt>
-          <Dd data-testid="upload-file-size">
-            {String(fileSizeContent).replace(
-              '%size',
-              format(fileMaxSize).toString()
-            )}
-          </Dd>
-        </Dl.Item>
-      </Dl>
-
-      <UploadFileInput
-        id={id}
-        acceptedFormats={acceptedFileTypes}
-        onUpload={onInputUpload}
-        fileMaxSize={fileMaxSize}
-        uploadFileButtonText={uploadButtonText}
-        uploadErrorLargeFile={uploadErrorLargeFile}
-        multipleFiles={multipleFiles}
-      />
-
-      <UploadFileList />
-
-      <svg
-        className="dnb-upload__outline"
-        aria-hidden
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-      >
-        <rect
-          width="100%"
-          height="100%"
-          rx="0.25rem"
-          ry="0.25rem"
-          strokeWidth="2.5"
-          strokeDasharray="7 7"
+      <Skeleton show={skeleton}>
+        <Lead data-testid="upload-title" space="0">
+          {title}
+        </Lead>
+
+        <P
+          data-testid="upload-text"
+          top="xx-small"
+          className="dnb-upload__text"
+        >
+          {text}
+        </P>
+
+        <Dl
+          top="medium" // "small xx-small" (20px) is still not officially supported
+          bottom={0}
+          direction="horizontal"
+          className="dnb-upload__condition-list"
+        >
+          <Dl.Item>
+            <Dt
+              data-testid="upload-accepted-formats-description"
+              className="dnb-upload__condition-list__label"
+            >
+              {formatsDescription}
+            </Dt>
+            <Dd data-testid="upload-accepted-formats">
+              {prettyfiedAcceptedFileFormats}
+            </Dd>
+          </Dl.Item>
+
+          <Dl.Item>
+            <Dt
+              data-testid="upload-file-size-description"
+              className="dnb-upload__condition-list__label"
+            >
+              {fileSizeDescription}
+            </Dt>
+            <Dd data-testid="upload-file-size">
+              {String(fileSizeContent).replace(
+                '%size',
+                format(fileMaxSize).toString()
+              )}
+            </Dd>
+          </Dl.Item>
+        </Dl>
+
+        <UploadFileInput
+          id={id}
+          acceptedFormats={acceptedFileTypes}
+          onUpload={onInputUpload}
+          fileMaxSize={fileMaxSize}
+          uploadFileButtonText={uploadButtonText}
+          uploadErrorLargeFile={uploadErrorLargeFile}
+          multipleFiles={multipleFiles}
         />
-      </svg>
+
+        <UploadFileList />
+
+        <svg
+          className="dnb-upload__outline"
+          aria-hidden
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+        >
+          <rect
+            width="100%"
+            height="100%"
+            rx="0.25rem"
+            ry="0.25rem"
+            strokeWidth="2.5"
+            strokeDasharray="7 7"
+          />
+        </svg>
+      </Skeleton>
     </HeightAnimation>
   )