diff --git a/VLLogo.png b/VLLogo.png deleted file mode 100644 index 1ca5a3a2..00000000 Binary files a/VLLogo.png and /dev/null differ diff --git a/assets/AlertBanner.stories-18656a53.js b/assets/AlertBanner.stories-3d390578.js similarity index 92% rename from assets/AlertBanner.stories-18656a53.js rename to assets/AlertBanner.stories-3d390578.js index a69eb2d7..a0f5dd63 100644 --- a/assets/AlertBanner.stories-18656a53.js +++ b/assets/AlertBanner.stories-3d390578.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 q,l as H,T as M}from"./TetDocs-0df82f5b.js";import{B as C}from"./Button-3f71a6aa.js";import{I as V}from"./IconButton-5c242a74.js";import{u as D}from"./useAction-275346b1.js";import{t as r}from"./TetrislyProvider-e15ac01a.js";import{S as x}from"./SectionHeader-922ceba2.js";import"./_commonjsHelpers-de833af9.js";import"./index-525b0908.js";import"./iframe-d66e8cb6.js";import"../sb-preview/runtime.js";import"./index-ffc7e5ff.js";import"./index-d37d4223.js";import"./index-356e4a49.js";import"./index-ca902b07.js";const T={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"},positive:{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",positive:"20-info-fill",warning:"20-warning-fill",negative:"20-alert-fill"})[n],W=(n,o)=>{const{intent:i,innerElements:{iconContainer:v,actionContainer:s,closeButton:f},...t}=q({defaultConfig:T,custom:o}),c={appearance:n==="warning"?"reverseInverted":"inverted"},l={appearance:n==="warning"?"primary":"inverted"};return{container:{...i[n],...t},iconContainer:v,actionContainer:s,actionProps:c,closeButtonProps:l,closeButton:f}},a=({text:n,intent:o="none",custom:i,action:v,onCloseClick:s,...f})=>{const t=y.useMemo(()=>W(o,i),[o,i]),[c,l]=D(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})]})]}),!!s&&e.jsx(V,{size:"small",variant:"ghost",intent:"none",icon:"20-close",onClick:s,...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:'"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 z=["none","positive","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: ",H.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")}]},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(M,{docs:"https://docs.tetrisly.com/components/list/alertbanner",children:e.jsx(F,{})})}}},m={},p={args:{intent:"positive"}},d={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 b,k,A;p.parameters={...p.parameters,docs:{...(b=p.parameters)==null?void 0:b.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 q,l as H,T as M}from"./TetDocs-266be972.js";import{B as C}from"./Button-252064b9.js";import{I as V}from"./IconButton-8ee5f35f.js";import{u as D}from"./useAction-275346b1.js";import{t as r}from"./TetrislyProvider-e15ac01a.js";import{S as x}from"./SectionHeader-922ceba2.js";import"./_commonjsHelpers-de833af9.js";import"./index-0039b1f2.js";import"./iframe-d1ef7bcf.js";import"../sb-preview/runtime.js";import"./index-ffc7e5ff.js";import"./index-d37d4223.js";import"./index-356e4a49.js";import"./index-3a430a9a.js";const T={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"},positive:{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",positive:"20-info-fill",warning:"20-warning-fill",negative:"20-alert-fill"})[n],W=(n,o)=>{const{intent:i,innerElements:{iconContainer:v,actionContainer:s,closeButton:f},...t}=q({defaultConfig:T,custom:o}),c={appearance:n==="warning"?"reverseInverted":"inverted"},l={appearance:n==="warning"?"primary":"inverted"};return{container:{...i[n],...t},iconContainer:v,actionContainer:s,actionProps:c,closeButtonProps:l,closeButton:f}},a=({text:n,intent:o="none",custom:i,action:v,onCloseClick:s,...f})=>{const t=y.useMemo(()=>W(o,i),[o,i]),[c,l]=D(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})]})]}),!!s&&e.jsx(V,{size:"small",variant:"ghost",intent:"none",icon:"20-close",onClick:s,...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:'"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 z=["none","positive","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: ",H.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")}]},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(M,{docs:"https://docs.tetrisly.com/components/list/alertbanner",children:e.jsx(F,{})})}}},m={},p={args:{intent:"positive"}},d={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 b,k,A;p.parameters={...p.parameters,docs:{...(b=p.parameters)==null?void 0:b.docs,source:{originalSource:`{ args: { intent: 'positive' } @@ -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,p as Positive,d as Warning,le as __namedExportsOrder,ce as default}; -//# sourceMappingURL=AlertBanner.stories-18656a53.js.map +//# sourceMappingURL=AlertBanner.stories-3d390578.js.map diff --git a/assets/AlertBanner.stories-18656a53.js.map b/assets/AlertBanner.stories-3d390578.js.map similarity index 99% rename from assets/AlertBanner.stories-18656a53.js.map rename to assets/AlertBanner.stories-3d390578.js.map index 96a43d36..41a84693 100644 --- a/assets/AlertBanner.stories-18656a53.js.map +++ b/assets/AlertBanner.stories-3d390578.js.map @@ -1 +1 @@ -{"version":3,"file":"AlertBanner.stories-18656a53.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 positive: {\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): 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 { 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