@cloud-ru/ds-rating 1.0.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 (75) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/LICENSE +201 -0
  3. package/README.md +88 -0
  4. package/dist/cjs/components/Rating/Rating.d.ts +28 -0
  5. package/dist/cjs/components/Rating/Rating.js +53 -0
  6. package/dist/cjs/components/Rating/index.d.ts +1 -0
  7. package/dist/cjs/components/Rating/index.js +17 -0
  8. package/dist/cjs/components/Rating/styles.module.css +4 -0
  9. package/dist/cjs/components/index.d.ts +1 -0
  10. package/dist/cjs/components/index.js +17 -0
  11. package/dist/cjs/constants.d.ts +24 -0
  12. package/dist/cjs/constants.js +27 -0
  13. package/dist/cjs/helperComponents/RatingStar/RatingStar.d.ts +29 -0
  14. package/dist/cjs/helperComponents/RatingStar/RatingStar.js +18 -0
  15. package/dist/cjs/helperComponents/RatingStar/constants.d.ts +5 -0
  16. package/dist/cjs/helperComponents/RatingStar/constants.js +8 -0
  17. package/dist/cjs/helperComponents/RatingStar/index.d.ts +3 -0
  18. package/dist/cjs/helperComponents/RatingStar/index.js +20 -0
  19. package/dist/cjs/helperComponents/RatingStar/styles.module.css +210 -0
  20. package/dist/cjs/helperComponents/RatingStar/types.d.ts +3 -0
  21. package/dist/cjs/helperComponents/RatingStar/types.js +2 -0
  22. package/dist/cjs/helperComponents/index.d.ts +1 -0
  23. package/dist/cjs/helperComponents/index.js +17 -0
  24. package/dist/cjs/index.d.ts +3 -0
  25. package/dist/cjs/index.js +19 -0
  26. package/dist/cjs/package.json +3 -0
  27. package/dist/cjs/style.css +214 -0
  28. package/dist/cjs/types.d.ts +4 -0
  29. package/dist/cjs/types.js +2 -0
  30. package/dist/cjs/utils.d.ts +3 -0
  31. package/dist/cjs/utils.js +19 -0
  32. package/dist/esm/components/Rating/Rating.d.ts +28 -0
  33. package/dist/esm/components/Rating/Rating.js +47 -0
  34. package/dist/esm/components/Rating/index.d.ts +1 -0
  35. package/dist/esm/components/Rating/index.js +1 -0
  36. package/dist/esm/components/Rating/styles.module.css +4 -0
  37. package/dist/esm/components/index.d.ts +1 -0
  38. package/dist/esm/components/index.js +1 -0
  39. package/dist/esm/constants.d.ts +24 -0
  40. package/dist/esm/constants.js +24 -0
  41. package/dist/esm/helperComponents/RatingStar/RatingStar.d.ts +29 -0
  42. package/dist/esm/helperComponents/RatingStar/RatingStar.js +12 -0
  43. package/dist/esm/helperComponents/RatingStar/constants.d.ts +5 -0
  44. package/dist/esm/helperComponents/RatingStar/constants.js +5 -0
  45. package/dist/esm/helperComponents/RatingStar/index.d.ts +3 -0
  46. package/dist/esm/helperComponents/RatingStar/index.js +2 -0
  47. package/dist/esm/helperComponents/RatingStar/styles.module.css +210 -0
  48. package/dist/esm/helperComponents/RatingStar/types.d.ts +3 -0
  49. package/dist/esm/helperComponents/RatingStar/types.js +1 -0
  50. package/dist/esm/helperComponents/index.d.ts +1 -0
  51. package/dist/esm/helperComponents/index.js +1 -0
  52. package/dist/esm/index.d.ts +3 -0
  53. package/dist/esm/index.js +3 -0
  54. package/dist/esm/style.css +214 -0
  55. package/dist/esm/types.d.ts +4 -0
  56. package/dist/esm/types.js +1 -0
  57. package/dist/esm/utils.d.ts +3 -0
  58. package/dist/esm/utils.js +15 -0
  59. package/dist/tsconfig.cjs.tsbuildinfo +1 -0
  60. package/dist/tsconfig.esm.tsbuildinfo +1 -0
  61. package/package.json +43 -0
  62. package/src/components/Rating/Rating.tsx +110 -0
  63. package/src/components/Rating/index.ts +1 -0
  64. package/src/components/Rating/styles.module.scss +4 -0
  65. package/src/components/index.ts +1 -0
  66. package/src/constants.ts +27 -0
  67. package/src/helperComponents/RatingStar/RatingStar.tsx +86 -0
  68. package/src/helperComponents/RatingStar/constants.ts +5 -0
  69. package/src/helperComponents/RatingStar/index.ts +3 -0
  70. package/src/helperComponents/RatingStar/styles.module.scss +83 -0
  71. package/src/helperComponents/RatingStar/types.ts +5 -0
  72. package/src/helperComponents/index.ts +1 -0
  73. package/src/index.ts +3 -0
  74. package/src/types.ts +7 -0
  75. package/src/utils.ts +20 -0
