diff --git a/assets/AlertBanner.stories-09174005.js b/assets/AlertBanner.stories-9eaebd97.js similarity index 95% rename from assets/AlertBanner.stories-09174005.js rename to assets/AlertBanner.stories-9eaebd97.js index 1ecf35bc..4d5cbac7 100644 --- a/assets/AlertBanner.stories-09174005.js +++ b/assets/AlertBanner.stories-9eaebd97.js @@ -1,4 +1,4 @@ -import{a as C}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 q}from"./index-76fb7be0.js";import{m as N}from"./mergeConfigWithCutom-789678df.js";import{B as y}from"./Button-809dae39.js";import{I as V}from"./IconButton-e8e6280b.js";import"./_commonjsHelpers-de833af9.js";import"./index-bbd51dd6.js";import"./Loader-18fde4ff.js";const M={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:{marginLeft:"auto"}}},L=t=>({none:"20-info-fill",positive:"20-info-fill",warning:"20-warning-fill",negative:"20-alert-fill"})[t],R=(t,r)=>{const{intent:a,innerElements:{iconContainer:o,actionContainer:i,closeButton:u},...n}=N({defaultConfig:M,custom:r}),g={appearance:t==="warning"?"reverseInverted":"inverted"},s={appearance:t==="warning"?"primary":"inverted"};return{container:{...a[t],...n},iconContainer:o,actionContainer:i,actionProps:g,closeButtonProps:s,closeButton:u}},v=({text:t,intent:r="none",custom:a,action:o,onCloseClick:i,...u})=>{const n=q.useMemo(()=>R(r,a),[r,a]),g=L(r),[s,f]=Array.isArray(o)?o:[o,void 0];return e.jsxs(c.div,{...n.container,...u,"data-testid":"alert-banner",children:[e.jsx(c.span,{...n.iconContainer,"data-testid":"alert-banner-iconContainer",children:e.jsx(S,{name:g})}),t,s&&e.jsxs(c.div,{...n.actionContainer,"data-testid":"alert-banner-actionContainer",children:[e.jsx(y,{variant:"bare",...n.actionProps,...s}),f&&e.jsxs(e.Fragment,{children:[e.jsx(c.div,{children:"·"}),e.jsx(y,{variant:"bare",...n.actionProps,...f})]})]}),!!i&&e.jsx(V,{size:"small",variant:"ghost",intent:"none",icon:"20-close",onClick:i,...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 Q={title:"Components/AlertBanner",component:v,tags:["autodocs"],args:{text:"Alert text",action:[{label:"Action",onClick:C("onClick")},{label:"Action",onClick:C("onClick")}]}},l={},p={args:{intent:"positive"}},m={args:{intent:"warning"}},d={args:{intent:"negative"}};var x,b,B;l.parameters={...l.parameters,docs:{...(x=l.parameters)==null?void 0:x.docs,source:{originalSource:"{}",...(B=(b=l.parameters)==null?void 0:b.docs)==null?void 0:B.source}}};var k,A,j;p.parameters={...p.parameters,docs:{...(k=p.parameters)==null?void 0:k.docs,source:{originalSource:`{ +import{a as C}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 q}from"./index-76fb7be0.js";import{m as N}from"./mergeConfigWithCutom-789678df.js";import{B as y}from"./Button-809dae39.js";import{I as V}from"./IconButton-e8e6280b.js";import"./_commonjsHelpers-de833af9.js";import"./index-bbd51dd6.js";import"./Loader-18fde4ff.js";const M={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:{marginLeft:"auto"}}},L=t=>({none:"20-info-fill",positive:"20-info-fill",warning:"20-warning-fill",negative:"20-alert-fill"})[t],R=(t,r)=>{const{intent:a,innerElements:{iconContainer:o,actionContainer:i,closeButton:u},...n}=N({defaultConfig:M,custom:r}),g={appearance:t==="warning"?"reverseInverted":"inverted"},s={appearance:t==="warning"?"primary":"inverted"};return{container:{...a[t],...n},iconContainer:o,actionContainer:i,actionProps:g,closeButtonProps:s,closeButton:u}},v=({text:t,intent:r="none",custom:a,action:o,onCloseClick:i,...u})=>{const n=q.useMemo(()=>R(r,a),[r,a]),g=L(r),[s,f]=Array.isArray(o)?o:[o,void 0];return e.jsxs(c.div,{...n.container,"data-testid":"alert-banner",...u,children:[e.jsx(c.span,{...n.iconContainer,"data-testid":"alert-banner-iconContainer",children:e.jsx(S,{name:g})}),t,s&&e.jsxs(c.div,{...n.actionContainer,"data-testid":"alert-banner-actionContainer",children:[e.jsx(y,{variant:"bare",...n.actionProps,...s}),f&&e.jsxs(e.Fragment,{children:[e.jsx(c.div,{children:"·"}),e.jsx(y,{variant:"bare",...n.actionProps,...f})]})]}),!!i&&e.jsx(V,{size:"small",variant:"ghost",intent:"none",icon:"20-close",onClick:i,...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 Q={title:"Components/AlertBanner",component:v,tags:["autodocs"],args:{text:"Alert text",action:[{label:"Action",onClick:C("onClick")},{label:"Action",onClick:C("onClick")}]}},l={},p={args:{intent:"positive"}},m={args:{intent:"warning"}},d={args:{intent:"negative"}};var x,b,B;l.parameters={...l.parameters,docs:{...(x=l.parameters)==null?void 0:x.docs,source:{originalSource:"{}",...(B=(b=l.parameters)==null?void 0:b.docs)==null?void 0:B.source}}};var k,A,j;p.parameters={...p.parameters,docs:{...(k=p.parameters)==null?void 0:k.docs,source:{originalSource:`{ args: { intent: 'positive' } @@ -11,4 +11,4 @@ import{a as C}from"./chunk-AY7I2SME-c7b6cf8a.js";import{j as e,t as c}from"./Tet intent: 'negative' } }`,...(I=(P=d.parameters)==null?void 0:P.docs)==null?void 0:I.source}}};const U=["Default","Positive","Warning","Negative"];export{l as Default,d as Negative,p as Positive,m as Warning,U as __namedExportsOrder,Q as default}; -//# sourceMappingURL=AlertBanner.stories-09174005.js.map +//# sourceMappingURL=AlertBanner.stories-9eaebd97.js.map diff --git a/assets/AlertBanner.stories-09174005.js.map b/assets/AlertBanner.stories-9eaebd97.js.map similarity index 96% rename from assets/AlertBanner.stories-09174005.js.map rename to assets/AlertBanner.stories-9eaebd97.js.map index 11d11e7c..ec69bbb9 100644 --- a/assets/AlertBanner.stories-09174005.js.map +++ b/assets/AlertBanner.stories-9eaebd97.js.map @@ -1 +1 @@ -{"version":3,"file":"AlertBanner.stories-09174005.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 marginLeft: '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 { 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 const name = resolveIconName(intent);\n\n const [firstAction, secondAction] = Array.isArray(action)\n ? action\n : [action, undefined];\n\n return (\n \n \n \n \n {text}\n {firstAction && (\n \n