@flipdish/portal-library 8.1.0 → 8.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/molecules/Alert/index.cjs.js +1 -1
  2. package/dist/components/molecules/Alert/index.cjs.js.map +1 -1
  3. package/dist/components/molecules/Alert/index.d.ts +4 -2
  4. package/dist/components/molecules/Alert/index.js +1 -1
  5. package/dist/components/molecules/Alert/index.js.map +1 -1
  6. package/package.json +1 -1
package/dist/components/molecules/Alert/index.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Alert"),a=require("@mui/material/AlertTitle"),n=require("@mui/material/Box"),i=require("@mui/material/styles"),s=require("../../../icons/Alert/index.cjs.js"),l=require("../../../icons/CancelCircle/index.cjs.js"),o=require("../../../icons/CheckmarkCircle/index.cjs.js"),c=require("../../../icons/Diamond/index.cjs.js"),m=require("../../../icons/InformationCircle/index.cjs.js"),d=require("../../atoms/Button/index.cjs.js"),u=require("../../atoms/Link/index.cjs.js");const x={neutral:t=>e.jsx(c,{color:t.palette.semantic.icon["icon-strong"]}),brand:t=>e.jsx(c,{color:t.palette.semantic.icon["icon-primary"]}),destructive:t=>e.jsx(l,{color:t.palette.semantic.icon["icon-error"]}),warning:t=>e.jsx(s,{color:t.palette.semantic.icon["icon-warning"]}),information:t=>e.jsx(m,{color:t.palette.semantic.icon["icon-information"]}),"neutral-inverse":t=>e.jsx(c,{color:t.palette.semantic.icon["icon-inverse"]}),"brand-inverse":t=>e.jsx(c,{color:t.palette.semantic.icon["icon-inverse"]}),success:t=>e.jsx(o,{color:t.palette.semantic.icon["icon-success"]})},p={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":e=>"transparent","brand-inverse":e=>"transparent"},header:{neutral:e=>e.palette.semantic.text["text-strong"],brand:e=>e.palette.semantic.text["text-strong"],destructive:e=>e.palette.semantic.text["text-strong"],warning:e=>e.palette.semantic.text["text-strong"],success:e=>e.palette.semantic.text["text-strong"],information:e=>e.palette.semantic.text["text-strong"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-strong"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-strong"]},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"]}},k=(e,t)=>x[t](e),f=(e,t)=>p.background[t](e),b=(e,t)=>p.border[t](e),w=(e,t)=>p.header[t](e),j=(e,t)=>p.text[t](e),g=i.styled(n)((()=>({marginTop:"16px"}))),v=i.styled(u.Link)((()=>({padding:0}))),y=i.styled(r,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({backgroundColor:f(e,t),border:"1px solid",borderColor:b(e,t),color:j(e,t)}))),h=t.memo((({title:r,description:s,tone:l="neutral",icon:o,onClose:c,className:m,fdKey:u,action:x})=>{const p=i.useTheme(),f=t.useId(),b=Boolean(r),j=b?`alert-title-${u??f}`:void 0,h=`alert-description-${u??f}`;return e.jsxs(y,{"aria-describedby":h,"aria-labelledby":j,className:m,"data-fd":u,icon:void 0===o?k(p,l):o,onClose:c,role:"alert",tone:l,children:[b&&e.jsx(a,{color:w(p,l),id:j,children:r}),e.jsx(n,{id:h,children:s}),(()=>{if(!x)return null;const t=r?`${x.label} - ${r}`:x.label;if("link"===x.kind){const r=x.fdKey??`action-link-${x.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(g,{children:e.jsx(v,{"aria-label":t,fdKey:r,href:x.href,rel:x.rel,target:x.target,children:x.label})})}const a=x.fdKey??`action-button-${x.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(g,{children:e.jsx(d.Button,{"aria-label":t,fdKey:a,onClick:x.onClick,size:"small",variant:x.type??"primary",children:x.label})})})()]})}));h.displayName="Alert",module.exports=h;
1
+ "use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Alert"),a=require("@mui/material/AlertTitle"),n=require("@mui/material/Box"),i=require("@mui/material/styles"),s=require("../../../icons/Alert/index.cjs.js"),l=require("../../../icons/CancelCircle/index.cjs.js"),o=require("../../../icons/CheckmarkCircle/index.cjs.js"),c=require("../../../icons/Diamond/index.cjs.js"),m=require("../../../icons/InformationCircle/index.cjs.js"),d=require("../../atoms/Button/index.cjs.js"),u=require("../../atoms/Link/index.cjs.js");const x={neutral:t=>e.jsx(c,{color:t.palette.semantic.icon["icon-strong"]}),brand:t=>e.jsx(c,{color:t.palette.semantic.icon["icon-primary"]}),destructive:t=>e.jsx(l,{color:t.palette.semantic.icon["icon-error"]}),warning:t=>e.jsx(s,{color:t.palette.semantic.icon["icon-warning"]}),information:t=>e.jsx(m,{color:t.palette.semantic.icon["icon-information"]}),"neutral-inverse":t=>e.jsx(c,{color:t.palette.semantic.icon["icon-inverse"]}),"brand-inverse":t=>e.jsx(c,{color:t.palette.semantic.icon["icon-inverse"]}),success:t=>e.jsx(o,{color:t.palette.semantic.icon["icon-success"]})},p={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":e=>"transparent","brand-inverse":e=>"transparent"},header:{neutral:e=>e.palette.semantic.text["text-strong"],brand:e=>e.palette.semantic.text["text-strong"],destructive:e=>e.palette.semantic.text["text-strong"],warning:e=>e.palette.semantic.text["text-strong"],success:e=>e.palette.semantic.text["text-strong"],information:e=>e.palette.semantic.text["text-strong"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-strong"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-strong"]},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"]}},k=(e,t)=>x[t](e),f=(e,t)=>p.background[t](e),b=(e,t)=>p.border[t](e),w=(e,t)=>p.header[t](e),j=(e,t)=>p.text[t](e),g=i.styled(n)((()=>({marginTop:"16px"}))),v=i.styled(u.Link)((()=>({padding:0}))),y=i.styled(r,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({backgroundColor:f(e,t),border:"1px solid",borderColor:b(e,t),color:j(e,t)}))),h=t.memo((({title:r,description:s,children:l,tone:o="neutral",icon:c,onClose:m,className:u,fdKey:x,action:p})=>{const f=i.useTheme(),b=t.useId(),j=l??s,h=Boolean(r),q=null!=j,C=h?`alert-title-${x??b}`:void 0,$=q?`alert-description-${x??b}`:void 0;return e.jsxs(y,{"aria-describedby":$,"aria-labelledby":C,className:u,"data-fd":x,icon:void 0===c?k(f,o):c,onClose:m,role:"alert",tone:o,children:[h&&e.jsx(a,{color:w(f,o),id:C,children:r}),q&&e.jsx(n,{id:$,children:j}),(()=>{if(!p)return null;const t=r?`${p.label} - ${r}`:p.label;if("link"===p.kind){const r=p.fdKey??`action-link-${p.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(g,{children:e.jsx(v,{"aria-label":t,fdKey:r,href:p.href,rel:p.rel,target:p.target,children:p.label})})}const a=p.fdKey??`action-button-${p.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(g,{children:e.jsx(d.Button,{"aria-label":t,fdKey:a,onClick:p.onClick,size:"small",variant:p.type??"primary",children:p.label})})})()]})}));h.displayName="Alert",module.exports=h;
2
2
  //# sourceMappingURL=index.cjs.js.map
package/dist/components/molecules/Alert/index.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Alert/index.tsx"],"sourcesContent":["import { memo, type ReactNode, useId } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\nimport MuiAlertTitle from '@mui/material/AlertTitle';\nimport Box from '@mui/material/Box';\nimport { styled, type Theme, useTheme } from '@mui/material/styles';\n\nimport AlertIcon from '../../../icons/Alert';\nimport CancelCircleIcon from '../../../icons/CancelCircle';\nimport CheckmarkCircleIcon from '../../../icons/CheckmarkCircle';\nimport DiamondIcon from '../../../icons/Diamond';\nimport InformationCircleIcon from '../../../icons/InformationCircle';\nimport Button from '../../atoms/Button';\nimport type { ButtonType } from '../../atoms/Button/getButtonStyles';\nimport Link from '../../atoms/Link';\n\n/** Visual tone of the alert */\nexport type AlertTones =\n | 'brand-inverse'\n | 'brand'\n | 'destructive'\n | 'information'\n | 'neutral-inverse'\n | 'neutral'\n | 'success'\n | 'warning';\n\n/** Props for the Alert component */\nexport interface AlertProps {\n /** Optional main heading text of the alert */\n title?: string;\n /** Detailed description text of the alert */\n description: string;\n /** Visual tone of the alert */\n tone?: AlertTones;\n /** Optional icon override; pass null to hide the icon */\n icon?: ReactNode | null;\n /** Callback function when the alert is closed */\n onClose?: () => void;\n /** Action configuration (button by default, or link) */\n action?: AlertAction;\n /** Additional CSS class names */\n className?: string;\n /** Test ID for testing and automation */\n fdKey?: string;\n}\n\nexport type AlertAction =\n | {\n /** Defaults to button when omitted */\n kind?: 'button';\n /** Text label for the action button */\n label: string;\n /** Visual style of the action button */\n type?: ButtonType;\n /** Callback function when the action button is clicked */\n onClick: () => void;\n /** Test ID for the action button */\n fdKey?: string;\n }\n | {\n /** Render a link action */\n kind: 'link';\n /** Text label for the link */\n label: string;\n /** Destination URL */\n href: string;\n /** Target for the link */\n target?: '_blank' | '_parent' | '_self' | '_top';\n /** rel attribute for the link */\n rel?: string;\n /** Test ID for the link */\n fdKey?: string;\n };\n\nconst ICONS = {\n neutral: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />,\n brand: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />,\n destructive: (theme: Theme): JSX.Element => (\n <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />\n ),\n warning: (theme: Theme): JSX.Element => <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />,\n information: (theme: Theme): JSX.Element => (\n <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n ),\n 'neutral-inverse': (theme: Theme): JSX.Element => (\n <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n ),\n 'brand-inverse': (theme: Theme): JSX.Element => (\n <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n ),\n success: (theme: Theme): JSX.Element => (\n <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />\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': (_theme: Theme): string => 'transparent',\n 'brand-inverse': (_theme: Theme): string => 'transparent',\n },\n header: {\n neutral: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n brand: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n destructive: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n warning: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n success: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n information: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n 'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\n 'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\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\nconst getIcon = (theme: Theme, tone: AlertTones): JSX.Element => {\n return ICONS[tone](theme);\n};\n\nconst getBackgroundColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.background[tone](theme);\n};\n\nconst getBorderColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.border[tone](theme);\n};\n\nconst getHeaderColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.header[tone](theme);\n};\n\nconst getTextColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.text[tone](theme);\n};\n\ninterface StyledAlertProps {\n tone: AlertTones;\n}\n\nconst StyledActionContainer = styled(Box)(() => ({\n marginTop: '16px',\n}));\n\nconst StyledActionLink = styled(Link)(() => ({\n padding: 0,\n}));\n\nconst StyledAlert = styled(MuiAlert, {\n shouldForwardProp: (prop) => !['tone'].includes(prop as string),\n})<StyledAlertProps>(({ theme, tone }) => ({\n backgroundColor: getBackgroundColour(theme, tone),\n border: '1px solid',\n borderColor: getBorderColour(theme, tone),\n color: getTextColour(theme, tone),\n}));\n\n/**\n * Alert component is used to display important messages or notifications to users.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional action button and close button.\n *\n * The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst Alert = memo(\n ({ title, description, tone = 'neutral', icon, onClose, className, fdKey, action }: AlertProps) => {\n const theme = useTheme();\n const alertId = useId();\n const hasTitle = Boolean(title);\n const titleId = hasTitle ? `alert-title-${fdKey ?? alertId}` : undefined;\n const descriptionId = `alert-description-${fdKey ?? alertId}`;\n\n const renderAction = (): JSX.Element | null => {\n if (!action) {\n return null;\n }\n\n const actionLabel = title ? `${action.label} - ${title}` : action.label;\n\n if (action.kind === 'link') {\n const actionFdKey = action.fdKey ?? `action-link-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <StyledActionContainer>\n <StyledActionLink\n aria-label={actionLabel}\n fdKey={actionFdKey}\n href={action.href}\n rel={action.rel}\n target={action.target}\n >\n {action.label}\n </StyledActionLink>\n </StyledActionContainer>\n );\n }\n\n const actionFdKey = action.fdKey ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <StyledActionContainer>\n <Button\n aria-label={actionLabel}\n fdKey={actionFdKey}\n onClick={action.onClick}\n size=\"small\"\n variant={action.type ?? 'primary'}\n >\n {action.label}\n </Button>\n </StyledActionContainer>\n );\n };\n\n return (\n <StyledAlert\n aria-describedby={descriptionId}\n aria-labelledby={titleId}\n className={className}\n data-fd={fdKey}\n icon={icon === undefined ? getIcon(theme, tone) : icon}\n onClose={onClose}\n role=\"alert\"\n tone={tone}\n >\n {hasTitle && (\n <MuiAlertTitle color={getHeaderColour(theme, tone)} id={titleId}>\n {title}\n </MuiAlertTitle>\n )}\n <Box id={descriptionId}>{description}</Box>\n {renderAction()}\n </StyledAlert>\n );\n },\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"names":["ICONS","neutral","theme","_jsx","DiamondIcon","color","palette","semantic","icon","brand","destructive","CancelCircleIcon","warning","AlertIcon","information","InformationCircleIcon","success","CheckmarkCircleIcon","COLOURS","background","fill","border","stroke","_theme","header","text","getIcon","tone","getBackgroundColour","getBorderColour","getHeaderColour","getTextColour","StyledActionContainer","styled","Box","marginTop","StyledActionLink","Link","padding","StyledAlert","MuiAlert","shouldForwardProp","prop","includes","backgroundColor","borderColor","Alert","memo","title","description","onClose","className","fdKey","action","useTheme","alertId","useId","hasTitle","Boolean","titleId","undefined","descriptionId","_jsxs","role","children","MuiAlertTitle","id","actionLabel","label","kind","actionFdKey","replace","toLowerCase","href","rel","target","Button","onClick","size","variant","type","renderAction","displayName"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Alert/index.tsx"],"sourcesContent":["import { memo, type ReactNode, useId } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\nimport MuiAlertTitle from '@mui/material/AlertTitle';\nimport Box from '@mui/material/Box';\nimport { styled, type Theme, useTheme } from '@mui/material/styles';\n\nimport AlertIcon from '../../../icons/Alert';\nimport CancelCircleIcon from '../../../icons/CancelCircle';\nimport CheckmarkCircleIcon from '../../../icons/CheckmarkCircle';\nimport DiamondIcon from '../../../icons/Diamond';\nimport InformationCircleIcon from '../../../icons/InformationCircle';\nimport Button from '../../atoms/Button';\nimport type { ButtonType } from '../../atoms/Button/getButtonStyles';\nimport Link from '../../atoms/Link';\n\n/** Visual tone of the alert */\nexport type AlertTones =\n | 'brand-inverse'\n | 'brand'\n | 'destructive'\n | 'information'\n | 'neutral-inverse'\n | 'neutral'\n | 'success'\n | 'warning';\n\n/** Props for the Alert component */\nexport interface AlertProps {\n /** Optional main heading text of the alert */\n title?: string;\n /** Detailed description text of the alert */\n description?: string;\n /** Optional custom content; when provided it replaces description */\n children?: ReactNode;\n /** Visual tone of the alert */\n tone?: AlertTones;\n /** Optional icon override; pass null to hide the icon */\n icon?: ReactNode | null;\n /** Callback function when the alert is closed */\n onClose?: () => void;\n /** Action configuration (button by default, or link) */\n action?: AlertAction;\n /** Additional CSS class names */\n className?: string;\n /** Test ID for testing and automation */\n fdKey?: string;\n}\n\nexport type AlertAction =\n | {\n /** Defaults to button when omitted */\n kind?: 'button';\n /** Text label for the action button */\n label: string;\n /** Visual style of the action button */\n type?: ButtonType;\n /** Callback function when the action button is clicked */\n onClick: () => void;\n /** Test ID for the action button */\n fdKey?: string;\n }\n | {\n /** Render a link action */\n kind: 'link';\n /** Text label for the link */\n label: string;\n /** Destination URL */\n href: string;\n /** Target for the link */\n target?: '_blank' | '_parent' | '_self' | '_top';\n /** rel attribute for the link */\n rel?: string;\n /** Test ID for the link */\n fdKey?: string;\n };\n\nconst ICONS = {\n neutral: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />,\n brand: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />,\n destructive: (theme: Theme): JSX.Element => (\n <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />\n ),\n warning: (theme: Theme): JSX.Element => <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />,\n information: (theme: Theme): JSX.Element => (\n <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n ),\n 'neutral-inverse': (theme: Theme): JSX.Element => (\n <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n ),\n 'brand-inverse': (theme: Theme): JSX.Element => (\n <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n ),\n success: (theme: Theme): JSX.Element => (\n <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />\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': (_theme: Theme): string => 'transparent',\n 'brand-inverse': (_theme: Theme): string => 'transparent',\n },\n header: {\n neutral: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n brand: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n destructive: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n warning: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n success: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n information: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n 'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\n 'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\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\nconst getIcon = (theme: Theme, tone: AlertTones): JSX.Element => {\n return ICONS[tone](theme);\n};\n\nconst getBackgroundColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.background[tone](theme);\n};\n\nconst getBorderColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.border[tone](theme);\n};\n\nconst getHeaderColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.header[tone](theme);\n};\n\nconst getTextColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.text[tone](theme);\n};\n\ninterface StyledAlertProps {\n tone: AlertTones;\n}\n\nconst StyledActionContainer = styled(Box)(() => ({\n marginTop: '16px',\n}));\n\nconst StyledActionLink = styled(Link)(() => ({\n padding: 0,\n}));\n\nconst StyledAlert = styled(MuiAlert, {\n shouldForwardProp: (prop) => !['tone'].includes(prop as string),\n})<StyledAlertProps>(({ theme, tone }) => ({\n backgroundColor: getBackgroundColour(theme, tone),\n border: '1px solid',\n borderColor: getBorderColour(theme, tone),\n color: getTextColour(theme, tone),\n}));\n\n/**\n * Alert component is used to display important messages or notifications to users.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional action button and close button.\n *\n * The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst Alert = memo(\n ({\n title,\n description,\n children,\n tone = 'neutral',\n icon,\n onClose,\n className,\n fdKey,\n action,\n }: AlertProps) => {\n const theme = useTheme();\n const alertId = useId();\n const content = children ?? description;\n const hasTitle = Boolean(title);\n const hasContent = content !== undefined && content !== null;\n const titleId = hasTitle ? `alert-title-${fdKey ?? alertId}` : undefined;\n const descriptionId = hasContent ? `alert-description-${fdKey ?? alertId}` : undefined;\n\n const renderAction = (): JSX.Element | null => {\n if (!action) {\n return null;\n }\n\n const actionLabel = title ? `${action.label} - ${title}` : action.label;\n\n if (action.kind === 'link') {\n const actionFdKey = action.fdKey ?? `action-link-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <StyledActionContainer>\n <StyledActionLink\n aria-label={actionLabel}\n fdKey={actionFdKey}\n href={action.href}\n rel={action.rel}\n target={action.target}\n >\n {action.label}\n </StyledActionLink>\n </StyledActionContainer>\n );\n }\n\n const actionFdKey = action.fdKey ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <StyledActionContainer>\n <Button\n aria-label={actionLabel}\n fdKey={actionFdKey}\n onClick={action.onClick}\n size=\"small\"\n variant={action.type ?? 'primary'}\n >\n {action.label}\n </Button>\n </StyledActionContainer>\n );\n };\n\n return (\n <StyledAlert\n aria-describedby={descriptionId}\n aria-labelledby={titleId}\n className={className}\n data-fd={fdKey}\n icon={icon === undefined ? getIcon(theme, tone) : icon}\n onClose={onClose}\n role=\"alert\"\n tone={tone}\n >\n {hasTitle && (\n <MuiAlertTitle color={getHeaderColour(theme, tone)} id={titleId}>\n {title}\n </MuiAlertTitle>\n )}\n {hasContent && <Box id={descriptionId}>{content}</Box>}\n {renderAction()}\n </StyledAlert>\n );\n },\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"names":["ICONS","neutral","theme","_jsx","DiamondIcon","color","palette","semantic","icon","brand","destructive","CancelCircleIcon","warning","AlertIcon","information","InformationCircleIcon","success","CheckmarkCircleIcon","COLOURS","background","fill","border","stroke","_theme","header","text","getIcon","tone","getBackgroundColour","getBorderColour","getHeaderColour","getTextColour","StyledActionContainer","styled","Box","marginTop","StyledActionLink","Link","padding","StyledAlert","MuiAlert","shouldForwardProp","prop","includes","backgroundColor","borderColor","Alert","memo","title","description","children","onClose","className","fdKey","action","useTheme","alertId","useId","content","hasTitle","Boolean","hasContent","titleId","undefined","descriptionId","_jsxs","role","MuiAlertTitle","id","actionLabel","label","kind","actionFdKey","replace","toLowerCase","href","rel","target","Button","onClick","size","variant","type","renderAction","displayName"],"mappings":"6iBA6EA,MAAMA,EAAQ,CACZC,QAAUC,GAA8BC,EAAAA,IAACC,EAAW,CAACC,MAAOH,EAAMI,QAAQC,SAASC,KAAK,iBACxFC,MAAQP,GAA8BC,EAAAA,IAACC,EAAW,CAACC,MAAOH,EAAMI,QAAQC,SAASC,KAAK,kBACtFE,YAAcR,GACZC,MAACQ,EAAgB,CAACN,MAAOH,EAAMI,QAAQC,SAASC,KAAK,gBAEvDI,QAAUV,GAA8BC,EAAAA,IAACU,EAAS,CAACR,MAAOH,EAAMI,QAAQC,SAASC,KAAK,kBACtFM,YAAcZ,GACZC,MAACY,EAAqB,CAACV,MAAOH,EAAMI,QAAQC,SAASC,KAAK,sBAE5D,kBAAoBN,GAClBC,MAACC,EAAW,CAACC,MAAOH,EAAMI,QAAQC,SAASC,KAAK,kBAElD,gBAAkBN,GAChBC,MAACC,EAAW,CAACC,MAAOH,EAAMI,QAAQC,SAASC,KAAK,kBAElDQ,QAAUd,GACRC,MAACc,EAAmB,CAACZ,MAAOH,EAAMI,QAAQC,SAASC,KAAK,mBAItDU,EAAU,CACdC,WAAY,CACVlB,QAAUC,GAAyBA,EAAMI,QAAQC,SAASa,KAAK,aAC/DX,MAAQP,GAAyBA,EAAMI,QAAQC,SAASa,KAAK,qBAC7DV,YAAcR,GAAyBA,EAAMI,QAAQC,SAASa,KAAK,mBACnER,QAAUV,GAAyBA,EAAMI,QAAQC,SAASa,KAAK,qBAC/DJ,QAAUd,GAAyBA,EAAMI,QAAQC,SAASa,KAAK,qBAC/DN,YAAcZ,GAAyBA,EAAMI,QAAQC,SAASa,KAAK,yBACnE,kBAAoBlB,GAAyBA,EAAMI,QAAQC,SAASY,WAAW,sBAC/E,gBAAkBjB,GAAyBA,EAAMI,QAAQC,SAASa,KAAK,wBAEzEC,OAAQ,CACNpB,QAAUC,GAAyBA,EAAMI,QAAQC,SAASe,OAAO,eACjEb,MAAQP,GAAyBA,EAAMI,QAAQC,SAASe,OAAO,uBAC/DZ,YAAcR,GAAyBA,EAAMI,QAAQC,SAASe,OAAO,qBACrEV,QAAUV,GAAyBA,EAAMI,QAAQC,SAASe,OAAO,uBACjEN,QAAUd,GAAyBA,EAAMI,QAAQC,SAASe,OAAO,uBACjER,YAAcZ,GAAyBA,EAAMI,QAAQC,SAASe,OAAO,2BACrE,kBAAoBC,GAA0B,cAC9C,gBAAkBA,GAA0B,eAE9CC,OAAQ,CACNvB,QAAUC,GAAyBA,EAAMI,QAAQC,SAASkB,KAAK,eAC/DhB,MAAQP,GAAyBA,EAAMI,QAAQC,SAASkB,KAAK,eAC7Df,YAAcR,GAAyBA,EAAMI,QAAQC,SAASkB,KAAK,eACnEb,QAAUV,GAAyBA,EAAMI,QAAQC,SAASkB,KAAK,eAC/DT,QAAUd,GAAyBA,EAAMI,QAAQC,SAASkB,KAAK,eAC/DX,YAAcZ,GAAyBA,EAAMI,QAAQC,SAASkB,KAAK,eACnE,kBAAoBvB,GAAyBA,EAAMI,QAAQC,SAASkB,KAAK,uBACzE,gBAAkBvB,GAAyBA,EAAMI,QAAQC,SAASkB,KAAK,wBAEzEA,KAAM,CACJxB,QAAUC,GAAyBA,EAAMI,QAAQC,SAASkB,KAAK,aAC/DhB,MAAQP,GAAyBA,EAAMI,QAAQC,SAASkB,KAAK,aAC7Df,YAAcR,GAAyBA,EAAMI,QAAQC,SAASkB,KAAK,aACnEb,QAAUV,GAAyBA,EAAMI,QAAQC,SAASkB,KAAK,aAC/DT,QAAUd,GAAyBA,EAAMI,QAAQC,SAASkB,KAAK,aAC/DX,YAAcZ,GAAyBA,EAAMI,QAAQC,SAASkB,KAAK,aACnE,kBAAoBvB,GAAyBA,EAAMI,QAAQC,SAASkB,KAAK,qBACzE,gBAAkBvB,GAAyBA,EAAMI,QAAQC,SAASkB,KAAK,uBAIrEC,EAAU,CAACxB,EAAcyB,IACtB3B,EAAM2B,GAAMzB,GAGf0B,EAAsB,CAAC1B,EAAcyB,IAClCT,EAAQC,WAAWQ,GAAMzB,GAG5B2B,EAAkB,CAAC3B,EAAcyB,IAC9BT,EAAQG,OAAOM,GAAMzB,GAGxB4B,EAAkB,CAAC5B,EAAcyB,IAC9BT,EAAQM,OAAOG,GAAMzB,GAGxB6B,EAAgB,CAAC7B,EAAcyB,IAC5BT,EAAQO,KAAKE,GAAMzB,GAOtB8B,EAAwBC,EAAAA,OAAOC,EAAPD,EAAY,KAAA,CACxCE,UAAW,WAGPC,EAAmBH,EAAAA,OAAOI,EAAAA,KAAPJ,EAAa,KAAA,CACpCK,QAAS,MAGLC,EAAcN,EAAAA,OAAOO,EAAU,CACnCC,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IAD9BT,EAEC,EAAG/B,QAAOyB,WAAM,CACnCiB,gBAAiBhB,EAAoB1B,EAAOyB,GAC5CN,OAAQ,YACRwB,YAAahB,EAAgB3B,EAAOyB,GACpCtB,MAAO0B,EAAc7B,EAAOyB,OAYxBmB,EAAQC,EAAAA,MACZ,EACEC,QACAC,cACAC,WACAvB,OAAO,UACPnB,OACA2C,UACAC,YACAC,QACAC,aAEA,MAAMpD,EAAQqD,EAAAA,WACRC,EAAUC,EAAAA,QACVC,EAAUR,GAAYD,EACtBU,EAAWC,QAAQZ,GACnBa,EAAaH,QACbI,EAAUH,EAAW,eAAeN,GAASG,SAAYO,EACzDC,EAAgBH,EAAa,qBAAqBR,GAASG,SAAYO,EA4C7E,OACEE,OAAC1B,sBACmByB,EAAa,kBACdF,EACjBV,UAAWA,YACFC,EACT7C,UAAeuD,IAATvD,EAAqBkB,EAAQxB,EAAOyB,GAAQnB,EAClD2C,QAASA,EACTe,KAAK,QACLvC,KAAMA,YAELgC,GACCxD,EAAAA,IAACgE,GAAc9D,MAAOyB,EAAgB5B,EAAOyB,GAAOyC,GAAIN,EAAOZ,SAC5DF,IAGJa,GAAc1D,EAAAA,IAAC+B,GAAIkC,GAAIJ,EAAad,SAAGQ,IA1DvB,MACnB,IAAKJ,EACH,OAAO,KAGT,MAAMe,EAAcrB,EAAQ,GAAGM,EAAOgB,WAAWtB,IAAUM,EAAOgB,MAElE,GAAoB,SAAhBhB,EAAOiB,KAAiB,CAC1B,MAAMC,EAAclB,EAAOD,OAAS,eAAeC,EAAOgB,MAAMG,QAAQ,OAAQ,KAAKC,gBAErF,OACEvE,MAAC6B,EAAqB,CAAAkB,SACpB/C,EAAAA,IAACiC,EAAgB,CAAA,aACHiC,EACZhB,MAAOmB,EACPG,KAAMrB,EAAOqB,KACbC,IAAKtB,EAAOsB,IACZC,OAAQvB,EAAOuB,gBAEdvB,EAAOgB,SAIhB,CAEA,MAAME,EAAclB,EAAOD,OAAS,iBAAiBC,EAAOgB,MAAMG,QAAQ,OAAQ,KAAKC,gBAEvF,OACEvE,MAAC6B,EAAqB,CAAAkB,SACpB/C,EAAAA,IAAC2E,SAAM,CAAA,aACOT,EACZhB,MAAOmB,EACPO,QAASzB,EAAOyB,QAChBC,KAAK,QACLC,QAAS3B,EAAO4B,MAAQ,mBAEvB5B,EAAOgB,WAuBXa,SAMTrC,EAAMsC,YAAc"}
package/dist/components/molecules/Alert/index.d.ts CHANGED
@@ -10,7 +10,9 @@ interface AlertProps {
10
10
  /** Optional main heading text of the alert */
