@flipdish/portal-library 7.3.0 → 7.3.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.
Files changed (15) hide show
  1. package/dist/components/PageLayout/index.cjs.js +1 -1
  2. package/dist/components/PageLayout/index.cjs.js.map +1 -1
  3. package/dist/components/PageLayout/index.js +1 -1
  4. package/dist/components/PageLayout/index.js.map +1 -1
  5. package/dist/components/molecules/AlertGlobal/alertGlobalTokens.cjs.js +2 -0
  6. package/dist/components/molecules/AlertGlobal/alertGlobalTokens.cjs.js.map +1 -0
  7. package/dist/components/molecules/AlertGlobal/alertGlobalTokens.d.ts +38 -0
  8. package/dist/components/molecules/AlertGlobal/alertGlobalTokens.js +2 -0
  9. package/dist/components/molecules/AlertGlobal/alertGlobalTokens.js.map +1 -0
  10. package/dist/components/molecules/AlertGlobal/index.cjs.js +2 -0
  11. package/dist/components/molecules/AlertGlobal/index.cjs.js.map +1 -0
  12. package/dist/components/molecules/AlertGlobal/index.d.ts +62 -0
  13. package/dist/components/molecules/AlertGlobal/index.js +2 -0
  14. package/dist/components/molecules/AlertGlobal/index.js.map +1 -0
  15. package/package.json +1 -1
package/dist/components/PageLayout/index.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/Box"),n=require("@mui/material/Button"),a=require("@mui/material/Divider"),r=require("@mui/material/IconButton"),s=require("@mui/material/styles"),o=require("@mui/material/Typography"),d=require("@mui/material/useMediaQuery"),l=require("../../icons/Add/index.cjs.js"),c=require("../../icons/ArrowLeft02/index.cjs.js"),p=require("../../utilities/renderUtilities.cjs.js"),h=require("../../utilities/validation.cjs.js"),g=require("@mui/material/Grid2"),m=require("../FDErrorBoundary/index.cjs.js"),u=require("../Spacer/index.cjs.js"),x=require("./DocumentTitle.cjs.js"),j=require("./FullWidthContainer.cjs.js");const b=1112,f=s.styled("div")((({theme:e,fluid:t})=>({maxWidth:t?"none":b,[e.breakpoints.down("laptop")]:{maxWidth:"none"},padding:e.spacing(2,4),position:"relative",minHeight:"100vh"}))),v=s.styled(g)((({theme:e})=>({[e.breakpoints.down("laptop")]:{width:"100%",paddingTop:e.spacing(2)}}))),y=s.styled(g)((({theme:e})=>({flexWrap:"nowrap",alignItems:"flex-start",paddingTop:e.spacing(3),paddingBottom:e.spacing(3),[e.breakpoints.down("laptop")]:{paddingTop:e.spacing(2),paddingBottom:e.spacing(3)}}))),k=s.styled(g)((({theme:e})=>({paddingTop:e.spacing(2),[e.breakpoints.up("laptop")]:{width:"100%",alignItems:"center"}}))),A=s.styled(g)((()=>({flexGrow:1}))),T=s.styled("div")((({theme:e})=>({maxWidth:b,paddingBottom:e.spacing(3),[e.breakpoints.down("laptop")]:{paddingBottom:e.spacing(2),paddingLeft:e.spacing(2),paddingRight:e.spacing(2)}}))),B=s.styled(l)((({theme:e})=>({marginRight:e.spacing(1)}))),C=s.styled(r,{shouldForwardProp:e=>"hasTitleComponent"!==e})((({theme:e,hasTitleComponent:t})=>({margin:t?e.spacing(-.75,2,-1.5,-1.5):e.spacing(-1.5,2,-1.5,-1.5),[e.breakpoints.only("tablet")]:{marginLeft:e.spacing(-2)},[e.breakpoints.only("base")]:{marginLeft:e.spacing(-2)}}))),L=s.styled("div")((({theme:e})=>({maxWidth:b,marginLeft:e.spacing(6),marginRight:e.spacing(4),paddingBottom:e.spacing(2),[e.breakpoints.only("tablet")]:{marginLeft:12,marginRight:e.spacing(3)},[e.breakpoints.only("mobile")]:{marginLeft:e.spacing(3),marginRight:e.spacing(3),maxWidth:"none"},[e.breakpoints.only("base")]:{marginLeft:e.spacing(2),marginRight:e.spacing(2),maxWidth:"none"}}))),q=s.styled(g)((()=>({display:"flex",flexGrow:1,justifyContent:"flex-end"}))),w=s.styled(o)((()=>({lineHeight:"26px"}))),W=s.styled(o)((()=>({fontWeight:"bold"}))),S=s.styled(a)((({theme:e})=>({marginBottom:e.spacing(4)}))),_=({title:t})=>e.jsx(W,{component:"h2",variant:"h5",children:t}),E=s.styled("div")((({useAlternateBackground:e,theme:t})=>({backgroundColor:e?t.palette.semantic.background["background-alternate"]:t.palette.semantic.background["background-base"],width:"100%",height:"100%"})));exports.HORIZONTAL_SPACE_CLASSNAME="horizontal-content-space",exports.LEFT_HORIZONTAL_SPACE_CLASSNAME="left-horizontal-content-space",exports.PageTitle=_,exports.RIGHT_HORIZONTAL_SPACE_CLASSNAME="right-horizontal-content-space",exports.VERTICAL_SPACE_CLASSNAME="vertical-content-space",exports.default=a=>{const{actionBtnTitle:r,caption:o,children:l,contextButtons:b,documentTitle:W,fluid:I=!1,fullWidth:P,header:R,hideHeader:z,actionButtonLink:F,openLinkInNewTab:H=!1,pageHeader:N,showActionButton:M,showAddIcon:O,title:D,titleComponent:G,toPrevious:V,toParent:Z,strictToParent:$,navigate:U,hideDivider:Q=!1,customActionButtons:J,useAlternateBackground:K=!1,titleComponentAfter:X,errorBoundarySomethingWentWrongText:Y}=a,ee=s.useTheme(),te=d(ee.breakpoints.down("tablet")),ie=p.getMicroFrontendAttribute("data-portal-base-url")||"/",ne=!!F&&F.startsWith("https://"),ae=ne?F:void 0!==F?h.joinUrlPaths(ie,F):"";return e.jsx(E,{useAlternateBackground:K,children:e.jsxs(f,{fluid:I,children:[W&&e.jsx(x,{children:W}),N||null,e.jsxs(L,{children:[N&&e.jsx(u,{size:16,variant:"vertical"}),!z&&e.jsxs(e.Fragment,{children:[e.jsxs(y,{container:!0,alignItems:"center",direction:"column",children:[e.jsx(g,{container:!0,alignContent:"space-between",direction:"row",children:e.jsx(q,{children:b?.map((i=>e.jsx("div",{children:i},`context-button-${t.isValidElement(i)?i.props?.["data-testid"]||i.props?.children:"fallback"}`)))})}),e.jsxs(k,{container:!0,children:[(Z||V)&&e.jsx(i,{children:e.jsx(C,{"aria-label":"Back",component:"button","data-testid":"back_button",hasTitleComponent:!!G,onClick:()=>{V?U(-1):Z&&$||Z&&history.length<3?U(Z):U(-1)},children:e.jsx(c,{})})}),e.jsxs(A,{children:[G?e.jsx(G,{}):e.jsxs(i,{alignItems:"center",display:"flex",gap:2,children:[e.jsx(_,{title:D}),X]}),o&&e.jsx(w,{component:"h3",variant:"caption",children:o})]}),M&&e.jsxs(e.Fragment,{children:[te&&e.jsx(u,{size:56,variant:"vertical"}),e.jsx(v,{children:e.jsxs(n,{"data-testid":`Action-button-${r}`,fullWidth:!0,href:H||ne?ae:"",onClick:H||ne?()=>{}:()=>{U(F)},rel:H?"noopener noreferrer":void 0,target:H?"_blank":void 0,variant:"contained",children:[O&&e.jsx(B,{size:"sm"}),r]})})]}),J?.map((i=>e.jsxs("div",{children:[te&&e.jsx(u,{size:56,variant:"vertical"}),!te&&e.jsx(u,{size:16,variant:"vertical"}),e.jsx(v,{children:i})]},`custom-action-button-${t.isValidElement(i)?i.props?.["data-testid"]||i.props?.children:"fallback"}`)))]})]}),!Q&&e.jsx(S,{})]}),e.jsxs(j,{fullWidth:P,children:[R?e.jsx(T,{children:R}):null,e.jsx(m,{identifier:W,somethingWentWrongText:Y,children:e.jsx(e.Fragment,{children:l})})]})]})]})})},exports.maxWidth=b;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/Box"),n=require("@mui/material/Button"),a=require("@mui/material/Divider"),r=require("@mui/material/IconButton"),s=require("@mui/material/styles"),o=require("@mui/material/Typography"),l=require("@mui/material/useMediaQuery"),d=require("../../icons/Add/index.cjs.js"),c=require("../../icons/ArrowLeft02/index.cjs.js"),p=require("../../utilities/renderUtilities.cjs.js"),g=require("../../utilities/validation.cjs.js"),m=require("@mui/material/Grid2"),h=require("../FDErrorBoundary/index.cjs.js"),u=require("../Spacer/index.cjs.js"),x=require("./DocumentTitle.cjs.js"),j=require("./FullWidthContainer.cjs.js");const b=1112,f=s.styled("div")((({theme:e,fluid:t})=>({maxWidth:t?"none":b,[e.breakpoints.down("laptop")]:{maxWidth:"none"},padding:e.spacing(2,4),position:"relative",minHeight:"100vh"}))),y=s.styled(m)((({theme:e})=>({[e.breakpoints.down("laptop")]:{width:"100%",paddingTop:e.spacing(2)}}))),k=s.styled(m)((({theme:e})=>({flexWrap:"nowrap",alignItems:"flex-start",paddingTop:e.spacing(3),paddingBottom:e.spacing(3),[e.breakpoints.down("laptop")]:{paddingTop:e.spacing(2),paddingBottom:e.spacing(3)}}))),v=s.styled(m)((({theme:e})=>({paddingTop:e.spacing(2),[e.breakpoints.up("laptop")]:{width:"100%",alignItems:"center"},[e.breakpoints.only("mobile")]:{marginLeft:e.spacing(-3),marginRight:e.spacing(-3),flexDirection:"column",alignItems:"flex-start"},[e.breakpoints.only("base")]:{marginLeft:e.spacing(-2),marginRight:e.spacing(-2),flexDirection:"column",alignItems:"flex-start"}}))),A=s.styled(m)((()=>({flexGrow:1}))),T=s.styled("div")((({theme:e})=>({maxWidth:b,paddingBottom:e.spacing(3),[e.breakpoints.down("laptop")]:{paddingBottom:e.spacing(2),paddingLeft:e.spacing(2),paddingRight:e.spacing(2)}}))),L=s.styled(d)((({theme:e})=>({marginRight:e.spacing(1)}))),B=s.styled(r,{shouldForwardProp:e=>"hasTitleComponent"!==e})((({theme:e,hasTitleComponent:t})=>({margin:t?e.spacing(-.75,2,-1.5,-1.5):e.spacing(-1.5,2,-1.5,-1.5),[e.breakpoints.only("tablet")]:{marginLeft:e.spacing(-2)},[e.breakpoints.only("base")]:{marginLeft:e.spacing(-2)}}))),C=s.styled("div")((({theme:e})=>({maxWidth:b,marginLeft:e.spacing(6),marginRight:e.spacing(4),paddingBottom:e.spacing(2),[e.breakpoints.only("tablet")]:{marginLeft:12,marginRight:e.spacing(3)},[e.breakpoints.only("mobile")]:{marginLeft:e.spacing(3),marginRight:e.spacing(3),maxWidth:"none"},[e.breakpoints.only("base")]:{marginLeft:e.spacing(2),marginRight:e.spacing(2),maxWidth:"none"}}))),q=s.styled(m)((()=>({display:"flex",flexGrow:1,justifyContent:"flex-end"}))),w=s.styled(o)((()=>({lineHeight:"26px"}))),W=s.styled(o)((()=>({fontWeight:"bold"}))),I=s.styled(a)((({theme:e})=>({marginBottom:e.spacing(4)}))),S=({title:t})=>e.jsx(W,{component:"h2",variant:"h5",children:t}),_=s.styled("div")((({useAlternateBackground:e,theme:t})=>({backgroundColor:e?t.palette.semantic.background["background-alternate"]:t.palette.semantic.background["background-base"],width:"100%",height:"100%"})));exports.HORIZONTAL_SPACE_CLASSNAME="horizontal-content-space",exports.LEFT_HORIZONTAL_SPACE_CLASSNAME="left-horizontal-content-space",exports.PageTitle=S,exports.RIGHT_HORIZONTAL_SPACE_CLASSNAME="right-horizontal-content-space",exports.VERTICAL_SPACE_CLASSNAME="vertical-content-space",exports.default=a=>{const{actionBtnTitle:r,caption:o,children:d,contextButtons:b,documentTitle:W,fluid:E=!1,fullWidth:R,header:P,hideHeader:z,actionButtonLink:F,openLinkInNewTab:H=!1,pageHeader:N,showActionButton:M,showAddIcon:O,title:D,titleComponent:G,toPrevious:V,toParent:Z,strictToParent:$,navigate:U,hideDivider:Q=!1,customActionButtons:J,useAlternateBackground:K=!1,titleComponentAfter:X,errorBoundarySomethingWentWrongText:Y}=a,ee=s.useTheme(),te=l(ee.breakpoints.down("tablet")),ie=p.getMicroFrontendAttribute("data-portal-base-url")||"/",ne=!!F&&F.startsWith("https://"),ae=ne?F:void 0!==F?g.joinUrlPaths(ie,F):"";return e.jsx(_,{useAlternateBackground:K,children:e.jsxs(f,{fluid:E,children:[W&&e.jsx(x,{children:W}),N||null,e.jsxs(C,{children:[N&&e.jsx(u,{size:16,variant:"vertical"}),!z&&e.jsxs(e.Fragment,{children:[e.jsxs(k,{container:!0,alignItems:"center",direction:"column",children:[e.jsx(m,{container:!0,alignContent:"space-between",direction:"row",children:e.jsx(q,{children:b?.map((i=>e.jsx("div",{children:i},`context-button-${t.isValidElement(i)?i.props?.["data-testid"]||i.props?.children:"fallback"}`)))})}),e.jsxs(v,{container:!0,children:[(Z||V)&&e.jsx(i,{children:e.jsx(B,{"aria-label":"Back",component:"button","data-testid":"back_button",hasTitleComponent:!!G,onClick:()=>{V?U(-1):Z&&$||Z&&history.length<3?U(Z):U(-1)},children:e.jsx(c,{})})}),e.jsxs(A,{children:[G?e.jsx(G,{}):e.jsxs(i,{alignItems:"center",display:"flex",gap:2,children:[e.jsx(S,{title:D}),X]}),o&&e.jsx(w,{component:"h3",variant:"caption",children:o})]}),M&&e.jsxs(e.Fragment,{children:[te&&e.jsx(u,{size:56,variant:"vertical"}),e.jsx(y,{children:e.jsxs(n,{"data-testid":`Action-button-${r}`,fullWidth:!0,href:H||ne?ae:"",onClick:H||ne?()=>{}:()=>{U(F)},rel:H?"noopener noreferrer":void 0,target:H?"_blank":void 0,variant:"contained",children:[O&&e.jsx(L,{size:"sm"}),r]})})]}),J?.map((i=>e.jsxs("div",{children:[te&&e.jsx(u,{size:56,variant:"vertical"}),!te&&e.jsx(u,{size:16,variant:"vertical"}),e.jsx(y,{children:i})]},`custom-action-button-${t.isValidElement(i)?i.props?.["data-testid"]||i.props?.children:"fallback"}`)))]})]}),!Q&&e.jsx(I,{})]}),e.jsxs(j,{fullWidth:R,children:[P?e.jsx(T,{children:P}):null,e.jsx(h,{identifier:W,somethingWentWrongText:Y,children:e.jsx(e.Fragment,{children:d})})]})]})]})})},exports.maxWidth=b;
2
2
  //# sourceMappingURL=index.cjs.js.map
