@flipdish/portal-library 5.6.0 → 5.7.0
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/dist/components/molecules/ProgressStepper/index.cjs.js +2 -0
- package/dist/components/molecules/ProgressStepper/index.cjs.js.map +1 -0
- package/dist/components/molecules/ProgressStepper/index.d.ts +13 -0
- package/dist/components/molecules/ProgressStepper/index.js +2 -0
- package/dist/components/molecules/ProgressStepper/index.js.map +1 -0
- package/package.json +4 -4
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material/Box"),t=require("../../atoms/Button/index.cjs.js"),s=require("@mui/material/Grid2"),i=require("../../atoms/LinearProgress/index.cjs.js"),a=require("@mui/material/Typography"),o=require("../../../icons/ArrowLeft02/index.cjs.js");const n=require("@mui/material/styles").styled(t.Button)((({theme:e})=>({textDecoration:"none",padding:0,maxWidth:"none",height:"24px",[e.breakpoints.up("tablet")]:{maxWidth:"unset"}})));module.exports=({step:t,totalSteps:p,backButtonProps:d,title:l})=>e.jsxs(s,{"data-testid":"progress-stepper-container",mt:3,children:[e.jsx(r,{mb:2,children:d&&e.jsxs(n,{"data-testid":"progress-stepper-back-button",disabled:d.disabled,fdKey:"progress-stepper-back-button",onClick:d.onClick,variant:"tertiary",children:[e.jsx(o,{}),d.label]})}),e.jsx(r,{mb:1,children:e.jsx(a,{"data-testid":"progress-stepper-title",variant:"b1Strong",children:l||`Step ${t} of ${p}`})}),e.jsx(r,{"data-testid":"progress-stepper-bars",sx:{display:"flex",gap:.5},children:Array.from({length:p},((e,r)=>r+1)).map((s=>e.jsx(r,{sx:{width:"100%"},children:e.jsx(i.LinearProgress,{color:"primary",value:s<=t?100:0,variant:"determinate"},`${s}-progress-stepper`)},`${s}-progress-stepper-box`)))})]});
|
|
2
|
+
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/ProgressStepper/index.tsx"],"sourcesContent":["import Box from '@fd/components/atoms/Box';\nimport Button from '@fd/components/atoms/Button';\nimport Grid from '@fd/components/atoms/Grid';\nimport LinearProgress from '@fd/components/atoms/LinearProgress';\nimport Typography from '@fd/components/atoms/Typography';\nimport ArrowLeft02 from '@fd/icons/ArrowLeft02';\nimport styled from '@fd/utilities/styledUtilities';\n\ninterface IProgressStepper {\n step: number;\n totalSteps: number;\n backButtonProps?: {\n disabled?: boolean;\n onClick: () => void;\n label: string;\n };\n title?: string;\n}\n\nconst BackButton = styled(Button)(({ theme }) => ({\n textDecoration: 'none',\n padding: 0,\n maxWidth: 'none',\n height: '24px',\n [theme.breakpoints.up('tablet')]: {\n maxWidth: 'unset',\n },\n}));\n\nconst ProgressStepper: React.FC<IProgressStepper> = ({\n step,\n totalSteps,\n backButtonProps,\n title,\n}) => {\n return (\n <Grid data-testid=\"progress-stepper-container\" mt={3}>\n <Box mb={2}>\n {backButtonProps && (\n <BackButton\n data-testid=\"progress-stepper-back-button\"\n disabled={backButtonProps.disabled}\n fdKey=\"progress-stepper-back-button\"\n onClick={backButtonProps.onClick}\n variant=\"tertiary\"\n >\n <ArrowLeft02 />\n {backButtonProps.label}\n </BackButton>\n )}\n </Box>\n <Box mb={1}>\n <Typography data-testid=\"progress-stepper-title\" variant=\"b1Strong\">\n {title || `Step ${step} of ${totalSteps}`}\n </Typography>\n </Box>\n <Box data-testid=\"progress-stepper-bars\" sx={{ display: 'flex', gap: 0.5 }}>\n {Array.from({ length: totalSteps }, (_, index) => index + 1).map((stepNumber) => (\n <Box key={`${stepNumber}-progress-stepper-box`} sx={{ width: '100%' }}>\n <LinearProgress\n key={`${stepNumber}-progress-stepper`}\n color=\"primary\"\n value={stepNumber <= step ? 100 : 0}\n variant=\"determinate\"\n />\n </Box>\n ))}\n </Box>\n </Grid>\n );\n};\n\nexport default ProgressStepper;\n"],"names":["BackButton","styled","Button","theme","textDecoration","padding","maxWidth","height","breakpoints","up","step","totalSteps","backButtonProps","title","_jsxs","Grid","mt","children","_jsx","Box","mb","disabled","fdKey","onClick","variant","ArrowLeft02","label","Typography","sx","display","gap","Array","from","length","_","index","map","stepNumber","width","LinearProgress","color","value"],"mappings":"6SAmBA,MAAMA,kCAAaC,OAAOC,EAAAA,OAAPD,EAAe,EAAGE,YAAO,CAC1CC,eAAgB,OAChBC,QAAS,EACTC,SAAU,OACVC,OAAQ,OACR,CAACJ,EAAMK,YAAYC,GAAG,WAAY,CAChCH,SAAU,4BAIsC,EAClDI,OACAC,aACAC,kBACAC,WAGEC,EAAAA,KAACC,iBAAiB,6BAA6BC,GAAI,EAACC,SAAA,CAClDC,EAAAA,IAACC,EAAG,CAACC,GAAI,EAACH,SACPL,GACCE,EAAAA,KAACd,iBACa,+BACZqB,SAAUT,EAAgBS,SAC1BC,MAAM,+BACNC,QAASX,EAAgBW,QACzBC,QAAQ,WAAUP,SAAA,CAElBC,EAAAA,IAACO,EAAW,CAAA,GACXb,EAAgBc,WAIvBR,EAAAA,IAACC,EAAG,CAACC,GAAI,EAACH,SACRC,EAAAA,IAACS,EAAU,CAAA,cAAa,yBAAyBH,QAAQ,oBACtDX,GAAS,QAAQH,QAAWC,QAGjCO,MAACC,EAAG,CAAA,cAAa,wBAAwBS,GAAI,CAAEC,QAAS,OAAQC,IAAK,IAAKb,SACvEc,MAAMC,KAAK,CAAEC,OAAQtB,IAAc,CAACuB,EAAGC,IAAUA,EAAQ,IAAGC,KAAKC,GAChEnB,EAAAA,IAACC,EAAG,CAA4CS,GAAI,CAAEU,MAAO,QAAQrB,SACnEC,EAAAA,IAACqB,EAAAA,eAAc,CAEbC,MAAM,UACNC,MAAOJ,GAAc3B,EAAO,IAAM,EAClCc,QAAQ,eAHH,GAAGa,uBAFF,GAAGA"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
interface IProgressStepper {
|
|
2
|
+
step: number;
|
|
3
|
+
totalSteps: number;
|
|
4
|
+
backButtonProps?: {
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
onClick: () => void;
|
|
7
|
+
label: string;
|
|
8
|
+
};
|
|
9
|
+
title?: string;
|
|
10
|
+
}
|
|
11
|
+
declare const ProgressStepper: React.FC<IProgressStepper>;
|
|
12
|
+
|
|
13
|
+
export { ProgressStepper as default };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsxs as t,jsx as r}from"react/jsx-runtime";import e from"@mui/material/Box";import{Button as i}from"../../atoms/Button/index.js";import a from"@mui/material/Grid2";import{LinearProgress as o}from"../../atoms/LinearProgress/index.js";import s from"@mui/material/Typography";import p from"../../../icons/ArrowLeft02/index.js";import{styled as m}from"@mui/material/styles";const n=m(i)((({theme:t})=>({textDecoration:"none",padding:0,maxWidth:"none",height:"24px",[t.breakpoints.up("tablet")]:{maxWidth:"unset"}}))),d=({step:i,totalSteps:m,backButtonProps:d,title:l})=>t(a,{"data-testid":"progress-stepper-container",mt:3,children:[r(e,{mb:2,children:d&&t(n,{"data-testid":"progress-stepper-back-button",disabled:d.disabled,fdKey:"progress-stepper-back-button",onClick:d.onClick,variant:"tertiary",children:[r(p,{}),d.label]})}),r(e,{mb:1,children:r(s,{"data-testid":"progress-stepper-title",variant:"b1Strong",children:l||`Step ${i} of ${m}`})}),r(e,{"data-testid":"progress-stepper-bars",sx:{display:"flex",gap:.5},children:Array.from({length:m},((t,r)=>r+1)).map((t=>r(e,{sx:{width:"100%"},children:r(o,{color:"primary",value:t<=i?100:0,variant:"determinate"},`${t}-progress-stepper`)},`${t}-progress-stepper-box`)))})]});export{d as default};
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/ProgressStepper/index.tsx"],"sourcesContent":["import Box from '@fd/components/atoms/Box';\nimport Button from '@fd/components/atoms/Button';\nimport Grid from '@fd/components/atoms/Grid';\nimport LinearProgress from '@fd/components/atoms/LinearProgress';\nimport Typography from '@fd/components/atoms/Typography';\nimport ArrowLeft02 from '@fd/icons/ArrowLeft02';\nimport styled from '@fd/utilities/styledUtilities';\n\ninterface IProgressStepper {\n step: number;\n totalSteps: number;\n backButtonProps?: {\n disabled?: boolean;\n onClick: () => void;\n label: string;\n };\n title?: string;\n}\n\nconst BackButton = styled(Button)(({ theme }) => ({\n textDecoration: 'none',\n padding: 0,\n maxWidth: 'none',\n height: '24px',\n [theme.breakpoints.up('tablet')]: {\n maxWidth: 'unset',\n },\n}));\n\nconst ProgressStepper: React.FC<IProgressStepper> = ({\n step,\n totalSteps,\n backButtonProps,\n title,\n}) => {\n return (\n <Grid data-testid=\"progress-stepper-container\" mt={3}>\n <Box mb={2}>\n {backButtonProps && (\n <BackButton\n data-testid=\"progress-stepper-back-button\"\n disabled={backButtonProps.disabled}\n fdKey=\"progress-stepper-back-button\"\n onClick={backButtonProps.onClick}\n variant=\"tertiary\"\n >\n <ArrowLeft02 />\n {backButtonProps.label}\n </BackButton>\n )}\n </Box>\n <Box mb={1}>\n <Typography data-testid=\"progress-stepper-title\" variant=\"b1Strong\">\n {title || `Step ${step} of ${totalSteps}`}\n </Typography>\n </Box>\n <Box data-testid=\"progress-stepper-bars\" sx={{ display: 'flex', gap: 0.5 }}>\n {Array.from({ length: totalSteps }, (_, index) => index + 1).map((stepNumber) => (\n <Box key={`${stepNumber}-progress-stepper-box`} sx={{ width: '100%' }}>\n <LinearProgress\n key={`${stepNumber}-progress-stepper`}\n color=\"primary\"\n value={stepNumber <= step ? 100 : 0}\n variant=\"determinate\"\n />\n </Box>\n ))}\n </Box>\n </Grid>\n );\n};\n\nexport default ProgressStepper;\n"],"names":["BackButton","styled","Button","theme","textDecoration","padding","maxWidth","height","breakpoints","up","ProgressStepper","step","totalSteps","backButtonProps","title","_jsxs","Grid","mt","children","_jsx","Box","mb","disabled","fdKey","onClick","variant","ArrowLeft02","label","Typography","sx","display","gap","Array","from","length","_","index","map","stepNumber","width","LinearProgress","color","value"],"mappings":"yXAmBA,MAAMA,EAAaC,EAAOC,EAAPD,EAAe,EAAGE,YAAO,CAC1CC,eAAgB,OAChBC,QAAS,EACTC,SAAU,OACVC,OAAQ,OACR,CAACJ,EAAMK,YAAYC,GAAG,WAAY,CAChCH,SAAU,aAIRI,EAA8C,EAClDC,OACAC,aACAC,kBACAC,WAGEC,EAACC,iBAAiB,6BAA6BC,GAAI,EAACC,SAAA,CAClDC,EAACC,EAAG,CAACC,GAAI,EAACH,SACPL,GACCE,EAACf,iBACa,+BACZsB,SAAUT,EAAgBS,SAC1BC,MAAM,+BACNC,QAASX,EAAgBW,QACzBC,QAAQ,WAAUP,SAAA,CAElBC,EAACO,EAAW,CAAA,GACXb,EAAgBc,WAIvBR,EAACC,EAAG,CAACC,GAAI,EAACH,SACRC,EAACS,EAAU,CAAA,cAAa,yBAAyBH,QAAQ,oBACtDX,GAAS,QAAQH,QAAWC,QAGjCO,EAACC,EAAG,CAAA,cAAa,wBAAwBS,GAAI,CAAEC,QAAS,OAAQC,IAAK,IAAKb,SACvEc,MAAMC,KAAK,CAAEC,OAAQtB,IAAc,CAACuB,EAAGC,IAAUA,EAAQ,IAAGC,KAAKC,GAChEnB,EAACC,EAAG,CAA4CS,GAAI,CAAEU,MAAO,QAAQrB,SACnEC,EAACqB,EAAc,CAEbC,MAAM,UACNC,MAAOJ,GAAc3B,EAAO,IAAM,EAClCc,QAAQ,eAHH,GAAGa,uBAFF,GAAGA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flipdish/portal-library",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.7.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
@@ -80,10 +80,10 @@
|
|
|
80
80
|
"@storybook/test": "^8.6.7",
|
|
81
81
|
"@svgr/rollup": "^8.1.0",
|
|
82
82
|
"@tanstack/react-query": "^5.62.0",
|
|
83
|
-
"@testing-library/jest-dom": "6.
|
|
83
|
+
"@testing-library/jest-dom": "6.9.1",
|
|
84
84
|
"@testing-library/react": "15.0.7",
|
|
85
85
|
"@types/lodash.debounce": "^4.0.9",
|
|
86
|
-
"@types/react": "18.3.
|
|
86
|
+
"@types/react": "18.3.25",
|
|
87
87
|
"@types/react-dom": "18.3.7",
|
|
88
88
|
"@types/react-imgix": "^9.5.4",
|
|
89
89
|
"@typescript-eslint/eslint-plugin": "7.18.0",
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
"eslint-plugin-prettier": "^5.1.3",
|
|
102
102
|
"eslint-plugin-react": "^7.37.4",
|
|
103
103
|
"eslint-plugin-react-hooks": "4.6.2",
|
|
104
|
-
"eslint-plugin-react-refresh": "0.4.
|
|
104
|
+
"eslint-plugin-react-refresh": "0.4.23",
|
|
105
105
|
"eslint-plugin-simple-import-sort": "^12.0.0",
|
|
106
106
|
"eslint-plugin-storybook": "^0.12.0",
|
|
107
107
|
"eslint-plugin-testing-library": "^7.1.1",
|