@dt-dds/react-checkbox 1.0.0-beta.49 → 1.0.0-beta.51

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/index.d.mts +1 -0
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.js +21 -12
  5. package/dist/index.mjs +21 -12
  6. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @dt-ui/react-checkbox
2
2
 
3
+ ## 1.0.0-beta.51
4
+
5
+ ### Minor Changes
6
+
7
+ - feat: implement new Dropdown
8
+ - feat: implement new Select field
9
+
10
+ ### Patch Changes
11
+
12
+ - style: apply minor changes to Checkbox
13
+ - Updated dependencies
14
+ - Updated dependencies
15
+ - @dt-dds/react-core@1.0.0-beta.51
16
+ - @dt-dds/react-icon@1.0.0-beta.53
17
+
18
+ ## 1.0.0-beta.50
19
+
20
+ ### Patch Changes
21
+
22
+ - refactor: use component size from core
23
+ - Updated dependencies
24
+ - @dt-dds/react-icon@1.0.0-beta.52
25
+
3
26
  ## 1.0.0-beta.49
4
27
 
5
28
  ### Patch Changes
package/dist/index.d.mts CHANGED
@@ -7,6 +7,7 @@ interface CheckBoxProps extends BaseProps, ComponentPropsWithRef<'input'> {
7
7
  onChange?: (evt: ChangeEvent<HTMLInputElement>) => void;
8
8
  isChecked?: boolean;
9
9
  isDisabled?: boolean;
10
+ className?: string;
10
11
  }
11
12
  declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckBoxProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
12
13
 
package/dist/index.d.ts CHANGED
@@ -7,6 +7,7 @@ interface CheckBoxProps extends BaseProps, ComponentPropsWithRef<'input'> {
7
7
  onChange?: (evt: ChangeEvent<HTMLInputElement>) => void;
8
8
  isChecked?: boolean;
9
9
  isDisabled?: boolean;
10
+ className?: string;
10
11
  }
11
12
  declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckBoxProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
12
13
 
package/dist/index.js CHANGED
@@ -73,12 +73,12 @@ var checkboxStyles = (theme, isChecked, isDisabled) => {
73
73
  if (isChecked) {
74
74
  return `
75
75
  border: none;
76
- background-color: ${isDisabled ? theme.palette.primary.light : theme.palette.accent.default};
76
+ background-color: ${isDisabled ? theme.palette.informative.light : theme.palette.informative.default};
77
77
  `;
78
78
  }
79
79
  return `
80
- border: 1px solid ${theme.palette.border.default};
81
- background-color: ${theme.palette.surface.contrast};
80
+ border: 1px solid ${theme.palette.informative.medium};
81
+ background-color: ${isDisabled ? theme.palette.informative.light : theme.palette.surface.contrast};
82
82
  `;
83
83
  };
84
84
 
@@ -97,17 +97,16 @@ var CheckboxStyled = import_styled.default.label`
97
97
 
98
98
  &:hover > div {
99
99
  ${!isDisabled && !isChecked && `
100
- background-color: ${theme.palette.primary.light};
101
100
  border: 1px solid ${theme.palette.primary.default};
102
101
  `};
103
102
  }
104
103
  `}
105
104
  `;
106
105
  var CheckBoxInputWrapper = import_styled.default.div`
107
- height: 24px;
108
- min-height: 24px;
109
- width: 24px;
110
- min-width: 24px;
106
+ height: 20px;
107
+ min-height: 20px;
108
+ width: 20px;
109
+ min-width: 20px;
111
110
  position: relative;
112
111
  display: flex;
113
112
  `;
@@ -136,7 +135,7 @@ var CheckboxLabelStyled = import_styled.default.span`
136
135
  ${({ theme, isDisabled }) => `
137
136
  padding-left: ${theme.spacing.spacing_30};
138
137
  ${theme.fontStyles.bodyMdRegular};
139
- color: ${isDisabled ? theme.palette.content.light : theme.palette.content.default};
138
+ color: ${isDisabled ? theme.palette.content.medium : theme.palette.content.default};
140
139
  `}
141
140
  `;
142
141
 
@@ -150,14 +149,16 @@ var Checkbox = (0, import_react2.forwardRef)(
150
149
  children,
151
150
  isChecked = false,
152
151
  isDisabled = false,
153
- style
152
+ style,
153
+ className
154
154
  } = _b, rest = __objRest(_b, [
155
155
  "dataTestId",
156
156
  "onChange",
157
157
  "children",
158
158
  "isChecked",
159
159
  "isDisabled",
160
- "style"
160
+ "style",
161
+ "className"
161
162
  ]);
162
163
  const theme = (0, import_react.useTheme)();
163
164
  const handleOnChangeTrigger = (event) => {
@@ -169,6 +170,7 @@ var Checkbox = (0, import_react2.forwardRef)(
169
170
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
170
171
  CheckboxStyled,
171
172
  {
173
+ className,
172
174
  "data-testid": dataTestId,
173
175
  isChecked,
174
176
  isDisabled,
@@ -185,7 +187,14 @@ var Checkbox = (0, import_react2.forwardRef)(
185
187
  type: "checkbox"
186
188
  }, rest)
187
189
  ),
188
- isChecked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icon.Icon, { code: "check", color: theme.palette.content.contrast }) : null
190
+ isChecked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
191
+ import_react_icon.Icon,
192
+ {
193
+ code: "check",
194
+ color: theme.palette.content.contrast,
195
+ size: "medium"
196
+ }
197
+ ) : null
189
198
  ] }),
190
199
  children ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxLabelStyled, { isChecked, isDisabled, children }) : null
191
200
  ]
package/dist/index.mjs CHANGED
@@ -40,12 +40,12 @@ var checkboxStyles = (theme, isChecked, isDisabled) => {
40
40
  if (isChecked) {
41
41
  return `
