diff --git a/assets/AlertBanner.stories-35918edc.js b/assets/AlertBanner.stories-c8143fda.js similarity index 92% rename from assets/AlertBanner.stories-35918edc.js rename to assets/AlertBanner.stories-c8143fda.js index 0fb3dd44..27643711 100644 --- a/assets/AlertBanner.stories-35918edc.js +++ b/assets/AlertBanner.stories-c8143fda.js @@ -1,4 +1,4 @@ -import{j as e}from"./jsx-runtime-ffb262ed.js";import{a as g}from"./chunk-AY7I2SME-5eb1ab46.js";import{R as N}from"./tetrisly-icons.es-3ae3ef26.js";import{r as y}from"./index-76fb7be0.js";import{m as V,l as q,T as H}from"./TetDocs-d43d97a7.js";import{B as C}from"./Button-2cba1838.js";import{I as M}from"./IconButton-07af51fe.js";import{u as T}from"./useAction-275346b1.js";import{t as r}from"./TetrislyProvider-e15ac01a.js";import{S as x}from"./SectionHeader-25e04435.js";import"./_commonjsHelpers-de833af9.js";import"./index-45ff0523.js";import"./iframe-832367ee.js";import"../sb-preview/runtime.js";import"./index-ffc7e5ff.js";import"./index-d37d4223.js";import"./index-356e4a49.js";import"./index-7c028e1c.js";const D={p:"$space-component-padding-medium",pl:"$space-component-padding-2xLarge",display:"flex",alignItems:"center",text:"$typo-body-medium",intent:{none:{backgroundColor:"$color-background-neutral-strong",color:"$color-content-primary-inverted"},success:{backgroundColor:"$color-background-positive-strong",color:"$color-content-primary-inverted"},warning:{backgroundColor:"$color-background-warning-strong",color:"$color-content-primary"},negative:{backgroundColor:"$color-background-negative-strong",color:"$color-content-primary-inverted"}},innerElements:{iconContainer:{mr:"$space-component-gap-small"},actionContainer:{display:"flex",alignItems:"center",justifyContent:"center",gap:"$space-component-gap-small",ml:"$space-component-gap-large"},closeButton:{ml:"auto"}}},R=n=>({none:"20-info-fill",success:"20-check-circle-fill",warning:"20-warning-fill",negative:"20-alert-fill"})[n],W=(n,o)=>{const{intent:s,innerElements:{iconContainer:v,actionContainer:i,closeButton:f},...t}=V({defaultConfig:D,custom:o}),c={appearance:n==="warning"?"reverseInverted":"inverted"},l={appearance:n==="warning"?"primary":"inverted"};return{container:{...s[n],...t},iconContainer:v,actionContainer:i,actionProps:c,closeButtonProps:l,closeButton:f}},a=({text:n,intent:o="none",custom:s,action:v,onCloseClick:i,...f})=>{const t=y.useMemo(()=>W(o,s),[o,s]),[c,l]=T(v),S=y.useMemo(()=>R(o),[o]);return e.jsxs(r.div,{...t.container,"data-testid":"alert-banner",...f,children:[e.jsx(r.span,{...t.iconContainer,"data-testid":"alert-banner-iconContainer",children:e.jsx(N,{name:S})}),n,c&&e.jsxs(r.div,{...t.actionContainer,"data-testid":"alert-banner-actionContainer",children:[e.jsx(C,{variant:"bare",...t.actionProps,...c}),l&&e.jsxs(e.Fragment,{children:[e.jsx(r.div,{children:"·"}),e.jsx(C,{variant:"bare",...t.actionProps,...l})]})]}),!!i&&e.jsx(M,{size:"small",variant:"ghost",intent:"none",icon:"20-close",onClick:i,...t.closeButton,...t.closeButtonProps,"data-testid":"alert-banner-closeButton"})]})};try{a.displayName="AlertBanner",a.__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:'"success"'},{value:'"warning"'},{value:'"negative"'},{value:'"none"'}]}},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 z=["none","success","warning","negative"],F=()=>e.jsx(e.Fragment,{children:z.map(n=>e.jsxs(r.section,{children:[e.jsxs(x,{px:{md:"$dimension-1000",_:"$dimension-500"},py:"$dimension-500",variant:"H1",children:["Intent: ",q.capitalize(n)]}),e.jsxs(r.div,{px:{md:"$dimension-1000",_:"$dimension-500"},children:[e.jsx(x,{py:"$dimension-500",variant:"H2",children:"Action: No"}),e.jsx(a,{text:"Alert text",intent:n})]}),e.jsxs(r.div,{px:{md:"$dimension-1000",_:"$dimension-500"},children:[e.jsx(x,{py:"$dimension-500",variant:"H2",children:"Action: Yes"}),e.jsx(a,{text:"Alert text",intent:n,my:"$dimension-500",action:[{label:"Click me",onClick:g("onClick")},{label:"Or click me",onClick:g("onClick")}]})]})]},n))}),ce={title:"AlertBanner",component:a,tags:["autodocs"],args:{text:"Alert text",action:[{label:"Action",onClick:g("onClick")},{label:"Action",onClick:g("onClick")}]},argTypes:{intent:{options:["none","success","warning","negative"],defaultValue:"none",control:{type:"radio"}}},parameters:{docs:{description:{component:"Prominent element used to display important messages or notifications to users. Alert Banners can convey various levels of urgency, such as success, warning, or error. They are designed to capture the user's attention and provide a clear and concise message."},page:()=>e.jsx(H,{docs:"https://docs.tetrisly.com/components/list/alertbanner",children:e.jsx(F,{})})}}},m={},d={args:{intent:"success"}},p={args:{intent:"warning"}},u={args:{intent:"negative"}};var $,j,h;m.parameters={...m.parameters,docs:{...($=m.parameters)==null?void 0:$.docs,source:{originalSource:"{}",...(h=(j=m.parameters)==null?void 0:j.docs)==null?void 0:h.source}}};var k,b,A;d.parameters={...d.parameters,docs:{...(k=d.parameters)==null?void 0:k.docs,source:{originalSource:`{ +import{j as e}from"./jsx-runtime-ffb262ed.js";import{a as g}from"./chunk-AY7I2SME-5eb1ab46.js";import{R as N}from"./tetrisly-icons.es-3ae3ef26.js";import{r as y}from"./index-76fb7be0.js";import{m as V,l as q,T as H}from"./TetDocs-30a5e954.js";import{B as C}from"./Button-e8871fcc.js";import{I as M}from"./IconButton-5273973c.js";import{u as T}from"./useAction-275346b1.js";import{t as r}from"./TetrislyProvider-e15ac01a.js";import{S as x}from"./SectionHeader-25e04435.js";import"./_commonjsHelpers-de833af9.js";import"./index-fb670bae.js";import"./iframe-38b13a5f.js";import"../sb-preview/runtime.js";import"./index-ffc7e5ff.js";import"./index-d37d4223.js";import"./index-356e4a49.js";import"./index-c462af29.js";const D={p:"$space-component-padding-medium",pl:"$space-component-padding-2xLarge",display:"flex",alignItems:"center",text:"$typo-body-medium",intent:{none:{backgroundColor:"$color-background-neutral-strong",color:"$color-content-primary-inverted"},success:{backgroundColor:"$color-background-positive-strong",color:"$color-content-primary-inverted"},warning:{backgroundColor:"$color-background-warning-strong",color:"$color-content-primary"},negative:{backgroundColor:"$color-background-negative-strong",color:"$color-content-primary-inverted"}},innerElements:{iconContainer:{mr:"$space-component-gap-small"},actionContainer:{display:"flex",alignItems:"center",justifyContent:"center",gap:"$space-component-gap-small",ml:"$space-component-gap-large"},closeButton:{ml:"auto"}}},R=n=>({none:"20-info-fill",success:"20-check-circle-fill",warning:"20-warning-fill",negative:"20-alert-fill"})[n],W=(n,o)=>{const{intent:s,innerElements:{iconContainer:v,actionContainer:i,closeButton:f},...t}=V({defaultConfig:D,custom:o}),c={appearance:n==="warning"?"reverseInverted":"inverted"},l={appearance:n==="warning"?"primary":"inverted"};return{container:{...s[n],...t},iconContainer:v,actionContainer:i,actionProps:c,closeButtonProps:l,closeButton:f}},a=({text:n,intent:o="none",custom:s,action:v,onCloseClick:i,...f})=>{const t=y.useMemo(()=>W(o,s),[o,s]),[c,l]=T(v),S=y.useMemo(()=>R(o),[o]);return e.jsxs(r.div,{...t.container,"data-testid":"alert-banner",...f,children:[e.jsx(r.span,{...t.iconContainer,"data-testid":"alert-banner-iconContainer",children:e.jsx(N,{name:S})}),n,c&&e.jsxs(r.div,{...t.actionContainer,"data-testid":"alert-banner-actionContainer",children:[e.jsx(C,{variant:"bare",...t.actionProps,...c}),l&&e.jsxs(e.Fragment,{children:[e.jsx(r.div,{children:"·"}),e.jsx(C,{variant:"bare",...t.actionProps,...l})]})]}),!!i&&e.jsx(M,{size:"small",variant:"ghost",intent:"none",icon:"20-close",onClick:i,...t.closeButton,...t.closeButtonProps,"data-testid":"alert-banner-closeButton"})]})};try{a.displayName="AlertBanner",a.__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:'"success"'},{value:'"warning"'},{value:'"negative"'},{value:'"none"'}]}},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 z=["none","success","warning","negative"],F=()=>e.jsx(e.Fragment,{children:z.map(n=>e.jsxs(r.section,{children:[e.jsxs(x,{px:{md:"$dimension-1000",_:"$dimension-500"},py:"$dimension-500",variant:"H1",children:["Intent: ",q.capitalize(n)]}),e.jsxs(r.div,{px:{md:"$dimension-1000",_:"$dimension-500"},children:[e.jsx(x,{py:"$dimension-500",variant:"H2",children:"Action: No"}),e.jsx(a,{text:"Alert text",intent:n})]}),e.jsxs(r.div,{px:{md:"$dimension-1000",_:"$dimension-500"},children:[e.jsx(x,{py:"$dimension-500",variant:"H2",children:"Action: Yes"}),e.jsx(a,{text:"Alert text",intent:n,my:"$dimension-500",action:[{label:"Click me",onClick:g("onClick")},{label:"Or click me",onClick:g("onClick")}]})]})]},n))}),ce={title:"AlertBanner",component:a,tags:["autodocs"],args:{text:"Alert text",action:[{label:"Action",onClick:g("onClick")},{label:"Action",onClick:g("onClick")}]},argTypes:{intent:{options:["none","success","warning","negative"],defaultValue:"none",control:{type:"radio"}}},parameters:{docs:{description:{component:"Prominent element used to display important messages or notifications to users. Alert Banners can convey various levels of urgency, such as success, warning, or error. They are designed to capture the user's attention and provide a clear and concise message."},page:()=>e.jsx(H,{docs:"https://docs.tetrisly.com/components/list/alertbanner",children:e.jsx(F,{})})}}},m={},d={args:{intent:"success"}},p={args:{intent:"warning"}},u={args:{intent:"negative"}};var $,j,h;m.parameters={...m.parameters,docs:{...($=m.parameters)==null?void 0:$.docs,source:{originalSource:"{}",...(h=(j=m.parameters)==null?void 0:j.docs)==null?void 0:h.source}}};var k,b,A;d.parameters={...d.parameters,docs:{...(k=d.parameters)==null?void 0:k.docs,source:{originalSource:`{ args: { intent: 'success' } @@ -11,4 +11,4 @@ import{j as e}from"./jsx-runtime-ffb262ed.js";import{a as g}from"./chunk-AY7I2SM intent: 'negative' } }`,...(I=(P=u.parameters)==null?void 0:P.docs)==null?void 0:I.source}}};const le=["Default","Positive","Warning","Negative"];export{m as Default,u as Negative,d as Positive,p as Warning,le as __namedExportsOrder,ce as default}; -//# sourceMappingURL=AlertBanner.stories-35918edc.js.map +//# sourceMappingURL=AlertBanner.stories-c8143fda.js.map diff --git a/assets/AlertBanner.stories-35918edc.js.map b/assets/AlertBanner.stories-c8143fda.js.map similarity index 99% rename from assets/AlertBanner.stories-35918edc.js.map rename to assets/AlertBanner.stories-c8143fda.js.map index 678c8c9b..ff8bd50c 100644 --- a/assets/AlertBanner.stories-35918edc.js.map +++ b/assets/AlertBanner.stories-c8143fda.js.map @@ -1 +1 @@ -{"version":3,"file":"AlertBanner.stories-35918edc.js","sources":["../../src/components/AlertBanner/AlertBanner.styles.ts","../../src/components/AlertBanner/stylesBuilder/stylesBuilder.ts","../../src/components/AlertBanner/AlertBanner.tsx","../../src/docs-components/AlertBannerDocs.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: '$space-component-padding-medium',\n pl: '$space-component-padding-2xLarge',\n display: 'flex',\n alignItems: 'center',\n text: '$typo-body-medium',\n intent: {\n none: {\n backgroundColor: '$color-background-neutral-strong',\n color: '$color-content-primary-inverted',\n },\n success: {\n backgroundColor: '$color-background-positive-strong',\n color: '$color-content-primary-inverted',\n },\n warning: {\n backgroundColor: '$color-background-warning-strong',\n color: '$color-content-primary',\n },\n negative: {\n backgroundColor: '$color-background-negative-strong',\n color: '$color-content-primary-inverted',\n },\n },\n innerElements: {\n iconContainer: {\n mr: '$space-component-gap-small',\n },\n actionContainer: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: '$space-component-gap-small',\n ml: '$space-component-gap-large',\n },\n closeButton: {\n ml: 'auto',\n },\n },\n} satisfies AlertBannerConfig;\n\nexport const resolveIconName = (intent: AlertBannerIntent) => {\n const iconConfig = {\n none: '20-info-fill',\n success: '20-check-circle-fill',\n warning: '20-warning-fill',\n negative: '20-alert-fill',\n } satisfies Record>;\n\n return iconConfig[intent];\n};\n","import { AlertBannerProps } from '../AlertBanner.props';\nimport { defaultConfig } from '../AlertBanner.styles';\nimport { AlertBannerIntent } from '../types';\n\nimport { BareButtonProps } from '@/components/Button/Button.props';\nimport { GhostIconButtonProps } from '@/components/IconButton/IconButton.props';\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' ? 'reverseInverted' : 'inverted',\n } as const;\n\n const closeButtonProps = {\n appearance: intent === 'warning' ? 'primary' : 'inverted',\n } as const;\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