@fremtind/jokul 0.56.4 → 0.57.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/build-stats.html +1 -1
- package/build/cjs/components/file-input/File.cjs +1 -1
- package/build/cjs/components/file-input/File.cjs.map +1 -1
- package/build/cjs/components/file-input/File.d.cts +4 -5
- package/build/cjs/components/file-input/stories/File.stories.d.cts +1 -1
- package/build/es/components/file-input/File.d.ts +4 -5
- package/build/es/components/file-input/File.js +1 -1
- package/build/es/components/file-input/File.js.map +1 -1
- package/build/es/components/file-input/stories/File.stories.d.ts +1 -1
- package/build/style.css +1 -1
- package/package.json +2 -2
- package/styles/components/button/button.css +2 -2
- package/styles/components/button/button.min.css +1 -1
- package/styles/components/checkbox/checkbox.css +7 -6
- package/styles/components/checkbox/checkbox.min.css +1 -1
- package/styles/components/checkbox/checkbox.scss +5 -3
- package/styles/components/checkbox-panel/checkbox-panel.css +2 -2
- package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
- package/styles/components/countdown/countdown.css +2 -2
- package/styles/components/countdown/countdown.min.css +1 -1
- package/styles/components/feedback/feedback.css +2 -2
- package/styles/components/feedback/feedback.min.css +1 -1
- package/styles/components/file-input/_index.scss +4 -0
- package/styles/components/input-group/input-group.css +2 -2
- package/styles/components/input-group/input-group.min.css +1 -1
- package/styles/components/loader/loader.css +6 -6
- package/styles/components/loader/loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.css +5 -5
- package/styles/components/loader/skeleton-loader.min.css +1 -1
- package/styles/components/message/message.css +2 -2
- package/styles/components/message/message.min.css +1 -1
- package/styles/components/progress-bar/progress-bar.css +1 -1
- package/styles/components/progress-bar/progress-bar.min.css +1 -1
- package/styles/components/radio-button/radio-button.css +4 -3
- package/styles/components/radio-button/radio-button.min.css +1 -1
- package/styles/components/radio-button/radio-button.scss +4 -2
- package/styles/components/radio-panel/radio-panel.css +2 -2
- package/styles/components/radio-panel/radio-panel.min.css +1 -1
- package/styles/components/system-message/system-message.css +2 -2
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/toast/toast.css +4 -4
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/styles.css +43 -41
- package/styles/styles.min.css +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../clsx-E3yX_9sL.cjs");require("../icon/Icon.cjs"),require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs"),require("../icon/icons/CalendarIcon.cjs"),require("../icon/icons/CheckIcon.cjs"),require("../icon/icons/ChevronDownIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs"),require("../icon/icons/ChevronRightIcon.cjs"),require("../icon/icons/ChevronUpIcon.cjs"),require("../icon/icons/CloseIcon.cjs"),require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs"),require("../icon/icons/InfoIcon.cjs"),require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/OpenInNewIcon.cjs"),require("../icon/icons/PenIcon.cjs"),require("../icon/icons/PlusIcon.cjs"),require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs");const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../clsx-E3yX_9sL.cjs"),i=require("react");require("../icon/Icon.cjs"),require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs"),require("../icon/icons/CalendarIcon.cjs"),require("../icon/icons/CheckIcon.cjs"),require("../icon/icons/ChevronDownIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs"),require("../icon/icons/ChevronRightIcon.cjs"),require("../icon/icons/ChevronUpIcon.cjs"),require("../icon/icons/CloseIcon.cjs"),require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs"),require("../icon/icons/InfoIcon.cjs"),require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/OpenInNewIcon.cjs"),require("../icon/icons/PenIcon.cjs"),require("../icon/icons/PlusIcon.cjs"),require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs");const n=require("../icon/icons/SuccessIcon.cjs");require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs");const r=require("../icon/icons/TrashCanIcon.cjs");require("../icon/icons/WarningIcon.cjs");const o=require("../icon-button/IconButton.cjs"),s=require("../input-group/SupportLabel.cjs"),l=require("../../utilities/formatters/bytes/formatBytes.cjs"),t=require("./internal/fileInputContext.cjs"),u=require("./internal/Thumbnail.cjs");exports.File=a=>{const{children:j,fileName:q,fileType:p,fileSize:I,path:d,file:h,supportLabel:m,supportLabelType:f,state:b,onRemove:x}=a,_=`jkl-file-preview-${i.useId()}`,k=_+"-support",w=t.useFileInputContext(),C=d?"a":"div",v="error"===f||"warning"===f,g="success"===f,y=e.jsxs("div",{id:_,className:"jkl-file",children:[e.jsxs(C,{className:c.clsx("jkl-file__content",{"jkl-file__content--error":"error"===f,"jkl-file__content--warning":"warning"===f}),href:d,target:d?"_blank":void 0,children:[e.jsx(u.Thumbnail,{fileName:q,fileType:p,file:h,path:d,state:b,children:j}),e.jsxs("div",{children:[e.jsx("p",{className:"jkl-file__name",children:q}),e.jsxs("p",{className:"jkl-file__description",children:[e.jsx("span",{children:l.formatBytes(I)}),v||g?g?e.jsx(n.SuccessIcon,{variant:"small","aria-label":"Filen ble lastet opp uten feil"}):null:e.jsx(s.SupportLabel,{className:"jkl-file__support-label jkl-body",id:k,label:m,labelType:f})]}),m&&v&&e.jsx(s.SupportLabel,{className:"jkl-file__support-label",id:k,label:m,labelType:f})]})]}),x&&e.jsx(o.IconButton,{className:"jkl-file__delete",onClick:x,title:`Fjern ${q}`,children:e.jsx(r.TrashCanIcon,{})})]});return w?e.jsx("li",{children:y}):y};
|
|
2
2
|
//# sourceMappingURL=File.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"File.cjs","sources":["../../../../src/components/file-input/File.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { FC
|
|
1
|
+
{"version":3,"file":"File.cjs","sources":["../../../../src/components/file-input/File.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type ComponentProps,\n type FC,\n type MouseEvent,\n useId,\n} from \"react\";\nimport { TrashCanIcon, SuccessIcon } from \"../../components/icon/index.js\";\nimport { IconButton } from \"../../components/icon-button/IconButton.js\";\nimport { SupportLabel } from \"../../components/input-group/SupportLabel.js\";\nimport { formatBytes } from \"../../utilities/formatters/bytes/formatBytes.js\";\nimport { useFileInputContext } from \"./internal/fileInputContext.js\";\nimport { Thumbnail } from \"./internal/Thumbnail.js\";\nimport type { FileInputFileState } from \"./types.js\";\n\nexport type FileProps = {\n fileName: string;\n fileType: string;\n fileSize: number;\n path?: string;\n file?: File;\n supportLabel?: string;\n supportLabelType?: \"help\" | \"error\" | \"warning\" | \"success\";\n state?: FileInputFileState;\n onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n};\n\nexport const File: FC<FileProps & ComponentProps<\"div\">> = (props) => {\n const {\n children,\n fileName,\n fileType,\n fileSize,\n path,\n file,\n supportLabel,\n supportLabelType,\n state,\n onRemove,\n } = props;\n\n const id = `jkl-file-preview-${useId()}`;\n const supportId = id + \"-support\";\n\n const context = useFileInputContext();\n\n const Component = path ? \"a\" : \"div\";\n\n const hasErrorOrWarning =\n supportLabelType === \"error\" || supportLabelType === \"warning\";\n const hasSuccess = supportLabelType === \"success\";\n\n const renderFeedbackElement = () => {\n if (!hasErrorOrWarning && !hasSuccess) {\n return (\n <SupportLabel\n className=\"jkl-file__support-label jkl-body\"\n id={supportId}\n label={supportLabel}\n labelType={supportLabelType}\n />\n );\n }\n\n if (hasSuccess)\n return (\n <SuccessIcon\n variant=\"small\"\n aria-label=\"Filen ble lastet opp uten feil\"\n />\n );\n\n return null;\n };\n\n const fileComponent = (\n <div id={id} className=\"jkl-file\">\n <Component\n className={clsx(\"jkl-file__content\", {\n \"jkl-file__content--error\": supportLabelType === \"error\",\n \"jkl-file__content--warning\":\n supportLabelType === \"warning\",\n })}\n href={path}\n target={path ? \"_blank\" : undefined}\n >\n <Thumbnail\n fileName={fileName}\n fileType={fileType}\n file={file}\n path={path}\n state={state}\n >\n {children}\n </Thumbnail>\n <div>\n <p className=\"jkl-file__name\">{fileName}</p>\n <p className=\"jkl-file__description\">\n <span>{formatBytes(fileSize)}</span>\n {renderFeedbackElement()}\n </p>\n {supportLabel && hasErrorOrWarning && (\n <SupportLabel\n className=\"jkl-file__support-label\"\n id={supportId}\n label={supportLabel}\n labelType={supportLabelType}\n />\n )}\n </div>\n </Component>\n {onRemove && (\n <IconButton\n className=\"jkl-file__delete\"\n onClick={onRemove}\n title={`Fjern ${fileName}`}\n >\n <TrashCanIcon />\n </IconButton>\n )}\n </div>\n );\n\n return context ? <li>{fileComponent}</li> : fileComponent;\n};\n"],"names":["props","children","fileName","fileType","fileSize","path","file","supportLabel","supportLabelType","state","onRemove","id","useId","supportId","context","useFileInputContext","Component","hasErrorOrWarning","hasSuccess","fileComponent","jsxs","className","clsx","href","target","jsx","Thumbnail","formatBytes","SuccessIcon","variant","SupportLabel","label","labelType","IconButton","onClick","title","TrashCanIcon"],"mappings":"s7DA2B4DA,IAClD,MACFC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,KAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,MAAAA,EACAC,SAAAA,GACAV,EAEEW,EAAK,oBAAoBC,EAAAA,UACzBC,EAAYF,EAAK,WAEjBG,EAAUC,EAAAA,sBAEVC,EAAYX,EAAO,IAAM,MAEzBY,EACmB,UAArBT,GAAqD,YAArBA,EAC9BU,EAAkC,YAArBV,EAyBbW,EACFC,EAAAA,KAAC,MAAI,CAAAT,GAAAA,EAAQU,UAAU,WACnBpB,SAAA,CAAAmB,EAAAA,KAACJ,EAAA,CACGK,UAAWC,OAAK,oBAAqB,CACjC,2BAAiD,UAArBd,EAC5B,6BACyB,YAArBA,IAERe,KAAMlB,EACNmB,OAAQnB,EAAO,cAAW,EAE1BJ,SAAA,CAAAwB,EAAAA,IAACC,EAAAA,UAAA,CACGxB,SAAAA,EACAC,SAAAA,EACAG,KAAAA,EACAD,KAAAA,EACAI,MAAAA,EAECR,SAAAA,WAEJ,MACG,CAAAA,SAAA,CAACwB,EAAAA,IAAA,IAAA,CAAEJ,UAAU,iBAAkBpB,SAASC,IACxCkB,EAAAA,KAAC,IAAE,CAAAC,UAAU,wBACTpB,SAAA,CAACwB,EAAAA,IAAA,OAAA,CAAMxB,SAAY0B,EAAAA,YAAAvB,KA7C9Ba,GAAsBC,EAWvBA,EAEIO,EAAAA,IAACG,EAAAA,YAAA,CACGC,QAAQ,QACR,aAAW,mCAIhB,KAjBCJ,EAAAA,IAACK,EAAAA,aAAA,CACGT,UAAU,mCACVV,GAAIE,EACJkB,MAAOxB,EACPyB,UAAWxB,OA0CVD,GAAgBU,GACbQ,EAAAA,IAACK,EAAAA,aAAA,CACGT,UAAU,0BACVV,GAAIE,EACJkB,MAAOxB,EACPyB,UAAWxB,UAK1BE,GACGe,EAAAA,IAACQ,EAAAA,WAAA,CACGZ,UAAU,mBACVa,QAASxB,EACTyB,MAAO,SAASjC,IAEhBD,eAACmC,EAAaA,aAAA,SAM9B,OAAOtB,EAAUW,EAAAA,IAAC,KAAI,CAAAxB,SAAAkB,IAAsBA"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { FC, MouseEvent } from 'react';
|
|
2
|
-
import { WithOptionalChildren } from '../../core/types.cjs';
|
|
1
|
+
import { ComponentProps, FC, MouseEvent } from 'react';
|
|
3
2
|
import { FileInputFileState } from './types.cjs';
|
|
4
|
-
export
|
|
3
|
+
export type FileProps = {
|
|
5
4
|
fileName: string;
|
|
6
5
|
fileType: string;
|
|
7
6
|
fileSize: number;
|
|
@@ -11,5 +10,5 @@ export interface FileProps extends WithOptionalChildren {
|
|
|
11
10
|
supportLabelType?: "help" | "error" | "warning" | "success";
|
|
12
11
|
state?: FileInputFileState;
|
|
13
12
|
onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
14
|
-
}
|
|
15
|
-
export declare const File: FC<FileProps
|
|
13
|
+
};
|
|
14
|
+
export declare const File: FC<FileProps & ComponentProps<"div">>;
|
|
@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
|
|
|
2
2
|
import { default as React } from 'react';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: React.FC<import('../File.js').FileProps
|
|
5
|
+
component: React.FC<import('../File.js').FileProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
|
|
6
6
|
parameters: {
|
|
7
7
|
layout: string;
|
|
8
8
|
};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { FC, MouseEvent } from 'react';
|
|
2
|
-
import { WithOptionalChildren } from '../../core/types.js';
|
|
1
|
+
import { ComponentProps, FC, MouseEvent } from 'react';
|
|
3
2
|
import { FileInputFileState } from './types.js';
|
|
4
|
-
export
|
|
3
|
+
export type FileProps = {
|
|
5
4
|
fileName: string;
|
|
6
5
|
fileType: string;
|
|
7
6
|
fileSize: number;
|
|
@@ -11,5 +10,5 @@ export interface FileProps extends WithOptionalChildren {
|
|
|
11
10
|
supportLabelType?: "help" | "error" | "warning" | "success";
|
|
12
11
|
state?: FileInputFileState;
|
|
13
12
|
onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
14
|
-
}
|
|
15
|
-
export declare const File: FC<FileProps
|
|
13
|
+
};
|
|
14
|
+
export declare const File: FC<FileProps & ComponentProps<"div">>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as o,jsx as i}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/OpenInNewIcon.js";import"../icon/icons/PenIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import{SuccessIcon as s}from"../icon/icons/SuccessIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import{TrashCanIcon as
|
|
1
|
+
import{jsxs as o,jsx as i}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import{useId as c}from"react";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/OpenInNewIcon.js";import"../icon/icons/PenIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import{SuccessIcon as s}from"../icon/icons/SuccessIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import{TrashCanIcon as r}from"../icon/icons/TrashCanIcon.js";import"../icon/icons/WarningIcon.js";import{IconButton as e}from"../icon-button/IconButton.js";import{SupportLabel as t}from"../input-group/SupportLabel.js";import{formatBytes as l}from"../../utilities/formatters/bytes/formatBytes.js";import{useFileInputContext as a}from"./internal/fileInputContext.js";import{Thumbnail as m}from"./internal/Thumbnail.js";const p=p=>{const{children:j,fileName:I,fileType:f,fileSize:u,path:d,file:h,supportLabel:b,supportLabelType:_,state:k,onRemove:w}=p,C=`jkl-file-preview-${c()}`,v=C+"-support",N=a(),T="error"===_||"warning"===_,g="success"===_,y=o("div",{id:C,className:"jkl-file",children:[o(d?"a":"div",{className:n("jkl-file__content",{"jkl-file__content--error":"error"===_,"jkl-file__content--warning":"warning"===_}),href:d,target:d?"_blank":void 0,children:[i(m,{fileName:I,fileType:f,file:h,path:d,state:k,children:j}),o("div",{children:[i("p",{className:"jkl-file__name",children:I}),o("p",{className:"jkl-file__description",children:[i("span",{children:l(u)}),T||g?g?i(s,{variant:"small","aria-label":"Filen ble lastet opp uten feil"}):null:i(t,{className:"jkl-file__support-label jkl-body",id:v,label:b,labelType:_})]}),b&&T&&i(t,{className:"jkl-file__support-label",id:v,label:b,labelType:_})]})]}),w&&i(e,{className:"jkl-file__delete",onClick:w,title:`Fjern ${I}`,children:i(r,{})})]});return N?i("li",{children:y}):y};export{p as File};
|
|
2
2
|
//# sourceMappingURL=File.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"File.js","sources":["../../../../src/components/file-input/File.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { FC
|
|
1
|
+
{"version":3,"file":"File.js","sources":["../../../../src/components/file-input/File.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type ComponentProps,\n type FC,\n type MouseEvent,\n useId,\n} from \"react\";\nimport { TrashCanIcon, SuccessIcon } from \"../../components/icon/index.js\";\nimport { IconButton } from \"../../components/icon-button/IconButton.js\";\nimport { SupportLabel } from \"../../components/input-group/SupportLabel.js\";\nimport { formatBytes } from \"../../utilities/formatters/bytes/formatBytes.js\";\nimport { useFileInputContext } from \"./internal/fileInputContext.js\";\nimport { Thumbnail } from \"./internal/Thumbnail.js\";\nimport type { FileInputFileState } from \"./types.js\";\n\nexport type FileProps = {\n fileName: string;\n fileType: string;\n fileSize: number;\n path?: string;\n file?: File;\n supportLabel?: string;\n supportLabelType?: \"help\" | \"error\" | \"warning\" | \"success\";\n state?: FileInputFileState;\n onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n};\n\nexport const File: FC<FileProps & ComponentProps<\"div\">> = (props) => {\n const {\n children,\n fileName,\n fileType,\n fileSize,\n path,\n file,\n supportLabel,\n supportLabelType,\n state,\n onRemove,\n } = props;\n\n const id = `jkl-file-preview-${useId()}`;\n const supportId = id + \"-support\";\n\n const context = useFileInputContext();\n\n const Component = path ? \"a\" : \"div\";\n\n const hasErrorOrWarning =\n supportLabelType === \"error\" || supportLabelType === \"warning\";\n const hasSuccess = supportLabelType === \"success\";\n\n const renderFeedbackElement = () => {\n if (!hasErrorOrWarning && !hasSuccess) {\n return (\n <SupportLabel\n className=\"jkl-file__support-label jkl-body\"\n id={supportId}\n label={supportLabel}\n labelType={supportLabelType}\n />\n );\n }\n\n if (hasSuccess)\n return (\n <SuccessIcon\n variant=\"small\"\n aria-label=\"Filen ble lastet opp uten feil\"\n />\n );\n\n return null;\n };\n\n const fileComponent = (\n <div id={id} className=\"jkl-file\">\n <Component\n className={clsx(\"jkl-file__content\", {\n \"jkl-file__content--error\": supportLabelType === \"error\",\n \"jkl-file__content--warning\":\n supportLabelType === \"warning\",\n })}\n href={path}\n target={path ? \"_blank\" : undefined}\n >\n <Thumbnail\n fileName={fileName}\n fileType={fileType}\n file={file}\n path={path}\n state={state}\n >\n {children}\n </Thumbnail>\n <div>\n <p className=\"jkl-file__name\">{fileName}</p>\n <p className=\"jkl-file__description\">\n <span>{formatBytes(fileSize)}</span>\n {renderFeedbackElement()}\n </p>\n {supportLabel && hasErrorOrWarning && (\n <SupportLabel\n className=\"jkl-file__support-label\"\n id={supportId}\n label={supportLabel}\n labelType={supportLabelType}\n />\n )}\n </div>\n </Component>\n {onRemove && (\n <IconButton\n className=\"jkl-file__delete\"\n onClick={onRemove}\n title={`Fjern ${fileName}`}\n >\n <TrashCanIcon />\n </IconButton>\n )}\n </div>\n );\n\n return context ? <li>{fileComponent}</li> : fileComponent;\n};\n"],"names":["File","props","children","fileName","fileType","fileSize","path","file","supportLabel","supportLabelType","state","onRemove","id","useId","supportId","context","useFileInputContext","hasErrorOrWarning","hasSuccess","fileComponent","jsxs","className","clsx","href","target","jsx","Thumbnail","formatBytes","SuccessIcon","variant","SupportLabel","label","labelType","IconButton","onClick","title","TrashCanIcon"],"mappings":"o1DA2Ba,MAAAA,EAA+CC,IAClD,MACFC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,KAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,MAAAA,EACAC,SAAAA,GACAV,EAEEW,EAAK,oBAAoBC,MACzBC,EAAYF,EAAK,WAEjBG,EAAUC,IAIVC,EACmB,UAArBR,GAAqD,YAArBA,EAC9BS,EAAkC,YAArBT,EAyBbU,EACFC,EAAC,MAAI,CAAAR,GAAAA,EAAQS,UAAU,WACnBnB,SAAA,CAAAkB,EA/BUd,EAAO,IAAM,MA+BtB,CACGe,UAAWC,EAAK,oBAAqB,CACjC,2BAAiD,UAArBb,EAC5B,6BACyB,YAArBA,IAERc,KAAMjB,EACNkB,OAAQlB,EAAO,cAAW,EAE1BJ,SAAA,CAAAuB,EAACC,EAAA,CACGvB,SAAAA,EACAC,SAAAA,EACAG,KAAAA,EACAD,KAAAA,EACAI,MAAAA,EAECR,SAAAA,MAEJ,MACG,CAAAA,SAAA,CAACuB,EAAA,IAAA,CAAEJ,UAAU,iBAAkBnB,SAASC,IACxCiB,EAAC,IAAE,CAAAC,UAAU,wBACTnB,SAAA,CAACuB,EAAA,OAAA,CAAMvB,SAAYyB,EAAAtB,KA7C9BY,GAAsBC,EAWvBA,EAEIO,EAACG,EAAA,CACGC,QAAQ,QACR,aAAW,mCAIhB,KAjBCJ,EAACK,EAAA,CACGT,UAAU,mCACVT,GAAIE,EACJiB,MAAOvB,EACPwB,UAAWvB,OA0CVD,GAAgBS,GACbQ,EAACK,EAAA,CACGT,UAAU,0BACVT,GAAIE,EACJiB,MAAOvB,EACPwB,UAAWvB,UAK1BE,GACGc,EAACQ,EAAA,CACGZ,UAAU,mBACVa,QAASvB,EACTwB,MAAO,SAAShC,IAEhBD,WAACkC,EAAa,SAMvBrB,OAAAA,EAAUU,EAAC,KAAI,CAAAvB,SAAAiB,IAAsBA,CAAAA"}
|
|
@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
|
|
|
2
2
|
import { default as React } from 'react';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: React.FC<import('../File.js').FileProps
|
|
5
|
+
component: React.FC<import('../File.js').FileProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
|
|
6
6
|
parameters: {
|
|
7
7
|
layout: string;
|
|
8
8
|
};
|