@infonomic/uikit 6.0.2 → 6.0.4

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 (12) hide show
  1. package/dist/components/forms/checkbox-group.d.ts.map +1 -1
  2. package/dist/components/forms/checkbox-group.js +2 -1
  3. package/dist/components/forms/checkbox-group.module.css +16 -0
  4. package/dist/components/forms/checkbox-group.module.js +6 -0
  5. package/dist/components/forms/checkbox-group_module.css +10 -0
  6. package/dist/components/forms/checkbox.module.css +5 -5
  7. package/dist/components/forms/checkbox_module.css +5 -5
  8. package/package.json +1 -1
  9. package/src/components/forms/checkbox-group.module.css +16 -0
  10. package/src/components/forms/checkbox-group.stories.tsx +47 -0
  11. package/src/components/forms/checkbox-group.tsx +2 -1
  12. package/src/components/forms/checkbox.module.css +5 -5
package/dist/components/forms/checkbox-group.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/components/forms/checkbox-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAC7C;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgEtD,CAAA"}
1
+ {"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/components/forms/checkbox-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAC7C;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgEtD,CAAA"}
package/dist/components/forms/checkbox-group.js CHANGED
@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
3
3
  import { useEffect, useState } from "react";
4
4
  import classnames from "classnames";
5
5
  import { Checkbox } from "./checkbox.js";
