@snack-uikit/counter 0.5.0 → 0.6.1-preview-993a9cfb.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.6.0 (2023-12-28)
+
+
+### Features
+
+* **FF-3960:** add new prop color ([3adaa4c](https://github.com/cloud-ru-tech/snack-uikit/commit/3adaa4c7cc3018607a50446caec2fb62dd680fd3))
+
+
+
+
+
 # 0.5.0 (2023-12-14)
 
 

package/README.md

@@ -36,6 +36,7 @@ import { Counter } from "@snack-uikit/counter";
 | size | enum Size: `"s"`, `"m"` | s | Размер |
 | plusLimit | `number` | 10 | Порог сокращения значения в формат v+. Например `1500` -> `999+` для 1000 |
 | className | `string` | - | CSS-класс |
+| color | enum Color: `"accent"`, `"decor"` | accent | Семантический цвет |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/components/Counter.d.ts

@@ -1,5 +1,5 @@
 import { WithSupportProps } from '@snack-uikit/utils';
-import { Appearance, Size, Variant } from './types';
+import { Appearance, Color, Size, Variant } from './types';
 export type CounterProps = WithSupportProps<{
     /** Значение */
     value: number;
@@ -13,6 +13,8 @@ export type CounterProps = WithSupportProps<{
     plusLimit?: number;
     /** CSS-класс */
     className?: string;
+    /** Семантический цвет */
+    color?: Color;
 }>;
 /** Компонент счетчик */
-export declare function Counter({ value, appearance, variant, size, plusLimit, className, ...rest }: CounterProps): import("react/jsx-runtime").JSX.Element;
+export declare function Counter({ value, appearance, variant, size, plusLimit, color, className, ...rest }: CounterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Counter.js

@@ -12,12 +12,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { APPEARANCE, DEFAULT_PLUS_LIMIT, SIZE, VARIANT } from './constants';
+import { APPEARANCE, COLOR, DEFAULT_PLUS_LIMIT, SIZE, VARIANT } from './constants';
 import classNames from './styles.module.css';
 import { formatValue } from './utils';
 /** Компонент счетчик */
 export function Counter(_a) {
-    var { value, appearance = APPEARANCE.Primary, variant = VARIANT.Count, size = SIZE.S, plusLimit = DEFAULT_PLUS_LIMIT, className } = _a, rest = __rest(_a, ["value", "appearance", "variant", "size", "plusLimit", "className"]);
+    var { value, appearance = APPEARANCE.Primary, variant = VARIANT.Count, size = SIZE.S, plusLimit = DEFAULT_PLUS_LIMIT, color = COLOR.Accent, className } = _a, rest = __rest(_a, ["value", "appearance", "variant", "size", "plusLimit", "color", "className"]);
     const formattedValue = formatValue({ value, variant, plusLimit });
-    return (_jsx("div", Object.assign({ className: cn(classNames.counter, className) }, extractSupportProps(rest), { "data-size": size, "data-variant": variant, "data-appearance": appearance }, { children: formattedValue })));
+    return (_jsx("div", Object.assign({ className: cn(classNames.counter, className) }, extractSupportProps(rest), { "data-size": size, "data-variant": variant, "data-appearance": appearance, "data-color": color, children: formattedValue })));
 }

package/dist/components/constants.d.ts

@@ -12,6 +12,10 @@ export declare const SIZE: {
     readonly S: "s";
     readonly M: "m";
 };
+export declare const COLOR: {
+    readonly Accent: "accent";
+    readonly Decor: "decor";
+};
 export declare const DEFAULT_PLUS_LIMIT = 10;
 export declare const DEFAULT_KEY_LIMIT = 1000;
 export declare const DEFAULT_KEY_POSTFIX = "K";

package/dist/components/constants.js

@@ -12,6 +12,10 @@ export const SIZE = {
     S: 's',
     M: 'm',
 };
+export const COLOR = {
+    Accent: 'accent',
+    Decor: 'decor',
+};
 export const DEFAULT_PLUS_LIMIT = 10;
 export const DEFAULT_KEY_LIMIT = 1000;
 export const DEFAULT_KEY_POSTFIX = 'K';

package/dist/components/styles.module.css

@@ -7,20 +7,35 @@
   width:max-content;
   border:0 solid transparent;
 }
-.counter[data-appearance=primary]{
+.counter[data-color=accent][data-appearance=primary]{
   color:var(--sys-primary-on-accent, #fdfbff);
   background-color:var(--sys-primary-accent-default, #794ed3);
-  border-color:var(--sys-neutral-background1-level, #f9f9f9);
+  border-color:var(--sys-neutral-background1-level, #fafafc);
 }
-.counter[data-appearance=neutral]{
-  color:var(--sys-neutral-on-accent, #fdfdfd);
-  background-color:var(--sys-neutral-accent-default, #757575);
-  border-color:var(--sys-neutral-background1-level, #f9f9f9);
+.counter[data-color=accent][data-appearance=neutral]{
+  color:var(--sys-neutral-on-accent, #ffffff);
+  background-color:var(--sys-neutral-accent-default, #6f717c);
+  border-color:var(--sys-neutral-background1-level, #fafafc);
 }
-.counter[data-appearance=red]{
-  color:var(--sys-red-on-accent, #fffbfa);
-  background-color:var(--sys-red-accent-default, #d93f2f);
-  border-color:var(--sys-neutral-background1-level, #f9f9f9);
+.counter[data-color=accent][data-appearance=red]{
+  color:var(--sys-red-on-accent, #fffbf9);
+  background-color:var(--sys-red-accent-default, #cd3c3c);
+  border-color:var(--sys-neutral-background1-level, #fafafc);
+}
+.counter[data-color=decor][data-appearance=primary]{
+  color:var(--sys-primary-text-main, #382a62);
+  background-color:var(--sys-primary-decor-default, #ebdefd);
+  border-color:var(--sys-neutral-background1-level, #fafafc);
+}
+.counter[data-color=decor][data-appearance=neutral]{
+  color:var(--sys-neutral-text-main, #33333b);
+  background-color:var(--sys-neutral-decor-default, #dfe2ec);
+  border-color:var(--sys-neutral-background1-level, #fafafc);
+}
+.counter[data-color=decor][data-appearance=red]{
+  color:var(--sys-red-text-main, #621c1b);
+  background-color:var(--sys-red-decor-default, #fdd6cd);
+  border-color:var(--sys-neutral-background1-level, #fafafc);
 }
 .counter[data-size=s]{
   font-family:var(--sans-label-s-font-family, SB Sans Interface);
@@ -30,7 +45,7 @@
   letter-spacing:var(--sans-label-s-letter-spacing, -0.1px);
   paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
   border-radius:var(--radius-counter-s, 8px);
-  height:var(--dimension-theme-general-16px, 16px);
+  height:var(--size-counter-s-height, 16px);
   min-width:var(--size-counter-s-minimal-width, 16px);
   padding-right:var(--space-counter-s, 2.5px);
   padding-left:var(--space-counter-s, 2.5px);
@@ -60,7 +75,7 @@
   letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
   paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
   border-radius:var(--radius-counter-m, 16px);
-  height:var(--dimension-theme-general-24px, 24px);
+  height:var(--size-counter-m-height, 24px);
   min-width:var(--size-counter-m-minimal-width, 24px);
   padding-right:var(--space-counter-m, 4.5px);
   padding-left:var(--space-counter-m, 4.5px);

package/dist/components/types.d.ts

@@ -1,5 +1,6 @@
 import { ValueOf } from '@snack-uikit/utils';
-import { APPEARANCE, SIZE, VARIANT } from './constants';
+import { APPEARANCE, COLOR, SIZE, VARIANT } from './constants';
 export type Appearance = ValueOf<typeof APPEARANCE>;
 export type Size = ValueOf<typeof SIZE>;
 export type Variant = ValueOf<typeof VARIANT>;
+export type Color = ValueOf<typeof COLOR>;

package/dist/components/utils.js

@@ -6,9 +6,9 @@ export function formatValue({ value, variant, plusLimit, }) {
         return value;
     }
     if (variant === VARIANT.CountPlus) {
-        return value < plusLimit ? (value) : (_jsxs(_Fragment, { children: [plusLimit - 1, _jsx("span", Object.assign({ className: styles.plus }, { children: "+" }))] }));
+        return value < plusLimit ? (value) : (_jsxs(_Fragment, { children: [plusLimit - 1, _jsx("span", { className: styles.plus, children: "+" })] }));
     }
     if (variant === VARIANT.CountK) {
-        return value < DEFAULT_KEY_LIMIT ? (value) : (_jsxs(_Fragment, { children: [Math.round(value / DEFAULT_KEY_LIMIT), _jsx("span", Object.assign({ className: styles.key }, { children: DEFAULT_KEY_POSTFIX }))] }));
+        return value < DEFAULT_KEY_LIMIT ? (value) : (_jsxs(_Fragment, { children: [Math.round(value / DEFAULT_KEY_LIMIT), _jsx("span", { className: styles.key, children: DEFAULT_KEY_POSTFIX })] }));
     }
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Counter",
-  "version": "0.5.0",
+  "version": "0.6.1-preview-993a9cfb.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -35,5 +35,5 @@
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "bd39c5e674f3b91b0e2487782a04b15034cf3d8b"
+  "gitHead": "a421965dc78af63a8c292e595b3f0a8ff1be86f9"
 }

package/src/components/Counter.tsx

@@ -2,9 +2,9 @@ import cn from 'classnames';
 
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { APPEARANCE, DEFAULT_PLUS_LIMIT, SIZE, VARIANT } from './constants';
+import { APPEARANCE, COLOR, DEFAULT_PLUS_LIMIT, SIZE, VARIANT } from './constants';
 import classNames from './styles.module.scss';
-import { Appearance, Size, Variant } from './types';
+import { Appearance, Color, Size, Variant } from './types';
 import { formatValue } from './utils';
 
 export type CounterProps = WithSupportProps<{
@@ -20,6 +20,8 @@ export type CounterProps = WithSupportProps<{
   plusLimit?: number;
   /** CSS-класс */
   className?: string;
+  /** Семантический цвет */
+  color?: Color;
 }>;
 
 /** Компонент счетчик */
@@ -29,6 +31,7 @@ export function Counter({
   variant = VARIANT.Count,
   size = SIZE.S,
   plusLimit = DEFAULT_PLUS_LIMIT,
+  color = COLOR.Accent,
   className,
   ...rest
 }: CounterProps) {
@@ -41,6 +44,7 @@ export function Counter({
       data-size={size}
       data-variant={variant}
       data-appearance={appearance}
+      data-color={color}
     >
       {formattedValue}
     </div>

package/src/components/constants.ts

@@ -15,6 +15,11 @@ export const SIZE = {
   M: 'm',
 } as const;
 
+export const COLOR = {
+  Accent: 'accent',
+  Decor: 'decor',
+} as const;
+
 export const DEFAULT_PLUS_LIMIT = 10;
 export const DEFAULT_KEY_LIMIT = 1000;
 export const DEFAULT_KEY_POSTFIX = 'K';

package/src/components/styles.module.scss

@@ -1,8 +1,9 @@
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-counter';
 
-$appearances: 'primary', 'neutral', 'red';
 $sizes: 's', 'm';
+$appearances: 'primary', 'neutral', 'red';
 $variants: 'count', 'count-plus', 'count-k';
+$colors: 'accent', 'decor';
 
 $value-typography: (
   s: $sans-label-s,
@@ -16,6 +17,14 @@ $key-typography: (
   s: $sans-label-s,
   m: $sans-label-l
 );
+$text-color: (
+  accent: 'on-accent',
+  decor: 'text-main'
+);
+$bg-color: (
+  accent: 'accent-default',
+  decor: 'decor-default'
+);
 
 .counter {
   display: inline-flex;
@@ -27,11 +36,18 @@ $key-typography: (
 
   border: 0 solid transparent;
 
-  @each $appearance in $appearances {
-    &[data-appearance='#{$appearance}'] {
-      color: simple-var($theme-variables, 'sys', $appearance, 'on-accent');
-      background-color: simple-var($theme-variables, 'sys', $appearance, 'accent-default');
-      border-color: $sys-neutral-background1-level;
+  @each $color in $colors {
+    @each $appearance in $appearances {
+      &[data-color='#{$color}'] {
+        &[data-appearance='#{$appearance}'] {
+          $text: simple-var($text-color, $color);
+          $background: simple-var($bg-color, $color);
+
+          color: simple-var($theme-variables, 'sys', $appearance, $text);
+          background-color: simple-var($theme-variables, 'sys', $appearance, $background);
+          border-color: $sys-neutral-background1-level;
+        }
+      }
     }
   }
 

package/src/components/types.ts

@@ -1,7 +1,8 @@
 import { ValueOf } from '@snack-uikit/utils';
 
-import { APPEARANCE, SIZE, VARIANT } from './constants';
+import { APPEARANCE, COLOR, SIZE, VARIANT } from './constants';
 
 export type Appearance = ValueOf<typeof APPEARANCE>;
 export type Size = ValueOf<typeof SIZE>;
 export type Variant = ValueOf<typeof VARIANT>;
+export type Color = ValueOf<typeof COLOR>;