package/dist/components/PageLayout/index.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs.js","sources":["../../../src/components/PageLayout/index.tsx"],"sourcesContent":["import React, { type ComponentType, type ReactNode } from 'react';\n\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Divider from '@mui/material/Divider';\nimport IconButton from '@mui/material/IconButton';\nimport { styled, useTheme } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Add from '../../icons/Add';\nimport ArrowLeft02 from '../../icons/ArrowLeft02';\nimport { getMicroFrontendAttribute } from '../../utilities/renderUtilities';\nimport { joinUrlPaths } from '../../utilities/validation';\nimport Grid from '../atoms/Grid';\nimport FDErrorBoundary from '../FDErrorBoundary';\nimport Spacer from '../Spacer';\nimport DocumentTitle from './DocumentTitle';\nimport FullWidthContainer from './FullWidthContainer';\n\nexport const HORIZONTAL_SPACE_CLASSNAME = 'horizontal-content-space';\nexport const LEFT_HORIZONTAL_SPACE_CLASSNAME = 'left-horizontal-content-space';\nexport const RIGHT_HORIZONTAL_SPACE_CLASSNAME = 'right-horizontal-content-space';\nexport const VERTICAL_SPACE_CLASSNAME = 'vertical-content-space';\nexport const maxWidth = 1112;\nconst historyMinLength = 3;\n\nconst StyledWrapper = styled('div')<{ fluid: boolean }>(({ theme, fluid }) => ({\n maxWidth: fluid ? 'none' : maxWidth,\n [theme.breakpoints.down('laptop')]: {\n maxWidth: 'none',\n },\n padding: theme.spacing(2, 4),\n position: 'relative',\n minHeight: '100vh',\n}));\n\nconst StyledActionButtonGrid = styled(Grid)(({ theme }) => ({\n [theme.breakpoints.down('laptop')]: {\n width: '100%',\n paddingTop: theme.spacing(2),\n },\n}));\n\nconst StyledHeader = styled(Grid)(({ theme }) => ({\n flexWrap: 'nowrap',\n alignItems: 'flex-start',\n paddingTop: theme.spacing(3),\n paddingBottom: theme.spacing(3),\n\n [theme.breakpoints.down('laptop')]: {\n paddingTop: theme.spacing(2),\n paddingBottom: theme.spacing(3),\n },\n}));\n\nconst StyledTitleContainer = styled(Grid)(({ theme }) => ({\n paddingTop: theme.spacing(2),\n [theme.breakpoints.up('laptop')]: {\n width: '100%',\n alignItems: 'center',\n },\n}));\n\nconst StyledTitleSection = styled(Grid)(() => ({\n flexGrow: 1,\n}));\n\nconst StyledTopSection = styled('div')(({ theme }) => ({\n maxWidth,\n paddingBottom: theme.spacing(3),\n\n [theme.breakpoints.down('laptop')]: {\n paddingBottom: theme.spacing(2),\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n}));\n\nconst StyledAdd = styled(Add)(({ theme }) => ({\n marginRight: theme.spacing(1),\n}));\n\nconst StyledBackButton = styled(IconButton, {\n shouldForwardProp: (prop) => prop !== 'hasTitleComponent',\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n})<{ hasTitleComponent: boolean; component: any }>(({ theme, hasTitleComponent }) => ({\n margin: hasTitleComponent ? theme.spacing(-0.75, 2, -1.5, -1.5) : theme.spacing(-1.5, 2, -1.5, -1.5),\n\n [theme.breakpoints.only('tablet')]: {\n marginLeft: theme.spacing(-2),\n },\n\n [theme.breakpoints.only('base')]: {\n marginLeft: theme.spacing(-2),\n },\n}));\n\nconst StyledInnerWrapper = styled('div')(({ theme }) => ({\n maxWidth,\n marginLeft: theme.spacing(6),\n marginRight: theme.spacing(4),\n paddingBottom: theme.spacing(2),\n\n [theme.breakpoints.only('tablet')]: {\n marginLeft: 12,\n marginRight: theme.spacing(3),\n },\n\n [theme.breakpoints.only('mobile')]: {\n marginLeft: theme.spacing(3),\n marginRight: theme.spacing(3),\n maxWidth: 'none',\n },\n\n [theme.breakpoints.only('base')]: {\n marginLeft: theme.spacing(2),\n marginRight: theme.spacing(2),\n maxWidth: 'none',\n },\n}));\n\nconst StyledHeaderContainer = styled(Grid)(() => ({\n display: 'flex',\n flexGrow: 1,\n justifyContent: 'flex-end',\n}));\nconst StyledCaption = styled(Typography)<{ component: string }>(() => ({\n lineHeight: '26px',\n}));\n\nconst StyledPageTitle = styled(Typography)<{ component: string }>(() => ({\n fontWeight: 'bold',\n}));\n\nconst StyledPageDivider = styled(Divider)(({ theme }) => ({\n marginBottom: theme.spacing(4),\n}));\n\nexport const PageTitle = ({ title }: { title: ReactNode | string }): JSX.Element => (\n <StyledPageTitle component=\"h2\" variant=\"h5\">\n {title}\n </StyledPageTitle>\n);\n\nconst StyledPageContainer = styled('div')<{ useAlternateBackground: boolean }>(\n ({ useAlternateBackground, theme }) => ({\n backgroundColor: useAlternateBackground\n ? theme.palette.semantic.background['background-alternate']\n : theme.palette.semantic.background['background-base'],\n width: '100%',\n height: '100%',\n }),\n);\n\nexport interface Props {\n actionBtnTitle?: string;\n caption?: ReactNode;\n children: ReactNode;\n contextButtons?: ReactNode[];\n documentTitle: string;\n fluid?: boolean;\n fullWidth?: boolean;\n header?: ReactNode;\n hideHeader?: boolean;\n actionButtonLink?: string;\n pageHeader?: ReactNode;\n showActionButton?: boolean;\n showAddIcon?: boolean;\n title: ReactNode;\n titleComponent?: ComponentType<React.PropsWithChildren<unknown>>;\n titleComponentAfter?: ReactNode;\n toPrevious?: boolean;\n toParent?: string;\n strictToParent?: boolean;\n openLinkInNewTab?: boolean;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n navigate: (to: any) => void;\n hideDivider?: boolean;\n customActionButtons?: ReactNode[];\n useAlternateBackground?: boolean;\n errorBoundarySomethingWentWrongText: string;\n}\n\nconst PageLayout = (props: Props): JSX.Element => {\n const {\n actionBtnTitle,\n caption,\n children,\n contextButtons,\n documentTitle,\n fluid = false,\n fullWidth,\n header,\n hideHeader,\n actionButtonLink,\n openLinkInNewTab = false,\n pageHeader,\n showActionButton,\n showAddIcon,\n title,\n titleComponent: TitleComponent,\n toPrevious,\n toParent,\n strictToParent,\n navigate,\n hideDivider = false,\n customActionButtons,\n useAlternateBackground = false,\n titleComponentAfter,\n errorBoundarySomethingWentWrongText,\n } = props;\n const theme = useTheme();\n\n const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n const baseUrl = getMicroFrontendAttribute('data-portal-base-url') || '/';\n const actionButtonWithHttps: boolean = !!actionButtonLink && actionButtonLink.startsWith('https://');\n const getActionButtonLink = (): string => {\n if (actionButtonWithHttps) {\n return actionButtonLink as string;\n }\n if (actionButtonLink !== undefined) {\n return joinUrlPaths(baseUrl, actionButtonLink);\n }\n return '';\n };\n const actionButtonLinkFinal = getActionButtonLink();\n\n return (\n <StyledPageContainer useAlternateBackground={useAlternateBackground}>\n <StyledWrapper fluid={fluid}>\n {documentTitle && <DocumentTitle>{documentTitle}</DocumentTitle>}\n\n {pageHeader || null}\n <StyledInnerWrapper>\n {pageHeader && <Spacer size={16} variant=\"vertical\" />}\n {!hideHeader && (\n <>\n <StyledHeader container alignItems=\"center\" direction=\"column\">\n <Grid container alignContent=\"space-between\" direction=\"row\">\n <StyledHeaderContainer>\n {contextButtons?.map((button) => (\n <div\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n key={`context-button-${React.isValidElement(button) ? button.props?.['data-testid'] || button.props?.children : 'fallback'}`}\n >\n {button}\n </div>\n ))}\n </StyledHeaderContainer>\n </Grid>\n <StyledTitleContainer container>\n {(toParent || toPrevious) && (\n <Box>\n <StyledBackButton\n aria-label=\"Back\"\n component={'button'}\n data-testid=\"back_button\"\n hasTitleComponent={!!TitleComponent}\n onClick={() => {\n if (toPrevious) {\n navigate(-1);\n } else if (toParent && strictToParent) {\n navigate(toParent);\n } else if (toParent && history.length < historyMinLength) {\n navigate(toParent);\n } else {\n navigate(-1);\n }\n }}\n >\n <ArrowLeft02 />\n </StyledBackButton>\n </Box>\n )}\n\n <StyledTitleSection>\n {TitleComponent ? (\n <TitleComponent />\n ) : (\n <Box alignItems=\"center\" display=\"flex\" gap={2}>\n <PageTitle title={title} />\n {titleComponentAfter}\n </Box>\n )}\n {caption && (\n <StyledCaption component=\"h3\" variant=\"caption\">\n {caption}\n </StyledCaption>\n )}\n </StyledTitleSection>\n\n {showActionButton && (\n <>\n {isMobile && <Spacer size={56} variant=\"vertical\" />}\n <StyledActionButtonGrid>\n <Button\n data-testid={`Action-button-${actionBtnTitle}`}\n fullWidth={true}\n href={openLinkInNewTab || actionButtonWithHttps ? actionButtonLinkFinal : ''}\n onClick={\n !openLinkInNewTab && !actionButtonWithHttps\n ? (): void => {\n navigate(actionButtonLink);\n }\n : (): void => {}\n }\n rel={openLinkInNewTab ? 'noopener noreferrer' : undefined}\n target={openLinkInNewTab ? '_blank' : undefined}\n variant=\"contained\"\n >\n {showAddIcon && <StyledAdd size=\"sm\" />}\n {actionBtnTitle}\n </Button>\n </StyledActionButtonGrid>\n </>\n )}\n {customActionButtons?.map((button) => (\n <div\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n key={`custom-action-button-${React.isValidElement(button) ? button.props?.['data-testid'] || button.props?.children : 'fallback'}`}\n >\n {isMobile && <Spacer size={56} variant=\"vertical\" />}\n {!isMobile && <Spacer size={16} variant=\"vertical\" />}\n <StyledActionButtonGrid>{button}</StyledActionButtonGrid>\n </div>\n ))}\n </StyledTitleContainer>\n </StyledHeader>\n {!hideDivider && <StyledPageDivider />}\n </>\n )}\n <FullWidthContainer fullWidth={fullWidth}>\n {header ? <StyledTopSection>{header}</StyledTopSection> : null}\n <FDErrorBoundary\n identifier={documentTitle}\n somethingWentWrongText={errorBoundarySomethingWentWrongText}\n >\n {/* eslint-disable-next-line react/jsx-no-useless-fragment */}\n <>{children}</>\n </FDErrorBoundary>\n </FullWidthContainer>\n </StyledInnerWrapper>\n </StyledWrapper>\n </StyledPageContainer>\n );\n};\n\nexport default PageLayout;\n"],"names":["maxWidth","StyledWrapper","styled","theme","fluid","breakpoints","down","padding","spacing","position","minHeight","StyledActionButtonGrid","Grid","width","paddingTop","StyledHeader","flexWrap","alignItems","paddingBottom","StyledTitleContainer","up","StyledTitleSection","flexGrow","StyledTopSection","paddingLeft","paddingRight","StyledAdd","Add","marginRight","StyledBackButton","IconButton","shouldForwardProp","prop","hasTitleComponent","margin","only","marginLeft","StyledInnerWrapper","StyledHeaderContainer","display","justifyContent","StyledCaption","Typography","lineHeight","StyledPageTitle","fontWeight","StyledPageDivider","Divider","marginBottom","PageTitle","title","_jsx","component","variant","children","StyledPageContainer","useAlternateBackground","backgroundColor","palette","semantic","background","height","props","actionBtnTitle","caption","contextButtons","documentTitle","fullWidth","header","hideHeader","actionButtonLink","openLinkInNewTab","pageHeader","showActionButton","showAddIcon","titleComponent","TitleComponent","toPrevious","toParent","strictToParent","navigate","hideDivider","customActionButtons","titleComponentAfter","errorBoundarySomethingWentWrongText","useTheme","isMobile","useMediaQuery","baseUrl","getMicroFrontendAttribute","actionButtonWithHttps","startsWith","actionButtonLinkFinal","undefined","joinUrlPaths","_jsxs","DocumentTitle","Spacer","size","_Fragment","container","direction","alignContent","map","button","React","isValidElement","Box","onClick","history","length","ArrowLeft02","gap","Button","href","rel","target","FullWidthContainer","FDErrorBoundary","identifier","somethingWentWrongText"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs.js","sources":["../../../src/components/PageLayout/index.tsx"],"sourcesContent":["import React, { type ComponentType, type ReactNode } from 'react';\n\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Divider from '@mui/material/Divider';\nimport IconButton from '@mui/material/IconButton';\nimport { styled, useTheme } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Add from '../../icons/Add';\nimport ArrowLeft02 from '../../icons/ArrowLeft02';\nimport { getMicroFrontendAttribute } from '../../utilities/renderUtilities';\nimport { joinUrlPaths } from '../../utilities/validation';\nimport Grid from '../atoms/Grid';\nimport FDErrorBoundary from '../FDErrorBoundary';\nimport Spacer from '../Spacer';\nimport DocumentTitle from './DocumentTitle';\nimport FullWidthContainer from './FullWidthContainer';\n\nexport const HORIZONTAL_SPACE_CLASSNAME = 'horizontal-content-space';\nexport const LEFT_HORIZONTAL_SPACE_CLASSNAME = 'left-horizontal-content-space';\nexport const RIGHT_HORIZONTAL_SPACE_CLASSNAME = 'right-horizontal-content-space';\nexport const VERTICAL_SPACE_CLASSNAME = 'vertical-content-space';\nexport const maxWidth = 1112;\nconst historyMinLength = 3;\n\nconst StyledWrapper = styled('div')<{ fluid: boolean }>(({ theme, fluid }) => ({\n maxWidth: fluid ? 'none' : maxWidth,\n [theme.breakpoints.down('laptop')]: {\n maxWidth: 'none',\n },\n padding: theme.spacing(2, 4),\n position: 'relative',\n minHeight: '100vh',\n}));\n\nconst StyledActionButtonGrid = styled(Grid)(({ theme }) => ({\n [theme.breakpoints.down('laptop')]: {\n width: '100%',\n paddingTop: theme.spacing(2),\n },\n}));\n\nconst StyledHeader = styled(Grid)(({ theme }) => ({\n flexWrap: 'nowrap',\n alignItems: 'flex-start',\n paddingTop: theme.spacing(3),\n paddingBottom: theme.spacing(3),\n\n [theme.breakpoints.down('laptop')]: {\n paddingTop: theme.spacing(2),\n paddingBottom: theme.spacing(3),\n },\n}));\n\nconst StyledTitleContainer = styled(Grid)(({ theme }) => ({\n paddingTop: theme.spacing(2),\n [theme.breakpoints.up('laptop')]: {\n width: '100%',\n alignItems: 'center',\n },\n [theme.breakpoints.only('mobile')]: {\n marginLeft: theme.spacing(-3),\n marginRight: theme.spacing(-3),\n flexDirection: 'column',\n alignItems: 'flex-start',\n },\n [theme.breakpoints.only('base')]: {\n marginLeft: theme.spacing(-2),\n marginRight: theme.spacing(-2),\n flexDirection: 'column',\n alignItems: 'flex-start',\n },\n}));\n\nconst StyledTitleSection = styled(Grid)(() => ({\n flexGrow: 1,\n}));\n\nconst StyledTopSection = styled('div')(({ theme }) => ({\n maxWidth,\n paddingBottom: theme.spacing(3),\n\n [theme.breakpoints.down('laptop')]: {\n paddingBottom: theme.spacing(2),\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n}));\n\nconst StyledAdd = styled(Add)(({ theme }) => ({\n marginRight: theme.spacing(1),\n}));\n\nconst StyledBackButton = styled(IconButton, {\n shouldForwardProp: (prop) => prop !== 'hasTitleComponent',\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n})<{ hasTitleComponent: boolean; component: any }>(({ theme, hasTitleComponent }) => ({\n margin: hasTitleComponent ? theme.spacing(-0.75, 2, -1.5, -1.5) : theme.spacing(-1.5, 2, -1.5, -1.5),\n\n [theme.breakpoints.only('tablet')]: {\n marginLeft: theme.spacing(-2),\n },\n\n [theme.breakpoints.only('base')]: {\n marginLeft: theme.spacing(-2),\n },\n}));\n\nconst StyledInnerWrapper = styled('div')(({ theme }) => ({\n maxWidth,\n marginLeft: theme.spacing(6),\n marginRight: theme.spacing(4),\n paddingBottom: theme.spacing(2),\n\n [theme.breakpoints.only('tablet')]: {\n marginLeft: 12,\n marginRight: theme.spacing(3),\n },\n\n [theme.breakpoints.only('mobile')]: {\n marginLeft: theme.spacing(3),\n marginRight: theme.spacing(3),\n maxWidth: 'none',\n },\n\n [theme.breakpoints.only('base')]: {\n marginLeft: theme.spacing(2),\n marginRight: theme.spacing(2),\n maxWidth: 'none',\n },\n}));\n\nconst StyledHeaderContainer = styled(Grid)(() => ({\n display: 'flex',\n flexGrow: 1,\n justifyContent: 'flex-end',\n}));\nconst StyledCaption = styled(Typography)<{ component: string }>(() => ({\n lineHeight: '26px',\n}));\n\nconst StyledPageTitle = styled(Typography)<{ component: string }>(() => ({\n fontWeight: 'bold',\n}));\n\nconst StyledPageDivider = styled(Divider)(({ theme }) => ({\n marginBottom: theme.spacing(4),\n}));\n\nexport const PageTitle = ({ title }: { title: ReactNode | string }): JSX.Element => (\n <StyledPageTitle component=\"h2\" variant=\"h5\">\n {title}\n </StyledPageTitle>\n);\n\nconst StyledPageContainer = styled('div')<{ useAlternateBackground: boolean }>(\n ({ useAlternateBackground, theme }) => ({\n backgroundColor: useAlternateBackground\n ? theme.palette.semantic.background['background-alternate']\n : theme.palette.semantic.background['background-base'],\n width: '100%',\n height: '100%',\n }),\n);\n\nexport interface Props {\n actionBtnTitle?: string;\n caption?: ReactNode;\n children: ReactNode;\n contextButtons?: ReactNode[];\n documentTitle: string;\n fluid?: boolean;\n fullWidth?: boolean;\n header?: ReactNode;\n hideHeader?: boolean;\n actionButtonLink?: string;\n pageHeader?: ReactNode;\n showActionButton?: boolean;\n showAddIcon?: boolean;\n title: ReactNode;\n titleComponent?: ComponentType<React.PropsWithChildren<unknown>>;\n titleComponentAfter?: ReactNode;\n toPrevious?: boolean;\n toParent?: string;\n strictToParent?: boolean;\n openLinkInNewTab?: boolean;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n navigate: (to: any) => void;\n hideDivider?: boolean;\n customActionButtons?: ReactNode[];\n useAlternateBackground?: boolean;\n errorBoundarySomethingWentWrongText: string;\n}\n\nconst PageLayout = (props: Props): JSX.Element => {\n const {\n actionBtnTitle,\n caption,\n children,\n contextButtons,\n documentTitle,\n fluid = false,\n fullWidth,\n header,\n hideHeader,\n actionButtonLink,\n openLinkInNewTab = false,\n pageHeader,\n showActionButton,\n showAddIcon,\n title,\n titleComponent: TitleComponent,\n toPrevious,\n toParent,\n strictToParent,\n navigate,\n hideDivider = false,\n customActionButtons,\n useAlternateBackground = false,\n titleComponentAfter,\n errorBoundarySomethingWentWrongText,\n } = props;\n const theme = useTheme();\n\n const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n const baseUrl = getMicroFrontendAttribute('data-portal-base-url') || '/';\n const actionButtonWithHttps: boolean = !!actionButtonLink && actionButtonLink.startsWith('https://');\n const getActionButtonLink = (): string => {\n if (actionButtonWithHttps) {\n return actionButtonLink as string;\n }\n if (actionButtonLink !== undefined) {\n return joinUrlPaths(baseUrl, actionButtonLink);\n }\n return '';\n };\n const actionButtonLinkFinal = getActionButtonLink();\n\n return (\n <StyledPageContainer useAlternateBackground={useAlternateBackground}>\n <StyledWrapper fluid={fluid}>\n {documentTitle && <DocumentTitle>{documentTitle}</DocumentTitle>}\n\n {pageHeader || null}\n <StyledInnerWrapper>\n {pageHeader && <Spacer size={16} variant=\"vertical\" />}\n {!hideHeader && (\n <>\n <StyledHeader container alignItems=\"center\" direction=\"column\">\n <Grid container alignContent=\"space-between\" direction=\"row\">\n <StyledHeaderContainer>\n {contextButtons?.map((button) => (\n <div\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n key={`context-button-${React.isValidElement(button) ? button.props?.['data-testid'] || button.props?.children : 'fallback'}`}\n >\n {button}\n </div>\n ))}\n </StyledHeaderContainer>\n </Grid>\n <StyledTitleContainer container>\n {(toParent || toPrevious) && (\n <Box>\n <StyledBackButton\n aria-label=\"Back\"\n component={'button'}\n data-testid=\"back_button\"\n hasTitleComponent={!!TitleComponent}\n onClick={() => {\n if (toPrevious) {\n navigate(-1);\n } else if (toParent && strictToParent) {\n navigate(toParent);\n } else if (toParent && history.length < historyMinLength) {\n navigate(toParent);\n } else {\n navigate(-1);\n }\n }}\n >\n <ArrowLeft02 />\n </StyledBackButton>\n </Box>\n )}\n\n <StyledTitleSection>\n {TitleComponent ? (\n <TitleComponent />\n ) : (\n <Box alignItems=\"center\" display=\"flex\" gap={2}>\n <PageTitle title={title} />\n {titleComponentAfter}\n </Box>\n )}\n {caption && (\n <StyledCaption component=\"h3\" variant=\"caption\">\n {caption}\n </StyledCaption>\n )}\n </StyledTitleSection>\n\n {showActionButton && (\n <>\n {isMobile && <Spacer size={56} variant=\"vertical\" />}\n <StyledActionButtonGrid>\n <Button\n data-testid={`Action-button-${actionBtnTitle}`}\n fullWidth={true}\n href={openLinkInNewTab || actionButtonWithHttps ? actionButtonLinkFinal : ''}\n onClick={\n !openLinkInNewTab && !actionButtonWithHttps\n ? (): void => {\n navigate(actionButtonLink);\n }\n : (): void => {}\n }\n rel={openLinkInNewTab ? 'noopener noreferrer' : undefined}\n target={openLinkInNewTab ? '_blank' : undefined}\n variant=\"contained\"\n >\n {showAddIcon && <StyledAdd size=\"sm\" />}\n {actionBtnTitle}\n </Button>\n </StyledActionButtonGrid>\n </>\n )}\n {customActionButtons?.map((button) => (\n <div\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n key={`custom-action-button-${React.isValidElement(button) ? button.props?.['data-testid'] || button.props?.children : 'fallback'}`}\n >\n {isMobile && <Spacer size={56} variant=\"vertical\" />}\n {!isMobile && <Spacer size={16} variant=\"vertical\" />}\n <StyledActionButtonGrid>{button}</StyledActionButtonGrid>\n </div>\n ))}\n </StyledTitleContainer>\n </StyledHeader>\n {!hideDivider && <StyledPageDivider />}\n </>\n )}\n <FullWidthContainer fullWidth={fullWidth}>\n {header ? <StyledTopSection>{header}</StyledTopSection> : null}\n <FDErrorBoundary\n identifier={documentTitle}\n somethingWentWrongText={errorBoundarySomethingWentWrongText}\n >\n {/* eslint-disable-next-line react/jsx-no-useless-fragment */}\n <>{children}</>\n </FDErrorBoundary>\n </FullWidthContainer>\n </StyledInnerWrapper>\n </StyledWrapper>\n </StyledPageContainer>\n );\n};\n\nexport default PageLayout;\n"],"names":["maxWidth","StyledWrapper","styled","theme","fluid","breakpoints","down","padding","spacing","position","minHeight","StyledActionButtonGrid","Grid","width","paddingTop","StyledHeader","flexWrap","alignItems","paddingBottom","StyledTitleContainer","up","only","marginLeft","marginRight","flexDirection","StyledTitleSection","flexGrow","StyledTopSection","paddingLeft","paddingRight","StyledAdd","Add","StyledBackButton","IconButton","shouldForwardProp","prop","hasTitleComponent","margin","StyledInnerWrapper","StyledHeaderContainer","display","justifyContent","StyledCaption","Typography","lineHeight","StyledPageTitle","fontWeight","StyledPageDivider","Divider","marginBottom","PageTitle","title","_jsx","component","variant","children","StyledPageContainer","useAlternateBackground","backgroundColor","palette","semantic","background","height","props","actionBtnTitle","caption","contextButtons","documentTitle","fullWidth","header","hideHeader","actionButtonLink","openLinkInNewTab","pageHeader","showActionButton","showAddIcon","titleComponent","TitleComponent","toPrevious","toParent","strictToParent","navigate","hideDivider","customActionButtons","titleComponentAfter","errorBoundarySomethingWentWrongText","useTheme","isMobile","useMediaQuery","baseUrl","getMicroFrontendAttribute","actionButtonWithHttps","startsWith","actionButtonLinkFinal","undefined","joinUrlPaths","_jsxs","DocumentTitle","Spacer","size","_Fragment","container","direction","alignContent","map","button","React","isValidElement","Box","onClick","history","length","ArrowLeft02","gap","Button","href","rel","target","FullWidthContainer","FDErrorBoundary","identifier","somethingWentWrongText"],"mappings":"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"}
package/dist/components/PageLayout/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import{jsx as t,jsxs as i,Fragment as n}from"react/jsx-runtime";import e from"react";import a from"@mui/material/Box";import o from"@mui/material/Button";import r from"@mui/material/Divider";import d from"@mui/material/IconButton";import{styled as l,useTheme as p}from"@mui/material/styles";import c from"@mui/material/Typography";import m from"@mui/material/useMediaQuery";import s from"../../icons/Add/index.js";import h from"../../icons/ArrowLeft02/index.js";import{getMicroFrontendAttribute as g}from"../../utilities/renderUtilities.js";import{joinUrlPaths as u}from"../../utilities/validation.js";import f from"@mui/material/Grid2";import b from"../FDErrorBoundary/index.js";import k from"../Spacer/index.js";import v from"./DocumentTitle.js";import x from"./FullWidthContainer.js";const B="horizontal-content-space",w="left-horizontal-content-space",W="right-horizontal-content-space",y="vertical-content-space",T=1112,C=l("div")((({theme:t,fluid:i})=>({maxWidth:i?"none":T,[t.breakpoints.down("laptop")]:{maxWidth:"none"},padding:t.spacing(2,4),position:"relative",minHeight:"100vh"}))),j=l(f)((({theme:t})=>({[t.breakpoints.down("laptop")]:{width:"100%",paddingTop:t.spacing(2)}}))),A=l(f)((({theme:t})=>({flexWrap:"nowrap",alignItems:"flex-start",paddingTop:t.spacing(3),paddingBottom:t.spacing(3),[t.breakpoints.down("laptop")]:{paddingTop:t.spacing(2),paddingBottom:t.spacing(3)}}))),L=l(f)((({theme:t})=>({paddingTop:t.spacing(2),[t.breakpoints.up("laptop")]:{width:"100%",alignItems:"center"}}))),z=l(f)((()=>({flexGrow:1}))),I=l("div")((({theme:t})=>({maxWidth:T,paddingBottom:t.spacing(3),[t.breakpoints.down("laptop")]:{paddingBottom:t.spacing(2),paddingLeft:t.spacing(2),paddingRight:t.spacing(2)}}))),R=l(s)((({theme:t})=>({marginRight:t.spacing(1)}))),D=l(d,{shouldForwardProp:t=>"hasTitleComponent"!==t})((({theme:t,hasTitleComponent:i})=>({margin:i?t.spacing(-.75,2,-1.5,-1.5):t.spacing(-1.5,2,-1.5,-1.5),[t.breakpoints.only("tablet")]:{marginLeft:t.spacing(-2)},[t.breakpoints.only("base")]:{marginLeft:t.spacing(-2)}}))),H=l("div")((({theme:t})=>({maxWidth:T,marginLeft:t.spacing(6),marginRight:t.spacing(4),paddingBottom:t.spacing(2),[t.breakpoints.only("tablet")]:{marginLeft:12,marginRight:t.spacing(3)},[t.breakpoints.only("mobile")]:{marginLeft:t.spacing(3),marginRight:t.spacing(3),maxWidth:"none"},[t.breakpoints.only("base")]:{marginLeft:t.spacing(2),marginRight:t.spacing(2),maxWidth:"none"}}))),P=l(f)((()=>({display:"flex",flexGrow:1,justifyContent:"flex-end"}))),E=l(c)((()=>({lineHeight:"26px"}))),F=l(c)((()=>({fontWeight:"bold"}))),G=l(r)((({theme:t})=>({marginBottom:t.spacing(4)}))),$=({title:i})=>t(F,{component:"h2",variant:"h5",children:i}),S=l("div")((({useAlternateBackground:t,theme:i})=>({backgroundColor:t?i.palette.semantic.background["background-alternate"]:i.palette.semantic.background["background-base"],width:"100%",height:"100%"}))),V=r=>{const{actionBtnTitle:d,caption:l,children:c,contextButtons:s,documentTitle:B,fluid:w=!1,fullWidth:W,header:y,hideHeader:T,actionButtonLink:F,openLinkInNewTab:V=!1,pageHeader:_,showActionButton:M,showAddIcon:N,title:Q,titleComponent:U,toPrevious:q,toParent:J,strictToParent:K,navigate:O,hideDivider:X=!1,customActionButtons:Y,useAlternateBackground:Z=!1,titleComponentAfter:tt,errorBoundarySomethingWentWrongText:it}=r,nt=p(),et=m(nt.breakpoints.down("tablet")),at=g("data-portal-base-url")||"/",ot=!!F&&F.startsWith("https://"),rt=ot?F:void 0!==F?u(at,F):"";return t(S,{useAlternateBackground:Z,children:i(C,{fluid:w,children:[B&&t(v,{children:B}),_||null,i(H,{children:[_&&t(k,{size:16,variant:"vertical"}),!T&&i(n,{children:[i(A,{container:!0,alignItems:"center",direction:"column",children:[t(f,{container:!0,alignContent:"space-between",direction:"row",children:t(P,{children:s?.map((i=>t("div",{children:i},`context-button-${e.isValidElement(i)?i.props?.["data-testid"]||i.props?.children:"fallback"}`)))})}),i(L,{container:!0,children:[(J||q)&&t(a,{children:t(D,{"aria-label":"Back",component:"button","data-testid":"back_button",hasTitleComponent:!!U,onClick:()=>{q?O(-1):J&&K||J&&history.length<3?O(J):O(-1)},children:t(h,{})})}),i(z,{children:[U?t(U,{}):i(a,{alignItems:"center",display:"flex",gap:2,children:[t($,{title:Q}),tt]}),l&&t(E,{component:"h3",variant:"caption",children:l})]}),M&&i(n,{children:[et&&t(k,{size:56,variant:"vertical"}),t(j,{children:i(o,{"data-testid":`Action-button-${d}`,fullWidth:!0,href:V||ot?rt:"",onClick:V||ot?()=>{}:()=>{O(F)},rel:V?"noopener noreferrer":void 0,target:V?"_blank":void 0,variant:"contained",children:[N&&t(R,{size:"sm"}),d]})})]}),Y?.map((n=>i("div",{children:[et&&t(k,{size:56,variant:"vertical"}),!et&&t(k,{size:16,variant:"vertical"}),t(j,{children:n})]},`custom-action-button-${e.isValidElement(n)?n.props?.["data-testid"]||n.props?.children:"fallback"}`)))]})]}),!X&&t(G,{})]}),i(x,{fullWidth:W,children:[y?t(I,{children:y}):null,t(b,{identifier:B,somethingWentWrongText:it,children:t(n,{children:c})})]})]})]})})};export{B as HORIZONTAL_SPACE_CLASSNAME,w as LEFT_HORIZONTAL_SPACE_CLASSNAME,$ as PageTitle,W as RIGHT_HORIZONTAL_SPACE_CLASSNAME,y as VERTICAL_SPACE_CLASSNAME,V as default,T as maxWidth};
1
+ import{jsx as t,jsxs as i,Fragment as n}from"react/jsx-runtime";import e from"react";import a from"@mui/material/Box";import o from"@mui/material/Button";import r from"@mui/material/Divider";import l from"@mui/material/IconButton";import{styled as d,useTheme as p}from"@mui/material/styles";import c from"@mui/material/Typography";import m from"@mui/material/useMediaQuery";import s from"../../icons/Add/index.js";import g from"../../icons/ArrowLeft02/index.js";import{getMicroFrontendAttribute as h}from"../../utilities/renderUtilities.js";import{joinUrlPaths as u}from"../../utilities/validation.js";import f from"@mui/material/Grid2";import b from"../FDErrorBoundary/index.js";import k from"../Spacer/index.js";import x from"./DocumentTitle.js";import v from"./FullWidthContainer.js";const B="horizontal-content-space",w="left-horizontal-content-space",y="right-horizontal-content-space",W="vertical-content-space",T=1112,L=d("div")((({theme:t,fluid:i})=>({maxWidth:i?"none":T,[t.breakpoints.down("laptop")]:{maxWidth:"none"},padding:t.spacing(2,4),position:"relative",minHeight:"100vh"}))),C=d(f)((({theme:t})=>({[t.breakpoints.down("laptop")]:{width:"100%",paddingTop:t.spacing(2)}}))),j=d(f)((({theme:t})=>({flexWrap:"nowrap",alignItems:"flex-start",paddingTop:t.spacing(3),paddingBottom:t.spacing(3),[t.breakpoints.down("laptop")]:{paddingTop:t.spacing(2),paddingBottom:t.spacing(3)}}))),A=d(f)((({theme:t})=>({paddingTop:t.spacing(2),[t.breakpoints.up("laptop")]:{width:"100%",alignItems:"center"},[t.breakpoints.only("mobile")]:{marginLeft:t.spacing(-3),marginRight:t.spacing(-3),flexDirection:"column",alignItems:"flex-start"},[t.breakpoints.only("base")]:{marginLeft:t.spacing(-2),marginRight:t.spacing(-2),flexDirection:"column",alignItems:"flex-start"}}))),I=d(f)((()=>({flexGrow:1}))),z=d("div")((({theme:t})=>({maxWidth:T,paddingBottom:t.spacing(3),[t.breakpoints.down("laptop")]:{paddingBottom:t.spacing(2),paddingLeft:t.spacing(2),paddingRight:t.spacing(2)}}))),R=d(s)((({theme:t})=>({marginRight:t.spacing(1)}))),D=d(l,{shouldForwardProp:t=>"hasTitleComponent"!==t})((({theme:t,hasTitleComponent:i})=>({margin:i?t.spacing(-.75,2,-1.5,-1.5):t.spacing(-1.5,2,-1.5,-1.5),[t.breakpoints.only("tablet")]:{marginLeft:t.spacing(-2)},[t.breakpoints.only("base")]:{marginLeft:t.spacing(-2)}}))),H=d("div")((({theme:t})=>({maxWidth:T,marginLeft:t.spacing(6),marginRight:t.spacing(4),paddingBottom:t.spacing(2),[t.breakpoints.only("tablet")]:{marginLeft:12,marginRight:t.spacing(3)},[t.breakpoints.only("mobile")]:{marginLeft:t.spacing(3),marginRight:t.spacing(3),maxWidth:"none"},[t.breakpoints.only("base")]:{marginLeft:t.spacing(2),marginRight:t.spacing(2),maxWidth:"none"}}))),P=d(f)((()=>({display:"flex",flexGrow:1,justifyContent:"flex-end"}))),E=d(c)((()=>({lineHeight:"26px"}))),F=d(c)((()=>({fontWeight:"bold"}))),G=d(r)((({theme:t})=>({marginBottom:t.spacing(4)}))),$=({title:i})=>t(F,{component:"h2",variant:"h5",children:i}),S=d("div")((({useAlternateBackground:t,theme:i})=>({backgroundColor:t?i.palette.semantic.background["background-alternate"]:i.palette.semantic.background["background-base"],width:"100%",height:"100%"}))),V=r=>{const{actionBtnTitle:l,caption:d,children:c,contextButtons:s,documentTitle:B,fluid:w=!1,fullWidth:y,header:W,hideHeader:T,actionButtonLink:F,openLinkInNewTab:V=!1,pageHeader:_,showActionButton:M,showAddIcon:N,title:Q,titleComponent:U,toPrevious:q,toParent:J,strictToParent:K,navigate:O,hideDivider:X=!1,customActionButtons:Y,useAlternateBackground:Z=!1,titleComponentAfter:tt,errorBoundarySomethingWentWrongText:it}=r,nt=p(),et=m(nt.breakpoints.down("tablet")),at=h("data-portal-base-url")||"/",ot=!!F&&F.startsWith("https://"),rt=ot?F:void 0!==F?u(at,F):"";return t(S,{useAlternateBackground:Z,children:i(L,{fluid:w,children:[B&&t(x,{children:B}),_||null,i(H,{children:[_&&t(k,{size:16,variant:"vertical"}),!T&&i(n,{children:[i(j,{container:!0,alignItems:"center",direction:"column",children:[t(f,{container:!0,alignContent:"space-between",direction:"row",children:t(P,{children:s?.map((i=>t("div",{children:i},`context-button-${e.isValidElement(i)?i.props?.["data-testid"]||i.props?.children:"fallback"}`)))})}),i(A,{container:!0,children:[(J||q)&&t(a,{children:t(D,{"aria-label":"Back",component:"button","data-testid":"back_button",hasTitleComponent:!!U,onClick:()=>{q?O(-1):J&&K||J&&history.length<3?O(J):O(-1)},children:t(g,{})})}),i(I,{children:[U?t(U,{}):i(a,{alignItems:"center",display:"flex",gap:2,children:[t($,{title:Q}),tt]}),d&&t(E,{component:"h3",variant:"caption",children:d})]}),M&&i(n,{children:[et&&t(k,{size:56,variant:"vertical"}),t(C,{children:i(o,{"data-testid":`Action-button-${l}`,fullWidth:!0,href:V||ot?rt:"",onClick:V||ot?()=>{}:()=>{O(F)},rel:V?"noopener noreferrer":void 0,target:V?"_blank":void 0,variant:"contained",children:[N&&t(R,{size:"sm"}),l]})})]}),Y?.map((n=>i("div",{children:[et&&t(k,{size:56,variant:"vertical"}),!et&&t(k,{size:16,variant:"vertical"}),t(C,{children:n})]},`custom-action-button-${e.isValidElement(n)?n.props?.["data-testid"]||n.props?.children:"fallback"}`)))]})]}),!X&&t(G,{})]}),i(v,{fullWidth:y,children:[W?t(z,{children:W}):null,t(b,{identifier:B,somethingWentWrongText:it,children:t(n,{children:c})})]})]})]})})};export{B as HORIZONTAL_SPACE_CLASSNAME,w as LEFT_HORIZONTAL_SPACE_CLASSNAME,$ as PageTitle,y as RIGHT_HORIZONTAL_SPACE_CLASSNAME,W as VERTICAL_SPACE_CLASSNAME,V as default,T as maxWidth};
2
2
  //# sourceMappingURL=index.js.map
package/dist/components/PageLayout/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/components/PageLayout/index.tsx"],"sourcesContent":["import React, { type ComponentType, type ReactNode } from 'react';\n\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Divider from '@mui/material/Divider';\nimport IconButton from '@mui/material/IconButton';\nimport { styled, useTheme } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Add from '../../icons/Add';\nimport ArrowLeft02 from '../../icons/ArrowLeft02';\nimport { getMicroFrontendAttribute } from '../../utilities/renderUtilities';\nimport { joinUrlPaths } from '../../utilities/validation';\nimport Grid from '../atoms/Grid';\nimport FDErrorBoundary from '../FDErrorBoundary';\nimport Spacer from '../Spacer';\nimport DocumentTitle from './DocumentTitle';\nimport FullWidthContainer from './FullWidthContainer';\n\nexport const HORIZONTAL_SPACE_CLASSNAME = 'horizontal-content-space';\nexport const LEFT_HORIZONTAL_SPACE_CLASSNAME = 'left-horizontal-content-space';\nexport const RIGHT_HORIZONTAL_SPACE_CLASSNAME = 'right-horizontal-content-space';\nexport const VERTICAL_SPACE_CLASSNAME = 'vertical-content-space';\nexport const maxWidth = 1112;\nconst historyMinLength = 3;\n\nconst StyledWrapper = styled('div')<{ fluid: boolean }>(({ theme, fluid }) => ({\n maxWidth: fluid ? 'none' : maxWidth,\n [theme.breakpoints.down('laptop')]: {\n maxWidth: 'none',\n },\n padding: theme.spacing(2, 4),\n position: 'relative',\n minHeight: '100vh',\n}));\n\nconst StyledActionButtonGrid = styled(Grid)(({ theme }) => ({\n [theme.breakpoints.down('laptop')]: {\n width: '100%',\n paddingTop: theme.spacing(2),\n },\n}));\n\nconst StyledHeader = styled(Grid)(({ theme }) => ({\n flexWrap: 'nowrap',\n alignItems: 'flex-start',\n paddingTop: theme.spacing(3),\n paddingBottom: theme.spacing(3),\n\n [theme.breakpoints.down('laptop')]: {\n paddingTop: theme.spacing(2),\n paddingBottom: theme.spacing(3),\n },\n}));\n\nconst StyledTitleContainer = styled(Grid)(({ theme }) => ({\n paddingTop: theme.spacing(2),\n [theme.breakpoints.up('laptop')]: {\n width: '100%',\n alignItems: 'center',\n },\n}));\n\nconst StyledTitleSection = styled(Grid)(() => ({\n flexGrow: 1,\n}));\n\nconst StyledTopSection = styled('div')(({ theme }) => ({\n maxWidth,\n paddingBottom: theme.spacing(3),\n\n [theme.breakpoints.down('laptop')]: {\n paddingBottom: theme.spacing(2),\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n}));\n\nconst StyledAdd = styled(Add)(({ theme }) => ({\n marginRight: theme.spacing(1),\n}));\n\nconst StyledBackButton = styled(IconButton, {\n shouldForwardProp: (prop) => prop !== 'hasTitleComponent',\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n})<{ hasTitleComponent: boolean; component: any }>(({ theme, hasTitleComponent }) => ({\n margin: hasTitleComponent ? theme.spacing(-0.75, 2, -1.5, -1.5) : theme.spacing(-1.5, 2, -1.5, -1.5),\n\n [theme.breakpoints.only('tablet')]: {\n marginLeft: theme.spacing(-2),\n },\n\n [theme.breakpoints.only('base')]: {\n marginLeft: theme.spacing(-2),\n },\n}));\n\nconst StyledInnerWrapper = styled('div')(({ theme }) => ({\n maxWidth,\n marginLeft: theme.spacing(6),\n marginRight: theme.spacing(4),\n paddingBottom: theme.spacing(2),\n\n [theme.breakpoints.only('tablet')]: {\n marginLeft: 12,\n marginRight: theme.spacing(3),\n },\n\n [theme.breakpoints.only('mobile')]: {\n marginLeft: theme.spacing(3),\n marginRight: theme.spacing(3),\n maxWidth: 'none',\n },\n\n [theme.breakpoints.only('base')]: {\n marginLeft: theme.spacing(2),\n marginRight: theme.spacing(2),\n maxWidth: 'none',\n },\n}));\n\nconst StyledHeaderContainer = styled(Grid)(() => ({\n display: 'flex',\n flexGrow: 1,\n justifyContent: 'flex-end',\n}));\nconst StyledCaption = styled(Typography)<{ component: string }>(() => ({\n lineHeight: '26px',\n}));\n\nconst StyledPageTitle = styled(Typography)<{ component: string }>(() => ({\n fontWeight: 'bold',\n}));\n\nconst StyledPageDivider = styled(Divider)(({ theme }) => ({\n marginBottom: theme.spacing(4),\n}));\n\nexport const PageTitle = ({ title }: { title: ReactNode | string }): JSX.Element => (\n <StyledPageTitle component=\"h2\" variant=\"h5\">\n {title}\n </StyledPageTitle>\n);\n\nconst StyledPageContainer = styled('div')<{ useAlternateBackground: boolean }>(\n ({ useAlternateBackground, theme }) => ({\n backgroundColor: useAlternateBackground\n ? theme.palette.semantic.background['background-alternate']\n : theme.palette.semantic.background['background-base'],\n width: '100%',\n height: '100%',\n }),\n);\n\nexport interface Props {\n actionBtnTitle?: string;\n caption?: ReactNode;\n children: ReactNode;\n contextButtons?: ReactNode[];\n documentTitle: string;\n fluid?: boolean;\n fullWidth?: boolean;\n header?: ReactNode;\n hideHeader?: boolean;\n actionButtonLink?: string;\n pageHeader?: ReactNode;\n showActionButton?: boolean;\n showAddIcon?: boolean;\n title: ReactNode;\n titleComponent?: ComponentType<React.PropsWithChildren<unknown>>;\n titleComponentAfter?: ReactNode;\n toPrevious?: boolean;\n toParent?: string;\n strictToParent?: boolean;\n openLinkInNewTab?: boolean;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n navigate: (to: any) => void;\n hideDivider?: boolean;\n customActionButtons?: ReactNode[];\n useAlternateBackground?: boolean;\n errorBoundarySomethingWentWrongText: string;\n}\n\nconst PageLayout = (props: Props): JSX.Element => {\n const {\n actionBtnTitle,\n caption,\n children,\n contextButtons,\n documentTitle,\n fluid = false,\n fullWidth,\n header,\n hideHeader,\n actionButtonLink,\n openLinkInNewTab = false,\n pageHeader,\n showActionButton,\n showAddIcon,\n title,\n titleComponent: TitleComponent,\n toPrevious,\n toParent,\n strictToParent,\n navigate,\n hideDivider = false,\n customActionButtons,\n useAlternateBackground = false,\n titleComponentAfter,\n errorBoundarySomethingWentWrongText,\n } = props;\n const theme = useTheme();\n\n const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n const baseUrl = getMicroFrontendAttribute('data-portal-base-url') || '/';\n const actionButtonWithHttps: boolean = !!actionButtonLink && actionButtonLink.startsWith('https://');\n const getActionButtonLink = (): string => {\n if (actionButtonWithHttps) {\n return actionButtonLink as string;\n }\n if (actionButtonLink !== undefined) {\n return joinUrlPaths(baseUrl, actionButtonLink);\n }\n return '';\n };\n const actionButtonLinkFinal = getActionButtonLink();\n\n return (\n <StyledPageContainer useAlternateBackground={useAlternateBackground}>\n <StyledWrapper fluid={fluid}>\n {documentTitle && <DocumentTitle>{documentTitle}</DocumentTitle>}\n\n {pageHeader || null}\n <StyledInnerWrapper>\n {pageHeader && <Spacer size={16} variant=\"vertical\" />}\n {!hideHeader && (\n <>\n <StyledHeader container alignItems=\"center\" direction=\"column\">\n <Grid container alignContent=\"space-between\" direction=\"row\">\n <StyledHeaderContainer>\n {contextButtons?.map((button) => (\n <div\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n key={`context-button-${React.isValidElement(button) ? button.props?.['data-testid'] || button.props?.children : 'fallback'}`}\n >\n {button}\n </div>\n ))}\n </StyledHeaderContainer>\n </Grid>\n <StyledTitleContainer container>\n {(toParent || toPrevious) && (\n <Box>\n <StyledBackButton\n aria-label=\"Back\"\n component={'button'}\n data-testid=\"back_button\"\n hasTitleComponent={!!TitleComponent}\n onClick={() => {\n if (toPrevious) {\n navigate(-1);\n } else if (toParent && strictToParent) {\n navigate(toParent);\n } else if (toParent && history.length < historyMinLength) {\n navigate(toParent);\n } else {\n navigate(-1);\n }\n }}\n >\n <ArrowLeft02 />\n </StyledBackButton>\n </Box>\n )}\n\n <StyledTitleSection>\n {TitleComponent ? (\n <TitleComponent />\n ) : (\n <Box alignItems=\"center\" display=\"flex\" gap={2}>\n <PageTitle title={title} />\n {titleComponentAfter}\n </Box>\n )}\n {caption && (\n <StyledCaption component=\"h3\" variant=\"caption\">\n {caption}\n </StyledCaption>\n )}\n </StyledTitleSection>\n\n {showActionButton && (\n <>\n {isMobile && <Spacer size={56} variant=\"vertical\" />}\n <StyledActionButtonGrid>\n <Button\n data-testid={`Action-button-${actionBtnTitle}`}\n fullWidth={true}\n href={openLinkInNewTab || actionButtonWithHttps ? actionButtonLinkFinal : ''}\n onClick={\n !openLinkInNewTab && !actionButtonWithHttps\n ? (): void => {\n navigate(actionButtonLink);\n }\n : (): void => {}\n }\n rel={openLinkInNewTab ? 'noopener noreferrer' : undefined}\n target={openLinkInNewTab ? '_blank' : undefined}\n variant=\"contained\"\n >\n {showAddIcon && <StyledAdd size=\"sm\" />}\n {actionBtnTitle}\n </Button>\n </StyledActionButtonGrid>\n </>\n )}\n {customActionButtons?.map((button) => (\n <div\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n key={`custom-action-button-${React.isValidElement(button) ? button.props?.['data-testid'] || button.props?.children : 'fallback'}`}\n >\n {isMobile && <Spacer size={56} variant=\"vertical\" />}\n {!isMobile && <Spacer size={16} variant=\"vertical\" />}\n <StyledActionButtonGrid>{button}</StyledActionButtonGrid>\n </div>\n ))}\n </StyledTitleContainer>\n </StyledHeader>\n {!hideDivider && <StyledPageDivider />}\n </>\n )}\n <FullWidthContainer fullWidth={fullWidth}>\n {header ? <StyledTopSection>{header}</StyledTopSection> : null}\n <FDErrorBoundary\n identifier={documentTitle}\n somethingWentWrongText={errorBoundarySomethingWentWrongText}\n >\n {/* eslint-disable-next-line react/jsx-no-useless-fragment */}\n <>{children}</>\n </FDErrorBoundary>\n </FullWidthContainer>\n </StyledInnerWrapper>\n </StyledWrapper>\n </StyledPageContainer>\n );\n};\n\nexport default PageLayout;\n"],"names":["HORIZONTAL_SPACE_CLASSNAME","LEFT_HORIZONTAL_SPACE_CLASSNAME","RIGHT_HORIZONTAL_SPACE_CLASSNAME","VERTICAL_SPACE_CLASSNAME","maxWidth","StyledWrapper","styled","theme","fluid","breakpoints","down","padding","spacing","position","minHeight","StyledActionButtonGrid","Grid","width","paddingTop","StyledHeader","flexWrap","alignItems","paddingBottom","StyledTitleContainer","up","StyledTitleSection","flexGrow","StyledTopSection","paddingLeft","paddingRight","StyledAdd","Add","marginRight","StyledBackButton","IconButton","shouldForwardProp","prop","hasTitleComponent","margin","only","marginLeft","StyledInnerWrapper","StyledHeaderContainer","display","justifyContent","StyledCaption","Typography","lineHeight","StyledPageTitle","fontWeight","StyledPageDivider","Divider","marginBottom","PageTitle","title","_jsx","component","variant","children","StyledPageContainer","useAlternateBackground","backgroundColor","palette","semantic","background","height","PageLayout","props","actionBtnTitle","caption","contextButtons","documentTitle","fullWidth","header","hideHeader","actionButtonLink","openLinkInNewTab","pageHeader","showActionButton","showAddIcon","titleComponent","TitleComponent","toPrevious","toParent","strictToParent","navigate","hideDivider","customActionButtons","titleComponentAfter","errorBoundarySomethingWentWrongText","useTheme","isMobile","useMediaQuery","baseUrl","getMicroFrontendAttribute","actionButtonWithHttps","startsWith","actionButtonLinkFinal","undefined","joinUrlPaths","_jsxs","DocumentTitle","Spacer","size","_Fragment","container","direction","alignContent","map","button","React","isValidElement","Box","onClick","history","length","ArrowLeft02","gap","Button","href","rel","target","FullWidthContainer","FDErrorBoundary","identifier","somethingWentWrongText"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/components/PageLayout/index.tsx"],"sourcesContent":["import React, { type ComponentType, type ReactNode } from 'react';\n\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Divider from '@mui/material/Divider';\nimport IconButton from '@mui/material/IconButton';\nimport { styled, useTheme } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Add from '../../icons/Add';\nimport ArrowLeft02 from '../../icons/ArrowLeft02';\nimport { getMicroFrontendAttribute } from '../../utilities/renderUtilities';\nimport { joinUrlPaths } from '../../utilities/validation';\nimport Grid from '../atoms/Grid';\nimport FDErrorBoundary from '../FDErrorBoundary';\nimport Spacer from '../Spacer';\nimport DocumentTitle from './DocumentTitle';\nimport FullWidthContainer from './FullWidthContainer';\n\nexport const HORIZONTAL_SPACE_CLASSNAME = 'horizontal-content-space';\nexport const LEFT_HORIZONTAL_SPACE_CLASSNAME = 'left-horizontal-content-space';\nexport const RIGHT_HORIZONTAL_SPACE_CLASSNAME = 'right-horizontal-content-space';\nexport const VERTICAL_SPACE_CLASSNAME = 'vertical-content-space';\nexport const maxWidth = 1112;\nconst historyMinLength = 3;\n\nconst StyledWrapper = styled('div')<{ fluid: boolean }>(({ theme, fluid }) => ({\n maxWidth: fluid ? 'none' : maxWidth,\n [theme.breakpoints.down('laptop')]: {\n maxWidth: 'none',\n },\n padding: theme.spacing(2, 4),\n position: 'relative',\n minHeight: '100vh',\n}));\n\nconst StyledActionButtonGrid = styled(Grid)(({ theme }) => ({\n [theme.breakpoints.down('laptop')]: {\n width: '100%',\n paddingTop: theme.spacing(2),\n },\n}));\n\nconst StyledHeader = styled(Grid)(({ theme }) => ({\n flexWrap: 'nowrap',\n alignItems: 'flex-start',\n paddingTop: theme.spacing(3),\n paddingBottom: theme.spacing(3),\n\n [theme.breakpoints.down('laptop')]: {\n paddingTop: theme.spacing(2),\n paddingBottom: theme.spacing(3),\n },\n}));\n\nconst StyledTitleContainer = styled(Grid)(({ theme }) => ({\n paddingTop: theme.spacing(2),\n [theme.breakpoints.up('laptop')]: {\n width: '100%',\n alignItems: 'center',\n },\n [theme.breakpoints.only('mobile')]: {\n marginLeft: theme.spacing(-3),\n marginRight: theme.spacing(-3),\n flexDirection: 'column',\n alignItems: 'flex-start',\n },\n [theme.breakpoints.only('base')]: {\n marginLeft: theme.spacing(-2),\n marginRight: theme.spacing(-2),\n flexDirection: 'column',\n alignItems: 'flex-start',\n },\n}));\n\nconst StyledTitleSection = styled(Grid)(() => ({\n flexGrow: 1,\n}));\n\nconst StyledTopSection = styled('div')(({ theme }) => ({\n maxWidth,\n paddingBottom: theme.spacing(3),\n\n [theme.breakpoints.down('laptop')]: {\n paddingBottom: theme.spacing(2),\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n}));\n\nconst StyledAdd = styled(Add)(({ theme }) => ({\n marginRight: theme.spacing(1),\n}));\n\nconst StyledBackButton = styled(IconButton, {\n shouldForwardProp: (prop) => prop !== 'hasTitleComponent',\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n})<{ hasTitleComponent: boolean; component: any }>(({ theme, hasTitleComponent }) => ({\n margin: hasTitleComponent ? theme.spacing(-0.75, 2, -1.5, -1.5) : theme.spacing(-1.5, 2, -1.5, -1.5),\n\n [theme.breakpoints.only('tablet')]: {\n marginLeft: theme.spacing(-2),\n },\n\n [theme.breakpoints.only('base')]: {\n marginLeft: theme.spacing(-2),\n },\n}));\n\nconst StyledInnerWrapper = styled('div')(({ theme }) => ({\n maxWidth,\n marginLeft: theme.spacing(6),\n marginRight: theme.spacing(4),\n paddingBottom: theme.spacing(2),\n\n [theme.breakpoints.only('tablet')]: {\n marginLeft: 12,\n marginRight: theme.spacing(3),\n },\n\n [theme.breakpoints.only('mobile')]: {\n marginLeft: theme.spacing(3),\n marginRight: theme.spacing(3),\n maxWidth: 'none',\n },\n\n [theme.breakpoints.only('base')]: {\n marginLeft: theme.spacing(2),\n marginRight: theme.spacing(2),\n maxWidth: 'none',\n },\n}));\n\nconst StyledHeaderContainer = styled(Grid)(() => ({\n display: 'flex',\n flexGrow: 1,\n justifyContent: 'flex-end',\n}));\nconst StyledCaption = styled(Typography)<{ component: string }>(() => ({\n lineHeight: '26px',\n}));\n\nconst StyledPageTitle = styled(Typography)<{ component: string }>(() => ({\n fontWeight: 'bold',\n}));\n\nconst StyledPageDivider = styled(Divider)(({ theme }) => ({\n marginBottom: theme.spacing(4),\n}));\n\nexport const PageTitle = ({ title }: { title: ReactNode | string }): JSX.Element => (\n <StyledPageTitle component=\"h2\" variant=\"h5\">\n {title}\n </StyledPageTitle>\n);\n\nconst StyledPageContainer = styled('div')<{ useAlternateBackground: boolean }>(\n ({ useAlternateBackground, theme }) => ({\n backgroundColor: useAlternateBackground\n ? theme.palette.semantic.background['background-alternate']\n : theme.palette.semantic.background['background-base'],\n width: '100%',\n height: '100%',\n }),\n);\n\nexport interface Props {\n actionBtnTitle?: string;\n caption?: ReactNode;\n children: ReactNode;\n contextButtons?: ReactNode[];\n documentTitle: string;\n fluid?: boolean;\n fullWidth?: boolean;\n header?: ReactNode;\n hideHeader?: boolean;\n actionButtonLink?: string;\n pageHeader?: ReactNode;\n showActionButton?: boolean;\n showAddIcon?: boolean;\n title: ReactNode;\n titleComponent?: ComponentType<React.PropsWithChildren<unknown>>;\n titleComponentAfter?: ReactNode;\n toPrevious?: boolean;\n toParent?: string;\n strictToParent?: boolean;\n openLinkInNewTab?: boolean;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n navigate: (to: any) => void;\n hideDivider?: boolean;\n customActionButtons?: ReactNode[];\n useAlternateBackground?: boolean;\n errorBoundarySomethingWentWrongText: string;\n}\n\nconst PageLayout = (props: Props): JSX.Element => {\n const {\n actionBtnTitle,\n caption,\n children,\n contextButtons,\n documentTitle,\n fluid = false,\n fullWidth,\n header,\n hideHeader,\n actionButtonLink,\n openLinkInNewTab = false,\n pageHeader,\n showActionButton,\n showAddIcon,\n title,\n titleComponent: TitleComponent,\n toPrevious,\n toParent,\n strictToParent,\n navigate,\n hideDivider = false,\n customActionButtons,\n useAlternateBackground = false,\n titleComponentAfter,\n errorBoundarySomethingWentWrongText,\n } = props;\n const theme = useTheme();\n\n const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n const baseUrl = getMicroFrontendAttribute('data-portal-base-url') || '/';\n const actionButtonWithHttps: boolean = !!actionButtonLink && actionButtonLink.startsWith('https://');\n const getActionButtonLink = (): string => {\n if (actionButtonWithHttps) {\n return actionButtonLink as string;\n }\n if (actionButtonLink !== undefined) {\n return joinUrlPaths(baseUrl, actionButtonLink);\n }\n return '';\n };\n const actionButtonLinkFinal = getActionButtonLink();\n\n return (\n <StyledPageContainer useAlternateBackground={useAlternateBackground}>\n <StyledWrapper fluid={fluid}>\n {documentTitle && <DocumentTitle>{documentTitle}</DocumentTitle>}\n\n {pageHeader || null}\n <StyledInnerWrapper>\n {pageHeader && <Spacer size={16} variant=\"vertical\" />}\n {!hideHeader && (\n <>\n <StyledHeader container alignItems=\"center\" direction=\"column\">\n <Grid container alignContent=\"space-between\" direction=\"row\">\n <StyledHeaderContainer>\n {contextButtons?.map((button) => (\n <div\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n key={`context-button-${React.isValidElement(button) ? button.props?.['data-testid'] || button.props?.children : 'fallback'}`}\n >\n {button}\n </div>\n ))}\n </StyledHeaderContainer>\n </Grid>\n <StyledTitleContainer container>\n {(toParent || toPrevious) && (\n <Box>\n <StyledBackButton\n aria-label=\"Back\"\n component={'button'}\n data-testid=\"back_button\"\n hasTitleComponent={!!TitleComponent}\n onClick={() => {\n if (toPrevious) {\n navigate(-1);\n } else if (toParent && strictToParent) {\n navigate(toParent);\n } else if (toParent && history.length < historyMinLength) {\n navigate(toParent);\n } else {\n navigate(-1);\n }\n }}\n >\n <ArrowLeft02 />\n </StyledBackButton>\n </Box>\n )}\n\n <StyledTitleSection>\n {TitleComponent ? (\n <TitleComponent />\n ) : (\n <Box alignItems=\"center\" display=\"flex\" gap={2}>\n <PageTitle title={title} />\n {titleComponentAfter}\n </Box>\n )}\n {caption && (\n <StyledCaption component=\"h3\" variant=\"caption\">\n {caption}\n </StyledCaption>\n )}\n </StyledTitleSection>\n\n {showActionButton && (\n <>\n {isMobile && <Spacer size={56} variant=\"vertical\" />}\n <StyledActionButtonGrid>\n <Button\n data-testid={`Action-button-${actionBtnTitle}`}\n fullWidth={true}\n href={openLinkInNewTab || actionButtonWithHttps ? actionButtonLinkFinal : ''}\n onClick={\n !openLinkInNewTab && !actionButtonWithHttps\n ? (): void => {\n navigate(actionButtonLink);\n }\n : (): void => {}\n }\n rel={openLinkInNewTab ? 'noopener noreferrer' : undefined}\n target={openLinkInNewTab ? '_blank' : undefined}\n variant=\"contained\"\n >\n {showAddIcon && <StyledAdd size=\"sm\" />}\n {actionBtnTitle}\n </Button>\n </StyledActionButtonGrid>\n </>\n )}\n {customActionButtons?.map((button) => (\n <div\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n key={`custom-action-button-${React.isValidElement(button) ? button.props?.['data-testid'] || button.props?.children : 'fallback'}`}\n >\n {isMobile && <Spacer size={56} variant=\"vertical\" />}\n {!isMobile && <Spacer size={16} variant=\"vertical\" />}\n <StyledActionButtonGrid>{button}</StyledActionButtonGrid>\n </div>\n ))}\n </StyledTitleContainer>\n </StyledHeader>\n {!hideDivider && <StyledPageDivider />}\n </>\n )}\n <FullWidthContainer fullWidth={fullWidth}>\n {header ? <StyledTopSection>{header}</StyledTopSection> : null}\n <FDErrorBoundary\n identifier={documentTitle}\n somethingWentWrongText={errorBoundarySomethingWentWrongText}\n >\n {/* eslint-disable-next-line react/jsx-no-useless-fragment */}\n <>{children}</>\n </FDErrorBoundary>\n </FullWidthContainer>\n </StyledInnerWrapper>\n </StyledWrapper>\n </StyledPageContainer>\n );\n};\n\nexport default PageLayout;\n"],"names":["HORIZONTAL_SPACE_CLASSNAME","LEFT_HORIZONTAL_SPACE_CLASSNAME","RIGHT_HORIZONTAL_SPACE_CLASSNAME","VERTICAL_SPACE_CLASSNAME","maxWidth","StyledWrapper","styled","theme","fluid","breakpoints","down","padding","spacing","position","minHeight","StyledActionButtonGrid","Grid","width","paddingTop","StyledHeader","flexWrap","alignItems","paddingBottom","StyledTitleContainer","up","only","marginLeft","marginRight","flexDirection","StyledTitleSection","flexGrow","StyledTopSection","paddingLeft","paddingRight","StyledAdd","Add","StyledBackButton","IconButton","shouldForwardProp","prop","hasTitleComponent","margin","StyledInnerWrapper","StyledHeaderContainer","display","justifyContent","StyledCaption","Typography","lineHeight","StyledPageTitle","fontWeight","StyledPageDivider","Divider","marginBottom","PageTitle","title","_jsx","component","variant","children","StyledPageContainer","useAlternateBackground","backgroundColor","palette","semantic","background","height","PageLayout","props","actionBtnTitle","caption","contextButtons","documentTitle","fullWidth","header","hideHeader","actionButtonLink","openLinkInNewTab","pageHeader","showActionButton","showAddIcon","titleComponent","TitleComponent","toPrevious","toParent","strictToParent","navigate","hideDivider","customActionButtons","titleComponentAfter","errorBoundarySomethingWentWrongText","useTheme","isMobile","useMediaQuery","baseUrl","getMicroFrontendAttribute","actionButtonWithHttps","startsWith","actionButtonLinkFinal","undefined","joinUrlPaths","_jsxs","DocumentTitle","Spacer","size","_Fragment","container","direction","alignContent","map","button","React","isValidElement","Box","onClick","history","length","ArrowLeft02","gap","Button","href","rel","target","FullWidthContainer","FDErrorBoundary","identifier","somethingWentWrongText"],"mappings":"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"}
package/dist/components/molecules/AlertGlobal/alertGlobalTokens.cjs.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("../../../utilities/renderUtilities.cjs.js");function r(e){return Object.freeze({__proto__:null,default:e})}const i=n.lazyWithRetry((()=>Promise.resolve().then((function(){return r(require("../../../icons/Diamond/index.cjs.js"))})))),a=n.lazyWithRetry((()=>Promise.resolve().then((function(){return r(require("../../../icons/Alert/index.cjs.js"))})))),s=n.lazyWithRetry((()=>Promise.resolve().then((function(){return r(require("../../../icons/CancelCircle/index.cjs.js"))})))),l=n.lazyWithRetry((()=>Promise.resolve().then((function(){return r(require("../../../icons/CheckmarkCircle/index.cjs.js"))})))),c=n.lazyWithRetry((()=>Promise.resolve().then((function(){return r(require("../../../icons/InformationCircle/index.cjs.js"))})))),o={neutral:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(i,{color:n.palette.semantic.icon["icon-strong"]})}),brand:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(i,{color:n.palette.semantic.icon["icon-primary"]})}),destructive:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(s,{color:n.palette.semantic.icon["icon-error"]})}),warning:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(a,{color:n.palette.semantic.icon["icon-warning"]})}),information:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(c,{color:n.palette.semantic.icon["icon-information"]})}),"neutral-inverse":n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(i,{color:n.palette.semantic.icon["icon-inverse"]})}),"brand-inverse":n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(i,{color:n.palette.semantic.icon["icon-inverse"]})}),success:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(l,{color:n.palette.semantic.icon["icon-success"]})})},u={background:{neutral:e=>e.palette.semantic.fill["fill-weak"],brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],"neutral-inverse":e=>e.palette.semantic.background["background-inverse"],"brand-inverse":e=>e.palette.semantic.fill["fill-primary-strong"]},border:{neutral:e=>e.palette.semantic.stroke["stroke-weak"],brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],"neutral-inverse":()=>"transparent","brand-inverse":()=>"transparent"},text:{neutral:e=>e.palette.semantic.text["text-weak"],brand:e=>e.palette.semantic.text["text-weak"],destructive:e=>e.palette.semantic.text["text-weak"],warning:e=>e.palette.semantic.text["text-weak"],success:e=>e.palette.semantic.text["text-weak"],information:e=>e.palette.semantic.text["text-weak"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-weak"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-weak"]}};exports.getAlertGlobalBackgroundColour=(e,t)=>u.background[t](e),exports.getAlertGlobalBorderColour=(e,t)=>u.border[t](e),exports.getAlertGlobalIcon=(e,t)=>o[t](e),exports.getAlertGlobalTextColour=(e,t)=>u.text[t](e);
2
+ //# sourceMappingURL=alertGlobalTokens.cjs.js.map
package/dist/components/molecules/AlertGlobal/alertGlobalTokens.cjs.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"alertGlobalTokens.cjs.js","sources":["../../../../src/components/molecules/AlertGlobal/alertGlobalTokens.tsx"],"sourcesContent":["import { type ReactElement,Suspense } from 'react';\n\nimport type { Theme } from '@mui/material/styles';\n\nimport { lazyWithRetry } from '@fd/utilities/renderUtilities';\n\nimport type { AlertTones } from '../Alert';\n\nconst DiamondIcon = lazyWithRetry(() => import('@fd/icons/Diamond'));\nconst AlertIcon = lazyWithRetry(() => import('@fd/icons/Alert'));\nconst CancelCircleIcon = lazyWithRetry(() => import('@fd/icons/CancelCircle'));\nconst CheckmarkCircleIcon = lazyWithRetry(() => import('@fd/icons/CheckmarkCircle'));\nconst InformationCircleIcon = lazyWithRetry(() => import('@fd/icons/InformationCircle'));\n\nconst ICONS = {\n neutral: (theme: Theme): ReactElement => (\n <Suspense fallback={null}>\n <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />\n </Suspense>\n ),\n brand: (theme: Theme): ReactElement => (\n <Suspense fallback={null}>\n <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />\n </Suspense>\n ),\n destructive: (theme: Theme): ReactElement => (\n <Suspense fallback={null}>\n <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />\n </Suspense>\n ),\n warning: (theme: Theme): ReactElement => (\n <Suspense fallback={null}>\n <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />\n </Suspense>\n ),\n information: (theme: Theme): ReactElement => (\n <Suspense fallback={null}>\n <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n </Suspense>\n ),\n 'neutral-inverse': (theme: Theme): ReactElement => (\n <Suspense fallback={null}>\n <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n </Suspense>\n ),\n 'brand-inverse': (theme: Theme): ReactElement => (\n <Suspense fallback={null}>\n <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n </Suspense>\n ),\n success: (theme: Theme): ReactElement => (\n <Suspense fallback={null}>\n <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />\n </Suspense>\n ),\n};\n\nconst COLOURS = {\n background: {\n neutral: (theme: Theme): string => theme.palette.semantic.fill['fill-weak'],\n brand: (theme: Theme): string => theme.palette.semantic.fill['fill-primary-weak'],\n destructive: (theme: Theme): string => theme.palette.semantic.fill['fill-error-weak'],\n warning: (theme: Theme): string => theme.palette.semantic.fill['fill-warning-weak'],\n success: (theme: Theme): string => theme.palette.semantic.fill['fill-success-weak'],\n information: (theme: Theme): string => theme.palette.semantic.fill['fill-information-weak'],\n 'neutral-inverse': (theme: Theme): string => theme.palette.semantic.background['background-inverse'],\n 'brand-inverse': (theme: Theme): string => theme.palette.semantic.fill['fill-primary-strong'],\n },\n border: {\n neutral: (theme: Theme): string => theme.palette.semantic.stroke['stroke-weak'],\n brand: (theme: Theme): string => theme.palette.semantic.stroke['stroke-primary-weak'],\n destructive: (theme: Theme): string => theme.palette.semantic.stroke['stroke-error-weak'],\n warning: (theme: Theme): string => theme.palette.semantic.stroke['stroke-warning-weak'],\n success: (theme: Theme): string => theme.palette.semantic.stroke['stroke-success-weak'],\n information: (theme: Theme): string => theme.palette.semantic.stroke['stroke-information-weak'],\n 'neutral-inverse': (): string => 'transparent',\n 'brand-inverse': (): string => 'transparent',\n },\n text: {\n neutral: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n brand: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n destructive: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n warning: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n success: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n information: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n 'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n 'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n },\n};\n/**\n * Returns the icon element for the given theme and alert tone.\n * Values are looked up from the ICONS map.\n * @param theme - MUI theme used to resolve palette colours.\n * @param tone - Alert tone determining which icon to render.\n * @returns ReactElement configured for the provided theme and tone.\n */\nexport const getAlertGlobalIcon = (theme: Theme, tone: AlertTones): ReactElement => ICONS[tone](theme);\n/**\n * Returns the background colour string for the given theme and alert tone.\n * Values are looked up from the COLOURS.background map.\n * @param theme - MUI theme used to resolve palette colours.\n * @param tone - Alert tone determining which background colour to use.\n * @returns string containing the background colour for the provided theme and tone.\n */\nexport const getAlertGlobalBackgroundColour = (theme: Theme, tone: AlertTones): string => COLOURS.background[tone](theme);\n/**\n * Returns the border colour string for the given theme and alert tone.\n * Values are looked up from the COLOURS.border map.\n * @param theme - MUI theme used to resolve palette colours.\n * @param tone - Alert tone determining which border colour to use.\n * @returns string containing the border colour for the provided theme and tone.\n */\nexport const getAlertGlobalBorderColour = (theme: Theme, tone: AlertTones): string => COLOURS.border[tone](theme);\n/**\n * Returns the text colour string for the given theme and alert tone.\n * Values are looked up from the COLOURS.text map.\n * @param theme - MUI theme used to resolve palette colours.\n * @param tone - Alert tone determining which text colour to use.\n * @returns string containing the text colour for the provided theme and tone.e.\n */\nexport const getAlertGlobalTextColour = (theme: Theme, tone: AlertTones): string => COLOURS.text[tone](theme);\n"],"names":["DiamondIcon","lazyWithRetry","Promise","resolve","then","_interopNamespaceDefaultOnly","require","AlertIcon","CancelCircleIcon","CheckmarkCircleIcon","InformationCircleIcon","ICONS","neutral","theme","_jsx","Suspense","fallback","children","color","palette","semantic","icon","brand","destructive","warning","information","success","COLOURS","background","fill","border","stroke","text","tone"],"mappings":"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"}
package/dist/components/molecules/AlertGlobal/alertGlobalTokens.d.ts ADDED
@@ -0,0 +1,38 @@
1
+ import { ReactElement } from 'react';
2
+ import { Theme } from '@mui/material/styles';
3
+ import { AlertTones } from '../Alert/index.js';
4
+
5
+ /**
6
+ * Returns the icon element for the given theme and alert tone.
7
+ * Values are looked up from the ICONS map.
8
+ * @param theme - MUI theme used to resolve palette colours.
9
+ * @param tone - Alert tone determining which icon to render.
10
+ * @returns ReactElement configured for the provided theme and tone.
11
+ */
12
+ declare const getAlertGlobalIcon: (theme: Theme, tone: AlertTones) => ReactElement;
13
+ /**
14
+ * Returns the background colour string for the given theme and alert tone.
15
+ * Values are looked up from the COLOURS.background map.
16
+ * @param theme - MUI theme used to resolve palette colours.
17
+ * @param tone - Alert tone determining which background colour to use.
18
+ * @returns string containing the background colour for the provided theme and tone.
19
+ */
20
+ declare const getAlertGlobalBackgroundColour: (theme: Theme, tone: AlertTones) => string;
21
+ /**
22
+ * Returns the border colour string for the given theme and alert tone.
23
+ * Values are looked up from the COLOURS.border map.
24
+ * @param theme - MUI theme used to resolve palette colours.
25
+ * @param tone - Alert tone determining which border colour to use.
26
+ * @returns string containing the border colour for the provided theme and tone.
27
+ */
28
+ declare const getAlertGlobalBorderColour: (theme: Theme, tone: AlertTones) => string;
29
+ /**
30
+ * Returns the text colour string for the given theme and alert tone.
31
+ * Values are looked up from the COLOURS.text map.
32
+ * @param theme - MUI theme used to resolve palette colours.
33
+ * @param tone - Alert tone determining which text colour to use.
34
+ * @returns string containing the text colour for the provided theme and tone.e.
35
+ */
36
+ declare const getAlertGlobalTextColour: (theme: Theme, tone: AlertTones) => string;
37
+
38
+ export { getAlertGlobalBackgroundColour, getAlertGlobalBorderColour, getAlertGlobalIcon, getAlertGlobalTextColour };
package/dist/components/molecules/AlertGlobal/alertGlobalTokens.js ADDED
@@ -0,0 +1,2 @@
1
+ import{jsx as e}from"react/jsx-runtime";import{Suspense as t}from"react";import{lazyWithRetry as n}from"../../../utilities/renderUtilities.js";const a=n((()=>import("../../../icons/Diamond/index.js"))),i=n((()=>import("../../../icons/Alert/index.js"))),r=n((()=>import("../../../icons/CancelCircle/index.js"))),l=n((()=>import("../../../icons/CheckmarkCircle/index.js"))),c=n((()=>import("../../../icons/InformationCircle/index.js"))),s={neutral:n=>e(t,{fallback:null,children:e(a,{color:n.palette.semantic.icon["icon-strong"]})}),brand:n=>e(t,{fallback:null,children:e(a,{color:n.palette.semantic.icon["icon-primary"]})}),destructive:n=>e(t,{fallback:null,children:e(r,{color:n.palette.semantic.icon["icon-error"]})}),warning:n=>e(t,{fallback:null,children:e(i,{color:n.palette.semantic.icon["icon-warning"]})}),information:n=>e(t,{fallback:null,children:e(c,{color:n.palette.semantic.icon["icon-information"]})}),"neutral-inverse":n=>e(t,{fallback:null,children:e(a,{color:n.palette.semantic.icon["icon-inverse"]})}),"brand-inverse":n=>e(t,{fallback:null,children:e(a,{color:n.palette.semantic.icon["icon-inverse"]})}),success:n=>e(t,{fallback:null,children:e(l,{color:n.palette.semantic.icon["icon-success"]})})},o={background:{neutral:e=>e.palette.semantic.fill["fill-weak"],brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],"neutral-inverse":e=>e.palette.semantic.background["background-inverse"],"brand-inverse":e=>e.palette.semantic.fill["fill-primary-strong"]},border:{neutral:e=>e.palette.semantic.stroke["stroke-weak"],brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],"neutral-inverse":()=>"transparent","brand-inverse":()=>"transparent"},text:{neutral:e=>e.palette.semantic.text["text-weak"],brand:e=>e.palette.semantic.text["text-weak"],destructive:e=>e.palette.semantic.text["text-weak"],warning:e=>e.palette.semantic.text["text-weak"],success:e=>e.palette.semantic.text["text-weak"],information:e=>e.palette.semantic.text["text-weak"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-weak"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-weak"]}},m=(e,t)=>s[t](e),k=(e,t)=>o.background[t](e),p=(e,t)=>o.border[t](e),d=(e,t)=>o.text[t](e);export{k as getAlertGlobalBackgroundColour,p as getAlertGlobalBorderColour,m as getAlertGlobalIcon,d as getAlertGlobalTextColour};
2
+ //# sourceMappingURL=alertGlobalTokens.js.map
package/dist/components/molecules/AlertGlobal/alertGlobalTokens.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"alertGlobalTokens.js","sources":["../../../../src/components/molecules/AlertGlobal/alertGlobalTokens.tsx"],"sourcesContent":["import { type ReactElement,Suspense } from 'react';\n\nimport type { Theme } from '@mui/material/styles';\n\nimport { lazyWithRetry } from '@fd/utilities/renderUtilities';\n\nimport type { AlertTones } from '../Alert';\n\nconst DiamondIcon = lazyWithRetry(() => import('@fd/icons/Diamond'));\nconst AlertIcon = lazyWithRetry(() => import('@fd/icons/Alert'));\nconst CancelCircleIcon = lazyWithRetry(() => import('@fd/icons/CancelCircle'));\nconst CheckmarkCircleIcon = lazyWithRetry(() => import('@fd/icons/CheckmarkCircle'));\nconst InformationCircleIcon = lazyWithRetry(() => import('@fd/icons/InformationCircle'));\n\nconst ICONS = {\n neutral: (theme: Theme): ReactElement => (\n <Suspense fallback={null}>\n <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />\n </Suspense>\n ),\n brand: (theme: Theme): ReactElement => (\n <Suspense fallback={null}>\n <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />\n </Suspense>\n ),\n destructive: (theme: Theme): ReactElement => (\n <Suspense fallback={null}>\n <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />\n </Suspense>\n ),\n warning: (theme: Theme): ReactElement => (\n <Suspense fallback={null}>\n <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />\n </Suspense>\n ),\n information: (theme: Theme): ReactElement => (\n <Suspense fallback={null}>\n <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n </Suspense>\n ),\n 'neutral-inverse': (theme: Theme): ReactElement => (\n <Suspense fallback={null}>\n <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n </Suspense>\n ),\n 'brand-inverse': (theme: Theme): ReactElement => (\n <Suspense fallback={null}>\n <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n </Suspense>\n ),\n success: (theme: Theme): ReactElement => (\n <Suspense fallback={null}>\n <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />\n </Suspense>\n ),\n};\n\nconst COLOURS = {\n background: {\n neutral: (theme: Theme): string => theme.palette.semantic.fill['fill-weak'],\n brand: (theme: Theme): string => theme.palette.semantic.fill['fill-primary-weak'],\n destructive: (theme: Theme): string => theme.palette.semantic.fill['fill-error-weak'],\n warning: (theme: Theme): string => theme.palette.semantic.fill['fill-warning-weak'],\n success: (theme: Theme): string => theme.palette.semantic.fill['fill-success-weak'],\n information: (theme: Theme): string => theme.palette.semantic.fill['fill-information-weak'],\n 'neutral-inverse': (theme: Theme): string => theme.palette.semantic.background['background-inverse'],\n 'brand-inverse': (theme: Theme): string => theme.palette.semantic.fill['fill-primary-strong'],\n },\n border: {\n neutral: (theme: Theme): string => theme.palette.semantic.stroke['stroke-weak'],\n brand: (theme: Theme): string => theme.palette.semantic.stroke['stroke-primary-weak'],\n destructive: (theme: Theme): string => theme.palette.semantic.stroke['stroke-error-weak'],\n warning: (theme: Theme): string => theme.palette.semantic.stroke['stroke-warning-weak'],\n success: (theme: Theme): string => theme.palette.semantic.stroke['stroke-success-weak'],\n information: (theme: Theme): string => theme.palette.semantic.stroke['stroke-information-weak'],\n 'neutral-inverse': (): string => 'transparent',\n 'brand-inverse': (): string => 'transparent',\n },\n text: {\n neutral: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n brand: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n destructive: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n warning: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n success: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n information: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n 'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n 'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n },\n};\n/**\n * Returns the icon element for the given theme and alert tone.\n * Values are looked up from the ICONS map.\n * @param theme - MUI theme used to resolve palette colours.\n * @param tone - Alert tone determining which icon to render.\n * @returns ReactElement configured for the provided theme and tone.\n */\nexport const getAlertGlobalIcon = (theme: Theme, tone: AlertTones): ReactElement => ICONS[tone](theme);\n/**\n * Returns the background colour string for the given theme and alert tone.\n * Values are looked up from the COLOURS.background map.\n * @param theme - MUI theme used to resolve palette colours.\n * @param tone - Alert tone determining which background colour to use.\n * @returns string containing the background colour for the provided theme and tone.\n */\nexport const getAlertGlobalBackgroundColour = (theme: Theme, tone: AlertTones): string => COLOURS.background[tone](theme);\n/**\n * Returns the border colour string for the given theme and alert tone.\n * Values are looked up from the COLOURS.border map.\n * @param theme - MUI theme used to resolve palette colours.\n * @param tone - Alert tone determining which border colour to use.\n * @returns string containing the border colour for the provided theme and tone.\n */\nexport const getAlertGlobalBorderColour = (theme: Theme, tone: AlertTones): string => COLOURS.border[tone](theme);\n/**\n * Returns the text colour string for the given theme and alert tone.\n * Values are looked up from the COLOURS.text map.\n * @param theme - MUI theme used to resolve palette colours.\n * @param tone - Alert tone determining which text colour to use.\n * @returns string containing the text colour for the provided theme and tone.e.\n */\nexport const getAlertGlobalTextColour = (theme: Theme, tone: AlertTones): string => COLOURS.text[tone](theme);\n"],"names":["DiamondIcon","lazyWithRetry","import","AlertIcon","CancelCircleIcon","CheckmarkCircleIcon","InformationCircleIcon","ICONS","neutral","theme","_jsx","Suspense","fallback","children","color","palette","semantic","icon","brand","destructive","warning","information","success","COLOURS","background","fill","border","stroke","text","getAlertGlobalIcon","tone","getAlertGlobalBackgroundColour","getAlertGlobalBorderColour","getAlertGlobalTextColour"],"mappings":"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"}
package/dist/components/molecules/AlertGlobal/index.cjs.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";var e=require("react/jsx-runtime"),t=require("react"),a=require("@mui/material/Alert"),i=require("@mui/material/Box"),l=require("../../atoms/Button/index.cjs.js"),n=require("../../atoms/IconButton/index.cjs.js"),o=require("../ButtonGroup/index.cjs.js"),r=require("../../../icons/Cancel/index.cjs.js"),s=require("@mui/material/styles"),c=require("@mui/material/useMediaQuery"),d=require("@mui/material/styles/useTheme"),u=require("./alertGlobalTokens.cjs.js");const g=s.styled(a,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({alignItems:"center",backgroundColor:u.getAlertGlobalBackgroundColour(e,t),borderBottom:"1px solid",borderRadius:0,borderColor:u.getAlertGlobalBorderColour(e,t),color:u.getAlertGlobalTextColour(e,t),padding:e.spacing(3),paddingTop:e.spacing(1.5),paddingBottom:e.spacing(1.5),width:"100%",display:"flex",position:"relative","& .MuiAlert-icon":{alignSelf:"flex-start"},"& .MuiAlert-message":{display:"flex",alignItems:"center",gap:e.spacing(2),flexGrow:1,minWidth:0},"& .MuiAlert-action":{display:"flex",alignItems:"center",gap:e.spacing(3),marginLeft:"auto"},"& .MuiAlert-action .MuiIconButton-root":{outline:"none",boxShadow:"none",border:"none"},"& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible":{outline:"none",boxShadow:"none"},"& .fd-alert-message":{display:"flex",alignItems:"center",gap:e.spacing(2),width:"100%"},"& .fd-alert-description":{flexGrow:1,minWidth:0},"& .fd-alert-actions-inline":{marginLeft:"auto",display:"none"},"& .fd-alert-actions-action":{display:"flex"},[e.breakpoints.down("tablet")]:{"& .fd-alert-message":{flexDirection:"column",alignItems:"stretch",gap:e.spacing(2)},"& .fd-alert-actions-inline":{marginLeft:0,marginTop:e.spacing(2),width:"100%",justifyContent:"flex-end",display:"flex"},"& .fd-alert-actions-action":{display:"none"},"& .MuiAlert-action":{position:"absolute",top:e.spacing(3),right:e.spacing(3),marginLeft:0}}}))),p=s.styled(i)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(3)}))),m=t.memo((({description:t,tone:a="neutral",onClose:s,action:m,className:f,closeAriaLabel:x="Close","data-fd":h})=>{const b=d(),y=c(b.breakpoints.down("tablet")),j=(m?Array.isArray(m)?m:[m]:[]).map((t=>{const a=t.id??`${t.label.replace(/\s+/g,"-").toLowerCase()}-${t.type??"type"}`;return e.jsx(l.Button,{"data-fd":t["data-fd"]??`action-button-${t.label.replace(/\s+/g,"-").toLowerCase()}`,fdKey:t.label,onClick:t.onClick,size:"small",tone:"neutral",variant:t.type??"secondary",children:t.label},a)})),A=[];return j.length&&!y&&A.push(e.jsx(o,{align:"right",className:"fd-alert-actions-action",layout:"horizontal",size:"small",children:j},"action-group-action")),s&&A.push(e.jsx(n.IconButton,{"aria-label":x,"data-fd":"close-button",onClick:s,size:"small",tone:"neutral",variant:"tertiary",children:e.jsx(r,{})},"close")),e.jsx(g,{action:A.length?e.jsx(p,{children:A}):void 0,className:f,"data-fd":h,icon:u.getAlertGlobalIcon(b,a),role:"alert",tone:a,children:e.jsxs(i,{className:"fd-alert-message",children:[e.jsx(i,{className:"fd-alert-description",children:t}),y&&j.length?e.jsx(o,{align:"right",className:"fd-alert-actions-inline",layout:"horizontal",size:"small",children:j}):null]})})}));m.displayName="AlertGlobal",module.exports=m;
2
+ //# sourceMappingURL=index.cjs.js.map
package/dist/components/molecules/AlertGlobal/index.cjs.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/AlertGlobal/index.tsx"],"sourcesContent":["import { memo, type ReactElement, type ReactNode } from \"react\";\n\nimport MuiAlert from \"@mui/material/Alert\";\n\nimport Box from \"@fd/components/atoms/Box\";\nimport Button from \"@fd/components/atoms/Button\";\nimport type { ButtonType } from \"@fd/components/atoms/Button/getButtonStyles\";\nimport IconButton from \"@fd/components/atoms/IconButton\";\nimport type { AlertTones } from \"@fd/components/molecules/Alert\";\nimport ButtonGroup from \"@fd/components/molecules/ButtonGroup\";\nimport CancelIcon from \"@fd/icons/Cancel\";\nimport styled from \"@fd/utilities/styledUtilities\";\nimport useMediaQuery from \"@fd/utilities/useMediaQuery\";\nimport useTheme from \"@fd/utilities/useTheme\";\n\nimport { getAlertGlobalBackgroundColour, getAlertGlobalBorderColour, getAlertGlobalIcon, getAlertGlobalTextColour } from \"./alertGlobalTokens\";\n\n/**\n * Global alert component for prominent, page-level messages.\n *\n * - Renders an icon and description with optional actions and a close button\n * - `action` accepts a single action object or an array of action objects\n * (use an array to render multiple buttons side-by-side)\n * - Consumers are responsible for providing localized strings for any\n * user-visible text (e.g. `description`, action `label`, `closeAriaLabel`).\n */\nexport interface AlertGlobalProps {\n /**\n * Message content shown in the alert. Provide a localized string.\n */\n description: string;\n /**\n * Visual tone of the alert which controls icon and colors.\n * Defaults to `neutral`.\n */\n tone?: AlertTones;\n /**\n * Called when the close button is pressed. When omitted, no close button is rendered.\n */\n onClose?: () => void;\n /**\n * One or more actions to render as buttons. A single object renders one button;\n * an array renders multiple buttons. Provide localized `label` values.\n */\n action?: AlertAction | AlertAction[];\n /**\n * Accessible label for the close icon button. Provide a localized string.\n * Defaults to \"Close\".\n */\n closeAriaLabel?: string;\n /** Optional CSS class name for the root element. */\n className?: string;\n /** Optional test id for the root element. */\n 'data-fd'?: string;\n}\n\n/**\n * Describes a user action rendered as a button in the alert.\n */\nexport interface AlertAction {\n /** Optional unique identifier for this action. Recommended for stable React keys. */\n id?: string;\n /** Button text. Provide a localized string. */\n label: string;\n /** Visual variant of the button. Defaults to `secondary`. */\n type?: ButtonType;\n /** Click handler for the action. */\n onClick: () => void;\n /** Optional test id applied to the button. */\n 'data-fd'?: string;\n}\n\ninterface StyledAlertProps {\n tone: AlertTones;\n}\n\nconst StyledGlobalAlert = styled(MuiAlert, {\n shouldForwardProp: (prop: string): boolean => !['tone'].includes(prop),\n})<StyledAlertProps>(({ theme, tone }) => ({\n alignItems: 'center',\n backgroundColor: getAlertGlobalBackgroundColour(theme, tone),\n borderBottom: '1px solid',\n borderRadius: 0,\n borderColor: getAlertGlobalBorderColour(theme, tone),\n color: getAlertGlobalTextColour(theme, tone),\n padding: theme.spacing(3),\n paddingTop: theme.spacing(1.5),\n paddingBottom: theme.spacing(1.5),\n width: '100%',\n display: 'flex',\n position: 'relative',\n '& .MuiAlert-icon': {\n alignSelf: 'flex-start',\n },\n '& .MuiAlert-message': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2),\n flexGrow: 1,\n minWidth: 0,\n },\n '& .MuiAlert-action': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(3),\n marginLeft: 'auto',\n },\n '& .MuiAlert-action .MuiIconButton-root': {\n outline: 'none',\n boxShadow: 'none',\n border: 'none',\n },\n '& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible': {\n outline: 'none',\n boxShadow: 'none',\n },\n // Inline actions inside message container\n '& .fd-alert-message': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2),\n width: '100%',\n },\n '& .fd-alert-description': {\n flexGrow: 1,\n minWidth: 0,\n },\n '& .fd-alert-actions-inline': {\n marginLeft: 'auto',\n display: 'none',\n },\n '& .fd-alert-actions-action': {\n display: 'flex',\n },\n // Mobile layout: stack and right-align button group below description\n [theme.breakpoints.down('tablet')]: {\n '& .fd-alert-message': {\n flexDirection: 'column',\n alignItems: 'stretch',\n gap: theme.spacing(2),\n },\n '& .fd-alert-actions-inline': {\n marginLeft: 0,\n marginTop: theme.spacing(2),\n width: '100%',\n justifyContent: 'flex-end',\n display: 'flex',\n },\n '& .fd-alert-actions-action': {\n display: 'none',\n },\n '& .MuiAlert-action': {\n position: 'absolute',\n top: theme.spacing(3),\n right: theme.spacing(3),\n marginLeft: 0,\n },\n },\n}));\n\nconst ActionContainer = styled(Box)(({ theme }): Record<string, unknown> => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(3),\n}));\n\nconst AlertGlobalComponent = ({\n description,\n tone = 'neutral',\n onClose,\n action,\n className,\n closeAriaLabel = 'Close',\n 'data-fd': dataFd,\n}: AlertGlobalProps): ReactElement => {\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n const actionsArray = action ? (Array.isArray(action) ? action : [action]) : [];\n const actionButtons = actionsArray.map((actionItem) => {\n const uniqueKey = actionItem.id ?? `${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}-${actionItem.type ?? 'type'}`\n return (\n <Button\n key={uniqueKey}\n data-fd={actionItem['data-fd'] ?? `action-button-${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}`}\n fdKey={actionItem.label}\n onClick={actionItem.onClick}\n size=\"small\"\n tone=\"neutral\"\n variant={actionItem.type ?? 'secondary'}\n >\n {actionItem.label}\n </Button>\n )\n }\n );\n\n const nodes: ReactNode[] = [];\n if (actionButtons.length && !isMobile) {\n nodes.push(\n <ButtonGroup key=\"action-group-action\" align=\"right\" className=\"fd-alert-actions-action\" layout=\"horizontal\" size=\"small\">\n {actionButtons}\n </ButtonGroup>\n );\n }\n if (onClose) {\n nodes.push(\n <IconButton\n key=\"close\"\n aria-label={closeAriaLabel}\n data-fd=\"close-button\"\n onClick={onClose}\n size=\"small\"\n tone=\"neutral\"\n variant=\"tertiary\"\n >\n <CancelIcon />\n </IconButton>\n );\n }\n\n return (\n <StyledGlobalAlert\n action={nodes.length ? <ActionContainer>{nodes}</ActionContainer> : undefined}\n className={className}\n data-fd={dataFd}\n icon={getAlertGlobalIcon(theme, tone)}\n role=\"alert\"\n tone={tone}\n >\n <Box className=\"fd-alert-message\">\n <Box className=\"fd-alert-description\">{description}</Box>\n {isMobile && actionButtons.length ? (\n <ButtonGroup align=\"right\" className=\"fd-alert-actions-inline\" layout=\"horizontal\" size=\"small\">\n {actionButtons}\n </ButtonGroup>\n ) : null}\n </Box>\n </StyledGlobalAlert>\n );\n};\n\nconst AlertGlobal = memo(AlertGlobalComponent);\nAlertGlobal.displayName = 'AlertGlobal';\n\nexport default AlertGlobal;\n"],"names":["StyledGlobalAlert","styled","MuiAlert","shouldForwardProp","prop","includes","theme","tone","alignItems","backgroundColor","getAlertGlobalBackgroundColour","borderBottom","borderRadius","borderColor","getAlertGlobalBorderColour","color","getAlertGlobalTextColour","padding","spacing","paddingTop","paddingBottom","width","display","position","alignSelf","gap","flexGrow","minWidth","marginLeft","outline","boxShadow","border","breakpoints","down","flexDirection","marginTop","justifyContent","top","right","ActionContainer","Box","AlertGlobal","memo","description","onClose","action","className","closeAriaLabel","dataFd","useTheme","isMobile","useMediaQuery","actionButtons","Array","isArray","map","actionItem","uniqueKey","id","label","replace","toLowerCase","type","_jsx","Button","fdKey","onClick","size","variant","children","nodes","length","push","ButtonGroup","align","layout","IconButton","CancelIcon","undefined","icon","getAlertGlobalIcon","role","_jsxs","displayName"],"mappings":"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"}
package/dist/components/molecules/AlertGlobal/index.d.ts ADDED
@@ -0,0 +1,62 @@
1
+ import * as react from 'react';
2
+ import { ReactElement } from 'react';
3
+ import { ButtonType } from '@fd/components/atoms/Button/getButtonStyles';
4
+ import { AlertTones } from '@fd/components/molecules/Alert';
5
+
6
+ /**
7
+ * Global alert component for prominent, page-level messages.
8
+ *
9
+ * - Renders an icon and description with optional actions and a close button
10
+ * - `action` accepts a single action object or an array of action objects
11
+ * (use an array to render multiple buttons side-by-side)
12
+ * - Consumers are responsible for providing localized strings for any
13
+ * user-visible text (e.g. `description`, action `label`, `closeAriaLabel`).
14
+ */
15
+ interface AlertGlobalProps {
16
+ /**
17
+ * Message content shown in the alert. Provide a localized string.
18
+ */
19
+ description: string;
20
+ /**
21
+ * Visual tone of the alert which controls icon and colors.
22
+ * Defaults to `neutral`.
23
+ */
24
+ tone?: AlertTones;
25
+ /**
26
+ * Called when the close button is pressed. When omitted, no close button is rendered.
27
+ */
28
+ onClose?: () => void;
29
+ /**
30
+ * One or more actions to render as buttons. A single object renders one button;
31
+ * an array renders multiple buttons. Provide localized `label` values.
32
+ */
33
+ action?: AlertAction | AlertAction[];
34
+ /**
35
+ * Accessible label for the close icon button. Provide a localized string.
36
+ * Defaults to "Close".
37
+ */
38
+ closeAriaLabel?: string;
39
+ /** Optional CSS class name for the root element. */
40
+ className?: string;
41
+ /** Optional test id for the root element. */
42
+ 'data-fd'?: string;
43
+ }
44
+ /**
45
+ * Describes a user action rendered as a button in the alert.
46
+ */
47
+ interface AlertAction {
48
+ /** Optional unique identifier for this action. Recommended for stable React keys. */
49
+ id?: string;
50
+ /** Button text. Provide a localized string. */
51
+ label: string;
52
+ /** Visual variant of the button. Defaults to `secondary`. */
53
+ type?: ButtonType;
54
+ /** Click handler for the action. */
55
+ onClick: () => void;
56
+ /** Optional test id applied to the button. */
57
+ 'data-fd'?: string;
58
+ }
59
+ declare const AlertGlobal: react.MemoExoticComponent<({ description, tone, onClose, action, className, closeAriaLabel, "data-fd": dataFd, }: AlertGlobalProps) => ReactElement>;
60
+
61
+ export { AlertGlobal as default };
62
+ export type { AlertAction, AlertGlobalProps };
package/dist/components/molecules/AlertGlobal/index.js ADDED
@@ -0,0 +1,2 @@
1
+ import{jsx as e,jsxs as t}from"react/jsx-runtime";import{memo as a}from"react";import i from"@mui/material/Alert";import o from"@mui/material/Box";import{Button as n}from"../../atoms/Button/index.js";import{IconButton as l}from"../../atoms/IconButton/index.js";import r from"../ButtonGroup/index.js";import s from"../../../icons/Cancel/index.js";import{styled as c}from"@mui/material/styles";import d from"@mui/material/useMediaQuery";import m from"@mui/material/styles/useTheme";import{getAlertGlobalTextColour as p,getAlertGlobalBorderColour as u,getAlertGlobalBackgroundColour as f,getAlertGlobalIcon as g}from"./alertGlobalTokens.js";const h=c(i,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({alignItems:"center",backgroundColor:f(e,t),borderBottom:"1px solid",borderRadius:0,borderColor:u(e,t),color:p(e,t),padding:e.spacing(3),paddingTop:e.spacing(1.5),paddingBottom:e.spacing(1.5),width:"100%",display:"flex",position:"relative","& .MuiAlert-icon":{alignSelf:"flex-start"},"& .MuiAlert-message":{display:"flex",alignItems:"center",gap:e.spacing(2),flexGrow:1,minWidth:0},"& .MuiAlert-action":{display:"flex",alignItems:"center",gap:e.spacing(3),marginLeft:"auto"},"& .MuiAlert-action .MuiIconButton-root":{outline:"none",boxShadow:"none",border:"none"},"& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible":{outline:"none",boxShadow:"none"},"& .fd-alert-message":{display:"flex",alignItems:"center",gap:e.spacing(2),width:"100%"},"& .fd-alert-description":{flexGrow:1,minWidth:0},"& .fd-alert-actions-inline":{marginLeft:"auto",display:"none"},"& .fd-alert-actions-action":{display:"flex"},[e.breakpoints.down("tablet")]:{"& .fd-alert-message":{flexDirection:"column",alignItems:"stretch",gap:e.spacing(2)},"& .fd-alert-actions-inline":{marginLeft:0,marginTop:e.spacing(2),width:"100%",justifyContent:"flex-end",display:"flex"},"& .fd-alert-actions-action":{display:"none"},"& .MuiAlert-action":{position:"absolute",top:e.spacing(3),right:e.spacing(3),marginLeft:0}}}))),y=c(o)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(3)}))),b=a((({description:a,tone:i="neutral",onClose:c,action:p,className:u,closeAriaLabel:f="Close","data-fd":b})=>{const x=m(),w=d(x.breakpoints.down("tablet")),A=(p?Array.isArray(p)?p:[p]:[]).map((t=>{const a=t.id??`${t.label.replace(/\s+/g,"-").toLowerCase()}-${t.type??"type"}`;return e(n,{"data-fd":t["data-fd"]??`action-button-${t.label.replace(/\s+/g,"-").toLowerCase()}`,fdKey:t.label,onClick:t.onClick,size:"small",tone:"neutral",variant:t.type??"secondary",children:t.label},a)})),C=[];return A.length&&!w&&C.push(e(r,{align:"right",className:"fd-alert-actions-action",layout:"horizontal",size:"small",children:A},"action-group-action")),c&&C.push(e(l,{"aria-label":f,"data-fd":"close-button",onClick:c,size:"small",tone:"neutral",variant:"tertiary",children:e(s,{})},"close")),e(h,{action:C.length?e(y,{children:C}):void 0,className:u,"data-fd":b,icon:g(x,i),role:"alert",tone:i,children:t(o,{className:"fd-alert-message",children:[e(o,{className:"fd-alert-description",children:a}),w&&A.length?e(r,{align:"right",className:"fd-alert-actions-inline",layout:"horizontal",size:"small",children:A}):null]})})}));b.displayName="AlertGlobal";export{b as default};
2
+ //# sourceMappingURL=index.js.map
package/dist/components/molecules/AlertGlobal/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../../../src/components/molecules/AlertGlobal/index.tsx"],"sourcesContent":["import { memo, type ReactElement, type ReactNode } from \"react\";\n\nimport MuiAlert from \"@mui/material/Alert\";\n\nimport Box from \"@fd/components/atoms/Box\";\nimport Button from \"@fd/components/atoms/Button\";\nimport type { ButtonType } from \"@fd/components/atoms/Button/getButtonStyles\";\nimport IconButton from \"@fd/components/atoms/IconButton\";\nimport type { AlertTones } from \"@fd/components/molecules/Alert\";\nimport ButtonGroup from \"@fd/components/molecules/ButtonGroup\";\nimport CancelIcon from \"@fd/icons/Cancel\";\nimport styled from \"@fd/utilities/styledUtilities\";\nimport useMediaQuery from \"@fd/utilities/useMediaQuery\";\nimport useTheme from \"@fd/utilities/useTheme\";\n\nimport { getAlertGlobalBackgroundColour, getAlertGlobalBorderColour, getAlertGlobalIcon, getAlertGlobalTextColour } from \"./alertGlobalTokens\";\n\n/**\n * Global alert component for prominent, page-level messages.\n *\n * - Renders an icon and description with optional actions and a close button\n * - `action` accepts a single action object or an array of action objects\n * (use an array to render multiple buttons side-by-side)\n * - Consumers are responsible for providing localized strings for any\n * user-visible text (e.g. `description`, action `label`, `closeAriaLabel`).\n */\nexport interface AlertGlobalProps {\n /**\n * Message content shown in the alert. Provide a localized string.\n */\n description: string;\n /**\n * Visual tone of the alert which controls icon and colors.\n * Defaults to `neutral`.\n */\n tone?: AlertTones;\n /**\n * Called when the close button is pressed. When omitted, no close button is rendered.\n */\n onClose?: () => void;\n /**\n * One or more actions to render as buttons. A single object renders one button;\n * an array renders multiple buttons. Provide localized `label` values.\n */\n action?: AlertAction | AlertAction[];\n /**\n * Accessible label for the close icon button. Provide a localized string.\n * Defaults to \"Close\".\n */\n closeAriaLabel?: string;\n /** Optional CSS class name for the root element. */\n className?: string;\n /** Optional test id for the root element. */\n 'data-fd'?: string;\n}\n\n/**\n * Describes a user action rendered as a button in the alert.\n */\nexport interface AlertAction {\n /** Optional unique identifier for this action. Recommended for stable React keys. */\n id?: string;\n /** Button text. Provide a localized string. */\n label: string;\n /** Visual variant of the button. Defaults to `secondary`. */\n type?: ButtonType;\n /** Click handler for the action. */\n onClick: () => void;\n /** Optional test id applied to the button. */\n 'data-fd'?: string;\n}\n\ninterface StyledAlertProps {\n tone: AlertTones;\n}\n\nconst StyledGlobalAlert = styled(MuiAlert, {\n shouldForwardProp: (prop: string): boolean => !['tone'].includes(prop),\n})<StyledAlertProps>(({ theme, tone }) => ({\n alignItems: 'center',\n backgroundColor: getAlertGlobalBackgroundColour(theme, tone),\n borderBottom: '1px solid',\n borderRadius: 0,\n borderColor: getAlertGlobalBorderColour(theme, tone),\n color: getAlertGlobalTextColour(theme, tone),\n padding: theme.spacing(3),\n paddingTop: theme.spacing(1.5),\n paddingBottom: theme.spacing(1.5),\n width: '100%',\n display: 'flex',\n position: 'relative',\n '& .MuiAlert-icon': {\n alignSelf: 'flex-start',\n },\n '& .MuiAlert-message': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2),\n flexGrow: 1,\n minWidth: 0,\n },\n '& .MuiAlert-action': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(3),\n marginLeft: 'auto',\n },\n '& .MuiAlert-action .MuiIconButton-root': {\n outline: 'none',\n boxShadow: 'none',\n border: 'none',\n },\n '& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible': {\n outline: 'none',\n boxShadow: 'none',\n },\n // Inline actions inside message container\n '& .fd-alert-message': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2),\n width: '100%',\n },\n '& .fd-alert-description': {\n flexGrow: 1,\n minWidth: 0,\n },\n '& .fd-alert-actions-inline': {\n marginLeft: 'auto',\n display: 'none',\n },\n '& .fd-alert-actions-action': {\n display: 'flex',\n },\n // Mobile layout: stack and right-align button group below description\n [theme.breakpoints.down('tablet')]: {\n '& .fd-alert-message': {\n flexDirection: 'column',\n alignItems: 'stretch',\n gap: theme.spacing(2),\n },\n '& .fd-alert-actions-inline': {\n marginLeft: 0,\n marginTop: theme.spacing(2),\n width: '100%',\n justifyContent: 'flex-end',\n display: 'flex',\n },\n '& .fd-alert-actions-action': {\n display: 'none',\n },\n '& .MuiAlert-action': {\n position: 'absolute',\n top: theme.spacing(3),\n right: theme.spacing(3),\n marginLeft: 0,\n },\n },\n}));\n\nconst ActionContainer = styled(Box)(({ theme }): Record<string, unknown> => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(3),\n}));\n\nconst AlertGlobalComponent = ({\n description,\n tone = 'neutral',\n onClose,\n action,\n className,\n closeAriaLabel = 'Close',\n 'data-fd': dataFd,\n}: AlertGlobalProps): ReactElement => {\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n const actionsArray = action ? (Array.isArray(action) ? action : [action]) : [];\n const actionButtons = actionsArray.map((actionItem) => {\n const uniqueKey = actionItem.id ?? `${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}-${actionItem.type ?? 'type'}`\n return (\n <Button\n key={uniqueKey}\n data-fd={actionItem['data-fd'] ?? `action-button-${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}`}\n fdKey={actionItem.label}\n onClick={actionItem.onClick}\n size=\"small\"\n tone=\"neutral\"\n variant={actionItem.type ?? 'secondary'}\n >\n {actionItem.label}\n </Button>\n )\n }\n );\n\n const nodes: ReactNode[] = [];\n if (actionButtons.length && !isMobile) {\n nodes.push(\n <ButtonGroup key=\"action-group-action\" align=\"right\" className=\"fd-alert-actions-action\" layout=\"horizontal\" size=\"small\">\n {actionButtons}\n </ButtonGroup>\n );\n }\n if (onClose) {\n nodes.push(\n <IconButton\n key=\"close\"\n aria-label={closeAriaLabel}\n data-fd=\"close-button\"\n onClick={onClose}\n size=\"small\"\n tone=\"neutral\"\n variant=\"tertiary\"\n >\n <CancelIcon />\n </IconButton>\n );\n }\n\n return (\n <StyledGlobalAlert\n action={nodes.length ? <ActionContainer>{nodes}</ActionContainer> : undefined}\n className={className}\n data-fd={dataFd}\n icon={getAlertGlobalIcon(theme, tone)}\n role=\"alert\"\n tone={tone}\n >\n <Box className=\"fd-alert-message\">\n <Box className=\"fd-alert-description\">{description}</Box>\n {isMobile && actionButtons.length ? (\n <ButtonGroup align=\"right\" className=\"fd-alert-actions-inline\" layout=\"horizontal\" size=\"small\">\n {actionButtons}\n </ButtonGroup>\n ) : null}\n </Box>\n </StyledGlobalAlert>\n );\n};\n\nconst AlertGlobal = memo(AlertGlobalComponent);\nAlertGlobal.displayName = 'AlertGlobal';\n\nexport default AlertGlobal;\n"],"names":["StyledGlobalAlert","styled","MuiAlert","shouldForwardProp","prop","includes","theme","tone","alignItems","backgroundColor","getAlertGlobalBackgroundColour","borderBottom","borderRadius","borderColor","getAlertGlobalBorderColour","color","getAlertGlobalTextColour","padding","spacing","paddingTop","paddingBottom","width","display","position","alignSelf","gap","flexGrow","minWidth","marginLeft","outline","boxShadow","border","breakpoints","down","flexDirection","marginTop","justifyContent","top","right","ActionContainer","Box","AlertGlobal","memo","description","onClose","action","className","closeAriaLabel","dataFd","useTheme","isMobile","useMediaQuery","actionButtons","Array","isArray","map","actionItem","uniqueKey","id","label","replace","toLowerCase","type","_jsx","Button","fdKey","onClick","size","variant","children","nodes","length","push","ButtonGroup","align","layout","IconButton","CancelIcon","undefined","icon","getAlertGlobalIcon","role","_jsxs","displayName"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flipdish/portal-library",
3
- "version": "7.3.0",
3
+ "version": "7.3.1",
4
4
  "files": [
5
5
  "dist"
6
6
  ],