@ludo.ninja/components 2.1.12 → 2.1.13

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 (3) hide show
  1. package/build/system/Cards/CardCheckbox/index.js +41 -49
  2. package/build/system/Cards/CreationCard/index.js +0 -1
  3. package/package.json +1 -1
package/build/system/Cards/CardCheckbox/index.js CHANGED
@@ -4,65 +4,57 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  const jsx_runtime_1 = require("react/jsx-runtime");
7
- const react_1 = require("react");
8
7
  const styled_components_1 = __importDefault(require("styled-components"));
9
8
  const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
10
9
  const ScreenWidth_1 = require("../../../styles/ScreenWidth");
11
10
  const colors_1 = require("../../../styles/colors");
12
11
  // Styles
13
- const StyledCardCheckBox = styled_components_1.default.div `
12
+ const StyledCardCheckBox = styled_components_1.default.button `
13
+ display: flex;
14
+ padding: 0;
15
+ margin: 0;
16
+ border: unset;
17
+ background: unset;
14
18
  position: absolute;
15
19
  top: 16px;
16
20
  right: 16px;
17
21
  z-index: 10;
18
22
 
19
- .cardCheckboxLabel {
23
+ .cardCustomCheckbox {
20
24
  cursor: pointer;
21
- -webkit-tap-highlight-color: transparent;
25
+ width: 32px;
26
+ height: 32px;
27
+ border: 2px solid ${colors_1.WhiteColor};
28
+ background-color: #12183a33;
29
+ border-radius: 50%;
30
+ display: inline-block;
22
31
 
23
- .cardCheckboxInput {
24
- margin: 0;
25
- visibility: hidden;
26
-
27
- &:checked + span {
28
- border: none;
29
- }
30
-
31
- &:checked + span:after {
32
- opacity: 1;
33
- }
32
+ &.active::after {
33
+ opacity: 1;
34
34
  }
35
35
 
36
- .cardCustomCheckbox {
37
- cursor: pointer;
36
+ &::after {
37
+ content: '';
38
+ display: block;
39
+ background-image: url('/forms/checkbox/checked.svg');
40
+ background-size: cover;
41
+ background-repeat: no-repeat;
38
42
  width: 32px;
39
43
  height: 32px;
40
- border: 2px solid ${colors_1.WhiteColor};
41
- background-color: #12183a33;
42
- border-radius: 50%;
43
- display: inline-block;
44
- position: relative;
44
+ opacity: 0;
45
+ transition: opacity 0.2s;
46
+ position: absolute;
47
+ top: 0;
48
+ left: 0;
49
+ }
45
50
 
46
- &::after {
47
- content: '';
48
- display: block;
49
- background-image: url('/forms/checkbox/checked.svg');
50
- background-size: cover;
51
- background-repeat: no-repeat;
52
- width: 32px;
53
- height: 32px;
54
- opacity: 0;
55
- transition: opacity 0.2s;
56
- }
51
+ @media (max-width: 767px) {
52
+ width: 24px;
53
+ height: 24px;
57
54
 
58
- @media (max-width: 767px) {
55
+ &::after {
59
56
  width: 24px;
60
57
  height: 24px;
61
-
62
- &::after {
63
- width: 24px;
64
- height: 24px;
65
- }
66
58
  }
67
59
  }
68
60
  }
@@ -70,27 +62,27 @@ const StyledCardCheckBox = styled_components_1.default.div `
70
62
  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
71
63
  top: ${(0, _4k_1.adaptiveValueCalc)(16)};
72
64
  right: ${(0, _4k_1.adaptiveValueCalc)(16)};
73
- .cardCheckboxLabel {
74
- .cardCustomCheckbox {
65
+
66
+ .cardCustomCheckbox {
67
+ width: ${(0, _4k_1.adaptiveValueCalc)(32)};
68
+ height: ${(0, _4k_1.adaptiveValueCalc)(32)};
69
+ border-width: ${(0, _4k_1.adaptiveValueCalc)(2)};
70
+
71
+ &::after {
75
72
  width: ${(0, _4k_1.adaptiveValueCalc)(32)};
76
73
  height: ${(0, _4k_1.adaptiveValueCalc)(32)};
77
- border-width: ${(0, _4k_1.adaptiveValueCalc)(2)};
78
- &::after {
79
- width: ${(0, _4k_1.adaptiveValueCalc)(32)};
80
- height: ${(0, _4k_1.adaptiveValueCalc)(32)};
81
- }
82
74
  }
83
75
  }
84
76
  }
85
77
  `;
86
78
  // Component
87
79
  const CardCheckBox = ({ isActiveCheckbox, onChange, }) => {
88
- const id = (0, react_1.useId)();
89
80
  return ((0, jsx_runtime_1.jsx)(StyledCardCheckBox, { onClick: (e) => {
90
- console.log("StyledCardCheckBox click");
81
+ console.log('StyledCardCheckBox click');
91
82
  e.preventDefault();
92
83
  e.stopPropagation();
93
- }, children: (0, jsx_runtime_1.jsxs)("label", { htmlFor: id, className: "cardCheckboxLabel", children: [(0, jsx_runtime_1.jsx)("input", { className: "cardCheckboxInput", type: "checkbox", name: 'checkbox', id: id, onChange: onChange, checked: isActiveCheckbox }), (0, jsx_runtime_1.jsx)("span", { className: "cardCustomCheckbox" })] }) }));
84
+ onChange();
85
+ }, children: (0, jsx_runtime_1.jsx)("span", { className: `cardCustomCheckbox ${isActiveCheckbox ? 'active' : ''}` }) }));
94
86
  };
95
87
  // Export
96
88
  exports.default = CardCheckBox;
package/build/system/Cards/CreationCard/index.js CHANGED
@@ -39,7 +39,6 @@ const colors_1 = require("../../../styles/colors");
39
39
  const boxShadow_1 = __importDefault(require("../../../styles/mixins/boxShadow"));
40
40
  const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
41
41
  const index_1 = require("../../index");
42
- // import CardCheckBox from "@/system/Cards/CardCheckbox";
43
42
  const CardContent_1 = __importDefault(require("../CardContent"));
44
43
  const CardCategory_1 = __importDefault(require("../CardContent/CardCategory"));
45
44
  const CardLikes_1 = __importDefault(require("../CardContent/CardLikes"));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ludo.ninja/components",
3
- "version": "2.1.12",
3
+ "version": "2.1.13",
4
4
  "private": false,
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",