fix(Link): remove flexbox allowing text to break (#4274)

.changeset/itchy-planes-sip.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Fix `<Link />` component not to be flexbox allowing the text to break

packages/ui/src/components/Alert/__stories__/Link.stories.tsx

@@ -1,19 +1,27 @@
+import { Alert } from '..'
 import { Link as UVLink } from '../../Link'
 import { Stack } from '../../Stack'
-import { Template } from './Template.stories'
 
-export const Link = Template.bind({})
-
-Link.args = {
-  sentiment: 'info',
-  title: 'Information',
-  children: (
-    <Stack direction="row" justifyContent="space-between" flex="1 1 auto">
-      <p>You cannot create a ressource here</p>
-      <UVLink href="scaleway.com">Read more</UVLink>
-    </Stack>
-  ),
-}
+export const Link = () => (
+  <Stack gap={1}>
+    <Alert sentiment="info" title="Information">
+      <Stack direction="row" justifyContent="space-between" flex="1 1 auto">
+        <p>You cannot create a ressource here</p>
+        <UVLink href="scaleway.com">Read more</UVLink>
+      </Stack>
+    </Alert>
+    <Alert sentiment="info" title="Information">
+      <p>
+        You cannot create a ressource here If you believe this is an error,{' '}
+        <UVLink href="scaleway.com" variant="inline" target="_blank">
+          contact support for further assistance this is an error
+        </UVLink>
+        . Additionally, ensure that you have the necessary permissions to access
+        this resource.
+      </p>
+    </Alert>
+  </Stack>
+)
 
 Link.parameters = {
   docs: {

packages/ui/src/components/Banner/__tests__/__snapshots__/index.test.tsx.snap

@@ -508,17 +508,6 @@ exports[`Banner > renders correctly with a link 1`] = `
   text-decoration-thickness: 1px;
   text-underline-offset: 2px;
   text-decoration-color: transparent;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   -webkit-transition: text-decoration-color 250ms ease-out;
   transition: text-decoration-color 250ms ease-out;
   gap: 8px;
@@ -593,6 +582,7 @@ exports[`Banner > renders correctly with a link 1`] = `
   width: 14px;
   min-width: 14px;
   min-height: 14px;
+  margin-left: 8px;
 }
 
 .emotion-19 .fillStroke {

packages/ui/src/components/Breadcrumbs/__tests__/__snapshots__/index.test.tsx.snap

@@ -43,17 +43,6 @@ exports[`Breadcrumbs > renders correctly with default values 1`] = `
   text-decoration-thickness: 1px;
   text-underline-offset: 2px;
   text-decoration-color: transparent;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   -webkit-transition: text-decoration-color 250ms ease-out;
   transition: text-decoration-color 250ms ease-out;
   gap: 8px;
@@ -289,17 +278,6 @@ exports[`Breadcrumbs > renders correctly with onClick 1`] = `
   text-decoration-thickness: 1px;
   text-underline-offset: 2px;
   text-decoration-color: transparent;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   -webkit-transition: text-decoration-color 250ms ease-out;
   transition: text-decoration-color 250ms ease-out;
   gap: 8px;
@@ -369,17 +347,6 @@ exports[`Breadcrumbs > renders correctly with onClick 1`] = `
   text-decoration-thickness: 1px;
   text-underline-offset: 2px;
   text-decoration-color: transparent;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   -webkit-transition: text-decoration-color 250ms ease-out;
   transition: text-decoration-color 250ms ease-out;
   gap: 8px;
@@ -548,17 +515,6 @@ exports[`Breadcrumbs > renders correctly with selected item 1`] = `
   text-decoration-thickness: 1px;
   text-underline-offset: 2px;
   text-decoration-color: transparent;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   -webkit-transition: text-decoration-color 250ms ease-out;
   transition: text-decoration-color 250ms ease-out;
   gap: 8px;

packages/ui/src/components/EmptyState/__tests__/__snapshots__/index.test.tsx.snap

@@ -661,17 +661,6 @@ exports[`EmptySpace > should work with learn more 1`] = `
   text-decoration-thickness: 1px;
   text-underline-offset: 2px;
   text-decoration-color: transparent;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   -webkit-transition: text-decoration-color 250ms ease-out;
   transition: text-decoration-color 250ms ease-out;
   gap: 8px;
@@ -738,6 +727,7 @@ exports[`EmptySpace > should work with learn more 1`] = `
   width: 16px;
   min-width: 16px;
   min-height: 16px;
+  margin-left: 8px;
 }
 
 .emotion-18 .fillStroke {

packages/ui/src/components/GlobalAlert/__tests__/__snapshots__/index.test.tsx.snap

@@ -1527,17 +1527,6 @@ exports[`GlobalAlert > renders correctly with link 1`] = `
   text-decoration-thickness: 1px;
   text-underline-offset: 2px;
   text-decoration-color: transparent;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   -webkit-transition: text-decoration-color 250ms ease-out;
   transition: text-decoration-color 250ms ease-out;
   gap: 8px;

packages/ui/src/components/Link/__stories__/Examples.stories.tsx

@@ -0,0 +1,44 @@
+import type { Decorator } from '@storybook/react'
+import type { ComponentProps } from 'react'
+import { Link } from '..'
+import { Stack } from '../../Stack'
+import { Text } from '../../Text'
+
+export const Examples = (props: ComponentProps<typeof Link>) => (
+  <>
+    <Text as="p" variant="body">
+      To know more about that feature please visit{' '}
+      <Link
+        {...props}
+        target="_blank"
+        variant="inline"
+        href="https://example.com"
+      >
+        our website
+      </Link>{' '}
+      that is available any time.
+    </Text>
+    <Text as="p" variant="body">
+      To know more about that feature please visit{' '}
+      <Link {...props} target="_blank" href="https://example.com">
+        our website
+      </Link>{' '}
+      that is available any time.
+    </Text>
+    <Text as="p" variant="body">
+      To know more about that feature please visit{' '}
+      <Link {...props} iconPosition="right" href="https://example.com">
+        our website
+      </Link>{' '}
+      that is available any time.
+    </Text>
+  </>
+)
+
+Examples.decorators = [
+  StoryComponent => (
+    <Stack>
+      <StoryComponent />
+    </Stack>
+  ),
+] satisfies Decorator[]

packages/ui/src/components/Link/__stories__/index.stories.tsx

@@ -13,3 +13,4 @@ export { Target } from './Target.stories'
 export { Size } from './Size.stories'
 export { OneLine } from './OneLine.stories'
 export { Prominence } from './Prominence.stories'
+export { Examples } from './Examples.stories'