package/dist/esm/constants.js ADDED
@@ -0,0 +1,24 @@
1
+ export const APPEARANCE = {
2
+ Primary: 'primary',
3
+ Neutral: 'neutral',
4
+ Red: 'red',
5
+ Orange: 'orange',
6
+ Yellow: 'yellow',
7
+ Green: 'green',
8
+ Blue: 'blue',
9
+ Violet: 'violet',
10
+ Pink: 'pink',
11
+ };
12
+ export const SIZE = {
13
+ Xs: 'xs',
14
+ S: 's',
15
+ };
16
+ export const TEST_IDS = {
17
+ root: 'rating',
18
+ star: 'rating__star',
19
+ starHalfLeft: 'rating__star-half-left',
20
+ starHalfRight: 'rating__star-half-right',
21
+ };
22
+ export const DEFAULT_STAR_COUNT = 5;
23
+ export const DEFAULT_RATING_VALUE = 0;
24
+ export const HALF_STAR_VALUE = 0.5;
package/dist/esm/helperComponents/RatingStar/RatingStar.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ import { KeyboardEventHandler } from 'react';
2
+ import { Appearance, Size } from '../../types.js';
3
+ import { Value } from './types.js';
4
+ export type RatingStarProps = {
5
+ /** Значение */
6
+ value?: Value;
7
+ /** Размер */
8
+ size?: Size;
9
+ /** Внешний вид (цветовая схема) */
10
+ appearance?: Appearance;
11
+ /** Является ли поле доступным на изменение */
12
+ readonly?: boolean;
13
+ /** CSS-класс */
14
+ className?: string;
15
+ /** Действие при наведении мыши */
16
+ handleMouseEnter?(value: Value): void;
17
+ /** Действие при уведении мыши */
18
+ handleMouseLeave?(): void;
19
+ /** Действие при нажатии на клавишу клавиатуры */
20
+ handleKeyDown?: KeyboardEventHandler<HTMLDivElement>;
21
+ /** Действие при клике части звезды мышью */
22
+ handleClick?(value: Value): void;
23
+ /** Стабильный идентификатор для e2e */
24
+ 'data-test-id'?: string;
25
+ };
26
+ /**
27
+ * Компонент RatingStar
28
+ */
29
+ export declare function RatingStar({ value, appearance, size, className, readonly, handleMouseEnter, handleMouseLeave, handleKeyDown, handleClick, 'data-test-id': dataTestId, }: RatingStarProps): import("react/jsx-runtime").JSX.Element;
package/dist/esm/helperComponents/RatingStar/RatingStar.js ADDED
@@ -0,0 +1,12 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { StarFilledSVG } from '@cloud-ru/ds-icons/interface/system';
3
+ import cn from 'classnames';
4
+ import { APPEARANCE, SIZE, TEST_IDS } from '../../constants.js';
5
+ import { VALUE } from './constants.js';
6
+ import styles from './styles.module.css';
7
+ /**
8
+ * Компонент RatingStar
9
+ */
10
+ export function RatingStar({ value = VALUE.Zero, appearance = APPEARANCE.Yellow, size = SIZE.S, className, readonly = false, handleMouseEnter, handleMouseLeave, handleKeyDown, handleClick, 'data-test-id': dataTestId, }) {
11
+ return (_jsxs("div", { className: cn(styles.ratingStar, className), onKeyDown: handleKeyDown, tabIndex: readonly ? undefined : 0, "data-value": value, "data-size": size, "data-appearance": appearance, "aria-checked": value !== VALUE.Zero, role: readonly ? undefined : 'radio', "data-test-id": dataTestId, children: [_jsx("div", { className: styles.firstStarContainer, "data-test-id": dataTestId ? TEST_IDS.starHalfLeft : undefined, onMouseEnter: handleMouseEnter ? () => handleMouseEnter(VALUE.Half) : undefined, onMouseLeave: handleMouseLeave || undefined, onClick: handleClick ? () => handleClick(VALUE.Half) : undefined, children: _jsx(StarFilledSVG, { className: styles.icon }) }), _jsx("div", { className: styles.secondStarContainer, "data-test-id": dataTestId ? TEST_IDS.starHalfRight : undefined, onMouseEnter: handleMouseEnter ? () => handleMouseEnter(VALUE.Full) : undefined, onMouseLeave: handleMouseLeave, onClick: handleClick ? () => handleClick(VALUE.Full) : undefined, children: _jsx(StarFilledSVG, { className: styles.icon }) })] }));
12
+ }
package/dist/esm/helperComponents/RatingStar/constants.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const VALUE: {
2
+ readonly Zero: "0%";
3
+ readonly Half: "50%";
4
+ readonly Full: "100%";
5
+ };
package/dist/esm/helperComponents/RatingStar/constants.js ADDED
@@ -0,0 +1,5 @@
1
+ export const VALUE = {
2
+ Zero: '0%',
3
+ Half: '50%',
4
+ Full: '100%',
5
+ };
package/dist/esm/helperComponents/RatingStar/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export * from './RatingStar.js';
2
+ export type { Value } from './types.js';
3
+ export { VALUE } from './constants.js';
package/dist/esm/helperComponents/RatingStar/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export * from './RatingStar.js';
2
+ export { VALUE } from './constants.js';
package/dist/esm/helperComponents/RatingStar/styles.module.css ADDED
@@ -0,0 +1,210 @@
1
+ .firstStarContainer{
2
+ position:absolute;
3
+ top:0;
4
+ left:0;
5
+ overflow:hidden;
6
+ width:50%;
7
+ }
8
+
9
+ .ratingStar{
10
+ cursor:pointer;
11
+ position:relative;
12
+ display:inline-block;
13
+ box-sizing:border-box;
14
+ }
15
+ .ratingStar svg{
16
+ display:block;
17
+ }
18
+ .ratingStar[data-size=xs]{
19
+ min-width:var(--sn-rating-anatomy-size-xs-container-minWidth, var(--sn-primitive-dimension-16, 16px));
20
+ min-height:var(--sn-rating-anatomy-size-xs-container-minHeight, var(--sn-primitive-dimension-16, 16px));
21
+ border-radius:var(--sn-rating-anatomy-size-xs-container-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-xs, var(--sn-primitive-dimension-2, 2px)));
22
+ }
23
+ .ratingStar[data-size=xs] svg{
24
+ width:var(--sn-rating-anatomy-size-xs-container-minWidth, var(--sn-primitive-dimension-16, 16px)) !important;
25
+ height:var(--sn-rating-anatomy-size-xs-container-minHeight, var(--sn-primitive-dimension-16, 16px)) !important;
26
+ }
27
+ .ratingStar[data-size=xs] .firstStarContainer,
28
+ .ratingStar[data-size=xs] .secondStarContainer{
29
+ height:var(--sn-rating-anatomy-size-xs-container-minHeight, var(--sn-primitive-dimension-16, 16px)) !important;
30
+ }
31
+ .ratingStar[data-size=s]{
32
+ min-width:var(--sn-rating-anatomy-size-s-container-minWidth, var(--sn-primitive-dimension-24, 24px));
33
+ border-radius:var(--sn-rating-anatomy-size-s-container-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-s, var(--sn-primitive-dimension-2, 2px)));
34
+ min-height:var(--sn-rating-anatomy-size-s-container-minHeight, var(--sn-primitive-dimension-24, 24px));
35
+ }
36
+ .ratingStar[data-size=s] svg{
37
+ width:var(--sn-rating-anatomy-size-s-container-minWidth, var(--sn-primitive-dimension-24, 24px)) !important;
38
+ height:var(--sn-rating-anatomy-size-s-container-minHeight, var(--sn-primitive-dimension-24, 24px)) !important;
39
+ }
40
+ .ratingStar[data-size=s] .firstStarContainer,
41
+ .ratingStar[data-size=s] .secondStarContainer{
42
+ height:var(--sn-rating-anatomy-size-s-container-minHeight, var(--sn-primitive-dimension-24, 24px)) !important;
43
+ }
44
+ .ratingStar:focus-visible{
45
+ border-radius:var(--sn-primitive-dimension-2, 2px);
46
+ outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
47
+ outline-offset:calc(-1 * var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
48
+ }
49
+ .ratingStar[data-appearance=primary][data-value="0%"] .firstStarContainer{
50
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
51
+ }
52
+ .ratingStar[data-appearance=primary][data-value="0%"] .secondStarContainer{
53
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
54
+ }
55
+ .ratingStar[data-appearance=primary][data-value="50%"] .firstStarContainer{
56
+ color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
57
+ }
58
+ .ratingStar[data-appearance=primary][data-value="50%"] .secondStarContainer{
59
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
60
+ }
61
+ .ratingStar[data-appearance=primary][data-value="100%"] .firstStarContainer{
62
+ color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
63
+ }
64
+ .ratingStar[data-appearance=primary][data-value="100%"] .secondStarContainer{
65
+ color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
66
+ }
67
+ .ratingStar[data-appearance=neutral][data-value="0%"] .firstStarContainer{
68
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
69
+ }
70
+ .ratingStar[data-appearance=neutral][data-value="0%"] .secondStarContainer{
71
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
72
+ }
73
+ .ratingStar[data-appearance=neutral][data-value="50%"] .firstStarContainer{
74
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
75
+ }
76
+ .ratingStar[data-appearance=neutral][data-value="50%"] .secondStarContainer{
77
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
78
+ }
79
+ .ratingStar[data-appearance=neutral][data-value="100%"] .firstStarContainer{
80
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
81
+ }
82
+ .ratingStar[data-appearance=neutral][data-value="100%"] .secondStarContainer{
83
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
84
+ }
85
+ .ratingStar[data-appearance=red][data-value="0%"] .firstStarContainer{
86
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
87
+ }
88
+ .ratingStar[data-appearance=red][data-value="0%"] .secondStarContainer{
89
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
90
+ }
91
+ .ratingStar[data-appearance=red][data-value="50%"] .firstStarContainer{
92
+ color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
93
+ }
94
+ .ratingStar[data-appearance=red][data-value="50%"] .secondStarContainer{
95
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
96
+ }
97
+ .ratingStar[data-appearance=red][data-value="100%"] .firstStarContainer{
98
+ color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
99
+ }
100
+ .ratingStar[data-appearance=red][data-value="100%"] .secondStarContainer{
101
+ color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
102
+ }
103
+ .ratingStar[data-appearance=orange][data-value="0%"] .firstStarContainer{
104
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
105
+ }
106
+ .ratingStar[data-appearance=orange][data-value="0%"] .secondStarContainer{
107
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
108
+ }
109
+ .ratingStar[data-appearance=orange][data-value="50%"] .firstStarContainer{
110
+ color:var(--sn-theme-color-orange-accent, var(--sn-primitive-color-orange-55, #f57e1f));
111
+ }
112
+ .ratingStar[data-appearance=orange][data-value="50%"] .secondStarContainer{
113
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
114
+ }
115
+ .ratingStar[data-appearance=orange][data-value="100%"] .firstStarContainer{
116
+ color:var(--sn-theme-color-orange-accent, var(--sn-primitive-color-orange-55, #f57e1f));
117
+ }
118
+ .ratingStar[data-appearance=orange][data-value="100%"] .secondStarContainer{
119
+ color:var(--sn-theme-color-orange-accent, var(--sn-primitive-color-orange-55, #f57e1f));
120
+ }
121
+ .ratingStar[data-appearance=yellow][data-value="0%"] .firstStarContainer{
122
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
123
+ }
124
+ .ratingStar[data-appearance=yellow][data-value="0%"] .secondStarContainer{
125
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
126
+ }
127
+ .ratingStar[data-appearance=yellow][data-value="50%"] .firstStarContainer{
128
+ color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
129
+ }
130
+ .ratingStar[data-appearance=yellow][data-value="50%"] .secondStarContainer{
131
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
132
+ }
133
+ .ratingStar[data-appearance=yellow][data-value="100%"] .firstStarContainer{
134
+ color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
135
+ }
136
+ .ratingStar[data-appearance=yellow][data-value="100%"] .secondStarContainer{
137
+ color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
138
+ }
139
+ .ratingStar[data-appearance=green][data-value="0%"] .firstStarContainer{
140
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
141
+ }
142
+ .ratingStar[data-appearance=green][data-value="0%"] .secondStarContainer{
143
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
144
+ }
145
+ .ratingStar[data-appearance=green][data-value="50%"] .firstStarContainer{
146
+ color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
147
+ }
148
+ .ratingStar[data-appearance=green][data-value="50%"] .secondStarContainer{
149
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
150
+ }
151
+ .ratingStar[data-appearance=green][data-value="100%"] .firstStarContainer{
152
+ color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
153
+ }
154
+ .ratingStar[data-appearance=green][data-value="100%"] .secondStarContainer{
155
+ color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
156
+ }
157
+ .ratingStar[data-appearance=blue][data-value="0%"] .firstStarContainer{
158
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
159
+ }
160
+ .ratingStar[data-appearance=blue][data-value="0%"] .secondStarContainer{
161
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
162
+ }
163
+ .ratingStar[data-appearance=blue][data-value="50%"] .firstStarContainer{
164
+ color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
165
+ }
166
+ .ratingStar[data-appearance=blue][data-value="50%"] .secondStarContainer{
167
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
168
+ }
169
+ .ratingStar[data-appearance=blue][data-value="100%"] .firstStarContainer{
170
+ color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
171
+ }
172
+ .ratingStar[data-appearance=blue][data-value="100%"] .secondStarContainer{
173
+ color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
174
+ }
175
+ .ratingStar[data-appearance=violet][data-value="0%"] .firstStarContainer{
176
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
177
+ }
178
+ .ratingStar[data-appearance=violet][data-value="0%"] .secondStarContainer{
179
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
180
+ }
181
+ .ratingStar[data-appearance=violet][data-value="50%"] .firstStarContainer{
182
+ color:var(--sn-theme-color-violet-accent, var(--sn-primitive-color-violet-55, #b163cc));
183
+ }
184
+ .ratingStar[data-appearance=violet][data-value="50%"] .secondStarContainer{
185
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
186
+ }
187
+ .ratingStar[data-appearance=violet][data-value="100%"] .firstStarContainer{
188
+ color:var(--sn-theme-color-violet-accent, var(--sn-primitive-color-violet-55, #b163cc));
189
+ }
190
+ .ratingStar[data-appearance=violet][data-value="100%"] .secondStarContainer{
191
+ color:var(--sn-theme-color-violet-accent, var(--sn-primitive-color-violet-55, #b163cc));
192
+ }
193
+ .ratingStar[data-appearance=pink][data-value="0%"] .firstStarContainer{
194
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
195
+ }
196
+ .ratingStar[data-appearance=pink][data-value="0%"] .secondStarContainer{
197
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
198
+ }
199
+ .ratingStar[data-appearance=pink][data-value="50%"] .firstStarContainer{
200
+ color:var(--sn-theme-color-pink-accent, var(--sn-primitive-color-pink-55, #dd5a8e));
201
+ }
202
+ .ratingStar[data-appearance=pink][data-value="50%"] .secondStarContainer{
203
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
204
+ }
205
+ .ratingStar[data-appearance=pink][data-value="100%"] .firstStarContainer{
206
+ color:var(--sn-theme-color-pink-accent, var(--sn-primitive-color-pink-55, #dd5a8e));
207
+ }
208
+ .ratingStar[data-appearance=pink][data-value="100%"] .secondStarContainer{
209
+ color:var(--sn-theme-color-pink-accent, var(--sn-primitive-color-pink-55, #dd5a8e));
210
+ }
package/dist/esm/helperComponents/RatingStar/types.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { ValueOf } from '@cloud-ru/ds-utils';
2
+ import { VALUE } from './constants.js';
3
+ export type Value = ValueOf<typeof VALUE>;
package/dist/esm/helperComponents/RatingStar/types.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/esm/helperComponents/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './RatingStar/index.js';
package/dist/esm/helperComponents/index.js ADDED
@@ -0,0 +1 @@
1
+ export * from './RatingStar/index.js';
package/dist/esm/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export * from './components/index.js';
2
+ export * from './constants.js';
3
+ export * from './types.js';
package/dist/esm/index.js ADDED
@@ -0,0 +1,3 @@
1
+ export * from './components/index.js';
2
+ export * from './constants.js';
3
+ export * from './types.js';
package/dist/esm/style.css ADDED
@@ -0,0 +1,214 @@
1
+ .rating{
2
+ display:inline-flex;
3
+ align-items:center;
4
+ }
5
+ .firstStarContainer{
6
+ position:absolute;
7
+ top:0;
8
+ left:0;
9
+ overflow:hidden;
10
+ width:50%;
11
+ }
12
+
13
+ .ratingStar{
14
+ cursor:pointer;
15
+ position:relative;
16
+ display:inline-block;
17
+ box-sizing:border-box;
18
+ }
19
+ .ratingStar svg{
20
+ display:block;
21
+ }
22
+ .ratingStar[data-size=xs]{
23
+ min-width:var(--sn-rating-anatomy-size-xs-container-minWidth, var(--sn-primitive-dimension-16, 16px));
24
+ min-height:var(--sn-rating-anatomy-size-xs-container-minHeight, var(--sn-primitive-dimension-16, 16px));
25
+ border-radius:var(--sn-rating-anatomy-size-xs-container-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-xs, var(--sn-primitive-dimension-2, 2px)));
26
+ }
27
+ .ratingStar[data-size=xs] svg{
28
+ width:var(--sn-rating-anatomy-size-xs-container-minWidth, var(--sn-primitive-dimension-16, 16px)) !important;
29
+ height:var(--sn-rating-anatomy-size-xs-container-minHeight, var(--sn-primitive-dimension-16, 16px)) !important;
30
+ }
31
+ .ratingStar[data-size=xs] .firstStarContainer,
32
+ .ratingStar[data-size=xs] .secondStarContainer{
33
+ height:var(--sn-rating-anatomy-size-xs-container-minHeight, var(--sn-primitive-dimension-16, 16px)) !important;
34
+ }
35
+ .ratingStar[data-size=s]{
36
+ min-width:var(--sn-rating-anatomy-size-s-container-minWidth, var(--sn-primitive-dimension-24, 24px));
37
+ border-radius:var(--sn-rating-anatomy-size-s-container-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-s, var(--sn-primitive-dimension-2, 2px)));
38
+ min-height:var(--sn-rating-anatomy-size-s-container-minHeight, var(--sn-primitive-dimension-24, 24px));
39
+ }
40
+ .ratingStar[data-size=s] svg{
41
+ width:var(--sn-rating-anatomy-size-s-container-minWidth, var(--sn-primitive-dimension-24, 24px)) !important;
42
+ height:var(--sn-rating-anatomy-size-s-container-minHeight, var(--sn-primitive-dimension-24, 24px)) !important;
43
+ }
44
+ .ratingStar[data-size=s] .firstStarContainer,
45
+ .ratingStar[data-size=s] .secondStarContainer{
46
+ height:var(--sn-rating-anatomy-size-s-container-minHeight, var(--sn-primitive-dimension-24, 24px)) !important;
47
+ }
48
+ .ratingStar:focus-visible{
49
+ border-radius:var(--sn-primitive-dimension-2, 2px);
50
+ outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
51
+ outline-offset:calc(-1 * var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
52
+ }
53
+ .ratingStar[data-appearance=primary][data-value="0%"] .firstStarContainer{
54
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
55
+ }
56
+ .ratingStar[data-appearance=primary][data-value="0%"] .secondStarContainer{
57
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
58
+ }
59
+ .ratingStar[data-appearance=primary][data-value="50%"] .firstStarContainer{
60
+ color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
61
+ }
62
+ .ratingStar[data-appearance=primary][data-value="50%"] .secondStarContainer{
63
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
64
+ }
65
+ .ratingStar[data-appearance=primary][data-value="100%"] .firstStarContainer{
66
+ color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
67
+ }
68
+ .ratingStar[data-appearance=primary][data-value="100%"] .secondStarContainer{
69
+ color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
70
+ }
71
+ .ratingStar[data-appearance=neutral][data-value="0%"] .firstStarContainer{
72
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
73
+ }
74
+ .ratingStar[data-appearance=neutral][data-value="0%"] .secondStarContainer{
75
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
76
+ }
77
+ .ratingStar[data-appearance=neutral][data-value="50%"] .firstStarContainer{
78
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
79
+ }
80
+ .ratingStar[data-appearance=neutral][data-value="50%"] .secondStarContainer{
81
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
82
+ }
83
+ .ratingStar[data-appearance=neutral][data-value="100%"] .firstStarContainer{
84
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
85
+ }
86
+ .ratingStar[data-appearance=neutral][data-value="100%"] .secondStarContainer{
87
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
88
+ }
89
+ .ratingStar[data-appearance=red][data-value="0%"] .firstStarContainer{
90
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
91
+ }
92
+ .ratingStar[data-appearance=red][data-value="0%"] .secondStarContainer{
93
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
94
+ }
95
+ .ratingStar[data-appearance=red][data-value="50%"] .firstStarContainer{
96
+ color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
97
+ }
98
+ .ratingStar[data-appearance=red][data-value="50%"] .secondStarContainer{
99
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
100
+ }
101
+ .ratingStar[data-appearance=red][data-value="100%"] .firstStarContainer{
102
+ color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
103
+ }
104
+ .ratingStar[data-appearance=red][data-value="100%"] .secondStarContainer{
105
+ color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
106
+ }
107
+ .ratingStar[data-appearance=orange][data-value="0%"] .firstStarContainer{
108
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
109
+ }
110
+ .ratingStar[data-appearance=orange][data-value="0%"] .secondStarContainer{
111
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
112
+ }
113
+ .ratingStar[data-appearance=orange][data-value="50%"] .firstStarContainer{
114
+ color:var(--sn-theme-color-orange-accent, var(--sn-primitive-color-orange-55, #f57e1f));
115
+ }
116
+ .ratingStar[data-appearance=orange][data-value="50%"] .secondStarContainer{
117
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
118
+ }
119
+ .ratingStar[data-appearance=orange][data-value="100%"] .firstStarContainer{
120
+ color:var(--sn-theme-color-orange-accent, var(--sn-primitive-color-orange-55, #f57e1f));
121
+ }
122
+ .ratingStar[data-appearance=orange][data-value="100%"] .secondStarContainer{
123
+ color:var(--sn-theme-color-orange-accent, var(--sn-primitive-color-orange-55, #f57e1f));
124
+ }
125
+ .ratingStar[data-appearance=yellow][data-value="0%"] .firstStarContainer{
126
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
127
+ }
128
+ .ratingStar[data-appearance=yellow][data-value="0%"] .secondStarContainer{
129
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
130
+ }
131
+ .ratingStar[data-appearance=yellow][data-value="50%"] .firstStarContainer{
132
+ color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
133
+ }
134
+ .ratingStar[data-appearance=yellow][data-value="50%"] .secondStarContainer{
135
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
136
+ }
137
+ .ratingStar[data-appearance=yellow][data-value="100%"] .firstStarContainer{
138
+ color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
139
+ }
140
+ .ratingStar[data-appearance=yellow][data-value="100%"] .secondStarContainer{
141
+ color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
142
+ }
143
+ .ratingStar[data-appearance=green][data-value="0%"] .firstStarContainer{
144
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
145
+ }
146
+ .ratingStar[data-appearance=green][data-value="0%"] .secondStarContainer{
147
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
148
+ }
149
+ .ratingStar[data-appearance=green][data-value="50%"] .firstStarContainer{
150
+ color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
151
+ }
152
+ .ratingStar[data-appearance=green][data-value="50%"] .secondStarContainer{
153
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
154
+ }
155
+ .ratingStar[data-appearance=green][data-value="100%"] .firstStarContainer{
156
+ color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
157
+ }
158
+ .ratingStar[data-appearance=green][data-value="100%"] .secondStarContainer{
159
+ color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
160
+ }
161
+ .ratingStar[data-appearance=blue][data-value="0%"] .firstStarContainer{
162
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
163
+ }
164
+ .ratingStar[data-appearance=blue][data-value="0%"] .secondStarContainer{
165
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
166
+ }
167
+ .ratingStar[data-appearance=blue][data-value="50%"] .firstStarContainer{
168
+ color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
169
+ }
170
+ .ratingStar[data-appearance=blue][data-value="50%"] .secondStarContainer{
171
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
172
+ }
173
+ .ratingStar[data-appearance=blue][data-value="100%"] .firstStarContainer{
174
+ color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
175
+ }
176
+ .ratingStar[data-appearance=blue][data-value="100%"] .secondStarContainer{
177
+ color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
178
+ }
179
+ .ratingStar[data-appearance=violet][data-value="0%"] .firstStarContainer{
180
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
181
+ }
182
+ .ratingStar[data-appearance=violet][data-value="0%"] .secondStarContainer{
183
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
184
+ }
185
+ .ratingStar[data-appearance=violet][data-value="50%"] .firstStarContainer{
186
+ color:var(--sn-theme-color-violet-accent, var(--sn-primitive-color-violet-55, #b163cc));
187
+ }
188
+ .ratingStar[data-appearance=violet][data-value="50%"] .secondStarContainer{
189
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
190
+ }
191
+ .ratingStar[data-appearance=violet][data-value="100%"] .firstStarContainer{
192
+ color:var(--sn-theme-color-violet-accent, var(--sn-primitive-color-violet-55, #b163cc));
193
+ }
194
+ .ratingStar[data-appearance=violet][data-value="100%"] .secondStarContainer{
195
+ color:var(--sn-theme-color-violet-accent, var(--sn-primitive-color-violet-55, #b163cc));
196
+ }
197
+ .ratingStar[data-appearance=pink][data-value="0%"] .firstStarContainer{
198
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
199
+ }
200
+ .ratingStar[data-appearance=pink][data-value="0%"] .secondStarContainer{
201
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
202
+ }
203
+ .ratingStar[data-appearance=pink][data-value="50%"] .firstStarContainer{
204
+ color:var(--sn-theme-color-pink-accent, var(--sn-primitive-color-pink-55, #dd5a8e));
205
+ }
206
+ .ratingStar[data-appearance=pink][data-value="50%"] .secondStarContainer{
207
+ color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
208
+ }
209
+ .ratingStar[data-appearance=pink][data-value="100%"] .firstStarContainer{
210
+ color:var(--sn-theme-color-pink-accent, var(--sn-primitive-color-pink-55, #dd5a8e));
211
+ }
212
+ .ratingStar[data-appearance=pink][data-value="100%"] .secondStarContainer{
213
+ color:var(--sn-theme-color-pink-accent, var(--sn-primitive-color-pink-55, #dd5a8e));
214
+ }
package/dist/esm/types.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { ValueOf } from '@cloud-ru/ds-utils';
2
+ import { APPEARANCE, SIZE } from './constants.js';
3
+ export type Appearance = ValueOf<typeof APPEARANCE>;
4
+ export type Size = ValueOf<typeof SIZE>;
package/dist/esm/types.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/esm/utils.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { Value } from './helperComponents/index.js';
2
+ export declare function getRatingStarValue(starIndex: number, rating: number, allowHalf: boolean): Value;
3
+ export declare function getStarValue(starIndex: number, value: Value, allowHalf: boolean): number;
package/dist/esm/utils.js ADDED
@@ -0,0 +1,15 @@
1
+ import { HALF_STAR_VALUE } from './constants.js';
2
+ import { VALUE } from './helperComponents/index.js';
3
+ export function getRatingStarValue(starIndex, rating, allowHalf) {
4
+ const diff = rating - starIndex;
5
+ if (diff >= 0) {
6
+ return VALUE.Full;
7
+ }
8
+ if (allowHalf && diff === HALF_STAR_VALUE * -1) {
9
+ return VALUE.Half;
10
+ }
11
+ return VALUE.Zero;
12
+ }
13
+ export function getStarValue(starIndex, value, allowHalf) {
14
+ return allowHalf && value === VALUE.Half ? starIndex - HALF_STAR_VALUE : starIndex;
15
+ }