6
+ import checkbox_group_module from "./checkbox-group.module.js";
6
7
  const CheckboxGroup = ({ groupName, className, checkBoxClasses, checkBoxes, defaultValues, controlledValue, disabled = false, onChange })=>{
7
8
  let initialValue = [];
8
9
  if (void 0 !== controlledValue && controlledValue.length > 0) initialValue = controlledValue.split(',');
@@ -29,7 +30,7 @@ const CheckboxGroup = ({ groupName, className, checkBoxClasses, checkBoxes, defa
29
30
  onChange?.(s);
30
31
  };
31
32
  return /*#__PURE__*/ jsx("div", {
32
- className: classnames('infonomic-checkbox-group', className),
33
+ className: classnames('infonomic-checkbox-group', checkbox_group_module["checkbox-group"], className),
33
34
  children: checkBoxes.map((cb)=>/*#__PURE__*/ jsx(Checkbox, {
34
35
  id: `${groupName}-${cb.id}`,
35
36
  name: `${groupName}-${cb.id}`,
package/dist/components/forms/checkbox-group.module.css ADDED
@@ -0,0 +1,16 @@
1
+ @layer infonomic-base,
2
+ infonomic-functional,
3
+ infonomic-utilities,
4
+ infonomic-theme,
5
+ infonomic-typography,
6
+ infonomic-components;
7
+
8
+ @layer infonomic-components {
9
+
10
+ :global(.infonomic-checkbox-group),
11
+ .checkbox-group {
12
+ display: flex;
13
+ flex-direction: column;
14
+ gap: var(--spacing-8);
15
+ }
16
+ }
package/dist/components/forms/checkbox-group.module.js ADDED
@@ -0,0 +1,6 @@
1
+ import "./checkbox-group_module.css";
2
+ const checkbox_group_module = {
3
+ "checkbox-group": "checkbox-group-Qh9Trn",
4
+ checkboxGroup: "checkbox-group-Qh9Trn"
5
+ };
6
+ export default checkbox_group_module;
package/dist/components/forms/checkbox-group_module.css ADDED
@@ -0,0 +1,10 @@
1
+ @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
2
+
3
+ @layer infonomic-components {
4
+ :is(.infonomic-checkbox-group, .checkbox-group-Qh9Trn) {
5
+ gap: var(--spacing-8);
6
+ flex-direction: column;
7
+ display: flex;
8
+ }
9
+ }
10
+
package/dist/components/forms/checkbox.module.css CHANGED
@@ -189,7 +189,7 @@ infonomic-components;
189
189
  --checkbox-variant-outlined-hover-border: var(--fill-primary-strong-hover);
190
190
  --checkbox-variant-outline-ring-color: var(--ring-primary);
191
191
  --checkbox-variant-filled: var(--fill-primary-strong);
192
- --checkbox-icon-color: var(--text-on-primary);
192
+ --checkbox-icon-color: white;
193
193
  }
194
194
 
195
195
  .secondary,
@@ -199,7 +199,7 @@ infonomic-components;
199
199
  --checkbox-variant-outlined-hover-border: var(--fill-secondary-strong-hover);
200
200
  --checkbox-variant-outline-ring-color: var(--ring-secondary);
201
201
  --checkbox-variant-filled: var(--fill-secondary-strong);
202
- --checkbox-icon-color: var(--text-on-secondary);
202
+ --checkbox-icon-color: black;
203
203
  }
204
204
 
205
205
  .noeffect,
@@ -219,7 +219,7 @@ infonomic-components;
219
219
  --checkbox-variant-outlined-hover-border: var(--fill-success-strong-hover);
220
220
  --checkbox-variant-outline-ring-color: var(--ring-success);
221
221
  --checkbox-variant-filled: var(--fill-success-strong);
222
- --checkbox-icon-color: var(--text-on-success);
222
+ --checkbox-icon-color: white;
223
223
  }
224
224
 
225
225
  .info,
@@ -229,7 +229,7 @@ infonomic-components;
229
229
  --checkbox-variant-outlined-hover-border: var(--fill-info-strong-hover);
230
230
  --checkbox-variant-outline-ring-color: var(--ring-info);
231
231
  --checkbox-variant-filled: var(--fill-info-strong);
232
- --checkbox-icon-color: var(--text-on-info);
232
+ --checkbox-icon-color: white;
233
233
  }
234
234
 
235
235
  .warning,
@@ -249,7 +249,7 @@ infonomic-components;
249
249
  --checkbox-variant-outlined-hover-border: var(--fill-danger-strong-hover);
250
250
  --checkbox-variant-outline-ring-color: var(--ring-danger);
251
251
  --checkbox-variant-filled: var(--fill-danger-strong);
252
- --checkbox-icon-color: var(--text-on-danger);
252
+ --checkbox-icon-color: white;
253
253
  }
254
254
 
255
255
  /* Dark mode handled by semantic tokens in theme layer */
package/dist/components/forms/checkbox_module.css CHANGED
@@ -136,7 +136,7 @@
136
136
  --checkbox-variant-outlined-hover-border: var(--fill-primary-strong-hover);
137
137
  --checkbox-variant-outline-ring-color: var(--ring-primary);
138
138
  --checkbox-variant-filled: var(--fill-primary-strong);
139
- --checkbox-icon-color: var(--text-on-primary);
139
+ --checkbox-icon-color: white;
140
140
  }
141
141
 
142
142
  :is(.secondary-AWuj0h, .infonomic-checkbox-secondary) {
@@ -145,7 +145,7 @@
145
145
  --checkbox-variant-outlined-hover-border: var(--fill-secondary-strong-hover);
146
146
  --checkbox-variant-outline-ring-color: var(--ring-secondary);
147
147
  --checkbox-variant-filled: var(--fill-secondary-strong);
148
- --checkbox-icon-color: var(--text-on-secondary);
148
+ --checkbox-icon-color: black;
149
149
  }
150
150
 
151
151
  :is(.noeffect-iWFjDW, .infonomic-checkbox-noeffect) {
@@ -163,7 +163,7 @@
163
163
  --checkbox-variant-outlined-hover-border: var(--fill-success-strong-hover);
164
164
  --checkbox-variant-outline-ring-color: var(--ring-success);
165
165
  --checkbox-variant-filled: var(--fill-success-strong);
166
- --checkbox-icon-color: var(--text-on-success);
166
+ --checkbox-icon-color: white;
167
167
  }
168
168
 
169
169
  :is(.info-nDP5Bh, .infonomic-checkbox-info) {
@@ -172,7 +172,7 @@
172
172
  --checkbox-variant-outlined-hover-border: var(--fill-info-strong-hover);
173
173
  --checkbox-variant-outline-ring-color: var(--ring-info);
174
174
  --checkbox-variant-filled: var(--fill-info-strong);
175
- --checkbox-icon-color: var(--text-on-info);
175
+ --checkbox-icon-color: white;
176
176
  }
177
177
 
178
178
  :is(.warning-leHmkw, .infonomic-checkbox-warning) {
@@ -190,7 +190,7 @@
190
190
  --checkbox-variant-outlined-hover-border: var(--fill-danger-strong-hover);
191
191
  --checkbox-variant-outline-ring-color: var(--ring-danger);
192
192
  --checkbox-variant-filled: var(--fill-danger-strong);
193
- --checkbox-icon-color: var(--text-on-danger);
193
+ --checkbox-icon-color: white;
194
194
  }
195
195
 
196
196
  @keyframes checkBoxIn-DSnbUl {
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@infonomic/uikit",
3
3
  "private": false,
4
4
  "license": "MIT",
5
- "version": "6.0.2",
5
+ "version": "6.0.4",
6
6
  "type": "module",
7
7
  "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
8
8
  "keywords": [
package/src/components/forms/checkbox-group.module.css ADDED
@@ -0,0 +1,16 @@
1
+ @layer infonomic-base,
2
+ infonomic-functional,
3
+ infonomic-utilities,
4
+ infonomic-theme,
5
+ infonomic-typography,
6
+ infonomic-components;
7
+
8
+ @layer infonomic-components {
9
+
10
+ :global(.infonomic-checkbox-group),
11
+ .checkbox-group {
12
+ display: flex;
13
+ flex-direction: column;
14
+ gap: var(--spacing-8);
15
+ }
16
+ }
package/src/components/forms/checkbox-group.stories.tsx ADDED
@@ -0,0 +1,47 @@
1
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
2
+ import type React from 'react'
3
+ import { useState } from 'react'
4
+
5
+ import { CheckboxGroup } from './checkbox-group.js'
6
+
7
+
8
+ export default {
9
+ title: 'Components/Forms/CheckboxGroup',
10
+ component: CheckboxGroup,
11
+ argTypes: {},
12
+ }
13
+
14
+ export const Default = (): React.JSX.Element => {
15
+ const [checked, setChecked] = useState(false)
16
+
17
+ const handleOnClick = (): void => {
18
+ console.log('clicked')
19
+ setChecked(!checked)
20
+ }
21
+
22
+ return (
23
+ <div style={{ maxWidth: '800px', margin: '2rem auto 2rem' }}>
24
+ <h2 className="text-xl" style={{ marginBottom: '1rem' }}>
25
+ Checkbox Group
26
+ </h2>
27
+ <div className="grid gap-4 grid-cols-3">
28
+ <div className="control">
29
+ <CheckboxGroup
30
+ groupName="roles"
31
+ // TODO: Nullability of role.name
32
+ checkBoxes={[
33
+ { id: 'admin', label: 'Admin' },
34
+ { id: 'editor', label: 'Editor' },
35
+ { id: 'viewer', label: 'Viewer' },
36
+ ]}
37
+ // onChange={(selected) => {
38
+ // handleOnClick(selected)
39
+ // }}
40
+ />
41
+ </div>
42
+ </div>
43
+ </div>
44
+ )
45
+ }
46
+
47
+
package/src/components/forms/checkbox-group.tsx CHANGED
@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react'
6
6
  import cx from 'classnames'
7
7
 
8
8
  import { Checkbox } from './checkbox.js'
9
+ import styles from './checkbox-group.module.css'
9
10
 
10
11
  export interface CheckboxGroupProps {
11
12
  groupName: string
@@ -67,7 +68,7 @@ export const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
67
68
  }
68
69
 
69
70
  return (
70
- <div className={cx('infonomic-checkbox-group', className)}>
71
+ <div className={cx('infonomic-checkbox-group', styles['checkbox-group'], className)}>
71
72
  {checkBoxes.map((cb) => (
72
73
  <Checkbox
73
74
  key={cb.id}
package/src/components/forms/checkbox.module.css CHANGED
@@ -189,7 +189,7 @@ infonomic-components;
189
189
  --checkbox-variant-outlined-hover-border: var(--fill-primary-strong-hover);
190
190
  --checkbox-variant-outline-ring-color: var(--ring-primary);
191
191
  --checkbox-variant-filled: var(--fill-primary-strong);
192
- --checkbox-icon-color: var(--text-on-primary);
192
+ --checkbox-icon-color: white;
193
193
  }
194
194
 
195
195
  .secondary,
@@ -199,7 +199,7 @@ infonomic-components;
199
199
  --checkbox-variant-outlined-hover-border: var(--fill-secondary-strong-hover);
200
200
  --checkbox-variant-outline-ring-color: var(--ring-secondary);
201
201
  --checkbox-variant-filled: var(--fill-secondary-strong);
202
- --checkbox-icon-color: var(--text-on-secondary);
202
+ --checkbox-icon-color: black;
203
203
  }
204
204
 
205
205
  .noeffect,
@@ -219,7 +219,7 @@ infonomic-components;
219
219
  --checkbox-variant-outlined-hover-border: var(--fill-success-strong-hover);
220
220
  --checkbox-variant-outline-ring-color: var(--ring-success);
221
221
  --checkbox-variant-filled: var(--fill-success-strong);
222
- --checkbox-icon-color: var(--text-on-success);
222
+ --checkbox-icon-color: white;
223
223
  }
224
224
 
225
225
  .info,
@@ -229,7 +229,7 @@ infonomic-components;
229
229
  --checkbox-variant-outlined-hover-border: var(--fill-info-strong-hover);
230
230
  --checkbox-variant-outline-ring-color: var(--ring-info);
231
231
  --checkbox-variant-filled: var(--fill-info-strong);
232
- --checkbox-icon-color: var(--text-on-info);
232
+ --checkbox-icon-color: white;
233
233
  }
234
234
 
235
235
  .warning,
@@ -249,7 +249,7 @@ infonomic-components;
249
249
  --checkbox-variant-outlined-hover-border: var(--fill-danger-strong-hover);
250
250
  --checkbox-variant-outline-ring-color: var(--ring-danger);
251
251
  --checkbox-variant-filled: var(--fill-danger-strong);
252
- --checkbox-icon-color: var(--text-on-danger);
252
+ --checkbox-icon-color: white;
253
253
  }
254
254
 
255
255
  /* Dark mode handled by semantic tokens in theme layer */