@itcase/ui 1.0.90 → 1.0.92

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 (13) hide show
  1. package/dist/components/Accordion.js +19 -7
  2. package/dist/components/Cell.js +8 -9
  3. package/dist/components/Checkbox.js +6 -4
  4. package/dist/components/Segmented.js +7 -2
  5. package/dist/css/components/Accordion/Accordion.css +14 -5
  6. package/dist/css/components/Cell/Cell.css +8 -1
  7. package/dist/css/components/Notification/Notification.css +6 -6
  8. package/dist/css/components/Notification/css/__item/notification__item_set_float.css +1 -1
  9. package/dist/css/components/Notification/css/__item/notification__item_set_form.css +1 -1
  10. package/dist/css/components/Notification/css/__item/notification__item_set_toast.css +1 -1
  11. package/dist/css/components/Notification/css/__item/notification__item_set_top.css +1 -1
  12. package/dist/css/components/Notification/css/__item/notification__item_type_close-button.css +2 -2
  13. package/package.json +1 -1
package/dist/components/Accordion.js CHANGED
@@ -43,20 +43,31 @@ var castArray__default = /*#__PURE__*/_interopDefault(castArray);
43
43
 
44
44
  var ChevronDown16 = function ChevronDown16(props) {
45
45
  return /*#__PURE__*/React__default.default.createElement("svg", props, /*#__PURE__*/React__default.default.createElement("path", {
46
- fillRule: "evenodd",
47
- clipRule: "evenodd",
48
- d: "M2.50398 4.75303C2.81229 4.41566 3.31216 4.41566 3.62047 4.75303L8.1611 9.72163C8.22276 9.7891 8.32274 9.7891 8.3844 9.72163L12.925 4.75303C13.2333 4.41566 13.7332 4.41566 14.0415 4.75303C14.3498 5.09039 14.3498 5.63737 14.0415 5.97474L9.50088 10.9433C8.8226 11.6856 7.7229 11.6856 7.04462 10.9433L2.50398 5.97474C2.19567 5.63737 2.19567 5.09039 2.50398 4.75303Z"
46
+ d: "M8 11C8.23051 11 8.42712 10.9233 8.60339 10.764L13.7763 6.16224C13.9254 6.03835 14 5.87316 14 5.68437C14 5.30088 13.661 5 13.2136 5C12.9966 5 12.8 5.0767 12.6508 5.20649L8 9.35398L3.34915 5.20649C3.19322 5.0767 2.99661 5 2.77966 5C2.33898 5 2 5.30089 2 5.68437C2 5.87316 2.07458 6.03835 2.22373 6.16224L7.39661 10.764C7.57288 10.9233 7.76949 10.9941 8 11Z"
49
47
  }));
50
48
  };
51
49
  ChevronDown16.defaultProps = {
52
- width: "17",
50
+ width: "16",
51
+ height: "16",
52
+ xmlns: "http://www.w3.org/2000/svg",
53
+ fill: "none",
54
+ stroke: "none"
55
+ };
56
+ var ChevronTop16 = function ChevronTop16(props) {
57
+ return /*#__PURE__*/React__default.default.createElement("svg", props, /*#__PURE__*/React__default.default.createElement("path", {
58
+ d: "M8 5C7.76949 5 7.57288 5.0767 7.39661 5.23599L2.22373 9.83776C2.07458 9.96165 2 10.1268 2 10.3156C2 10.6991 2.33898 11 2.78644 11C3.00339 11 3.2 10.9233 3.34915 10.7935L8 6.64602L12.6508 10.7935C12.8068 10.9233 13.0034 11 13.2203 11C13.661 11 14 10.6991 14 10.3156C14 10.1268 13.9254 9.96165 13.7763 9.83776L8.60339 5.23599C8.42712 5.0767 8.23051 5.0059 8 5Z"
59
+ }));
60
+ };
61
+ ChevronTop16.defaultProps = {
62
+ width: "16",
53
63
  height: "16",
54
64
  xmlns: "http://www.w3.org/2000/svg",
55
65
  fill: "none",
56
66
  stroke: "none"
57
67
  };
