@nimbus-ds/checkbox 2.3.0-rc.4 → 2.3.0-rc.6
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 +93 -0
- package/dist/README.md +55 -0
- package/package.json +5 -5
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
The Checkbox component allows us to choose one or several options from a selection list.
|
|
4
|
+
|
|
5
|
+
## 2023-12-22 `2.2.1`
|
|
6
|
+
|
|
7
|
+
- Update component with new color tokens from `@nimbus-ds/tokens` package. ([#215](https://github.com/TiendaNube/nimbus-design-system/pull/215) by [@juanchigallego](https://github.com/juanchigallego))
|
|
8
|
+
|
|
9
|
+
## 2023-03-13 `2.2.0`
|
|
10
|
+
|
|
11
|
+
### 💡 Others
|
|
12
|
+
|
|
13
|
+
- Refactored use of `color tokens` in internal components by removing `.` per `-`. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
|
|
14
|
+
- Refactored style classes to have more semantic names. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
|
|
15
|
+
|
|
16
|
+
## 2023-02-24 `2.1.1`
|
|
17
|
+
|
|
18
|
+
### 💡 Others
|
|
19
|
+
|
|
20
|
+
- Reset font size and line height values on `Text` component to default values. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juanchigallego](https://github.com/juanchigallego))
|
|
21
|
+
|
|
22
|
+
## 2023-02-23 `2.1.0`
|
|
23
|
+
|
|
24
|
+
### 🎉 New features
|
|
25
|
+
|
|
26
|
+
- Added server side-rendering support to component. ([#105](https://github.com/TiendaNube/nimbus-design-system/pull/105) by [@juniorconquista](https://github.com/juniorconquista))
|
|
27
|
+
|
|
28
|
+
## 2022-12-22 `2.0.0`
|
|
29
|
+
|
|
30
|
+
### 💡 Others
|
|
31
|
+
|
|
32
|
+
- 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))
|
|
33
|
+
|
|
34
|
+
## 2022-12-07 `1.3.0`
|
|
35
|
+
|
|
36
|
+
### 🎉 New features
|
|
37
|
+
|
|
38
|
+
- 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))
|
|
39
|
+
|
|
40
|
+
### 📚 3rd party library updates
|
|
41
|
+
|
|
42
|
+
- Removed `terser-webpack-plugin@5.3.5`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
43
|
+
- Removed `ts-loader@9.3.1`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
44
|
+
- Removed `webpack-cli@4.10.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
45
|
+
- Removed `webpack@5.74.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
46
|
+
- Removed `typescript@4.7.4`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
47
|
+
|
|
48
|
+
## 2022-12-02 `1.2.1`
|
|
49
|
+
|
|
50
|
+
### 🐛 Bug fixes
|
|
51
|
+
|
|
52
|
+
- Fixed minimum size of checkbox and lineHeight of label. ([#62](https://github.com/TiendaNube/nimbus-design-system/pull/62) by [@juniorconquista](https://github.com/juniorconquista))
|
|
53
|
+
|
|
54
|
+
## 2022-09-29 `1.2.1`
|
|
55
|
+
|
|
56
|
+
### 🎉 New features
|
|
57
|
+
|
|
58
|
+
- Added displayName to component. ([#32](https://github.com/TiendaNube/nimbus-design-system/pull/32) by [@juniorconquista](https://github.com/juniorconquista))
|
|
59
|
+
- Added displayName to component `Checkbox.Skeleton`. ([#32](https://github.com/TiendaNube/nimbus-design-system/pull/32) by [@juniorconquista](https://github.com/juniorconquista))
|
|
60
|
+
|
|
61
|
+
### 💡 Others
|
|
62
|
+
|
|
63
|
+
- Adjusted color Icon check from `primary.background` to `neutral.background`. ([#32](https://github.com/TiendaNube/nimbus-design-system/pull/32) by [@juniorconquista](https://github.com/juniorconquista))
|
|
64
|
+
|
|
65
|
+
## 2022-09-27 `1.2.0`
|
|
66
|
+
|
|
67
|
+
### 💡 Others
|
|
68
|
+
|
|
69
|
+
- Adjusted component native typing for InputHTMLAttributes. ([#30](https://github.com/TiendaNube/nimbus-design-system/pull/30) by [@juniorconquista](https://github.com/juniorconquista))
|
|
70
|
+
|
|
71
|
+
## 2022-09-24 `1.0.0`
|
|
72
|
+
|
|
73
|
+
### 💡 Others
|
|
74
|
+
|
|
75
|
+
- Renamed `CheckboxSkeleton` component to `Skeleton`. ([#29](https://github.com/TiendaNube/nimbus-design-system/pull/29) by [@juniorconquista](https://github.com/juniorconquista))
|
|
76
|
+
- Adjusted `fontSize` size of internal `Text` component from `caption` to `base`. ([#29](https://github.com/TiendaNube/nimbus-design-system/pull/29) by [@juniorconquista](https://github.com/juniorconquista))
|
|
77
|
+
- Adjusted `lineHeight` size of internal `Text` component from `small` to `highlight`. ([#29](https://github.com/TiendaNube/nimbus-design-system/pull/29) by [@juniorconquista](https://github.com/juniorconquista))
|
|
78
|
+
|
|
79
|
+
### 📚 3rd party library updates
|
|
80
|
+
|
|
81
|
+
- Added `terser-webpack-plugin@5.3.5`. ([#28](https://github.com/TiendaNube/nimbus-design-system/pull/28) by [@juniorconquista](https://github.com/juniorconquista))
|
|
82
|
+
- Added `ts-loader@9.3.1`. ([#28](https://github.com/TiendaNube/nimbus-design-system/pull/28) by [@juniorconquista](https://github.com/juniorconquista))
|
|
83
|
+
- Added `typescript@4.7.4`. ([#28](https://github.com/TiendaNube/nimbus-design-system/pull/28) by [@juniorconquista](https://github.com/juniorconquista))
|
|
84
|
+
- Added `webpack@5.74.0`. ([#28](https://github.com/TiendaNube/nimbus-design-system/pull/28) by [@juniorconquista](https://github.com/juniorconquista))
|
|
85
|
+
- Added `webpack-cli@4.10.0`. ([#28](https://github.com/TiendaNube/nimbus-design-system/pull/28) by [@juniorconquista](https://github.com/juniorconquista))
|
|
86
|
+
|
|
87
|
+
### 🎉 New features
|
|
88
|
+
|
|
89
|
+
- Added `name`, `appearance`, `checked`, `disabled`, `indeterminate` and `label` properties to the Component. ([#28](https://github.com/TiendaNube/nimbus-design-system/pull/28) by [@juniorconquista](https://github.com/juniorconquista))
|
|
90
|
+
- Added stories on Component. ([#28](https://github.com/TiendaNube/nimbus-design-system/pull/28) by [@juniorconquista](https://github.com/juniorconquista))
|
|
91
|
+
- Created new `Checkbox.Skeleton` subcomponent. ([#28](https://github.com/TiendaNube/nimbus-design-system/pull/28) by [@juniorconquista](https://github.com/juniorconquista))
|
|
92
|
+
- Added `width` and `data-testid` properties to the Component `Checkbox.Skeleton`. ([#28](https://github.com/TiendaNube/nimbus-design-system/pull/28) by [@juniorconquista](https://github.com/juniorconquista))
|
|
93
|
+
- Added stories on Component `Checkbox.Skeleton`. ([#28](https://github.com/TiendaNube/nimbus-design-system/pull/28) by [@juniorconquista](https://github.com/juniorconquista))
|
package/dist/README.md
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
# `@nimbus-ds/checkbox`
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@nimbus-ds/checkbox)
|
|
4
|
+
|
|
5
|
+
The Checkbox component allows us to choose one or several options from a selection list.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
$ yarn add @nimbus-ds/checkbox
|
|
11
|
+
# or
|
|
12
|
+
$ npm install @nimbus-ds/checkbox
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Component Anatomy
|
|
16
|
+
|
|
17
|
+
The component is composed of a selection box with its respective states, in addition to a label for the content referring to the option.
|
|
18
|
+
|
|
19
|
+
## Guidelines
|
|
20
|
+
|
|
21
|
+
We use this component to select options in multiple choice forms, settings options, input lists or tables to perform massive or data filtering actions.
|
|
22
|
+
|
|
23
|
+
## Possible states
|
|
24
|
+
|
|
25
|
+
The Chip component has 4 configuration possibilities, which can be used according to the context and need of the application.
|
|
26
|
+
|
|
27
|
+
- Unchecked - is used to represent an unselected checkbox;
|
|
28
|
+
- Checked - is used to represent a selected checkbox;
|
|
29
|
+
- Indeterminate - is used to represent other checkboxes with different statuses;
|
|
30
|
+
- Disabled - is used to represent that a checkbox is disabled, this state can be combined with the previous 3.
|
|
31
|
+
|
|
32
|
+
## Labels
|
|
33
|
+
|
|
34
|
+
The component must always be accompanied by a label that clearly describes the option represented, always starting with the first capital letter, and sentences must never end in a semicolon. Options must be sorted using specific logical criteria (alphabetical, numerical, temporal, etc.).
|
|
35
|
+
|
|
36
|
+
## Aria Label
|
|
37
|
+
|
|
38
|
+
To facilitate navigation for people with some kind of visual or cognitive limitation, this component has a tag (Aria Label) to inform the Checkbox status.
|
|
39
|
+
|
|
40
|
+
## Usage recommendations
|
|
41
|
+
|
|
42
|
+
- Select optional items in data lists
|
|
43
|
+
- Select multiple data at once
|
|
44
|
+
- Select attributes from a filter or search
|
|
45
|
+
- Select multiple rows from a table
|
|
46
|
+
|
|
47
|
+
## Related components
|
|
48
|
+
|
|
49
|
+
Radio Button - Can be used to select options in settings or filters, where only a single choice is allowed.
|
|
50
|
+
|
|
51
|
+
## Usage
|
|
52
|
+
|
|
53
|
+
View docs [here](https://nimbus.nuvemshop.com.br/documentation/atomic-components/checkbox).
|
|
54
|
+
|
|
55
|
+
<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/checkbox",
|
|
3
|
-
"version": "2.3.0-rc.
|
|
3
|
+
"version": "2.3.0-rc.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
"version": "yarn version"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@nimbus-ds/icon": "^3.1.0-rc.
|
|
18
|
-
"@nimbus-ds/skeleton": "^3.1.0-rc.
|
|
19
|
-
"@nimbus-ds/text": "^6.4.0-rc.
|
|
17
|
+
"@nimbus-ds/icon": "^3.1.0-rc.6",
|
|
18
|
+
"@nimbus-ds/skeleton": "^3.1.0-rc.6",
|
|
19
|
+
"@nimbus-ds/text": "^6.4.0-rc.6"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"react": "^16.8 || ^17.0 || ^18.0",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"url": "https://github.com/TiendaNube/nimbus-design-system/issues"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@nimbus-ds/webpack": "^1.
|
|
34
|
+
"@nimbus-ds/webpack": "^1.5.0-rc.2"
|
|
35
35
|
},
|
|
36
36
|
"stableVersion": "2.2.1"
|
|
37
37
|
}
|