diff --git a/assets/AlertBanner.stories-799b77da.js b/assets/AlertBanner.stories-799b77da.js new file mode 100644 index 00000000..a92c5759 --- /dev/null +++ b/assets/AlertBanner.stories-799b77da.js @@ -0,0 +1,14 @@ +import{a as f}from"./chunk-AY7I2SME-c7b6cf8a.js";import{j as e,t as c}from"./TetrislyProvider-07235cd3.js";import{R as S}from"./tetrisly-icons.es-3ae3ef26.js";import{r as C}from"./index-76fb7be0.js";import{m as q}from"./mergeConfigWithCutom-789678df.js";import{B as x}from"./Button-7524adde.js";import{I as M}from"./IconButton-83d763b2.js";import{u as V}from"./useAction-275346b1.js";import"./_commonjsHelpers-de833af9.js";import"./index-dcaaca1f.js";import"./Loader-4e222d2a.js";const R={p:"component-padding-medium",pl:"component-padding-2xLarge",display:"flex",alignItems:"center",text:"body-medium",intent:{none:{backgroundColor:"background-neutral-strong",color:"content-primary-inverted"},positive:{backgroundColor:"background-positive-strong",color:"content-primary-inverted"},warning:{backgroundColor:"background-warning-strong",color:"content-primary"},negative:{backgroundColor:"background-negative-strong",color:"content-primary-inverted"}},innerElements:{iconContainer:{mr:"component-gap-small"},actionContainer:{display:"flex",alignItems:"center",justifyContent:"center",gap:"component-gap-small",ml:"component-gap-large"},closeButton:{ml:"auto"}}},W=t=>({none:"20-info-fill",positive:"20-info-fill",warning:"20-warning-fill",negative:"20-alert-fill"})[t],D=(t,o)=>{const{intent:r,innerElements:{iconContainer:u,actionContainer:a,closeButton:g},...n}=q({defaultConfig:R,custom:o}),i={appearance:t==="warning"?"reverseInverted":"inverted"},s={appearance:t==="warning"?"primary":"inverted"};return{container:{...r[t],...n},iconContainer:u,actionContainer:a,actionProps:i,closeButtonProps:s,closeButton:g}},v=({text:t,intent:o="none",custom:r,action:u,onCloseClick:a,...g})=>{const n=C.useMemo(()=>D(o,r),[o,r]),[i,s]=V(u),N=C.useMemo(()=>W(o),[o]);return e.jsxs(c.div,{...n.container,"data-testid":"alert-banner",...g,children:[e.jsx(c.span,{...n.iconContainer,"data-testid":"alert-banner-iconContainer",children:e.jsx(S,{name:N})}),t,i&&e.jsxs(c.div,{...n.actionContainer,"data-testid":"alert-banner-actionContainer",children:[e.jsx(x,{variant:"bare",...n.actionProps,...i}),s&&e.jsxs(e.Fragment,{children:[e.jsx(c.div,{children:"·"}),e.jsx(x,{variant:"bare",...n.actionProps,...s})]})]}),!!a&&e.jsx(M,{size:"small",variant:"ghost",intent:"none",icon:"20-close",onClick:a,...n.closeButton,...n.closeButtonProps,"data-testid":"alert-banner-closeButton"})]})};try{v.displayName="AlertBanner",v.__docgenInfo={description:"",displayName:"AlertBanner",props:{text:{defaultValue:null,description:"",name:"text",required:!0,type:{name:"string"}},intent:{defaultValue:{value:"none"},description:"",name:"intent",required:!1,type:{name:"enum",value:[{value:'"warning"'},{value:'"negative"'},{value:'"none"'},{value:'"positive"'}]}},action:{defaultValue:null,description:"",name:"action",required:!1,type:{name:"ActionProp"}},onCloseClick:{defaultValue:null,description:"",name:"onCloseClick",required:!1,type:{name:"((e: MouseEvent) => void)"}},custom:{defaultValue:null,description:"",name:"custom",required:!1,type:{name:"AlertBannerConfig"}}}}}catch{}const X={title:"Components/AlertBanner",component:v,tags:["autodocs"],args:{text:"Alert text",action:[{label:"Action",onClick:f("onClick")},{label:"Action",onClick:f("onClick")}]}},l={},m={args:{intent:"positive"}},p={args:{intent:"warning"}},d={args:{intent:"negative"}};var y,b,B;l.parameters={...l.parameters,docs:{...(y=l.parameters)==null?void 0:y.docs,source:{originalSource:"{}",...(B=(b=l.parameters)==null?void 0:b.docs)==null?void 0:B.source}}};var k,j,A;m.parameters={...m.parameters,docs:{...(k=m.parameters)==null?void 0:k.docs,source:{originalSource:`{ + args: { + intent: 'positive' + } +}`,...(A=(j=m.parameters)==null?void 0:j.docs)==null?void 0:A.source}}};var _,w,h;p.parameters={...p.parameters,docs:{...(_=p.parameters)==null?void 0:_.docs,source:{originalSource:`{ + args: { + intent: 'warning' + } +}`,...(h=(w=p.parameters)==null?void 0:w.docs)==null?void 0:h.source}}};var E,P,I;d.parameters={...d.parameters,docs:{...(E=d.parameters)==null?void 0:E.docs,source:{originalSource:`{ + args: { + intent: 'negative' + } +}`,...(I=(P=d.parameters)==null?void 0:P.docs)==null?void 0:I.source}}};const Y=["Default","Positive","Warning","Negative"];export{l as Default,d as Negative,m as Positive,p as Warning,Y as __namedExportsOrder,X as default}; +//# sourceMappingURL=AlertBanner.stories-799b77da.js.map diff --git a/assets/AlertBanner.stories-799b77da.js.map b/assets/AlertBanner.stories-799b77da.js.map new file mode 100644 index 00000000..f9998e08 --- /dev/null +++ b/assets/AlertBanner.stories-799b77da.js.map @@ -0,0 +1 @@ +{"version":3,"file":"AlertBanner.stories-799b77da.js","sources":["../../src/components/AlertBanner/AlertBanner.styles.ts","../../src/components/AlertBanner/stylesBuilder/stylesBuilder.ts","../../src/components/AlertBanner/AlertBanner.tsx"],"sourcesContent":["import { AlertBannerIntent } from './types/AlertBannerIntent.type';\n\nimport { BaseProps } from '@/types/BaseProps';\nimport { IconName } from '@/utility-types/IconName';\n\nexport type AlertBannerConfig = {\n intent?: Partial>;\n innerElements?: {\n iconContainer?: BaseProps;\n actionContainer?: BaseProps;\n closeButton?: BaseProps;\n };\n} & BaseProps;\n\nexport const defaultConfig = {\n p: 'component-padding-medium',\n pl: 'component-padding-2xLarge',\n display: 'flex',\n alignItems: 'center',\n text: 'body-medium',\n intent: {\n none: {\n backgroundColor: 'background-neutral-strong',\n color: 'content-primary-inverted',\n },\n positive: {\n backgroundColor: 'background-positive-strong',\n color: 'content-primary-inverted',\n },\n warning: {\n backgroundColor: 'background-warning-strong',\n color: 'content-primary',\n },\n negative: {\n backgroundColor: 'background-negative-strong',\n color: 'content-primary-inverted',\n },\n },\n innerElements: {\n iconContainer: {\n mr: 'component-gap-small',\n },\n actionContainer: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: 'component-gap-small',\n ml: 'component-gap-large',\n },\n closeButton: {\n ml: 'auto',\n },\n },\n} satisfies AlertBannerConfig;\n\nexport const resolveIconName = (intent: AlertBannerIntent): IconName<20> => {\n const iconConfig: Record> = {\n none: '20-info-fill',\n positive: '20-info-fill',\n warning: '20-warning-fill',\n negative: '20-alert-fill',\n };\n\n return iconConfig[intent];\n};\n","import { AlertBannerProps } from '../AlertBanner.props';\nimport { defaultConfig } from '../AlertBanner.styles';\nimport { AlertBannerIntent } from '../types';\n\nimport { ButtonProps } from '@/components/Button';\nimport { ButtonAppearance } from '@/components/Button/types/ButtonAppearance.type';\nimport { IconButtonProps } from '@/components/IconButton/IconButton.props';\nimport { IconButtonAppearance } from '@/components/IconButton/IconButtonAppearance.type';\nimport { mergeConfigWithCustom } from '@/services';\nimport { BaseProps } from '@/types/BaseProps';\n\ntype AlertBannerStylesBuilder = {\n container: BaseProps;\n iconContainer: BaseProps;\n actionContainer: BaseProps;\n closeButton: BaseProps;\n actionProps: Partial>;\n closeButtonProps: Partial>;\n};\n\nexport const stylesBuilder = (\n intent: AlertBannerIntent,\n custom: AlertBannerProps['custom'],\n): AlertBannerStylesBuilder => {\n const {\n intent: intentStyles,\n innerElements: { iconContainer, actionContainer, closeButton },\n ...restStyles\n } = mergeConfigWithCustom({ defaultConfig, custom });\n\n const actionProps = {\n appearance: (intent === 'warning'\n ? 'reverseInverted'\n : 'inverted') as ButtonAppearance<'ghost'>,\n };\n\n const closeButtonProps = {\n appearance: (intent === 'warning'\n ? 'primary'\n : 'inverted') as IconButtonAppearance<'ghost'>,\n };\n\n return {\n container: {\n ...intentStyles[intent],\n ...restStyles,\n },\n iconContainer,\n actionContainer,\n actionProps,\n closeButtonProps,\n closeButton,\n };\n};\n","import { Icon } from '@virtuslab/tetrisly-icons';\nimport { FC, useMemo } from 'react';\n\nimport { AlertBannerProps } from './AlertBanner.props';\nimport { resolveIconName } from './AlertBanner.styles';\nimport { stylesBuilder } from './stylesBuilder';\nimport { Button } from '../Button';\nimport { IconButton } from '../IconButton';\n\nimport { useAction } from '@/hooks';\nimport { tet } from '@/tetrisly';\nimport { MarginProps } from '@/types';\n\nexport const AlertBanner: FC = ({\n text,\n intent = 'none',\n custom,\n action,\n onCloseClick,\n ...restProps\n}) => {\n const styles = useMemo(() => stylesBuilder(intent, custom), [intent, custom]);\n\n const [firstAction, secondAction] = useAction(action);\n\n const iconName = useMemo(() => resolveIconName(intent), [intent]);\n\n return (\n \n \n \n \n {text}\n {firstAction && (\n \n