@nimbus-ds/link 4.2.0-rc.2 → 4.2.0-rc.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CHANGELOG.md +127 -0
- package/dist/README.md +68 -0
- package/package.json +4 -4
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
The Link component allows us to navigate to external addresses.
|
|
4
|
+
|
|
5
|
+
## 2023-03-24 `4.1.0`
|
|
6
|
+
|
|
7
|
+
### 💡 Others
|
|
8
|
+
|
|
9
|
+
- Adjusted the component properties interface to use `ComponentPropsWithRef` and include the `as` prop in the output interface. ([#134](https://github.com/TiendaNube/nimbus-design-system/pull/134) by [@juniorconquista](https://github.com/juniorconquista))
|
|
10
|
+
|
|
11
|
+
## 2023-03-13 `4.0.0`
|
|
12
|
+
|
|
13
|
+
### 🛠 Breaking changes
|
|
14
|
+
|
|
15
|
+
- Changed appearance property from `neutral.background` to `neutral-background`. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
|
|
16
|
+
|
|
17
|
+
### 💡 Others
|
|
18
|
+
|
|
19
|
+
- Refactored style classes to have more semantic names. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
|
|
20
|
+
|
|
21
|
+
## 2023-02-24 `3.6.0`
|
|
22
|
+
|
|
23
|
+
### 🎉 New features
|
|
24
|
+
|
|
25
|
+
- Replaced `size` property with `fontSize`. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juanchigallego](https://github.com/juanchigallego))
|
|
26
|
+
- Added `lineHeight` property to component API. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juanchigallego](https://github.com/juanchigallego))
|
|
27
|
+
|
|
28
|
+
### 💡 Others
|
|
29
|
+
|
|
30
|
+
- Adjust `fontSize` and `color` properties in `Text` component on stories documentation. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juanchigallego](https://github.com/juanchigallego))
|
|
31
|
+
|
|
32
|
+
## 2023-02-23 `3.5.0`
|
|
33
|
+
|
|
34
|
+
### 🎉 New features
|
|
35
|
+
|
|
36
|
+
- Added server side-rendering support to component. ([#105](https://github.com/TiendaNube/nimbus-design-system/pull/105) by [@juniorconquista](https://github.com/juniorconquista))
|
|
37
|
+
|
|
38
|
+
## 2023-02-16 `3.4.0`
|
|
39
|
+
|
|
40
|
+
### 🎉 New features
|
|
41
|
+
|
|
42
|
+
- Removed external dependency from `@tiendanube/icons` package to now use internal `@nimbus-ds/icons` package. ([#94](https://github.com/TiendaNube/nimbus-design-system/pull/#94) by [@juniorconquista](https://github.com/juniorconquista))
|
|
43
|
+
|
|
44
|
+
### 📚 3rd party library updates
|
|
45
|
+
|
|
46
|
+
- Removed `@tiendanube/icons@0.3.1`. ([#94](https://github.com/TiendaNube/nimbus-design-system/pull/#94) by [@juniorconquista](https://github.com/juniorconquista))
|
|
47
|
+
|
|
48
|
+
## 2023-02-13 `3.3.0`
|
|
49
|
+
|
|
50
|
+
### 🎉 New features
|
|
51
|
+
|
|
52
|
+
- Added polymorphic typing support to component. ([#89](https://github.com/TiendaNube/nimbus-design-system/pull/89) by [@juniorconquista](https://github.com/juniorconquista))
|
|
53
|
+
- Added `as` property to the Component. ([#89](https://github.com/TiendaNube/nimbus-design-system/pull/89) by [@juniorconquista](https://github.com/juniorconquista))
|
|
54
|
+
|
|
55
|
+
### 💡 Others
|
|
56
|
+
|
|
57
|
+
- Removed subcomponent `Link.Button`. [#89](https://github.com/TiendaNube/nimbus-design-system/pull/#89) by [@juniorconquista](https://github.com/juniorconquista))
|
|
58
|
+
|
|
59
|
+
## 2023-02-06 `3.2.0`
|
|
60
|
+
|
|
61
|
+
### 🎉 New features
|
|
62
|
+
|
|
63
|
+
- Added new `Link.Button` subcomponent. [#78](https://github.com/TiendaNube/nimbus-design-system/pull/#78) by [@juanchigallego](https://github.com/juanchigallego))
|
|
64
|
+
- Added `Link.Button` stories documentation to `Link` stories. [#78](https://github.com/TiendaNube/nimbus-design-system/pull/#78) by [@juanchigallego](https://github.com/juanchigallego))
|
|
65
|
+
|
|
66
|
+
## 2023-01-27 `3.1.0`
|
|
67
|
+
|
|
68
|
+
### 🎉 New features
|
|
69
|
+
|
|
70
|
+
- Add `neutral.background` option to `appearance` property. ([#76](https://github.com/TiendaNube/nimbus-design-system/pull/76) by [@juanchigallego](https://github.com/juanchigallego))
|
|
71
|
+
|
|
72
|
+
## 2022-12-22 `3.0.0`
|
|
73
|
+
|
|
74
|
+
### 💡 Others
|
|
75
|
+
|
|
76
|
+
- Removed direct dependency on `nimbus-ds/styles` package from component build. ([#69](https://github.com/TiendaNube/nimbus-design-system/pull/69) by [@juniorconquista](https://github.com/juniorconquista))
|
|
77
|
+
|
|
78
|
+
## 2022-12-15 `2.1.3`
|
|
79
|
+
|
|
80
|
+
### 🐛 Bug fixes
|
|
81
|
+
|
|
82
|
+
- Fixed bug in the `textDecoration` property where the `none` option was not applied when the link contained the `href` property. ([#66](https://github.com/TiendaNube/nimbus-design-system/pull/66) by [@juniorconquista](https://github.com/juniorconquista))
|
|
83
|
+
|
|
84
|
+
## 2022-12-07 `2.1.0`
|
|
85
|
+
|
|
86
|
+
### 🎉 New features
|
|
87
|
+
|
|
88
|
+
- Changed build build to consume inner package `@nimbus-ds/webpack`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
89
|
+
|
|
90
|
+
### 📚 3rd party library updates
|
|
91
|
+
|
|
92
|
+
- Removed `terser-webpack-plugin@5.3.5`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
93
|
+
- Removed `ts-loader@9.3.1`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
94
|
+
- Removed `webpack-cli@4.10.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
95
|
+
- Removed `webpack@5.74.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
96
|
+
- Removed `typescript@4.7.4`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
97
|
+
|
|
98
|
+
## 2022-12-01 `2.0.0`
|
|
99
|
+
|
|
100
|
+
### 💡 Others
|
|
101
|
+
|
|
102
|
+
- Removed `as` property to the component. ([#61](https://github.com/TiendaNube/nimbus-design-system/pull/61) by [@juniorconquista](https://github.com/juniorconquista))
|
|
103
|
+
- Refactored component style pack. ([#61](https://github.com/TiendaNube/nimbus-design-system/pull/61) by [@juniorconquista](https://github.com/juniorconquista))
|
|
104
|
+
|
|
105
|
+
## 2022-11-18 `1.1.0`
|
|
106
|
+
|
|
107
|
+
### 📚 3rd party library updates
|
|
108
|
+
|
|
109
|
+
- Updated `@tiendanube/icons@0.3.1`. ([#57](https://github.com/TiendaNube/nimbus-design-system/pull/#57) by [@juniorconquista](https://github.com/juniorconquista))
|
|
110
|
+
|
|
111
|
+
## 2022-09-30 `1.0.0`
|
|
112
|
+
|
|
113
|
+
### 📚 3rd party library updates
|
|
114
|
+
|
|
115
|
+
- Added `terser-webpack-plugin@5.3.5`. ([#35](https://github.com/TiendaNube/nimbus-design-system/pull/35) by [@juanchigallego](https://github.com/juanchigallego))
|
|
116
|
+
- Added `ts-loader@9.3.1`. ([#35](https://github.com/TiendaNube/nimbus-design-system/pull/35) by [@juanchigallego](https://github.com/juanchigallego))
|
|
117
|
+
- Added `typescript@4.7.4`. ([#35](https://github.com/TiendaNube/nimbus-design-system/pull/35) by [@juanchigallego](https://github.com/juanchigallego))
|
|
118
|
+
- Added `webpack@5.74.0`. ([#35](https://github.com/TiendaNube/nimbus-design-system/pull/35) by [@juanchigallego](https://github.com/juanchigallego))
|
|
119
|
+
- Added `webpack-cli@4.10.0`. ([#35](https://github.com/TiendaNube/nimbus-design-system/pull/35) by [@juanchigallego](https://github.com/juanchigallego))
|
|
120
|
+
|
|
121
|
+
### 🎉 New features
|
|
122
|
+
|
|
123
|
+
- Added `appearance`, `as`, `textDecoration`, `children` and `size` properties to the component. ([#35](https://github.com/TiendaNube/nimbus-design-system/pull/35) by [@juanchigallego](https://github.com/juanchigallego))
|
|
124
|
+
- Added stories to component. ([#35](https://github.com/TiendaNube/nimbus-design-system/pull/35) by [@juanchigallego](https://github.com/juanchigallego))
|
|
125
|
+
- Created new `Link.Skeleton` subcomponent. ([#35](https://github.com/TiendaNube/nimbus-design-system/pull/35) by [@juanchigallego](https://github.com/juanchigallego))
|
|
126
|
+
- Added `width`, `height` and `borderRadius` properties to the component `Link.Skeleton`. ([#35](https://github.com/TiendaNube/nimbus-design-system/pull/35) by [@juanchigallego](https://github.com/juanchigallego))
|
|
127
|
+
- Added stories to the component `Link.Skeleton`. ([#35](https://github.com/TiendaNube/nimbus-design-system/pull/35) by [@juanchigallego](https://github.com/juanchigallego))
|
package/dist/README.md
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
# `@nimbus-ds/link`
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@nimbus-ds/link)
|
|
4
|
+
|
|
5
|
+
The Link component allows us to navigate between internal or external pages of a website.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
$ yarn add @nimbus-ds/link
|
|
11
|
+
# or
|
|
12
|
+
$ npm install @nimbus-ds/link
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Component Anatomy
|
|
16
|
+
|
|
17
|
+
The component consists of text, as well as optional icons.
|
|
18
|
+
|
|
19
|
+
## Guidelines
|
|
20
|
+
|
|
21
|
+
We use this component independently, within other components or within the text. Link currently has 3 variants with different uses, in addition to the possibility of including an icon.
|
|
22
|
+
|
|
23
|
+
### Primary Link
|
|
24
|
+
|
|
25
|
+
This variant is used to highlight important links for the user's navigation, as it is blue in color and the use of the underline is optional. The repetition of this type of link on the same page is allowed, but not more than once per element.
|
|
26
|
+
|
|
27
|
+
### Neutral Link
|
|
28
|
+
|
|
29
|
+
This is the variant used for neutral and complementary actions, it can accompany the Primary or Danger variant in cases where we have opposite actions.
|
|
30
|
+
For example: If the Primary Link is "Save" the Default Link must be "Cancel".
|
|
31
|
+
|
|
32
|
+
### DangerLink
|
|
33
|
+
|
|
34
|
+
This variant is used to highlight links with destructive action, where the use of the Button Danger component has a visual role beyond what is necessary.
|
|
35
|
+
|
|
36
|
+
### Icons
|
|
37
|
+
|
|
38
|
+
We use the icons to reinforce the message of the link or to inform that your address is external, they can be applied before or after the text.
|
|
39
|
+
|
|
40
|
+
### Content
|
|
41
|
+
|
|
42
|
+
The Link text must clearly describe the action by referring to it using colloquial language and addressed directly to the user. For example: we use "Edit categories" and not "Categories".
|
|
43
|
+
|
|
44
|
+
External links must always be accompanied by an icon that helps to illustrate what will happen when you click on it, with the aim of reinforcing the message and providing more visual resources.
|
|
45
|
+
|
|
46
|
+
For example, when the link performs a navigation action to an external link, we must use an icon to indicate that the user will be directed to another application or external page.
|
|
47
|
+
|
|
48
|
+
The exception to this rule is when the Link is within the context of a paragraph or sentence, where we can avoid using the icon to maintain the visual structure of the text block.
|
|
49
|
+
|
|
50
|
+
### Recommendation for use
|
|
51
|
+
|
|
52
|
+
- Navigate to another section within the app or website
|
|
53
|
+
- Navigate to another app or external page
|
|
54
|
+
- Perform minor actions
|
|
55
|
+
|
|
56
|
+
### Related component
|
|
57
|
+
|
|
58
|
+
- Button - Can be used to initiate actions, make state or page changes that require greater visual prominence.
|
|
59
|
+
|
|
60
|
+
### Polymorphic support
|
|
61
|
+
|
|
62
|
+
This component can be rendered as a `<button>` or `<link>` HTML element, using the `as` property, which allows it to inherit all native properties of HTML elements for different implementations.
|
|
63
|
+
|
|
64
|
+
## Usage
|
|
65
|
+
|
|
66
|
+
View docs [here](https://nimbus.nuvemshop.com.br/documentation/atomic-components/link).
|
|
67
|
+
|
|
68
|
+
<img alt="Nimbus" style="margin-bottom: 30px;" src="https://tiendanube.github.io/design-system-nimbus/static/media/nimbus-logo.ab60bd79.png" height="30" />
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nimbus-ds/link",
|
|
3
|
-
"version": "4.2.0-rc.
|
|
3
|
+
"version": "4.2.0-rc.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"version": "yarn version"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@nimbus-ds/skeleton": "^3.1.0-rc.
|
|
17
|
+
"@nimbus-ds/skeleton": "^3.1.0-rc.5"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"react": "^16.8 || ^17.0 || ^18.0",
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"url": "https://github.com/TiendaNube/nimbus-design-system/issues"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@nimbus-ds/icons": "^1.
|
|
33
|
-
"@nimbus-ds/webpack": "^1.
|
|
32
|
+
"@nimbus-ds/icons": "^1.7.0-rc.2",
|
|
33
|
+
"@nimbus-ds/webpack": "^1.5.0-rc.1"
|
|
34
34
|
},
|
|
35
35
|
"stableVersion": "4.1.0"
|
|
36
36
|
}
|