11
11
  title?: string;
12
12
  /** Detailed description text of the alert */
13
- description: string;
13
+ description?: string;
14
+ /** Optional custom content; when provided it replaces description */
15
+ children?: ReactNode;
14
16
  /** Visual tone of the alert */
15
17
  tone?: AlertTones;
16
18
  /** Optional icon override; pass null to hide the icon */
@@ -58,7 +60,7 @@ type AlertAction = {
58
60
  * re-renders when the component's props haven't changed, which is beneficial for components
59
61
  * that may be used frequently throughout the application.
60
62
  */
61
- declare const Alert: react.MemoExoticComponent<({ title, description, tone, icon, onClose, className, fdKey, action }: AlertProps) => react_jsx_runtime.JSX.Element>;
63
+ declare const Alert: react.MemoExoticComponent<({ title, description, children, tone, icon, onClose, className, fdKey, action, }: AlertProps) => react_jsx_runtime.JSX.Element>;
62
64
 
63
65
  export { Alert as default };
64
66
  export type { AlertAction, AlertProps, AlertTones };
package/dist/components/molecules/Alert/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import{jsxs as e,jsx as t}from"react/jsx-runtime";import{memo as r,useId as a}from"react";import n from"@mui/material/Alert";import i from"@mui/material/AlertTitle";import o from"@mui/material/Box";import{styled as l,useTheme as s}from"@mui/material/styles";import c from"../../../icons/Alert/index.js";import m from"../../../icons/CancelCircle/index.js";import p from"../../../icons/CheckmarkCircle/index.js";import d from"../../../icons/Diamond/index.js";import f from"../../../icons/InformationCircle/index.js";import{Button as x}from"../../atoms/Button/index.js";import{Link as k}from"../../atoms/Link/index.js";const u={neutral:e=>t(d,{color:e.palette.semantic.icon["icon-strong"]}),brand:e=>t(d,{color:e.palette.semantic.icon["icon-primary"]}),destructive:e=>t(m,{color:e.palette.semantic.icon["icon-error"]}),warning:e=>t(c,{color:e.palette.semantic.icon["icon-warning"]}),information:e=>t(f,{color:e.palette.semantic.icon["icon-information"]}),"neutral-inverse":e=>t(d,{color:e.palette.semantic.icon["icon-inverse"]}),"brand-inverse":e=>t(d,{color:e.palette.semantic.icon["icon-inverse"]}),success:e=>t(p,{color:e.palette.semantic.icon["icon-success"]})},b={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":e=>"transparent","brand-inverse":e=>"transparent"},header:{neutral:e=>e.palette.semantic.text["text-strong"],brand:e=>e.palette.semantic.text["text-strong"],destructive:e=>e.palette.semantic.text["text-strong"],warning:e=>e.palette.semantic.text["text-strong"],success:e=>e.palette.semantic.text["text-strong"],information:e=>e.palette.semantic.text["text-strong"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-strong"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-strong"]},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"]}},w=(e,t)=>u[t](e),g=(e,t)=>b.background[t](e),v=(e,t)=>b.border[t](e),y=(e,t)=>b.header[t](e),h=(e,t)=>b.text[t](e),C=l(o)((()=>({marginTop:"16px"}))),j=l(k)((()=>({padding:0}))),$=l(n,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({backgroundColor:g(e,t),border:"1px solid",borderColor:v(e,t),color:h(e,t)}))),K=r((({title:r,description:n,tone:l="neutral",icon:c,onClose:m,className:p,fdKey:d,action:f})=>{const k=s(),u=a(),b=Boolean(r),g=b?`alert-title-${d??u}`:void 0,v=`alert-description-${d??u}`;return e($,{"aria-describedby":v,"aria-labelledby":g,className:p,"data-fd":d,icon:void 0===c?w(k,l):c,onClose:m,role:"alert",tone:l,children:[b&&t(i,{color:y(k,l),id:g,children:r}),t(o,{id:v,children:n}),(()=>{if(!f)return null;const e=r?`${f.label} - ${r}`:f.label;if("link"===f.kind){const r=f.fdKey??`action-link-${f.label.replace(/\s+/g,"-").toLowerCase()}`;return t(C,{children:t(j,{"aria-label":e,fdKey:r,href:f.href,rel:f.rel,target:f.target,children:f.label})})}const a=f.fdKey??`action-button-${f.label.replace(/\s+/g,"-").toLowerCase()}`;return t(C,{children:t(x,{"aria-label":e,fdKey:a,onClick:f.onClick,size:"small",variant:f.type??"primary",children:f.label})})})()]})}));K.displayName="Alert";export{K as default};
1
+ import{jsxs as e,jsx as t}from"react/jsx-runtime";import{memo as r,useId as a}from"react";import n from"@mui/material/Alert";import i from"@mui/material/AlertTitle";import o from"@mui/material/Box";import{styled as l,useTheme as s}from"@mui/material/styles";import c from"../../../icons/Alert/index.js";import m from"../../../icons/CancelCircle/index.js";import p from"../../../icons/CheckmarkCircle/index.js";import d from"../../../icons/Diamond/index.js";import f from"../../../icons/InformationCircle/index.js";import{Button as x}from"../../atoms/Button/index.js";import{Link as k}from"../../atoms/Link/index.js";const u={neutral:e=>t(d,{color:e.palette.semantic.icon["icon-strong"]}),brand:e=>t(d,{color:e.palette.semantic.icon["icon-primary"]}),destructive:e=>t(m,{color:e.palette.semantic.icon["icon-error"]}),warning:e=>t(c,{color:e.palette.semantic.icon["icon-warning"]}),information:e=>t(f,{color:e.palette.semantic.icon["icon-information"]}),"neutral-inverse":e=>t(d,{color:e.palette.semantic.icon["icon-inverse"]}),"brand-inverse":e=>t(d,{color:e.palette.semantic.icon["icon-inverse"]}),success:e=>t(p,{color:e.palette.semantic.icon["icon-success"]})},b={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":e=>"transparent","brand-inverse":e=>"transparent"},header:{neutral:e=>e.palette.semantic.text["text-strong"],brand:e=>e.palette.semantic.text["text-strong"],destructive:e=>e.palette.semantic.text["text-strong"],warning:e=>e.palette.semantic.text["text-strong"],success:e=>e.palette.semantic.text["text-strong"],information:e=>e.palette.semantic.text["text-strong"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-strong"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-strong"]},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"]}},w=(e,t)=>u[t](e),g=(e,t)=>b.background[t](e),v=(e,t)=>b.border[t](e),h=(e,t)=>b.header[t](e),y=(e,t)=>b.text[t](e),C=l(o)((()=>({marginTop:"16px"}))),j=l(k)((()=>({padding:0}))),$=l(n,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({backgroundColor:g(e,t),border:"1px solid",borderColor:v(e,t),color:y(e,t)}))),K=r((({title:r,description:n,children:l,tone:c="neutral",icon:m,onClose:p,className:d,fdKey:f,action:k})=>{const u=s(),b=a(),g=l??n,v=Boolean(r),y=null!=g,K=v?`alert-title-${f??b}`:void 0,A=y?`alert-description-${f??b}`:void 0;return e($,{"aria-describedby":A,"aria-labelledby":K,className:d,"data-fd":f,icon:void 0===m?w(u,c):m,onClose:p,role:"alert",tone:c,children:[v&&t(i,{color:h(u,c),id:K,children:r}),y&&t(o,{id:A,children:g}),(()=>{if(!k)return null;const e=r?`${k.label} - ${r}`:k.label;if("link"===k.kind){const r=k.fdKey??`action-link-${k.label.replace(/\s+/g,"-").toLowerCase()}`;return t(C,{children:t(j,{"aria-label":e,fdKey:r,href:k.href,rel:k.rel,target:k.target,children:k.label})})}const a=k.fdKey??`action-button-${k.label.replace(/\s+/g,"-").toLowerCase()}`;return t(C,{children:t(x,{"aria-label":e,fdKey:a,onClick:k.onClick,size:"small",variant:k.type??"primary",children:k.label})})})()]})}));K.displayName="Alert";export{K as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/components/molecules/Alert/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Alert/index.tsx"],"sourcesContent":["import { memo, type ReactNode, useId } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\nimport MuiAlertTitle from '@mui/material/AlertTitle';\nimport Box from '@mui/material/Box';\nimport { styled, type Theme, useTheme } from '@mui/material/styles';\n\nimport AlertIcon from '../../../icons/Alert';\nimport CancelCircleIcon from '../../../icons/CancelCircle';\nimport CheckmarkCircleIcon from '../../../icons/CheckmarkCircle';\nimport DiamondIcon from '../../../icons/Diamond';\nimport InformationCircleIcon from '../../../icons/InformationCircle';\nimport Button from '../../atoms/Button';\nimport type { ButtonType } from '../../atoms/Button/getButtonStyles';\nimport Link from '../../atoms/Link';\n\n/** Visual tone of the alert */\nexport type AlertTones =\n | 'brand-inverse'\n | 'brand'\n | 'destructive'\n | 'information'\n | 'neutral-inverse'\n | 'neutral'\n | 'success'\n | 'warning';\n\n/** Props for the Alert component */\nexport interface AlertProps {\n /** Optional main heading text of the alert */\n title?: string;\n /** Detailed description text of the alert */\n description: string;\n /** Visual tone of the alert */\n tone?: AlertTones;\n /** Optional icon override; pass null to hide the icon */\n icon?: ReactNode | null;\n /** Callback function when the alert is closed */\n onClose?: () => void;\n /** Action configuration (button by default, or link) */\n action?: AlertAction;\n /** Additional CSS class names */\n className?: string;\n /** Test ID for testing and automation */\n fdKey?: string;\n}\n\nexport type AlertAction =\n | {\n /** Defaults to button when omitted */\n kind?: 'button';\n /** Text label for the action button */\n label: string;\n /** Visual style of the action button */\n type?: ButtonType;\n /** Callback function when the action button is clicked */\n onClick: () => void;\n /** Test ID for the action button */\n fdKey?: string;\n }\n | {\n /** Render a link action */\n kind: 'link';\n /** Text label for the link */\n label: string;\n /** Destination URL */\n href: string;\n /** Target for the link */\n target?: '_blank' | '_parent' | '_self' | '_top';\n /** rel attribute for the link */\n rel?: string;\n /** Test ID for the link */\n fdKey?: string;\n };\n\nconst ICONS = {\n neutral: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />,\n brand: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />,\n destructive: (theme: Theme): JSX.Element => (\n <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />\n ),\n warning: (theme: Theme): JSX.Element => <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />,\n information: (theme: Theme): JSX.Element => (\n <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n ),\n 'neutral-inverse': (theme: Theme): JSX.Element => (\n <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n ),\n 'brand-inverse': (theme: Theme): JSX.Element => (\n <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n ),\n success: (theme: Theme): JSX.Element => (\n <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />\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': (_theme: Theme): string => 'transparent',\n 'brand-inverse': (_theme: Theme): string => 'transparent',\n },\n header: {\n neutral: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n brand: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n destructive: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n warning: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n success: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n information: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n 'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\n 'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\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\nconst getIcon = (theme: Theme, tone: AlertTones): JSX.Element => {\n return ICONS[tone](theme);\n};\n\nconst getBackgroundColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.background[tone](theme);\n};\n\nconst getBorderColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.border[tone](theme);\n};\n\nconst getHeaderColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.header[tone](theme);\n};\n\nconst getTextColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.text[tone](theme);\n};\n\ninterface StyledAlertProps {\n tone: AlertTones;\n}\n\nconst StyledActionContainer = styled(Box)(() => ({\n marginTop: '16px',\n}));\n\nconst StyledActionLink = styled(Link)(() => ({\n padding: 0,\n}));\n\nconst StyledAlert = styled(MuiAlert, {\n shouldForwardProp: (prop) => !['tone'].includes(prop as string),\n})<StyledAlertProps>(({ theme, tone }) => ({\n backgroundColor: getBackgroundColour(theme, tone),\n border: '1px solid',\n borderColor: getBorderColour(theme, tone),\n color: getTextColour(theme, tone),\n}));\n\n/**\n * Alert component is used to display important messages or notifications to users.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional action button and close button.\n *\n * The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst Alert = memo(\n ({ title, description, tone = 'neutral', icon, onClose, className, fdKey, action }: AlertProps) => {\n const theme = useTheme();\n const alertId = useId();\n const hasTitle = Boolean(title);\n const titleId = hasTitle ? `alert-title-${fdKey ?? alertId}` : undefined;\n const descriptionId = `alert-description-${fdKey ?? alertId}`;\n\n const renderAction = (): JSX.Element | null => {\n if (!action) {\n return null;\n }\n\n const actionLabel = title ? `${action.label} - ${title}` : action.label;\n\n if (action.kind === 'link') {\n const actionFdKey = action.fdKey ?? `action-link-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <StyledActionContainer>\n <StyledActionLink\n aria-label={actionLabel}\n fdKey={actionFdKey}\n href={action.href}\n rel={action.rel}\n target={action.target}\n >\n {action.label}\n </StyledActionLink>\n </StyledActionContainer>\n );\n }\n\n const actionFdKey = action.fdKey ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <StyledActionContainer>\n <Button\n aria-label={actionLabel}\n fdKey={actionFdKey}\n onClick={action.onClick}\n size=\"small\"\n variant={action.type ?? 'primary'}\n >\n {action.label}\n </Button>\n </StyledActionContainer>\n );\n };\n\n return (\n <StyledAlert\n aria-describedby={descriptionId}\n aria-labelledby={titleId}\n className={className}\n data-fd={fdKey}\n icon={icon === undefined ? getIcon(theme, tone) : icon}\n onClose={onClose}\n role=\"alert\"\n tone={tone}\n >\n {hasTitle && (\n <MuiAlertTitle color={getHeaderColour(theme, tone)} id={titleId}>\n {title}\n </MuiAlertTitle>\n )}\n <Box id={descriptionId}>{description}</Box>\n {renderAction()}\n </StyledAlert>\n );\n },\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"names":["ICONS","neutral","theme","_jsx","DiamondIcon","color","palette","semantic","icon","brand","destructive","CancelCircleIcon","warning","AlertIcon","information","InformationCircleIcon","success","CheckmarkCircleIcon","COLOURS","background","fill","border","stroke","_theme","header","text","getIcon","tone","getBackgroundColour","getBorderColour","getHeaderColour","getTextColour","StyledActionContainer","styled","Box","marginTop","StyledActionLink","Link","padding","StyledAlert","MuiAlert","shouldForwardProp","prop","includes","backgroundColor","borderColor","Alert","memo","title","description","onClose","className","fdKey","action","useTheme","alertId","useId","hasTitle","Boolean","titleId","undefined","descriptionId","_jsxs","role","children","MuiAlertTitle","id","actionLabel","label","kind","actionFdKey","replace","toLowerCase","href","rel","target","Button","onClick","size","variant","type","renderAction","displayName"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Alert/index.tsx"],"sourcesContent":["import { memo, type ReactNode, useId } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\nimport MuiAlertTitle from '@mui/material/AlertTitle';\nimport Box from '@mui/material/Box';\nimport { styled, type Theme, useTheme } from '@mui/material/styles';\n\nimport AlertIcon from '../../../icons/Alert';\nimport CancelCircleIcon from '../../../icons/CancelCircle';\nimport CheckmarkCircleIcon from '../../../icons/CheckmarkCircle';\nimport DiamondIcon from '../../../icons/Diamond';\nimport InformationCircleIcon from '../../../icons/InformationCircle';\nimport Button from '../../atoms/Button';\nimport type { ButtonType } from '../../atoms/Button/getButtonStyles';\nimport Link from '../../atoms/Link';\n\n/** Visual tone of the alert */\nexport type AlertTones =\n | 'brand-inverse'\n | 'brand'\n | 'destructive'\n | 'information'\n | 'neutral-inverse'\n | 'neutral'\n | 'success'\n | 'warning';\n\n/** Props for the Alert component */\nexport interface AlertProps {\n /** Optional main heading text of the alert */\n title?: string;\n /** Detailed description text of the alert */\n description?: string;\n /** Optional custom content; when provided it replaces description */\n children?: ReactNode;\n /** Visual tone of the alert */\n tone?: AlertTones;\n /** Optional icon override; pass null to hide the icon */\n icon?: ReactNode | null;\n /** Callback function when the alert is closed */\n onClose?: () => void;\n /** Action configuration (button by default, or link) */\n action?: AlertAction;\n /** Additional CSS class names */\n className?: string;\n /** Test ID for testing and automation */\n fdKey?: string;\n}\n\nexport type AlertAction =\n | {\n /** Defaults to button when omitted */\n kind?: 'button';\n /** Text label for the action button */\n label: string;\n /** Visual style of the action button */\n type?: ButtonType;\n /** Callback function when the action button is clicked */\n onClick: () => void;\n /** Test ID for the action button */\n fdKey?: string;\n }\n | {\n /** Render a link action */\n kind: 'link';\n /** Text label for the link */\n label: string;\n /** Destination URL */\n href: string;\n /** Target for the link */\n target?: '_blank' | '_parent' | '_self' | '_top';\n /** rel attribute for the link */\n rel?: string;\n /** Test ID for the link */\n fdKey?: string;\n };\n\nconst ICONS = {\n neutral: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />,\n brand: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />,\n destructive: (theme: Theme): JSX.Element => (\n <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />\n ),\n warning: (theme: Theme): JSX.Element => <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />,\n information: (theme: Theme): JSX.Element => (\n <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n ),\n 'neutral-inverse': (theme: Theme): JSX.Element => (\n <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n ),\n 'brand-inverse': (theme: Theme): JSX.Element => (\n <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n ),\n success: (theme: Theme): JSX.Element => (\n <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />\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': (_theme: Theme): string => 'transparent',\n 'brand-inverse': (_theme: Theme): string => 'transparent',\n },\n header: {\n neutral: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n brand: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n destructive: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n warning: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n success: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n information: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n 'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\n 'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\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\nconst getIcon = (theme: Theme, tone: AlertTones): JSX.Element => {\n return ICONS[tone](theme);\n};\n\nconst getBackgroundColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.background[tone](theme);\n};\n\nconst getBorderColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.border[tone](theme);\n};\n\nconst getHeaderColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.header[tone](theme);\n};\n\nconst getTextColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.text[tone](theme);\n};\n\ninterface StyledAlertProps {\n tone: AlertTones;\n}\n\nconst StyledActionContainer = styled(Box)(() => ({\n marginTop: '16px',\n}));\n\nconst StyledActionLink = styled(Link)(() => ({\n padding: 0,\n}));\n\nconst StyledAlert = styled(MuiAlert, {\n shouldForwardProp: (prop) => !['tone'].includes(prop as string),\n})<StyledAlertProps>(({ theme, tone }) => ({\n backgroundColor: getBackgroundColour(theme, tone),\n border: '1px solid',\n borderColor: getBorderColour(theme, tone),\n color: getTextColour(theme, tone),\n}));\n\n/**\n * Alert component is used to display important messages or notifications to users.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional action button and close button.\n *\n * The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst Alert = memo(\n ({\n title,\n description,\n children,\n tone = 'neutral',\n icon,\n onClose,\n className,\n fdKey,\n action,\n }: AlertProps) => {\n const theme = useTheme();\n const alertId = useId();\n const content = children ?? description;\n const hasTitle = Boolean(title);\n const hasContent = content !== undefined && content !== null;\n const titleId = hasTitle ? `alert-title-${fdKey ?? alertId}` : undefined;\n const descriptionId = hasContent ? `alert-description-${fdKey ?? alertId}` : undefined;\n\n const renderAction = (): JSX.Element | null => {\n if (!action) {\n return null;\n }\n\n const actionLabel = title ? `${action.label} - ${title}` : action.label;\n\n if (action.kind === 'link') {\n const actionFdKey = action.fdKey ?? `action-link-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <StyledActionContainer>\n <StyledActionLink\n aria-label={actionLabel}\n fdKey={actionFdKey}\n href={action.href}\n rel={action.rel}\n target={action.target}\n >\n {action.label}\n </StyledActionLink>\n </StyledActionContainer>\n );\n }\n\n const actionFdKey = action.fdKey ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <StyledActionContainer>\n <Button\n aria-label={actionLabel}\n fdKey={actionFdKey}\n onClick={action.onClick}\n size=\"small\"\n variant={action.type ?? 'primary'}\n >\n {action.label}\n </Button>\n </StyledActionContainer>\n );\n };\n\n return (\n <StyledAlert\n aria-describedby={descriptionId}\n aria-labelledby={titleId}\n className={className}\n data-fd={fdKey}\n icon={icon === undefined ? getIcon(theme, tone) : icon}\n onClose={onClose}\n role=\"alert\"\n tone={tone}\n >\n {hasTitle && (\n <MuiAlertTitle color={getHeaderColour(theme, tone)} id={titleId}>\n {title}\n </MuiAlertTitle>\n )}\n {hasContent && <Box id={descriptionId}>{content}</Box>}\n {renderAction()}\n </StyledAlert>\n );\n },\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"names":["ICONS","neutral","theme","_jsx","DiamondIcon","color","palette","semantic","icon","brand","destructive","CancelCircleIcon","warning","AlertIcon","information","InformationCircleIcon","success","CheckmarkCircleIcon","COLOURS","background","fill","border","stroke","_theme","header","text","getIcon","tone","getBackgroundColour","getBorderColour","getHeaderColour","getTextColour","StyledActionContainer","styled","Box","marginTop","StyledActionLink","Link","padding","StyledAlert","MuiAlert","shouldForwardProp","prop","includes","backgroundColor","borderColor","Alert","memo","title","description","children","onClose","className","fdKey","action","useTheme","alertId","useId","content","hasTitle","Boolean","hasContent","titleId","undefined","descriptionId","_jsxs","role","MuiAlertTitle","id","actionLabel","label","kind","actionFdKey","replace","toLowerCase","href","rel","target","Button","onClick","size","variant","type","renderAction","displayName"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flipdish/portal-library",
3
- "version": "8.1.0",
3
+ "version": "8.2.0",
4
4
  "files": [
5
5
  "dist"
6
6
  ],