58
68
  const icon16 = {
59
- chevron_down: ChevronDown16
69
+ ChevronDown: ChevronDown16,
70
+ ChevronTop: ChevronTop16
60
71
  };
61
72
 
62
73
  /* React, PropTypes, other third-party modules */
@@ -79,6 +90,7 @@ function AccordionItem(props) {
79
90
  contentTextSize,
80
91
  contentTextColor,
81
92
  contentTextWeight,
93
+ size,
82
94
  isExpanded,
83
95
  onClick
84
96
  } = props;
@@ -132,7 +144,7 @@ function AccordionItem(props) {
132
144
  styles
133
145
  } = useStyles.useStyles(props);
134
146
  return /*#__PURE__*/React__default.default.createElement("div", {
135
- className: clsx__default.default('accordion-item', className, borderColorClass, fillClass, fillHoverClass, shapeClass, isExpanded && 'accordion-item_state_open'),
147
+ className: clsx__default.default('accordion-item', className, borderColorClass, fillClass, fillHoverClass, shapeClass, size && `accordion-item_size_${size}`, isExpanded && 'accordion-item_state_open'),
136
148
  style: styles
137
149
  }, /*#__PURE__*/React__default.default.createElement(index.Text, {
138
150
  className: clsx__default.default('accordion-item__title', titleBorderColorClass, titleFillClass, titleFillHoverClass, onClickTitle && 'cursor_type_pointer'),
@@ -146,7 +158,7 @@ function AccordionItem(props) {
146
158
  }, icon || /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
147
159
  iconFill: iconFill,
148
160
  size: "16",
149
- SvgImage: icon16.chevron_down
161
+ SvgImage: icon16.ChevronDown
150
162
  })), beforeContent && beforeContent, isExpanded && (/*#__PURE__*/React__default.default.createElement("div", {
151
163
  className: clsx__default.default('accordion-item__content', contentBorderColorClass, contentFillClass)
152
164
  }, children || content && /*#__PURE__*/React__default.default.createElement(index.Text, {
package/dist/components/Cell.js CHANGED
@@ -44,10 +44,9 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
44
44
  function Cell(props) {
45
45
  const {
46
46
  className,
47
- showTitleIcon,
48
47
  titleIconFill,
49
48
  titleIconFillSize,
50
- titleIconIconFill,
49
+ titleIconItemFill,
51
50
  titleIconFillHover,
52
51
  titleIconStroke,
53
52
  titleIconSrc,
@@ -55,7 +54,7 @@ function Cell(props) {
55
54
  titleIcon,
56
55
  valueIconFill,
57
56
  valueIconFillSize,
58
- valueIconIconFill,
57
+ valueIconItemFill,
59
58
  valueIconFillHover,
60
59
  valueIconStroke,
61
60
  valueIconSrc,
@@ -83,7 +82,7 @@ function Cell(props) {
83
82
  titleLabelTextSize,
84
83
  titleLabelShape,
85
84
  titleLabelSize,
86
- isShowValueLabel,
85
+ showValueLabel,
87
86
  valueLabelAppearance,
88
87
  valueLabel,
89
88
  valueLabelTextSize,
@@ -162,11 +161,11 @@ function Cell(props) {
162
161
  textColor: titleTextColor,
163
162
  textWeight: titleTextWeight,
164
163
  textWrap: titleTextWrap
165
- }, title), showTitleIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
164
+ }, title), (titleIcon || titleIconSrc) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
166
165
  className: "cell__icon",
167
166
  fill: titleIconFill,
168
167
  fillSize: titleIconFillSize,
169
- iconFill: titleIconIconFill,
168
+ iconFill: titleIconItemFill,
170
169
  iconFillHover: titleIconFillHover,
171
170
  iconStroke: titleIconStroke,
172
171
  imageSrc: titleIconSrc,
@@ -187,17 +186,17 @@ function Cell(props) {
187
186
  textColor: valueTextColor,
188
187
  textWeight: valueTextWeight,
189
188
  textWrap: valueTextWrap
190
- }, value), valueIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
189
+ }, value), (valueIcon || valueIconSrc) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
191
190
  className: "cell__icon",
192
191
  fill: valueIconFill,
193
192
  fillSize: valueIconFillSize,
194
- iconFill: valueIconIconFill,
193
+ iconFill: valueIconItemFill,
195
194
  iconFillHover: valueIconFillHover,
196
195
  iconStroke: valueIconStroke,
197
196
  imageSrc: valueIconSrc,
198
197
  shape: valueIconShape,
199
198
  SvgImage: valueIcon
200
- }), isShowValueLabel && /*#__PURE__*/React__default.default.createElement(index$2.Label, {
199
+ }), showValueLabel && /*#__PURE__*/React__default.default.createElement(index$2.Label, {
201
200
  appearance: valueLabelAppearance,
202
201
  label: valueLabel,
203
202
  labelTextSize: valueLabelTextSize,
package/dist/components/Checkbox.js CHANGED
@@ -36,6 +36,8 @@ const checkboxConfig = {
36
36
  };
37
37
  function Checkbox(props) {
38
38
  const {
39
+ before,
40
+ after,
39
41
  state,
40
42
  id,
41
43
  className,
@@ -92,7 +94,7 @@ function Checkbox(props) {
92
94
  return /*#__PURE__*/React__default.default.createElement("label", {
93
95
  htmlFor: id,
94
96
  className: clsx__default.default(className, 'checkbox', fillClass, shapeClass)
95
- }, /*#__PURE__*/React__default.default.createElement("div", {
97
+ }, before, /*#__PURE__*/React__default.default.createElement("div", {
96
98
  className: clsx__default.default('checkbox__item', stateCheckmarkFillClass)
97
99
  }, /*#__PURE__*/React__default.default.createElement("input", {
98
100
  checked: checked,
@@ -110,14 +112,14 @@ function Checkbox(props) {
110
112
  }, "\xA0")), label && /*#__PURE__*/React__default.default.createElement(index.Text, {
111
113
  className: "checkbox__label",
112
114
  size: labelTextSize,
113
- textWeight: labelTextWidth,
114
- textColor: labelTextColor
115
+ textColor: labelTextColor,
116
+ textWeight: labelTextWidth
115
117
  }, label), desc && /*#__PURE__*/React__default.default.createElement(index.Text, {
116
118
  className: "checkbox__desc",
117
119
  size: descTextSize,
118
120
  textWeight: descTextWidth,
119
121
  textColor: descTextColor
120
- }, desc));
122
+ }, desc), after);
121
123
  }
122
124
  Checkbox.propTypes = {
123
125
  className: PropTypes__default.default.string
package/dist/components/Segmented.js CHANGED
@@ -40,10 +40,15 @@ const Segmented = /*#__PURE__*/React__default.default.forwardRef((props, ref) =>
40
40
  size,
41
41
  labelTextColor,
42
42
  labelTextActiveColor,
43
- labelTextSize
43
+ labelTextSize,
44
+ onChange
44
45
  } = props;
45
46
  const controlRef = React.useRef(null);
46
47
  const segmentsRefs = React.useMemo(() => new Map(segments.map(item => [item.value, /*#__PURE__*/React.createRef()])), [segments]);
48
+ const onChangeValue = React.useCallback(item => {
49
+ onChange && onChange(item.value, name);
50
+ setActiveSegment && setActiveSegment(item);
51
+ }, [name, onChange, setActiveSegment]);
47
52
  React.useEffect(() => {
48
53
  let offsetWidth = 0;
49
54
  let offsetLeft = 0;
@@ -106,7 +111,7 @@ const Segmented = /*#__PURE__*/React__default.default.forwardRef((props, ref) =>
106
111
  name: name,
107
112
  type: "radio",
108
113
  value: item.value,
109
- onChange: () => setActiveSegment(item)
114
+ onChange: () => onChangeValue(item)
110
115
  }), /*#__PURE__*/React__default.default.createElement("label", {
111
116
  className: clsx__default.default('segmented__item-label'),
112
117
  htmlFor: item.label
package/dist/css/components/Accordion/Accordion.css CHANGED
@@ -46,7 +46,6 @@
46
46
  }
47
47
  .accordion-item {
48
48
  min-width: 170px;
49
- padding: 10px 12px;
50
49
  display: flex;
51
50
  flex-flow: row wrap;
52
51
  gap: 8px;
@@ -65,17 +64,27 @@
65
64
  .accordion-item {
66
65
  &_shape {
67
66
  &_rounded {
68
- border-radius: var(--accordion-item-shape-rounded, 12px);
67
+ border-radius: var(--accordion-item-shape-rounded, 100px);
69
68
  }
70
- &_circular {
71
- border-radius: 50%;
69
+ }
70
+ }
71
+ .accordion-item {
72
+ &_size {
73
+ @each $size in xs, s, m, l, xl, xxl {
74
+ &_$(size) {
75
+ padding: var(--accordion-item-size-$(size)-padding);
76
+ }
72
77
  }
73
78
  }
74
79
  }
75
80
  .accordion-item {
76
81
  &&_state_open {
77
82
  ^&__icon {
78
- transform: rotate(90deg);
83
+ transform: rotate(180deg);
79
84
  }
80
85
  }
81
86
  }
87
+ :root {
88
+ --accordion-item-size-xs-padding: 10px 8px;
89
+ --accordion-item-size-l-padding: 14px 12px;
90
+ }
package/dist/css/components/Cell/Cell.css CHANGED
@@ -68,7 +68,14 @@
68
68
  .cell {
69
69
  &_reverse {
70
70
  ^&__wrapper {
71
- flex-direction: column-reverse;
71
+ &_direction {
72
+ &_horizontal {
73
+ flex-direction: row-reverse;
74
+ }
75
+ &_vertical {
76
+ flex-direction: column-reverse;
77
+ }
78
+ }
72
79
  }
73
80
  }
74
81
  }
package/dist/css/components/Notification/Notification.css CHANGED
@@ -27,10 +27,10 @@
27
27
  &_set {
28
28
  &_float {
29
29
  width: 100%;
30
- padding: var(--notification-item-set-float-padding, 12px 16px);
31
30
  border-radius: var(--notification-item-set-float-border-radius, 8px);
32
31
  @mixin elevation-8;
33
32
  ^^&-wrapper {
33
+ padding: var(--notification-item-set-float-padding, 12px 16px);
34
34
  display: flex;
35
35
  flex-direction: column;
36
36
  gap: 4px;
@@ -43,7 +43,7 @@
43
43
  &_top {
44
44
  width: 100%;
45
45
  ^^&-wrapper {
46
- padding: var(--notification-item-set-top-padding, 12px 0);
46
+ padding: var(--notification-item-set-top-padding, 12px 16px);
47
47
  display: flex;
48
48
  flex-direction: column;
49
49
  justify-content: center;
@@ -57,10 +57,10 @@
57
57
  &_set {
58
58
  &_form {
59
59
  width: 100%;
60
- padding: var(--notification-item-set-form-padding, 12px 16px);
61
60
  border-radius: var(--notification-item-set-form-border-radius, 8px);
62
61
  ^^&-wrapper {
63
62
  text-align: left;
63
+ padding: var(--notification-item-set-form-padding, 12px 16px);
64
64
  display: flex;
65
65
  flex-direction: column;
66
66
  gap: 4px;
@@ -73,13 +73,13 @@
73
73
  &_toast {
74
74
  width: 100%;
75
75
  background: var(--color-surface-primary);
76
- padding: var(--notification-item-set-toast-padding, 12px 16px);
77
76
  border-radius: var(--notification-item-set-toast-border-radius, 8px);
78
77
  display: flex;
79
78
  flex-direction: column;
80
79
  gap: 24px;
81
80
  @mixin elevation-8;
82
81
  ^^&-wrapper {
82
+ padding: var(--notification-item-set-toast-padding, 12px 16px);
83
83
  display: flex;
84
84
  flex-direction: column;
85
85
  gap: 4px;
@@ -134,8 +134,8 @@
134
134
  }
135
135
  ^^^&-close {
136
136
  position: absolute;
137
- top: 0;
138
- right: 0;
137
+ top: 12px;
138
+ right: 16px;
139
139
  }
140
140
  }
141
141
  }
package/dist/css/components/Notification/css/__item/notification__item_set_float.css CHANGED
@@ -2,10 +2,10 @@
2
2
  &_set {
3
3
  &_float {
4
4
  width: 100%;
5
- padding: var(--notification-item-set-float-padding, 12px 16px);
6
5
  border-radius: var(--notification-item-set-float-border-radius, 8px);
7
6
  @mixin elevation-8;
8
7
  ^^&-wrapper {
8
+ padding: var(--notification-item-set-float-padding, 12px 16px);
9
9
  display: flex;
10
10
  flex-direction: column;
11
11
  gap: 4px;
package/dist/css/components/Notification/css/__item/notification__item_set_form.css CHANGED
@@ -2,10 +2,10 @@
2
2
  &_set {
3
3
  &_form {
4
4
  width: 100%;
5
- padding: var(--notification-item-set-form-padding, 12px 16px);
6
5
  border-radius: var(--notification-item-set-form-border-radius, 8px);
7
6
  ^^&-wrapper {
8
7
  text-align: left;
8
+ padding: var(--notification-item-set-form-padding, 12px 16px);
9
9
  display: flex;
10
10
  flex-direction: column;
11
11
  gap: 4px;
package/dist/css/components/Notification/css/__item/notification__item_set_toast.css CHANGED
@@ -3,13 +3,13 @@
3
3
  &_toast {
4
4
  width: 100%;
5
5
  background: var(--color-surface-primary);
6
- padding: var(--notification-item-set-toast-padding, 12px 16px);
7
6
  border-radius: var(--notification-item-set-toast-border-radius, 8px);
8
7
  display: flex;
9
8
  flex-direction: column;
10
9
  gap: 24px;
11
10
  @mixin elevation-8;
12
11
  ^^&-wrapper {
12
+ padding: var(--notification-item-set-toast-padding, 12px 16px);
13
13
  display: flex;
14
14
  flex-direction: column;
15
15
  gap: 4px;
package/dist/css/components/Notification/css/__item/notification__item_set_top.css CHANGED
@@ -3,7 +3,7 @@
3
3
  &_top {
4
4
  width: 100%;
5
5
  ^^&-wrapper {
6
- padding: var(--notification-item-set-top-padding, 12px 0);
6
+ padding: var(--notification-item-set-top-padding, 12px 16px);
7
7
  display: flex;
8
8
  flex-direction: column;
9
9
  justify-content: center;
package/dist/css/components/Notification/css/__item/notification__item_type_close-button.css CHANGED
@@ -8,8 +8,8 @@
8
8
  }
9
9
  ^^^&-close {
10
10
  position: absolute;
11
- top: 0;
12
- right: 0;
11
+ top: 12px;
12
+ right: 16px;
13
13
  }
14
14
  }
15
15
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui",
3
- "version": "1.0.90",
3
+ "version": "1.0.92",
4
4
  "description": "UI components (Modal, Loader, Popup, etc)",
5
5
  "keywords": [
6
6
  "Modal",