@snack-uikit/toggles 0.9.10 → 0.9.11-preview-47f53a8c.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.
Files changed (6) hide show
  1. package/README.md +1 -0
  2. package/dist/components/Favorite/Favorite.d.ts +1 -1
  3. package/dist/components/Favorite/styles.module.css +8 -5
  4. package/package.json +2 -2
  5. package/src/components/Favorite/Favorite.tsx +1 -1
  6. package/src/components/Favorite/styles.module.scss +23 -13
package/README.md CHANGED
@@ -143,6 +143,7 @@ return (
143
143
  | autofocus | `boolean` | - | HTML-аттрибут autofocus |
144
144
  | checked | `boolean` | - | HTML-аттрибут checked |
145
145
  | defaultChecked | `boolean` | - | HTML-аттрибут checked по-умолчанию |
146
+ | disabled | `boolean` | - | HTML-аттрибут disabled |
146
147
  | onChange | `(checked: boolean) => void` | - | Колбек смены значения |
147
148
  | onClick | `MouseEventHandler<HTMLInputElement>` | - | Колбек клика |
148
149
  | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек потери фокуса |
package/dist/components/Favorite/Favorite.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { FavoriteIcon, ToggleProps } from '../../types';
2
- export type FavoriteProps = Omit<ToggleProps, 'disabled'> & {
2
+ export type FavoriteProps = ToggleProps & {
3
3
  /** Иконка */
4
4
  icon?: FavoriteIcon;
5
5
  };
package/dist/components/Favorite/styles.module.css CHANGED
@@ -30,18 +30,21 @@
30
30
  .icon{
31
31
  color:var(--sys-neutral-text-light, #868892);
32
32
  }
33
- .icon[data-hover=true]{
33
+ .icon:not([data-disabled=true])[data-hover=true]{
34
34
  color:var(--sys-neutral-text-support, #656771);
35
35
  }
36
- .icon[data-icon=star][data-checked=true]{
36
+ .icon:not([data-disabled=true])[data-icon=star][data-checked=true]{
37
37
  color:var(--sys-yellow-accent-default, #fdca46);
38
38
  }
39
- .icon[data-icon=star][data-checked=true][data-focusvisible=true], .icon[data-icon=star][data-checked=true][data-hover=true]{
39
+ .icon:not([data-disabled=true])[data-icon=star][data-checked=true][data-focusvisible=true], .icon:not([data-disabled=true])[data-icon=star][data-checked=true][data-hover=true]{
40
40
  color:var(--sys-yellow-accent-hovered, #edb835);
41
41
  }
42
- .icon[data-icon=heart][data-checked=true]{
42
+ .icon:not([data-disabled=true])[data-icon=heart][data-checked=true]{
43
43
  color:var(--sys-red-accent-default, #cd3c3c);
44
44
  }
45
- .icon[data-icon=heart][data-checked=true][data-focusvisible=true], .icon[data-icon=heart][data-checked=true][data-hover=true]{
45
+ .icon:not([data-disabled=true])[data-icon=heart][data-checked=true][data-focusvisible=true], .icon:not([data-disabled=true])[data-icon=heart][data-checked=true][data-hover=true]{
46
46
  color:var(--sys-red-accent-hovered, #bb3c3a);
47
+ }
48
+ .icon[data-disabled=true]{
49
+ color:var(--sys-neutral-text-disabled, #b3b6bf);
47
50
  }
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Toggles",
7
- "version": "0.9.10",
7
+ "version": "0.9.11-preview-47f53a8c.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -38,5 +38,5 @@
38
38
  "merge-refs": "1.2.1",
39
39
  "uncontrollable": "8.0.0"
40
40
  },
41
- "gitHead": "55a3a17a712d14897b5722705ed9eb46fbce1644"
41
+ "gitHead": "723f99961ed1419c6740e0c7d3b2c4728e816886"
42
42
  }
package/src/components/Favorite/Favorite.tsx CHANGED
@@ -18,7 +18,7 @@ const UNCHECKED_ICONS = {
18
18
  [FAVORITE_ICON.Heart]: HeartSVG,
19
19
  };
20
20
 
21
- export type FavoriteProps = Omit<ToggleProps, 'disabled'> & {
21
+ export type FavoriteProps = ToggleProps & {
22
22
  /** Иконка */
23
23
  icon?: FavoriteIcon;
24
24
  };
package/src/components/Favorite/styles.module.scss CHANGED
@@ -3,34 +3,44 @@
3
3
  @import '../styles.module';
4
4
 
5
5
  $sizes: 's', 'm';
6
- $icons: ('star': 'yellow', 'heart': 'red');
6
+ $icons: (
7
+ 'star': 'yellow',
8
+ 'heart': 'red',
9
+ );
7
10
 
8
11
  .container {
9
12
  @include container('favourite');
10
13
 
11
14
  outline-color: simple-var($theme-variables, 'sys', 'available', 'complementary');
12
- &[data-checked=true] {
15
+
16
+ &[data-checked='true'] {
13
17
  outline-color: simple-var($theme-variables, 'sys', 'available', 'complementary');
14
18
  }
15
19
  }
16
20
 
17
21
  .icon {
18
22
  color: simple-var($theme-variables, 'sys', 'neutral', 'text-light');
19
- &[data-hover=true] {
20
- color: simple-var($theme-variables, 'sys', 'neutral', 'text-support');
21
- }
22
23
 
23
- @each $icon, $color in $icons {
24
- &[data-icon='#{$icon}'] {
25
- &[data-checked=true] {
26
- color: simple-var($theme-variables, 'sys', $color, 'accent-default');
27
- &[data-focusvisible=true],
28
- &[data-hover=true] {
29
- color: simple-var($theme-variables, 'sys', $color, 'accent-hovered');
24
+ &:not([data-disabled='true']) {
25
+ &[data-hover='true'] {
26
+ color: simple-var($theme-variables, 'sys', 'neutral', 'text-support');
27
+ }
28
+
29
+ @each $icon, $color in $icons {
30
+ &[data-icon='#{$icon}'] {
31
+ &[data-checked='true'] {
32
+ color: simple-var($theme-variables, 'sys', $color, 'accent-default');
33
+
34
+ &[data-focusvisible='true'],
35
+ &[data-hover='true'] {
36
+ color: simple-var($theme-variables, 'sys', $color, 'accent-hovered');
37
+ }
30
38
  }
31
39
  }
32
40
  }
33
41
  }
34
42
 
35
-
43
+ &[data-disabled='true'] {
44
+ color: $sys-neutral-text-disabled;
45
+ }
36
46
  }