Skip to content

Commit cd219bd

Browse files
jsulpisjsulpis
committed
feat(Link): update the decoration and sentiment behavior, fix styles for the different sizes
1 parent f95aba8 commit cd219bd

23 files changed

Lines changed: 331 additions & 380 deletions

File tree

‎.changeset/dirty-beds-agree.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ultraviolet/ui": minor
3+
---
4+
5+
`Link`: update the decoration and sentiment behavior, fix styles for the different sizes

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

Lines changed: 32 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -113,33 +113,28 @@ exports[`banner > renders correctly with a link 1`] = `
113113
class="styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_gap_1rem_xxsmall__toi52u3v"
114114
>
115115
<a
116-
class="styles__1dtqm9e0 styles_prominence_default__1dtqm9e3 styles_sentiment_primary__1dtqm9e1 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_0__1dtqm9ee styles__1dtqm9en"
117-
data-variant="standalone"
116+
class="styles__1dtqm9e0 styles_prominence_default__1dtqm9e3 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_sentiment_info__1dtqm9e2 styles_undefined_compound_1__1dtqm9ed styles__1dtqm9en"
118117
href=""
119118
rel="noopener noreferrer"
120119
target="_blank"
121120
>
122121
Link
123-
<span
124-
class="styles__1dtqm9em"
122+
<svg
123+
class="styles__1dtqm9ep styles_small__1dtqm9el uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzg uv_icons_1sbwqkz1n"
124+
height="16"
125+
viewBox="0 0 16 16"
126+
width="16"
125127
>
126-
<svg
127-
class="styles__1dtqm9ep uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzg uv_icons_1sbwqkz1n"
128-
height="16"
129-
viewBox="0 0 16 16"
130-
width="16"
131-
>
132-
<title>
133-
OpenInNewIcon
134-
</title>
135-
<path
136-
d="M6.22 8.72a.75.75 0 0 0 1.06 1.06l5.22-5.22v1.69a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.75-.75h-3.5a.75.75 0 0 0 0 1.5h1.69z"
137-
/>
138-
<path
139-
d="M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 0 0 7 4H4.75A2.75 2.75 0 0 0 2 6.75v4.5A2.75 2.75 0 0 0 4.75 14h4.5A2.75 2.75 0 0 0 12 11.25V9a.75.75 0 0 0-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25z"
140-
/>
141-
</svg>
142-
</span>
128+
<title>
129+
OpenInNewIcon
130+
</title>
131+
<path
132+
d="M6.22 8.72a.75.75 0 0 0 1.06 1.06l5.22-5.22v1.69a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.75-.75h-3.5a.75.75 0 0 0 0 1.5h1.69z"
133+
/>
134+
<path
135+
d="M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 0 0 7 4H4.75A2.75 2.75 0 0 0 2 6.75v4.5A2.75 2.75 0 0 0 4.75 14h4.5A2.75 2.75 0 0 0 12 11.25V9a.75.75 0 0 0-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25z"
136+
/>
137+
</svg>
143138
</a>
144139
</div>
145140
</div>
@@ -375,33 +370,28 @@ exports[`banner > should render correctly with dark theme 1`] = `
375370
class="styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_gap_1rem_xxsmall__toi52u3v"
376371
>
377372
<a
378-
class="styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_primary__1dtqm9e1 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_2__1dtqm9eg styles__1dtqm9en"
379-
data-variant="standalone"
373+
class="styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_sentiment_info__1dtqm9e2 styles_undefined_compound_5__1dtqm9eh styles__1dtqm9en"
380374
href=""
381375
rel="noopener noreferrer"
382376
target="_blank"
383377
>
384378
Learn more
385-
<span
386-
class="styles__1dtqm9em"
379+
<svg
380+
class="styles__1dtqm9ep styles_small__1dtqm9el uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzg uv_icons_1sbwqkz1n"
381+
height="16"
382+
viewBox="0 0 16 16"
383+
width="16"
387384
>
388-
<svg
389-
class="styles__1dtqm9ep uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzg uv_icons_1sbwqkz1n"
390-
height="16"
391-
viewBox="0 0 16 16"
392-
width="16"
393-
>
394-
<title>
395-
OpenInNewIcon
396-
</title>
397-
<path
398-
d="M6.22 8.72a.75.75 0 0 0 1.06 1.06l5.22-5.22v1.69a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.75-.75h-3.5a.75.75 0 0 0 0 1.5h1.69z"
399-
/>
400-
<path
401-
d="M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 0 0 7 4H4.75A2.75 2.75 0 0 0 2 6.75v4.5A2.75 2.75 0 0 0 4.75 14h4.5A2.75 2.75 0 0 0 12 11.25V9a.75.75 0 0 0-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25z"
402-
/>
403-
</svg>
404-
</span>
385+
<title>
386+
OpenInNewIcon
387+
</title>
388+
<path
389+
d="M6.22 8.72a.75.75 0 0 0 1.06 1.06l5.22-5.22v1.69a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.75-.75h-3.5a.75.75 0 0 0 0 1.5h1.69z"
390+
/>
391+
<path
392+
d="M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 0 0 7 4H4.75A2.75 2.75 0 0 0 2 6.75v4.5A2.75 2.75 0 0 0 4.75 14h4.5A2.75 2.75 0 0 0 12 11.25V9a.75.75 0 0 0-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25z"
393+
/>
394+
</svg>
405395
</a>
406396
</div>
407397
</div>

