@peassoft/mnr-web-ui-kit 1.0.2 → 2.1.0
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/button/styles.css +0 -8
- package/dist/switch/index.d.ts +12 -0
- package/dist/switch/index.js +36 -0
- package/dist/switch/styles.css +54 -0
- package/package.json +16 -15
package/dist/button/styles.css
CHANGED
|
@@ -38,14 +38,6 @@
|
|
|
38
38
|
padding: .8em 1.4em;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
.uikit_Button_btn--withLeftMargin:not(:first-child) {
|
|
42
|
-
margin-left: 1em;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.uikit_Button_btn--withTopMargin:not(:first-child) {
|
|
46
|
-
margin-top: 1em;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
41
|
.uikit_Button_label--hidden {
|
|
50
42
|
opacity: 0;
|
|
51
43
|
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type JSX } from 'react';
|
|
2
|
+
import './styles.css';
|
|
3
|
+
type Props = {
|
|
4
|
+
/** Label displayed */
|
|
5
|
+
label: string;
|
|
6
|
+
/** Switch status */
|
|
7
|
+
isOn: boolean;
|
|
8
|
+
/** onChange event handler */
|
|
9
|
+
onChange: (isOn: boolean) => unknown;
|
|
10
|
+
};
|
|
11
|
+
export declare function Switch(props: Props): JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useId, useCallback } from 'react';
|
|
3
|
+
import './styles.css';
|
|
4
|
+
export function Switch(props) {
|
|
5
|
+
const {
|
|
6
|
+
label,
|
|
7
|
+
isOn,
|
|
8
|
+
onChange
|
|
9
|
+
} = props;
|
|
10
|
+
const labelId = useId();
|
|
11
|
+
const handleKeyDown = useCallback(event => {
|
|
12
|
+
switch (event.key) {
|
|
13
|
+
case 'Enter':
|
|
14
|
+
case ' ':
|
|
15
|
+
onChange(!isOn);
|
|
16
|
+
}
|
|
17
|
+
}, [isOn, onChange]);
|
|
18
|
+
return _jsxs("div", {
|
|
19
|
+
className: 'uikit_Switch_cont',
|
|
20
|
+
children: [_jsx("div", {
|
|
21
|
+
id: labelId,
|
|
22
|
+
children: label
|
|
23
|
+
}), _jsx("div", {
|
|
24
|
+
role: 'switch',
|
|
25
|
+
"aria-labelledby": labelId,
|
|
26
|
+
"aria-checked": isOn ? 'true' : 'false',
|
|
27
|
+
tabIndex: 0,
|
|
28
|
+
className: 'uikit_Switch_btn' + (isOn ? ' uikit_Switch_btn--on' : ''),
|
|
29
|
+
onClick: () => onChange(!isOn),
|
|
30
|
+
onKeyDown: handleKeyDown,
|
|
31
|
+
children: _jsx("div", {
|
|
32
|
+
className: 'uikit_Switch_pin'
|
|
33
|
+
})
|
|
34
|
+
})]
|
|
35
|
+
});
|
|
36
|
+
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
.uikit_Switch_cont {
|
|
2
|
+
--pin-size: 1.5rem;
|
|
3
|
+
|
|
4
|
+
--color-label: #757575;
|
|
5
|
+
--color-bkg: #d9d9d9;
|
|
6
|
+
--color-bkg-on: #3f72af;
|
|
7
|
+
--color-border: #aaa;
|
|
8
|
+
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
display: flex;
|
|
11
|
+
gap: 1rem;
|
|
12
|
+
align-items: center;
|
|
13
|
+
color: var(--color-label);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@media (prefers-color-scheme: dark) {
|
|
17
|
+
.uikit_Switch_cont {
|
|
18
|
+
--color-label: #979797;
|
|
19
|
+
--color-border: var(--color-bkg);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.uikit_Switch_cont *,
|
|
24
|
+
.uikit_Switch_cont *::before,
|
|
25
|
+
.uikit_Switch_cont *::after {
|
|
26
|
+
box-sizing: inherit;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.uikit_Switch_btn {
|
|
30
|
+
--btn-height: calc(var(--pin-size) + 0.375rem);
|
|
31
|
+
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
width: calc(var(--pin-size) * 2 + 0.375rem);
|
|
35
|
+
height: var(--btn-height);
|
|
36
|
+
border: 1px solid var(--color-border);
|
|
37
|
+
border-radius: calc(var(--btn-height) / 2);
|
|
38
|
+
padding: 0 0.125rem;
|
|
39
|
+
background-color: var(--color-bkg);
|
|
40
|
+
outline-offset: 0.25rem;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.uikit_Switch_btn--on {
|
|
44
|
+
justify-content: flex-end;
|
|
45
|
+
background-color: var(--color-bkg-on);
|
|
46
|
+
border-color: var(--color-bkg-on);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.uikit_Switch_pin {
|
|
50
|
+
width: var(--pin-size);
|
|
51
|
+
height: var(--pin-size);
|
|
52
|
+
border-radius: 50%;
|
|
53
|
+
background-color: #fff;
|
|
54
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@peassoft/mnr-web-ui-kit",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "2.1.0",
|
|
4
4
|
"description": "Peassoft web UI kit for MNR web applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -25,28 +25,29 @@
|
|
|
25
25
|
"@babel/core": "^7.22.17",
|
|
26
26
|
"@babel/preset-env": "^7.22.15",
|
|
27
27
|
"@memnrev/browserslist-config": "^0.2.0",
|
|
28
|
-
"@memnrev/eslint-v9-config": "^0.
|
|
29
|
-
"@storybook/addon-a11y": "
|
|
30
|
-
"@storybook/addon-docs": "
|
|
31
|
-
"@storybook/addon-links": "
|
|
32
|
-
"@storybook/addon-onboarding": "
|
|
33
|
-
"@storybook/addon-vitest": "
|
|
34
|
-
"@storybook/react-vite": "
|
|
28
|
+
"@memnrev/eslint-v9-config": "^0.4.0",
|
|
29
|
+
"@storybook/addon-a11y": "10.0.4",
|
|
30
|
+
"@storybook/addon-docs": "10.0.4",
|
|
31
|
+
"@storybook/addon-links": "10.0.4",
|
|
32
|
+
"@storybook/addon-onboarding": "10.0.4",
|
|
33
|
+
"@storybook/addon-vitest": "10.0.4",
|
|
34
|
+
"@storybook/react-vite": "10.0.4",
|
|
35
35
|
"@types/node": "^22.18.8",
|
|
36
36
|
"@types/react": "^19.0.2",
|
|
37
|
-
"@vitest/browser": "
|
|
38
|
-
"@vitest/
|
|
39
|
-
"
|
|
40
|
-
"
|
|
37
|
+
"@vitest/browser": "^4.0.7",
|
|
38
|
+
"@vitest/browser-playwright": "^4.0.7",
|
|
39
|
+
"@vitest/coverage-v8": "^4.0.7",
|
|
40
|
+
"cpy-cli": "^6.0.0",
|
|
41
|
+
"del-cli": "^7.0.0",
|
|
41
42
|
"eslint": "^9.8.0",
|
|
42
|
-
"eslint-plugin-storybook": "
|
|
43
|
+
"eslint-plugin-storybook": "10.0.4",
|
|
43
44
|
"playwright": "^1.55.1",
|
|
44
45
|
"react": "^19.0.0",
|
|
45
46
|
"react-dom": "^19.0.0",
|
|
46
|
-
"storybook": "
|
|
47
|
+
"storybook": "10.0.4",
|
|
47
48
|
"stylelint": "^16.2.1",
|
|
48
49
|
"typescript": "^5.2.2",
|
|
49
|
-
"vitest": "^
|
|
50
|
+
"vitest": "^4.0.7"
|
|
50
51
|
},
|
|
51
52
|
"peerDependencies": {
|
|
52
53
|
"react": ">= 19 < 20",
|