Commitc827a08

authored

refactor: migrate deployment banner to Tailwind and radix (#20479)

before:<img width="1667" height="48" alt="Screenshot 2025-10-25 at 18 02 45"src="https://github.com/user-attachments/assets/1525a01e-5976-4d0e-8280-1b9ae8d91197"/>after:<img width="1662" height="35" alt="Screenshot 2025-10-25 at 18 02 17"src="https://github.com/user-attachments/assets/d0fd7b69-ee88-4986-a539-5917c17a8b85"/>

1 parent1b6556c commitc827a08Copy full SHA for c827a08

File tree

+252

-257

lines changed

+252

-257

lines changed

Lines changed: 6 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -27,10 +27,14 @@ interface LinkProps`
`27`	`27`	`extendsReact.AnchorHTMLAttributes<HTMLAnchorElement>,`
`28`	`28`	`VariantProps<typeoflinkVariants>{`
`29`	`29`	`asChild?:boolean;`
	`30`	`+showExternalIcon?:boolean;`
`30`	`31`	`}`
`31`	`32`
`32`	`33`	`exportconstLink=forwardRef<HTMLAnchorElement,LinkProps>(`
`33`		`-({ className, children, size, asChild, ...props},ref)=>{`
	`34`	`+(`
	`35`	`+{ className, children, size, asChild, showExternalIcon=true, ...props},`
	`36`	`+ref,`
	`37`	`+)=>{`
`34`	`38`	`constComp=asChild ?Slot :"a";`
`35`	`39`	`return(`
`36`	`40`	`<Comp`
`@@ -39,7 +43,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(`
`39`	`43`	`{...props}`
`40`	`44`	`>`
`41`	`45`	`<Slottable>{children}</Slottable>`
`42`		`-<SquareArrowOutUpRightIconaria-hidden="true"/>`
	`46`	`+{showExternalIcon&&<SquareArrowOutUpRightIconaria-hidden="true"/>}`
`43`	`47`	`</Comp>`
`44`	`48`	`);`
`45`	`49`	`},`

Lines changed: 17 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@ import {`
`3`	`3`	`MockDeploymentStats,`
`4`	`4`	`}from"testHelpers/entities";`
`5`	`5`	`importtype{Meta,StoryObj}from"@storybook/react-vite";`
	`6`	`+import{expect,screen,userEvent,waitFor,within}from"storybook/test";`
`6`	`7`	`import{DeploymentBannerView}from"./DeploymentBannerView";`
`7`	`8`
`8`	`9`	`constmeta:Meta<typeofDeploymentBannerView>={`
`@@ -22,6 +23,14 @@ export const WithHealthIssues: Story = {`
`22`	`23`	`args:{`
`23`	`24`	`health:DeploymentHealthUnhealthy,`
`24`	`25`	`},`
	`26`	`+play:async({ canvasElement})=>{`
	`27`	`+constcanvas=within(canvasElement);`
	`28`	`+consttrigger=canvas.getByTestId("deployment-health-trigger");`
	`29`	`+awaituserEvent.hover(trigger);`
	`30`	`+awaitwaitFor(()=>`
	`31`	`+expect(screen.getByRole("tooltip")).toBeInTheDocument(),`
	`32`	`+);`
	`33`	`+},`
`25`	`34`	`};`
`26`	`35`
`27`	`36`	`exportconstWithDismissedHealthIssues:Story={`
`@@ -34,4 +43,12 @@ export const WithDismissedHealthIssues: Story = {`
`34`	`43`	`},`
`35`	`44`	`},`
`36`	`45`	`},`
	`46`	`+play:async({ canvasElement})=>{`
	`47`	`+constcanvas=within(canvasElement);`
	`48`	`+consttrigger=canvas.getByTestId("deployment-health-trigger");`
	`49`	`+awaituserEvent.hover(trigger);`
	`50`	`+awaitwaitFor(()=>`
	`51`	`+expect(screen.getByRole("tooltip")).toBeInTheDocument(),`
	`52`	`+);`
	`53`	`+},`
`37`	`54`	`};`

Comments

(0)