‎packages/ui/src/components/Banner/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ export const Banner = ({
126126
</Button>
127127
) : null}
128128
{linkText ? (
129-
<Link href={linkHref ?? ''} prominence={prominence} sentiment="primary" size="small" target="_blank">
129+
<Link href={linkHref ?? ''} prominence={prominence} size="small" target="_blank">
130130
{linkText}
131131
</Link>
132132
) : null}

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

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@ exports[`breadcrumbs > click on middle item 1`] = `
1515
class="styles__1yxbbx44 styles__1yxbbx47"
1616
>
1717
<a
18-
class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_6__1dtqm9ek styles__1dtqm9en"
19-
data-variant="standalone"
18+
class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_sentiment_primary__1dtqm9e1 styles_undefined_compound_4__1dtqm9eg styles__1dtqm9en"
2019
href="/step1"
2120
>
2221
Step 1
@@ -62,8 +61,7 @@ exports[`breadcrumbs > last item should no be clickable 1`] = `
6261
class="styles__1yxbbx44 styles__1yxbbx47"
6362
>
6463
<a
65-
class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_6__1dtqm9ek styles__1dtqm9en"
66-
data-variant="standalone"
64+
class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_sentiment_primary__1dtqm9e1 styles_undefined_compound_4__1dtqm9eg styles__1dtqm9en"
6765
href="/step1"
6866
>
6967
Step 1
@@ -73,8 +71,7 @@ exports[`breadcrumbs > last item should no be clickable 1`] = `
7371
class="styles__1yxbbx44 styles__1yxbbx47"
7472
>
7573
<a
76-
class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_6__1dtqm9ek styles__1dtqm9en"
77-
data-variant="standalone"
74+
class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_sentiment_primary__1dtqm9e1 styles_undefined_compound_4__1dtqm9eg styles__1dtqm9en"
7875
href="/step1/step2"
7976
>
8077
I'm a very long long long long long long long long long long long long step
@@ -111,8 +108,7 @@ exports[`breadcrumbs > renders correctly with default values 1`] = `
111108
class="styles__1yxbbx44 styles__1yxbbx47"
112109
>
113110
<a
114-
class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_6__1dtqm9ek styles__1dtqm9en"
115-
data-variant="standalone"
111+
class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_sentiment_primary__1dtqm9e1 styles_undefined_compound_4__1dtqm9eg styles__1dtqm9en"
116112
href="/step1"
117113
>
118114
Step 1
@@ -122,8 +118,7 @@ exports[`breadcrumbs > renders correctly with default values 1`] = `
122118
class="styles__1yxbbx44 styles__1yxbbx47"
123119
>
124120
<a
125-
class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_6__1dtqm9ek styles__1dtqm9en"
126-
data-variant="standalone"
121+
class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_sentiment_primary__1dtqm9e1 styles_undefined_compound_4__1dtqm9eg styles__1dtqm9en"
127122
href="/step1/step2"
128123
>
129124
I'm a very long long long long long long long long long long long long step
@@ -177,8 +172,7 @@ exports[`breadcrumbs > renders correctly with minWidth and maxWidth 1`] = `
177172
class="styles__1yxbbx44 styles__1yxbbx47"
178173
>
179174
<a
180-
class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_6__1dtqm9ek styles__1dtqm9en"
181-
data-variant="standalone"
175+
class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_sentiment_primary__1dtqm9e1 styles_undefined_compound_4__1dtqm9eg styles__1dtqm9en"
182176
href="/step1"
183177
>
184178
Step 1
@@ -189,8 +183,7 @@ exports[`breadcrumbs > renders correctly with minWidth and maxWidth 1`] = `
189183
style="--_1yxbbx41: 100px; --_1yxbbx40: 200px;"
190184
>
191185
<a
192-
class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_6__1dtqm9ek styles__1dtqm9en"
193-
data-variant="standalone"
186+
class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_sentiment_primary__1dtqm9e1 styles_undefined_compound_4__1dtqm9eg styles__1dtqm9en"
194187
href="/step1/step2"
195188
>
196189
I'm a very long long long long long long long long long long long long step

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,8 +136,7 @@ exports[`emptySpace > should work with learn more 1`] = `
136136
class="styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_column_xxsmall__toi52u2d styles_gap_1rem_xxsmall__toi52u3v styles_justifyContent_center_xxsmall__toi52u61"
137137
>
138138
<a
139-
class="styles__1dtqm9e0 styles_prominence_default__1dtqm9e3 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodyStrong__1dtqm9eb styles_type_standalone__1dtqm9ed styles_undefined_compound_4__1dtqm9ei styles__1dtqm9en"
140-
data-variant="standalone"
139+
class="styles__1dtqm9e0 styles_prominence_default__1dtqm9e3 styles_oneLine_false__1dtqm9e8 styles_variant_bodyStrong__1dtqm9eb styles_sentiment_primary__1dtqm9e1 styles_undefined_compound_0__1dtqm9ec styles__1dtqm9en"
141140
href="https://scaleway.com"
142141
>
143142
Learn more

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -310,8 +310,7 @@ exports[`globalAlert > renders correctly with link 1`] = `
310310
>
311311
This is a 
312312
<a
313-
class="styles__1dtqm9e0 styles_prominence_strong__1dtqm9e4 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_inline__1dtqm9ec styles_undefined_compound_5__1dtqm9ej styles__1dtqm9en"
314-
data-variant="inline"
313+
class="styles__1dtqm9e0 styles_prominence_strong__1dtqm9e4 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_sentiment_primary__1dtqm9e1 styles_undefined_compound_2__1dtqm9ee styles__1dtqm9en"
315314
href="scaleway.com"
316315
>
317316
Global Alert

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

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { Decorator } from '@storybook/react-vite'
2+
import { DocPaperIcon } from '@ultraviolet/icons/DocPaperIcon'
23
import type { ComponentProps } from 'react'
34
import { Link } from '..'
45
import { Stack } from '../../Stack'
@@ -11,24 +12,20 @@ export const Examples = (args: ComponentProps<typeof Link>) => {
1112
<>
1213
<Text as="p" variant="body">
1314
To know more about that feature please visit{' '}
14-
<Link {...props} href="https://example.com" target="_blank" variant="inline">
15+
<Link {...props} href="https://example.com" target="_blank">
1516
our website
16-
</Link>{' '}
17-
that is available any time.
17+
</Link>
18+
.
1819
</Text>
1920
<Text as="p" variant="body">
20-
To know more about that feature please visit{' '}
21-
<Link {...props} href="https://example.com" target="_blank">
22-
our website
23-
</Link>{' '}
24-
that is available any time.
21+
Update the view using the{' '}
22+
<Link {...props}>
23+
filters panel <DocPaperIcon />
24+
</Link>
25+
.
2526
</Text>
2627
<Text as="p" variant="body">
27-
To know more about that feature please visit{' '}
28-
<Link {...props} href="https://example.com" iconPosition="right">
29-
our website
30-
</Link>{' '}
31-
that is available any time.
28+
Go to your <Link {...props}>profile page</Link> to update your preferences.
3229
</Text>
3330
</>
3431
)

‎packages/ui/src/components/Link/__stories__/Icons.stories.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import type { ComponentProps } from 'react'
2+
import { Link } from '..'
3+
import { Stack } from '../../Stack'
4+
5+
const sizes = ['large', 'small', 'xsmall'] as const
6+
7+
export const Icons = (props: ComponentProps<typeof Link>) => (
8+
<Stack gap={2}>
9+
<Stack direction="row" alignItems="end" gap="3">
10+
{sizes.map(size => (
11+
<Link key={size} {...props} size={size} iconPosition="left">
12+
{size}
13+
</Link>
14+
))}
15+
</Stack>
16+
<Stack direction="row" alignItems="end" gap="3">
17+
{sizes.map(size => (
18+
<Link key={size} {...props} size={size} iconPosition="right">
19+
{size}
20+
</Link>
21+
))}
22+
</Stack>
23+
</Stack>
24+
)
25+
26+
Icons.parameters = {
27+
docs: {
28+
description: { story: 'Add an arrow icon on the left or right with the `iconPosition` property.' },
29+
},
30+
}

‎packages/ui/src/components/Link/__stories__/OneLine.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ OneLine.parameters = {
2727
docs: {
2828
description: {
2929
story:
30-
' `oneLine` prop will force link to be display on a single line by adding `...` after cropped text and will display a tooltip with full text when hovered.',
30+
'The `oneLine` property will force the link to be display on a single line by adding an ellipsis `...` after the cropped text and will display a tooltip with the full text when hovered.',
3131
},
3232
},
3333
}

‎packages/ui/src/components/Link/__stories__/Primary.stories.tsx‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

0 commit comments

Comments
 (0)