42
42
  border: none;
43
- background-color: ${isDisabled ? theme.palette.primary.light : theme.palette.accent.default};
43
+ background-color: ${isDisabled ? theme.palette.informative.light : theme.palette.informative.default};
44
44
  `;
45
45
  }
46
46
  return `
47
- border: 1px solid ${theme.palette.border.default};
48
- background-color: ${theme.palette.surface.contrast};
47
+ border: 1px solid ${theme.palette.informative.medium};
48
+ background-color: ${isDisabled ? theme.palette.informative.light : theme.palette.surface.contrast};
49
49
  `;
50
50
  };
51
51
 
@@ -64,17 +64,16 @@ var CheckboxStyled = styled.label`
64
64
 
65
65
  &:hover > div {
66
66
  ${!isDisabled && !isChecked && `
67
- background-color: ${theme.palette.primary.light};
68
67
  border: 1px solid ${theme.palette.primary.default};
69
68
  `};
70
69
  }
71
70
  `}
72
71
  `;
73
72
  var CheckBoxInputWrapper = styled.div`
74
- height: 24px;
75
- min-height: 24px;
76
- width: 24px;
77
- min-width: 24px;
73
+ height: 20px;
74
+ min-height: 20px;
75
+ width: 20px;
76
+ min-width: 20px;
78
77
  position: relative;
79
78
  display: flex;
80
79
  `;
@@ -103,7 +102,7 @@ var CheckboxLabelStyled = styled.span`
103
102
  ${({ theme, isDisabled }) => `
104
103
  padding-left: ${theme.spacing.spacing_30};
105
104
  ${theme.fontStyles.bodyMdRegular};
106
- color: ${isDisabled ? theme.palette.content.light : theme.palette.content.default};
105
+ color: ${isDisabled ? theme.palette.content.medium : theme.palette.content.default};
107
106
  `}
108
107
  `;
109
108
 
@@ -117,14 +116,16 @@ var Checkbox = forwardRef(
117
116
  children,
118
117
  isChecked = false,
119
118
  isDisabled = false,
120
- style
119
+ style,
120
+ className
121
121
  } = _b, rest = __objRest(_b, [
122
122
  "dataTestId",
123
123
  "onChange",
124
124
  "children",
125
125
  "isChecked",
126
126
  "isDisabled",
127
- "style"
127
+ "style",
128
+ "className"
128
129
  ]);
129
130
  const theme = useTheme();
130
131
  const handleOnChangeTrigger = (event) => {
@@ -136,6 +137,7 @@ var Checkbox = forwardRef(
136
137
  return /* @__PURE__ */ jsxs(
137
138
  CheckboxStyled,
138
139
  {
140
+ className,
139
141
  "data-testid": dataTestId,
140
142
  isChecked,
141
143
  isDisabled,
@@ -152,7 +154,14 @@ var Checkbox = forwardRef(
152
154
  type: "checkbox"
153
155
  }, rest)
154
156
  ),
155
- isChecked ? /* @__PURE__ */ jsx(Icon, { code: "check", color: theme.palette.content.contrast }) : null
157
+ isChecked ? /* @__PURE__ */ jsx(
158
+ Icon,
159
+ {
160
+ code: "check",
161
+ color: theme.palette.content.contrast,
162
+ size: "medium"
163
+ }
164
+ ) : null
156
165
  ] }),
157
166
  children ? /* @__PURE__ */ jsx(CheckboxLabelStyled, { isChecked, isDisabled, children }) : null
158
167
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dt-dds/react-checkbox",
3
- "version": "1.0.0-beta.49",
3
+ "version": "1.0.0-beta.51",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": "./dist/index.js"
@@ -20,8 +20,8 @@
20
20
  "test:update:snapshot": "jest -u"
21
21
  },
22
22
  "dependencies": {
23
- "@dt-dds/react-core": "1.0.0-beta.50",
24
- "@dt-dds/react-icon": "1.0.0-beta.51",
23
+ "@dt-dds/react-core": "1.0.0-beta.51",
24
+ "@dt-dds/react-icon": "1.0.0-beta.53",
25
25
  "@dt-dds/themes": "1.0.0-beta.9"
26
26
  },
27
27
  "devDependencies": {